/* ============================================================
   FOUNDRY / FORGE SCENE — the reusable forging ritual for the
   product landings (concept §8). Loaded on product-site front
   pages; avakode's hub homepage has its own layer (foundry-forge).
   Fail-safe contract (same as foundry.css): the finished tool is
   visible with no JS / reduced motion; choreography DECORATION
   (.fg-decor: ingot, hammer, sparks, flash, steam, embers) only
   appears once body.fdry-anim is armed. transform/opacity only.
   ============================================================ */

body.foundry {
  --fg-iron:   #232A4D;
  --fg-iron-2: #2E3663;
  --fg-ember:  #FF8A3D;
  --fg-heat-0: #2B0E0C;
  --fg-heat-5: #FFF7E6;
  --fg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- shared particles (self-contained copy) ------------ */
.fg-spark {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--fg-acc, var(--fg-ember));
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--fg-acc, var(--fg-ember)) 65%, transparent);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-flash {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,247,230,.95) 0%, rgba(255,138,61,.35) 42%, transparent 68%);
  will-change: transform, opacity;
}
.fg-steam {
  position: absolute; width: 16px; height: 40px; border-radius: 999px;
  background: rgba(230,236,255,.45); filter: blur(7px);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-ring {
  position: absolute; width: 90px; height: 90px; border-radius: 50%;
  border: 2px solid rgba(255,214,150,.85);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-haze {
  position: absolute; width: 22px; height: 52px; border-radius: 999px;
  background: rgba(255,166,90,.35); filter: blur(9px);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.fg-ground {
  position: absolute; left: 50%; bottom: -6px; width: 300px; height: 44px;
  margin-left: -150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(3,5,14,.55) 0%, transparent 68%);
}
.fg-decor { display: none; }
body.fdry-anim .fg-decor { display: block; }

/* ============================================================
   THE SCENE
   ============================================================ */
.fg-scene { position: relative; width: 100%; max-width: 480px; margin-inline: auto; }
.fg-scene__glow {
  position: absolute; left: -14%; right: -14%; top: 2%; bottom: -120px; pointer-events: none;
  background: radial-gradient(ellipse 44% 36% at 50% 62%,
              rgba(255,138,61,.15) 0%, color-mix(in srgb, var(--fg-acc) 8%, transparent) 44%, transparent 66%);
}
.fg-scene__stage {
  position: relative; height: 320px;
  display: flex; align-items: flex-end; justify-content: center;
}
.fg-scene__aura {
  position: absolute; width: 180px; height: 106px; border-radius: 50%;
  left: 50%; transform: translateX(-50%); bottom: 108px; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,150,60,.5) 0%, rgba(255,90,30,.18) 45%, transparent 70%);
  filter: blur(10px); will-change: opacity;
}
.fg-scene__haze { left: 50%; bottom: 150px; margin-left: -24px; }
.fg-scene__haze:nth-of-type(2) { margin-left: 12px; bottom: 142px; }
.fg-scene__anvil {
  width: 230px; height: 230px; color: var(--fg-iron-2); position: relative; z-index: 1;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.4));
}
/* Centered via margin (not transform) — GSAP owns the transform. */
.fg-scene__tool {
  position: absolute; bottom: var(--fgs-b, 139px); left: 50%; width: 122px; height: 122px;
  margin-left: -61px; color: var(--fg-acc); z-index: 2;
  filter: drop-shadow(0 0 15px color-mix(in srgb, var(--fg-acc) 34%, transparent));
}
.fg-scene__ingot {
  position: absolute; bottom: 123px; left: 50%; width: 114px; height: 114px;
  margin-left: -57px; color: var(--fg-heat-0); z-index: 2;
}
.fg-scene__hammer {
  position: absolute; bottom: 180px; left: 50%; width: 156px; height: 156px;
  transform: translateX(-6%) rotate(30deg); transform-origin: 84% 90%;
  color: var(--fg-iron); z-index: 3;
}
.fg-scene__flash { bottom: 132px; left: 50%; margin-left: -75px; z-index: 4; }
.fg-scene__ring  { bottom: 148px; left: 50%; margin-left: -45px; z-index: 4; }
.fg-scene__steam { left: 50%; bottom: 160px; margin-left: -8px; }
.fg-scene__ember {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #F59E0B; box-shadow: 0 0 6px var(--fg-ember);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
  left: 50%; bottom: 140px;
}
.fg-scene__ember:nth-of-type(2) { width: 3px; height: 3px; margin-left: -24px; }
.fg-scene__ember:nth-of-type(3) { width: 5px; height: 5px; margin-left: 22px; }

