/* Qikink — onboarding handoff · qikink.css
   Built by tools/handoff-css.py from the design system page. Part 1 is its :root token block,
   verbatim. Part 2 is its component rules, copied by selector, so markup pasted from
   design-system.html behaves identically here. Part 3 is page layout only, on the same tokens.
   Edit the design system, run the build; do not edit parts 1 and 2 here. */

:root{
  /* ---- Motion, tokenised ---- */
  --ease-move:cubic-bezier(.2,.7,.4,1);      /* enter, exit, state change */
  --ease-land:cubic-bezier(.2,1.5,.4,1);     /* lands with weight; overshoots 18% */
  --ease-travel:cubic-bezier(.3,.6,.3,1);    /* long single passes: loader, progress */
  --dur-fast:140ms;      /* hover, focus, option select */
  --dur-move:300ms;      /* screen in / screen out, toast in / out */
  --dur-tick:360ms;      /* ring fill */
  --dur-draw:300ms;      /* check draw-on */
  --dur-pop:320ms;       /* margin figure recalculation */
  --dur-progress:400ms;  /* progress bar, per step */
  --dur-hold:260ms;      /* pause after a selection, before advancing */
  --dur-toast:2400ms;    /* toast dwell */
  --dur-shimmer:1500ms;  /* skeleton sweep */
  --dur-loader:3200ms;   /* print-sweep loop */
  --dur-spin:800ms;      /* spinner, one speed everywhere */
  --stagger:610ms;       /* gap between consecutive step rows — all three land before the print completes */

  /* ---- Brand ramps — unchanged from v1 ---- */
  --o-50:#FFF4EC; --o-100:#FFE3D0; --o-200:#FFC5A1; --o-300:#FF9E63;
  --o-400:#FF8330; --o-500:#FF6700; --o-600:#C25100; --o-700:#9C4100; --o-800:#7A3300;
  --n-50:#EDF2F7; --n-100:#D6E1EC; --n-200:#A9C0D6; --n-300:#6E93B5;
  --n-400:#3C6890; --n-500:#0D3B66; --n-600:#0A2F52; --n-700:#08243F; --n-800:#05182A;
  /* ---- The orange rule, direction D (8 Sep 2026, decisions/0009). ----
     --o-500 #FF6700 is used ONCE per screen: the primary button, with ink #0F2036 text (5.62:1),
     plus the logo. Never a field, never a border, never a tag, never text.
     --o-600 #C25100 (the 5 Sep "action orange") draws the hover boundary on an option card.
     --o-700 #9C4100 is the link colour. --o-surface never existed in this file. ---- */
  /* ---- Neutrals — unchanged from v1 ---- */
  --ink:#0F2036; --text:#1B3049; --text-2:#5A6B7D; --text-3:#8494A3;
  --line:#E3E7ED; --line-2:#EFF2F5; --surface:#FFFFFF; --canvas:#F7F8FA; --cream:#FFFCF3;
  /* ---- Semantic — unchanged from v1 ---- */
  --ok:#0E7A43; --ok-bg:#E7F4ED; --warn:#9A5B00; --warn-bg:#FDF3E3; --warn-line:#F1DDB5;
  --err:#C0271F; --err-bg:#FCECEA; --err-dark:#9E1F19; --err-line:#F3C8C4; --info:#0D3B66; --info-bg:#EDF2F7;
  /* ---- Secondary brand (illustration and marketing only) ---- */
  --s-apricot:#EE964B; --s-gold:#F4D35E; --s-sand:#FAF0CA;
  /* ---- Space — 4px base, unchanged from v1 ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;
  /* ---- Breakpoints — mobile-first, min-width only. See §04A. ---- */
  --bp-sm:480px;   /* phone → large phone */
  --bp-md:768px;   /* split panels collapse; display type steps down */
  --bp-lg:1024px;  /* dashboard sidebar appears */
  --bp-xl:1280px;  /* container stops growing */
  /* ---- The one dimension the accessibility floor fixes. See §15. ---- */
  --target-min:44px;
  /* ---- Control stroke — direction D, 8 Sep 2026. One weight, one colour, on every control and card. ---- */
  --ctl-stroke:1px solid var(--n-300);        /* #6E93B5 · 3.23:1 on white, 3.15:1 on cream */
  --ctl-stroke-hover:1px solid var(--ink);    /* hover on anything selectable */
  --ctl-stroke-dash:1px dashed var(--n-300);  /* the escape option, the empty state, the gated metric */
  /* ---- Display ramp — direction D, 8 Sep 2026. Bricolage 700, mixed case. Desktop / phone (steps at --bp-md). See §03, §04A. ---- */
  --disp-hero:44px;  --disp-hero-m:30px;
  --disp-title:30px; --disp-title-m:24px;
  --disp-q:26px;     --disp-q-m:22px;
  --disp-card:15px;  --disp-card-m:15px;
  /* ---- Text ramp — Inter, stepped down 11 Sep 2026. One token per level; screens never type a size. ---- */
  --t-lead:15px; --t-body:14px; --t-small:12px; --t-label:11.5px; --t-micro:10.5px; --t-btn:14px; --t-btn-s:13px;
  /* ---- Page rhythm — "breathing room", decision 0013 (17 Sep 2026). The scale above is unchanged; these name where each step is used. ---- */
  --gap-mod-home:40px; --gap-mod-flow:32px; --gap-grid:16px;
  --pad-card-y:22px; --pad-card-x:24px; --pad-row-y:14px; --pad-row-x:20px;
  --pad-page-y:48px; --pad-page-x:56px; --pad-page-y-m:28px; --pad-page-x-m:20px;
  /* ---- The two values that were typed by hand on screens until 21 Sep 2026 ---- */
  --btn-ink:#12100E;                 /* label on the orange button · Figma: Ink/Button label */
  --scrim:rgba(15,32,54,.75);        /* foot of the photo gradient under the brand line */
  /* ---- Garment swatches — specimens of product colour, not interface colour · Figma: Swatch ---- */
  --sw-black:#161616; --sw-white:#F4F1EA; --sw-navy:#1F2F4A; --sw-grey:#9AA0A6; --sw-olive:#6B6F3E; --sw-sand:#D9C7A7; --sw-red:#B3382C; --sw-sky:#9CC3E0;
  /* ---- Radius — direction D. Cards and controls agree at 8px; badges are pills; media is square. ---- */
  --r-pill:999px;          /* badges only */
  --r-ctl:8px;             /* buttons, inputs, selects, chips — was pill 6–7 Sep, 4px on 5 Sep */
  --r-card:8px;            /* cards, panels, sheets, toasts, modals — was 4px 6–7 Sep, 6px on 5 Sep */
  --r-media:0px;           /* photography, thumbnails, avatars, skeletons */
  --r-badge:var(--r-pill); /* status badges */
  --r-check:4px;           /* checkbox */
  --r-radio:50%;           /* radio */
  /* ---- Elevation — none. Direction D has no shadow anywhere; the three tokens resolve to none so nothing that referenced them breaks. ---- */
  --e1:none;
  --e2:none;
  --e3:none;
  /* ---- Motion ---- */
  --fast:140ms cubic-bezier(.2,.7,.4,1);
  --base:220ms cubic-bezier(.2,.7,.4,1);
  /* ---- Focus ---- */
  --focus-ring:2px solid var(--n-500);
  /* ---- Faces. Swapping --font-display is the whole font decision. ---- */
  --font-display:'Bricolage Grotesque','Noto Sans Devanagari',Georgia,serif;
  --font-ui:Inter,'Noto Sans Devanagari','Noto Sans Tamil','Noto Sans Telugu','Noto Sans Bengali','Noto Sans Gujarati','Noto Sans Kannada','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Oriya',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* ---- Retired 8 Sep 2026 (the print-shop layer, decisions/0008 superseded by 0009): --stroke, --stroke-dash,
     --shadow-press, --shadow-press-hover, --shadow-press-ink, --shadow-sticker, --shadow-sticker-ink, --press-shift,
     --halftone-cell, --halftone-r, --halftone-opacity, --ticker-h, --dur-ticker, --dur-press, --dur-land,
     --tilt-min, --tilt-max. Listed with their last values in §04. Nothing below references them. ---- */
}

