/* ============================================================
   INCLUSIVE FORGE — landing scenes.
   The product's own hero artefact and idea scenes; the shared
   grammar (hold/stage, ritual, panels) lives in foundry-scene.css.
   Loaded only on this site's front page (inc/enqueue.php).
   Fail-safe: static markup IS the end state — the scrub in
   assets/js/scenes/inclusiveforge.js only replays how it got there.
   ============================================================ */

.if-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px, 4vw, 64px); align-items: center; }
/* ============================================================
   INCLUSIVE — «Линзы»: the checkout, the ring, the lens
   ============================================================ */
.if-stage { position: relative; max-width: 470px; margin-inline: auto; width: 100%; }
.if-checkout {
  position: relative; border-radius: 16px; padding: 18px 18px 20px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  display: grid; gap: 12px;
  transition: filter 260ms cubic-bezier(.2,.6,.2,1);
}
.if-checkout.is-lowvision { filter: blur(2.2px) contrast(.62) brightness(.85); }
.if-co__head { display: flex; justify-content: space-between; font-weight: 600; color: var(--fdry-ink, #ECEEF7); font-size: .95rem; }
.if-co__head span { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400; font-size: .72rem; color: var(--fdry-ink-faint, #6B7299); }
.if-co__field { display: grid; gap: 5px; }
.if-co__label { font-size: .74rem; color: var(--fdry-ink-soft, #A7AEC8); }
.if-co__input {
  font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .92rem;
  color: var(--fdry-ink, #ECEEF7); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 9px 12px;
}
.if-co__cart {
  display: flex; justify-content: space-between; align-items: baseline;
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 9px 12px;
  color: var(--fdry-ink-soft, #A7AEC8); font-size: .84rem;
}
.if-co__cart b { color: var(--fdry-ink, #ECEEF7); }
.if-co__pay {
  font: 600 .92rem Inter, sans-serif; color: #fff; cursor: default;
  background: var(--accent, #2456D6); border: 0; border-radius: 10px; padding: 12px;
}
/* the brand: the focus ring itself */
.if-ring {
  position: absolute; left: 14px; top: 96px; width: calc(100% - 28px); height: 44px; opacity: 0;
  border: 3px solid #2456D6; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2456D6 25%, transparent);
  will-change: transform, width, height, opacity;
}
/* The lens badge sits clear of the checkout's own chrome — over the store
   name it read as part of the mock, which is the one thing it is not. */
.if-lens {
  position: absolute; left: -10px; top: -18px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem;
  color: var(--fdry-ink-soft, #A7AEC8);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px;
  padding: 7px 13px; background: rgba(11,14,32,.85); backdrop-filter: blur(6px);
}
.if-panel { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.if-step__k {
  display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent-light, #60A5FA); margin-bottom: 8px; /* the deep blue accent is < 4.5:1 on the dark canvas; the light accent carries the kicker */
}
.if-step p { color: var(--fdry-ink-soft, #A7AEC8); font-size: 1rem; line-height: 1.62; margin: 0; max-width: 52ch; }
.if-heard { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; margin-bottom: 8px; }
.if-heard__k { color: var(--fdry-ink-soft, #A7AEC8); }
.if-heard code { color: var(--fdry-ink, #ECEEF7); background: rgba(255,255,255,.06); border-radius: 6px; padding: 3px 8px; }
/* Inclusive — the law strip + the auditor folder */
/* Six law facts. auto-fit fitted five across and orphaned the sixth on a row
   of its own, so the track count is stated: 3 + 3 wide, 2 + 2 + 2 on tablet,
   stacked on the phone — every row full. */
.if-facts {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 560px) { .if-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .if-facts { grid-template-columns: repeat(3, 1fr); } }
.if-fact {
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px 18px;
  background: rgba(255,255,255,.035);
}
.if-fact b { display: block; font-family: "JetBrains Mono", monospace; color: var(--fdry-ink, #ECEEF7); font-size: 1.02rem; margin-bottom: 5px; }
.if-fact span { font-size: .82rem; color: var(--fdry-ink-soft, #A7AEC8); line-height: 1.5; }

/* ============================================================
   HERO ARTEFACT — the lens (hero-inclusiveforge.php)
   ============================================================ */
.ifh { max-width: 430px; margin-inline: auto; }
.ifh-mode {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--accent-light, #60A5FA); text-transform: none; letter-spacing: 0;
}
/* The lens: a round port with a thin rim, and the checkout living inside it.
   The rim is the brand's focus ring — the element most sites hide. */
.ifh-glass {
  position: relative; aspect-ratio: 1; margin: 18px auto; width: min(100%, 320px);
  border-radius: 50%; overflow: hidden;
  border: 3px solid color-mix(in srgb, #2456D6 70%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, #2456D6 12%, transparent),
              inset 0 0 42px rgba(0,0,0,.45);
  background: rgba(255,255,255,.035);
  display: grid; place-items: center;
}
.ifh-co {
  position: relative; width: 74%; display: grid; gap: 10px;
  transition: filter 620ms cubic-bezier(.2,.6,.2,1), opacity 620ms cubic-bezier(.2,.6,.2,1);
}
/* Low vision is a filter on the same markup, not a different drawing. */
.ifh-glass.is-vision .ifh-co { filter: blur(2.4px) contrast(.6) brightness(.86); }
.ifh-glass.is-sr .ifh-co { opacity: .12; }
.ifh-co__head { display: flex; justify-content: space-between; font-weight: 600; font-size: .82rem; color: var(--fdry-ink, #ECEEF7); }
.ifh-co__head span { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400; font-size: .62rem; color: var(--fdry-ink-faint, #6B7299); }
.ifh-co__field { display: grid; gap: 4px; }
.ifh-co__label { font-size: .66rem; color: var(--fdry-ink-soft, #A7AEC8); }
.ifh-co__input {
  font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem;
  color: var(--fdry-ink, #ECEEF7); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 7px 10px;
}
.ifh-co__pay { font: 600 .8rem Inter, sans-serif; color: #fff; cursor: default; background: var(--accent, #2456D6); border: 0; border-radius: 9px; padding: 9px; }
.ifh-ring {
  position: absolute; left: -6px; top: 0; width: calc(100% + 12px); height: 34px; opacity: 0;
  border: 3px solid #2456D6; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2456D6 25%, transparent);
  will-change: transform, opacity;
}
/* What the third lens hears: the page linearised into a column of speech. */
.ifh-heard {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: start;
  gap: 8px; padding: 0 20%; opacity: 0; pointer-events: none;
}
.ifh-heard code {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem;
  color: var(--fdry-ink, #ECEEF7); background: rgba(255,255,255,.07);
  border-radius: 6px; padding: 4px 9px;
}
.ifh-foot { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px; }
.ifh-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.ifh-dots li { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.ifh-dots li.is-now { background: var(--accent-light, #60A5FA); box-shadow: 0 0 8px currentColor; }
.ifh-foot .fgi-cap { margin-left: auto; text-align: right; }

/* ============================================================
   SCENE 1 — the deck of lenses beside the checkout
   ============================================================ */
.if-side { display: grid; gap: 14px; align-content: center; }
.if-step .fgi-cap { display: block; margin-top: 9px; }
@media (min-width: 1024px) { .if-stage { max-width: min(470px, 46vh); } }

/* ============================================================
   SCENE 2 — fifty criteria, thirteen of them automated
   ============================================================ */
.if-cover__grid { grid-template-columns: 1fr 1fr; }
.if-cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; max-width: 420px; }
.if-cell {
  aspect-ratio: 1; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.16); background: transparent;
}
/* Automated cells are filled; the rest keep their outline, because an outline
   is honest about being an empty box. */
.if-cell.is-auto { border-color: var(--accent-light, #60A5FA); background: color-mix(in srgb, var(--accent-light, #60A5FA) 34%, transparent); }
.if-cover__side { display: grid; gap: 16px; align-content: center; }
.if-cover__count { display: grid; gap: 2px; margin: 0; }
.if-cover__count span { font-size: .88rem; color: var(--fdry-ink-soft, #A7AEC8); }
.if-cover__rules { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--fdry-ink-soft, #A7AEC8); }
.if-choice { display: grid; gap: 10px; }
.if-choice__card {
  display: grid; gap: 5px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
}
.if-choice__card b { color: var(--fdry-ink, #ECEEF7); font-size: .95rem; }
.if-choice__card span { font-size: .84rem; line-height: 1.55; color: var(--fdry-ink-soft, #A7AEC8); }
.if-choice__card.is-out b { text-decoration: line-through; text-decoration-color: rgba(224,106,94,.8); }
.if-choice__card.is-out { border-color: rgba(224,106,94,.3); }
.if-choice__card.is-in { border-color: color-mix(in srgb, #7ED9A6 45%, transparent); background: color-mix(in srgb, #7ED9A6 8%, transparent); }
@media (max-width: 899px) { .if-cells { max-width: none; } }

/* ============================================================
   SCENE 3 — the folder, and the chain the visitor extends
   ============================================================ */
.if-folder { max-width: 900px; }
.if-folder__body { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 26px); }
.if-chain { gap: 6px; }
.if-ledger__line { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); color: var(--fdry-ink-soft, #A7AEC8);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; }
.if-ledger__seq { color: var(--fdry-ink-faint, #6B7299); }
.if-ledger__act { color: var(--fdry-ink, #ECEEF7); }
.if-ledger__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.if-ledger__hash { color: var(--fdry-ink-faint, #6B7299); }
.if-ledger__line.is-fixed { border-color: color-mix(in srgb, #7ED9A6 45%, transparent); background: color-mix(in srgb, #7ED9A6 10%, transparent); }
.if-ledger__line.is-fixed .if-ledger__act, .if-ledger__line.is-fixed .if-ledger__hash { color: #7ED9A6; }
.if-folder__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.if-folder__link code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; color: var(--fdry-ink, #ECEEF7); background: rgba(255,255,255,.05); border-radius: 6px; padding: 4px 9px; }
.if-folder__note { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--fdry-ink-soft, #A7AEC8); max-width: 80ch; }
@media (max-width: 640px) {
  .if-ledger__line { grid-template-columns: auto 1fr auto; }
  .if-ledger__what { grid-column: 1 / -1; white-space: normal; }
}

/* ============================================================
   SCENE 4 — the law. No motion by design.
   ============================================================ */
.if-law__note { margin: 18px 0 0; font-size: .8rem; line-height: 1.6; color: var(--fdry-ink-faint, #6B7299); text-align: center; }

/* Phone: one column (see the note in clearwayforge.css). */
@media (max-width: 899px) {
  .if-grid { grid-template-columns: 1fr; }
}