/* ═══════════════════════════════════════════════════════════════════════════
   keywordise LANDING (#auth) — Neurobird flat editorial re-skin.
   Solid lime/navy blocks, hairline rules, Satoshi Black, /01 section numbers.
   No pixel-art, no soft shadows, no glass, no gradients-for-chrome.
   Loaded AFTER brand.css: reuse var(--lime) etc + .btn/.eyebrow/.secnum classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── surface tokens: map the old local names onto the brand palette ── */
#auth{
  --bg:var(--navy); --bg-2:var(--ink); --panel:#1d1d30;
  --line:var(--rule); --line-soft:rgba(255,255,255,.08);
  --ink:var(--white); --ink-2:var(--muted); --ink-dim:var(--muted-2);
  --accent:var(--lime); --accent-ink:var(--navy);
  --fs-cap:13px; --fs-body:16px; --fs-lead:clamp(17px,1.6vw,21px); --fs-h3:24px;
  --fs-h2:clamp(40px,7vw,110px); --fs-disp:clamp(46px,8vw,120px); --fs-hero:clamp(30px,9.2vw,120px);
  --lh-tight:.92; --lh-snug:1.0; --lh-body:1.55;
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-quint:cubic-bezier(.23,1,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,1.3,.28,1);
  --dur:.55s;
  background:var(--navy);color:var(--white);
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  letter-spacing:-.011em;font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;position:relative}

/* micro-typography */
#auth h1,#auth h2,#auth .rf-sec-top h2,#auth .rf-final h2{text-wrap:balance}
#auth p,#auth .lead,#auth .rf-sec-top .lead{text-wrap:pretty}
#auth .rf-inst .n,#auth .cnt,#auth .tk-amount{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
/* page-wide grain intentionally OFF — grain lives only in the how-it-works (#howNative) section. */
#auth::after{content:none}
@media(prefers-reduced-motion:reduce){#auth::after{opacity:.045}}
#auth *{box-sizing:border-box}
#auth a{color:inherit;text-decoration:none;border:0}
#auth .frame{max-width:var(--max);margin:0 auto;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
/* mobile-pad-fix: --pad and --max were REFERENCED but never DECLARED, so
   `padding:0 var(--pad)` was an invalid declaration and every .pad container ran
   edge-to-edge. Invisible on desktop because --max caps the width first; on a 390px
   phone it clipped the hero headline, the CTA and the email field. */
#auth{--pad:clamp(18px,5vw,48px);--max:1120px}
#auth .pad{padding:0 var(--pad)}

/* ── NAV ── */
#auth .rf-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
#auth .rf-nav::before{content:none}
#auth .rf-nav.solid{background:var(--navy);border-bottom-color:var(--line)}
#auth .rf-nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
#auth .rf-brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:22px;letter-spacing:-.03em}
/* 2026-07-27: was `#auth .rf-mark`, so the MARKETING nav (which uses the same markup) got NO
   styling at all — the LP showed the word with an invisible empty span while the dashboard showed
   the mark. Un-scoped so both render the IDENTICAL logo. The #auth responsive overrides below
   still win inside the app shell. */
.rf-mark{width:26px;height:26px;border-radius:7px;flex:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23F5FFAB'/%3E%3Cg fill='%2317172B'%3E%3Crect x='9' y='7' width='4' height='18'/%3E%3Crect x='13' y='15' width='3' height='3'/%3E%3Crect x='16' y='12' width='3' height='3'/%3E%3Crect x='19' y='9' width='3' height='3'/%3E%3Crect x='16' y='18' width='3' height='3'/%3E%3Crect x='19' y='21' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat;background-position:center}
/* lowercase 'k' is the CANONICAL mark — verified against the dashboard render
   2026-07-27. The rule said 'K' but the app displays lowercase, so the LP was showing a
   capital while the dashboard showed lowercase. Dashboard wins: they must be 1:1. */

#auth .rf-links{display:flex;align-items:center;gap:2px}
#auth .rf-links a{color:var(--ink-2);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:8px 16px;transition:.15s;display:flex;align-items:baseline;gap:6px;cursor:pointer}
#auth .rf-links a:hover{color:var(--ink)}
#auth .rf-links a sup{font-size:9px;color:var(--ink-dim);font-weight:700}
#auth .rf-cta{display:flex;align-items:center;gap:8px}
/* map .rf-btn variants onto the flat brand buttons */
#auth .rf-btn{font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease;
  letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1.5px solid transparent;border-radius:var(--radius);white-space:nowrap}
#auth .rf-ghost{background:transparent;color:var(--white);border-color:var(--white);padding:11px 18px}
#auth .rf-ghost:hover{background:var(--white);color:var(--navy)}
#auth .rf-acc{background:var(--lime);color:var(--navy);border-color:var(--lime);padding:12px 22px}
#auth .rf-acc:hover{transform:translateY(-2px);background:var(--lime-hover);border-color:var(--lime-hover)}
#auth .rf-lg{padding:15px 28px;font-size:14px}

/* ── HERO — flat navy, huge Satoshi-900 uppercase headline, lime accent ── */
#auth .rf-hero{position:relative;overflow:hidden;isolation:isolate;min-height:100vh;background:var(--navy);display:flex}
#auth .rf-hero .frame{flex:1;display:flex}
/* hero video: full-bleed behind the editorial text, dark-toned + navy gradient overlay so the
   lime/white headline stays crisp. On-brand = video as a subtle backdrop, not a bright distraction. */
/* poster still is baked in as a CSS background so the hero NEVER shows a blank frame or a lone
   iOS play-button: if the video can't autoplay (Low Power Mode etc.) this poster stays as the
   backdrop. The dark gradients in ::after do ALL the dimming — the poster/video are full opacity,
   so there is never a semi-transparent double-exposure between them. */
#auth .rf-hero-bg{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--navy) center/cover no-repeat;
  background-image:url('/static/pix/beach_hero_poster.jpg')}
/* fill the ENTIRE hero with the video, no letterbox/borders. FULL opacity — dimming is the ::after
   overlay only, so the video and the poster-bg never both show semi-transparently at once. */
#auth .rf-hero-bg video,#auth .rf-hero-bg img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:100%;min-height:100%;object-fit:cover;object-position:center;display:block;border:0;margin:0;pointer-events:none}
/* video hidden until it actually starts; then it's OPAQUE and fully covers the poster-bg (no ghost).
   While hidden, the poster-bg shows through; once playing we also drop the poster-bg to be safe. */
#auth .rf-hero-bg video{opacity:0;transition:opacity .6s ease;filter:brightness(.94) saturate(1.03) blur(1px);transform:translate(-50%,-50%) scale(1.05)}
#auth .rf-hero-bg.playing video{opacity:1}
#auth .rf-hero-bg.playing{background-image:none}
#auth .rf-hero-bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,15,28,.5) 0%,rgba(15,15,28,.38) 46%,rgba(15,15,28,.9) 100%),
             linear-gradient(90deg,rgba(15,15,28,.5) 0%,rgba(15,15,28,.12) 55%,transparent 100%),
             radial-gradient(120% 90% at 50% 42%,transparent 56%,rgba(10,10,20,.38) 100%)}
#auth .rf-hero-head{padding:clamp(96px,14vh,150px) 0 clamp(40px,6vh,72px);position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;max-width:none}
#auth .rf-hero h1{font-family:inherit;font-weight:900;letter-spacing:-.03em;line-height:.94;
  font-size:var(--fs-hero);text-transform:uppercase;text-wrap:balance;max-width:16ch;color:var(--white);text-shadow:none}
