/* ============================================================
   BLUE PIPS — PAYMENT PORTAL
   Institutional dark terminal. Brand DNA inherited from the
   marketing site (navy #0D1B3E / blue #1E8CFF / teal #00C4CC),
   re-grounded on a dark base to read as "secure terminal"
   rather than "marketing page".
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand core (from bluepips marketing site) */
  --navy:#0D1B3E;
  --accent:#1E8CFF;
  --teal:#00C4CC;
  --grad-brand:linear-gradient(135deg,var(--accent) 0%,var(--teal) 100%);
  --grad-brand-rev:linear-gradient(135deg,var(--teal) 0%,var(--accent) 100%);

  /* Dark surfaces — never pure black (OLED smear) */
  --bg:#060B18;
  --bg-2:#080F20;
  --surface:#0B1428;
  --surface-2:#101B33;
  --surface-3:#16243F;

  /* Lines */
  --line:rgba(120,160,220,.13);
  --line-2:rgba(120,160,220,.22);
  --line-hot:rgba(30,140,255,.42);

  /* Text — all checked ≥4.5:1 on --bg */
  --text:#EAF1FF;
  --text-2:#A9BCDC;
  --text-3:#6F84A8;

  /* Semantic */
  --ok:#00D9A3;
  --warn:#FFB020;
  --bad:#FF5C6C;

  /* Type */
  --f-display:"Playfair Display",Georgia,serif;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  /* Space — density 5 (standard) */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px;
  --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;

  /* Radius */
  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px; --r-pill:999px;

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.18s; --t-mid:.32s; --t-slow:.6s;

  /* Elevation */
  --sh-1:0 2px 8px rgba(0,0,0,.4);
  --sh-2:0 12px 32px -8px rgba(0,0,0,.6);
  --sh-3:0 28px 70px -20px rgba(0,0,0,.8);
  --glow:0 0 0 1px var(--line-hot),0 12px 40px -12px rgba(30,140,255,.45);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:rgba(30,140,255,.32);color:#fff}

/* Focus — visible, never removed */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Numeric data is always mono + tabular so digits don't jitter when they tick */
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- 3. AMBIENT BACKDROP ---------- */
.bg-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-grid{
  position:absolute;inset:-50%;
  background-image:
    linear-gradient(rgba(120,160,220,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,220,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 32%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 32%,#000 0%,transparent 78%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.orb-a{width:620px;height:620px;background:radial-gradient(circle,rgba(30,140,255,.5),transparent 68%);top:-16%;left:-10%}
.orb-b{width:560px;height:560px;background:radial-gradient(circle,rgba(0,196,204,.4),transparent 68%);top:32%;right:-14%}
.orb-c{width:480px;height:480px;background:radial-gradient(circle,rgba(90,60,255,.3),transparent 68%);bottom:-14%;left:34%}

/* Scanline — subtle institutional-terminal texture */
.bg-scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------- 4. LAYOUT ---------- */
.shell{position:relative;z-index:1}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--s-4)}
.wrap-tight{max-width:920px}
.wrap-narrow{max-width:560px}
section{padding-block:var(--s-8)}

/* ---------- 5. TICKER ---------- */
.ticker{
  position:relative;z-index:60;
  background:rgba(8,15,32,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  overflow:hidden;padding-block:9px;
}
.ticker-track{display:inline-flex;gap:52px;white-space:nowrap;animation:ticker 34s linear infinite;will-change:transform}
@keyframes ticker{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em}
.tk-l{color:var(--text-3);text-transform:uppercase}
.tk-v{color:var(--teal)}
.tk-v.dn{color:var(--bad)}
.tk-dot{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* ---------- 6. NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  height:70px;display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--s-4);
  background:rgba(6,11,24,.72);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:background var(--t-mid),box-shadow var(--t-mid),border-color var(--t-mid);
}
.nav.scrolled{background:rgba(6,11,24,.94);box-shadow:0 14px 44px rgba(0,0,0,.55);border-bottom-color:var(--line-2)}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(30,140,255,.45) 30%,rgba(0,196,204,.45) 50%,rgba(30,140,255,.45) 70%,transparent);
}
.brand{display:flex;align-items:center;gap:11px;min-height:44px}
.brand-mark{width:34px;height:34px;object-fit:contain;transition:transform var(--t-mid) var(--e-out),filter var(--t-mid)}
.brand:hover .brand-mark{transform:scale(1.08) rotate(-4deg);filter:drop-shadow(0 4px 16px rgba(30,140,255,.55))}
.brand-txt{font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand-txt em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-r{display:flex;align-items:center;gap:var(--s-3)}
.nav-lnk{font-size:13px;font-weight:500;color:var(--text-2);transition:color var(--t-fast)}
.nav-lnk:hover{color:var(--text)}

/* ---------- 7. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:12px 24px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;white-space:nowrap;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-mid),background var(--t-mid),border-color var(--t-mid),color var(--t-mid);
}
.btn:active{transform:scale(.975)}
.btn svg{width:14px;height:14px;flex:0 0 auto;transition:transform var(--t-mid) var(--e-out)}

.btn-p{background:var(--grad-brand);color:#04121F;box-shadow:0 10px 30px -10px rgba(30,140,255,.65)}
.btn-p::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--e-out);
}
.btn-p:hover{box-shadow:0 16px 44px -10px rgba(30,140,255,.8);transform:translateY(-2px)}
.btn-p:hover::after{transform:translateX(120%)}
.btn-p:hover svg{transform:translateX(4px)}

.btn-g{background:rgba(255,255,255,.045);border:1px solid var(--line-2);color:var(--text)}
.btn-g:hover{background:rgba(255,255,255,.09);border-color:var(--line-hot);transform:translateY(-2px)}

.btn-full{width:100%}
.btn[disabled]{opacity:.42;pointer-events:none}

/* ---------- 8. PILLS / EYEBROWS ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:rgba(30,140,255,.09);border:1px solid rgba(30,140,255,.26);
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.pill-ok{background:rgba(0,217,163,.09);border-color:rgba(0,217,163,.28);color:var(--ok)}
.pill-warn{background:rgba(255,176,32,.09);border-color:rgba(255,176,32,.28);color:var(--warn)}

/* ---------- 9. TYPE SCALE ---------- */
.h1{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,6.2vw,70px);line-height:1.04;letter-spacing:-.032em}
.h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,3.8vw,46px);line-height:1.12;letter-spacing:-.025em}
.h3{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.2vw,27px);line-height:1.24;letter-spacing:-.018em}
.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.h1 em,.h2 em{font-style:italic;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{font-size:clamp(15px,1.5vw,17.5px);line-height:1.72;color:var(--text-2)}
.eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.dim{color:var(--text-2)} .dim-2{color:var(--text-3)}

/* ---------- 10. CARD ---------- */
.card{
  position:relative;border-radius:var(--r-l);
  background:linear-gradient(165deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);
  padding:var(--s-5);
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid);
}
/* Gradient edge that lights on hover — pure CSS, no repaint of the border box */
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t-mid);pointer-events:none;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.card:hover::before{opacity:.75}

/* ---------- 11. REVEAL (JS-driven, degrades to visible) ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* ---------- 12. HERO ---------- */
.hero{position:relative;padding-block:var(--s-8) var(--s-8);text-align:center;overflow:hidden}
/* The mark is the hero's ground, not an object sitting on it: set large
   behind the type and masked so it dissolves into the field rather than
   ending on a hard edge. Taking it out of the flow also gives the copy
   back the ~110px it used to cost above the fold. */
.hero-logo{
  position:absolute;top:-78px;right:-96px;left:auto;z-index:0;
  width:min(430px,64vw);height:auto;margin:0;
  opacity:.1;pointer-events:none;
  filter:saturate(1.15);
  /* Denser at the corner it anchors to, gone by the time it reaches the
     copy -- an emboss set into the sheet rather than a picture placed on it. */
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 72% 26%,#000 16%,transparent 70%);
  mask-image:radial-gradient(ellipse 78% 78% at 72% 26%,#000 16%,transparent 70%);
  animation:heroDrift 20s ease-in-out infinite;
}
/* Slow enough to read as atmosphere rather than motion. */
@keyframes heroDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-12px,10px) scale(1.03)}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* Copy sits above the mark. */
.hero .wrap{position:relative;z-index:1}
.hero .h1{margin-block:var(--s-4) var(--s-4);max-width:16ch;margin-inline:auto}
.hero .lead{max-width:60ch;margin-inline:auto}
.hero-cta{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6)}

/* Trust strip */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-7)}
.trust-i{
  display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);
  transition:border-color var(--t-mid),background var(--t-mid),transform var(--t-mid) var(--e-out);
}
.trust-i:hover{border-color:var(--line-hot);background:rgba(30,140,255,.07);transform:translateY(-2px)}
.trust-i svg{width:13px;height:13px;color:var(--teal)}

/* ---------- 13. STAT ROW ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.stat{background:var(--surface);padding:var(--s-5) var(--s-4);text-align:center;transition:background var(--t-mid)}
.stat:hover{background:var(--surface-2)}
.stat-v{font-family:var(--f-mono);font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:-.03em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-l{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);margin-top:var(--s-2)}


/* ---------- 15. PROGRAM CARDS ---------- */
/* The programme column and the Floor column, side by side. The Floor column
   is display:none (not empty-but-present) whenever it has nothing to show,
   so the programme column is free to claim the full row on its own while
   choosing between two tiers or showing the awaiting-desk status -- the
   two-column layout only actually happens once there is a second real card. */
.access-row{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:flex-start}
.access-col{flex:1 1 380px;min-width:0}
.progs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s-4)}
/* A single owned card would otherwise stretch to the full row width under
   auto-fit -- capped and left-aligned so it reads as "your plan", not an
   oversized leftover slot. */
.progs.progs-solo{grid-template-columns:minmax(0,460px);justify-content:start}
/* Full width -- the awaiting card is a status screen, not a plan card, and
   reads better at the same width as the converter/checkout cards. */
