/* sharering-link.css. Engine stylesheet for the ShareRing Link landing page.
   Act 1 cinema per OVERNIGHT-BUILD-ORDER.md: every visual mechanism ports a named
   digital-me-landing precedent or is plain typographic craft. Scoped under .srl-root
   with a defensive :where() reset. Type scale and house easing inherited from the
   reference engine.
   House easing: cubic-bezier(0.22,1,0.36,1). Spring: cubic-bezier(0.34,1.56,0.64,1).
   No em dashes in this file. */
/* Self-hosted type (audit fix 5): variable woff2 subsets served from assets/fonts,
   same pattern as the bundled TWK Lausanne below. No runtime request to Google. */
@font-face { font-family:"Inter Tight"; src:url("../assets/fonts/InterTight-wght-latin.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter Tight"; src:url("../assets/fonts/InterTight-wght-latin-ext.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"JetBrains Mono"; src:url("../assets/fonts/JetBrainsMono-wght-latin.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"JetBrains Mono"; src:url("../assets/fonts/JetBrainsMono-wght-latin-ext.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"TWK Lausanne"; src:url("../assets/aurora-prototype/fonts/TWKLausanne-150.woff2") format("woff2"); font-weight:150; font-style:normal; font-display:swap; }
@font-face { font-family:"TWK Lausanne"; src:url("../assets/aurora-prototype/fonts/TWKLausanne-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"TWK Lausanne"; src:url("../assets/aurora-prototype/fonts/TWKLausanne-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --srl-navy:#02184A; --srl-navy-mid:#0a2472; --srl-navy-deep:#010229; --srl-navy-ink:#0a0a4a;
  --srl-cta:#010ED0; --srl-blue:#4d8aff; --srl-lapis:#3458E0; --srl-pale:#EDF3FF;
  /* ROUND 16: display type on a LIGHT canvas needs a darker lapis than surfaces do. --srl-lapis
     is the surface and stroke value and stays as it is; this is the text value. Measured on the
     real composited pixels by the contrast sweep at the worst position, which is not the settled
     pale peak but the middle of the transition into it, where the scrim itself is mid toned:
     #3458E0 on rgb(155,167,188) is 2.39:1 against a 3:1 large text floor, and #23409E is 3.79:1.
     On the settled white it is 9.1:1. Still the lapis family, and nowhere near the banned cyan. */
  --srl-lapis-ink:#23409E;
  --srl-ink:#EAF0FF; --srl-ink-soft:rgba(234,240,255,0.78); --srl-ink-fade:rgba(234,240,255,0.62);
  --srl-line:rgba(77,138,255,0.22); --srl-glitch:#FF3D8C;
  /* round-3 item 3: the reference phone scale. height = width * 2.1667 (aspect 6/13). */
  --phone-width:clamp(280px,26vw,420px);

  /* LATE-BINDING TOKEN, decision 2 (accent). Demo default: candidate A. The switcher swaps
     these four at runtime; the banned cyan (PROJECT-BRIEF hard rule) must never land here. */
  --srl-accent:#2CE5A7;
  --srl-accent-glow:rgba(44,229,167,0.40);
  --srl-accent-soft:rgba(44,229,167,0.14);
  --srl-accent-ink:#02311f;

  --type-display-xl:clamp(96px,18vw,280px);
  --type-display-l:clamp(48px,7.5vw,112px);
  --type-display-m:clamp(36px,5.5vw,72px);
  --type-display-scene:clamp(40px,6vw,88px);
  --type-body-l:clamp(20px,1.8vw,25px);
  --type-body:16px;

  /* P1 contrast system: the journey engine overrides these inline per frame
     (--srl-ink poles, scrim colour biased toward the opposite pole, eyebrow ink).
     The stylesheet values are the dark-canvas defaults for first paint. */
  --srl-eyebrow-ink:var(--srl-accent);
  --srl-scrim:rgb(8,14,42);

  --ease:cubic-bezier(0.22,1,0.36,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --vph:100vh;
  --scene-pad:clamp(24px,4vw,64px);
}

/* ---- defensive base --------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html { width:100%; margin:0; padding:0; }
body.sharering-link-landing { width:100%; margin:0; padding:0; overflow-x:clip; background:var(--srl-navy-deep); }
.sharering-link-landing .srl-root { font-family:"Inter Tight","TWK Lausanne",system-ui,sans-serif !important; font-weight:400; font-size:var(--type-body); color:var(--srl-ink); line-height:1.5; -webkit-font-smoothing:antialiased; }
.sharering-link-landing .srl-root :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,li,div,span,a,button,em,strong,small) { font-family:inherit !important; font-size:inherit; line-height:inherit; color:inherit; font-weight:inherit; }
.sharering-link-landing .srl-root :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol) { margin:0; padding:0; }
.sharering-link-landing .srl-root :where(ul,ol) { list-style:none; }
.sharering-link-landing .srl-root :where(a) { text-decoration:none; }
.sharering-link-landing .srl-root button { -webkit-appearance:none; appearance:none; }
::selection { background:var(--srl-lapis); color:#fff; }
:focus-visible { outline:2px solid var(--srl-accent); outline-offset:4px; border-radius:4px; }

/* ---- shared vocabulary ------------------------------------------------------ */
.sharering-link-landing .srl-eyebrow { font-family:"JetBrains Mono",ui-monospace,monospace !important; font-weight:600; font-size:clamp(11px,0.95vw,14px); letter-spacing:0.22em; text-transform:uppercase; color:var(--srl-eyebrow-ink); }
.sharering-link-landing .srl-display { font-family:"TWK Lausanne","Inter Tight",sans-serif !important; font-weight:600; font-size:var(--type-display-scene); line-height:0.98; letter-spacing:-0.028em; color:var(--srl-ink); hanging-punctuation:first last; }
.sharering-link-landing .srl-display .acc { color:var(--srl-accent); }
/* on light canvases the green accent cannot carry display text; lapis takes over.
   round 16: the darker text lapis, because the worst case is not the settled light canvas but the
   transition into it. See --srl-lapis-ink. This is what took "No friction." from 2.39:1 to 3.79:1
   at the position the contrast sweep samples it. */
body.ink-dark.sharering-link-landing .srl-display .acc { color:var(--srl-lapis-ink); }
.sharering-link-landing .srl-sub { font-size:var(--type-body-l); font-weight:300; color:var(--srl-ink-soft); max-width:34em; }
.sharering-link-landing .c-problem .srl-sub { max-width:30em; }
.sharering-link-landing .c-deploy .srl-sub { max-width:26em; }
.sharering-link-landing .c-user .srl-sub { max-width:30em; }
.sharering-link-landing .srl-btn { font-family:"Inter Tight",sans-serif !important; font-weight:600; font-size:15px; padding:14px 28px; border-radius:999px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease); }
.sharering-link-landing .srl-btn-primary { background:var(--srl-cta); color:#fff; box-shadow:0 8px 32px rgba(1,14,208,0.45), 0 0 24px var(--srl-accent-soft); }
.sharering-link-landing .srl-btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(1,14,208,0.55), 0 0 32px var(--srl-accent-glow); }
.sharering-link-landing .srl-btn-ghost { background:rgba(234,240,255,0.04); color:var(--srl-ink); border-color:rgba(234,240,255,0.22); }
.sharering-link-landing .srl-btn-ghost:hover { background:rgba(234,240,255,0.09); }

/* char reveal (display lines only, never body copy) */
.sharering-link-landing .word { display:inline-block; white-space:nowrap; }
.sharering-link-landing .ch { display:inline-block; opacity:0; transform:translateY(0.55em); transition:opacity 480ms var(--ease), transform 480ms var(--ease); }
.sharering-link-landing .ch.on { opacity:1; transform:translateY(0); }

/* ---- THE BACKGROUND SYSTEM -------------------------------------------------- */
/* Journey variables published by js (precedent: dm ANCHORS colour journey engine):
   --srl-scroll-bg (live canvas), --srl-chapter-accent (live accent), --srl-cal-y (drift). */
/* precedent: dm bg-scroll-tint. Fixed canvas layer: two large soft radial glows keyed to
   the live journey hue over the live background. Nothing else. */
.sharering-link-landing .srl-tint { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 26% 22%, color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 14%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 74% 74%, color-mix(in srgb, var(--srl-lapis) 16%, transparent) 0%, transparent 60%),
    var(--srl-scroll-bg,#0A1238); }
/* precedent: dm cal-grid. Fixed parallax ledger field: each tile a tiny verification record
   chip, chapter accent color-mixed into the live background, deterministic brighter scatter
   via nth-child, clamped drift via --srl-cal-y. */
.sharering-link-landing .ledger-grid { position:fixed; left:0; right:0; top:0; height:300vh; z-index:0;
  display:grid; grid-template-columns:repeat(8,1fr); grid-auto-rows:1fr;
  pointer-events:none; transform:translateY(calc(var(--srl-cal-y,0px) * -1)); }
.sharering-link-landing .ledger-cell { position:relative;
  background-color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 8%, var(--srl-scroll-bg,#0A1238));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 7%, transparent); }
/* precedent: dm cal-cell nth-child brighter scatter */
.sharering-link-landing .ledger-cell:nth-child(7n+3), .sharering-link-landing .ledger-cell:nth-child(11n+5) { background-color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 11%, var(--srl-scroll-bg,#0A1238)); }
.sharering-link-landing .ledger-cell:nth-child(13n+8) { background-color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 15%, var(--srl-scroll-bg,#0A1238)); }
/* the three journey states, layered per tile; --srl-story (0 paperwork, 1 clasp,
   2 register) crossfades them with a per-tile stagger --o so transitions ride the
   chapter boundaries gradually, never a hard swap mid-viewport */
.sharering-link-landing .tl { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
/* windowed weights: the per-tile stagger shifts WHEN a tile crosses inside the 0.6-wide
   transition band, while both endpoints still saturate fully */
.sharering-link-landing .ledger-cell { --w:calc(var(--srl-story,0) + var(--o,0)); }
.sharering-link-landing .tl-paper { opacity:calc((1 - clamp(0, (var(--w) - 0.2) / 0.6, 1)) * var(--dim,1)); }
.sharering-link-landing .tl-clasp { opacity:calc((clamp(0, (var(--w) - 0.2) / 0.6, 1) - clamp(0, (var(--w) - 1.2) / 0.6, 1)) * var(--dim,1)); }
.sharering-link-landing .tl-register { opacity:calc(clamp(0, (var(--w) - 1.2) / 0.6, 1) * var(--dim,1)); }
/* P1c: tiles within 120px of a visible copy block recede (class from the engine);
   the grid must never compete with copy */
.sharering-link-landing .ledger-cell.near-copy { --dim:0.22; }
/* flat line-and-fill artwork in the journey palette */
.sharering-link-landing .tile-art { width:min(52%,74px); height:auto; fill:none; stroke:currentColor; stroke-width:1.4;
  color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 30%, var(--srl-scroll-bg,#0A1238)); }
.sharering-link-landing .ledger-cell:nth-child(13n+8) .tile-art { color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 50%, var(--srl-scroll-bg,#0A1238)); }
.sharering-link-landing .lg-time { font-family:"JetBrains Mono",monospace !important; font-size:10px; letter-spacing:0.14em; color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 30%, var(--srl-scroll-bg,#0A1238)); }
.sharering-link-landing .lg-status { font-family:"JetBrains Mono",monospace !important; font-size:8.5px; letter-spacing:0.2em; color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 22%, var(--srl-scroll-bg,#0A1238)); }
.sharering-link-landing .ledger-cell:nth-child(13n+8) .lg-time { color:color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 52%, var(--srl-scroll-bg,#0A1238)); }
/* precedent: dm tile lifecycle. Rare quiet verified-tick pulse, one cell at a time (js).
   Opacity-only overlay so the journey's continuous variable lerp stays cheap. */
.sharering-link-landing .ledger-cell::after { content:""; position:absolute; inset:0; opacity:0; transition:opacity 700ms var(--ease); pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 30%, transparent), inset 0 0 26px color-mix(in srgb, var(--srl-chapter-accent,#3458E0) 14%, transparent); }
.sharering-link-landing .ledger-cell.pulse::after { opacity:0.45; }
/* the clasp gains its quiet verified tick on pulse */
.sharering-link-landing .ledger-cell { --tick-o:0.3; }
.sharering-link-landing .ledger-cell.pulse { --tick-o:1; }

/* ---- scene scaffolding ------------------------------------------------------ */
/* round 14: the sticky pin and the 200vh to 260vh section heights existed only as
   scrub runway. Nothing is driven by scroll progress any more, so a chapter is an
   ordinary full height block. This takes the document from 32 viewports to roughly
   15, which is the difference between a page you read and a page you drag. */
.sharering-link-landing .srl-scene { position:relative; }
.sharering-link-landing .srl-pin { position:relative; min-height:100vh; min-height:var(--vph,100vh); overflow:clip;
  display:flex; align-items:center; padding:clamp(64px,8vh,112px) 0; box-sizing:border-box; }
.sharering-link-landing .srl-stage { position:relative; z-index:5; width:100%; max-width:1440px; margin:0 auto; padding:0 var(--scene-pad); }
.sharering-link-landing .srl-bg { position:absolute; inset:0; z-index:0; }
.sharering-link-landing .blob { position:absolute; border-radius:50%; filter:blur(110px); will-change:transform, opacity; }

/* round 14: hidden only while the engine is live. The reveal is now driven by the
   scene's own entry timeline, not by scroll progress, so a scene that is on screen
   resolves within about a second whether the viewer scrolls or not. Without .srl-js
   (crawler, or the deferred script failed) every beat is simply visible. */
.srl-js .sharering-link-landing [data-beat] { opacity:0; transform:translateY(24px); transition:opacity 620ms var(--ease), transform 620ms var(--ease); }
.sharering-link-landing [data-beat].on { opacity:1; transform:translateY(0); }

/* P1b scrims (the reference's scrim precedent): a soft rectangular patch of the live
   scrim colour behind every copy block that can straddle a chapter boundary. The
   engine biases --srl-scrim toward the ink's opposite pole, so both sides of the
   ink flip clear 4.5:1 while the canvas is in transit. */
.sharering-link-landing .scene-copy { position:relative; }
.sharering-link-landing .scene-copy::before, .sharering-link-landing .act2 .band-inner::before { content:""; position:absolute; inset:-96px -108px; z-index:-1; pointer-events:none;
  background:var(--srl-scrim); border-radius:24px; opacity:0.92;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 104px,#000 calc(100% - 104px),transparent), linear-gradient(0deg,transparent,#000 92px,#000 calc(100% - 92px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 104px,#000 calc(100% - 104px),transparent), linear-gradient(0deg,transparent,#000 92px,#000 calc(100% - 92px),transparent);
  mask-composite:intersect; }
.sharering-link-landing .act2 .band-inner { position:relative; }

/* real footage loops (encoded from the approved MP4s; js wires sources + m640 variants) */
.sharering-link-landing .slot-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* browser frame */
.sharering-link-landing .browser { position:relative; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#071238 0%,#050d2c 100%); border:1px solid var(--srl-line); box-shadow:0 24px 80px rgba(0,0,0,0.55), 0 0 60px rgba(52,88,224,0.18); }
.sharering-link-landing .browser-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(234,240,255,0.045); border-bottom:1px solid rgba(234,240,255,0.08); position:relative; z-index:3; }
.sharering-link-landing .browser-dot { width:10px; height:10px; border-radius:50%; background:rgba(234,240,255,0.18); }
/* frame chrome sits on its own fixed surface: literal ink, never the live ink */
.sharering-link-landing .browser-url { margin-left:8px; font-family:"JetBrains Mono",monospace !important; font-size:11px; color:rgba(234,240,255,0.66); background:rgba(1,2,41,0.5); border:1px solid rgba(234,240,255,0.07); border-radius:6px; padding:4px 12px; }
.sharering-link-landing .browser-canvas { position:relative; }

/* ---- CH1 HERO (journey canvas carries the field; glows come from .srl-tint) --- */
@keyframes srl-aurora { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(8vw,-6vw) scale(1.15);} }
@keyframes srl-aurora-slow { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-6vw,8vw) scale(1.1);} }
/* round 14: the hero was the only chapter that floated its media absolutely, which is
   why it was the only one that did not line up. It now uses the same two column grid
   as .c-problem, .c-shift and .c-ai. Precedent: those three rules, verbatim in shape. */
.sharering-link-landing .c-hero .srl-stage { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:clamp(28px,4vw,64px); align-items:center; }
/* the shared copy scrim is inset -96/-108 for a full width column; in the hero that bled
   a soft panel out under the adjacent column, so it is tightened here only. */
.sharering-link-landing .c-hero .scene-copy::before { inset:-56px -72px; }
/* the wordmark IS the hero: display scale, clamped from 120px toward 20vw */
.sharering-link-landing .hero-brand { display:flex; flex-direction:column; align-items:flex-start; }
/* round 14: sized against its column, not the viewport, so it cannot overflow a half
   width grid cell. The -0.55em optical nudge is gone: it was the third of three
   different left edges in one brand block. */
.sharering-link-landing .wordmark-hero { width:100%; max-width:560px; height:auto; }
/* parent signature (P2: doubled, ~280px wide at 1440, still clearly subordinate).
   Rises on the hero's second load beat, after the link glyphs land
   (precedent: dm hero entrance reveal); static under reduced motion */
.sharering-link-landing .sr-wordmark-hero { height:clamp(44px,7.7vw,111px); width:auto; margin:0 0 clamp(8px,1.4vw,18px) 0;
  opacity:0; transform:translateY(14px); animation:srl-rise 800ms var(--ease) 880ms forwards; }
@keyframes srl-rise { to { opacity:1; transform:none; } }
/* P2 glyph reveal: the link wordmark's subpaths stagger in like chars
   (precedent: the char reveal; delays set inline by js, left to right) */
.srl-js .sharering-link-landing .wm-ch { opacity:0; transform:translateY(18px); transition:opacity 620ms var(--ease), transform 620ms var(--ease); transform-box:fill-box; }
.sharering-link-landing .wm-ch.on { opacity:1; transform:none; }
/* the scan mark draws in once the QR trace completes (scene class from js) */
.sharering-link-landing .c-scan.wm-on .wm-ch { opacity:1; transform:none; }
/* the H1 stays for SEO as the visually secondary supporting line */
/* round 14: the grid column is now the single source of measure, so the em caps that
   used to constrain these against a full width flex child are gone. */
.sharering-link-landing .hero-h1 { font-family:"TWK Lausanne","Inter Tight",sans-serif !important; font-weight:300; font-size:clamp(22px,2.1vw,32px); line-height:1.25; letter-spacing:-0.016em; color:var(--srl-ink); margin:26px 0 12px; }
.sharering-link-landing .hero-h1 .yw { color:var(--srl-accent); }
.sharering-link-landing .hero-sub { font-size:clamp(15px,1.15vw,17px); font-weight:300; color:var(--srl-ink-soft); }
.sharering-link-landing .hero-ctas { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
/* second beat: footage frame, lower half, offset right, fully unobstructed */
.sharering-link-landing .hero-browser-wrap { position:relative; width:100%; z-index:4; }
/* round 14: the frame carries the re-cropped clip's own aspect. The hero clip used to be
   the whole browser window at 16/10.4, which is why its workflow nodes were unreadable.
   round 16 item 2: the hero and build clips swapped slots, so this frame now carries the
   quickstart window, whose two segment crops are both 620x440. 1.409, not the 1.219 the round
   16 brief named: 1.219 is 920/755, the crop this window carried BEFORE round 15 re-cut it to
   620x440, and it was never updated when the crop changed. So .build-browser has been
   cover-trimming 13.5 percent of this clip's width, 6.7 percent off each side, since round 15.
   Declaring the crop's real ratio is the point of the exercise ("so object-fit:cover still
   trims nothing"), and 1.409 is what does that. */
.sharering-link-landing .hero-browser .browser-canvas { aspect-ratio:1.409; }
/* (hero scroll indicator and per-scene NEXT cues removed in round-3 item 2; the nav
   arrows below are the reference's actual controls) */
@keyframes srl-pill-dot-up { 0%{transform:translateY(22px); opacity:0;} 22%{opacity:1;} 62%{transform:translateY(4px); opacity:1;} 100%{transform:translateY(0); opacity:0;} }
@keyframes srl-pill-dot { 0%{transform:translateY(0); opacity:0;} 22%{opacity:1;} 62%{transform:translateY(18px); opacity:1;} 100%{transform:translateY(22px); opacity:0;} }

/* ---- CH2 PROBLEM: degradation, scanlines, glitch pulses, leaked ghosts ------ */
.sharering-link-landing .problem-scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(234,240,255,0.028) 0 1px, transparent 1px 4px); opacity:calc(0.25 + var(--p,0) * 0.6); mix-blend-mode:screen; }
.sharering-link-landing .problem-noise { position:absolute; inset:0; opacity:calc(var(--p,0) * 0.5); background-image:radial-gradient(rgba(234,240,255,0.07) 1px, transparent 1px), radial-gradient(rgba(234,240,255,0.05) 1px, transparent 1px); background-size:7px 9px, 11px 13px; background-position:0 0, 4px 6px; mix-blend-mode:screen; }
.sharering-link-landing .problem-pulse { position:absolute; inset:0; background:radial-gradient(60% 50% at 70% 50%, rgba(255,61,140,0.16) 0%, transparent 70%); opacity:0; animation:srl-glitch-pulse 7s linear infinite; }
@keyframes srl-glitch-pulse { 0%,88%,100%{opacity:0;} 90%{opacity:1;} 92%{opacity:0.2;} 94%{opacity:0.8;} 96%{opacity:0;} }
.sharering-link-landing .ghost-doc { position:absolute; width:120px; aspect-ratio:1.586; border-radius:12px; border:1px solid rgba(234,240,255,0.14); opacity:0.35; transform:translateY(calc(var(--p,0) * var(--drift,40vh))) rotate(var(--r,0deg)); }
.sharering-link-landing .ghost-doc::before { content:""; position:absolute; left:10px; top:10px; right:46%; height:5px; border-radius:3px; background:rgba(234,240,255,0.12); }
.sharering-link-landing .ghost-doc::after { content:""; position:absolute; right:10px; top:10px; width:26px; height:32px; border-radius:4px; border:1px solid rgba(234,240,255,0.16); }
.sharering-link-landing .c-problem .srl-stage { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:clamp(24px,4vw,56px); align-items:center; }
/* precedent: dm photo stream (drifting artifact cards at depth) */
.sharering-link-landing .doc-pile { position:relative; height:min(58vh,520px); transform:translateY(calc(var(--p,0) * -4vh)); }
/* round-2 item 4: photographic government specimen documents, angled and stacked.
   Tactile rather than drawn: real print, real security patterns, real weight. */
.sharering-link-landing .doc-card { position:absolute; left:50%; top:50%; width:min(272px,58%); aspect-ratio:1.586; border-radius:10px;
  overflow:hidden; background:#0e1c46; border:1px solid rgba(234,240,255,0.28);
  box-shadow:0 18px 44px rgba(0,0,0,0.62), 0 2px 6px rgba(0,0,0,0.5); }
.sharering-link-landing .doc-card img { width:100%; height:100%; object-fit:cover; display:block; }
/* the pile sits in a dark room: knock the print back so it reads as depth, not a gallery */
.sharering-link-landing .doc-card::after { content:""; position:absolute; inset:0; background:linear-gradient(165deg, rgba(6,14,44,0.30) 0%, rgba(6,14,44,0.56) 100%); }
.srl-js .sharering-link-landing .doc-card[data-beat] { transform:translate(calc(-50% + var(--x,0px)),calc(-50% + 120px)) rotate(var(--r,0deg)); }

/* round 15: the pile keeps breathing after it lands. Under the scroll scrubbed build the
   cards were still being nudged by --p as the viewer moved, which read as life; round 14
   removed that input and nothing replaced it, so the pile went dead 820ms after entry.
   Registered so the keyframe can interpolate a length and an angle rather than swapping
   tokens. Precedent: srl-aurora (continuous transform loop) and --srl-cal-y (drift driven
   by a custom property), both already in this stylesheet.
   The transform is already fully occupied by --x, --y and --r, so a second transform
   declaration would overwrite it. The float folds into the same transform instead. */
@property --fx { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --fy { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --fr { syntax:'<angle>';  inherits:false; initial-value:0deg; }

.sharering-link-landing .doc-card[data-beat].on {
  transform:
    translate(calc(-50% + var(--x,0px) + var(--fx)), calc(-50% + var(--y,0px) + var(--fy)))
    rotate(calc(var(--r,0deg) + var(--fr)));
}

@keyframes srl-doc-float {
  0%   { --fx:0px;   --fy:0px;   --fr:0deg;    }
  25%  { --fx:5px;   --fy:-7px;  --fr:0.5deg;  }
  50%  { --fx:0px;   --fy:-11px; --fr:0deg;    }
  75%  { --fx:-5px;  --fy:-6px;  --fr:-0.5deg; }
  100% { --fx:0px;   --fy:0px;   --fr:0deg;    }
}

/* Only after the card has finished arriving, so the landing transition and the float
   never run at the same time. .float is added by the scene timeline, not by .on. Each
   card runs on its own duration and a negative delay, so the pile never pulses in unison. */
.sharering-link-landing .doc-card[data-beat].on.float { animation:srl-doc-float var(--fd,13s) ease-in-out infinite; }
.sharering-link-landing .doc-card[data-beat]:nth-child(1).float { --fd:13s;   animation-delay:0s;    }
.sharering-link-landing .doc-card[data-beat]:nth-child(2).float { --fd:16.5s; animation-delay:-3.2s; }
.sharering-link-landing .doc-card[data-beat]:nth-child(3).float { --fd:11.5s; animation-delay:-6.1s; animation-direction:alternate-reverse; }
.sharering-link-landing .doc-card[data-beat]:nth-child(4).float { --fd:15s;   animation-delay:-1.7s; animation-direction:alternate-reverse; }

/* ---- CH3 SHIFT: the curtain wipe (precedent: dm curtain wipe) --------------- */
.sharering-link-landing .shift-murk { position:absolute; inset:0; background:rgba(4,5,26,0.55); }
.sharering-link-landing .shift-murk::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(234,240,255,0.04) 0 1px, transparent 1px 4px); }
.sharering-link-landing .shift-murk .ghost-doc { opacity:0.28; }
.sharering-link-landing .shift-clean { position:absolute; inset:0; background:linear-gradient(135deg,rgba(14,17,58,0.38) 0%,rgba(26,47,143,0.36) 55%,rgba(52,88,224,0.34) 100%); clip-path:inset(0 calc((1 - var(--pw,0)) * 100%) 0 0); }
.sharering-link-landing .shift-edge { position:absolute; top:0; bottom:0; width:clamp(60px,7vw,120px); left:calc(var(--pw,0) * 100% - clamp(30px,3.5vw,60px)); background:linear-gradient(90deg, transparent 0%, rgba(234,240,255,0.35) 45%, rgba(234,240,255,0.9) 50%, rgba(234,240,255,0.35) 55%, transparent 100%); filter:blur(6px); opacity:calc(var(--pw,0) * (1 - var(--pw,0)) * 4); mix-blend-mode:screen; }
/* P3 composition break: shift and user flip their columns so no two neighbouring
   scenes share the copy-left anchor (mobile keeps copy first) */
.sharering-link-landing .c-shift .srl-stage { text-align:left; display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:center; }
@media (min-width:768px) { .sharering-link-landing .c-shift .scene-copy { order:2; } .sharering-link-landing .c-shift .shift-viz { order:1; } }
.sharering-link-landing .shift-viz { position:relative; height:min(58vh,520px); --pa:min(calc(var(--p,0) * 2),1); --pb:clamp(0,calc(var(--p,0) * 2 - 1),1); opacity:var(--pw,0); }
/* item 5: the customer's phone runs real ShareRing Me UI (official store artwork);
   the absorb glow moved from the old vault glyph to the frame itself */
/* item 3: at the reference phone scale like every other phone on the page. The second
   term is a fit cap so a 6/13 frame can never outgrow the pinned viewport and clip;
   at 1440x900 it settles inside the 280 to 420 band. Real ShareRing Me scanner, flush. */
/* ROUND 16 ITEM 6, THE PHONE BOX MODEL. Every phone frame on this page declared its content
   ratio on the OUTER bezel and then put uniform padding inside it. Uniform padding does not
   preserve a portrait box's ratio: at a 337px wide bezel with 12px of padding, aspect-ratio:6/13
   (0.46154) gives a SCREEN of 313x706, which is 0.4433. That is the 0.4418 round 15 measured on
   .user-phone and could not explain, and it is why object-fit:cover trimmed about 21 source
   pixels off each side and clipped a character off the widest line of small print.
   The fix is to move the ratio off the bezel and onto the screen. The bezel then sizes from its
   child plus its own padding, the screen carries the clip's real ratio, and cover trims nothing.
   The height budget is re-derived for the new box model rather than carried over: the old
   `(100svh - Npx) / 2.1667` capped the OUTER height at 100svh - N, and 2.1667 is 13/6. Now
   outer = (W - 2p) * (h/w) + 2p, so the same cap needs `(100svh - N - 2p) / (h/w) + 2p`.
   Asserted at both widths by the round 16 phone ratio gate, which compares each slot's
   videoWidth/videoHeight against its rendered box ratio to within 0.5 percent. */
.sharering-link-landing .shift-phone { position:absolute; right:0; top:50%; transform:translateY(-50%); width:min(var(--phone-width), calc((100svh - 170px) / 2.1656 + 20px)); aspect-ratio:auto; border-radius:30px; background:#050d2c; border:1px solid rgba(234,240,255,0.3); padding:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 calc(var(--pa,0) * 6px) var(--srl-accent-soft), 0 0 calc(var(--pa,0) * 40px) var(--srl-accent-glow); transition:box-shadow 300ms var(--ease); }
/* 966/2092 is the shift-phone clip's own crop, 2.1656 its inverse. Round 16 item 3 put footage
   in this slot, so it has a real ratio to carry for the first time. */
.sharering-link-landing .shift-phone .screen { position:relative; aspect-ratio:966/2092; height:auto; border-radius:18px; background:linear-gradient(180deg,#122457 0%,#0a1740 100%); overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* SWAPPABLE PHONE SLOT. .app-shot is the phone screen slot and is deliberately element
   agnostic: an <img> and a <video class="slot-video app-shot" data-clip="..."> occupy it
   identically, so fresh footage drops in with no layout change. Swap procedure is in
   docs/ASSET-SOURCES.md. object-fit:cover plus the frame's own 6/13 keeps either flush.
   Round 15 exercised this for real: the c-user phone went from a still to the user-phone
   clip and no rule here changed. (The data-scrub attribute this note used to mention went
   with round 14, which stopped seeking video by scroll.) */
.sharering-link-landing .app-shot { width:100%; height:100%; object-fit:cover; display:block; }
.sharering-link-landing video.app-shot { background:#0A1B47; }
.sharering-link-landing .shift-org { position:absolute; left:0; top:50%; transform:translateY(-50%); width:clamp(124px,11.5vw,158px); padding:14px; border-radius:12px; background:rgba(18,44,120,0.6); border:1px solid rgba(122,160,255,0.4); box-shadow:0 14px 40px rgba(0,0,0,0.4); }
.sharering-link-landing .shift-org .k { font-family:"JetBrains Mono",monospace !important; font-size:9px; letter-spacing:0.2em; color:rgba(234,240,255,0.6); text-transform:uppercase; }
.sharering-link-landing .org-flow { margin-top:11px; font-weight:600; font-size:12.5px; line-height:1.3; letter-spacing:-0.005em; color:var(--srl-ink); }
/* ROUND 10. white-space:nowrap was forcing this line outside its own card. "Passed . 14 Jul
   2026" measures 141px at this size, and the card gives it 130px of content box at 1440 and
   102px at 390, so the date drew 13px past the border on desktop and 39px past it on mobile,
   over the scene background. Nothing clipped it (the nearest clipping ancestor is .srl-pin),
   so it simply rendered outside the box. Identical in the wireframe, so this is not a port
   regression; it is the one change made to the frozen design this round, and reverting it is
   putting this declaration back. Wrapping keeps the card, its type, its colour and its content
   exactly as signed off and only lets the line break inside the box it was always meant to
   sit in. align-items:flex-start so the tick stays with the first line when it does wrap. */
.sharering-link-landing .org-run { margin-top:7px; display:flex; align-items:flex-start; gap:6px; font-family:"JetBrains Mono",monospace !important;
  font-variant-numeric:tabular-nums; font-size:9.5px; letter-spacing:0.04em; color:var(--srl-ink-fade);
  line-height:1.35; }
.sharering-link-landing .org-tick { flex:none; width:13px; height:13px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--srl-accent-soft); border:1px solid var(--srl-accent); }
.sharering-link-landing .org-tick svg { width:8px; height:8px; fill:none; stroke:var(--srl-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.sharering-link-landing .org-held { margin-top:11px; padding-top:9px; border-top:1px solid rgba(234,240,255,0.14); display:flex;
  align-items:baseline; justify-content:space-between; gap:8px; font-family:"JetBrains Mono",monospace !important;
  font-variant-numeric:tabular-nums; font-size:9.5px; letter-spacing:0.07em; color:var(--srl-ink-fade); }
.sharering-link-landing .org-held b { font-weight:400; color:var(--srl-accent); }
/* the document travels to the vault and is absorbed: it never sits on the phone */
/* round-5 item 3: travel re-fitted to the reference-scale phone. The old 21vw run put a
   solid card on top of the phone's screen at full opacity; it now shrinks and fades out
   before it reaches the frame, so nothing ever sits over product footage. */
.sharering-link-landing .shift-doc { position:absolute; left:5%; top:20%; width:84px; aspect-ratio:1.586; border-radius:6px; background:linear-gradient(160deg,#2c48a0,#1b3480); border:1px solid rgba(234,240,255,0.4); box-shadow:0 10px 26px rgba(0,0,0,0.45); transform:translateX(calc(var(--pa) * 7vw)) scale(calc(1 - var(--pa) * 0.45)); opacity:clamp(0, calc(1 - (var(--pa) - 0.55) * 3.4), 1); transition:transform 120ms linear; }
.sharering-link-landing .shift-doc::before { content:""; position:absolute; left:9px; top:9px; right:44%; height:6px; border-radius:3px; background:rgba(234,240,255,0.3); }
.sharering-link-landing .shift-doc::after { content:""; position:absolute; right:9px; top:9px; width:24%; height:44%; border-radius:4px; border:1px solid rgba(234,240,255,0.35); }

/* ---- CH4 BUILD (precedent: dm sticky scene with device frame) ---------------- */
/* round-2 item 1: the build screen is the dominant element of the scene. The re-sourced
   footage is the canvas itself at 975x820, so the frame carries that aspect and is sized
   off the viewport height, and the copy sits BESIDE it (the two-column stage the Problem
   and Shift scenes already use). Nothing is cover-cropped: the whole workflow reads, and
   a node box lands about twice the pixel size it did inside the old wide frame. */
.sharering-link-landing .c-build .srl-pin { align-items:center; }
/* bottom padding keeps the frame clear of the next-chapter cue, which would otherwise
   sit on the footage once the frame grew to fill the stage */
.sharering-link-landing .c-build .srl-stage { display:grid; grid-template-columns:minmax(0,0.62fr) minmax(0,1.38fr);
  gap:clamp(24px,3.4vw,52px); align-items:center; padding-bottom:clamp(56px,9vh,88px); }
.sharering-link-landing .build-head { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2.2vh,26px); }
.sharering-link-landing .build-head .srl-display { font-size:clamp(30px,3.4vw,52px); }
/* round-5 item 2: the task list is built to the anatomy of the product's own node card
   (glyph tile, title, mono meta line, port-and-edge rail), which is on screen in the
   frame beside it. Not a pill. Sits beside the footage, never over it. */
.sharering-link-landing .build-nodes { display:flex; flex-direction:column; gap:0; position:relative; margin-top:clamp(14px,2vh,22px); }
.sharering-link-landing .build-nodes li { position:relative; display:flex; align-items:center; gap:11px; padding:9px 0 9px 22px;
  transition:opacity 320ms var(--ease); opacity:0.5; }
.sharering-link-landing .build-nodes li.active { opacity:1; }
/* the canvas's own edge: a thin rail with a port circle at each node */
.sharering-link-landing .build-nodes li::before { content:""; position:absolute; left:5px; top:0; bottom:0; width:1px; background:rgba(234,240,255,0.16); }
.sharering-link-landing .build-nodes li:first-child::before { top:50%; }
.sharering-link-landing .build-nodes li:last-child::before { bottom:50%; }
.sharering-link-landing .build-nodes li::after { content:""; position:absolute; left:1px; top:50%; width:9px; height:9px; margin-top:-4.5px;
  border-radius:50%; border:1.5px solid rgba(234,240,255,0.3); background:var(--srl-scroll-bg,#0a1740);
  transition:border-color 320ms var(--ease), background 320ms var(--ease), box-shadow 320ms var(--ease); }
.sharering-link-landing .build-nodes li.active::after { border-color:var(--srl-accent); background:var(--srl-accent); box-shadow:0 0 10px var(--srl-accent-glow); }
.sharering-link-landing .bn-tile { flex:none; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:rgba(234,240,255,0.07); border:1px solid rgba(234,240,255,0.12);
  transition:background 320ms var(--ease), border-color 320ms var(--ease); }
.sharering-link-landing .bn-tile svg { width:17px; height:17px; fill:none; stroke:var(--srl-ink-fade); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke 320ms var(--ease); }
.sharering-link-landing .build-nodes li.active .bn-tile { background:var(--srl-accent-soft); border-color:var(--srl-accent); }
.sharering-link-landing .build-nodes li.active .bn-tile svg { stroke:var(--srl-accent); }
.sharering-link-landing .bn-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sharering-link-landing .bn-text b { font-weight:600; font-size:clamp(12.5px,1.05vw,14.5px); letter-spacing:-0.005em; color:var(--srl-ink); }
.sharering-link-landing .bn-text i { font-style:normal; font-family:"JetBrains Mono",monospace !important; font-variant-numeric:tabular-nums;
  font-size:10px; letter-spacing:0.07em; color:var(--srl-ink-fade); }
/* height-driven so the frame is as large as the viewport allows without ever being
   clipped by the pin; the multiplier is the clip's own aspect and the subtracted px cover the
   browser bar plus the stage's own padding.
   round 16 item 2: this frame now carries the Trial_onboarding window that used to be the
   hero, whose crop is 446x660, so the box is portrait at 0.676 and needs the height budget
   .ai-browser already uses at 0.65. At 900px tall that is 466 wide by 690 plus a 39px bar,
   which fits the pin's 756px content box. */
.sharering-link-landing .build-browser { max-width:calc((100vh - 210px) * 0.676); width:100%; margin-left:auto; }
.sharering-link-landing .build-browser .browser-canvas { aspect-ratio:0.676; }
/* round-3 item 4: scroll-driven Ken Burns. The scene engine sets --z (scale) so the frame
   pushes in on the interaction corner (the search + drop in the OK branch, lower right)
   while the clip scrubs, then pulls back to 1 so the settled workflow reads. Transform
   only, driven by scroll, origin on the interaction. Precedent: the reference's scroll
   driven parallax/scale on its device frame (same rAF progress, transform only). */
/* round 14: the scroll-driven Ken Burns (--z) is gone. The clip now plays on its own
   clock, and a scroll zoom layered on moving footage read as drift. */
.sharering-link-landing .build-browser .slot-video { object-fit:cover; }

/* ---- CH5 BUILD WITH AI (precedent: dm ask typed-chat scene) ------------------ */
.sharering-link-landing .ai-dim { position:absolute; inset:0; background:radial-gradient(90% 80% at 50% 45%, transparent 30%, rgba(0,0,0,0.55) 100%); opacity:calc(0.3 + var(--p,0) * 0.7); }
.sharering-link-landing .ai-pulse { position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 50%, var(--srl-accent-soft) 0%, transparent 70%); opacity:0; transition:opacity 900ms var(--ease); }
.sharering-link-landing .c-ai .srl-pin.done .ai-pulse { opacity:0.8; }
/* round 15: the ai-prompt caret rules are gone with the CSS typing they belonged to. The
   payload scene still types, so srl-caret itself and .payload .caret both stay. */
.sharering-link-landing .c-ai .scene-copy .srl-sub { margin-left:clamp(0px,1.6vw,22px); }
.sharering-link-landing .c-ai .srl-stage { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:center; }
/* ROUND 16 ITEM 1, THE SPECIFICITY LEAK. position:relative is load bearing and it is the fix
   for the fault Rohan screenshotted: an oversized prompt panel painted over the h2 above it,
   with an empty dark box below it.
   .slot-video sets `position:absolute; inset:0; height:100%`. .ai-prompt-vid is also a single
   class, so specificity ties and source order decides: .ai-prompt-vid wins on the properties it
   NAMES (height became auto) but never named position or inset, so absolute and inset:0
   survived. .ai-prompt had no positioned ancestor of its own, so the nearest one was
   .scene-copy, and the video stretched over the eyebrow, the heading and the sub. With all four
   insets set plus height:auto the aspect-ratio was ignored entirely and object-fit:cover
   squeezed the 2.15:1 clip into a tall column. .ai-prompt then rendered as an empty box because
   its only in-flow child, .ai-prompt-text, is visually hidden. One cause, both symptoms.
   Fixed at the element rather than by reordering the file, because source order is not a
   contract: adding position:relative here and position:static below makes the intent explicit
   and survives the next rule anyone adds. Do NOT remove .slot-video from the element's class
   list: sharering-link.js collects slots by that selector and the clip would never load.
   The transition is the second half of item 1, Rohan: "should show a transition to a smaller
   version of the text box showing the result of the AI build." See .c-ai.ai-sent below. */
.sharering-link-landing .ai-prompt { position:relative; font-family:"JetBrains Mono",monospace !important; font-size:clamp(13px,1.25vw,16px); line-height:1.7; color:#b9c6ec; background:#051133; border:1px solid #1b2a5e; border-radius:12px; padding:16px 18px; min-height:7.5em;
  transition:max-width 700ms var(--ease), transform 700ms var(--ease); }

/* round 15: the prompt is real footage of the real composer now, not CSS pretending to
   type. The clip is 720x334, a 2.15:1 box, so the panel is sized by aspect-ratio and the
   video simply fills it. No overlay, no pill, nothing on top of the frame.
   The sentence stays in the DOM as text. With the engine live it is visually hidden and
   read only by assistive technology; without JavaScript, or under reduced motion, the
   video is dropped and the sentence becomes ordinary body copy in the panel. The hook is
   .srl-js on <html>, which is this file's existing convention, not a new class. */
/* round 16 item 1: position:static and inset:auto are the half of the fix that sits on the
   video. They cancel .slot-video's absolute positioning explicitly, at which point
   aspect-ratio:720/334 and width:100% size the box and object-fit stops mattering. height:auto
   was already here and was the only property that used to win, which is why the box came out
   stretched rather than merely mispositioned. */
.sharering-link-landing .ai-prompt-vid { display:block; position:static; inset:auto; width:100%; height:auto;
  aspect-ratio:720/334; border-radius:10px; background:#f4f6fa; }
/* The sent state. While .c-ai is unclassed the panel is full width and the browser beside it
   holds its empty-canvas poster; the engine adds .ai-sent when the prompt clip ends and removes
   it when the prompt restarts, so the pair cycle in step for as long as the scene is on screen.
   62 percent chosen by eye at 1440 against the rendered page: at 70 the shrink barely reads, at
   55 the composer's Send row loses its own proportions. It is also the sharpness fix the
   ai-prompt note in lib/clips.mjs asks for, because the clip is 478 source pixels upscaled 1.51x
   to 720 and there are no more source pixels to be had: 62 percent of the column puts it back
   under 1.0x. 82 percent on mobile, where 62 percent of a single column box is too small to read
   the prompt in at all. */
.sharering-link-landing .c-ai.ai-sent .ai-prompt { max-width:62%; }
.sharering-link-landing .ai-prompt-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
html:not(.srl-js) .ai-prompt-vid { display:none; }
html:not(.srl-js) .ai-prompt-text { position:static; width:auto; height:auto; margin:0;
  overflow:visible; clip:auto; white-space:normal; }
@keyframes srl-caret { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
/* round-2 item 3: the frame carries the re-cropped clip's own aspect (canvas only) and
   is sized off viewport height, so the workflow the AI draws is actually readable at
   1440 instead of sitting in the frame as a thumbnail */
/* round-13: the AI frame holds the workflow canvas only, no assistant panel. The tree it
   has to contain is 524 wide by 826 tall in source pixels, so the box is portrait. 0.65 is
   the crop's own ratio (572x880) and the same height-budget formula as before keeps the
   box inside the pinned viewport. Sub-1.0 canvas precedent: .build-browser at 0.86 below. */
/* ROUND 18, Rohan: "the video screen is too large compared to the other when it comes to this
   screen." Measured at 1440x900 with both clips paused on their LAST frame, so neither was judged
   mid build: .ai-prompt 603x296 against .ai-browser 447x736, and the result panel read as a large
   bright block at 2.3 times the prompt's height.
   THE PORTRAIT CROP IS NOT AN OVERSIGHT, which is why this is a CSS cap and not a re-encode.
   ai-canvas is crop=572:880, a 0.65 ratio, while every other canvas clip on this page is 1.6.
   Gridding the source shows the workflow genuinely runs top to bottom: Start, Age Verification,
   an IF/ELSE age gate, Personal Info, Identity Document, Document Check, a second IF/ELSE, then
   Rejected, Rejected and Passed. A landscape crop would cut the tree or frame acres of empty
   canvas.
   The subtrahend sets the canvas height directly, because width = (100vh - X) * 0.65 and the
   canvas is width / 0.65. 210 gave a 690px canvas at 900vh; 400 gives 500, and the box lands near
   549 with the browser bar.
   Legibility is not the constraint people assume: node title text is about 8px in the 1920x1080
   source, the crop upscales 572 to 720 and the render scaled 720 to 447, so those labels already
   rendered at about 6px and were already unreadable. What shrinking can cost is the tree's SHAPE,
   so round18-verify asserts a minimum rendered video width instead of pretending to measure text. */
.sharering-link-landing .ai-browser { max-width:calc((100vh - 400px) * 0.65); width:100%; margin-left:auto; }
.sharering-link-landing .ai-browser .browser-canvas { aspect-ratio:0.65; }

/* ---- CH6 DEPLOY: a sequential channel journey (round-2 item 2) ---------------
   One channel holds the stage at a time, large enough to read. The step rail
   ports the CH8 user-steps dock; channel entrances use the beat rise. */
.sharering-link-landing .c-deploy .srl-pin { align-items:flex-start; }
.sharering-link-landing .c-deploy .srl-stage { padding-top:clamp(18px,4vh,40px); text-align:center; }
.sharering-link-landing .deploy-head { display:inline-block; text-align:left; }
@media (min-width:768px) { .sharering-link-landing .c-shift .scene-copy, .sharering-link-landing .c-user .scene-copy { padding-right:clamp(36px,5vw,84px); } }
/* round-5 item 2: one segmented control rather than four scattered chips. Four mutually
   exclusive channels, one live, so the control says so. The thumb slides off --dstep,
   which the scene engine already sets from scroll. */
/* ROUND 16 ITEM 5: the scene's opening beat, one real workflow from template to published.
   Landscape at the clip's own measured 1.6 (crop=1232:770, 1728:1080 and 1776:1110, all exactly
   1.6, see lib/clips.mjs), which is also .dch-screen's ratio, so the two frames in this scene
   agree instead of arguing.
   560px is a chosen ceiling rather than a fitted one. The scene has to carry a heading, this
   frame, a segmented control and a four channel stage, and there is no viewport height at which
   all of that fits in 100vh with the stage still large enough for its embed code sample to hold
   its own line. So the frame is capped at a size that reads, and the scene runs about 1.3
   viewports at 1440x900. The second term is the ordinary height budget for a short viewport.
   Reuses .browser / .browser-bar / .browser-canvas verbatim, so this is not a new mechanism. */
.sharering-link-landing .flow-browser { max-width:min(560px, calc((100vh - 480px) * 1.6)); width:100%;
  margin:0 auto clamp(10px,1.8vh,20px); }
.sharering-link-landing .flow-browser .browser-canvas { aspect-ratio:1.6; }
/* the frame's chrome is real chrome with no URL in it, so the empty pill must not read as a
   broken input: it keeps its border and its height and carries nothing */
.sharering-link-landing .flow-browser .browser-url { min-width:clamp(90px,14vw,190px); min-height:1.2em; }
/* ROUND 16 CONTRAST FIX. This control sits on its OWN surface, so it takes literal ink and never
   the live ink, which is exactly the rule .browser-url already states two hundred lines above.
   The fault, measured: at the deploy to scan boundary the journey flips body.ink-dark to navy for
   the pale peak while this control is still on a dark canvas, and its labels rendered navy on
   near-black at 1.21:1. It became visible this round because the deploy scene now carries the
   flow-tour frame and is about 1.5 viewports tall, which widens the boundary band from 450px to
   585px and moves the sampled position inside it. The control's background is opaque now for the
   same reason: at 0.55 alpha it took its tone from whatever the canvas was doing. */
.sharering-link-landing .deploy-seg { position:relative; display:grid; grid-template-columns:repeat(4,1fr); align-items:stretch;
  width:fit-content; margin:clamp(12px,2.2vh,22px) auto clamp(10px,1.8vh,18px); padding:4px;
  border:1px solid rgba(234,240,255,0.16); border-radius:10px; background:#050A20;
  backdrop-filter:none; overflow:hidden; }
.sharering-link-landing .seg-thumb { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 4);
  border-radius:7px; background:var(--srl-accent-soft); border:1px solid var(--srl-accent);
  transform:translateX(calc(var(--dstep,0) * 100%));
  transition:transform 520ms var(--ease); }
/* literal rgba(234,240,255,0.62), not var(--srl-ink-fade): the token follows the live ink pole and
   this control does not have a live canvas behind it. 6.9:1 over the control's own #050A20. */
/* ROUND 19: the PADDING MOVED TO THE BUTTON, and that is the whole hit area fix. With it on the li
   the button's height:100% resolved against the li's CONTENT box, so the control was only as tall
   as its own text: 16px on desktop and 13px at 390, with the surrounding cell inert. Measured, not
   assumed, and it was the opposite of what the first version of this claimed. */
.sharering-link-landing .deploy-seg li { position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  padding:0; font-family:"JetBrains Mono",monospace !important; font-variant-numeric:tabular-nums;
  font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(234,240,255,0.62);
  white-space:nowrap; transition:color 320ms var(--ease); }
.sharering-link-landing .deploy-seg li.on { color:var(--srl-accent); }
/* ROUND 19: the label is now a real button. It inherits every typographic property from the li so
   the strip looks exactly as it did, and fills the li so the whole cell is the hit area rather
   than just the glyphs. background:none is stated across the interactive states on purpose: the
   Elementor kit's `.elementor-kit-N button:hover, :focus` is (0,2,1) and outranks a two class
   rule, which is the same fight that turned the nav chevron dark blue. (0,3,0) here settles it. */
/* The 2px margin is a CONTRAST fix, not a spacing preference. .seg-thumb carries a 1px
   var(--srl-accent) border and sits exactly on the active cell. With the button flush to the cell
   edge its box enclosed that border, and contrast-sweep samples worst case pixels behind a text
   node's whole box: it read the accent label against the border at 1.73:1 and failed, twice at
   each width. The glyphs never touched it, but the box did, and the gate is right to measure the
   box. Two pixels of inset put the border outside it. The padding drops by the same two so the
   cell keeps its size, and the hit area stays far larger than the 16px it was before this pass. */
.sharering-link-landing .deploy-seg li .dstep-btn { all:unset; display:flex; align-items:center; justify-content:center;
  width:100%; margin:2px; padding:6px clamp(10px,1.5vw,22px); box-sizing:border-box;
  cursor:pointer; font:inherit; color:inherit; letter-spacing:inherit;
  text-transform:inherit; white-space:nowrap; }
.sharering-link-landing .deploy-seg li .dstep-btn,
.sharering-link-landing .deploy-seg li .dstep-btn:hover,
.sharering-link-landing .deploy-seg li .dstep-btn:focus,
.sharering-link-landing .deploy-seg li .dstep-btn:focus-visible,
.sharering-link-landing .deploy-seg li .dstep-btn:active { background:none; }
.sharering-link-landing .deploy-seg li:not(.on) .dstep-btn:hover { color:rgba(234,240,255,0.92); }
.sharering-link-landing .deploy-seg li .dstep-btn:focus-visible { outline:2px solid var(--srl-accent); outline-offset:3px;
  border-radius:6px; }
/* the stage: one box, four channels swapped through it */
/* Rohan, 5 Aug 2026: "make the large video area slightly smaller as it covers the chevron."
   The reserve was 350px of viewport height for the picker above and the caption below. It is now
   430px, which takes the photo from 878x548 to 752x470 at 1440x900, about 14 percent smaller, and
   scales with the viewport as before because the term is still relative to 100vh. */
.sharering-link-landing .deploy-stage { position:relative; width:min(100%, calc((100vh - 430px) * 1.6)); margin:0 auto; }
.sharering-link-landing .dch { position:absolute; inset:0; margin:0; display:flex; flex-direction:column; gap:14px;
  transition:opacity 620ms var(--ease), transform 620ms var(--ease); pointer-events:none; }
.srl-js .sharering-link-landing .dch { opacity:0; transform:translateY(20px); }
.sharering-link-landing .dch.on { opacity:1; transform:none; }
.sharering-link-landing .dch-screen { position:relative; width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#071238 0%,#050d2c 100%); border:1px solid var(--srl-line);
  box-shadow:0 24px 80px rgba(0,0,0,0.55), 0 0 60px rgba(52,88,224,0.18); }
/* round-3 item 5: a gentle scroll-driven push-in on the channel holding the stage, so each
   beat zooms into its event (the QR, the embed) as you scroll through it rather than sitting
   static. Transform only, driven by the scene engine's --dz (per-channel local progress).
   Deploy carries no product footage to scrub (the sources contain no embed or kiosk capture,
   docs/DEMO-TODO.md), so this is the scrubbed-zoom language applied to the honest artefacts. */
/* round 4: the push-in runs on an inner layer, not on the frame. Scaling the frame
   itself grew the card past the stage and covered the figcaption; scaling inside a
   clipped frame is a true Ken Burns, same shape as the build scene's. */
.sharering-link-landing .dch-zoom { position:absolute; inset:0; display:flex; }
/* round 14: the scroll-driven per-channel push-in (--dz/--dox/--doy) is gone with the
   scrub engine. The channels now advance on a dwell, so there is no scroll to ride. */
/* ROUND 16 CONTRAST FIX. This caption straddles the deploy to scan boundary, so it gets the scrim
   the copy blocks get. Same mechanism, same tokens, tighter inset: .scene-copy::before, whose own
   comment records why it exists ("the engine biases --srl-scrim toward the ink's opposite pole, so
   both sides of the ink flip clear 4.5:1 while the canvas is in transit"). Measured before: 3.52:1
   with the light ink on a mid blue at deploy@settled, and 2.28:1 with the navy ink on the same
   canvas one boundary later. It is the one text block in this scene that had no scrim, because
   until this round it never straddled anything. */
.sharering-link-landing .dch figcaption { position:relative; font-size:clamp(15px,1.35vw,19px); font-weight:300; color:rgba(234,240,255,0.86); max-width:44em; margin:0 auto; }
/* A FIXED DARK PLATE, not var(--srl-scrim), and that took measuring to arrive at. The live scrim
   is biased toward the ink's opposite pole, which works when the canvas has committed to a pole
   and fails in the middle of a transition, where the scrim is itself mid toned. At the deploy to
   scan boundary it composites to about rgb(121,130,150), and NO text colour clears 4.5:1 on that:
   luminance 0.219 needs the text below 0.0098, and even a fully opaque --srl-navy only reaches
   4.37:1. Raising the scrim's opacity to 1 moved the three failures by 0.07 of a ratio point,
   which is what proved the scrim colour was the problem rather than its coverage.
   So the caption gets its own surface and literal ink, exactly as .browser-url and .deploy-seg do.
   10.2:1, and it cannot be moved by the journey. The fade finishes outside the text: 40px of
   horizontal inset against a 20px ramp, so every text pixel sits over solid plate. */
.sharering-link-landing .dch figcaption::before { content:""; position:absolute; inset:-18px -40px; z-index:-1; pointer-events:none;
  background:rgba(4,8,28,0.88); border-radius:16px; opacity:1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent), linear-gradient(0deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent), linear-gradient(0deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);
  mask-composite:intersect; }
/* the QR poster channel: a printed artefact, not a screen */
.sharering-link-landing .dch-poster { background:var(--srl-pale); border-color:rgba(2,24,74,0.2); }
/* ROUND 19: the poster panel now holds a photograph rather than a drawn artefact, so it fills the
   frame edge to edge instead of being centred on a pale card. The asset is cropped to 1.6 at build
   time to match .dch-screen's 16/10, so cover has almost nothing left to trim and the standee
   cannot drift out of frame at any width. */
.sharering-link-landing .dch-poster-photo { background:#0a0f22; }
.sharering-link-landing .dch-poster-photo .dch-zoom { padding:0; }
.sharering-link-landing .poster-photo { width:100%; height:100%; object-fit:cover; display:block; }
.sharering-link-landing .dch-poster .dch-zoom { flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,1.8vh,20px); }
.sharering-link-landing .poster-qr { position:relative; width:min(62%,380px); aspect-ratio:1; }
/* round 16 item 4: the real code. An SVG with its width and height attributes stripped and its
   viewBox kept, so it fills whatever box the page gives it and stays crisp at every size from
   this 380px poster down to the 110px Act 2 card. The 4 module quiet zone is inside the file, so
   the page must NOT add padding that a scanner would read as part of the code, and must not tint
   it: pure black on pure white is the one place on this page where contrast is functional. */
.sharering-link-landing .qr-img { display:block; width:100%; height:100%; }
.sharering-link-landing .dch-poster .qr-note { font-family:"JetBrains Mono",monospace !important; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(2,24,74,0.8); border:1px dashed rgba(2,24,74,0.3); border-radius:999px; padding:5px 12px; }
/* the embed channel: real code, the Act 2 code-card treatment */
.sharering-link-landing .dch-code { background:#0A1633; border-color:rgba(77,138,255,0.3); text-align:left; }
.sharering-link-landing .dch-code .dch-zoom { flex-direction:column; }
.sharering-link-landing .dch-code pre { margin:0; padding:clamp(16px,2.6vh,30px) clamp(18px,2.6vw,38px); overflow:auto; flex:1; display:flex; align-items:center; }
.sharering-link-landing .dch-code code { font-family:"JetBrains Mono",monospace !important; font-size:clamp(14px,1.72vw,24px); line-height:1.95; color:#9fb0d8; white-space:pre; }
/* the email channel: a message, kept plain and typographic */
.sharering-link-landing .dch-mail { background:#F3F6FD; border-color:rgba(2,24,74,0.18); text-align:left; }
.sharering-link-landing .dch-mail .dch-zoom { flex-direction:column; align-items:flex-start; justify-content:center; gap:clamp(8px,1.4vh,14px); padding:clamp(20px,3.4vw,52px); }
.sharering-link-landing .mail-head { display:flex; flex-direction:column; gap:6px; }
.sharering-link-landing .mail-k { font-family:"JetBrains Mono",monospace !important; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(2,24,74,0.78); }
.sharering-link-landing .mail-head b { font-weight:600; font-size:clamp(20px,2.5vw,36px); line-height:1.2; letter-spacing:-0.015em; color:#0A1B47; }
.sharering-link-landing .mail-body { font-size:clamp(14px,1.5vw,21px); color:rgba(10,27,71,0.75); max-width:34em; }
.sharering-link-landing .mail-cta { display:inline-flex; align-items:center; margin-top:10px; background:var(--srl-cta); color:#fff; font-weight:600; font-size:clamp(14px,1.3vw,19px); padding:14px 28px; border-radius:999px; }
.sharering-link-landing .mail-link { font-family:"JetBrains Mono",monospace !important; font-size:clamp(11px,1.15vw,16px); letter-spacing:0.04em; color:var(--srl-navy-mid); }
/* the kiosk channel: the same QR, stood up on a screen */
.sharering-link-landing .dch-kiosk { background:linear-gradient(180deg,#0B1A46 0%,#050D2C 100%); }
.sharering-link-landing .kiosk-inner { flex-direction:column; align-items:center; justify-content:center; width:100%; gap:clamp(12px,2vh,22px); }
.sharering-link-landing .dch-kiosk .poster-qr { width:clamp(180px,30vh,300px); background:#fff; padding:10px; border-radius:8px; }
.sharering-link-landing .kiosk-line { font-size:clamp(18px,2.1vw,30px); font-weight:300; color:var(--srl-ink); letter-spacing:-0.01em; }
.sharering-link-landing .kiosk-mark { height:clamp(18px,1.9vw,26px); width:auto; opacity:0.9; }
/* the stage needs its own height because the channels are absolute */
.sharering-link-landing .deploy-stage::before { content:""; display:block; width:100%; aspect-ratio:16/10; }
.sharering-link-landing .deploy-stage { padding-bottom:clamp(30px,5vh,52px); }

/* ---- CH7 SCAN LIVE: the pale peak (the live ink system carries the inversion,
   so the flip lands exactly when the canvas crosses the luminance threshold) ------ */
.sharering-link-landing .c-scan .srl-stage { text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.sharering-link-landing .qr-wrap { position:relative; width:clamp(180px,22vh,240px); aspect-ratio:1; margin:6px 0 2px; }
/* round 16 item 4: .qr-blocks, .qr-finder and .qr-chip are gone with the drawing they built.
   They were a repeating-linear-gradient plus three finder squares, which looked like a QR code
   and could not be scanned. Every one of the four placements now carries the generated SVG.
   .qr-blocks also had a --p driven opacity ramp, which is why the code used to fade in with the
   scene; the real code does not fade, because a half opaque QR is a QR that does not scan. */
.sharering-link-landing .scan-tap { display:none; }
/* ROUND 19: the two scan subs. Desktop gets the one about scanning, mobile the one about tapping.
   Declared here as the desktop default so the mobile block below only has to flip the pair. */
.sharering-link-landing .scan-sub-mobile { display:none; }
/* ROUND 19: the scan headline pairs with the subs above. Desktop names the QR beside it; mobile
   names the deeplink, because the code is not on screen there. */
.sharering-link-landing .scan-h2-mobile { display:none; }

/* round-5 item 4: the code and the screen it opens, side by side */
/* two columns from 900px: the code and its copy on the left, the real scanner screen on
   the right at the reference phone scale. Centred and stacked below that. */
@media (min-width:900px) {
  .sharering-link-landing .c-scan .srl-stage { display:grid; grid-template-columns:minmax(0,1.15fr) auto; align-items:center;
    gap:clamp(28px,5vw,80px); text-align:left; justify-items:start; }
  .sharering-link-landing .c-scan .srl-display, .sharering-link-landing .c-scan .srl-sub { margin-left:0; margin-right:0; }
  .sharering-link-landing .scan-col { display:flex; flex-direction:column; align-items:flex-start; }
}
.sharering-link-landing .scan-pair { display:flex; align-items:center; justify-content:center; margin:clamp(14px,2.4vh,26px) 0; }
.sharering-link-landing .qr-col { display:flex; flex-direction:column; align-items:center; gap:12px; }
/* round 16: 0.72 to 0.92. Measured 4.31:1 against the 4.5 floor at the transition position, which
   is a near miss rather than a design decision, and 10px uppercase mono has no margin to give. */
.sharering-link-landing .qr-note-scan { font-family:"JetBrains Mono",monospace !important; font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(2,24,74,0.92); border:1px dashed rgba(2,24,74,0.32); border-radius:999px; padding:5px 12px; }
/* round 16 item 6: same box model fix. This slot holds a still, so its ratio comes from the
   JPEG's intrinsic size rather than from a crop: sharering-me-scanner.jpg is 782x1694, which is
   0.46163, and 1694/782 is 2.16624. */
.sharering-link-landing .scan-phone { position:relative; width:min(var(--phone-width), calc((100svh - 200px) / 2.16624 + 20px)); aspect-ratio:auto;
  border-radius:32px; background:#0A1B47; border:1px solid rgba(2,24,74,0.28); padding:10px;
  box-shadow:0 26px 70px rgba(2,24,74,0.28); flex:none; }
.sharering-link-landing .scan-phone .screen { position:relative; aspect-ratio:782/1694; height:auto; border-radius:23px; overflow:hidden; background:#0A1B47; }


/* ---- boundary transition engine output ---------------------------------------
   The engine writes --xf-o (opacity) and --xf-y (translateY) per framed screen. These
   rules COMPOSE that with each frame's own transform rather than replacing it, so the
   shift phone keeps its centring and the doc pile and results dashboard keep their
   parallax. Defaults leave every screen fully visible, which is also the reduced-motion
   and no-JS state. */
.sharering-link-landing .hero-browser-wrap, .sharering-link-landing .build-browser, .sharering-link-landing .ai-browser, .sharering-link-landing .deploy-stage, .sharering-link-landing .flow-browser,
.sharering-link-landing .scan-phone, .sharering-link-landing .user-phone, .sharering-link-landing .shift-phone, .sharering-link-landing .doc-pile, .sharering-link-landing .results-dash { opacity:var(--xf-o,1); }
.sharering-link-landing .hero-browser-wrap, .sharering-link-landing .build-browser, .sharering-link-landing .ai-browser, .sharering-link-landing .deploy-stage, .sharering-link-landing .flow-browser,
.sharering-link-landing .scan-phone, .sharering-link-landing .user-phone { transform:translateY(var(--xf-y,0%)); }
.sharering-link-landing .shift-phone { transform:translateY(calc(-50% + var(--xf-y,0%))); }
.sharering-link-landing .doc-pile { transform:translateY(calc(var(--p,0) * -4vh + var(--xf-y,0%))); }
.sharering-link-landing .results-dash { transform:translateY(calc(var(--p,0) * -3vh + var(--xf-y,0%))); }

/* ---- CH8 USER SIDE: return to dark (precedent: dm phone-frame scenes) --------- */
.sharering-link-landing .c-user .srl-stage { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:center; }
@media (min-width:768px) { .sharering-link-landing .c-user .scene-copy { order:2; } .sharering-link-landing .c-user .user-phone-col { order:1; } }
.sharering-link-landing .user-phone-col { display:flex; flex-direction:column; align-items:center; gap:18px; }
/* item 3: the User-scene phone is the hero element, at the reference scale, so it
   dominates its scene the way the reference phone does. Real ShareRing Me "Share your
   information" screen, cropped flush to the frame at the frame's own 6/13. */
/* round 16 item 6: the ratio moves from the bezel to the screen, per the note on .shift-phone.
   Padding here is 12px, so the height budget subtracts 24 and adds it back: at 900svh the box
   comes out 352 wide with a 328x711 screen and a 735px outer height, which is exactly the
   100svh - 165 the old formula capped it at. The clipped character on "Some businesses and
   services may not accept this digital proof of identity" comes back with it, and the crop, the
   encode and the minStart floor are all untouched. */
.sharering-link-landing .user-phone { position:relative; width:min(var(--phone-width), calc((100svh - 189px) / 2.1656 + 24px)); aspect-ratio:auto; border-radius:38px; background:#050d2c; border:1px solid rgba(234,240,255,0.2); box-shadow:0 30px 90px rgba(0,0,0,0.62); padding:12px; }
.sharering-link-landing .user-phone .screen { position:relative; aspect-ratio:966/2092; height:auto; border-radius:26px; background:linear-gradient(180deg,#0a1a4d 0%,#071238 100%); overflow:hidden; }
.sharering-link-landing .user-phone .app-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
/* ROUND 19: THE BROWSER PAGE INSIDE THE PHONE, which replaced the ShareRing Me app clip.
   Built in markup rather than shipped as a picture: crisp at every phone width this scene renders
   at, real text for a screen reader, and the CTA takes the accent token so it follows whichever
   candidate is locked. It also needs no content hash and no QR audit, unlike an image.
   Light page inside the dark handset on purpose: the contrast is what makes it read as a browser
   rather than as more of the page's own chrome. Ink is literal navy over the white sheet rather
   than a token, for the same reason .browser-url and .deploy-seg carry literal ink: this surface
   has no live canvas behind it and must not follow the journey's colour lerp. */
.sharering-link-landing .webverify { position:absolute; inset:0; display:flex; flex-direction:column; background:#f4f6fb; }
.sharering-link-landing .wv-bar { display:flex; align-items:center; gap:6px; padding:7% 8% 5%; background:#e6eaf3;
  border-bottom:1px solid rgba(2,24,74,0.10); }
.sharering-link-landing .wv-lock { width:7px; height:9px; border-radius:1.5px; border:1.4px solid rgba(2,24,74,0.5);
  position:relative; flex:none; }
.sharering-link-landing .wv-lock::before { content:''; position:absolute; left:50%; top:-4px; width:6px; height:6px;
  transform:translateX(-50%); border:1.4px solid rgba(2,24,74,0.5); border-bottom:0;
  border-radius:3px 3px 0 0; }
.sharering-link-landing .wv-url { font-family:"JetBrains Mono",monospace !important; font-size:clamp(6px,0.72vw,9px);
  letter-spacing:0.01em; color:rgba(2,24,74,0.62); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.sharering-link-landing .wv-page { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4%; padding:8% 9%; text-align:center; }
.sharering-link-landing .wv-mark { width:38%; height:auto; opacity:0.92; }
.sharering-link-landing .wv-title { font-weight:650; font-size:clamp(11px,1.34vw,17px); line-height:1.2; color:#02184a;
  letter-spacing:-0.01em; }
.sharering-link-landing .wv-sub { font-size:clamp(8px,0.92vw,12px); line-height:1.45; color:rgba(2,24,74,0.66); }
.sharering-link-landing .wv-cta { width:100%; padding:7% 0; border-radius:999px; background:var(--srl-accent);
  color:var(--srl-accent-ink); font-weight:650; font-size:clamp(9px,1.06vw,14px);
  box-shadow:0 8px 24px var(--srl-accent-soft); }
.sharering-link-landing .wv-foot { font-family:"JetBrains Mono",monospace !important; font-size:clamp(6px,0.7vw,9px);
  letter-spacing:0.1em; text-transform:uppercase; color:rgba(2,24,74,0.42); }
/* progress dock: part of the frame chrome, beneath the screen, never over footage */
.sharering-link-landing .user-steps { display:flex; justify-content:space-between; gap:18px; width:clamp(220px,20vw,280px); margin-top:-6px;
  background:#050d2c; border:1px solid rgba(234,240,255,0.2); border-radius:18px; padding:12px 22px; box-shadow:0 16px 44px rgba(0,0,0,0.5); }
.sharering-link-landing .user-step { display:flex; flex-direction:column; align-items:center; gap:7px; font-family:"JetBrains Mono",monospace !important; font-size:9px; letter-spacing:0.12em; color:rgba(234,240,255,0.66); text-transform:uppercase; }
/* font-style:normal is not cosmetic here, it is what makes the two documents agree. These <i> are
   empty circle markers, so italic has no visible effect either way, but the wireframe was taking the
   browser default of italic while the WordPress render took the theme's `i { font-style:normal }`
   reset. verify-wp-computed counted that as three divergent nodes at each width, six of the eight it
   reported under tecnologia on 6 Aug 2026. Declaring it here rather than relying on either default
   settles it in both, and cannot regress sharering because an empty element has nothing to slant. */
.sharering-link-landing .user-step i { width:12px; height:12px; border-radius:50%; font-style:normal; border:1.5px solid rgba(234,240,255,0.35); transition:background 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.sharering-link-landing .user-step.on { color:rgba(234,240,255,0.85); }
.sharering-link-landing .user-step.on i { background:var(--srl-accent); border-color:var(--srl-accent); box-shadow:0 0 12px var(--srl-accent-glow); }

/* ---- CH9 RESULTS: the darkest beat (journey carries it) ----------------------- */
/* precedent: dm dimmed-behind treatment: dashboard footage at depth, darkened */
/* ROUND 16 ITEM 7. height:66% was the framing fault. width:44% and height:66% are percentages
   of two DIFFERENT things (the pin's width and the pin's height), so the box's ratio was
   whatever the viewport happened to be, and object-fit:cover trimmed an unpredictable amount at
   every size. It carries the new window's own ratio now, which is 1:1 (crop=1180:1180, see
   lib/clips.mjs for why the tree forces a square), so cover trims nothing at any viewport.
   The 72vh term replaces what height:66% used to do: keep the box inside the pin. top is 12
   percent, so 12vh plus 72vh clears 100vh, and at a wide viewport where 44 percent of the width
   would exceed the height the cap takes over instead of the pin clipping it. */
/* Rohan, 7 Aug 2026: "this is not centered next to the text anymore". It was, until round 16
   swapped height:66% for aspect-ratio:1 and left top:12% behind. With a fixed 66% height the
   frame spanned 12 to 78 percent and its centre sat at 45, near enough to the copy column,
   which .c-results .srl-stage centres with align-items:center. A square is as tall as it is
   wide, so its height now varies with viewport WIDTH while its top stayed pinned to a height
   percentage, and the two stopped agreeing. Centring on the axis removes the coupling: the
   frame is centred whatever its height turns out to be.
   The -50% goes INSIDE the transform with the parallax and the boundary offset, because this
   rule lands after the engine rule above at equal specificity and therefore owns the whole
   transform. var(--xf-y) is restated here for that reason: without it this frame was the one
   screen in the film that faded at a boundary without also sliding. */
.sharering-link-landing .results-dash { position:absolute; right:4%; top:50%; width:min(44%, 72vh); aspect-ratio:1; height:auto; border-radius:12px; border:1px solid rgba(234,240,255,0.09); background:linear-gradient(180deg,#0a0f22 0%,#070b18 100%); overflow:hidden; transform:translateY(calc(-50% + var(--p,0) * -3vh + var(--xf-y,0%))); }
/* round 16 item 7: 0.42/0.75 to 0.55/0.85. Rohan can see this element well enough to judge its
   framing, so it is not as far into the background as the round 5 design intended. It stays a
   background element and it stops being a smear. The copy beside it is protected by
   .scene-copy::before and the payload column carries its own opaque #070a14, so the scrim
   system's 4.5:1 floor does not depend on this value; re-checked with the contrast sweep. */
.sharering-link-landing .results-dash .slot-video { filter:brightness(0.55) saturate(0.85); }
.sharering-link-landing .c-results .srl-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.sharering-link-landing .payload { font-family:"JetBrains Mono",monospace !important; font-size:clamp(11.5px,1.05vw,14px); line-height:1.75; color:#9fb0d8; background:#070a14; border:1px solid rgba(234,240,255,0.1); border-radius:12px; padding:18px 20px; min-height:16em; white-space:pre-wrap; box-shadow:0 24px 70px rgba(0,0,0,0.6); }
.sharering-link-landing .payload .sig { color:var(--srl-accent); background:var(--srl-accent-soft); border-radius:3px; padding:0 4px; }
.sharering-link-landing .payload .caret { display:inline-block; width:0.55em; height:1.1em; vertical-align:text-bottom; background:var(--srl-accent); animation:srl-caret 900ms steps(1) infinite; }
.sharering-link-landing .c-results .srl-pin.done .payload .caret { opacity:0; animation:none; }

/* ---- CH10 PROOF: exhale to deep navy ----------------------------------------- */
.sharering-link-landing .c-proof .srl-stage { text-align:left; }
/* three, not four, since the stress test stat went on 5 Aug 2026. A four column grid holding three
   items leaves a visible hole in the last cell rather than centring them. */
.sharering-link-landing .stat-wall { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px); margin-top:clamp(20px,4vh,40px); }
.sharering-link-landing .stat b { font-family:"TWK Lausanne","Inter Tight",sans-serif !important; font-weight:600; font-size:clamp(34px,4.6vw,72px); color:var(--srl-accent); display:block; line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.sharering-link-landing .stat-wall .stat:first-child b { font-size:clamp(40px,5.6vw,88px); } /* the lead stat breaks the grid */
.sharering-link-landing .stat .u { display:block; height:2px; margin:10px 0 10px; background:var(--srl-accent); transform-origin:left; transform:scaleX(var(--u,0)); transition:transform 500ms var(--ease); box-shadow:0 0 8px var(--srl-accent-glow); }
.sharering-link-landing .stat span { font-size:clamp(12.5px,1.05vw,15px); color:var(--srl-ink-soft); }
/* Certification badges (audit fix 2): the real ISO 27001 artwork plus the two house seals,
   each on a white disc so the dark seals read on the dark chapter. The UK accreditation
   seal was removed on request, 30 Jul 2026; see docs/ASSET-SOURCES.md. */
.sharering-link-landing .badge-row { display:flex; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap; align-items:center; margin-top:clamp(22px,4.5vh,44px); }
.sharering-link-landing .cert { display:flex; flex-direction:column; align-items:center; gap:10px; margin:0; }
.sharering-link-landing .cert-disc { display:flex; align-items:center; justify-content:center; width:clamp(76px,7vw,100px); height:clamp(76px,7vw,100px); border-radius:50%; background:#fff; box-shadow:0 6px 22px rgba(1,2,41,0.4); }
.sharering-link-landing .cert-disc img { width:88%; height:88%; object-fit:contain; border-radius:50%; }
.sharering-link-landing .cert figcaption { font-family:"JetBrains Mono",monospace !important; font-size:10.5px; letter-spacing:0.1em; color:var(--srl-ink-soft); white-space:nowrap; }

/* ---- CH11 CLOSER: full bloom (precedent: dm closer bloom; journey carries base) */
.sharering-link-landing .c-closer .blob-a { width:70vw; height:70vw; left:-16vw; top:-20vw; opacity:0.5; background:radial-gradient(circle,var(--srl-lapis) 0%,transparent 65%); animation:srl-aurora-slow 22s ease-in-out infinite alternate; }
.sharering-link-landing .c-closer .blob-b { width:52vw; height:52vw; right:-12vw; bottom:-16vw; opacity:0.28; background:radial-gradient(circle,var(--srl-accent) 0%,transparent 62%); animation:srl-aurora 26s ease-in-out infinite alternate-reverse; }
.sharering-link-landing .c-closer .srl-stage { text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.sharering-link-landing .closer-trial { font-size:var(--type-body-l); font-weight:300; color:var(--srl-ink); }
/* round 16 item 8: the line absorbed from the removed Act 2 CTA band. Sized between the display
   and the trial line so it reads as the ask rather than as a second headline, and it uses the
   band-title weight the original carried rather than a new one. */
.sharering-link-landing .closer-close { font-family:"TWK Lausanne","Inter Tight",sans-serif !important; font-weight:600;
  font-size:clamp(20px,2.2vw,30px); line-height:1.15; letter-spacing:-0.018em;
  color:var(--srl-ink); margin-top:4px; }
.sharering-link-landing .closer-ctas { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; position:relative; padding-bottom:18px; }
/* round 16 item 8: the page ends at the closer, so the closer carries the only route to the three
   pages the bands below it moved to. Plain typographic links in the mono register the page already
   uses for its eyebrows and rails; no new mechanism. */
.sharering-link-landing .closer-nav { display:flex; gap:clamp(12px,2vw,26px); flex-wrap:wrap; justify-content:center;
  margin-top:6px; }
.sharering-link-landing .closer-nav a { font-family:"JetBrains Mono",monospace !important; font-size:clamp(10.5px,0.95vw,12.5px);
  letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--srl-ink-soft);
  border-bottom:1px solid rgba(234,240,255,0.28); padding-bottom:4px;
  transition:color 200ms var(--ease), border-color 200ms var(--ease); }
.sharering-link-landing .closer-nav a:hover { color:var(--srl-accent); border-color:var(--srl-accent); }
.sharering-link-landing .closer-nav a:focus-visible { outline:2px solid var(--srl-accent); outline-offset:4px; }

/* ---- ACT BREAK + ACT 2: the reference layer (classic 1280px band language) ----
   Light canvases over the continuing colour journey; ledger grid at reduced density
   (body.act2-zone). Square-cornered cards per the site band template. */
.sharering-link-landing .act-break { height:28vh; }
.sharering-link-landing .site-base { height:16vh; background:#01030E; }
body.act2-zone.sharering-link-landing .ledger-grid { opacity:0.45; }
.sharering-link-landing .ledger-grid { transition:opacity 600ms var(--ease); }

/* Band-level text binds to the live ink (P1a) so the closer-to-Act-2 handoff and the
   trust-to-CTA plunge stay legible while the canvas is in transit. Text on the white
   cards keeps static navy: the cards carry their own canvas. z-index:1 lifts the
   band scrims above the fixed grid. */
.sharering-link-landing .act2 { position:relative; z-index:1; color:var(--srl-ink); }
.sharering-link-landing .act2-band { position:relative; padding:clamp(56px,9vh,110px) var(--scene-pad); }
.sharering-link-landing .band-inner { max-width:1280px; margin:0 auto; }
.sharering-link-landing .band-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sharering-link-landing .sr-wordmark-act2 { height:22px; width:auto; }
.sharering-link-landing .band-eyebrow { font-family:"JetBrains Mono",ui-monospace,monospace !important; font-weight:600; font-size:clamp(10.5px,0.9vw,12.5px); letter-spacing:0.22em; text-transform:uppercase; color:var(--srl-eyebrow-ink); }
.sharering-link-landing .band-title { font-family:"TWK Lausanne","Inter Tight",sans-serif !important; font-weight:600; font-size:clamp(28px,3.2vw,44px); line-height:1.06; letter-spacing:-0.022em; hanging-punctuation:first last; color:var(--srl-ink); margin:14px 0 14px; }
.sharering-link-landing .band-lede { font-size:clamp(16px,1.25vw,18.5px); font-weight:300; color:var(--srl-ink-soft); max-width:46em; margin-bottom:8px; }
.sharering-link-landing .act2-band p { color:var(--srl-ink-soft); }
.sharering-link-landing .band-link { display:inline-block; margin-top:22px; font-weight:600; font-size:15px; color:var(--srl-navy-mid); border-bottom:1.5px solid var(--srl-navy-mid); padding-bottom:2px; }
.sharering-link-landing .band-link:hover { color:var(--srl-cta); border-color:var(--srl-cta); }

/* definition */
.sharering-link-landing .b-def .band-lede { font-size:clamp(17px,1.4vw,20px); max-width:52em; }

/* how it works */
.sharering-link-landing .hiw-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px; }
.sharering-link-landing .hiw-card { background:rgba(255,255,255,0.66); border:1px solid rgba(10,36,114,0.12); border-radius:4px; overflow:hidden; }
.sharering-link-landing .hiw-media { position:relative; aspect-ratio:16/10; background:#0d1c48; }
/* step 02 shows the artefact a workflow becomes; the old clip was a loading spinner */
.sharering-link-landing .hiw-poster { display:flex; align-items:center; justify-content:center; background:var(--srl-pale); }
.sharering-link-landing .hiw-poster .poster-qr { width:min(46%,110px); }
/* step 03 carries a still of real ShareRing Me UI at the card's own aspect, so the
   app screen fills the slot instead of floating in it (same slot treatment as the
   video cards: fill the media box, nothing laid over it) */
.sharering-link-landing .hiw-shot { background:var(--srl-pale); }
.sharering-link-landing .hiw-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sharering-link-landing .hiw-num { font-family:"JetBrains Mono",monospace !important; font-size:11px; letter-spacing:0.2em; color:var(--srl-navy-mid); padding:14px 16px 0; }
.sharering-link-landing .hiw-card h3 { font-weight:600; font-size:16.5px; color:#0A1B47; padding:6px 16px 0; }
.sharering-link-landing .hiw-card p { font-size:13.5px; line-height:1.55; padding:8px 16px 18px; color:rgba(10,27,71,0.75); }

/* capabilities */
.sharering-link-landing .cap-cols { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,40px); margin-top:26px; }
.sharering-link-landing .cap-col h3 { font-family:"JetBrains Mono",monospace !important; font-weight:600; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--srl-navy-mid); margin-bottom:14px; }
.sharering-link-landing .cap-item { background:rgba(255,255,255,0.6); border:1px solid rgba(10,36,114,0.12); border-radius:4px; padding:14px 16px; margin-bottom:12px; }
.sharering-link-landing .cap-item b { font-weight:600; font-size:15px; color:#0A1B47; }
.sharering-link-landing .cap-item p { font-size:13.5px; line-height:1.55; margin-top:4px; color:rgba(10,27,71,0.75); }
.sharering-link-landing .code-card { background:#0A1633; border:1px solid rgba(77,138,255,0.3); border-radius:4px; overflow:hidden; margin-top:2px; box-shadow:0 18px 50px rgba(4,10,40,0.25); }
.sharering-link-landing .code-bar { display:flex; align-items:center; gap:6px; padding:9px 12px; background:rgba(234,240,255,0.05); border-bottom:1px solid rgba(234,240,255,0.08); }
.sharering-link-landing .code-bar span { width:9px; height:9px; border-radius:50%; background:rgba(234,240,255,0.18); }
.sharering-link-landing .code-bar em { font-style:normal; margin-left:8px; font-family:"JetBrains Mono",monospace !important; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(234,240,255,0.5); }
.sharering-link-landing .code-card pre { margin:0; padding:16px 18px; overflow-x:auto; }
.sharering-link-landing .code-card code { font-family:"JetBrains Mono",monospace !important; font-size:12.5px; line-height:1.7; color:#9fb0d8; white-space:pre; }

/* pricing (character-for-character band) */
.sharering-link-landing .price-h { font-weight:600; font-size:clamp(17px,1.4vw,20px); color:var(--srl-ink); margin:30px 0 10px; }
.sharering-link-landing .table-scroll { overflow-x:auto; }
.sharering-link-landing .price-table { width:100%; border-collapse:collapse; background:rgba(255,255,255,0.66); border:1px solid rgba(10,36,114,0.12); border-radius:4px; }
.sharering-link-landing .price-table th { font-family:"JetBrains Mono",monospace !important; font-weight:600; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--srl-navy-mid); text-align:left; padding:12px 16px; border-bottom:1px solid rgba(10,36,114,0.18); }
.sharering-link-landing .price-table td { font-size:14.5px; color:rgba(10,27,71,0.85); padding:12px 16px; border-bottom:1px solid rgba(10,36,114,0.09); }
.sharering-link-landing .price-table tr:last-child td { border-bottom:none; }
.sharering-link-landing .price-table th:last-child, .sharering-link-landing .price-table td:last-child { text-align:right; white-space:nowrap; font-weight:600; color:#0A1B47; font-variant-numeric:tabular-nums; }
.sharering-link-landing .price-note { font-size:14px; margin-top:16px; max-width:60em; }
.sharering-link-landing .srl-btn-navy { background:var(--srl-navy); color:#fff; margin-top:22px; }
.sharering-link-landing .srl-btn-navy:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(2,24,74,0.35); }

/* industries */
.sharering-link-landing .ind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.sharering-link-landing .ind-card { display:block; background:rgba(255,255,255,0.66); border:1px solid rgba(10,36,114,0.12); border-radius:4px; padding:20px 20px 18px; transition:transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.sharering-link-landing .ind-card:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(4,10,40,0.12); }
.sharering-link-landing .ind-card h3 { font-weight:600; font-size:17px; color:#0A1B47; }
.sharering-link-landing .ind-card p { font-size:13.5px; line-height:1.55; margin-top:8px; color:rgba(10,27,71,0.75); }
.sharering-link-landing .ind-card h3::after { content:" \2192"; color:var(--srl-navy-mid); font-weight:600; }

/* integrate */
.sharering-link-landing .int-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.sharering-link-landing .int-card { background:rgba(255,255,255,0.66); border:1px solid rgba(10,36,114,0.12); border-radius:4px; padding:20px; }
.sharering-link-landing .int-card h3 { font-weight:600; font-size:17px; color:#0A1B47; }
.sharering-link-landing .int-card p { font-size:14px; line-height:1.6; margin-top:8px; color:rgba(10,27,71,0.78); }

/* privacy */
.sharering-link-landing .b-privacy p { max-width:56em; margin-bottom:14px; font-size:clamp(15px,1.2vw,17px); line-height:1.65; }
.sharering-link-landing .b-privacy p b { color:#0A1B47; }
.sharering-link-landing .priv-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.sharering-link-landing .priv-badges span { font-family:"JetBrains Mono",monospace !important; font-size:11px; letter-spacing:0.1em; color:var(--srl-navy-mid); border:1px solid rgba(10,36,114,0.25); border-radius:4px; padding:8px 13px; background:rgba(255,255,255,0.5); }

/* docs hub */
.sharering-link-landing .docs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.sharering-link-landing .docs-card { display:block; background:rgba(255,255,255,0.66); border:1px solid rgba(10,36,114,0.12); border-radius:4px; padding:18px 18px 16px; transition:transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.sharering-link-landing .docs-card:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(4,10,40,0.12); }
.sharering-link-landing .docs-card b { font-weight:600; font-size:15.5px; color:#0A1B47; }
.sharering-link-landing .docs-card b::after { content:" \2192"; color:var(--srl-navy-mid); }
.sharering-link-landing .docs-card p { font-size:13px; line-height:1.5; margin-top:6px; color:rgba(10,27,71,0.72); }

/* faq */
.sharering-link-landing .faq-list { margin-top:20px; border-top:1px solid rgba(10,36,114,0.15); }
.sharering-link-landing .faq-list details { border-bottom:1px solid rgba(10,36,114,0.15); }
.sharering-link-landing .faq-list summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 2px; font-weight:600; font-size:clamp(15px,1.2vw,17px); color:var(--srl-ink); }
.sharering-link-landing .faq-list summary::-webkit-details-marker { display:none; }
.sharering-link-landing .faq-list summary::after { content:"+"; font-family:"JetBrains Mono",monospace !important; font-size:18px; color:var(--srl-eyebrow-ink); flex:none; transition:transform 250ms var(--ease); }
.sharering-link-landing .faq-list details[open] summary::after { transform:rotate(45deg); }
.sharering-link-landing .faq-list details p { padding:0 2px 18px; max-width:62em; font-size:14.5px; line-height:1.65; }

/* trust */
/* three columns since the UK accreditation card was removed, 30 Jul 2026. At four the
   remaining three would sit in a row with a visible empty cell. */
.sharering-link-landing .trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.sharering-link-landing .trust-card { background:rgba(255,255,255,0.66); border:1px solid rgba(10,36,114,0.12); border-radius:4px; padding:18px; text-align:center; }
.sharering-link-landing .trust-badge { display:block; width:76px; height:76px; margin:0 auto 12px; border-radius:50%; background:#fff; object-fit:contain; box-shadow:0 2px 10px rgba(10,36,114,0.14); }
.sharering-link-landing .trust-card b { display:block; font-weight:600; font-size:16px; color:#0A1B47; }
.sharering-link-landing .trust-card span { font-family:"JetBrains Mono",monospace !important; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--srl-navy-mid); }
.sharering-link-landing .trust-note { font-size:13.5px; margin-top:18px; color:var(--srl-ink-soft); max-width:56em; }

/* final CTA: dark band handing to the site footer. Its canvas is fixed, so its ink is
   literal: the live ink flips navy while the band scrolls in over the light zone. */
.sharering-link-landing .b-cta { background:#0A1238; color:#EAF0FF; text-align:center; padding-top:clamp(64px,11vh,130px); padding-bottom:clamp(64px,11vh,130px); }
.sharering-link-landing .b-cta .band-title { color:#F4F7FF; }
.sharering-link-landing .b-cta .band-lede { color:rgba(234,240,255,0.72); margin:0 auto 10px; }
.sharering-link-landing .b-cta .srl-btn-ghost { color:#EAF0FF; border-color:rgba(234,240,255,0.22); }
.sharering-link-landing .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* ---- brand wordmarks: white on dark, navy on light ---- */
.sharering-link-landing .wordmark { display:block; width:auto; color:#fff; }
.sharering-link-landing .lockup-by { font-family:"JetBrains Mono",monospace !important; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--srl-ink-fade); }
.sharering-link-landing .sr-wordmark { display:block; height:22px; width:auto; opacity:0.95; }
/* the base opacity outranks the beat reveal in the cascade; restore the entrance */
.srl-js .sharering-link-landing .sr-wordmark[data-beat]:not(.on) { opacity:0; }
/* Rohan, 5 Aug 2026: "make sure the ShareRing logo is matched to the other logos on the page".
   It was 32px standing beside three 100px certification seals, and 13px beside 76px ones on
   mobile, because the .sr-wordmark base rule in the 767px block below lands AFTER this one at
   equal specificity and won. That 13px was a cascade accident, not a decision.

   THE HEIGHT HERE IS THE SAME EXPRESSION AS .cert-disc, ON PURPOSE. A first pass took it to
   clamp(44px,4vw,56px), a little over half the discs, on the reasoning that a 2.5:1 wordmark
   matched to their full height is 250px wide and would out-weigh a row it is meant to join.
   Rohan looked at it and asked for it larger, matched to the seals, so matched is what it is:
   change .cert-disc and this follows, because they are literally the same numbers. Do not
   "tidy" this back to a bare pixel value; the point is that the two cannot drift apart. */
/* Rohan, 5 Aug 2026: "centre the ShareRing logo to be in line horizontally to the logos beside it."
   It sat 13px low. align-self:center centred it against the TALLEST item in .badge-row, and that is
   the whole .cert figure, which is disc plus a 10px gap plus its caption, not the disc alone. So
   the mark lined up with the middle of "disc + ISO 27001 CERTIFIED" rather than with the seals.

   flex-start fixes it exactly rather than approximately, and only because the height above is the
   same clamp as .cert-disc: the disc is its figure's first child, so aligning to the row's top puts
   this mark's top on the discs' top, and equal heights then put the centres on the same line.
   If either height stops matching the other, this goes back to being an eyeballed offset, which is
   the second reason those two values are deliberately the same expression.

   The margin-left that used to sit here is gone with it. .badge-row already separates its children
   with gap:clamp(18px,2.4vw,34px), so the extra 10px only made this one item sit further from the
   last seal than the seals sit from each other. Worse, the row WRAPS: at 360 the mark drops onto a
   line of its own and that margin became an arbitrary indent against the discs above it. */
.sharering-link-landing .sr-wordmark-proof { height:clamp(76px,7vw,100px); align-self:flex-start;
  max-width:100%; object-fit:contain; }
/* ROUND 19, Rohan: "The ShareRing logo is micro. Needs to be much larger as can Link logo."
   Measured before: the ShareRing mark rendered 48x19 at 1440 and 38x15 at 390, against a display
   headline of 88px. A 19px parent signature beside an 88px headline reads as a footnote, not as
   the brand asserting that the thing below it is real, which is this scene's whole claim.
   Roughly 2x on both, and it fits at both widths: the desktop column had 168px of unused vertical
   space, and the mobile column gained the whole QR block when that was removed at 899px.
   The two grow together so their relative weight is unchanged: the parent mark stays visually
   subordinate to the LINK wordmark, which is the product this page is about. */
.sharering-link-landing .wordmark-scan { height:clamp(76px,6.6vw,96px); max-width:100%; margin:0 auto 10px; color:var(--srl-navy); }
/* item 6: the parent signature on the pale peak, subordinate per the hero ratio
   (~0.385 of the link mark). Enters after the mark draws, exits before handover
   (precedent: the beat rise entrance and the hero pill's progress fade). */
/* Rohan, 5 Aug 2026: "make sure it does not blow out on mobile". Measured first, and it does not:
   at 430, 390, 360 and 320 both marks stay inside the column, because the clamp floors (32px here,
   76px on .wordmark-scan) are small enough. So this is a guard, not a repair.
   max-width alone would squash a fixed-height replaced element rather than overflow it, which
   trades one defect for a worse one, so object-fit:contain goes with it: if the box is ever
   squeezed the artwork keeps its aspect inside it instead of distorting. */
.sharering-link-landing .sr-wordmark-scan { height:clamp(32px,3vw,46px); width:auto; max-width:100%; object-fit:contain; margin:0 auto 8px; opacity:0; transform:translateY(12px); transition:opacity 620ms var(--ease), transform 620ms var(--ease); }
.sharering-link-landing .c-scan.sr-on .sr-wordmark-scan { opacity:0.95; transform:none; }
.sharering-link-landing .c-scan.sr-exit .sr-wordmark-scan { opacity:0; transform:translateY(-10px); }
/* two-column scan (round-5 item 4): the lockup aligns with the copy, not the viewport */
@media (min-width:900px) { .sharering-link-landing .c-scan .sr-wordmark-scan, .sharering-link-landing .c-scan .wordmark-scan { margin-left:0; margin-right:auto; } }
/* Rohan, 5 Aug 2026: "make the sentence Pay per check all be on the second line." It was breaking
   mid-phrase at every desktop width, leaving "Pay" orphaned at the end of line one and "per check."
   alone on line two, which reads as a mistake rather than as a pair of statements.

   display:block rather than a <br> or white-space:nowrap. A <br> would hardcode the break into the
   markup, and nowrap would keep the phrase whole but let it overflow a narrow viewport rather than
   wrap. This lets the line before it wrap naturally, which matters on a phone: measured, the h2 is
   2 lines from 768 to 2560 and 3 lines at 390 and 320, so the sentence above cannot be forced onto
   one line at every width and should not be.

   SCOPED TO THE CLOSER. .acc appears in eight other headlines, where it accents a fragment mid
   sentence and must stay inline. */
.sharering-link-landing .c-closer .srl-display .acc { display:block; }

.sharering-link-landing .closer-brand { display:flex; align-items:center; gap:18px; margin:6px 0 6px; }
/* The closer brand moment (audit fix 3): the link mark at ~45 percent of the hero
   mark, about 300px wide at 1440, ShareRing beside it at the hero's subordinate ratio. */
.sharering-link-landing .wordmark-closer { height:clamp(96px,10vw,144px); color:#fff; }
.sharering-link-landing .brand-divider { width:1px; height:clamp(40px,4vw,58px); background:rgba(234,240,255,0.3); }
/* Rohan, 5 Aug 2026: the parent mark on the pricing closer was too small. It was 36px against a
   144px LINK wordmark, which is 25 percent, and it was SHORTER THAN THE DIVIDER BESIDE IT
   (clamp(40px,4vw,58px)). A divider taller than the thing it separates reads as a mistake.
   It now sits a little above the divider and at roughly 45 percent of LINK, which is the same
   proportion the scan scene already uses, so the parent signature is consistent across the page. */
.sharering-link-landing .sr-wordmark-closer { height:clamp(42px,4.4vw,64px); max-width:100%; object-fit:contain; }
.sharering-link-landing .act2-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* localized draw-on accents surviving the override: QR trace + closer underline */
.sharering-link-landing .qr-trace { position:absolute; inset:-12px; width:calc(100% + 24px); height:calc(100% + 24px); pointer-events:none; }
.sharering-link-landing .qr-trace path { fill:none; stroke:var(--srl-navy-mid); stroke-width:1.6; transition:stroke-dashoffset 1100ms var(--ease), opacity 300ms var(--ease); }
.sharering-link-landing .cta-underline { position:absolute; left:50%; bottom:0; width:min(320px,70%); height:2px; border-radius:2px; transform:translateX(-50%) scaleX(0); transform-origin:left; background:var(--srl-accent); box-shadow:0 0 10px var(--srl-accent-glow); transition:transform 900ms var(--ease); }
.sharering-link-landing .cta-underline.on { transform:translateX(-50%) scaleX(1); }
/* P2: the closer lockup rises staggered, then one accent underline sweep beneath it
   (precedent: the cta-underline sweep, localized under the lockup) */
.sharering-link-landing .brand-underline[data-beat] { display:block; width:min(300px,60%); height:2px; border-radius:2px; margin:0 auto; background:var(--srl-accent); box-shadow:0 0 10px var(--srl-accent-glow); transform-origin:left; transition:opacity 300ms var(--ease), transform 900ms var(--ease); }
.srl-js .sharering-link-landing .brand-underline[data-beat] { transform:scaleX(0); }
.sharering-link-landing .brand-underline[data-beat].on { transform:scaleX(1); }

/* ---- navigation: reference chevrons (round-3 item 2) ---------------------------
   Ported from digital-me-landing (fix 33): centred down/up chevrons, each tweens the
   window one stop; the down chevron bobs, paused during transit. DM's fixed navy glyph
   becomes colour-keyed to body.ink-dark here, since Link's cinema is mostly dark: white
   glyphs on the dark scenes, navy on the light scan peak, accent on focus. */
.sharering-link-landing .nav-arrow { position:fixed; left:50%; transform:translateX(-50%); width:48px; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; margin:0; cursor:pointer; color:rgba(234,240,255,0.6); z-index:60; opacity:1; transition:opacity 200ms var(--ease), color 160ms var(--ease); }
.sharering-link-landing .nav-arrow svg { width:20px; height:13px; }
/* Rohan, 5 Aug 2026, following the deploy photo resize. The chevrons are FIXED at the top and
   bottom of the viewport and the scenes scroll past them, so anything taller than the gap crosses
   them on the way through: measured at 61 percent of the deploy scene even after that photo was
   made 14 percent smaller, and it cannot reach zero by resizing. On a busy photograph a 20x13
   hairline glyph simply disappears, which is what "it covers the chevron" was describing. It was
   never unclickable; z-index 60 holds and elementFromPoint returns the button at every scroll
   position sampled. It just could not be seen.

   So the glyph carries its own separation instead of depending on what is behind it. Two shadows,
   not one: a tight offset for edge definition against mid tones, and a soft halo that lifts it off
   texture like marble or a dark coat. On the svg rather than the button, so it traces the chevron
   instead of drawing a box. No layout effect, and it composes with the existing bounce animation
   because filter and transform are independent. */
.sharering-link-landing .nav-arrow svg { filter:drop-shadow(0 1px 2px rgba(1,2,41,0.6)) drop-shadow(0 0 7px rgba(1,2,41,0.45)); }
/* inverted on the pale scan peak, where the glyph is navy and needs light behind it instead */
body.ink-dark.sharering-link-landing .nav-arrow svg { filter:drop-shadow(0 1px 2px rgba(255,255,255,0.85)) drop-shadow(0 0 7px rgba(255,255,255,0.6)); }
/* ROUND 19: THE CHEVRON TURNED DARK BLUE ON HOVER AND STAYED THAT WAY, and it is a specificity
   fight with the Elementor kit rather than anything in this file.

     .sharering-link-landing .nav-arrow           (0,2,0)   background:none, the rule above
     .elementor-kit-5 button                      (0,1,1)   loses at rest, which is why the button
                                                            measured transparent and looked fine
     .elementor-kit-5 button:hover, :focus        (0,2,1)   BEATS ours, so the kit's accent blue
                                                            rgb(10,5,87) painted the hit area

   "At all times" is the accurate description: the chevron sits centre bottom where the pointer
   rests, and CLICKING it to advance a chapter leaves focus on it, so the blue persists until the
   reader clicks somewhere else. Measured: rest transparent, hover rgb(10,5,87), focus the same,
   and still the same 1.2s after a click.

   Only the two nav arrows are affected. Every other button on the page was checked and is either
   untouched or carries its own intended hover.

   Adding the pseudo classes to our own selector takes it to (0,3,0), which outranks the kit
   without !important and without depending on the kit's ID, so it holds on production's kit too.
   post-5.css only began loading again on 3 Aug when the kit stylesheet was regenerated, which is
   why this surfaced now rather than in an earlier round. */
.sharering-link-landing .nav-arrow:hover,
.sharering-link-landing .nav-arrow:focus,
.sharering-link-landing .nav-arrow:focus-visible,
.sharering-link-landing .nav-arrow:active { background:none; }
.sharering-link-landing .nav-arrow:hover { color:rgba(234,240,255,0.95); }
.sharering-link-landing .nav-arrow:focus-visible { outline:2px solid var(--srl-accent); outline-offset:2px; border-radius:8px; }
.sharering-link-landing .nav-arrow.nav-hidden { opacity:0; pointer-events:none; }
.sharering-link-landing .nav-arrow.nav-active { color:#fff; }
.sharering-link-landing .nav-arrow-down { bottom:0; height:44px; }
.sharering-link-landing .nav-arrow-up { top:0; height:40px; }
.sharering-link-landing .nav-arrow-down svg { animation:srl-chev 1.8s ease-in-out infinite; }
body.nav-transiting.sharering-link-landing .nav-arrow-down svg { animation-play-state:paused; }
@keyframes srl-chev { 0%,100%{transform:translateY(0);opacity:0.5;} 50%{transform:translateY(8px);opacity:1;} }
/* navy glyphs on the light scan peak, keyed to the live canvas */
body.ink-dark.sharering-link-landing .nav-arrow { color:rgba(2,24,74,0.55); }
body.ink-dark.sharering-link-landing .nav-arrow:hover { color:rgba(2,24,74,0.9); }
body.ink-dark.sharering-link-landing .nav-arrow.nav-active { color:rgba(2,24,74,0.95); }
/* the reference hides the arrows under 900px (mobile) */
@media (max-width:899px) { .sharering-link-landing .nav-arrow { display:none; } }
@media (prefers-reduced-motion: reduce) { .sharering-link-landing .nav-arrow-down svg { animation:none; } }

@media (max-width:767px) {
  .sharering-link-landing .sr-wordmark { height:13px; }
  .sharering-link-landing .ledger-grid { grid-template-columns:repeat(5,1fr); }
  .sharering-link-landing .lg-time { font-size:8.5px; letter-spacing:0.08em; }
  .sharering-link-landing .lg-status { font-size:7.5px; }
  .sharering-link-landing .wordmark-closer { height:72px; }
  /* 20px against a 72px LINK and a 34px divider. Same complaint as desktop, same fix: it clears
     the divider and holds the ~45 percent relationship. */
  .sharering-link-landing .sr-wordmark-closer { height:32px; }
  /* MUST BE RESTATED HERE. `.sr-wordmark { height:13px }` at the top of this block is the same
     specificity and comes first, so without this line the proof mark inherits 13px and renders
     33x13 beside 76px seals. That is exactly how it shipped until 5 Aug 2026.
     76px is the mobile .cert-disc size, so the mark matches the seals here too. */
  /* Rohan, 7 Aug 2026: "logos look bad on mobile", the row wrapping two seals then a lone
     third. .badge-row is a flex wrap and the captions are nowrap monospace, so a phone was
     never going to fit three: "ISO 27001 CERTIFIED" alone measures wider than a third of a
     390px viewport. A three column grid states the set instead of discovering it, and the
     captions are allowed to wrap onto two lines so the column can be narrower than the
     phrase. The wordmark takes the full row beneath, which is where it wrapped to anyway,
     now on purpose and centred rather than left hanging under the first seal. */
  .sharering-link-landing .badge-row { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,2.5vw,16px);
    justify-items:center; align-items:start; max-width:min(100%,420px); }
  .sharering-link-landing .cert figcaption { font-size:9.5px; letter-spacing:0.06em; white-space:normal;
    text-align:center; line-height:1.35; }
  .sharering-link-landing .cert-disc { width:clamp(60px,18vw,76px); height:clamp(60px,18vw,76px); }
  /* same expression as .cert-disc above, for the reason given at the desktop rule */
  .sharering-link-landing .sr-wordmark-proof { height:clamp(60px,18vw,76px); grid-column:1 / -1; justify-self:center;
    margin-top:clamp(10px,3vw,18px); }
  .sharering-link-landing .brand-divider { height:34px; }
  /* reference mobile back-to-top: 40px circle, tucked bottom-left clear of the switcher */
  .sharering-link-landing .back-top { width:40px; height:40px; left:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .sharering-link-landing .hiw-grid, .sharering-link-landing .ind-grid, .sharering-link-landing .int-cols, .sharering-link-landing .docs-grid { grid-template-columns:1fr; }
  .sharering-link-landing .cap-cols { grid-template-columns:1fr; }
  .sharering-link-landing .trust-row { grid-template-columns:repeat(2,1fr); }
  .sharering-link-landing .price-table { min-width:520px; } /* tables scroll inside .table-scroll */
  .sharering-link-landing .band-head { flex-direction:row; }
}

/* ---- back to top: reference bottom-left circle (round-3 item 2) ------------------
   DM's fixed navy control, colour-keyed to body.ink-dark: light circle on the dark
   cinema, navy on the light scan peak. Appears once two viewport heights in. */
.sharering-link-landing .back-top { position:fixed; left:clamp(16px,2vw,36px); bottom:clamp(16px,2.5vh,28px); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(234,240,255,0.06); border:1px solid rgba(234,240,255,0.28); color:rgba(234,240,255,0.6); cursor:pointer; padding:0; z-index:60; opacity:0; pointer-events:none; transition:opacity 250ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.sharering-link-landing .back-top svg { width:15px; height:15px; }
.sharering-link-landing .back-top.show { opacity:1; pointer-events:auto; }
.sharering-link-landing .back-top:hover { color:rgba(234,240,255,0.95); border-color:rgba(234,240,255,0.5); }
.sharering-link-landing .back-top:focus-visible { outline:2px solid var(--srl-accent); outline-offset:2px; }
body.ink-dark.sharering-link-landing .back-top { background:rgba(10,13,49,0.05); border-color:rgba(10,13,49,0.22); color:rgba(10,13,49,0.55); }
body.ink-dark.sharering-link-landing .back-top:hover { color:rgba(10,13,49,0.95); border-color:rgba(10,13,49,0.5); }

/* ---- accent switcher (demo widget) -------------------------------------------- */
.sharering-link-landing .accent-switch { position:fixed; right:16px; bottom:16px; z-index:80; display:flex; gap:8px; align-items:center; background:rgba(1,2,41,0.85); border:1px solid rgba(234,240,255,0.15); border-radius:999px; padding:8px 12px; backdrop-filter:blur(8px); }
.sharering-link-landing .accent-switch span { font-family:"JetBrains Mono",monospace !important; font-size:9px; letter-spacing:0.18em; color:var(--srl-ink-fade); text-transform:uppercase; }
.sharering-link-landing .accent-switch button { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.sharering-link-landing .accent-switch button.active { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.25); }

/* ---- mobile -------------------------------------------------------------------- */
@media (max-width:767px) {
  .sharering-link-landing .c-hero .srl-stage, .sharering-link-landing .c-problem .srl-stage, .sharering-link-landing .c-shift .srl-stage, .sharering-link-landing .c-ai .srl-stage,
  .sharering-link-landing .c-deploy .srl-stage, .sharering-link-landing .c-user .srl-stage, .sharering-link-landing .c-results .srl-stage { grid-template-columns:1fr; gap:18px; }
  .sharering-link-landing .srl-pin { align-items:flex-start; }
  /* round 14: the pin now carries its own vertical padding, so the stage's old
     padding-top (which existed to push content off the top of a pinned viewport)
     would stack on top of it and read as a gap. The pin provides the inset now. */
  .sharering-link-landing .srl-stage { padding-top:0; }
  /* the wordmark spans full width with margins; nothing clips, nothing collides */
  .sharering-link-landing .c-hero .srl-stage { justify-content:flex-start; }
  .sharering-link-landing .wordmark-hero { width:100%; height:auto; margin-left:0; }
  .sharering-link-landing .sr-wordmark-hero { height:44px; margin-bottom:6px; }
  .sharering-link-landing .hero-h1 { font-size:18px; line-height:1.4; margin:16px 0 10px; }
  .sharering-link-landing .hero-sub, .sharering-link-landing .srl-sub { font-size:16px; }
  .sharering-link-landing .hero-sub { font-size:14.5px; }
  .sharering-link-landing .hero-ctas { margin-top:18px; }
  /* ROUND 19, Rohan: "On mobile only, can we make it so it doesn't look as though there are two
     ShareRing Wordtypes stacked?" Measured at 390: the theme header's logo runs y 12 to 60 and
     this one starts at y 68, so two identical wordmarks sit 8px apart and read as a mistake.
     It is only a mobile problem because the phone header is a fixed height band directly above
     the hero, while at 1440 the two are far enough apart to read as chrome and content.
     The HERO one goes rather than the header's: the header's is the site's own furniture on every
     page, and the hero's job here is the LINK wordmark below it, which is the thing this page is
     actually about. The parent signature is still on the page four times lower down (scan, proof,
     closer, footer), so no brand presence is lost. Desktop is untouched. */
  .sharering-link-landing .sr-wordmark-hero { display:none; }
  .sharering-link-landing .hero-browser-wrap { position:relative; right:auto; bottom:auto; width:100%; margin-top:22px; }
  /* mobile: hold a shorter box than the clip's own and frame the part that carries the
     meaning. round 16 item 2: the object-position swapped with the window. This frame now
     carries the quickstart clip at 1.409, so cover crops the SIDES and x is what matters:
     60 percent puts the frame on the branch where the new task is searched for and lands,
     which is the value the build frame used for this same window. */
  .sharering-link-landing .hero-browser .browser-canvas { aspect-ratio:0.86; }
  .sharering-link-landing .hero-browser .slot-video { object-position:60% 62%; }
  .sharering-link-landing .srl-display { font-size:clamp(34px,10vw,44px); }
  .sharering-link-landing .doc-pile { height:42vh; }
  .sharering-link-landing .shift-viz { height:44vh; }
  .sharering-link-landing .shift-phone { right:2%; width:min(44vw,176px); }
  .sharering-link-landing .shift-org { width:124px; padding:10px; }
  .sharering-link-landing .shift-doc { width:56px; }
  .sharering-link-landing .build-head { flex-direction:column; align-items:flex-start; gap:12px; }
  /* mobile: back to one column, copy above the frame, and a shorter box than the clip's own
     so the scene still fits. round 16 item 2: this frame now carries the Trial_onboarding
     clip at 0.676, so cover crops the TOP AND BOTTOM and y is what matters: 18 percent frames
     the top of the tree from Start through Age Verification to the IF/ELSE split, which is
     the value the hero used for this same window. Whole flow at 1440, the shape of it at 390. */
  .sharering-link-landing .c-build .srl-stage { display:block; }
  .sharering-link-landing .build-browser { max-width:none; width:100%; margin:14px 0 0; }
  .sharering-link-landing .build-browser .browser-canvas { aspect-ratio:0.86; }
  .sharering-link-landing .build-browser .slot-video { object-position:50% 18%; }
  /* mobile: 0.65 at 390px of width is 600px tall and the pinned viewport cannot hold that
     next to the copy and the prompt box. Same answer .build-browser gives one scene earlier:
     keep the box at 0.86 and frame the part that carries the meaning, here the top of the
     tree from Start through the age gate and its two branches. The whole tree at 1440, the
     shape of it at 390. */
  .sharering-link-landing .ai-browser { max-width:none; width:100%; margin:12px 0 0; }
  .sharering-link-landing .ai-browser .browser-canvas { aspect-ratio:0.86; }
  .sharering-link-landing .ai-browser .slot-video { object-position:50% 22%; }
  .sharering-link-landing .ai-prompt { min-height:5.5em; padding:13px 15px; }
  /* round 16 item 1: judged at 390. The AI scene is one column here, so the panel is already
     as narrow as the viewport allows and 62 percent of that is a thumbnail. 82 percent still
     reads as a state change beside the browser frame below it. */
  .sharering-link-landing .c-ai.ai-sent .ai-prompt { max-width:82%; }
  .sharering-link-landing .scan-pair { flex-direction:column; gap:16px; }
  /* on a phone you do not need a picture of a phone: the scan scene's mobile CTA
     ("You're already on your phone. Tap instead.") is the real path here, and stacking
     the scanner screen under it overflowed the pinned viewport */
  .sharering-link-landing .scan-phone { display:none; }
  .sharering-link-landing .qr-note-scan { font-size:8.5px; letter-spacing:0.09em; }
  .sharering-link-landing .build-nodes { margin-top:10px; }
  .sharering-link-landing .build-nodes li { padding:6px 0 6px 18px; gap:9px; }
  .sharering-link-landing .bn-tile { width:24px; height:24px; border-radius:7px; }
  .sharering-link-landing .bn-tile svg { width:14px; height:14px; }
  .sharering-link-landing .bn-text b { font-size:12px; }
  .sharering-link-landing .bn-text i { font-size:9px; }
  /* round 16 item 5 at 390: the frame takes the full column at the clip's own 1.6, which is
     214px tall inside a 342px column. The scene then fits inside 844 with the stage below it,
     unlike at 1440 where it does not, because the stage goes 4:3 here and loses height. */
  .sharering-link-landing .flow-browser { max-width:none; width:100%; margin:12px 0 14px; }
  /* deploy journey at 390: one channel still holds the stage, box goes 4:3 */
  .sharering-link-landing .deploy-stage { width:100%; }
  .sharering-link-landing .deploy-stage::before, .sharering-link-landing .dch-screen { aspect-ratio:4/3; }
  .sharering-link-landing .deploy-seg { padding:3px; border-radius:8px; }
  /* ROUND 19: padding on the BUTTON here too, for the same reason as the desktop rule. The
     vertical padding is raised from 7 to 12 so the control clears a finger: at 390 the strip is
     the only way to reach a channel without waiting out the cycle, and it was measuring 13px. */
  .sharering-link-landing .deploy-seg li { font-size:8.5px; letter-spacing:0.08em; padding:0; }
  .sharering-link-landing .deploy-seg li .dstep-btn { padding:10px 6px; }
  .sharering-link-landing .seg-thumb { top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 4); border-radius:6px; }
  .sharering-link-landing .dch figcaption { font-size:14px; }
  .sharering-link-landing .poster-qr { width:min(52%,180px); }
  .sharering-link-landing .dch-kiosk .poster-qr { width:min(42%,124px); }
  .sharering-link-landing .kiosk-inner { gap:10px; }
  .sharering-link-landing .kiosk-line { font-size:15px; }
  .sharering-link-landing .kiosk-mark { height:13px; }
  .sharering-link-landing .dch-code code { font-size:10px; line-height:1.65; }
  .sharering-link-landing .dch-code pre { padding:14px 16px; }
  .sharering-link-landing .dch-mail { padding:18px; gap:6px; }
  .sharering-link-landing .mail-head b { font-size:16px; }
  .sharering-link-landing .mail-body { font-size:12.5px; }
  .sharering-link-landing .mail-cta { font-size:12.5px; padding:9px 17px; }
  .sharering-link-landing .mail-link { font-size:9.5px; }
  .sharering-link-landing .results-dash { display:none; }
  .sharering-link-landing .stat-wall { grid-template-columns:repeat(2,1fr); }
  /* item 3: the hero phone stays large on mobile too; 280px clamp min is too wide for
     390px, so cap to fit with margins while keeping it the scene's dominant element */
  .sharering-link-landing .user-phone, .sharering-link-landing .user-steps { width:min(66vw,264px); }
  .sharering-link-landing .user-phone-col { gap:12px; }
  .sharering-link-landing .user-steps { padding:9px 14px; }
  .sharering-link-landing .scan-tap { display:inline-flex; margin-top:10px; }
  /* ROUND 19, Rohan: "Remove the QR on mobile, just include the link". A code you cannot scan with
     the device displaying it is dead weight on the smallest screen, where space is scarcest. The
     whole .scan-pair goes, which takes the code, its animated trace outline and its
     "Scan to book a demo" note with it, leaving the copy and the button. */
  .sharering-link-landing .scan-pair { display:none; }
  .sharering-link-landing .scan-sub-desktop { display:none; }
  .sharering-link-landing .scan-sub-mobile { display:block; }
  .sharering-link-landing .scan-h2-desktop { display:none; }
  .sharering-link-landing .scan-h2-mobile { display:block; }
  .sharering-link-landing .payload { min-height:12em; }
}

/* ---- the film lightbox ---------------------------------------------------------
   New UI, so it is plain layout and type in the tokens the page already carries. No new
   motion mechanism: the scrim fades and the box rises on the same house easing every
   scene beat uses. Nothing here applies until the JS drops the hidden attribute, so the
   round-10 computed-style baseline is untouched while the dialog is closed. */
.sharering-link-landing .srl-film[hidden] { display:none; }
.sharering-link-landing .srl-film { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); }
.sharering-link-landing .srl-film-scrim { position:absolute; inset:0; background:rgba(1,2,41,0.90); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transition:opacity 260ms var(--ease); }
.sharering-link-landing .srl-film-box { position:relative; width:min(1120px,100%); opacity:0; transform:translateY(14px); transition:opacity 320ms var(--ease), transform 320ms var(--ease); }
.sharering-link-landing .srl-film.is-open .srl-film-scrim { opacity:1; }
.sharering-link-landing .srl-film.is-open .srl-film-box { opacity:1; transform:none; }
.sharering-link-landing .srl-film-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 2px 14px; }
.sharering-link-landing .srl-film-title { font-family:"Inter Tight",sans-serif !important; font-weight:600; font-size:clamp(18px,2vw,24px); letter-spacing:-0.01em; color:var(--srl-ink); }
/* padding:0 is load-bearing and only matters under WordPress. Elementor's kit sets
   `.elementor-kit-5 button { padding:14px 24px }`, which outranks the engine's own
   `* { padding:0 }` reset. With box-sizing:border-box that padding eats the whole 40px
   button: the content box clamps to zero, the 18px svg inside collapses to 0 wide, and
   the button cannot shrink below its own padding plus border, which is where the 50px
   measured width came from. The wireframe never shows this because Elementor is not
   there. .srl-film-sound is safe already because it declares its own padding. */
.sharering-link-landing .srl-film-x { flex:none; width:40px; height:40px; padding:0; border-radius:999px; border:1px solid rgba(234,240,255,0.22); background:rgba(234,240,255,0.04); color:var(--srl-ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background 200ms var(--ease); }
.sharering-link-landing .srl-film-x:hover { background:rgba(234,240,255,0.10); }
.sharering-link-landing .srl-film-x svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; }
.sharering-link-landing .srl-film-frame { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--srl-line); background:#0A1238; box-shadow:0 30px 90px rgba(0,0,0,0.55); }
.sharering-link-landing .srl-film-video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0A1238; }
.sharering-link-landing .srl-film-foot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:14px 2px 0; }
.sharering-link-landing .srl-film-sound { font-family:"Inter Tight",sans-serif !important; font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px; border:1px solid rgba(234,240,255,0.22); background:rgba(234,240,255,0.04); color:var(--srl-ink); cursor:pointer; transition:background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
.sharering-link-landing .srl-film-sound:hover { background:rgba(234,240,255,0.10); }
.sharering-link-landing .srl-film-sound[aria-pressed="true"] { border-color:var(--srl-accent); color:var(--srl-accent); }
.sharering-link-landing .srl-film-note { font-size:14px; color:var(--srl-ink-fade); }
.sharering-link-landing .srl-film :focus-visible { outline:2px solid var(--srl-accent); outline-offset:3px; }
/* the page does not scroll behind the dialog. overflow:hidden rather than a fixed-body
   lock, because the scene engine reads window.scrollY and a fixed body would zero it,
   rebuild every scene at its top state and jump on close. */
html.srl-film-open, html.srl-film-open body { overflow:hidden; }
@media (max-width:768px) {
  .sharering-link-landing .srl-film { padding:14px; }
  .sharering-link-landing .srl-film-head { margin-bottom:10px; }
  .sharering-link-landing .srl-film-note { font-size:13px; }
}

/* ---- reduced motion: complete, static ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sharering-link-landing .srl-film-scrim, .sharering-link-landing .srl-film-box { transition:none; }
  .sharering-link-landing .srl-film-box { transform:none; }
  .sharering-link-landing .blob, .sharering-link-landing .problem-pulse, .sharering-link-landing .payload .caret { animation:none; }
  /* round 15: a card that is shown statically never gains a float */
  .sharering-link-landing .doc-card[data-beat].float { animation:none; }
  /* round 15: a viewer who has asked for less motion gets the prompt as body copy rather
     than as nine seconds of footage of someone typing it */
  .sharering-link-landing .ai-prompt-vid { display:none; }
  /* round 16 item 1: this panel is already showing body copy rather than the clip here, so
     there is nothing for a shrink to be the consequence OF. The engine never adds .ai-sent
     under reduced motion either (it returns before any clip is wired), so the max-width reset
     is belt and braces and the transition removal is the part that matters. */
  .sharering-link-landing .ai-prompt { transition:none; }
  .sharering-link-landing .c-ai.ai-sent .ai-prompt { max-width:none; }
  .sharering-link-landing .ai-prompt-text { position:static; width:auto; height:auto; margin:0; overflow:visible;
    clip:auto; white-space:normal; }
  .sharering-link-landing .sr-wordmark-hero { animation:none; opacity:1; transform:none; }
  .sharering-link-landing .wm-ch { opacity:1; transform:none; transition:none; }
  .sharering-link-landing .brand-underline[data-beat] { transform:scaleX(1); transition:none; }
  .sharering-link-landing .sr-wordmark-scan { opacity:0.95; transform:none; transition:none; }
  .sharering-link-landing .ledger-cell::after { transition:none; }
  .sharering-link-landing .qr-trace path { stroke-dashoffset:0 !important; stroke-dasharray:none !important; opacity:1 !important; transition:none; }
  .sharering-link-landing .cta-underline { transform:translateX(-50%) scaleX(1); transition:none; }
  .sharering-link-landing .back-top { transition:none; }
  .sharering-link-landing [data-beat], .sharering-link-landing .ch { opacity:1; transform:none; transition:none; }
  .sharering-link-landing .dch { position:relative; opacity:1; transform:none; transition:none; }
  .sharering-link-landing .dch-zoom { position:relative; transform:none !important; }
  .sharering-link-landing .deploy-stage::before { display:none; }
  .sharering-link-landing .deploy-stage { display:grid; gap:26px; }
  /* all four channels are shown at once, so the rail reads as a plain list */
  .sharering-link-landing .deploy-seg li { color:var(--srl-accent); }
  .sharering-link-landing .seg-thumb { display:none; }
  .sharering-link-landing .build-nodes li { opacity:1; }
  .sharering-link-landing .doc-card[data-beat] { transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,0px))) rotate(var(--r,0deg)); }
  .sharering-link-landing .doc-card[data-beat].float { animation:none; }
  .sharering-link-landing .hero-browser-wrap, .sharering-link-landing .results-dash { transform:none; }
  .sharering-link-landing .shift-viz { --pa:1; --pb:1; opacity:1; }
  .sharering-link-landing .shift-clean { clip-path:none; }
  .sharering-link-landing .shift-edge { display:none; }
  /* round 16 item 4: .qr-blocks used to be forced opaque here, because the drawn code faded in
     off --p and a reduced motion viewer got no --p. The real code never varies its opacity, so
     there is nothing left to reset. */
  .sharering-link-landing .ai-dim { opacity:0.5; }
  .sharering-link-landing .stat .u { transform:scaleX(1); }
}

/* ---- MOBILE LEGIBILITY (Rohan, 7 Aug 2026) ------------------------------------
   The mock UI screens carry their type in fixed pixels, or in clamps whose FLOOR is
   the phone value, so unlike the surrounding copy they do not scale up on a small
   screen. Measured at 390 and at 360: .wv-url resolves to its 6px floor, .shift-org .k
   is a flat 9px, .org-run 9.5px, and the deploy channel buttons land near 8.5px inside
   a 64 by 32 control, which is both unreadable and under the 44px tap guideline.
   These are screenshots of product UI and are meant to read as small print, but 6px is
   not small print, it is invisible. Floors only: none of this touches desktop. */
@media (max-width:767px) {
  .sharering-link-landing .wv-url { font-size:11px; }
  .sharering-link-landing .shift-org .k { font-size:11px; }
  .sharering-link-landing .org-run { font-size:11px; }
  .sharering-link-landing .deploy-seg li .dstep-btn { font-size:11px; min-height:44px; padding:12px 8px; }
  /* the wallet mock is a phone screen a reader is meant to READ, and its two smallest
     lines were resolving to 8px and 6px. Deliberately NOT touched: .lg-time and
     .lg-status at 8.5 and 7.5, which are the scrolling ledger texture in the background
     and are supposed to be illegible, and the 9 to 10.5px labels, which read as small
     print rather than as a mistake. */
  .sharering-link-landing .wv-sub { font-size:10.5px; }
  .sharering-link-landing .wv-foot { font-size:9.5px; }
}