/* ─── part 2 · the design system's own rules ─── */
.disp{font-family:var(--font-display);font-weight:700; text-transform:none;letter-spacing:-.03em;line-height:1.02}
.photo{position:relative;overflow:hidden;background:var(--n-500)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.t-d1{font-size:var(--disp-hero)}
.t-d2{font-size:var(--disp-title)}
.t-d3{font-size:var(--disp-q)}
.t-d4{font-size:var(--disp-card)}
.t-h1{font-weight:700;font-size:var(--disp-q-m);line-height:1.15;letter-spacing:-.018em}
.t-h2{font-weight:700;font-size:var(--t-lead);line-height:1.2;letter-spacing:-.015em}
.t-h3{font-weight:700;font-size:var(--t-lead);line-height:1.25;letter-spacing:-.01em}
.t-bodyL{font-size:var(--t-lead);line-height:1.55}
.t-body{font-size:var(--t-body);line-height:1.55}
.t-sm{font-size:var(--t-small);line-height:1.45}
.t-cap{font-size:var(--t-label);line-height:1.35;color:var(--text-2)}
.t-micro{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.btn{font:700 var(--t-body)/1 var(--font-ui);border-radius:var(--r-ctl);padding:13px var(--s5);border:1px solid transparent; cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);white-space:nowrap; text-decoration:none;box-shadow:none; transition:background var(--fast),border-color var(--fast),color var(--fast)}
.btn:focus-visible, .btn.is-focus{outline:var(--focus-ring);outline-offset:2px}
.btn-primary{background:var(--o-500);color:var(--ink);border-color:var(--o-500)}
.btn-primary:hover, .btn-primary.is-hover{background:var(--o-400);border-color:var(--o-400)}
.btn-primary:active, .btn-primary.is-active{background:var(--o-300);border-color:var(--o-300)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--n-300)}
.btn-secondary:hover, .btn-secondary.is-hover{border-color:var(--ink)}
.btn-secondary:active, .btn-secondary.is-active{background:var(--n-50);border-color:var(--ink)}
.btn-tertiary{background:transparent;color:var(--o-700);padding-left:10px;padding-right:10px;border-color:transparent}
.btn-tertiary:hover, .btn-tertiary.is-hover{background:var(--n-50);text-decoration:underline}
.btn-tertiary:active, .btn-tertiary.is-active{background:var(--n-100)}
.btn[disabled], .btn.is-disabled{background:var(--n-100);color:var(--text-3);border-color:var(--n-100);cursor:not-allowed}
.btn.is-loading{background:var(--o-500);color:var(--ink);border-color:var(--o-500);cursor:progress}
.btn-block{width:100%}
.field{max-width:340px}
.field + .field{margin-top:var(--s5)}
.field label, .lbl{display:block;font-size:var(--t-small);font-weight:700;color:var(--ink);margin-bottom:6px}
.inp{width:100%;padding:var(--s3) 14px;border:var(--ctl-stroke);border-radius:var(--r-ctl); font:400 var(--t-body) var(--font-ui);color:var(--ink);background:var(--surface); transition:border-color var(--fast),box-shadow var(--fast)}
.inp::placeholder{color:var(--text-3)}
.inp:focus{outline:none;border-color:var(--n-500);box-shadow:0 0 0 3px var(--n-100)}
.inp:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.inp.is-focus{border-color:var(--n-500);box-shadow:0 0 0 3px var(--n-100)}
.inp.is-filled{border-color:var(--n-300)}
.inp.is-err{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.inp[disabled]{background:var(--n-50);color:var(--text-3);border-color:var(--n-300);cursor:not-allowed}
.otp6{display:flex;gap:var(--s2)}
.otp6c{flex:1 1 0;min-width:0;height:54px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:var(--ctl-stroke);border-radius:var(--r-ctl);font:700 var(--disp-q-m) var(--font-display);font-style:normal;letter-spacing:-0.018em;color:var(--ink);box-sizing:border-box}
.otp6c.is-focus{border-color:var(--n-500);outline:var(--focus-ring);outline-offset:2px}
.otp6c.is-err{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.otp6c.is-dis{background:var(--n-50);color:var(--text-3)}
.help{font-size:var(--t-label);color:var(--text-2);margin-top:6px}
.help.err{color:var(--err);font-weight:600;display:flex;gap:6px;align-items:flex-start}
.box{width:20px;height:20px;flex:0 0 20px;border:var(--ctl-stroke);border-radius:var(--r-check);background:var(--surface); display:grid;place-items:center;margin-top:1px}
.box.on{background:var(--n-500);border-color:var(--n-500)}
.box.on svg{display:block}
.box svg{display:none}
.box.is-focus{outline:var(--focus-ring);outline-offset:2px}
.box.is-disabled{background:var(--n-50);border-color:var(--n-300)}
.optrow{border:var(--ctl-stroke);background:var(--surface);border-radius:var(--r-card); padding:14px 18px;min-height:48px;display:flex;flex-direction:column;justify-content:center; align-items:flex-start;text-align:left;cursor:pointer;position:relative; transition:background var(--fast),border-color var(--fast),color var(--fast)}
.optrow b{font-size:var(--t-body);font-weight:700;color:var(--ink);line-height:1.35;display:block;padding-right:28px}
.optrow span{font-size:var(--t-small);color:var(--text-2);line-height:1.4;margin-top:2px;display:block;padding-right:28px}
.optrow:hover{border-color:var(--ink)}
.optrow.sel{background:var(--n-500);border-color:var(--n-500)}
.optrow.sel b, .optrow.sel span{color:var(--cream)}
.optrow .chk{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px; stroke:var(--cream);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:none}
.optrow.sel .chk{display:block}
.optrow.is-focus{outline:var(--focus-ring);outline-offset:2px}
.optrow.optout{border-style:dashed}
.optrow.optout b{font-weight:600;color:var(--text)}
.optrow.is-disabled{background:var(--n-50);border-color:var(--n-300);cursor:not-allowed}
.optrow.is-disabled b{color:var(--text-3)}
.optrow.centered{align-items:center;text-align:center}
.optrow.centered b, .optrow.centered span{padding-right:0}
.optcard{border:var(--ctl-stroke);background:var(--surface);border-radius:var(--r-card);padding:13px var(--s4); display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;min-height:66px; transition:background var(--fast),border-color var(--fast)}
.optcard:hover{border-color:var(--ink)}
.optcard.sel{background:var(--n-500);border-color:var(--n-500)}
.optcard .art{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center}
.optcard .art svg{width:40px;height:40px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.optcard.sel .art svg{stroke:var(--cream)}
.optcard b{font-size:var(--t-body);font-weight:700;color:var(--ink);line-height:1.3;display:block;min-width:0}
.optcard.sel b{color:var(--cream)}
.optcard .chk{margin-left:auto;width:18px;height:18px;flex:0 0 18px;stroke:var(--cream);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:none}
.optcard.sel .chk{display:block}
.optcard.optout{border-style:dashed}
.optcard.optout b{font-weight:600;color:var(--text)}
.optcard.is-focus{outline:var(--focus-ring);outline-offset:2px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-micro);font-weight:700;letter-spacing:.05em; text-transform:uppercase;padding:var(--s1) 9px;border-radius:var(--r-badge);white-space:nowrap}
.badge svg{flex:0 0 auto}
.backlink{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-small);font-weight:600;color:var(--text-2); text-decoration:none;padding:6px var(--s2);margin-left:-8px;border-radius:var(--r-ctl)}
.backlink:hover{color:var(--ink);background:var(--n-50)}
.backlink:focus-visible{outline:var(--focus-ring);outline-offset:2px}
@media(max-width:767px){
.t-d1{font-size:var(--disp-hero-m)}
.t-d2{font-size:var(--disp-title-m)}
.t-d3{font-size:var(--disp-q-m)}
.t-d4{font-size:var(--disp-card-m)}
}

/* ─── page layout · the only rules not in the design system stylesheet · tokens only ─── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--font-ui);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--o-700)}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.disp{color:var(--ink);text-wrap:balance;margin:0 0 var(--s3)}
.lead{font-size:var(--t-body);color:var(--text-2);margin:0 0 var(--s5)}
.small{font-size:var(--t-small);color:var(--text-2)}
.fine{font-size:var(--t-label);line-height:1.5;color:var(--text-2);margin:var(--s3) 0 0}
.stepline{display:block;height:var(--s5);line-height:var(--s5);font-family:var(--font-display);font-weight:700;font-size:var(--t-body);color:var(--text-2);margin:6px 0 var(--s2)}
.field{max-width:none}
.inp:not(:focus):not(.is-err){border-color:var(--n-300)}
.btn-block{min-height:var(--target-min)}
.btn-primary.is-loading{color:transparent;position:relative}
.btn-primary.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--ink);border-right-color:transparent;border-radius:var(--r-radio);animation:spin var(--dur-spin) linear infinite}
.btn-secondary svg{width:18px;height:18px;flex:0 0 18px}
.divider{display:flex;align-items:center;gap:var(--s3);margin:var(--s1) 0 14px;color:var(--text-2);font-size:var(--t-micro);font-weight:700;letter-spacing:.12em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--n-300)}
.help.ok{color:var(--ok);font-weight:600;display:flex;gap:6px;align-items:flex-start}
.help svg{width:14px;height:14px;flex:0 0 14px;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.chkrow{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s3);cursor:pointer;font-size:var(--t-small);line-height:1.45;color:var(--text)}
.chkrow input{position:absolute;opacity:0;width:1px;height:1px}
.chkrow input:focus-visible + .box{outline:var(--focus-ring);outline-offset:2px}
.chkrow .box svg{width:14px;height:14px;stroke:var(--cream);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.otp6 input.otp6c{padding:0;text-align:center;caret-color:var(--n-500)}
.otp6 input.otp6c:focus{outline:var(--focus-ring);outline-offset:2px;border-color:var(--n-500)}
.otp6.is-err .otp6c{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.otp6.is-dis .otp6c{background:var(--n-50);color:var(--text-3)}
.resend{font-size:var(--t-small);color:var(--text-2);margin:14px 0 0}
.resend b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.signin{font-size:var(--t-small);color:var(--text-2);margin:var(--s4) 0 0}
.signin a{font-weight:700;text-decoration:none}
/* the pre-auth split: photograph beside the pane above --bp-md, a banner above it below */
.split{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream)}
.split .photo{height:150px;flex-shrink:0}                       /* the phone banner; design system §01A: 150px */
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,32,54,0) 40%,var(--scrim) 100%)}
.photo .brand{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s4);z-index:1;font-family:var(--font-display);font-weight:700;font-size:var(--disp-q-m);line-height:1.1;letter-spacing:-0.03em;color:var(--cream)}
.photo.quiet::after,.photo.quiet .brand{display:none}
.pane{display:flex;flex-direction:column;flex:1;min-width:0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);min-height:var(--target-min)}
.bar .logo{height:20px;width:auto}
.pane-body{padding:var(--s5) var(--s4) var(--s6)}
.desk-only{display:none}
.options{display:grid;grid-template-columns:1fr;gap:var(--s2);margin:0;padding:0;list-style:none}
.options > *{min-width:0}
.options .optcard,.options .optrow{width:100%}
.options .optout{grid-column:1 / -1}
.options .wide{grid-column:1 / -1}
.skip{display:flex;justify-content:center;margin-top:10px}
.step-view{animation:enter var(--dur-move) var(--ease-move) both}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .step-view{animation:none} }
@media (min-width:768px){
  .split{flex-direction:row}
  .split .photo{width:45%;height:auto;min-height:100vh;min-height:100dvh}
  .split.question .photo{width:340px;flex-shrink:0}                /* design system: the 340px photo column */
  .photo .brand{left:36px;right:36px;bottom:var(--s7);font-size:var(--disp-title-m)}
  .photo::after{background:linear-gradient(180deg,rgba(15,32,54,0) 46%,var(--scrim) 100%)}
  .bar{display:none}
  .desk-only{display:block}
  .pane{position:relative;justify-content:center}
  .pane .logo-desk{position:absolute;top:34px;left:64px;height:24px;width:auto}
  .pane-body{padding:var(--s8) 64px;max-width:540px;width:100%}
  .split.question .pane{justify-content:flex-start}
  .split.question .pane .logo-desk{left:44px}
  .split.question .pane-body{padding:112px 44px var(--s8);max-width:none}
  .lead{font-size:var(--t-lead);max-width:42ch;margin-bottom:26px}
  .disp.t-d3{min-height:70px;margin:0 0 22px}
  .options{gap:10px}
  .options.two{grid-template-columns:repeat(2,minmax(0,1fr))}
}