.progs.progs-await{grid-template-columns:1fr}
.await-card{text-align:center;padding-block:var(--s-7);max-width:640px;margin-inline:auto}
.await-details{max-width:400px;margin:var(--s-5) auto 0;text-align:left}
.await-hint{max-width:360px;margin-inline:auto;padding-top:var(--s-4);margin-top:var(--s-4);border-top:1px dashed var(--line)}
.prog{position:relative;cursor:pointer;display:flex;flex-direction:column}
.prog.sel{border-color:transparent}
.prog.sel::before{opacity:1}
.prog.sel{box-shadow:var(--glow)}
.prog-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-2)}
.prog-n{font-family:var(--f-display);font-size:25px;font-weight:600;letter-spacing:-.02em}
.prog-d{font-size:13.5px;color:var(--text-2);line-height:1.65;margin-bottom:var(--s-4);min-height:44px}
.prog-price{display:flex;align-items:baseline;gap:9px;padding-block:var(--s-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--s-4)}
.prog-cur{font-family:var(--f-mono);font-size:26px;font-weight:500;letter-spacing:-.02em}
.prog-was{font-family:var(--f-mono);font-size:14px;color:var(--text-3);text-decoration:line-through}

/* ---------- 16. CONVERTER (the centrepiece) ---------- */
.conv{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(165deg,var(--surface-2) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-3);
}
.conv::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none;
}
.conv-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);flex-wrap:wrap}
.conv-live{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.conv-body{padding:var(--s-6) var(--s-5)}
.conv-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-4)}
.conv-side{text-align:center}
.conv-lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:11px}
.conv-amt{font-family:var(--f-mono);font-size:clamp(28px,4.6vw,50px);font-weight:500;letter-spacing:-.035em;line-height:1}
.conv-amt.out{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.conv-tick{font-family:var(--f-mono);font-size:11px;color:var(--text-3);margin-top:9px}
.conv-arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(30,140,255,.1);border:1px solid rgba(30,140,255,.28)}
.conv-arrow svg{width:18px;height:18px;color:var(--accent);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.conv-rate{display:flex;align-items:center;justify-content:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px dashed var(--line)}
.conv-rate span{font-family:var(--f-mono);font-size:11.5px;color:var(--text-3)}
.conv-rate b{color:var(--text-2);font-weight:500}
.flash{animation:flash .55s var(--e-out)}
@keyframes flash{0%{filter:brightness(2.1)}100%{filter:brightness(1)}}

/* Rate refresh bar */
.conv-bar{height:2px;background:rgba(255,255,255,.06);overflow:hidden}
.conv-bar i{display:block;height:100%;width:100%;background:var(--grad-brand);transform-origin:left;animation:drain 15s linear infinite}
@keyframes drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------- 17. FORMS ---------- */
.field{margin-bottom:var(--s-4)}
.field label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.input{
  width:100%;min-height:48px;padding:13px 16px;border-radius:var(--r-s);
  background:rgba(255,255,255,.032);border:1px solid var(--line-2);
  font-size:14.5px;color:var(--text);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.input::placeholder{color:var(--text-3)}
.input:hover{border-color:rgba(120,160,220,.34)}
.input:focus{outline:none;border-color:var(--accent);background:rgba(30,140,255,.05);box-shadow:0 0 0 3px rgba(30,140,255,.16)}
.input.bad{border-color:var(--bad);box-shadow:0 0 0 3px rgba(255,92,108,.14)}
.hint{font-size:12px;color:var(--text-3);margin-top:7px;line-height:1.55}
.err{font-size:12px;color:var(--bad);margin-top:7px;min-height:16px}

/* Locked field — name/email are immutable after issue */
.locked{position:relative}
.locked .input{background:rgba(255,255,255,.018);color:var(--text-2);cursor:not-allowed;padding-right:42px}
.lock-i{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-3)}

/* ---------- 18. STEPPER ---------- */
.steps{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6);flex-wrap:wrap;justify-content:center}
.step{display:flex;align-items:center;gap:9px}
.step-n{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--f-mono);font-size:11px;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--text-3);
  transition:all var(--t-mid) var(--e-out);
}
.step-t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);transition:color var(--t-mid)}
.step.on .step-n{background:var(--grad-brand);border-color:transparent;color:#04121F;box-shadow:0 0 0 4px rgba(30,140,255,.14)}
.step.on .step-t{color:var(--text)}
.step.done .step-n{background:rgba(0,217,163,.16);border-color:rgba(0,217,163,.4);color:var(--ok)}
.step-bar{width:34px;height:1px;background:var(--line-2);flex:0 0 auto}

/* ---------- 19. AUTH TABS ---------- */
.net-tabs{display:flex;gap:var(--s-2);margin-bottom:var(--s-3);flex-wrap:wrap}
.net{min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.04);border:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--text-2);cursor:pointer;transition:all var(--t-fast)}
.net:hover{border-color:var(--line-hot);color:var(--text)}
.net.on{background:rgba(30,140,255,.14);border-color:var(--line-hot);color:var(--accent)}

/* ---------- 19b. AUTH -- split panel ----------
   A single bordered container split in two rather than two floating cards --
   reads as one reception desk (brand half + form half), not a generic login
   card. Each half carries its own outer corner radius instead of relying on
   overflow:hidden on the shadowed parent, which would clip the shadow. */
.auth-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  /* Plain CSS entrance, not the scroll-triggered .rv/IntersectionObserver
     path -- this is the sign-in form, so it must never depend on a JS
     callback firing to become visible. Replays each time the view is
     switched to, since display:none -> block re-triggers a CSS animation. */
  animation:authIn .6s var(--e-out) both;
}
@keyframes authIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.auth-split{animation:none}}
.auth-brand{
  position:relative;overflow:hidden;
  padding:var(--s-6) var(--s-5);
  background:linear-gradient(165deg,var(--surface-2) 0%,var(--navy) 140%);
  border-right:1px solid var(--line);
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  /* Fixed rhythm, not space-between -- the form panel is taller than the
     brand copy on most viewports, and distributing this column edge-to-edge
     left a dead gap floating mid-panel. The watermark below fills whatever
     space is left, so the two columns never need their heights measured
     against each other. */
  display:flex;flex-direction:column;gap:var(--s-6);
}
.auth-brand > div:first-child{display:flex;flex-direction:column;gap:var(--s-5)}
.auth-brand-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,140,255,.32),transparent 70%);
  filter:blur(70px);top:-120px;right:-140px;pointer-events:none;
}
/* Decorative watermark, not content -- fills the panel's lower reach
   regardless of how the form column's height varies between tabs, without
   needing the two columns' content to be measured against each other. */
.auth-brand-watermark{
  position:absolute;bottom:-52px;left:-46px;width:270px;height:270px;
  object-fit:contain;opacity:.12;filter:saturate(1.1);pointer-events:none;
}
.auth-brand-mark{margin-bottom:var(--s-6);min-height:0}
.auth-brand-h{
  font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.6vw,29px);
  line-height:1.18;letter-spacing:-.025em;margin-bottom:var(--s-3);
  text-wrap:balance;
}
.auth-brand-p{font-size:13.5px;line-height:1.7;color:var(--text-2);max-width:34ch}
.auth-trust{list-style:none;display:flex;flex-direction:column;gap:14px;position:relative}
.auth-trust li{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-2)}
.auth-trust svg{width:16px;height:16px;flex:0 0 auto;color:var(--teal)}
.auth-panel{
  padding:var(--s-6) var(--s-5);
  background:linear-gradient(165deg,var(--surface) 0%,var(--bg-2) 100%);
  border-radius:0 var(--r-xl) var(--r-xl) 0;
}
@media(max-width:820px){
  .auth-split{grid-template-columns:1fr}
  .auth-brand{
    border-right:none;border-bottom:1px solid var(--line);
    border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s-5);gap:var(--s-4);
  }
  .auth-trust{flex-direction:row;flex-wrap:wrap;gap:var(--s-3) var(--s-4)}
  .auth-panel{border-radius:0 0 var(--r-xl) var(--r-xl);padding:var(--s-5)}
}

/* Summary rows */
.sum-r{display:flex;justify-content:space-between;gap:var(--s-3);padding-block:11px;border-bottom:1px solid var(--line);font-size:13.5px}
.sum-r:last-child{border-bottom:none}
.sum-r span{color:var(--text-3)}
.sum-r b{font-family:var(--f-mono);font-weight:500}
.sum-r.tot{padding-top:var(--s-3);margin-top:var(--s-2);border-top:1px solid var(--line-2);border-bottom:none}
.sum-r.tot b{font-size:19px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 20. DASHBOARD ---------- */
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-6)}
.bp-chip{
  display:inline-flex;align-items:center;gap:11px;padding:11px 18px;border-radius:var(--r-pill);
  background:linear-gradient(120deg,rgba(30,140,255,.13),rgba(0,196,204,.09));
  border:1px solid rgba(30,140,255,.3);
}
.bp-chip .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.bp-chip .v{font-family:var(--f-mono);font-size:14px;font-weight:600;letter-spacing:.06em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Access matrix — shows what unlocks across subdomains */
/* Square-ish elite terminal cards, capped rather than stretched -- with one
   or two terminals, auto-fit's normal 1fr tracks would otherwise stretch a
   single card into a long thin bar. minmax with a fixed max keeps each card
   a real card at any count; justify-content:start keeps leftover space out
   of the layout instead of distributing it. */
.matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));gap:var(--s-4);justify-content:start}
.mx{
  position:relative;display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-5);border-radius:var(--r-l);text-decoration:none;cursor:pointer;
  background:linear-gradient(160deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid);
}
.mx:hover{transform:translateY(-4px);border-color:var(--line-hot);box-shadow:var(--sh-2)}
.mx-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.mx-icon{
  width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:rgba(30,140,255,.11);border:1px solid rgba(30,140,255,.26);
  transition:transform var(--t-mid) var(--e-out);
}
.mx:hover .mx-icon{transform:scale(1.08) rotate(-4deg)}
.mx-icon svg{width:20px;height:20px;color:var(--accent)}
.mx-n{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.mx-u{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--text-3);margin-top:2px}
.mx-s{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(0,217,163,.12);color:var(--ok);border:1px solid rgba(0,217,163,.28);
}
.mx-s .tk-dot{width:5px;height:5px}
.mx-go{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;
  min-height:42px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
  transition:all var(--t-fast) var(--e-out);
}
.mx:hover .mx-go{border-color:var(--line-hot);background:rgba(30,140,255,.1);color:var(--accent)}
.mx-go svg{width:13px;height:13px;transition:transform var(--t-fast) var(--e-out)}
.mx:hover .mx-go svg{transform:translate(2px,-2px)}