#auth .rf-hero h1 em{font-style:normal;color:var(--lime)}
/* ⛔ LOCALE WIDTH BUDGET. 16ch fits the English hero exactly; German runs ~25% longer and
   wrapped to three lines. Widen the MEASURE, never shrink the type (docs/CV_STANDARDS +
   CLAUDE.md: tighten spacing, never type). :lang() so English is untouched. */
html:lang(de) #auth .rf-hero h1,html:lang(nl) #auth .rf-hero h1{
  max-width:none;text-wrap:pretty;letter-spacing:-.045em;
  font-size:clamp(28px,7.6vw,104px)}
/* the lime half is one long compound in both languages (BEWERBUNGEN / SOLLICITATIES);
   keep it on its own line rather than letting balance() split it. */
html:lang(de) #auth .rf-hero h1 em,html:lang(nl) #auth .rf-hero h1 em{
  display:inline-block;white-space:nowrap}
@media(max-width:820px){
  html:lang(de) #auth .rf-hero h1 em,html:lang(nl) #auth .rf-hero h1 em{white-space:normal}}
/* homepage 2026-10-08: the hero line now carries the number ("500,000+ fresh jobs you can apply to automatically"), about 2x the old
   word count. Widen the measure first (24ch) and cap the type at 92px so the number and "fresh jobs" share a line; German and Dutch
   run longer still, so their lime half wraps instead of staying one nowrap compound (it overflowed the viewport at 104px). */
@media(min-width:821px){
  html:not(:lang(de)):not(:lang(nl)) #auth .rf-hero h1{font-size:clamp(30px,6.4vw,92px);max-width:24ch}
  html:lang(de) #auth .rf-hero h1,html:lang(nl) #auth .rf-hero h1{font-size:clamp(28px,5.4vw,78px)}
  html:lang(de) #auth .rf-hero h1 em,html:lang(nl) #auth .rf-hero h1 em{white-space:normal;display:inline}
}
#auth .rf-hero-sub{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin-top:28px}
/* ⛔ margin:0 (herocopy 2026-10-12). The paragraphs kept the browser's 1em margins and the flex gap added 26px on top: flex items
   never collapse margins, so two lines of copy sat 70px apart (measured, 60px on a phone). The gap is the ONE spacing rule here. */
#auth .rf-hero-sub p{margin:0;font-size:clamp(17px,1.6vw,22px);color:var(--muted);max-width:44ch;line-height:1.5;font-weight:500;text-shadow:none}
/* the proof line under the CTA: small, quiet, one line on desktop; the numbers are the claim, so they get the white */
#auth .rf-hero-sub p.rf-hero-claim{font-size:14px;line-height:1.45;color:var(--muted-2);max-width:none;margin-top:-8px;letter-spacing:.005em}
#auth .rf-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* email capture — flat bordered field + solid lime submit (no grain, no glow) */
#auth .rf-form{position:relative;display:inline-flex;gap:0;border:1.5px solid var(--rule);background:rgba(255,255,255,.03);
  align-items:center;border-radius:var(--radius);box-shadow:none;padding:8px 8px 8px 22px;height:66px;overflow:hidden}
#auth .rf-form::before{content:none}
#auth .rf-form:focus-within{border-color:var(--lime);box-shadow:none}
#auth .rf-form input{position:relative;z-index:2;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0;color:var(--white);font:inherit;font-size:17px;font-weight:500;width:min(46vw,300px);outline:none!important;height:auto}
/* kill browser autofill inner-box (yellow/blue overlay that looks like a second field) */
#auth .rf-form input:-webkit-autofill,#auth .rf-form input:-webkit-autofill:focus{-webkit-text-fill-color:var(--white);transition:background-color 9999s ease-out;box-shadow:none!important}
#auth .rf-form input::placeholder{color:var(--muted-2)}
#auth .rf-form .rf-btn{position:relative;z-index:2;padding:0 28px;height:50px;font-size:14px;font-weight:700;border-radius:var(--radius-sm);
  background:var(--lime);color:var(--navy);border-color:var(--lime);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
#auth .rf-form .rf-btn:hover{background:var(--lime-hover);border-color:var(--lime-hover);transform:none}
#auth .rf-trustline{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px;line-height:1.4;text-shadow:none}
#auth .rf-trustline .tick{color:var(--lime);font-weight:700;flex:0 0 auto}
#auth .rf-note{display:none}
#auth .rf-cap{display:none}
/* nav treatment over the navy hero (flatten the old overrides) */
#auth .rf-nav{background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important}
#auth .rf-nav.solid{background:var(--navy)!important;backdrop-filter:none!important;border-bottom-color:var(--rule)!important}
#auth .rf-nav .rf-brand{color:var(--white)}
#auth .rf-nav .rf-links a{color:var(--muted)} #auth .rf-nav .rf-links a:hover{color:var(--white)}
#auth .rf-nav .rf-ghost{color:var(--white);border-color:var(--white)} #auth .rf-nav .rf-ghost:hover{border-color:var(--white);background:var(--white);color:var(--navy)}

/* the nav CTA ran off a 390px screen: shrink its padding and hide the secondary link so
   both buttons fit. */
@media(max-width:560px){
  #auth .rf-nav .rf-links{display:none}
  #auth .rf-nav .rf-cta{gap:6px;flex:none}
  /* one CTA only under 560px. Two buttons plus the wordmark cannot fit a 390px bar, and the
     primary action is the one that matters; SIGN IN stays reachable from the page body. */
  #auth .rf-nav .rf-cta > *:not(:last-child){display:none}
  #auth .rf-nav .rf-cta > *{padding:9px 13px;font-size:11px;white-space:nowrap}
  /* the nav bar itself needs the side padding: .frame caps width but does not inset, so the
     CTA sat flush against the viewport edge on a phone. */
  #auth .rf-nav-in{gap:8px;padding-left:var(--pad);padding-right:var(--pad)}
  #auth .rf-nav .frame{border-left:0;border-right:0}
}
@media(max-width:820px){
  /* ⛔ the hero's padding SHORTHAND (top 0 bottom) zeroed the side padding .pad gives every other section, so on a phone the
     headline and the form touched the screen edge (measured 1px; every other section sits at the --pad gutter). herocopy 2026-10-12 */
  #auth .rf-hero-head{max-width:none;padding-bottom:clamp(40px,6vh,64px);padding-left:var(--pad);padding-right:var(--pad)}
  #auth .rf-hero h1{font-size:var(--fs-hero);max-width:100%}
  #auth .rf-hero-sub p{font-size:17px;max-width:100%}
  /* the sub block spans the column on phones (with .rf-form min-width:0 below, a long button shrinks the field, never
     the margin). herocopy 2026-10-12 */
  #auth .rf-hero-sub{width:100%}
  #auth .rf-cta-row{width:100%}
  /* ⛔ the box is width:100% but the INPUT kept its desktop width:min(46vw,300px), so the row
     under-filled its own border and left dead space after the button. The input must FLEX. */
  /* min-width:0: a flex item's automatic minimum is its CONTENT (the field's natural 130px + the button), so the form
     refused to shrink and a long button (German, 211px) pushed it 19px into the gutter. herocopy 2026-10-12 */
  #auth .rf-form{width:100%;min-width:0;height:60px;padding:7px 7px 7px 18px;justify-content:space-between}
  /* basis 0 + width 0: the field FILLS what the button leaves and its natural width can never set the column's minimum
     (with width:auto, or the stale 130px rule below, the field's 130-173px plus a long button forced the hero wider
     than the screen in German). herocopy 2026-10-12 */
  #auth .rf-form input{flex:1 1 0;width:0;min-width:0;font-size:16px}
  #auth .rf-form .rf-btn{flex:0 0 auto;padding:0 20px;height:46px;font-size:14px}
}

