:root {
  --navy-950:#041427;
  --navy-900:#061b36;
  --navy-700:#183e6b;
  --navy-500:#2e5a93;
  --navy-100:#e9eff6;
  --paper:#fbfaf6;
  --cream:#f1ecdf;
  --white:#fff;
  --aqua:#58d6d0;
  --teal:#168b84;
  --blue:#0a8dcc;
  --gold:#f3b33c;
  --pink:#de4e91;
  --ink:#091c33;
  --muted:#657286;
  --line:rgba(6,27,54,.15);
  --line-strong:rgba(6,27,54,.26);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow:0 24px 70px rgba(6,27,54,.12);
}

* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { min-height:100%; margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }

.skip-link {
  position:fixed; z-index:100; left:18px; top:14px; padding:11px 15px;
  color:white; background:var(--navy-900); border-radius:999px;
  transform:translateY(-180%); transition:transform .2s ease;
}
.skip-link:focus { transform:none; }

.id-header {
  position:fixed; z-index:40; inset:0 0 auto; height:84px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(24px,4vw,64px); background:rgba(251,250,246,.94);
  border-bottom:1px solid var(--line); backdrop-filter:blur(18px);
}
.id-brand { width:174px; }
.id-brand img { display:block; width:100%; }
.header-actions { display:flex; align-items:center; gap:17px; color:var(--muted); font-size:13px; }
.login-button {
  min-height:44px; padding:0 21px; color:white; background:var(--navy-700);
  border:1px solid var(--navy-700); border-radius:999px; cursor:pointer;
  font-weight:600; box-shadow:0 6px 16px rgba(6,27,54,.17); transition:.2s ease;
}
.login-button:hover { background:var(--navy-900); transform:translateY(-1px); box-shadow:0 10px 23px rgba(6,27,54,.2); }