/* ---------- 21. VIEW SWITCHER ---------- */
.view{display:none;animation:viewIn .5s var(--e-out)}
.view.on{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 22. TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:200;
  /* Translating by a percentage of its own height left a sliver visible at the
     bottom of the page. Move it clear of the viewport and hide it outright. */
  transform:translate(-50%,calc(100% + 40px));
  opacity:0;visibility:hidden;pointer-events:none;
  display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:var(--r-pill);
  background:rgba(11,20,40,.96);border:1px solid var(--line-hot);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-3);font-size:13.5px;
  transition:transform .45s var(--e-out),opacity .3s ease,visibility .45s;max-width:calc(100vw - 32px);
}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.toast svg{width:16px;height:16px;color:var(--ok);flex:0 0 auto}

/* ---------- 23. FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding-block:var(--s-6);margin-top:var(--s-8)}
.foot-in{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.foot p{font-size:12px;color:var(--text-3)}

/* ---------- 24. RESPONSIVE ---------- */
@media(max-width:900px){
  .pay{grid-template-columns:1fr}
  .conv-row{grid-template-columns:1fr;gap:var(--s-3)}
  .conv-arrow{transform:rotate(90deg);margin-inline:auto}
}
@media(max-width:640px){
  section{padding-block:var(--s-7)}
  .nav{padding-inline:var(--s-3);height:64px}
  .nav-lnk{display:none}
  .wrap{padding-inline:var(--s-3)}
  .card{padding:var(--s-4)}
  .hero-logo{width:min(330px,74vw);top:-58px;right:-74px;opacity:.11}
  .step-t{display:none}
  .step-bar{width:20px}
  .btn{width:100%}
  .hero-cta .btn{width:auto;flex:1 1 auto}
}

/* ---------- 25. REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   26. PENDING STATE
   ============================================================ */
.pending-ring{
  width:66px;height:66px;border-radius:50%;margin:0 auto var(--s-4);
  display:grid;place-items:center;
  background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.3);
  position:relative;
}
.pending-ring svg{width:28px;height:28px;color:var(--warn)}
.pending-ring::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid rgba(255,176,32,.28);border-top-color:var(--warn);
  animation:spinSlow 2.4s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pending-ring::after{animation:none}}

/* Inline text button (e.g. "Forgotten?") — padded to a 24px target. */
.linkbtn{
  display:inline-flex;align-items:center;min-height:24px;padding:2px 4px;margin:-2px -4px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);background:none;border:none;cursor:pointer;
  transition:color var(--t-fast);
}
.linkbtn:hover{color:var(--teal);text-decoration:underline}

/* ============================================================
   27. ADD-ON BAND (Trading Floor)
   Deliberately a different shape from the programme cards — it is
   an upgrade, not a fourth thing to choose between.
   ============================================================ */
.addon{
  position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;
  padding:var(--s-5);border-radius:var(--r-l);
  background:linear-gradient(120deg,rgba(30,140,255,.07) 0%,rgba(0,196,204,.05) 55%,transparent 100%),
             linear-gradient(165deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);
  transition:border-color var(--t-mid),transform var(--t-mid) var(--e-out),box-shadow var(--t-mid);
}
.addon::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t-mid);pointer-events:none;
}
.addon:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.addon:hover::before{opacity:.6}
.addon-on::before{opacity:.85}
.addon-on{box-shadow:0 0 0 1px rgba(0,217,163,.28)}

.addon-h{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:9px}
.addon-tag{
  font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);background:rgba(0,196,204,.11);border:1px solid rgba(0,196,204,.3);
  padding:4px 10px;border-radius:var(--r-pill);
}
.addon-n{font-family:var(--f-display);font-size:24px;font-weight:600;letter-spacing:-.02em}
/* Active-term status -- a real panel, not a corner badge, since "how long
   have I got left" is the one thing an active member actually checks here. */
.addon-status{
  display:flex;align-items:center;gap:12px;margin:2px 0 var(--s-4);
  padding:12px 15px;border-radius:var(--r-m);
  background:rgba(0,217,163,.09);border:1px solid rgba(0,217,163,.28);
}
.addon-status-dot{width:9px;height:9px;flex:0 0 auto;display:grid;place-items:center}
.addon-status-dot .tk-dot{width:9px;height:9px}
.addon-status b{display:block;font-size:13px;font-weight:600;color:var(--ok)}
.addon-status span{font-family:var(--f-mono);font-size:11.5px;color:var(--text-2);margin-top:1px}
.addon-d{font-size:13.5px;line-height:1.65;color:var(--text-2);max-width:60ch;margin-bottom:var(--s-4)}
.addon-f{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:9px var(--s-4)}
.addon-f li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text-2);line-height:1.5}
.addon-f svg{width:14px;height:14px;flex:0 0 auto;margin-top:3px;color:var(--teal)}
.addon-more{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--text-3);
  margin-top:var(--s-3);font-style:italic;
}
.addon-r{text-align:right;min-width:196px}
.addon-price{margin-bottom:var(--s-3)}
.addon-cur{
  display:block;font-family:var(--f-mono);font-size:32px;font-weight:500;letter-spacing:-.03em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.addon-per{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.addon-note{font-size:11.5px;color:var(--text-3);margin-top:9px;line-height:1.5}

@media(max-width:820px){
  .addon{grid-template-columns:1fr;gap:var(--s-4)}
  .addon-r{text-align:left;min-width:0}
  .addon-cur{font-size:28px}
}

/* Dashboard Floor card: always vertical, capped to the same width as the
   programme card beside it -- reads as one of "your" cards, not the
   horizontal marketing band the public preview (#addonPreview) still uses.
   Scoped to the dashboard only; the preview keeps its wide band on purpose. */
#addonDash .addon{grid-template-columns:1fr;gap:var(--s-4);max-width:460px}
#addonDash .addon-r{text-align:left;min-width:0}
#addonDash .terms{min-width:0}

/* ============================================================
   28. ADD-ON — TERMS, GATES, MOTION
   ============================================================ */

/* Slow sheen across the band. Purely atmospheric, and the first thing
   disabled under reduced-motion. */
.addon{overflow:hidden}
.addon-glow{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(30,140,255,.10) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,72%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.addon-locked .addon-glow{display:none}

/* Feature rows fade in one after another when the band reveals. */
.rv.in .addon-f li,.addon-f li{
  animation:fadeUp .5s var(--e-out) backwards;
  animation-delay:calc(var(--i,0) * 60ms + 120ms);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.addon-locked{opacity:.9}
.addon-locked .addon-f li{color:var(--text-3)}
.addon-locked .addon-f svg{color:var(--text-3);opacity:.5}

/* ---------- LOCKED GATE ---------- */
.addon-gate{
  display:flex;gap:12px;align-items:flex-start;min-width:230px;
  padding:16px;border-radius:var(--r-m);
  background:rgba(255,255,255,.03);border:1px dashed var(--line-2);
}
.addon-gate svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--text-3)}
.addon-gate b{display:block;font-size:13.5px;color:var(--text-2);margin-bottom:3px}
.addon-gate span{font-size:12.5px;color:var(--text-3);line-height:1.55}
.addon-gate-pro{border-color:rgba(30,140,255,.34);background:rgba(30,140,255,.06)}
.addon-gate-pro svg{color:var(--accent)}
.addon-gate-pro b{color:var(--accent)}

/* ---------- SCROLL PROGRESS ---------- */
.scrollbar-progress{
  position:fixed;top:0;left:0;height:2px;z-index:80;
  background:var(--grad-brand);width:0;
  transition:width .1s linear;pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .addon-glow{animation:none;display:none}
  .addon-f li{animation:none}
  .scrollbar-progress{transition:none}
}

/* ============================================================
   29. ACCOUNT PANEL + JOURNEY
   ============================================================ */
.acct{margin-bottom:var(--s-4)}
.acct-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.acct-row{display:flex;align-items:center;gap:var(--s-3);padding:11px 0;border-bottom:1px solid var(--line)}
.acct-row:last-child{border-bottom:none}
.acct-k{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-3);width:104px;flex:0 0 auto;
}
.acct-v{font-size:14.5px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.acct-lock{display:none;flex:0 0 auto;margin-left:auto}
.acct-lock.on{display:block}
.acct-lock svg{width:13px;height:13px;color:var(--text-3)}

/* Membership card treatment -- this is the member's own ID, the single
   highest-status object on the page, so it gets a real card material: a
   dark metallic base, an embossed-feeling chip, and a slow light sweep.
   The .pending state deliberately drops all three (flat, dashed, no sheen)
   so an unissued number never gets mistaken for the real thing. */
.acct-bp{
  position:relative;overflow:hidden;text-align:left;
  min-width:250px;padding:var(--s-4) var(--s-5);border-radius:var(--r-m);
  background:linear-gradient(155deg,#0f2547 0%,#0a1830 48%,#102a4d 100%);
  border:1px solid rgba(216,168,74,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(216,168,74,.1),
             0 20px 46px -20px rgba(216,168,74,.4),0 22px 50px -26px rgba(30,140,255,.4);
  animation:acctBpGlow 3.6s ease-in-out infinite;
}
@keyframes acctBpGlow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(216,168,74,.1),0 20px 46px -20px rgba(216,168,74,.4),0 22px 50px -26px rgba(30,140,255,.4)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(216,168,74,.26),0 24px 56px -18px rgba(216,168,74,.6),0 22px 50px -26px rgba(30,140,255,.45)}
}
@media(prefers-reduced-motion:reduce){.acct-bp{animation:none}}
.acct-bp::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.12) 48%,transparent 64%);
  transform:translateX(-120%);animation:acctBpSheen 5.5s ease-in-out infinite;
}
@keyframes acctBpSheen{0%,58%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.acct-bp::before{display:none}}
.acct-bp-top{position:relative;display:flex;align-items:center;gap:11px;margin-bottom:var(--s-4)}
.acct-bp-chip{
  width:34px;height:25px;border-radius:6px;flex:0 0 auto;position:relative;
  background:linear-gradient(135deg,#ffe4ab 0%,#d8a84a 55%,#a97a2c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 2px 6px -1px rgba(180,130,40,.5);
}
.acct-bp-chip::before{
  content:"";position:absolute;inset:5px;border-radius:3px;
  background:linear-gradient(90deg,transparent 34%,rgba(120,80,20,.4) 34%,rgba(120,80,20,.4) 40%,transparent 40%,
              transparent 60%,rgba(120,80,20,.4) 60%,rgba(120,80,20,.4) 66%,transparent 66%);
}
/* text-2, not text-3 -- the card's own navy is lighter than --bg, and text-3
   only clears AA contrast against the darkest surfaces (see the tokens'
   ">=4.5:1 on --bg" guarantee, which does not extend to this lighter fill). */
.acct-bp-k{position:relative;font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.acct-bp-v-row{position:relative;display:flex;align-items:center;gap:9px}
.acct-bp-v{
  font-family:var(--f-mono);font-size:29px;font-weight:700;letter-spacing:.05em;line-height:1.15;
  background:linear-gradient(100deg,var(--accent) 0%,var(--teal) 60%,#ffd98a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.acct-bp-copy{
  position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--text-2);
  cursor:pointer;transition:all var(--t-fast) var(--e-out);
}
.acct-bp-copy:hover{background:rgba(216,168,74,.16);border-color:rgba(216,168,74,.4);color:#ffd98a}
.acct-bp-copy svg{width:13px;height:13px}
.acct-bp.pending{background:rgba(255,255,255,.025);border:1px dashed var(--line-2);box-shadow:none;animation:none}
.acct-bp.pending::before{display:none}
.acct-bp.pending .acct-bp-chip{background:rgba(255,255,255,.08);box-shadow:none}
.acct-bp.pending .acct-bp-chip::before{display:none}
.acct-bp.pending .acct-bp-v{
  background:none;-webkit-text-fill-color:var(--text-3);color:var(--text-3);
  font-size:16px;font-weight:600;letter-spacing:.14em;
}
.acct-bp-note{position:relative;font-size:11px;color:var(--text-2);line-height:1.5;margin-top:8px;max-width:28ch}
.acct-bp.pending .acct-bp-k,.acct-bp.pending .acct-bp-note{color:var(--text-3)}

/* ---------- JOURNEY -> PROGRESS STRIP ----------
   Where the member is, stated once as a position rather than
   retold as five paragraphs on every visit. */
.journey{
  padding:var(--s-4) var(--s-5);border-radius:var(--r-l);
  background:rgba(255,255,255,.022);border:1px solid var(--line);
  margin-bottom:var(--s-5);
}
.jrn-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:12px}
.jrn-step{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
}
.jrn-now{font-size:14.5px;font-weight:600;color:var(--text)}
.jrn-bar{display:flex;gap:4px}
.jrn-bar i{
  flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.07);
  transition:background var(--t-slow) var(--e-out);
}
.jrn-bar i.on{background:var(--grad-brand)}
.jrn-bar i.on:last-child{background:linear-gradient(90deg,var(--teal),var(--ok))}
.jrn-cta{margin-top:var(--s-4);display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.jrn-cta:empty{display:none}
.jrn-hint{font-size:12.5px;color:var(--text-3);line-height:1.6;flex:1;min-width:190px}

/* Terminal launch buttons, once open */
.launch{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:12px 20px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.045);border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
  transition:all var(--t-fast) var(--e-out);
}
.launch:hover{border-color:var(--line-hot);background:rgba(30,140,255,.1);transform:translateY(-2px)}
.launch svg{width:13px;height:13px;color:var(--teal)}

@media(max-width:760px){
  .acct{grid-template-columns:1fr}
  .acct-bp{min-width:0}
  .acct-k{width:88px}
}

/* ============================================================
   30. PROGRAMME CARDS -- module list
   ============================================================ */
.prog-eyebrow{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:7px;
}
.prog-price{display:flex;flex-direction:column;gap:6px;padding-block:var(--s-3) var(--s-2);border:none;margin-bottom:var(--s-2)}
.prog-valued-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.prog-valued-k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.prog-foundtag{
  font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(0,217,163,.09);border:1px solid rgba(0,217,163,.28);white-space:nowrap;
}
.prog-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.prog-cur{font-family:var(--f-display);font-size:42px;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.prog-was{font-family:var(--f-display);font-size:17px;color:var(--text-3);text-decoration:line-through}
.prog-arrow{font-size:17px;color:var(--text-3)}
.prog-term{font-size:13px;color:var(--text-3)}
.prog-d{font-size:13.5px;color:var(--text-2);line-height:1.6;margin-bottom:var(--s-4);min-height:auto}
.prog-sub{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:11px;
}

.prog-mods{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:var(--s-5);flex:1}
.prog-mods li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-2);line-height:1.5}
.mod-n{
  flex:0 0 auto;min-width:30px;height:24px;padding:0 8px;border-radius:7px;
  display:grid;place-items:center;
  background:rgba(30,140,255,.11);border:1px solid rgba(30,140,255,.26);
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--accent);
}
.prog.sel .mod-n,.prog:hover .mod-n{background:rgba(30,140,255,.2);border-color:rgba(30,140,255,.42)}