/* The product's signature bit line, typed on after the quench */
.fg-scene__line {
  display: block; margin-top: 14px; text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem;
  color: var(--fdry-ink-soft, #A7AEC8); letter-spacing: .02em;
}
body.fdry-anim .fg-scene__line { opacity: 0; }

/* ---------- veil mode: intro overlay over the site's own hero art ----- */
/* The wrapper (rendered by the home template) is itself .fg-decor, so a
   static visitor never sees the ritual — only the real hero panel. While
   the ritual owns the art column, the panel underneath is held invisible. */
.fg-scene-veil {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
}
.fg-scene-veil .fg-scene { max-width: 440px; }
body.fdry-anim .has-fg-veil { position: relative; }
body.fdry-anim .has-fg-veil .fg-scene-veil.fg-decor { display: grid; }
/* Safety: if the ritual script ever dies mid-veil, the panel force-returns
   at 9s (animation beats the inline opacity the script left behind). */
body.fdry-anim .has-fg-veil > :not(.fg-scene-veil) { opacity: 0; animation: fgs-safety 0s linear 9s forwards; }
@keyframes fgs-safety { to { opacity: 1; } }

@media (max-width: 1023px) {
  .fg-scene__stage { height: 250px; }
  .fg-scene__anvil { width: 180px; height: 180px; }
  .fg-scene__tool { width: 96px; height: 96px; bottom: var(--fgs-b-m, 108px); margin-left: -48px; }
  .fg-scene__ingot { width: 90px; height: 90px; bottom: 96px; margin-left: -45px; }
  .fg-scene__hammer { width: 122px; height: 122px; bottom: 141px; }
  .fg-scene__flash { bottom: 104px; }
  .fg-scene__ring { bottom: 116px; }
  .fg-scene__aura { bottom: 84px; width: 150px; height: 88px; }
  .fg-scene__steam { bottom: 126px; }
  .fg-scene__ember { bottom: 110px; }
  .fg-scene__haze { bottom: 118px; }
  .fg-scene__haze:nth-of-type(2) { bottom: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-scene__line { opacity: 1 !important; }
}

/* ---------- suite cross-sell ----------------------------------- */
/* Marks are square-canvas SVGs; contain + breathing room (foundry.css
   ships object-fit: cover, which crushed non-square art). */
.foundry .fdry-suite__mark img { object-fit: contain; padding: 6px; box-sizing: border-box; }

/* ---------- suite cross-sell: the builder card ----------------- */
.foundry .fdry-suite__card--builder {
  border-style: dashed;
  border-color: color-mix(in srgb, #7C5CFC 45%, transparent);
  background: color-mix(in srgb, #7C5CFC 7%, rgba(255,255,255,.03));
}
.foundry .fdry-suite__card--builder .fdry-suite__mark {
  display: grid; place-items: center;
  background: color-mix(in srgb, #7C5CFC 14%, transparent);
}

/* ---------- generic product accent skin ------------------------ */
/* The Foundry canvas hardcodes the hub violet as its light source; the
   legacy landings retint it in per-site foundry-product.css. New sites
   get the same retint generically from the palette (--accent /
   --accent-light are emitted per site by forge_css_variables()). This
   file loads BEFORE any per-site skin, so a bespoke skin still wins. */
body.foundry {
  --fdry-violet:    var(--accent, #7C5CFC);
  --fdry-violet-lt: var(--accent-light, #A78BFA);
  --fdry-acc:       var(--accent, #7C5CFC);
  --fdry-bg:        color-mix(in srgb, var(--accent, #7C5CFC) 5%, #05070F);
  --fdry-bg-2:      color-mix(in srgb, var(--accent, #7C5CFC) 9%, #070A14);
}
body.foundry::before {
  background:
    radial-gradient(135% 85% at 62% -6%, color-mix(in srgb, var(--accent, #7C5CFC) 24%, transparent), transparent 60%),
    radial-gradient(95% 65% at 4% 0%, color-mix(in srgb, var(--accent-light, #A78BFA) 10%, transparent), transparent 58%),
    linear-gradient(180deg, var(--fdry-bg) 0%, var(--fdry-bg-2) 40%, var(--fdry-bg) 100%);
}
.foundry .fdry-grad {
  background: linear-gradient(92deg, var(--accent-light, #A78BFA), #fff 58%, var(--accent-light, #A78BFA));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Bento: a full-width closing card (used when the grid holds 6 features —
   spans 3+3 / 2+2+2 / 6, so no orphan half-row) */
.foundry .fdry-feat__card.fgp-feat--row { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .foundry .fdry-feat__card.fgp-feat--row { display: grid; grid-template-columns: 48px 1fr 1.4fr; align-items: center; column-gap: 22px; }
  .foundry .fdry-feat__card.fgp-feat--row .fdry-feat__ico { margin-bottom: 0; }
  .foundry .fdry-feat__card.fgp-feat--row h3 { margin-bottom: 0; }
}

/* ---------- product hero (generic landing, home-product.php) --- */
.fgp-hero-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
  color: var(--fdry-ink-faint, #6B7299);
}
.fgp-hero-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #7C5CFC); box-shadow: 0 0 8px var(--accent, #7C5CFC); }


/* ============================================================
   IDEA SCENES — the three new landings' signature scroll scenes
   (per-product docs/design-2026-08-26.md). Same fail-safe deal:
   static markup shows the FIXED/WITH-PRODUCT end state; the
   scrub (foundry-scene.js) only replays how it got there.
   ============================================================ */

/* ---------- shared scene chrome -------------------------------- */
/* Pin-fit: while an idea scene is pinned, ALL of it must sit inside the
   viewport — the shell becomes a centred 100svh column with a compact head. */
.foundry .fgi-scene { padding-block: 0; }
.fgi-scene .fdry-shell {
  min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 84px; padding-bottom: 28px; /* clears the fixed glass nav */
}
.fgi-scene .fdry-sechead { margin-bottom: clamp(16px, 2.4vw, 34px); }
.fgi-scene .fdry-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.fgi-scene .fdry-lead { font-size: clamp(.95rem, 1.3vw, 1.06rem); max-width: 760px; margin-inline: auto; }
@media (max-width: 899px) {
  .fgi-scene .fdry-shell { min-height: 0; padding-top: 0; display: block; }
}

.cw-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(26px, 4vw, 64px); align-items: center; }
.if-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px, 4vw, 64px); align-items: center; }
.pf-grid { display: grid; grid-template-columns: 1.42fr .72fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
@media (max-width: 899px) {
  .cw-grid, .if-grid, .pf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLEARWAY — «Диспетчерская»: the radar
   ============================================================ */
.cw-radar { position: relative; aspect-ratio: 1; width: min(100%, 560px); margin-inline: auto; color: var(--fdry-ink-soft, #A7AEC8); }
.cw-radar__svg { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
/* CRT sweep: a conic beam with a phosphor tail, composited rotation only */
.cw-radar__sweep {
  position: absolute; inset: 3.1%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg,
      transparent 0deg 286deg,
      color-mix(in srgb, var(--accent) 5%, transparent) 306deg,
      color-mix(in srgb, var(--accent) 24%, transparent) 344deg,
      color-mix(in srgb, var(--accent-light) 72%, transparent) 358deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 9%, #000 26% 99.5%, transparent 100%);
          mask: radial-gradient(circle, transparent 0 9%, #000 26% 99.5%, transparent 100%);
  transform-origin: 50% 50%; will-change: transform;
}
body.fdry-anim .cw-radar__sweep { display: block; opacity: 1; animation: cw-sweep 20s linear infinite; }
@keyframes cw-sweep { to { transform: rotate(360deg); } }
[data-cw-tower] { transform-origin: 210px 210px; }
body.fdry-anim [data-cw-tower] { animation: cw-tower 3.2s ease-in-out infinite; }
@keyframes cw-tower { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: .7; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  body.fdry-anim .cw-radar__sweep { animation: none; opacity: .3; }
  body.fdry-anim [data-cw-tower] { animation: none; }
}

.cw-bogey {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem;
  color: var(--accent-light, #22D3EE); white-space: nowrap;
}
.cw-bogey i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; position: relative; }
/* approach trail — fades out behind the bogey, away from the tower */
.cw-bogey i::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 2px;
  background: linear-gradient(90deg, currentColor, transparent); opacity: .45;
  transform-origin: 0 50%; transform: rotate(var(--tr, -40deg));
}
.cw-direct {
  position: absolute; right: 0; top: 4%; z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
  color: var(--fdry-ink-faint, #6B7299);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 12px;
  background: rgba(255,255,255,.04);
}
.cw-direct b { font-variant-numeric: tabular-nums; color: var(--fdry-ink, #ECEEF7); }

.cw-panel { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.cw-step__k {
  display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent, #06B6D4); margin-bottom: 8px;
}
.cw-step p { color: var(--fdry-ink-soft, #A7AEC8); font-size: 1rem; line-height: 1.62; margin: 0; max-width: 52ch; }
.cw-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.cw-toggle {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
  padding: 5px 12px; border-radius: 999px;
  color: var(--accent-light, #22D3EE);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
}
.cw-cash {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px;
  background: rgba(255,255,255,.04);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem;
}
.cw-cash__src { color: var(--fdry-ink-faint, #6B7299); }
.cw-cash b { color: var(--accent-light, #22D3EE); font-size: 1.05rem; }
.cw-hold {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px;
  background: rgba(255,255,255,.04); margin-bottom: 10px;
}
.cw-hold code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; color: var(--fdry-ink-soft, #A7AEC8); }
.cw-hold__stamp {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; color: #0C1A3A; padding: 4px 12px; border-radius: 7px;
  background: var(--accent-light, #22D3EE); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.cw-journal { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; color: var(--fdry-ink-faint, #6B7299); }

/* ============================================================
   PROFIT — «Течь»: receipt tape, drops, plugs, the bucket
   ============================================================ */
.pf-tape {
  position: relative; border-radius: 0; padding: 24px 28px 88px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.1);
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
}
.pf-tape__row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: baseline;
  padding: 13px 14px; font-size: .92rem; color: var(--fdry-ink-soft, #A7AEC8);
  border-bottom: 1px dashed rgba(255,255,255,.1); border-radius: 9px;
}
.pf-tape__row--head { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fdry-ink-faint, #6B7299); border-bottom-style: solid; }
.pf-leakv { color: #D96A5E; font-variant-numeric: tabular-nums; }
.pf-pipe {
  position: absolute; left: 28px; right: 28px; bottom: 52px; height: 1px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  display: flex; justify-content: space-around;
}
.pf-node { position: relative; top: -14px; }
.pf-pipe__labels {
  position: absolute; left: 28px; right: 28px; bottom: 14px;
  display: flex; justify-content: space-around;
}
.pf-pipe__labels em { font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fdry-ink-faint, #6B7299); }
.pf-plug {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  border: 2px solid #4C9C77; background: color-mix(in srgb, #4C9C77 18%, transparent);
  position: relative;
}
.pf-plug::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px;
  margin: -1.25px 0 0 -6px; background: #4C9C77; border-radius: 2px; }
.pf-plug::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.5px; height: 12px;
  margin: -6px 0 0 -1.25px; background: #4C9C77; border-radius: 2px; }
.pf-drop {
  position: absolute; width: 13px; height: 17px; left: 0; top: 0;
  background: #D96A5E; border-radius: 46% 46% 58% 58% / 38% 38% 66% 66%;
  opacity: 0; will-change: transform, opacity; transform-origin: 50% 0%;
  filter: drop-shadow(0 0 6px rgba(217,106,94,.4));
}
.pf-splash { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #D96A5E; opacity: 0; will-change: transform, opacity; }

.pf-side { display: grid; gap: 16px; justify-items: start; }
.pf-bucket { display: grid; justify-items: center; gap: 4px; color: var(--accent, #C98A4B); }
.pf-bucket svg { width: 96px; height: 96px; }
.pf-bucket__sum { font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 1.8rem; color: var(--fdry-ink, #ECEEF7); font-variant-numeric: tabular-nums; }
.pf-bucket__cap { font-size: .74rem; color: var(--fdry-ink-faint, #6B7299); }
.pf-bucket.is-found .pf-bucket__sum { color: #4C9C77; }
.pf-side__math { font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; color: var(--fdry-ink-soft, #A7AEC8); font-size: .9rem; margin: 0; }
.pf-side__math span { color: var(--accent-light, #C98A4B); font-weight: 600; }
.pf-side__note { color: var(--fdry-ink-soft, #A7AEC8); font-size: .93rem; line-height: 1.6; margin: 0; }

/* ============================================================
   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;
}
.if-lens {
  position: absolute; right: -14px; top: -14px;
  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, #2456D6); margin-bottom: 8px;
}
.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-faint, #6B7299); }
.if-heard code { color: var(--fdry-ink, #ECEEF7); background: rgba(255,255,255,.06); border-radius: 6px; padding: 3px 8px; }

/* scrub steps start dimmed only when the choreography is armed */
body.fdry-anim .cw-step, body.fdry-anim .if-step { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  body.fdry-anim .cw-step, body.fdry-anim .if-step { opacity: 1; }
  .if-checkout, .if-ring { transition: none; }
}


/* ============================================================
   SECOND SIGNATURE BLOCKS (scene2-*.php)
   ============================================================ */
/* Clearway — the monthly letter */
.cw-mail {
  max-width: 620px; margin-inline: auto; border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
}
.cw-mail__chrome {
  display: flex; align-items: center; gap: 7px; padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .85rem; color: var(--fdry-ink, #ECEEF7);
}
.cw-mail__chrome span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.cw-mail__chrome b { margin-left: 8px; font-weight: 600; }
.cw-mail__chrome em { margin-left: auto; font-style: normal; font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--fdry-ink-faint, #6B7299); }
.cw-mail__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 15px 20px; border-bottom: 1px dashed rgba(255,255,255,.08);
  color: var(--fdry-ink-soft, #A7AEC8); font-size: .95rem;
}
.cw-mail__row b { font-family: "JetBrains Mono", monospace; color: var(--accent-light, #22D3EE); font-size: 1.05rem; }
.cw-mail__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.cw-mail__cap { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--fdry-ink-faint, #6B7299); }
.cw-mail__seal { color: var(--accent, #06B6D4); opacity: .9; }

/* Profit — zero-egress */
.pf-eg { max-width: 780px; margin-inline: auto; color: var(--fdry-ink-soft, #A7AEC8); }
.pf-eg__svg { display: block; width: 100%; height: auto; }
.pf-eg__t { font: 500 15px "IBM Plex Mono", "JetBrains Mono", monospace; fill: var(--fdry-ink-soft, #A7AEC8); }
.pf-eg__t--head { fill: var(--accent-light, #C98A4B); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.pf-eg__t--lic { fill: #4C9C77; font-size: 13px; }

/* Inclusive — the law strip + the auditor folder */
.if-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.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; }
.if-folder {
  max-width: 760px; margin-inline: auto; border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 22px 22px 10px;
}
.if-folder__lead { color: var(--fdry-ink-soft, #A7AEC8); font-size: .95rem; line-height: 1.6; margin: 10px 0 16px; max-width: 62ch; }
.if-frow {
  display: grid; grid-template-columns: 64px 1fr 64px auto 60px; gap: 14px; align-items: baseline;
  padding: 12px 4px; border-top: 1px dashed rgba(255,255,255,.09);
  font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--fdry-ink-soft, #A7AEC8);
}
.if-frow__id { color: var(--fdry-ink-faint, #6B7299); }
.if-frow__what { font-family: Inter, sans-serif; }
.if-frow__date { color: var(--fdry-ink-faint, #6B7299); text-align: right; }
.if-frow__st.is-fixed { color: #4C9C77; }
.if-frow__chain { text-align: right; color: var(--fdry-ink-faint, #6B7299); white-space: nowrap; }
@media (max-width: 640px) {
  .if-frow { grid-template-columns: 56px 1fr auto; }
  .if-frow__date, .if-frow__chain { display: none; }
}