/* ── rail (scrolling label strip) — hairline flat ── */
#auth .rf-rail{border-bottom:1px solid var(--line);display:flex;background:var(--navy)}
#auth .rf-rail .lbl{font-family:inherit;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--ink-dim);
  padding:18px 24px;border-right:1px solid var(--line);white-space:nowrap;display:flex;align-items:center}
#auth .rf-rail .track{display:flex;align-items:center;overflow:hidden;flex:1}
#auth .rf-rail .track b{font-weight:600;font-size:14px;color:var(--ink-2);padding:18px 22px;
  border-right:1px solid var(--line-soft);white-space:nowrap}

/* ── DEPARTURES BOARD — flat live-application ledger, hairline rows ── */
#auth .rf-board{margin:clamp(28px,4vw,48px) 0 0;border:1px solid var(--line);background:var(--ink);box-shadow:none;border-radius:var(--radius)}
#auth .rf-board-head{display:grid;grid-template-columns:2.2fr 2.6fr 1.4fr 1.5fr;padding:14px 22px;
  border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--ink-dim)}
#auth .rf-brow{display:grid;grid-template-columns:2.2fr 2.6fr 1.4fr 1.5fr;padding:14px 22px;
  border-bottom:1px solid var(--line-soft);align-items:center}
#auth .rf-brow:last-child{border-bottom:0}
#auth .rf-bcell{font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);text-transform:uppercase;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#auth .rf-bcell.role{color:var(--ink-2);font-weight:500;text-transform:none}
#auth .rf-bcell.lane{color:var(--ink-dim);font-weight:700;letter-spacing:.1em;font-size:12px}
/* status flap → flat lime/navy chip */
#auth .rf-flap{display:inline-block;padding:5px 12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-soft);border-radius:var(--radius-sm);color:var(--lime);position:relative;animation:rfflip 7s infinite}
#auth .rf-flap::after{content:none}
#auth .rf-flap.ok{color:var(--navy);background:var(--lime);border-color:var(--lime)}
@keyframes rfflip{0%,44%{opacity:1}47%{opacity:.35}52%,100%{opacity:1}}
#auth .rf-brow:nth-child(odd) .rf-flap{animation-delay:1.3s}
#auth .rf-brow:nth-child(3n) .rf-flap{animation-delay:2.6s}
#auth .rf-brow:nth-child(4n) .rf-flap{animation-delay:3.9s}
@media(prefers-reduced-motion:reduce){#auth .rf-flap{animation:none}}
@media(max-width:720px){#auth .rf-board-head,#auth .rf-brow{grid-template-columns:1.6fr 1.2fr}
  #auth .rf-bcell.role,#auth .rf-board-head span:nth-child(2){display:none}
  #auth .rf-bcell.lane,#auth .rf-board-head span:nth-child(3){display:none}}

/* board caption strip */
#auth .rf-board-cap{display:flex;justify-content:space-between;gap:12px;padding:11px 22px;border-bottom:1px solid var(--line);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--ink-dim)}
#auth .rf-board-cap span:last-child{color:var(--accent)}

/* ── SECTION shell + big /NN header ── */
#auth .rf-sec{border-bottom:1px solid var(--line);background:var(--navy)}
/* pricing: full-bleed invite imagery behind the whole section, navy scrim keeps the
   lime tickets + story text legible. flat, no gradients beyond the readability scrim. */
/* pricing-breathe: the section had NO bottom padding, so the ticket ended flush against the
   next section and the background photo was cropped right under the CTA. Asymmetric on
   purpose: the heading supplies air above, the card needs much more below. */
#auth #pricing{position:relative;background:var(--navy);isolation:isolate;border-top:0;
  padding-bottom:clamp(72px,9vw,150px)}
/* match #howNative grain at the TOP of pricing so texture is continuous across the seam */

/* z-index -3, BELOW the video at -2. Both were at -2, so the still and the video showed
   through each other and the background read as doubled. */
#auth #pricing::before{content:'';position:absolute;inset:0;z-index:-3;
  background:url('/static/pix/flow_invite.webp') center/cover no-repeat;opacity:1;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 22%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 22%)}
/* pricing-video: live background. ::before stays as the poster layer beneath, so a blocked,
   still-buffering, or reduced-motion visitor sees exactly today's still instead of a blank. */
#auth #pricing .pv-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;pointer-events:none;opacity:0;transition:opacity .9s ease;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 22%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,#000 22%)}
#auth #pricing .pv-bg.on{opacity:1}
/* Once the video is genuinely playing, stop painting the still underneath it. Both carry
   the same artwork at slightly different pixel dimensions (1176x784 vs 1200x800), so with
   `cover` they crop to marginally different framings and the section reads as two
   overlapping images. The still stays the fallback whenever the video does NOT start:
   blocked autoplay, no JS, reduced motion, decode failure. */
#auth #pricing.pv-playing::before{opacity:0;transition:opacity .5s ease}
@media(prefers-reduced-motion:reduce){#auth #pricing .pv-bg{display:none}}
#auth #pricing::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,23,43,.12) 0%,rgba(23,23,43,.2) 40%,rgba(23,23,43,.4) 100%)}
#auth #pricing>.frame{position:relative;z-index:1}
/* the headline is the only element in this row here, so the shared 120px/44px rhythm
   reads as a gap. Tightened for #pricing only. */
#auth #pricing .rf-sec-top{border-bottom:0;
  padding:clamp(34px,4.4vw,64px) 0 clamp(10px,1.2vw,18px)}
#auth #pricing .rf-early{margin-top:clamp(14px,1.8vw,24px)}
/* alternating full-bleed lime block variant */
#auth .rf-sec.rf-sec--lime{background:var(--lime);color:var(--navy);border-bottom-color:var(--rule-dark)}
#auth .rf-sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding:clamp(56px,8vw,120px) 0 clamp(28px,3vw,44px);border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
#auth .rf-sec--lime .rf-sec-top{border-bottom-color:var(--rule-dark)}
#auth .rf-sec-top .idx{font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--accent);display:inline-flex;align-items:center;gap:0}
#auth .rf-sec-top .idx::before{content:'/';opacity:.55;margin-right:2px;width:auto;height:auto;background:none}
#auth .rf-sec--lime .rf-sec-top .idx{color:var(--navy)}
#auth .rf-sec-top h2{font-family:inherit;font-weight:900;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(40px,7vw,96px);max-width:16ch;color:var(--ink);margin-top:14px}
#auth .rf-sec--lime .rf-sec-top h2{color:var(--navy)}
#auth .rf-sec-top .lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:40ch;line-height:var(--lh-body)}
#auth .rf-sec--lime .rf-sec-top .lead{color:var(--muted-dark)}

/* ── HOW IT WORKS — 3 steps, hairline dividers ── */
#auth .rf-steps{display:grid;grid-template-columns:repeat(3,1fr)}
#auth .rf-step{border-right:1px solid var(--line)}
#auth .rf-sec--lime .rf-step{border-right-color:var(--rule-dark)}
#auth .rf-step:last-child{border-right:0}
#auth .rf-step .shot{aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--line)}
#auth .rf-sec--lime .rf-step .shot{border-bottom-color:var(--rule-dark)}
#auth .rf-step .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
#auth .rf-step:hover .shot img{transform:scale(1.045)}
#auth .rf-step .body{padding:clamp(22px,2.6vw,32px)}
#auth .rf-step .no{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
#auth .rf-sec--lime .rf-step .no{color:var(--navy)}
#auth .rf-step h3{font-family:inherit;font-weight:900;letter-spacing:-.02em;font-size:22px;margin-bottom:10px;color:var(--ink)}
#auth .rf-sec--lime .rf-step h3{color:var(--navy)}
#auth .rf-step p{color:var(--ink-2);font-size:15px;line-height:1.55}
#auth .rf-sec--lime .rf-step p{color:var(--muted-dark)}