/* "Plus every SSC Pro module" -- the bundle's one differentiator, called out
   once rather than repeating the Pro module list a second time. */
.prog-plus{
  display:flex;gap:12px;align-items:flex-start;margin:-6px 0 var(--s-4);
  padding:13px 15px;border-radius:var(--r-m);
  background:rgba(0,217,163,.07);border:1px solid rgba(0,217,163,.24);
}
.prog-plus svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--ok)}
.prog-plus b{display:block;font-size:13px;color:var(--text)}
.prog-plus span{font-size:12px;color:var(--text-2);line-height:1.5}

/* ---------- Featured card (SSC Complete) -- the recommended tier gets a
   persistent glow and a slow light-sweep instead of only lighting on hover. ---------- */
.prog-featured{
  border-color:rgba(30,140,255,.4);
  box-shadow:0 0 0 1px rgba(30,140,255,.18),0 24px 60px -22px rgba(30,140,255,.5);
}
.prog-featured::before{opacity:.85}
.prog-featured:hover{transform:translateY(-4px)}
/* border-radius:inherit keeps the sheen's square corners from poking past the
   card's rounded ones -- overflow:hidden on .prog-featured would do the same
   job but also clips its own box-shadow, killing the glow. */
.prog-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);
  transform:translateX(-120%);animation:progSheen 7s ease-in-out infinite;
}
@keyframes progSheen{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion: reduce){.prog-sheen{display:none}}

/* ============================================================
   31. USDT PRICING + FOUNDING SAVING
   ============================================================ */
.prog-usdt{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  margin:-2px 0 var(--s-4);
  font-family:var(--f-mono);font-size:13px;color:var(--text-2);
}
.prog-usdt b{font-size:15px;font-weight:600;color:var(--teal);letter-spacing:-.01em}
.usdt-eq{color:var(--text-3)}
.usdt-note{font-family:var(--f-sans);font-size:11.5px;color:var(--text-3);margin-left:2px}

/* The founding panel. Real scarcity, stated plainly -- the seat count is
   enforced server-side, so the bar is not decoration. */
.saving{
  position:relative;overflow:hidden;
  padding:14px 16px;border-radius:var(--r-m);margin-bottom:var(--s-4);
  background:linear-gradient(115deg,rgba(0,217,163,.09),rgba(0,196,204,.06));
  border:1px solid rgba(0,217,163,.28);
}
.saving::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  transform:translateX(-100%);animation:savingSheen 6s ease-in-out infinite;
}
@keyframes savingSheen{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.saving-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:11px}
.saving-k{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ok);
}
.saving-v{font-size:13.5px;font-weight:600;color:var(--text)}
.saving-v em{
  font-style:normal;font-family:var(--f-mono);font-size:12.5px;font-weight:500;
  color:var(--teal);margin-left:5px;
}
.saving-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:9px}
.saving-bar i{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--ok),var(--teal));
  transition:width 1.1s var(--e-out);
}
.saving-seats{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--text-3);
}
.saving-seats b{color:var(--text);font-size:13px}
.saving-hot{
  margin-left:auto;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(255,92,108,.14);color:var(--bad);
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  animation:hotPulse 2.2s ease-in-out infinite;
}
@keyframes hotPulse{0%,100%{opacity:1}50%{opacity:.55}}

@media(prefers-reduced-motion:reduce){
  .saving::after{animation:none;display:none}
  .saving-hot{animation:none}
  .saving-bar i{transition:none}
}

/* ---------- CHECKOUT: founding band ---------- */
.conv-founding{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding:11px var(--s-5);
  background:linear-gradient(100deg,rgba(0,217,163,.14),rgba(0,196,204,.08));
  border-bottom:1px solid rgba(0,217,163,.26);
}
.conv-founding::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  transform:translateX(-100%);animation:savingSheen 6s ease-in-out infinite;
}
.cf-k{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ok);
}
.cf-v{font-size:14px;font-weight:600;color:var(--text)}
.cf-v em{
  font-style:normal;font-family:var(--f-mono);font-size:13px;font-weight:500;
  color:var(--teal);margin-left:6px;
}
/* Struck-through list price under the amount they pay */
.conv-was{
  font-family:var(--f-mono);font-size:14px;color:var(--text-3);
  text-decoration:line-through;margin-top:6px;
}
@media(prefers-reduced-motion:reduce){ .conv-founding::after{animation:none;display:none} }

/* Notice shown when the desk rejected or reversed the member's last payment */
.reopen{
  display:flex;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-4) var(--s-5);border-radius:var(--r-m);margin-bottom:var(--s-4);
  background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.3);
  animation:reopenIn .4s var(--e-out) both;
}
@keyframes reopenIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reopen{animation:none}}
.reopen-ico{
  width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.34);
}
.reopen-ico svg{width:18px;height:18px;color:var(--warn)}
.reopen div{display:flex;flex-direction:column;gap:4px}
.reopen b{font-size:14px;color:var(--text)}
.reopen span{font-size:12.5px;color:var(--text-2);line-height:1.55}
.reopen-retry{
  align-self:flex-start;margin-top:9px;min-height:34px;padding:0 15px;border-radius:var(--r-pill);
  background:rgba(255,176,32,.13);border:1px solid rgba(255,176,32,.36);
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--warn);cursor:pointer;transition:all var(--t-fast) var(--e-out);
}
.reopen-retry:hover{background:rgba(255,176,32,.24);transform:translateY(-1px)}