.auth-layout { min-height:100svh; display:grid; grid-template-columns:minmax(410px,41%) 1fr; padding-top:84px; }
.identity-story {
  position:sticky; top:84px; height:calc(100svh - 84px); min-height:680px;
  display:flex; flex-direction:column; overflow:hidden; padding:clamp(44px,5vw,78px);
  color:white; background:
    radial-gradient(circle at 77% 20%,rgba(88,214,208,.16),transparent 31%),
    linear-gradient(145deg,#04152a,#082b4c 70%,#0a395d);
  isolation:isolate;
}
.identity-story::before {
  content:""; position:absolute; inset:0; z-index:-2; opacity:.28;
  background-image:radial-gradient(circle,rgba(88,214,208,.62) .8px,transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(135deg,transparent 1%,black 39%,black 77%,transparent);
}
.identity-canvas { position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
.story-copy { position:relative; z-index:2; }
.eyebrow { margin:0 0 16px; color:var(--teal); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.identity-story .eyebrow { color:var(--aqua); }
.story-copy h1 { max-width:620px; margin:0; font:500 clamp(56px,5.6vw,90px)/.91 var(--serif); letter-spacing:-.055em; }
.story-copy > p:last-child { max-width:510px; margin:27px 0 0; color:rgba(255,255,255,.68); font-size:15px; line-height:1.72; }

.identity-map {
  position:relative; width:min(100%,500px); aspect-ratio:1.28; margin:auto;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.12));
}
.map-ring {
  position:absolute; border:1px solid rgba(88,214,208,.22); border-radius:50%;
  box-shadow:inset 0 0 34px rgba(88,214,208,.035),0 0 38px rgba(88,214,208,.035);
  animation:map-breathe 5.8s ease-in-out infinite;
}
.ring-one { inset:8% 7%; }
.ring-two { inset:11% 10%; animation-delay:-1.1s; }
.ring-three { inset:14% 13%; animation-delay:-2.2s; }
.ring-four { inset:16% 16%; animation-delay:-3.3s; }
.ring-five { inset:18% 19%; animation-delay:-4.4s; }
.map-core {
  position:absolute; z-index:3; left:50%; top:50%; width:104px; aspect-ratio:1;
  display:grid; place-items:center; border:1px solid rgba(88,214,208,.48);
  border-radius:50%; background:rgba(4,21,42,.73);
  box-shadow:0 0 0 13px rgba(88,214,208,.045),0 0 55px rgba(88,214,208,.22);
  transform:translate(-50%,-50%);
}
.map-core img { width:58%; filter:brightness(0) invert(1); }
.map-label {
  --hub-color:#a7eaff;
  --orbit-x:43%;
  --orbit-y:42%;
  --orbit-speed:27s;
  --orbit-delay:0s;
  --orbit-direction:normal;
  position:absolute; z-index:4; left:0; top:0; width:74px; aspect-ratio:1;
  display:grid; place-items:center; padding:8px; color:var(--hub-color);
  background:rgba(6,31,56,.9); border:1px solid color-mix(in srgb,var(--hub-color) 48%,transparent);
  border-radius:50%; backdrop-filter:blur(12px); font-size:10px; font-weight:700;
  letter-spacing:.02em; text-align:center;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--hub-color) 5%,transparent),0 12px 28px rgba(0,0,0,.18),0 0 24px color-mix(in srgb,var(--hub-color) 12%,transparent);
  offset-path:ellipse(var(--orbit-x) var(--orbit-y) at 50% 50%);
  offset-rotate:0deg;
  animation:hub-orbit var(--orbit-speed) linear var(--orbit-delay) infinite var(--orbit-direction);
  will-change:offset-distance;
}
.map-label::before {
  content:""; position:absolute; inset:7px; border:1px solid color-mix(in srgb,var(--hub-color) 20%,transparent);
  border-radius:50%;
}
.label-news {
  --hub-color:#a7eaff; --orbit-x:43%; --orbit-y:42%; --orbit-speed:34s; --orbit-delay:-4s;
}
.label-radio {
  --hub-color:#9ddfff; --orbit-x:40%; --orbit-y:39%; --orbit-speed:29s; --orbit-delay:-13s; --orbit-direction:reverse;
}
.label-jobs {
  --hub-color:var(--aqua); --orbit-x:37%; --orbit-y:36%; --orbit-speed:24s; --orbit-delay:-8s;
}
.label-rewards {
  --hub-color:#ffd576; --orbit-x:34%; --orbit-y:34%; --orbit-speed:31s; --orbit-delay:-21s; --orbit-direction:reverse;
}
.label-raffles {
  --hub-color:#f58bbd; --orbit-x:31%; --orbit-y:32%; --orbit-speed:21s; --orbit-delay:-15s;
}
.identity-map:hover .map-label { animation-play-state:paused; }
.story-footer { display:flex; justify-content:space-between; gap:12px; color:rgba(255,255,255,.48); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.onboarding-stage { min-width:0; background:var(--paper); }
.stage-inner { width:min(100%,960px); min-height:calc(100svh - 84px); margin:0 auto; padding:38px clamp(34px,6vw,92px) 78px; }
.stage-meta { min-height:58px; display:flex; align-items:flex-start; justify-content:space-between; gap:30px; margin-bottom:34px; }
.back-to-site { margin-left:auto; padding:7px 0; color:var(--muted); font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.progress-wrap { width:min(100%,470px); }
.progress-copy { display:flex; justify-content:space-between; margin-bottom:10px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.progress-name { color:var(--navy-700); }
.progress-track { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.progress-track i { height:4px; border-radius:999px; background:#e1dfd7; transition:background .28s ease; }
.progress-track i.is-complete { background:var(--navy-700); }

.flow-screen { animation:screen-in .34s cubic-bezier(.22,.61,.36,1); }
.flow-screen[hidden] { display:none; }
@keyframes screen-in { from{opacity:0;transform:translateY(11px)} to{opacity:1;transform:none} }
.screen-heading { max-width:770px; }
.screen-heading h2 { margin:0; font:500 clamp(50px,5.2vw,78px)/.96 var(--serif); letter-spacing:-.048em; }
.screen-heading > p:last-child { max-width:670px; margin:21px 0 0; color:var(--muted); font-size:16px; line-height:1.68; }
.screen-heading.compact h2 { font-size:clamp(46px,4.7vw,68px); }
.screen-heading.compact > p:last-child { margin-top:16px; }
.back-button {
  display:inline-flex; align-items:center; gap:9px; margin:0 0 28px; padding:0;
  color:var(--muted); background:transparent; border:0; cursor:pointer; font-size:13px; font-weight:600;
}
.back-button:hover { color:var(--navy-700); }
.back-button span { font-size:18px; }

.product-preview { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:40px 0; }
.product-preview article {
  min-height:108px; display:flex; align-items:center; gap:15px; padding:17px;
  background:white; border:1px solid var(--line); border-radius:13px;
  box-shadow:0 3px 14px rgba(6,27,54,.035); transition:.2s ease;
}
.product-preview article:hover { border-color:rgba(24,62,107,.35); transform:translateY(-2px); box-shadow:0 10px 25px rgba(6,27,54,.08); }
.product-mark {
  width:48px; aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto;
  border-radius:12px; color:white; background:var(--navy-700); font-size:12px; font-weight:700;
}
.product-mark.logo-mark {
  width:76px; height:48px; aspect-ratio:auto; padding:7px 8px;
  background:white; border:1px solid var(--line); border-radius:10px;
}
.product-mark.logo-mark img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.product-mark.logo-tcj { width:48px; padding:0; overflow:hidden; border:0; }
.product-mark.logo-tcj img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.product-mark.logo-rewards { padding:6px; }
.mark-radio { background:transparent; border-radius:0; }
.mark-radio img { display:block; width:44px; height:44px; object-fit:contain; }
.product-preview strong,.product-preview small { display:block; }
.product-preview strong { font:500 18px/1.1 var(--serif); }
.product-preview small { margin-top:5px; color:var(--muted); font-size:11px; }

.screen-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.auth-button {
  min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:22px;
  padding:0 24px; border:1px solid var(--navy-700); border-radius:999px; cursor:pointer;
  font-size:15px; font-weight:600; text-decoration:none; transition:.2s ease;
}
.auth-button span { font-size:18px; transition:transform .18s ease; }
.auth-button:hover span { transform:translateX(3px); }
.auth-button:hover { transform:translateY(-2px); box-shadow:0 10px 23px rgba(6,27,54,.18); }
.auth-button:active { transform:scale(.985); }
.auth-button.primary { color:white; background:var(--navy-700); box-shadow:0 6px 16px rgba(6,27,54,.18); }
.auth-button.primary:hover { background:var(--navy-900); }
.auth-button.secondary { color:var(--navy-900); background:white; border-color:var(--line-strong); }
.auth-button.secondary:hover { background:#f2f0e9; }
.text-button {
  min-height:48px; padding:0 15px; color:var(--navy-500); background:transparent;
  border:0; cursor:pointer; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:5px;
}

.method-stack { display:grid; gap:10px; max-width:670px; margin-top:35px; }
.method-button {
  min-height:58px; display:grid; grid-template-columns:35px 1fr 25px; align-items:center; gap:12px;
  padding:0 21px; color:var(--ink); background:white; border:1px solid var(--line-strong);
  border-radius:999px; cursor:pointer; font-size:15px; font-weight:600; text-align:left; transition:.2s ease;
}
.method-button:hover:not(:disabled) { border-color:var(--navy-700); background:var(--navy-100); transform:translateY(-1px); box-shadow:0 8px 20px rgba(6,27,54,.08); }
.method-button:disabled { cursor:not-allowed; opacity:.42; }
.method-button b { font-size:18px; font-weight:500; }
.method-icon { width:31px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; }
.method-icon svg { display:block; width:22px; height:22px; }
.apple-icon { color:#111; background:transparent; }
.apple-icon svg { width:18px; height:23px; }
.google-icon { background:transparent; }
.email-icon { color:var(--navy-700); background:transparent; font-size:22px; }
.or-divider { display:flex; align-items:center; gap:12px; color:#8a9098; font-size:11px; }
.or-divider::before,.or-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.consent-check { max-width:670px; display:flex; align-items:flex-start; gap:11px; margin-top:22px; color:var(--muted); font-size:12px; line-height:1.55; }
.consent-check input { width:18px; height:18px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--navy-700); }
.consent-check a { color:var(--navy-500); }
.method-hint { margin:9px 0 0; color:#8a9098; font-size:11px; }

.auth-form { max-width:760px; display:grid; gap:13px; margin-top:34px; }
.auth-form.narrow-form { max-width:620px; }
.auth-form label { color:var(--ink); font-size:13px; font-weight:600; }
.auth-form label > span { color:#a13a4d; }
.auth-form label small { color:var(--muted); font-weight:400; }
.auth-form input,.auth-form select {
  width:100%; min-height:56px; padding:0 16px; color:var(--ink); background:white;
  border:1px solid var(--line-strong); border-radius:12px; font-size:15px;
}
.auth-form input:focus,.auth-form select:focus { outline:2px solid var(--navy-500); outline-offset:1px; border-color:var(--navy-500); }
.auth-form .auth-button { width:max-content; min-width:220px; margin-top:14px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field-row > div { display:grid; gap:9px; }
.password-field { position:relative; }
.password-field input { padding-right:68px; }
.password-toggle { position:absolute; right:7px; top:7px; min-width:53px; height:42px; padding:0; color:var(--navy-500); background:transparent; border:0; cursor:pointer; font-size:12px; font-weight:600; }
.password-meter { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:2px; }
.password-meter i { height:4px; border-radius:999px; background:#ddd9cf; }
.password-meter[data-score="1"] i:nth-child(1) { background:#b54a3a; }
.password-meter[data-score="2"] i:nth-child(-n+2) { background:#c18a26; }
.password-meter[data-score="3"] i:nth-child(-n+3) { background:var(--blue); }
.password-meter[data-score="4"] i { background:var(--teal); }
.password-note,.field-note { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.form-error { min-height:18px; margin:0; color:#a13a4d; font-size:12px; font-weight:600; }
.phone-field { display:grid; grid-template-columns:auto 1fr; }
.country-code { min-height:56px; display:flex; align-items:center; padding:0 17px; color:var(--muted); background:#f0eee7; border:1px solid var(--line-strong); border-right:0; border-radius:12px 0 0 12px; font-size:14px; font-weight:600; }
.phone-field input { border-radius:0 12px 12px 0; }
.otp { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.otp input { min-width:0; height:68px; padding:0; text-align:center; font:500 26px/1 var(--serif); }
.login-form { max-width:600px; }
.login-methods { max-width:600px; }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
.login-options label { display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:500; }
.login-options input { width:17px; min-height:17px; accent-color:var(--navy-700); }
.login-options button {
  padding:0; color:var(--navy-500); background:transparent; border:0;
  cursor:pointer; font:600 12px/1.2 var(--sans); text-decoration:underline; text-underline-offset:4px;
}
.login-phone-switch {
  margin:22px 0 0; padding:0; color:var(--navy-500); background:transparent;
  border:0; cursor:pointer; font:600 13px/1.4 var(--sans); text-decoration:underline; text-underline-offset:5px;
}
.switch-flow { margin:24px 0 0; color:var(--muted); font-size:13px; }
.switch-flow button { padding:0; color:var(--navy-500); background:transparent; border:0; cursor:pointer; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.reset-confirmation {
  width:82px; aspect-ratio:1; display:grid; place-items:center; margin-bottom:26px;
  color:white; background:var(--navy-700); border-radius:50%;
  font:500 31px/1 var(--serif); box-shadow:0 0 0 12px var(--navy-100);
}

.option-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:35px; }
.optin-card {
  min-height:190px; display:flex; flex-direction:column; align-items:flex-start;
  padding:21px; background:white; border:1px solid var(--line); border-radius:14px;
}
.option-icon { width:42px; aspect-ratio:1; display:grid; place-items:center; color:white; background:var(--teal); border-radius:12px; font-weight:700; }
.optin-card > div { margin:auto 0 20px; }
.optin-card strong,.optin-card small { display:block; }
.optin-card strong { font:500 21px/1.05 var(--serif); }
.optin-card small { margin-top:6px; color:var(--muted); font-size:11px; }
.toggle { position:relative; width:49px; height:29px; border:0; border-radius:999px; background:#d9d7d0; cursor:pointer; transition:.2s ease; }
.toggle::after { content:""; position:absolute; left:3px; top:3px; width:23px; height:23px; background:white; border-radius:50%; box-shadow:0 2px 6px rgba(6,27,54,.2); transition:left .2s ease; }
.toggle.is-on { background:var(--teal); }
.toggle.is-on::after { left:23px; }

.interest-list { display:flex; flex-wrap:wrap; gap:10px; max-width:790px; margin-top:34px; }
.interest-list button {
  min-height:44px; padding:0 17px; color:var(--ink); background:white;
  border:1px solid var(--line-strong); border-radius:999px; cursor:pointer; font-size:13px; font-weight:600; transition:.18s ease;
}
.interest-list button:hover,.interest-list button.is-selected { color:var(--navy-900); background:var(--navy-100); border-color:var(--navy-500); transform:translateY(-1px); }
.interest-list button.is-selected::before { content:"✓"; margin-right:7px; color:var(--teal); }

.focus-screen {
  position:relative; min-height:650px; margin:-92px clamp(-92px,-6vw,-34px) -78px;
  padding:52px clamp(34px,6vw,92px) 68px; color:white; background:
    radial-gradient(circle at 85% 14%,rgba(88,214,208,.18),transparent 30%),
    var(--navy-900); overflow:hidden;
}
.focus-screen::after { content:""; position:absolute; right:-170px; bottom:-210px; width:500px; aspect-ratio:1; border:1px solid rgba(88,214,208,.14); border-radius:50%; box-shadow:0 0 0 70px rgba(88,214,208,.015),0 0 0 140px rgba(88,214,208,.01); }
.focus-screen .screen-heading,.focus-grid,.focus-screen .screen-actions,.focus-screen .back-button { position:relative; z-index:2; }
.focus-screen .eyebrow { color:var(--aqua); }
.focus-screen .screen-heading > p:last-child { color:rgba(255,255,255,.65); }
.back-button.light,.text-button.light { color:rgba(255,255,255,.67); }
.focus-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:34px; }
.focus-grid button {
  position:relative; min-height:220px; display:flex; flex-direction:column; align-items:flex-start;
  padding:23px; color:white; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.18);
  border-radius:15px; cursor:pointer; text-align:left; transition:.22s ease;
}
.focus-grid button:hover,.focus-grid button.is-selected { background:rgba(88,214,208,.1); border-color:var(--aqua); transform:translateY(-3px); }
.focus-grid button > span { color:var(--aqua); font-size:13px; font-weight:700; }
.focus-grid strong { margin:auto 0 8px; font:500 22px/1.05 var(--serif); }
.focus-grid small { color:rgba(255,255,255,.58); font-size:11px; line-height:1.5; }
.focus-grid i { position:absolute; right:17px; top:17px; width:24px; aspect-ratio:1; display:grid; place-items:center; color:var(--navy-900); background:var(--aqua); border-radius:50%; font-style:normal; opacity:0; }
.focus-grid button.is-selected i { opacity:1; }
.light-primary { color:var(--navy-900); background:var(--aqua); border-color:var(--aqua); box-shadow:0 7px 19px rgba(0,0,0,.18); }
.light-primary:hover { background:white; border-color:white; }

.centered-screen { min-height:650px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.centered-screen .screen-heading { max-width:690px; }
.centered-screen .screen-heading > p:last-child { margin-inline:auto; }
.notification-mark {
  position:relative; width:112px; aspect-ratio:1; display:grid; place-items:center; margin-bottom:32px;
  color:var(--navy-700); background:var(--navy-100); border-radius:50%;
}
.notification-mark::before { content:""; width:37px; height:43px; border:3px solid currentColor; border-radius:20px 20px 12px 12px; }
.notification-mark::after { content:""; position:absolute; bottom:30px; width:13px; height:5px; background:currentColor; border-radius:999px; }
.notification-mark span { position:absolute; inset:-12px; border:1px solid rgba(46,90,147,.18); border-radius:50%; animation:ring-pulse 2.5s ease-out infinite; }
.centered-actions { justify-content:center; }

.success-screen {
  min-height:650px; margin:-92px clamp(-92px,-6vw,-34px) -78px;
  padding:60px clamp(34px,6vw,92px); color:white; background:
    radial-gradient(circle at 80% 18%,rgba(88,214,208,.17),transparent 33%),
    var(--navy-900);
}
.success-screen .eyebrow { color:var(--aqua); }
.success-screen .screen-heading > p:last-child { color:rgba(255,255,255,.65); }
.success-mark { width:108px; aspect-ratio:1; display:grid; place-items:center; margin-bottom:29px; color:var(--navy-900); background:var(--aqua); border-radius:50%; font-size:43px; animation:pop .42s cubic-bezier(.2,.8,.3,1.2); }
.success-reward { width:min(100%,590px); display:flex; justify-content:space-between; gap:20px; margin:33px auto 23px; padding:18px 21px; color:var(--navy-900); background:#f7eccf; border:1px solid rgba(243,179,60,.4); border-radius:13px; font-size:14px; }
.success-reward strong { color:#956007; }
.home-return { margin-top:8px; }

@keyframes hub-orbit { to{offset-distance:100%} }
@keyframes map-breathe {
  0%,100% { opacity:.48; transform:scale(.985); }
  50% { opacity:1; transform:scale(1.015); }
}
@keyframes ring-pulse { 0%{transform:scale(.76);opacity:.8} 85%,100%{transform:scale(1.25);opacity:0} }
@keyframes pop { from{transform:scale(.62);opacity:0} to{transform:none;opacity:1} }

@media(max-width:1100px) {
  .auth-layout { grid-template-columns:340px 1fr; }
  .identity-story { padding:42px 30px; }
  .story-copy h1 { font-size:57px; }
  .story-copy > p:last-child { font-size:13px; }
  .stage-inner { padding-inline:42px; }
  .focus-screen,.success-screen { margin-inline:-42px; padding-inline:42px; }
  .option-grid,.focus-grid { grid-template-columns:1fr; }
  .optin-card { min-height:110px; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:14px; }
  .optin-card > div { margin:0; }
  .focus-grid button { min-height:150px; }
}

@media(max-width:780px) {
  .id-header { height:72px; }
  .id-brand { width:148px; }
  .header-actions span { display:none; }
  .login-button { min-height:42px; padding-inline:17px; }
  .auth-layout { display:block; padding-top:72px; }
  .identity-story { display:none; }
  .story-footer { margin-top:20px; }
  .stage-inner { min-height:auto; padding:31px 22px 70px; }
  .stage-meta { margin-bottom:29px; }
  .back-to-site { display:none; }
  .progress-wrap { width:100%; }
  .screen-heading h2,.screen-heading.compact h2 { font-size:clamp(43px,12vw,61px); }
  .product-preview,.field-row { grid-template-columns:1fr; }
  .auth-form .auth-button { width:100%; }
  .option-grid { grid-template-columns:1fr; }
  .focus-screen,.success-screen { min-height:720px; margin:-89px -22px -70px; padding:48px 22px 58px; }
}

@media(max-width:520px) {
  .identity-story { min-height:0; padding:40px 22px 28px; }
  .story-copy h1 { font-size:52px; }
  .story-footer { display:grid; }
  .stage-meta { min-height:44px; }
  .progress-copy { font-size:9px; }
  .screen-actions { align-items:stretch; flex-direction:column; }
  .auth-button { width:100%; }
  .product-preview article { min-height:95px; }
  .otp { gap:5px; }
  .otp input { height:59px; }
  .phone-field { grid-template-columns:1fr; }
  .country-code { border-right:1px solid var(--line-strong); border-bottom:0; border-radius:12px 12px 0 0; }
  .phone-field input { border-radius:0 0 12px 12px; }
  .login-options { align-items:flex-start; flex-direction:column; gap:10px; }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}