/* ── FLOW strip (CV → engine → matches) — flat framed image + hairline legend ── */
#auth .rf-flow{margin:clamp(28px,4vw,44px) 0 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;background:var(--ink);box-shadow:none}
#auth .rf-flow img{width:100%;display:block;aspect-ratio:1440/600;object-fit:cover}
#auth .rf-flow::after{content:none}
#auth .rf-flow-legend{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-top:0}
#auth .rf-fl{padding:clamp(20px,2.4vw,28px) clamp(18px,2vw,26px);border-right:1px solid var(--line)}
#auth .rf-fl:last-child{border-right:0}
#auth .rf-fl .no{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--accent);margin-bottom:10px}
#auth .rf-fl h3{font-family:inherit;font-weight:900;letter-spacing:-.02em;font-size:19px;color:var(--ink);margin-bottom:6px}
#auth .rf-fl p{color:var(--ink-2);font-size:14px;line-height:1.5}
@media(max-width:720px){#auth .rf-flow-legend{grid-template-columns:1fr}
  #auth .rf-fl{border-right:0;border-bottom:1px solid var(--line)} #auth .rf-fl:last-child{border-bottom:0}}

/* ── LIVE CV DEMO (.bcv) — SCI-FI CV REACTOR: navy terminal, lime data-streams, scanlines ── */
#auth .bcv{position:relative;margin:clamp(30px,4vw,52px) 0 0;overflow:hidden;
  width:100vw;left:50%;margin-left:-50vw;background:var(--ink);
  padding:clamp(48px,7vw,104px) clamp(16px,4vw,56px) clamp(44px,6vw,88px)}
/* faint lime circuit grid + radial aura behind the reactor */
#auth .bcv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(245,255,171,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(245,255,171,.045) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 78%)}
#auth .bcv::after{content:"";position:absolute;left:50%;top:8%;width:min(900px,80vw);aspect-ratio:1.6;transform:translateX(-50%);
  z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(245,255,171,.10),transparent 72%)}
#auth .bcv-bg,#auth .bcv-bg img,#auth .bcv-bg::after,#auth .bcv-glow{display:none}
#auth .bcv-in{position:relative;z-index:1;max-width:1120px;margin:0 auto;text-align:center}

/* station rail (docks) — flat hairline frames, active dock = lime */
#auth .sl-viewport{position:relative;padding-top:clamp(52px,6.4vw,76px)}
#auth .sl-rail{position:absolute;inset:0;display:flex;z-index:0;will-change:transform;transition:transform 1.05s var(--ease-expo)}
@media(prefers-reduced-motion:reduce){#auth .sl-rail{transition:none}}
#auth .sl-station{flex:0 0 22%;margin-right:2%;position:relative;border-radius:var(--radius);
  background:rgba(245,255,171,.02);border:1px solid var(--rule);transition:flex-basis 1.05s var(--ease-expo),border-color .7s ease,background .7s ease}
#auth .sl-station:last-child{margin-right:0}
#auth .sl-station.on{flex-basis:52%;border-color:var(--lime);background:rgba(245,255,171,.06)}
#auth .sl-name{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:clamp(12px,1.6vw,19px);color:var(--muted);white-space:nowrap;transition:color .6s ease}
#auth .sl-sub{position:absolute;top:calc(14px + 1.7em);left:50%;transform:translateX(-50%);font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:clamp(8px,.9vw,10px);color:var(--muted-2);white-space:nowrap;transition:color .6s ease}
#auth .sl-station.on .sl-name{color:var(--lime)}
#auth .sl-station.on .sl-sub{color:rgba(245,255,171,.6)}
#auth .sl-station.ghost{opacity:.35}
#auth .bcv-docwrap{position:relative;z-index:1;max-width:min(720px,86%);margin:0 auto;perspective:1600px;will-change:transform}
@media(max-width:760px){#auth .sl-rail{display:none}#auth .sl-viewport{padding-top:0}#auth .bcv-docwrap{max-width:100%}}

/* the reactor "landed" bounce + scanline sweep */
@keyframes bcvland{0%{transform:var(--tilt) scale(1.04)}45%{transform:var(--tilt) scale(.99)}100%{transform:var(--tilt) scale(1)}}
#auth .bcv-doc.land{animation:bcvland .6s cubic-bezier(.2,1.2,.3,1)}
#auth .bcv-scanline{position:absolute;left:0;right:0;top:-16%;height:22%;z-index:6;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(245,255,171,.5) 46%,rgba(245,255,171,.9) 50%,rgba(245,255,171,.5) 54%,transparent);
  filter:blur(.5px);mix-blend-mode:screen;box-shadow:0 0 40px 8px rgba(245,255,171,.25)}
/* the scan now sweeps SLOWLY over the whole card (the AI reading it) while fields rewrite behind it */
#auth .bcv-scanline.run{animation:bcvscan 1.6s cubic-bezier(.4,.1,.3,1)}
@keyframes bcvscan{0%{opacity:0;top:-18%}8%{opacity:1}92%{opacity:1}100%{opacity:0;top:104%}}
/* while tailoring: faint lime wash pulses over the doc + a live status chip top-right */
#auth .bcv-doc.tailoring::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,255,171,.09),rgba(245,255,171,.02));animation:bcvwash 1.6s ease}
@keyframes bcvwash{0%,100%{opacity:0}40%{opacity:1}}
#auth .bcv-status{position:absolute;left:50%;top:clamp(12px,1.8vw,20px);z-index:8;
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;
  background:rgba(12,12,22,.92);border:1px solid rgba(245,255,171,.55);box-shadow:0 6px 20px -6px rgba(0,0,0,.7);
  font-weight:800;font-size:clamp(8px,.95vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--lime);
  opacity:0;transform:translateX(-50%) translateY(-6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;white-space:nowrap}
#auth .bcv-doc.tailoring .bcv-status{opacity:1;transform:translateX(-50%) translateY(0)}
#auth .bcv-status-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);animation:bcvblink 1s infinite}
#auth .bcv-doc.land{animation:bcvland .6s cubic-bezier(.2,1.2,.3,1)}
@media(prefers-reduced-motion:reduce){#auth .bcv-doc.land,#auth .bcv-scanline.run,#auth .bcv-doc.tailoring::after{animation:none}#auth .bcv-status{display:none}}

/* ── the CV reactor panel: dark navy terminal, lime chrome, glowing edge ── */
#auth .bcv-doc{--lime:#F5FFAB;--surf:#171729;--surf2:#12121f;--txt:#ecebf2;--dim:rgba(236,235,242,.55);--tilt:rotateX(5deg) rotateZ(-3deg);
  position:relative;z-index:1;text-align:left;font-family:inherit;color:var(--txt);
  border-radius:var(--radius);overflow:hidden;transform:var(--tilt);will-change:transform;transition:transform .8s var(--ease-expo);
  background:linear-gradient(180deg,#181829 0%,#141422 62%,#101019 100%);
  border:1px solid rgba(245,255,171,.22);
  box-shadow:0 40px 100px -34px rgba(0,0,0,.8),0 0 0 1px rgba(245,255,171,.06),inset 0 1px 0 rgba(245,255,171,.08)}
#auth .bcv-docwrap:hover .bcv-doc{transform:rotateX(0) rotateZ(0)}
@media(max-width:700px),(prefers-reduced-motion:reduce){#auth .bcv-doc{--tilt:rotate(0deg);transform:rotate(0deg)}}
#auth .bcv-doc>*{position:relative;z-index:1}
/* lime corner brackets + a faint inner grid = terminal feel */
#auth .bcv-doc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(245,255,171,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,255,171,.05) 1px,transparent 1px);
  background-size:30px 30px}
#auth .bcv-doc::after{content:"";position:absolute;inset:10px;z-index:0;pointer-events:none;border-radius:5px;
  background:linear-gradient(90deg,var(--lime) 0 18px,transparent 18px) 0 0/2px 2px no-repeat,
             linear-gradient(0deg,var(--lime) 0 18px,transparent 18px) 0 0/2px 2px no-repeat}