/* Member's BP number in the nav, once signed in */
.nav-bp{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(30,140,255,.1);border:1px solid rgba(30,140,255,.28);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
}
.nav-bp b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}
.nav-bp span{color:var(--text-3);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:560px){
  .nav-bp{padding:6px 11px;gap:6px;font-size:10.5px}
  .nav-bp span{font-size:8px;letter-spacing:.1em}
}
@media(max-width:380px){ .nav-bp span{display:none} }

.mx-note{font-size:12.5px;color:var(--text-2);line-height:1.55;flex:1}

/* A programme the member already holds */
.owned{display:flex;flex-direction:column;gap:11px}
.owned-tag{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px;border-radius:var(--r-s);
  background:rgba(0,217,163,.11);border:1px solid rgba(0,217,163,.3);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ok);
}
.owned-tag svg{width:13px;height:13px}
.owned .btn svg{width:13px;height:13px}
.prog .btn[disabled]{opacity:.4}

/* Trust line under a live buy button -- the desk's own reassurance sits in
   the hero; this is the same case restated at the one moment it actually
   matters, right before the tap that leaves the site. */
.buy-trust{
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.03em;color:var(--text-3);
}
.buy-trust svg{width:12px;height:12px;flex:0 0 auto;color:var(--teal)}

/* ---------- UPGRADE ---------- */
.upgrade{display:flex;flex-direction:column;gap:10px}
.upgrade-band{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:11px 14px;border-radius:var(--r-s);
  background:linear-gradient(110deg,rgba(0,217,163,.11),rgba(0,196,204,.07));
  border:1px solid rgba(0,217,163,.3);
}
.upgrade-k{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ok);
}
.upgrade-v{
  font-family:var(--f-mono);font-size:19px;font-weight:600;letter-spacing:-.02em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.upgrade-note{font-size:12px;color:var(--text-3);line-height:1.55}

/* ============================================================
   FLOOR TERMS -- six months carries the weight
   ============================================================ */
.terms{display:flex;flex-direction:column;gap:11px;min-width:266px}

.term-hero{
  position:relative;display:grid;gap:3px;text-align:left;cursor:pointer;
  padding:19px 18px 17px;border-radius:var(--r-m);overflow:hidden;
  background:linear-gradient(150deg,rgba(0,217,163,.13),rgba(0,196,204,.08) 55%,transparent);
  border:1px solid rgba(0,217,163,.42);
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-mid),border-color var(--t-mid);
}
.term-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  transform:translateX(-100%);animation:savingSheen 6.5s ease-in-out infinite;
}
.term-hero:hover:not([disabled]){transform:translateY(-2px);border-color:rgba(0,217,163,.7);box-shadow:0 14px 40px -16px rgba(0,217,163,.5)}
.term-hero:active:not([disabled]){transform:translateY(0) scale(.995)}
.term-hero[disabled]{opacity:.45;cursor:not-allowed}

.th-flag{
  display:inline-block;justify-self:start;margin-bottom:8px;
  padding:4px 11px;border-radius:var(--r-pill);background:var(--ok);color:#04121F;
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.th-len{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.th-price{
  font-family:var(--f-display);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.th-per{font-family:var(--f-mono);font-size:11.5px;color:var(--ok);margin-top:2px}
.th-go{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  padding:11px;border-radius:var(--r-pill);background:var(--grad-brand);color:#04121F;
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.th-go svg{width:13px;height:13px;transition:transform var(--t-fast) var(--e-out)}
.term-hero:hover:not([disabled]) .th-go svg{transform:translateX(3px)}

.term-foot{font-size:11.5px;color:var(--text-3);line-height:1.55;margin-top:2px}

@media(prefers-reduced-motion:reduce){ .term-hero::after{animation:none;display:none} }
@media(max-width:820px){ .terms{min-width:0} }

/* ============================================================
   32. PHONE — SAFE AREAS, TAP FEEL, THUMB REACH
   Tuned against iPhone 16 Pro (393x852, Dynamic Island). The
   env() values are 0 on every device that has no inset, so the
   max() guards below never shrink the desktop spacing.
   ============================================================ */

/* Edge-to-edge without putting anything tappable under the Island,
   the corners or the home indicator. Pairs with viewport-fit=cover. */
.nav{
  padding-top:env(safe-area-inset-top);
  padding-inline:max(var(--s-4),env(safe-area-inset-left)) max(var(--s-4),env(safe-area-inset-right));
  height:calc(70px + env(safe-area-inset-top));
}
.wrap{
  padding-inline:max(var(--s-4),env(safe-area-inset-left)) max(var(--s-4),env(safe-area-inset-right));
}
.foot{padding-bottom:max(var(--s-6),calc(env(safe-area-inset-bottom) + var(--s-4)))}
.toast{bottom:max(26px,calc(env(safe-area-inset-bottom) + 14px))}

/* Native-feeling taps: no grey flash, no 300ms delay, and a real
   pressed state so a tap is acknowledged the instant it lands. */
a,button,.btn,.prog,.mx,.term-hero,label{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

@media(hover:none){
  /* Hover lifts never fire on touch, so the press does the talking. */
  .btn:active{transform:scale(.97)}
  .prog:active,.mx:active{transform:scale(.995)}
  .term-hero:active:not([disabled]){transform:scale(.99)}
  /* A hover-only reveal is unreachable on a phone -- keep the featured
     card's edge and the icon tiles lit at rest instead. */
  .card:hover{transform:none}
}

@media(max-width:430px){
  /* Thumb reach: the one button that takes money is the biggest thing
     on the screen and sits at a comfortable height. */
  .btn-p,.btn-full{min-height:52px;font-size:13px}
  .term-hero{padding:20px 17px 18px}
  .th-go{padding:14px;min-height:48px}

  /* Small mono hit-targets get a padded-out hit area without changing
     how they look (44x44 minimum, per the touch guidance). */
  .acct-bp-copy,.linkbtn{position:relative}
  .acct-bp-copy::after,.linkbtn::after{content:"";position:absolute;inset:-10px}

  /* The account panel reads as one column of facts, not a squeezed grid. */
  .acct{padding:var(--s-4)}
  .acct-k{width:82px;font-size:9px}
  .acct-v{font-size:14px}
  .acct-bp{padding:var(--s-4)}
  .acct-bp-v{font-size:26px}

  /* Programme cards: the price stays the hero, the modules stay legible. */
  .prog-cur{font-size:36px}
  .prog-mods li{font-size:13.5px}
  .buy-trust{font-size:9.5px;gap:6px}

  /* Two-up instead of one long column -- four stacked full-width pills push
     the hero's proof below the fold on a phone for no reason. */
  .trust{gap:9px}
  .trust-i{
    flex:1 1 calc(50% - 5px);justify-content:center;text-align:center;
    padding:11px 10px;font-size:9px;letter-spacing:.07em;line-height:1.3;
  }
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:var(--s-4) var(--s-3)}
  .stat-v{font-size:28px}
}

/* ============================================================
   33. MOBILE — THE EXECUTIVE PASS
   Everything in this section is scoped to phone widths (or is a
   universal fix that desktop cannot see the effect of). Desktop
   layout, spacing and type are deliberately untouched.
   ============================================================ */

/* Anchored sections currently scroll underneath the sticky nav.
   Universal, but only ever visible when you follow an anchor. */
section[id]{scroll-margin-top:92px}

/* Stops a bounce at the end of the page from chaining into the
   whole document and revealing the browser's own background. */
body{overscroll-behavior-y:none}

@media(max-width:900px){

  /* ---------- FORMS ----------
     16px is not a style choice: below it, iOS Safari zooms the
     entire page the moment an input takes focus, and the member
     has to pinch back out mid-signup. Everything else here is
     the follow-on -- taller fields, a heavier focus ring, and
     labels that survive being read at arm's length. */
  .input{
    font-size:16px;min-height:54px;padding:16px;border-radius:var(--r-m);
    background:rgba(255,255,255,.04);
  }
  .input:focus{box-shadow:0 0 0 4px rgba(30,140,255,.18)}
  .input.bad{box-shadow:0 0 0 4px rgba(255,92,108,.16)}
  .field{margin-bottom:var(--s-5)}
  .field label{font-size:10px;margin-bottom:10px}
  .hint{font-size:12.5px;line-height:1.6}
  .err{font-size:12.5px}

  /* ---------- SEGMENTED CONTROL ----------
     Create account / Sign in, as a proper iOS-style segmented
     control rather than two loose buttons. */
  .net-tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:4px;
    padding:4px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.04);border:1px solid var(--line);
  }
  .net-tabs .net{
    min-height:46px;padding:0;border:none;background:transparent;
    border-radius:var(--r-pill);color:var(--text-3);
    font-family:var(--f-sans);font-size:13px;font-weight:600;letter-spacing:.01em;
    transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
  }
  .net-tabs .net.on{
    background:rgba(255,255,255,.08);color:var(--text);
    box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  }

  /* ---------- SIGN-UP PANEL ----------
     The brand half is a pitch on desktop, where it sits beside
     the form. Stacked on a phone it becomes 400px of scrolling
     between the tap and the first field, so it compresses to a
     header: mark, one line, and the trust row as chips. */
  .auth-brand{padding:var(--s-5) var(--s-4)}
  .auth-brand > div:first-child{gap:var(--s-3)}
  .auth-brand-mark{margin-bottom:var(--s-4)}
  .auth-brand-h{font-size:24px;margin-bottom:10px}
  .auth-brand-p{font-size:13px;line-height:1.6;max-width:none}
  .auth-brand-watermark{width:200px;height:200px;bottom:-40px;left:-34px;opacity:.035}
  .auth-trust{flex-direction:row;flex-wrap:wrap;gap:8px}
  .auth-trust li{
    gap:7px;padding:8px 12px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.035);border:1px solid var(--line);
    font-size:11px;line-height:1.2;
  }
  .auth-trust svg{width:13px;height:13px}
  .auth-panel{padding:var(--s-5) var(--s-4)}

  /* ---------- ACCOUNT PANEL ----------
     A phone cannot hold a 104px label column and a full email on
     one line, so the value stops being truncated and stacks
     under its label instead. An address the member cannot read
     in full is not something to show on the screen where they
     are checking it is correct. */
  .acct{padding:var(--s-4);gap:var(--s-4)}
  .acct-row{
    position:relative;flex-direction:column;align-items:flex-start;
    gap:5px;padding:13px 0;
  }
  .acct-k{width:auto}
  .acct-v{
    font-size:15.5px;white-space:normal;overflow:visible;
    overflow-wrap:anywhere;padding-right:26px;
  }
  .acct-lock{position:absolute;right:0;top:14px;margin-left:0}

  /* The access key is the object the member actually came back to
     look at, so on a phone it leads the panel rather than sitting
     under three rows of metadata. */
  .acct-bp{order:-1;min-width:0;padding:var(--s-5) var(--s-4)}
  .acct-bp-v{font-size:32px}
  .acct-bp-note{max-width:none}

  /* ---------- TERMINALS ----------
     Capped cards leave a dead column on a phone; full width reads
     as two real destinations. */
  .matrix{grid-template-columns:1fr;gap:var(--s-3)}
  .mx{padding:var(--s-4)}

  /* ---------- MOTION ----------
     The desktop reveal is a 700ms drift. On a phone, where the
     thumb moves faster than the eye, that reads as lag -- same
     gesture, tightened. */
  .rv{transform:translateY(14px);transition-duration:.45s}
  .view{animation-duration:.34s}
}

@media(max-width:430px){
  /* Section rhythm: enough air to feel considered, not so much
     that the page becomes a scroll marathon. */
  section{padding-block:var(--s-6)}
  .journey{padding:var(--s-4)}
  .jrn-txt b{font-size:13.5px}
  .jrn-txt span{font-size:12px}
  .dash-top{margin-bottom:var(--s-5);gap:var(--s-3)}
}

/* Touch devices never get :hover, so anything that only appears on
   hover has to be present at rest. */
@media(hover:none){
  .acct-bp-copy{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
  .mx-go{border-color:var(--line-2)}
}

/* ---------- THE PAY MOMENT, ON A PHONE ----------
   On desktop the two tiers sit side by side, so the outline CTA
   reads as "the quieter of two choices". Stacked on a phone each
   card is seen alone, with nothing to be quieter *than* -- so the
   outline just reads as less inviting. Both get the full treatment;
   the featured card keeps its glow and sheen to carry the ranking. */
@media(max-width:900px){
  .prog .btn[data-pick]{
    background:var(--grad-brand);color:#04121F;border-color:transparent;
    box-shadow:0 10px 30px -10px rgba(30,140,255,.65);
  }
  .prog .btn[data-pick]:active{box-shadow:0 6px 18px -8px rgba(30,140,255,.6)}
  .buy-trust{margin-top:14px}
}


/* ============================================================
   35. PHONE DENSITY — ONE SECTION PER SCREEN
   The phone build was set at desktop's rhythm scaled down, which
   left every section taller than the viewport: a reader met one
   headline at a time and had to scroll to learn anything. This
   pulls the type and spacing in so a whole section lands in a
   single screen. It is a reduction in scale, not in confidence:
   sizes step down together so the hierarchy holds.
   ============================================================ */
@media(max-width:560px){
  /* Section rhythm */
  section{padding-block:var(--s-6)}
  .hero{padding-block:var(--s-5) var(--s-6)}

  /* Type scale, stepped down as a set */
  .h1{font-size:33px;line-height:1.08;letter-spacing:-.03em}
  .h2{font-size:25px;line-height:1.16}
  .h3{font-size:19px}
  .lead{font-size:14.5px;line-height:1.62}
  .eyebrow{font-size:9.5px;letter-spacing:.18em}

  /* Hero: the mark sets the tone, it does not need to dominate */
  .hero-logo{width:min(280px,80vw);top:-48px;right:-62px;opacity:.12}
  .hero .h1{margin-block:var(--s-3);max-width:20ch}
  .hero .lead{max-width:46ch}
  .hero-cta{margin-top:var(--s-4);gap:10px}
  .trust{margin-top:var(--s-5);gap:7px}
  .trust-i{padding:9px 10px;font-size:8.5px}
  .pill{padding:5px 12px;font-size:9.5px}

  /* Proof row */
  .stat{padding:var(--s-3) var(--s-2)}
  .stat-v{font-size:25px}
  .stat-l{font-size:8.5px;letter-spacing:.12em;margin-top:5px}



  /* Programme cards: the price still leads, everything around it tightens */
  .card{padding:var(--s-4)}
  .prog-n{font-size:21px}
  .prog-cur{font-size:31px}
  .prog-was{font-size:15px}
  .prog-term{font-size:12px}
  .prog-d{font-size:13px;margin-bottom:var(--s-3)}
  .prog-mods{gap:10px;margin-bottom:var(--s-4)}
  .prog-mods li{font-size:13px}
  .mod-n{min-width:27px;height:22px;font-size:9.5px}
  .prog-plus{padding:11px 13px}
  .prog-plus b{font-size:12.5px}
  .prog-plus span{font-size:11.5px}

  /* Portal */
  .dash-top{margin-bottom:var(--s-4)}
  .acct{padding:var(--s-4);gap:var(--s-3);margin-bottom:var(--s-3)}
  .acct-row{padding:11px 0}
  .acct-v{font-size:15px}
  .acct-bp{padding:var(--s-4)}
  .acct-bp-v{font-size:29px}
  .acct-bp-top{margin-bottom:var(--s-3)}
  .journey{padding:var(--s-4);margin-bottom:var(--s-5)}
  .mx{padding:var(--s-4)}
  .mx-n{font-size:17px}
}

/* ============================================================
   36. THE SHIFT — before / after
   The page's emotional argument, set immediately before the
   price. The contrast is the device: the left column is
   deliberately flat and colourless, the right one carries the
   brand edge, so the eye reaches the second column already
   preferring it.
   ============================================================ */
.shift{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:stretch}
.shift-col{
  position:relative;padding:var(--s-5);border-radius:var(--r-l);
  display:flex;flex-direction:column;gap:var(--s-4);
}
.shift-k{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
}
.shift-l{list-style:none;display:flex;flex-direction:column;gap:14px}
.shift-l li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.6}

/* Left: how it looks without a system. Muted on purpose. */
.shift-before{
  background:rgba(255,255,255,.018);
  border:1px dashed var(--line-2);
}
.shift-before .shift-k{color:var(--text-3)}
.shift-before .shift-l li{color:var(--text-3)}
.shift-x{
  width:19px;height:19px;flex:0 0 auto;margin-top:1px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,92,108,.1);border:1px solid rgba(255,92,108,.24);
}
.shift-x svg{width:10px;height:10px;color:var(--bad);opacity:.85}

/* Right: the same four moments, with the standard applied. */
.shift-after{
  background:linear-gradient(160deg,rgba(30,140,255,.08),rgba(0,196,204,.05) 55%,transparent);
  border:1px solid rgba(30,140,255,.34);
  box-shadow:0 0 0 1px rgba(30,140,255,.1),0 24px 60px -30px rgba(30,140,255,.55);
}
.shift-after .shift-k{color:var(--accent)}
.shift-after .shift-l li{color:var(--text)}
.shift-c{
  width:19px;height:19px;flex:0 0 auto;margin-top:1px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,196,204,.15);border:1px solid rgba(0,196,204,.36);
}
.shift-c svg{width:11px;height:11px;color:var(--teal)}

/* The closing statement. It was set as a caption, which made the page's
   last word its quietest; it is now a plaque -- the claim in the display
   face, the provenance underneath, and the same diamond the terminals
   lockup uses so the two read as one house. */
.shift-foot{
  max-width:44ch;margin:var(--s-6) auto 0;text-align:center;
  font-size:13.5px;line-height:1.7;color:var(--text-3);
}
.shift-mark{
  display:block;width:5px;height:5px;margin:0 auto var(--s-4);
  transform:rotate(45deg);background:var(--accent);
  box-shadow:0 0 0 5px rgba(30,140,255,.09),0 0 22px rgba(30,140,255,.5);
}
.shift-foot b{
  display:block;margin-bottom:9px;
  font-family:var(--f-display);font-size:23px;font-weight:600;
  letter-spacing:-.02em;line-height:1.3;color:var(--text);
}

@media(max-width:760px){
  .shift{grid-template-columns:1fr;gap:var(--s-3)}
}
@media(max-width:560px){
  .shift-col{padding:var(--s-4);gap:var(--s-3)}
  .shift-l{gap:11px}
  .shift-l li{font-size:13px;gap:10px}
  .shift-foot{font-size:12.5px;margin-top:var(--s-5);max-width:34ch}
  .shift-foot b{font-size:19px;margin-bottom:7px}
  .shift-mark{margin-bottom:var(--s-3)}
}

/* ============================================================
   37. THE TERMINALS
   The brand name is expensive to repeat: said twice in a row it
   stops being a mark and starts being noise. So it is hoisted
   into the lockup once, and each room carries only its own name.
   The subdomain underneath does the branding a second time
   without ever saying the words again.
   ============================================================ */
.tm-head{text-align:center;margin-bottom:var(--s-6)}
.tm-brand{
  display:inline-flex;align-items:center;gap:13px;margin-bottom:var(--s-3);
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--text-3);
}
/* The diamond between the mark and the word. Small enough to read as
   punctuation, deliberate enough not to look like a bullet. */
.tm-brand i{
  width:4px;height:4px;flex:0 0 auto;transform:rotate(45deg);
  background:var(--accent);opacity:.8;
}

.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.tm{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  background:linear-gradient(168deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid),box-shadow var(--t-mid);
}
.tm:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--sh-2)}

/* Window chrome. This is the glimpse: enough of a frame that the card
   reads as a place you log into, without pretending to be a screenshot
   of software the reader has not seen yet. */
.tm-chrome{
  display:flex;align-items:center;gap:7px;
  padding:12px var(--s-4);border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.28);
}