/* header: photo (subtle, duotone), name, morphing role, summary */
#auth .r-photo{position:absolute;top:0;right:0;width:40%;height:34%;z-index:0;opacity:.5}
#auth .r-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.1) brightness(.9)}
#auth .r-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#141422 0%,transparent 34%),linear-gradient(0deg,#141422 0%,transparent 40%);mix-blend-mode:normal}
#auth .r-dot{position:absolute;top:clamp(14px,2vw,24px);left:clamp(16px,2.4vw,30px);width:clamp(20px,2.6vw,28px);aspect-ratio:1;border-radius:6px;background:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(10px,1.2vw,13px);color:var(--navy)}
#auth .r-head{padding:clamp(34px,5vw,60px) clamp(20px,3vw,40px) 0;min-height:34%}
#auth .r-name{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;font-size:clamp(26px,4.6vw,52px);color:var(--txt);max-width:62%}
#auth .m-role{margin-top:clamp(10px,1.4vw,16px);font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(9px,1.15vw,13px);color:var(--navy);white-space:nowrap;min-height:1.2em;display:inline-block;
  background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;padding:.28em .5em;border-radius:3px}
#auth .m-role.hl{background-size:100% 100%;transition:background-size .6s var(--ease-out)}
#auth .m-role:not(.hl){color:var(--lime);background-size:0% 100%}
#auth .m-role .w{display:inline-block;will-change:transform,filter,opacity}
#auth .m-sum{margin-top:clamp(10px,1.4vw,16px);max-width:58%;font-weight:500;font-size:clamp(9px,1.1vw,12.5px);line-height:1.6;color:var(--dim);height:4.8em;overflow:hidden}
#auth .m-sum .w,#auth .m-exp .w{display:inline-block;will-change:transform,filter,opacity}

/* body grid: stats + skills | experience */
#auth .r-grid{display:grid;grid-template-columns:.9fr 1.25fr;gap:clamp(16px,2.6vw,34px);padding:clamp(18px,2.6vw,32px) clamp(20px,3vw,40px) clamp(14px,2vw,24px);border-top:1px solid rgba(245,255,171,.12);margin-top:clamp(14px,2vw,22px)}
#auth .r-stat .n{font-weight:900;font-size:clamp(18px,2.4vw,28px);letter-spacing:-.02em;color:var(--lime);font-variant-numeric:tabular-nums}
#auth .r-stat .l{font-weight:500;font-size:clamp(8.5px,1vw,11.5px);color:var(--dim);margin:.15em 0 1em}
#auth .r-h{font-weight:800;font-size:clamp(10px,1.2vw,13.5px);color:var(--txt);margin:.4em 0 .6em;text-transform:uppercase;letter-spacing:.12em}
#auth .m-skills{display:flex;flex-direction:column;gap:.45em;overflow:hidden;height:10.8em}
#auth .m-sk{display:flex;align-items:center;gap:.6em;font-weight:500;font-size:clamp(8.5px,1.05vw,12px);color:var(--dim)}
#auth .m-sk::before{content:'';width:.5em;height:.5em;border-radius:1px;background:var(--lime);flex:0 0 auto;box-shadow:0 0 6px rgba(245,255,171,.6)}
#auth .r-edu{margin-top:1em}
#auth .r-edu .a{font-weight:700;font-size:clamp(8.5px,1.05vw,12px);color:var(--txt)}
#auth .r-edu .b{font-weight:500;font-size:clamp(8px,1vw,11px);color:var(--dim);margin-top:.2em}
#auth .m-exp{display:flex;flex-direction:column;gap:clamp(10px,1.5vw,18px)}
#auth .r-et{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#auth .r-et b{font-weight:800;font-size:clamp(10.5px,1.3vw,14.5px);color:var(--navy);background:var(--lime);padding:.06em .4em;border-radius:3px}
#auth .r-et span{font-weight:500;font-size:clamp(8px,.95vw,10.5px);color:var(--dim);white-space:nowrap}
#auth .m-b{display:flex;font-weight:500;font-size:clamp(8.5px,1.05vw,12px);line-height:1.55;color:var(--dim);height:3.1em;overflow:hidden;margin-top:.35em}
#auth .m-b .d{color:var(--lime);margin-right:.4em}
#auth .m-b .t{display:inline-block}
#auth .r-date{font-weight:600;font-size:clamp(8px,.95vw,10.5px);color:rgba(245,255,171,.7);margin-top:.35em;font-variant-numeric:tabular-nums}