.tm-body{padding:var(--s-5) var(--s-4) var(--s-4)}
.tm-n{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-family:var(--f-display);font-size:24px;font-weight:600;letter-spacing:-.02em;
  margin-bottom:10px;
}
.tm-tag{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(0,196,204,.12);border:1px solid rgba(0,196,204,.32);
  font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);
}
.tm-tag .tk-dot{background:var(--teal)}
.tm-d{font-size:13.5px;line-height:1.68;color:var(--text-2);margin-bottom:var(--s-4)}
.tm-l{list-style:none;display:flex;flex-direction:column;gap:11px}
.tm-l li{display:flex;gap:11px;align-items:center;font-size:13px;color:var(--text-2)}
.tm-wk{background:rgba(0,196,204,.11)!important;border-color:rgba(0,196,204,.3)!important;color:var(--teal)!important}

/* The Floor is the live room, so its edge stays lit rather than
   waiting for a hover that never comes on a phone. */
.tm-live{border-color:rgba(0,196,204,.3)}
.tm-live .tm-chrome{background:linear-gradient(90deg,rgba(0,196,204,.09),rgba(0,0,0,.28))}

.tm-foot{
  margin-top:var(--s-5);text-align:center;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.03em;color:var(--text-3);
}

@media(max-width:760px){
  .tm-grid{grid-template-columns:1fr;gap:var(--s-3)}
}
@media(max-width:560px){
  .tm-brand{font-size:9px;letter-spacing:.26em;gap:10px}
  .tm-chrome{padding:10px var(--s-3)}
  .tm-body{padding:var(--s-4) var(--s-3) var(--s-3)}
  .tm-n{font-size:20px;margin-bottom:8px}
  .tm-d{font-size:12.5px;line-height:1.6;margin-bottom:var(--s-3)}
  .tm-l li{font-size:12.5px;gap:9px}
  .tm-foot{font-size:10.5px;margin-top:var(--s-4)}
}

/* ============================================================
   38. THE FLOW — a session log
   The timings used to sit in green pills, which was the wrong
   job for that colour: green is the state the desk uses for
   "granted" and "verified", so spending it on a duration made
   the page read louder and cheaper than it is. The durations
   are now a running clock in mono, the way a desk timestamps
   anything, and the whole section stays inside navy and blue.
   ============================================================ */
.flow{list-style:none;display:grid;gap:var(--s-4);max-width:none}
.flow-i{position:relative;padding-top:var(--s-4)}

/* The rule above each step carries the progression: lit at the
   start, fading as the clock runs out. */
.flow-rule{
  position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),rgba(30,140,255,.14));
}
.flow-i:nth-child(2) .flow-rule{background:linear-gradient(90deg,rgba(30,140,255,.72),rgba(30,140,255,.1))}
.flow-i:nth-child(3) .flow-rule{background:linear-gradient(90deg,var(--teal),rgba(0,196,204,.08))}

.flow-meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  margin-bottom:13px;
}
.flow-ix{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
}
/* Tabular figures so the clock does not shuffle between steps. */
.flow-time{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:500;letter-spacing:.02em;color:var(--accent);
}
.flow-done .flow-time{color:var(--teal)}
.flow-i h4{
  font-family:var(--f-display);font-size:19px;font-weight:600;
  letter-spacing:-.015em;margin-bottom:8px;
}
.flow-i p{font-size:13.5px;line-height:1.7;color:var(--text-2)}

@media(min-width:861px){
  .flow{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
}
@media(max-width:560px){
  .flow{gap:var(--s-3)}
  .flow-i{padding-top:var(--s-3)}
  .flow-meta{margin-bottom:10px}
  .flow-time{font-size:15px}
  .flow-i h4{font-size:16.5px;margin-bottom:6px}
  .flow-i p{font-size:13px;line-height:1.62}
}

/* ============================================================
   39. TERMINAL HEADER
   The addresses are a member's to know, not a visitor's, so the
   header carries an index instead. A hairline runs out from it
   to the card edge, which reads as instrument panel rather than
   browser window.
   ============================================================ */
.tm-chrome{
  display:flex;align-items:center;gap:var(--s-3);
  padding:14px var(--s-4);border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.2);
}
.tm-ix{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);flex:0 0 auto;
}
.tm-rule{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(30,140,255,.42),transparent);
}
.tm-live .tm-chrome{background:linear-gradient(90deg,rgba(0,196,204,.07),rgba(0,0,0,.2))}
.tm-live .tm-rule{background:linear-gradient(90deg,rgba(0,196,204,.5),transparent)}
.tm-live{border-color:rgba(0,196,204,.28)}

@media(max-width:560px){
  .tm-chrome{padding:12px var(--s-3);gap:var(--s-2)}
  .tm-ix{font-size:9px;letter-spacing:.18em}
}

/* ============================================================
   40. SIGN-UP ON A PHONE — one screen to the first field
   Two problems, both only visible on a phone. The brand lockup
   repeated the wordmark that the nav is already showing two
   centimetres above it, and the brand panel ran a full pitch
   before the form began, so the member had to scroll to reach
   the thing they came to do. The panel keeps its job as a
   header and hands the screen to the form.
   ============================================================ */
@media(max-width:820px){
  /* The nav carries the mark. Saying it twice in one screen makes it
     furniture rather than a signature. */
  .auth-brand-mark{display:none}
}

@media(max-width:560px){
  .auth-brand{padding:var(--s-4) var(--s-4) var(--s-5)}
  .auth-brand > div:first-child{gap:var(--s-3)}
  .auth-brand-h{font-size:21px;line-height:1.24;margin-bottom:8px}
  .auth-brand-p{font-size:12.5px;line-height:1.55}
  .auth-brand-glow{width:220px;height:220px;top:-90px;right:-100px}
  .auth-brand-watermark{width:150px;height:150px;bottom:-26px;left:-22px;opacity:.1}

  /* Trust points become one tight run rather than three stacked pills */
  .auth-trust{gap:6px}
  .auth-trust li{padding:6px 10px;font-size:10px;gap:6px;border-radius:var(--r-pill)}
  .auth-trust svg{width:11px;height:11px}

  /* The form itself: tighter rhythm, same 16px fields so iOS never zooms */
  .auth-panel{padding:var(--s-4)}
  .net-tabs{margin-bottom:var(--s-4)!important}
  .net-tabs .net{min-height:42px;font-size:12.5px}
  .field{margin-bottom:var(--s-4)}
  .field label{margin-bottom:7px}
  .input{min-height:50px;padding:14px}
  .hint{font-size:11.5px;line-height:1.5;margin-top:6px}
  .err{font-size:11.5px;margin-top:5px;min-height:0}
  .auth-panel .btn-full{min-height:50px}
}

/* ============================================================
   41. THE MARK, EMBEDDED
   Each terminal carries the house mark the way a card carries a
   foil emboss: bled off the corner, lit rather than printed, and
   tinted to its own room so the two read as instruments from the
   same house rather than the same image twice. The card already
   clips, so it holds the rounded corner without extra work.
   ============================================================ */
.tm-mark{
  position:absolute;right:-34px;bottom:-30px;z-index:0;
  width:170px;height:170px;object-fit:contain;pointer-events:none;
  opacity:.22;
  filter:drop-shadow(0 0 30px rgba(30,140,255,.55)) saturate(1.15);
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
}
.tm-live .tm-mark{filter:drop-shadow(0 0 30px rgba(0,196,204,.6)) saturate(1.15)}
.tm:hover .tm-mark{opacity:.32;transform:translate(-4px,-4px) scale(1.03)}

/* Content sits above the mark. */
.tm-chrome,.tm-body{position:relative;z-index:1}

@media(max-width:560px){
  .tm-mark{width:128px;height:128px;right:-24px;bottom:-20px;opacity:.2}
}
@media(hover:none){
  /* No hover on a phone, so the mark rests slightly brighter instead. */
  .tm-mark{opacity:.26}
}

/* ============================================================
   42. PRICE CARDS — ONE SCREEN, SWIPED
   Stacked, the two tiers cost three screens of scrolling to
   compare, which is the one moment a buyer most needs them side
   by side. On a phone they become a snap carousel: one card per
   screen, the next one peeking so the gesture is obvious without
   a caption telling anyone to swipe.

   Scoped away from the portal's single-card and awaiting states,
   which are not a choice and must not scroll sideways.
   ============================================================ */
@media(max-width:760px){
  .progs:not(.progs-solo):not(.progs-await){
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    gap:var(--s-3);
    /* Bleed to the screen edge, then pad back in, so the first card
       lines up with the page gutter and the last one can still centre. */
    margin-inline:calc(var(--s-3) * -1);
    padding-inline:var(--s-3);
    scroll-padding-inline:var(--s-3);
    padding-bottom:var(--s-2);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .progs:not(.progs-solo):not(.progs-await)::-webkit-scrollbar{display:none}
  .progs:not(.progs-solo):not(.progs-await) > .prog{
    flex:0 0 87%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  /* The featured card's glow needs room inside the scroller. */
  .progs:not(.progs-solo):not(.progs-await) > .prog-featured{margin-block:2px}
}

/* A quiet swipe affordance under the rail. Purely a hint: the card
   peek already does the real work. */
.progs-hint{
  display:none;
  margin-top:var(--s-3);text-align:center;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);
}
@media(max-width:760px){ .progs-hint{display:block} }
@media(min-width:761px){ .progs-hint{display:none!important} }

/* ============================================================
   43. THE CREDENTIAL
   The card used to sit beside a table repeating the same three
   facts. It now carries them: number, holder, address -- the way
   a real credential does. One object instead of two, and most of
   a phone screen returned to the member.
   ============================================================ */
/* A credential is an object with edges. Stretched the full width of a
   desktop viewport it stops being a card and becomes a banner, and the
   number -- the thing the member actually came back to look at -- gets
   lost in the middle of it. Capped near a real card's proportions so it
   reads as something you could hold. */
.acct-bp{min-width:0;max-width:540px}
.acct-bp-v{font-size:38px;letter-spacing:.06em}
.acct-bp{padding:var(--s-5)}
/* The gold reads as plating rather than a border at this size. */
.acct-bp{border-color:rgba(216,168,74,.5)}
.acct-bp-top{gap:11px}
.acct-prog{
  margin-left:auto;position:relative;
  font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%;
}
.acct-who{
  position:relative;display:flex;flex-direction:column;gap:9px;
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.1);
}
.acct-who .acct-row{
  display:flex;align-items:center;gap:11px;padding:0;border:none;
  flex-direction:row;
}
.acct-who .acct-k{
  width:44px;flex:0 0 auto;font-size:8.5px;letter-spacing:.16em;color:var(--text-3);
}
.acct-who .acct-v{
  flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:0;
}
.acct-who .acct-lock{position:static;margin-left:0;flex:0 0 auto}
.acct-who .acct-lock svg{width:12px;height:12px}
.acct-bp-note{margin-top:var(--s-3);max-width:none}

@media(max-width:560px){
  .acct{margin-bottom:var(--s-3)}
  .acct-bp{padding:var(--s-4)}
  .acct-bp-v{font-size:27px}
  .acct-prog{font-size:8px;padding:3px 8px;letter-spacing:.1em}
  .acct-who{margin-top:var(--s-3);padding-top:var(--s-3);gap:8px}
  .acct-who .acct-k{width:38px;font-size:8px}
  .acct-who .acct-v{font-size:13px}
  .acct-bp-note{font-size:10.5px;margin-top:11px}
  .journey{padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}
  .jrn-now{font-size:13.5px}
  .jrn-cta{margin-top:var(--s-3)}
  .jrn-hint{font-size:12px;min-width:0}
  /* The welcome line is a greeting, not a headline. */
  .dash-top{margin-bottom:var(--s-4);gap:var(--s-2)}
  .dash-top .h2{font-size:23px!important}
  .dash-top .eyebrow{font-size:9px;margin-bottom:5px!important}
}

/* ============================================================
   44. MEMBER TERMINALS
   The two things a member actually paid for, so they get the
   weight: the house mark embossed into each, and a line saying
   which screen the room is built for. The Room plays modules and
   wants a desktop; the Floor is the one you check between things.
   ============================================================ */
.mx{position:relative;overflow:hidden;isolation:isolate}
.mx-mark{
  position:absolute;right:-30px;bottom:-26px;z-index:0;
  width:148px;height:148px;object-fit:contain;pointer-events:none;
  opacity:.16;filter:drop-shadow(0 0 26px rgba(30,140,255,.5)) saturate(1.15);
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
}
.mx-live .mx-mark{filter:drop-shadow(0 0 26px rgba(0,196,204,.55)) saturate(1.15)}
.mx:hover .mx-mark{opacity:.26;transform:translate(-4px,-4px) scale(1.04)}
.mx > *:not(.mx-mark){position:relative;z-index:1}

/* Which screen this room is built for. */
.mx-dev{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:9px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
}
.mx-dev svg{width:12px;height:12px;flex:0 0 auto;color:var(--text-2)}
.mx-live .mx-dev{
  background:rgba(0,196,204,.09);border-color:rgba(0,196,204,.26);color:var(--teal);
}
.mx-live .mx-dev svg{color:var(--teal)}
.mx-live:hover{border-color:rgba(0,196,204,.42)}

@media(max-width:560px){
  .mx{padding:var(--s-4);gap:11px}
  .mx-mark{width:118px;height:118px;right:-22px;bottom:-18px;opacity:.15}
  .mx-icon{width:38px;height:38px;border-radius:11px}
  .mx-icon svg{width:18px;height:18px}
  .mx-n{font-size:17.5px}
  .mx-u{font-size:10px}
  .mx-note{font-size:12px;line-height:1.5}
  .mx-dev{font-size:8px;padding:4px 9px;gap:6px;letter-spacing:.09em;line-height:1.35}
  .mx-dev svg{width:11px;height:11px}
  .mx-go{min-height:44px;font-size:10.5px}
}
@media(hover:none){ .mx-mark{opacity:.2} }

/* ============================================================
   45. PAYMENT STRIP
   This was a pill at the top of the hero, where it competed with
   the headline and wrapped to two ragged lines on a phone. It is
   reassurance, not a banner, so it now closes the hero underneath
   the proof chips: a lock, the claim, and the methods, bounded by
   hairlines that fade out rather than a hard-edged capsule.
   ============================================================ */
.pay-strip{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;margin-top:var(--s-6);
}
.pay-strip::before,.pay-strip::after{
  content:"";flex:1 1 40px;height:1px;max-width:110px;min-width:24px;
}
.pay-strip::before{background:linear-gradient(90deg,transparent,var(--line-2))}
.pay-strip::after{background:linear-gradient(90deg,var(--line-2),transparent)}
.pay-lock{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,196,204,.12);border:1px solid rgba(0,196,204,.32);
  box-shadow:0 0 18px -4px rgba(0,196,204,.45);
}
.pay-lock svg{width:12px;height:12px;color:var(--teal)}
.pay-k{
  font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--text);
  white-space:nowrap;
}
.pay-v{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;
}

@media(max-width:560px){
  .pay-strip{gap:9px;margin-top:var(--s-5)}
  .pay-strip::before,.pay-strip::after{display:none}
  .pay-lock{width:23px;height:23px}
  .pay-lock svg{width:11px;height:11px}
  .pay-k{font-size:12.5px}
  .pay-v{font-size:9px;letter-spacing:.07em;flex-basis:100%;text-align:center}
}

/* ============================================================
   46. SCROLL CUE
   The hero had two full-width buttons stacked on a phone, which
   read as two equal choices when only one is the point. The
   secondary is gone; this takes over its other job -- inviting
   the scroll -- at a volume that does not argue with the CTA.
   ============================================================ */
.scroll-cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  margin-top:var(--s-6);padding:8px 14px 4px;border-radius:var(--r-m);
  color:var(--text-3);transition:color var(--t-mid);
}
.scroll-cue:hover{color:var(--text-2)}
.scroll-cue-k{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
}
.scroll-cue-i{
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(255,255,255,.028);
  animation:cueDrop 2.6s var(--e-io) infinite;
  transition:border-color var(--t-mid),background var(--t-mid);
}
.scroll-cue:hover .scroll-cue-i{border-color:var(--line-hot);background:rgba(30,140,255,.08)}
.scroll-cue-i svg{width:13px;height:13px}
@keyframes cueDrop{
  0%,62%,100%{transform:translateY(0);opacity:.75}
  78%{transform:translateY(5px);opacity:1}
}
@media(prefers-reduced-motion:reduce){ .scroll-cue-i{animation:none} }
@media(max-width:560px){
  .scroll-cue{margin-top:var(--s-5);gap:7px}
  .scroll-cue-k{font-size:8.5px;letter-spacing:.2em}
  .scroll-cue-i{width:25px;height:25px}
}
/* One button now, so it should not stretch edge to edge like a form field. */
@media(max-width:560px){
  .hero-cta{margin-top:var(--s-5)}
  .hero-cta .btn{width:100%;max-width:340px;margin-inline:auto}
}

/* ---------- ACCESS KEY: scale by screen, not by container ----------
   The card holds its proportions; only the type inside it steps down. */
@media(max-width:900px){
  .acct-bp{max-width:none;padding:var(--s-5) var(--s-4)}
  .acct-bp-v{font-size:33px}
}
@media(max-width:560px){
  .acct-bp{padding:var(--s-4)}
  .acct-bp-v{font-size:28px;letter-spacing:.05em}
  .acct-bp-chip{width:30px;height:22px}
  .acct-bp-top{margin-bottom:var(--s-3)}
}
@media(max-width:380px){
  .acct-bp-v{font-size:25px}
}

/* ---------- JOURNEY HINT: one emphasis colour ----------
   The stressed words were bold white while the BP number beside them
   was blue, so a single sentence carried two different kinds of
   emphasis. Blue for all of it: the number sets the tone, and white
   bold on a dark panel reads heavier than it needs to. */
.jrn-hint b{
  color:var(--accent);
  font-weight:600;
}

/* ============================================================
   47. THE CREDENTIAL, FULL BLEED
   Capped, it left half the row empty. Full width it needs an
   internal composition or the number floats in a banner -- so on
   a desktop the card runs the row and splits inside: the number
   holds the left, the holder's details the right, divided by a
   rule rather than stacked. The phone keeps the stacked card it
   already has.
   ============================================================ */
.acct-bp-meta{display:flex;align-items:center;gap:9px;margin-left:auto;min-width:0}
.acct-prog{margin-left:0}
.acct-bp-meta .pill{
  position:relative;flex:0 0 auto;
  padding:4px 11px;font-size:8.5px;letter-spacing:.13em;
}

@media(min-width:901px){
  .acct-bp{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(230px,auto) 1fr;
    grid-template-areas:
      "top  top"
      "num  who"
      "note note";
    column-gap:var(--s-7);row-gap:var(--s-4);
    align-items:center;
    padding:var(--s-5) var(--s-6);
  }
  .acct-bp-top{grid-area:top;margin-bottom:0}
  .acct-bp-v-row{grid-area:num}
  /* A rule down the middle, not across -- the two halves are peers. */
  .acct-who{
    grid-area:who;margin-top:0;padding-top:0;border-top:none;
    border-left:1px solid rgba(255,255,255,.1);padding-left:var(--s-6);
    gap:11px;
  }
  .acct-who .acct-k{width:54px}
  .acct-who .acct-v{font-size:14.5px}
  .acct-bp-note{grid-area:note;margin-top:0}
  .acct-bp-v{font-size:44px}
}

/* ---------- CREDENTIAL HEADER ON A PHONE ----------
   Chip, label, programme and status will not sit on one 393px line --
   the programme badge was truncating to a couple of characters. The
   two badges drop to their own row instead, which also lets the
   programme name show in full. */
@media(max-width:620px){
  .acct-bp-top{flex-wrap:wrap;row-gap:11px}
  .acct-bp-k{white-space:nowrap}
  .acct-bp-meta{
    flex-basis:100%;margin-left:0;
    justify-content:flex-start;flex-wrap:wrap;
  }
  .acct-prog{max-width:none;margin-left:0}
}

/* On the narrowest phones the holder's details were truncating with an
   ellipsis. An email a member cannot read in full is useless on the one
   screen where they are checking it is correct -- let it wrap instead. */
@media(max-width:400px){
  .acct-who .acct-v{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.4}
  .acct-who .acct-row{align-items:flex-start}
  .acct-who .acct-k{padding-top:2px}
}