/* footer: contact + the live match badge */
#auth .r-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:clamp(14px,2vw,24px) clamp(20px,3vw,40px) clamp(18px,2.6vw,30px);border-top:1px solid rgba(245,255,171,.12)}
#auth .r-c{display:flex;gap:clamp(14px,2.4vw,34px)}
#auth .r-c .k{font-weight:700;font-size:clamp(7.5px,.9vw,10px);color:var(--dim);text-transform:uppercase;letter-spacing:.12em}
#auth .r-c .v{font-weight:800;font-size:clamp(8.5px,1.05vw,12px);color:var(--txt);margin-top:.2em}
#auth .m-badge{font-weight:800;font-size:clamp(8.5px,1.05vw,12px);color:var(--navy);background:var(--lime);border-radius:var(--radius-sm);padding:.5em 1.1em;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 0 22px rgba(245,255,171,.35)}
@media(max-width:640px){#auth .r-name{max-width:100%}#auth .m-sum{max-width:100%}#auth .r-photo{opacity:.3}#auth .r-grid{grid-template-columns:1fr}#auth .m-skills{height:8em}}

/* company selector pills — lime when active, terminal label above */
#auth .bcv-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(28px,3.6vw,44px)}
#auth .bcv-lbl{width:100%;text-align:center;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--navy);margin-bottom:12px}
#auth .bcv-lbl::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--navy);margin-right:8px;vertical-align:middle;animation:bcvblink 1.8s infinite}
@keyframes bcvblink{0%,100%{opacity:1}50%{opacity:.35}}
#auth .bpk{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--rule-dark);border-radius:8px;padding:10px 20px;cursor:pointer;transition:.2s;background:transparent;font-family:inherit;color:var(--navy);font-size:14px;font-weight:700;letter-spacing:.02em}
#auth .bpk:hover{border-color:var(--navy);color:var(--navy);background:rgba(23,23,43,.06)}
#auth .bpk.on{border-color:var(--navy);background:var(--navy);color:var(--lime)}
#auth .bpk .bd{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.7}

/* the 3 explainer steps under the demo (they sit on the lime #how block above the reactor) */
#auth .bcv-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;max-width:960px;margin:clamp(34px,4.4vw,56px) auto 0;padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--rule)}
#auth .bcv-steps .n{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--lime);margin-bottom:8px}
#auth .bcv-steps .n::before{content:"/";opacity:.55}
#auth .bcv-steps h4{font-family:inherit;font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--white);margin-bottom:6px;text-transform:uppercase}
#auth .bcv-steps p{font-size:13.5px;color:var(--muted);line-height:1.5}
@media(max-width:760px){#auth .bcv-steps{grid-template-columns:1fr;gap:18px}}

/* scroll-reveal */
#auth .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-expo)}
#auth .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#auth .rv{opacity:1;transform:none;transition:none}}
/* the steps sit on the lime #how block → flip text to navy for contrast (reactor is full-bleed navy above) */
#auth .rf-sec--lime .bcv-steps .n{color:var(--navy)}
#auth .rf-sec--lime .bcv-steps h4{color:var(--navy)}
#auth .rf-sec--lime .bcv-steps p{color:var(--muted-dark)}
/* ── LIVE REACH film (retro hero video replaces headline text) ── */
#auth .rf-reach-top{margin-bottom:clamp(16px,2.4vw,26px)}
#auth .rf-reach-top .idx{font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--accent);display:inline-flex;align-items:center}
#auth .rf-reach-top .idx::before{content:'/';opacity:.55;margin-right:2px}
/* borderless: the video's feathered edges already fade to --navy (#17172B), so it bleeds straight
   into the section — no frame, no box, no background seam. */
#auth .rf-reachfilm{margin:0;position:relative;overflow:hidden;background:transparent;border:0}
#auth .rf-reachvid{display:block;width:100%;height:auto;aspect-ratio:1810/1146;object-fit:cover}
@media(prefers-reduced-motion:reduce){#auth .rf-reachvid{/* poster shows; browser pauses autoplay */}}
/* ── STATS DECK (/02) — flat panels, hairline grid, no gauges/grain ── */
#auth .rf-deck{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(26px,3.5vw,44px);border-radius:var(--radius);overflow:hidden}
#auth .rf-inst{position:relative;overflow:hidden;text-align:center;background:var(--navy);padding:clamp(30px,3.8vw,54px) clamp(14px,1.8vw,26px)}
#auth .rf-inst::after{content:none}
/* first + third stat panels are solid lime blocks for rhythm */
#auth .rf-inst:nth-child(4n+1){background:var(--lime)}
#auth .rf-inst:nth-child(4n+1) .n{color:var(--navy)}
#auth .rf-inst:nth-child(4n+1) .l{color:var(--muted-dark)}
#auth .rf-inst .g{display:none}                 /* drop the gauge arcs */
#auth .rf-inst .n{position:relative;z-index:1;font-family:inherit;font-weight:900;letter-spacing:-.03em;
  font-size:clamp(36px,4.4vw,62px);color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
#auth .rf-inst .l{position:relative;z-index:1;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--ink-dim);margin-top:12px}
@media(max-width:900px){#auth .rf-deck{grid-template-columns:repeat(2,1fr)}
  #auth .rf-inst:nth-child(4n+1){background:var(--navy)} #auth .rf-inst:nth-child(4n+1) .n{color:var(--ink)} #auth .rf-inst:nth-child(4n+1) .l{color:var(--ink-dim)}
  #auth .rf-inst:nth-child(odd){background:var(--lime)} #auth .rf-inst:nth-child(odd) .n{color:var(--navy)} #auth .rf-inst:nth-child(odd) .l{color:var(--muted-dark)}}

/* ── PLATFORM ticker marquee — hairline framed ── */
#auth .rf-tick{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(22px,3vw,36px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
#auth .rf-tick-in{display:inline-flex;white-space:nowrap;padding:16px 0;animation:rftick 34s linear infinite;will-change:transform}
#auth .rf-tick-in b{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:15px;color:var(--ink-2)}
#auth .rf-tick-in b::after{content:'/';color:var(--lime);opacity:.7;margin:0 22px;font-size:15px;vertical-align:0;font-weight:700}
@keyframes rftick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#auth .rf-tick-in{animation:none}}

/* ── GUARANTEES (/03) — flat bordered cards, hairline, /NN corner number ── */
#auth .rf-stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);margin-top:clamp(28px,4vw,46px)}
#auth .rf-stampc{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px);background:transparent}
#auth .rf-sec--lime .rf-stampc{border-color:var(--rule-dark)}
#auth .rf-stampc .big{font-family:inherit;font-weight:900;font-size:clamp(30px,3.4vw,48px);line-height:.94;letter-spacing:-.02em;color:var(--lime);text-transform:uppercase}
#auth .rf-sec--lime .rf-stampc .big{color:var(--navy)}
#auth .rf-stampc p{color:var(--ink-2);font-size:14px;line-height:1.5;margin-top:12px}
#auth .rf-sec--lime .rf-stampc p{color:var(--muted-dark)}
#auth .rf-stampc .rno{position:absolute;top:16px;right:18px;font-weight:700;letter-spacing:.1em;font-size:12px;color:var(--ink-dim)}
#auth .rf-stampc .rno::before{content:'/';opacity:.55}
#auth .rf-sec--lime .rf-stampc .rno{color:var(--muted-dark-2)}
/* slam-in reveal, tamed to flat translateY (no rotate/blur/scale walls) */
#auth .rf-stamps .rf-stampc{opacity:0;transform:translateY(20px);filter:none}
#auth .rf-stamps .rf-stampc:nth-child(2){transition-delay:.06s!important}
#auth .rf-stamps .rf-stampc:nth-child(3){transition-delay:.12s!important}
#auth .rf-stamps .rf-stampc:nth-child(4){transition-delay:.18s!important}
#auth .rf-stamps .rf-stampc:nth-child(5){transition-delay:.24s!important}
#auth .rf-stamps .rf-stampc:nth-child(6){transition-delay:.3s!important}
#auth .rf-stampc{transition:opacity .5s var(--ease-out),transform .55s var(--ease-out)}
#auth .rf-stamps.in .rf-stampc{opacity:1;transform:none}
@media(max-width:900px){#auth .rf-stamps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){#auth .rf-stamps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#auth .rf-stamps .rf-stampc{opacity:1;transform:none;transition:none}}

/* ── FOUNDER STORY (/04) + PRICING TICKET — flat bordered card ── */
#auth .rf-early{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3.2vw,52px);margin-top:clamp(28px,4vw,46px);align-items:stretch}
#auth .rf-early--solo{grid-template-columns:minmax(0,480px);justify-content:start}
#auth .rf-story{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,42px);background:transparent}
#auth .rf-sec--lime .rf-story{border-color:var(--rule-dark)}
#auth .rf-story .no{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--accent);margin-bottom:14px}
#auth .rf-story .no::before{content:'/';opacity:.55}
#auth .rf-story h3{font-family:inherit;font-weight:900;letter-spacing:-.03em;font-size:clamp(24px,2.6vw,34px);line-height:1.02;color:var(--ink);margin-bottom:14px}
#auth .rf-sec--lime .rf-story h3{color:var(--navy)}
#auth .rf-story p{color:var(--ink-2);font-size:15px;line-height:1.62}
#auth .rf-sec--lime .rf-story p{color:var(--muted-dark)}
#auth .rf-story .sig{margin-top:18px;color:var(--ink-dim);font-size:14px}
#auth .rf-story .sig a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}

/* pricing card — flat lime block, navy ink, sharp corners */
#auth .rf-ticket{position:relative;max-width:440px;margin:0 auto;color:var(--navy);border-radius:var(--radius);overflow:hidden;
  background:var(--lime);padding:clamp(28px,3vw,42px) clamp(24px,2.8vw,36px) clamp(24px,2.6vw,32px);
  transform:none;box-shadow:none;align-self:center}
#auth .rf-ticket::after{content:none}
#auth .rv.in .rf-ticket{animation:none}
#auth .tk-head{display:flex;justify-content:space-between;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--muted-dark)}
#auth .tk-title{margin-top:16px;display:inline-block;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(13px,1.5vw,15px);color:var(--navy);
  border:1.5px solid var(--navy);border-radius:var(--radius-sm);padding:.22em .6em;transform:none;background:transparent}
#auth .tk-amount{font-family:inherit;font-weight:900;letter-spacing:-.04em;font-size:clamp(54px,6vw,84px);line-height:1;margin:16px 0 2px;position:relative;z-index:1;color:var(--navy)}
#auth .tk-per{font-size:13.5px;color:var(--muted-dark);margin-bottom:8px;position:relative;z-index:1}
#auth .tk-perf{position:relative;border-top:1px solid var(--rule-dark);margin:18px calc(clamp(24px,2.8vw,36px)*-1)}
#auth .tk-perf::before,#auth .tk-perf::after{content:none}
#auth .tk-list{list-style:none;margin:16px 0 22px;padding:0;position:relative;z-index:1}
#auth .tk-list li{padding:9px 0;font-size:14.5px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--rule-dark);display:flex;align-items:baseline;gap:10px}
#auth .tk-list li::before{content:'';flex:none;width:.62em;height:.62em;border-radius:2px;background:var(--navy);transform:translateY(.05em);margin-right:0}
#auth .tk-list li:last-child{border-bottom:0}
#auth .rf-ticket .rf-btn{position:relative;z-index:1;width:100%;justify-content:center;background:var(--navy);color:var(--white);border-color:var(--navy);padding:16px 24px;font-size:14px}
#auth .rf-ticket .rf-btn:hover{transform:translateY(-2px);opacity:.92;background:var(--navy);border-color:var(--navy)}
/* two-tier PASS: FREE TRIAL stub torn from the $49 UNLIMITED ticket. flat lime, navy ink,
   sharp corners, a real perforated tear line. no gradients. (2026-07-24 pricing) */
/* eng-tear-mask: the notches must be REAL holes. A child with background:transparent only
   reveals this element's own lime fill, so the paint has to be removed here. Two radial-gradient
   circles at the tear line are composited with `exclude`, which subtracts them from the card and
   lets the section background show through. Positioned from the BOTTOM so they stay on the tear
   line as the card grows. */
#auth .rf-pass{position:relative;max-width:440px;margin:0;color:var(--navy);border-radius:var(--radius);overflow:hidden;
  background:var(--lime);padding:clamp(28px,3vw,42px) clamp(24px,2.8vw,36px) clamp(24px,2.6vw,32px);align-self:center;
  /* --tear-y is measured from the tear element by JS (tearTrack) so the holes stay on the line
     when the card reflows. Default 50% keeps them plausible before JS runs. */
  --tear-y:50%;
  -webkit-mask-image:radial-gradient(circle 11px at 0 var(--tear-y),#000 99%,transparent 100%),
                     radial-gradient(circle 11px at 100% var(--tear-y),#000 99%,transparent 100%),
                     linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask-image:radial-gradient(circle 11px at 0 var(--tear-y),#000 99%,transparent 100%),
                     radial-gradient(circle 11px at 100% var(--tear-y),#000 99%,transparent 100%),
                     linear-gradient(#000,#000);
          mask-composite:exclude}
#auth .rf-pass .tk-head{display:flex;justify-content:space-between;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--muted-dark)}
/* --- FREE stub --- */
#auth .tk-stub{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:16px}
#auth .tk-stub-l{min-width:0}
#auth .tk-amount--sm{font-size:clamp(38px,4vw,52px);margin:10px 0 2px}
#auth .rf-btn.rf-stub-cta{flex:none;background:transparent;color:var(--navy);border:1.5px solid var(--navy);padding:11px 18px;font-size:13px;border-radius:var(--radius-sm)}
#auth .rf-btn.rf-stub-cta:hover{transform:translateY(-2px);background:var(--navy);color:var(--lime);border-color:var(--navy)}
/* --- perforated tear --- */
#auth .tk-tear{position:relative;margin:22px calc(clamp(24px,2.8vw,36px)*-1);height:0;border-top:2px dashed rgba(23,23,43,.32);text-align:center}
/* The notches must read as PERFORATION, so they cannot be a painted dot: background:var(--navy)
   only looked like a hole where the ticket sat on the navy section, and rendered as two black
   circles over the pricing image. Transparent + an inset ring keeps the punched-edge read
   without occluding whatever is behind the card. */
  /* no painted circles: the notch is a real hole cut by the .rf-pass mask above. */


#auth .tk-tear-lbl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--lime);padding:0 12px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(23,23,43,.5)}
/* --- $49 main --- */
#auth .tk-main-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* ⛔ .tk-badge ("BEST VALUE") REMOVED 2026-08-02. A filled dark pill next to two real buttons
   put THREE button-shaped objects on one card, and the middle one was not clickable. The tier
   is already the hero (scale of $49, the tear notch, the only accent CTA on the card), so the
   badge restated what the layout said, in the one visual language reserved for controls.
   If a "best value" cue is ever wanted again it belongs in TYPE, not in a button shape. */
#auth .rf-pass .tk-amount-per{font-size:.34em;font-weight:800;letter-spacing:-.01em;color:var(--muted-dark);margin-left:4px}
#auth .rf-pass .tk-list li b{font-weight:900}

  /* Animated CTA border, ported from the agency .vlive__btn. The @property registration is what
     makes the angle animatable at all: an unregistered custom property is a string and cannot
     tween, so a conic border built without it jumps instead of sweeping. The ring sits OUTSIDE the
     button (inset -3px) so it reads against the surrounding surface, and mask-composite:exclude
     punches out the centre so only the rim paints. */
  @property --ctaedge{syntax:"<angle>";inherits:false;initial-value:0deg}
  #auth .rf-btn.rf-acc.rf-lg{position:relative;isolation:isolate}
  #auth .rf-btn.rf-acc.rf-lg::before{content:"";position:absolute;inset:-3px;z-index:0;padding:3px;
    pointer-events:none;border-radius:inherit;
    background:conic-gradient(from var(--ctaedge),
      #F5FFAB 0deg,#ffffff 55deg,#F5FFAB 120deg,#3431A5 200deg,#6f6bff 250deg,
      #F5FFAB 320deg,#F5FFAB 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask-composite:exclude;
    filter:drop-shadow(0 0 6px rgba(245,255,171,.45));
    animation:ctaedge 2.6s linear infinite}
  #auth .rf-btn.rf-acc.rf-lg > *{position:relative;z-index:1}
  @keyframes ctaedge{to{--ctaedge:360deg}}
  @media(prefers-reduced-motion:reduce){
    #auth .rf-btn.rf-acc.rf-lg::before{animation:none}}
  #auth .rf-btn.rf-pass-cta{width:100%;justify-content:center;background:var(--navy);color:var(--white);border-color:var(--navy);padding:16px 24px;font-size:14px;margin-top:2px}
#auth .rf-btn.rf-pass-cta:hover{transform:translateY(-2px);opacity:.92;background:var(--navy);border-color:var(--navy)}
@media(max-width:520px){#auth .tk-stub{flex-direction:column;align-items:stretch;gap:14px}#auth .rf-btn.rf-stub-cta{width:100%;justify-content:center}}
@media(max-width:900px){#auth .rf-early{grid-template-columns:1fr}}

/* ── FINAL CTA — flat navy block, huge Satoshi headline, lime accent ── */
#auth .rf-final{border-bottom:1px solid var(--rule-dark);text-align:center;position:relative;overflow:hidden;background:var(--lime);padding:clamp(80px,11vw,150px) 0}
#auth .rf-final::before{content:none}
#auth section.rf-final::after{content:none}
#auth .rf-final .in{position:relative;z-index:1}
#auth .rf-final h2,#auth section.rf-final h2{font-family:inherit;font-weight:900;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(46px,8vw,120px);margin-bottom:22px;text-wrap:balance;color:var(--navy);text-transform:uppercase}
#auth .rf-final h2 em{font-style:normal;color:var(--navy);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
#auth .rf-final p{color:rgba(23,23,43,.7);font-size:18px;margin-bottom:34px}
/* ── LP TAIL — designer elevation (flat lime/navy, hairline only, no gradients/glass). 2026-07-24 ── */

/* RULES: spec-sheet stamps. big /R-NN, lime top-rail on hover, tighter editorial. */
/* stamps become solid NAVY blocks on the lime #rules section — proper alternating rhythm,
   hairline-joined into a single spec-sheet grid, lime top-rail wipes in on reveal. */
#auth #rules .rf-sec-top h2{line-height:.92}
#auth #rules .rf-stamps{gap:1px;background:var(--navy);border:1px solid var(--navy);border-radius:var(--radius);overflow:hidden}
#auth #rules .rf-stampc{border:0;border-radius:0;background:var(--navy);padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,30px)}
#auth #rules .rf-stampc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
#auth #rules .rf-stamps.in .rf-stampc::before,#auth #rules .rf-stampc:hover::before{transform:scaleX(1)}
#auth #rules .rf-stampc .rno{color:rgba(255,255,255,.5)}
#auth #rules .rf-stampc .big{color:var(--lime);font-size:clamp(28px,3.2vw,44px);letter-spacing:-.025em}
#auth #rules .rf-stampc p{color:rgba(255,255,255,.66);font-size:13.5px;line-height:1.55}
@media(max-width:820px){#auth #rules .rf-stamps{grid-template-columns:1fr}}

/* STATS: live reach as a confident data block. pulse dot on the eyebrow, big alternating tiles. */
#auth #stats .rf-reach-top{display:flex;align-items:center;gap:10px}
#auth #stats .rf-reach-top .idx{font-size:13px}
#auth #stats .rf-reach-top::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(245,255,171,.6);animation:lpPulse 2.2s ease-out infinite}
@keyframes lpPulse{0%{box-shadow:0 0 0 0 rgba(245,255,171,.55)}70%{box-shadow:0 0 0 12px rgba(245,255,171,0)}100%{box-shadow:0 0 0 0 rgba(245,255,171,0)}}
@media(prefers-reduced-motion:reduce){#auth #stats .rf-reach-top::after{animation:none}}
#auth #stats .rf-inst{padding:clamp(34px,4.2vw,60px) clamp(14px,1.8vw,26px);transition:background .3s ease}
#auth #stats .rf-inst .n{font-size:clamp(40px,5vw,70px)}
#auth #stats .rf-inst .l{letter-spacing:.14em;font-size:11.5px}

/* FINAL: bigger close, lime keyline framing the block, editorial. */
#auth .rf-final{border-top:1px solid var(--rule-dark)}
#auth .rf-final .in{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
#auth .rf-final h2{font-size:clamp(48px,8.5vw,128px)}
#auth .rf-final .rf-form{margin-top:6px}
/* final CTA form on the lime block: navy pill, navy ink, navy CTA (invert the dark-bg defaults) */
#auth .rf-final .rf-form{border:1.5px solid var(--navy);background:rgba(23,23,43,.04)}
#auth .rf-final .rf-form input{color:var(--navy)}
#auth .rf-final .rf-form input::placeholder{color:rgba(23,23,43,.5)}
#auth .rf-final .rf-form input:-webkit-autofill,#auth .rf-final .rf-form input:-webkit-autofill:focus{-webkit-text-fill-color:var(--navy)}
#auth .rf-final .rf-form .rf-btn{background:var(--navy);color:var(--white);border-color:var(--navy)}
#auth .rf-final .rf-form .rf-btn:hover{background:var(--navy);border-color:var(--navy);opacity:.92}


/* ── FOOTER — hairline grid + stroked wordmark ── */
#auth .rf-foot{padding:clamp(44px,5vw,64px) 0 0;background:var(--navy)}
#auth .rf-foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid var(--line-soft)}
#auth .rf-foot-col h4{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--ink-dim);margin-bottom:16px}
#auth .rf-foot-col a{display:block;color:var(--ink-2);margin-bottom:10px;font-size:14.5px;cursor:pointer}
#auth .rf-foot-col a:hover{color:var(--ink)}
#auth .rf-wordmark{font-family:inherit;font-weight:900;font-size:clamp(90px,25vw,340px);line-height:.82;letter-spacing:-.03em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px var(--line);padding:22px 0 8px;white-space:nowrap;overflow:hidden}
#auth .rf-foot-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0 40px;
  color:var(--ink-dim);border-top:1px solid var(--line-soft);font-weight:600;letter-spacing:.04em;font-size:13px;text-transform:uppercase}

/* ── shared responsive ── */
@media(max-width:900px){
  #auth .rf-links{display:none}
  #auth .rf-hero-head{max-width:none}
  #auth .rf-steps{grid-template-columns:1fr} #auth .rf-step{border-right:0;border-bottom:1px solid var(--line)}
  #auth .rf-sec--lime .rf-step{border-bottom-color:var(--rule-dark)}
  #auth .rf-cta-row{flex-direction:column;align-items:flex-start}
  #auth .rf-stats{grid-template-columns:1fr 1fr} #auth .rf-stat:nth-child(2){border-right:0}
  #auth .rf-stat{border-bottom:1px solid var(--line)}
  /* mobile nav: compact bar, smaller brand + buttons so nothing overflows */
  #auth .rf-nav-in{height:60px}
  #auth .rf-brand{font-size:19px;gap:9px}
  #auth .rf-mark{width:24px;height:24px}
  #auth .rf-cta{gap:8px}
  #auth .rf-btn{font-size:12px;letter-spacing:.04em}
  #auth .rf-ghost{padding:9px 14px}
  #auth .rf-acc{padding:9px 15px}
}
@media(max-width:560px){
  #auth .rf-stats{grid-template-columns:1fr} #auth .rf-stat{border-right:0}
  /* a long CTA (German KOSTENLOS TESTEN) leaves the email field ~110px; 4px less side padding keeps the placeholder whole */
  #auth .rf-form .rf-btn{padding:0 16px}
  /* very narrow: keep BOTH sign-in + start-free but compact so both fit + stay tappable */
  #auth .rf-nav-in{height:56px}
  #auth .rf-brand{font-size:17px;gap:8px}
  #auth .rf-mark{width:22px;height:22px}
  #auth .rf-cta{gap:7px}
  #auth .rf-ghost{padding:8px 12px;font-size:11.5px}
  #auth .rf-acc{padding:8px 13px;font-size:11.5px}
  #auth .rf-acc .rf-arr,#auth .rf-acc sup{display:none}   /* drop the ↗ glyph to save width */
}
@media(max-width:380px){
  #auth .rf-brand{font-size:15px}
  #auth .rf-ghost,#auth .rf-acc{padding:8px 11px;font-size:11px;letter-spacing:.02em}
}