/* ------------------------------------------------------------------
   Skyfare claim funnel v6 = Concept G, live (approved design, 16 Oct 2026).
   The look is G's, unchanged; the logic in claim.js talks to the real
   backend (see the header of claim.js). The old v5 funnel is kept in
   _prev-v5/.
   - Desktop: sidebar with the live pass, slim rating bar in the header.
   - Phone: 56px header (full logo + ticket chip), 3px progress line,
     pinned CTA, the "up to £520" hook first.
   - Documents: per-passenger cards, 3-screen drawer (pick -> guide -> upload).
   Spacing is on an 8px grid. Two radii: 16px containers, 8px controls.
   Colour: one accent blue; mint/green only for success and amounts;
   red only for form errors.
------------------------------------------------------------------- */
:root{
  --ink:#01133A;--navy:#012C55;--ocean:#023667;--blue:#0A70C0;--blue-h:#085FA6;--blue-p:#064E8A;--blue-tint:#EEF5FC;
  --mint:#58E8CF;--star:#13CCA2;--text:#2F3C57;--muted:#5F6C85;--faint:#8C97AB;
  --rule:rgba(1,19,58,.12);--edge:#C3CFDD;--edge-h:#8FA1B8;
  --tile:#F4F7FB;--tile-2:#E9F0FA;--logo:#0B2A6B;
  --ok:#0B7A55;--ok-bg:#E3F8F0;--bad:#B42318;--red:#C8463D;--line2:#D3DEEA;
  --r:16px;--rs:8px;
  --f:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --side:min(31vw,440px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:400 15px/23px var(--f);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
button,input,select{font:inherit;color:inherit} button{cursor:pointer} a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0} p,h1,h2,h3{margin:0} [hidden]{display:none!important}
img{display:block;max-width:100%}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{display:inline-block;flex:none;vertical-align:middle}

/* ---------- Logo (exactly the existing funnel's) ---------- */
.ts{display:none}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 27px/1 var(--f);letter-spacing:-.04em;color:var(--logo);text-decoration:none}

/* ---------- Rating + trust ---------- */
.stars{display:inline-flex;gap:2px;color:var(--star)}
.rate{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rate b{font-weight:600;color:var(--ink)}

/* ---------- Sidebar ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--tile);overflow:hidden;display:flex;flex-direction:column;padding:48px 48px 0 56px;isolation:isolate;z-index:2}
.art{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:min(60%,600px);background:url("side-art.webp") center bottom/100% 100% no-repeat;pointer-events:none}
.side__t{position:relative;z-index:1;margin-top:auto;padding:0 0 56px;color:#fff}
.side__t b{display:block;margin-bottom:8px;font:600 14px/22px var(--f);text-shadow:0 1px 10px rgba(1,30,70,.35)}
.side__t li{display:flex;align-items:center;gap:8px;padding:4px 0;font:500 14px/20px var(--f);text-shadow:0 1px 10px rgba(1,30,70,.35)}
.side__t svg{color:var(--mint)}
.sprog{margin-top:40px}
.sprog ol{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sprog li{display:flex;flex-direction:column;gap:8px;font:500 12px/16px var(--f);color:var(--faint);transition:color .3s var(--ease)}
.sprog li i{display:block;height:3px;border-radius:2px;background:var(--tile-2);overflow:hidden;position:relative}
.sprog li i::after{content:"";position:absolute;inset:0;width:0;background:var(--blue);border-radius:2px;transition:width .5s var(--ease)}
.sprog li.p-on{color:var(--ink)} .sprog li.p-on i::after{width:50%}
.sprog li.p-done{color:var(--text)} .sprog li.p-done i::after{width:100%;background:var(--star)}
.passhost{margin-top:24px}

/* ---------- The pass: calm, fewer fields ---------- */
.pass{--nb:var(--tile);position:relative}
.face{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);box-shadow:0 1px 2px rgba(1,19,58,.06),0 16px 40px -16px rgba(1,40,79,.22);overflow:hidden;position:relative}
.phd{position:relative;padding:16px 20px 20px;color:#fff;background:var(--ocean) url(img/grad/smooth-deep.webp) 85% 85%/cover no-repeat}
.phd-top{display:flex;align-items:center;justify-content:space-between;height:24px;margin-bottom:16px}
.phd-lbl{font:600 11px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.phd-air{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--f);font-variant-numeric:tabular-nums}
.phd-air .alg{width:24px;height:24px;border-radius:6px}
.rt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.ap b{display:flex;align-items:center;gap:8px;white-space:nowrap;font:600 32px/1 var(--f);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ap .flg{width:20px;height:15px;border-radius:2px;background:center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.3);flex:none}
.ap .flg:not([style]){display:none}
.ap small{display:block;margin-top:8px;font:400 12px/16px var(--f);opacity:.8;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap.r{text-align:right} .ap.r b{justify-content:flex-end} .ap.r small{margin-left:auto}
.ap .is-empty{opacity:.45;letter-spacing:.04em} .ap b .is-empty{font-size:22px}
.path{position:relative;height:24px;display:flex;align-items:center;justify-content:center}
.path::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed rgba(255,255,255,.4)}
.path span{position:relative;display:grid;place-items:center;padding:0 6px;color:#fff}
.pbd{padding:16px 20px 0}
.grid3{display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:8px 16px}
.cell{min-width:0}
.cell small{display:block;margin-bottom:4px;font:600 10.5px/14px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cell b{display:block;font:600 14px/20px var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cell b.is-empty,.amtv.is-empty{color:#BAC4D3;font-weight:500;letter-spacing:.08em}
.stat{display:flex;align-items:center;margin-top:16px;min-height:28px}
.stamp{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1.5px dashed #CBD5E1;border-radius:6px;font:600 11px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:#AEB9C9;white-space:nowrap}
.stamp.red{border-style:solid;color:var(--red);border-color:var(--red)}
.stamp.grey{border-style:solid;color:var(--muted);border-color:#B3C0D0}
.stamp.blue{border-style:solid;color:var(--blue);border-color:var(--blue)}
.perf{position:relative;height:24px;flex:none;margin-top:8px}
.perf::before{content:"";position:absolute;left:16px;right:16px;top:50%;border-top:1.5px dashed var(--line2)}
.perf i{position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:var(--nb)}
.perf i:first-child{left:-10px}.perf i:last-child{right:-10px}
.stub{padding:0 20px 20px}
.stub small{display:block;font:500 12px/16px var(--f);color:var(--muted)}
.amtv{display:block;margin:4px 0;font:600 32px/1.15 var(--f);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.amts{font:400 12px/16px var(--f);color:var(--muted);min-height:16px;font-variant-numeric:tabular-nums}
.flash{animation:flash 1.1s ease}
@keyframes flash{0%{background-color:rgba(88,232,207,.45)}100%{background-color:rgba(88,232,207,0)}}

/* airline logos (shared square tiles) */
.alg{display:block;flex:none;width:40px;height:40px;border-radius:8px;object-fit:cover}
.alg--t{display:grid;place-items:center;background:var(--blue-tint);color:var(--ink);font:700 12px/1 var(--f);letter-spacing:.02em}

/* ---------- Main column ---------- */
.main{margin-left:var(--side);min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;gap:24px;height:64px;padding:0 max(48px,calc((100% - 960px)/2))}
.tbar{display:flex;align-items:center;gap:16px;font:500 13px/20px var(--f);color:var(--text);white-space:nowrap;min-width:0}
.tbar>i{flex:none;width:1px;height:16px;background:var(--rule)}
.tbar b{font-weight:600;color:var(--ink)}
body.is-check .tbar .tb-up{display:none}
.loc{position:relative;display:inline-flex;align-items:center;gap:8px;font:500 14px/20px var(--f);color:var(--ink)}
.loc__b{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 10px;border:0;border-radius:9px;background:none;font:500 14px/20px var(--f);color:var(--ink);cursor:pointer}
.loc__b:hover{background:var(--tint,#eef3fa)} .loc__b .ico{color:var(--muted,#64748b)}
.langmenu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:186px;margin:0;padding:6px;list-style:none;border-radius:12px;background:#fff;box-shadow:0 10px 32px rgba(10,22,48,.16),0 0 0 1px rgba(10,22,48,.07)}
.langmenu[hidden]{display:none}
.langmenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:none;font:500 15px/20px var(--f);color:var(--ink);text-align:left;cursor:pointer}
.langmenu button:hover{background:var(--tint,#eef3fa)}
.langmenu [aria-selected="true"] button{color:var(--blue,#1565d8)}
.langmenu .flag{flex:none}
.flag{display:inline-block;width:20px;height:15px;border-radius:2px;background:center/cover;box-shadow:inset 0 0 0 1px rgba(1,19,58,.1)}
.wrap{flex:1;width:min(960px,100% - 96px);margin:24px auto 0;padding-bottom:64px}
#app{display:grid;gap:16px} #app>*{min-width:0}
.enter{animation:in .4s var(--ease) both} @keyframes in{from{opacity:0;transform:translateY(8px)}}

/* first-screen hook */
.hook{padding:8px 0 8px}
.hook h1{font:600 27px/1.18 var(--f);letter-spacing:-.03em;color:var(--ink)}
.hook h1 .br{display:none}
.hook p{margin-top:8px;font:400 15px/23px var(--f);color:var(--muted)}
.hook__r{display:none}

/* pale tiles */
.q{position:relative;z-index:1;padding:24px 32px 32px;border-radius:var(--r);background:var(--tile)}
.q:focus-within{z-index:6}
.q>h2,.q>h1{display:block;margin-bottom:16px;font:500 17px/24px var(--f);letter-spacing:-.01em;color:var(--ink)}
.q>.hint{margin:-8px 0 16px;font:400 13.5px/20px var(--f);color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.row+.row,.row+.fld,.fld+.row,.fld+.fld{margin-top:16px}
.row>*,.pax__i>*,.via>*{margin-top:0!important}
.fld{display:block;position:relative;min-width:0}
.fld>span,.fld>label{display:block;margin-bottom:8px;font:600 13px/18px var(--f);color:var(--ink)}
.fld>span small,.fld>label small,.chk small{font-weight:400;color:var(--muted)}
.in{width:100%;height:48px;padding:0 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:400 15px/1 var(--f);color:var(--ink);transition:box-shadow .15s;-webkit-appearance:none;appearance:none;text-overflow:ellipsis}
.in::placeholder{color:#9AA8BA;text-transform:none;letter-spacing:0}
.in:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.in:focus{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
.in.is-bad{box-shadow:inset 0 0 0 2px var(--bad);background:#FFF8F7}
.fld--ico .in{padding-left:48px}
.fld--ico>svg,.fld--ico>.alg{position:absolute;left:16px;top:40px;color:#9AA8BA;pointer-events:none}
.fld--ico>.alg{left:12px;top:38px;width:28px;height:28px;border-radius:6px}
.fld--ico>.alg.alg--t{font-size:10px}
.fld .aname{position:absolute;right:16px;top:26px;height:48px;display:flex;align-items:center;font:500 13px/1 var(--f);color:var(--muted);pointer-events:none;max-width:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
select.in{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6C85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat;padding-right:40px}
input[type=date].in{padding-right:12px}
/* errors: plain text, under the field (existing funnel) */
.err{display:block;margin-top:8px;font:500 13px/18px var(--f);color:var(--bad)}

/* tabs */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:24px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge)}
.tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:0;border-radius:6px;background:transparent;font:600 14px/1 var(--f);color:var(--muted);transition:background .15s,color .15s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--blue-tint);color:var(--blue)}

/* route + swap */
.route{position:relative}
.swap{position:absolute;left:50%;top:34px;z-index:3;transform:translateX(-50%);display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--edge),0 1px 3px rgba(1,19,58,.08);color:var(--muted)}
.route:has(.cb__l:not([hidden])) .swap{display:none}
.swap:hover{color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
/* combobox */
.cb__l{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);max-height:304px;overflow:auto;padding:8px;border-radius:var(--rs);background:#fff;box-shadow:0 16px 40px rgba(1,19,58,.16),0 0 0 1px var(--rule)}
.cb__o{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;cursor:pointer;min-height:48px}
.cb__o[aria-selected=true],.cb__o:hover{background:var(--tile)}
.cb__o .flg{width:20px;height:15px;border-radius:2px;background:center/cover;box-shadow:inset 0 0 0 1px rgba(1,19,58,.1);flex:none}
.cb__o div{flex:1;min-width:0}
.cb__o b{display:block;font:500 14.5px/20px var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb__o span.c{display:block;font:400 12.5px/17px var(--f);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb__o code{flex:none;font:600 12.5px/1 var(--f);color:var(--muted);letter-spacing:.04em}
.cb__e{padding:12px;font:400 13.5px/20px var(--f);color:var(--muted)}

/* flight list */
.flist{display:grid;gap:8px}
.frow{position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:12px 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);text-align:left;cursor:pointer;transition:box-shadow .15s,background .15s}
.frow:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.frow.is-sel{box-shadow:inset 0 0 0 1.5px var(--blue);background:var(--blue-tint)}
.frow .ft{flex:1;min-width:0}
.frow .ft b{display:flex;align-items:baseline;gap:8px;font:600 15px/20px var(--f);color:var(--ink);white-space:nowrap}
.frow .ft b em{font-style:normal;font-weight:500;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.frow .ft span{display:block;margin-top:2px;font:400 13.5px/18px var(--f);color:var(--muted);font-variant-numeric:tabular-nums}
.frow .ft s{color:var(--faint)}
.frow .rad{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #B3C0D0}
.frow.is-sel .rad{box-shadow:inset 0 0 0 1.5px var(--blue),inset 0 0 0 4.5px #fff,inset 0 0 0 10px var(--blue)}
.pill{display:inline-flex;align-items:center;flex:none;height:24px;padding:0 10px;border-radius:999px;font:600 12px/1 var(--f);white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.on{background:var(--blue-tint);color:var(--blue)}
.pill.off{background:var(--tile-2);color:var(--muted)}
.linkbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;font:600 14px/20px var(--f);color:var(--blue)}
.linkbtn:hover{color:var(--blue-p);text-decoration:underline}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:400 15px/20px var(--f);color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow .15s}
.opt:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.opt span{flex:1}
.opt i{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #B3C0D0}
.opt[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--blue)} .opt[aria-pressed=true] i{box-shadow:inset 0 0 0 1.5px var(--blue),inset 0 0 0 4.5px #fff,inset 0 0 0 10px var(--blue)}

/* note tile */
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:var(--r);background:var(--tile);font:400 14px/21px var(--f);color:var(--text)}
.note>svg{margin-top:2px;color:var(--blue)}
.note b{font-weight:600;color:var(--ink)}
.q .note{margin-top:16px;padding:12px 16px;border-radius:var(--rs);background:#fff;font-size:13.5px;line-height:20px}

/* selected flight line */
.fsel{display:flex;align-items:center;gap:16px;padding:16px 24px;border-radius:var(--r);background:var(--tile)}
.fsel .ft{flex:1;min-width:0}
.fsel .ft b{display:block;font:600 15px/20px var(--f);color:var(--ink)}
.fsel .ft span{display:block;font:400 13.5px/20px var(--f);color:var(--muted);font-variant-numeric:tabular-nums}

/* verdict */
.res{padding:28px 32px 24px;border-radius:var(--r);background:#fff;border:1px solid var(--line2);box-shadow:0 1px 2px rgba(1,19,58,.04),0 12px 32px -12px rgba(1,19,58,.10);color:var(--text)}
.res__top{display:flex;align-items:center;gap:12px}
.res__ok{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.res__top b{display:block;font:600 15.5px/20px var(--f);color:var(--ink)}
.res__top small{display:block;font:400 13px/18px var(--f);color:var(--muted)}
.res__k{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 8px;border-radius:999px;font:600 12.5px/17px var(--f)}
.res__o{margin-top:24px;font:500 14px/20px var(--f);color:var(--muted)}
.res__n{margin:4px 0 4px;font:700 clamp(44px,4.4vw,56px)/1.05 var(--f);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.res__p{font:400 14px/21px var(--f);color:var(--muted);font-variant-numeric:tabular-nums}
.paxrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);color:var(--ink)}
.paxrow b{display:block;font:600 14.5px/20px var(--f)}
.paxrow>span:first-child>span{display:block;font:400 13px/18px var(--f);color:var(--muted)}
.fine{display:flex;align-items:center;gap:8px;margin-top:16px;font:400 13px/18px var(--f);color:var(--muted)}
.fine svg{flex:none;color:var(--faint)}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);transition:box-shadow .15s}
.stepper button:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.stepper button[disabled]{opacity:.35;cursor:not-allowed}
.stepper output{min-width:32px;text-align:center;font:600 16px/1 var(--f);font-variant-numeric:tabular-nums}
.res--no{background:var(--tile);color:var(--text)}
.res--no .res__k{background:var(--tile);box-shadow:inset 0 0 0 1px var(--rule);color:var(--muted)} .res--no .res__k svg{color:var(--muted)}
.res--no h2{margin:16px 0 8px;font:600 20px/26px var(--f);letter-spacing:-.02em;color:var(--ink)}
.res--no .res__p{color:var(--text)}
.why{display:grid;border-radius:var(--r);background:var(--tile);padding:4px 24px}
.why li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule);font:400 14px/21px var(--f)}
.why li:first-child{border-top:0}
.why svg{margin-top:1px;color:var(--star)} .why li:last-child svg{color:var(--blue)}
.why b{font-weight:600;color:var(--ink)}

/* actions */
.act{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.back{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 8px;border:0;background:none;font:600 14.5px/1 var(--f);color:var(--blue)}
.back:hover{color:var(--blue-p)}
.go{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:152px;height:52px;padding:0 24px;border:0;border-radius:var(--rs);background:var(--blue);color:#fff;font:600 15.5px/1 var(--f);text-decoration:none;transition:background .2s,transform .15s}
.go:hover{background:var(--blue-h)} .go:active{transform:translateY(1px)}
.go svg{transition:transform .2s var(--ease)} .go:hover svg{transform:translateX(3px)}
.go.is-soft{background:#E6F0FA;color:var(--blue)}
.go.sm{height:48px;min-width:0;padding:0 20px;font-size:14.5px}
.go--full{width:100%;min-width:0;margin:0;height:52px;font-size:16px}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:600 14.5px/1 var(--f);color:var(--blue)}

/* checkout sections */
.co-h{padding:8px 0 0}
.co-h h1{font:600 21px/28px var(--f);letter-spacing:-.02em;color:var(--ink)}
.co-h p{margin-top:4px;font:400 14px/21px var(--f);color:var(--muted)}
.sec{padding:0}
.sec-h{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:16px 24px;border:0;border-radius:var(--r);background:none;text-align:left}
.sec-h .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #B3C0D0;font:600 13px/1 var(--f);color:var(--muted);transition:background .2s,box-shadow .2s}
.sec.is-open .sec-h .n{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.sec.is-done .sec-h .n{background:var(--star);box-shadow:none;color:#fff}
.sec-h .tt{flex:1;min-width:0}
.sec-h .tt b{display:block;font:500 17px/24px var(--f);letter-spacing:-.01em;color:var(--ink)}
.sec-h .tt small{display:block;margin-top:2px;font:400 13.5px/20px var(--f);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-h .ed{flex:none;font:600 13.5px/1 var(--f);color:var(--blue)}
.sec-h .chev{flex:none;color:var(--muted);transition:transform .2s}
.sec.is-open .sec-h .chev{transform:rotate(180deg)}
.sec-b{padding:0 24px 24px 68px}
.sec-b .lead{margin:-8px 0 16px;font:400 13.5px/20px var(--f);color:var(--muted)}
.sec-b .bar{display:flex;justify-content:flex-end;margin-top:24px}
.pax{display:grid;gap:12px}
.pax__i{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge)}
.pax__h{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;min-height:20px;font:600 11px/16px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pax__h button{min-height:32px;margin:-6px 0;padding:0 4px;border:0;background:none;font:600 13px/1 var(--f);letter-spacing:0;text-transform:none;color:var(--blue)}
.pax__i .in:focus{box-shadow:inset 0 0 0 2px var(--blue)}
.pax__i .in.is-bad{box-shadow:inset 0 0 0 2px var(--bad);background:#FFF8F7}
.chk{display:flex;gap:12px;align-items:flex-start;min-height:32px;padding:4px 0;font:400 14px/21px var(--f);color:var(--text);cursor:pointer}
.pax__i .chk{grid-column:1/-1;align-items:center;padding:0}
.chk input{flex:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1.5px #B3C0D0;cursor:pointer}
.chk:not(.pax__i .chk) input{margin-top:1px}
.chk input:checked{box-shadow:none;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.chk.is-bad input{box-shadow:inset 0 0 0 2px var(--bad)}
.chk a{color:var(--blue)}
.chkw .err{margin:0 0 4px 32px}
.add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:12px;border:1.5px dashed #B3C0D0;border-radius:var(--rs);background:#fff;font:600 14px/1 var(--f);color:var(--blue)}
.add:hover{border-color:var(--blue)}
.row--zip{grid-template-columns:1.5fr 1fr 1.4fr}
.row--zip .fld:first-child{grid-column:1/-1}
.legal{max-height:152px;overflow:auto;padding:16px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:400 13.5px/20px var(--f);color:var(--text)}
.legal p+p{margin-top:8px}
.legal b{font-weight:600;color:var(--ink)}
.sig{position:relative;margin-top:16px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);overflow:hidden}
.sig.is-bad{box-shadow:inset 0 0 0 2px var(--bad)}
.sig canvas{display:block;width:100%;height:168px;touch-action:none;cursor:crosshair}
.sig::after{content:"";position:absolute;left:24px;right:24px;bottom:48px;border-top:1.5px dashed var(--edge);pointer-events:none}
.sig__h{position:absolute;left:24px;bottom:16px;font:400 13px/20px var(--f);color:var(--faint);pointer-events:none}
.sig__c{position:absolute;right:8px;top:8px;height:36px;padding:0 12px;border:0;border-radius:6px;background:var(--tile);font:600 13.5px/1 var(--f);color:var(--blue)}
.sig.is-signed .sig__h{display:none}
.sigdone{display:flex;align-items:center;gap:16px;margin-top:16px}
.sigdone img{height:56px;width:auto;padding:4px 12px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge)}
.chks{margin-top:16px}

/* ---------- Documents (ported from the existing funnel) ---------- */
.docs{display:grid;gap:16px}
.pcard{border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden}
.pcard__h{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;border:0;background:#fff;text-align:left;cursor:pointer}
.pcard__h i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--logo);color:#fff;font:600 15px/1 var(--f);font-style:normal}
.pcard__h>div{flex:1;min-width:0}
.pcard__h b{display:block;font:600 15.5px/21px var(--f);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__h small{display:block;margin-top:2px;white-space:nowrap;font:600 11px/16px var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pcard__n{flex:none;font:500 13px/18px var(--f);color:var(--muted);font-variant-numeric:tabular-nums}
.pcard__n.is-ok{display:inline-flex;align-items:center;gap:4px;color:var(--ok)}
.pcard__c{flex:none;display:grid;place-items:center;width:24px;color:var(--ink);transition:transform .2s}
.pcard:not(.is-open) .pcard__c{transform:rotate(180deg)} .pcard:not(.is-open) .pcard__b{display:none}
.drow{display:flex;align-items:center;gap:16px;width:100%;min-height:76px;padding:16px 20px;border:0;border-top:1px solid var(--rule);background:#fff;text-align:left;cursor:pointer;font:inherit;transition:background .15s}
.drow:hover{background:#FAFCFE}
.drow__i{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--rule);color:#9AA8BA}
.drow__i em{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px #fff;color:#fff;font-style:normal}
.drow.is-done .drow__i{color:var(--blue)} .drow.is-done .drow__i em{background:var(--star)}
.drow__b{flex:1;min-width:0}
.drow__b b{display:block;font:500 15.5px/22px var(--f);color:var(--ink)}
.drow__b small{display:block;margin-top:2px;font:400 13px/18px var(--f);color:var(--ok);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow__b .drow__hint{color:var(--muted)}
.drow__c{flex:none;color:var(--ink)}
.keystep{margin:4px 0 20px;padding:16px 20px 18px;border-radius:14px;background:var(--ocean,#023667) url(img/grad/smooth-deep.webp) 85% 60%/cover no-repeat;color:rgba(255,255,255,.82);box-shadow:0 10px 28px -14px rgba(1,19,58,.55)}
.keystep__tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:999px;background:rgba(88,232,207,.16);box-shadow:inset 0 0 0 1px rgba(88,232,207,.35);font:600 11px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--mint,#58E8CF)}
.keystep p{margin-top:10px;font:400 14px/21px var(--f)}
.keystep b{font-weight:600;color:#fff}
.docs-later{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font:400 13.5px/20px var(--f);color:var(--muted)}
.docs-later svg{flex:none;margin-top:1px;color:var(--muted)}
.docs-later b{font-weight:600;color:var(--ink)}

/* drawer shell */
.draw{position:fixed;inset:0;z-index:100}
.draw__bd{position:absolute;inset:0;background:rgba(1,19,58,.42);opacity:0;transition:opacity .25s var(--ease)} .draw.is-open .draw__bd{opacity:1}
.draw__p{position:absolute;top:0;right:0;bottom:0;width:min(640px,100%);display:flex;flex-direction:column;background:#fff;box-shadow:-24px 0 60px rgba(1,19,58,.22);transform:translateX(100%);transition:transform .28s var(--ease)} .draw.is-open .draw__p{transform:none}
.draw__p:focus{outline:none}
.draw.no-anim .draw__p,.draw.no-anim .draw__bd{transition:none}
.draw__x{position:absolute;right:16px;top:20px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #BFD3EA;color:var(--muted);cursor:pointer} .draw__x:hover{background:var(--tile);color:var(--ink)}
.draw__h{display:flex;align-items:center;gap:16px;padding:24px 72px 16px 32px}
.draw__i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blue-tint);color:var(--blue)}
.draw__h b{display:block;font:600 18px/24px var(--f);letter-spacing:-.01em;color:var(--ink)}
.draw__h small{display:block;margin-top:2px;font:400 14px/20px var(--f);color:var(--text)}
.draw__scroll{flex:1;overflow:auto;padding:8px 32px 24px;overscroll-behavior:contain}
.draw__f{flex:none;padding:16px 32px 24px;background:#fff;box-shadow:0 -1px 0 var(--rule)}
.draw__lead{margin:8px 0 16px;font:400 15px/23px var(--f);color:var(--ink)}
.draw__lead--tight{margin:16px 0}
.draw__h3{margin:8px 0 0;font:600 19px/25px var(--f);letter-spacing:-.01em;color:var(--ink)}
.bul{display:grid;gap:4px;padding-left:22px;list-style:disc;font:400 15px/23px var(--f);color:var(--ink)} .bul li{padding-left:4px}
.tlist{display:grid;gap:12px}
.trow{display:flex;align-items:center;gap:16px;width:100%;min-height:64px;padding:16px 20px;border:0;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--rule);text-align:left;font:inherit;cursor:pointer;transition:box-shadow .15s,background .15s}
.trow:hover{box-shadow:inset 0 0 0 1.5px var(--blue);background:#FAFCFE}
.trow__i{flex:none;color:var(--blue)} .trow b{flex:1;font:500 16px/22px var(--f);color:var(--ink)} .trow__c{color:var(--blue)}
.exs2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.exc{display:flex;flex-direction:column;padding:12px 12px 8px;border:0;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--rule);font:inherit;text-align:center;cursor:zoom-in;transition:box-shadow .15s}
.exc:hover{box-shadow:inset 0 0 0 2px var(--blue)}
.exc__img{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--rs);overflow:hidden;background:var(--tile)}
.exc__img img{width:100%;height:100%;object-fit:contain;display:block;background:var(--tile)}
.exc__img.v-blur img,.exzoom img.v-blur{filter:blur(3.5px)}
.exc__cap{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;min-height:24px;font:500 14px/19px var(--f)}
.exc--ok .exc__cap{color:var(--ok)} .exc--no .exc__cap{color:var(--bad)}
.exc__cap svg{width:20px;height:20px;padding:3px;border-radius:50%;color:#fff} .exc--ok .exc__cap svg{background:var(--star)} .exc--no .exc__cap svg{background:#E5675F}
.prelink{display:flex;align-items:center;gap:16px;width:100%;margin-top:8px;padding:16px 20px;border:0;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--rule);text-align:left;font:400 15px/22px var(--f);color:var(--ink);cursor:pointer}
.prelink:hover{box-shadow:inset 0 0 0 1.5px var(--blue)}
.prelink__i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rs);background:var(--blue-tint);color:var(--blue)}
.prelink__c{margin-left:auto;color:var(--blue)}
.upanel{margin-top:16px;padding:12px;border-radius:var(--r);background:#E6F0FB}
.dz2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:216px;padding:24px 16px;border-radius:var(--rs);background:#fff;border:1.5px dashed #C7D8EA;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dz2:hover,.dz2.is-over{border-color:var(--blue);background:#FBFDFF} .dz2.is-bad{border-color:var(--bad)}
.dz2__i{display:grid;place-items:center;width:72px;height:72px;margin-bottom:8px;border-radius:50%;background:var(--blue-tint);color:var(--blue)}
.dz2__i--ok{background:var(--ok-bg);color:var(--ok)}
.dz2 b{font:600 18px/24px var(--f);color:var(--ink)} .dz2 b u{color:var(--blue);text-decoration:none}
.dz2>span:not(.dz2__i){font:400 14px/20px var(--f);color:var(--muted)}
.dz2--has{border-style:solid;border-color:var(--star);cursor:default} .dz2--has b{font-size:15.5px;word-break:break-all}
.dz2__x{margin-top:8px;min-height:44px;padding:0 8px;border:0;background:none;font:600 14.5px/20px var(--f);color:var(--blue);cursor:pointer}
.takephoto{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;margin-top:12px;border-radius:var(--rs);background:#fff;font:600 15.5px/1 var(--f);color:var(--blue);cursor:pointer}
.takephoto:hover{background:#FBFDFF}
.err--dz{margin:8px 4px 0}
.qrrow{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 20px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.qrrow__i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rs);background:var(--blue-tint);color:var(--blue)}
.qrrow b{display:block;font:600 15px/21px var(--f);color:var(--ink)}
.qrrow>div span{display:block;font:400 14px/20px var(--f);color:var(--muted)}
.qr{flex:none;width:88px;height:88px;margin-left:auto} .qr img{width:100%;height:100%}
.exzoom{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:rgba(1,19,58,.74)}
.exzoom figure{margin:0;max-width:92%;text-align:center}
.exzoom img{max-width:100%;max-height:78vh;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.exzoom figcaption{margin-top:16px}
.zbad{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font:600 13px/18px var(--f)} .zbad svg{width:18px;height:18px}
.zbad--ok{background:var(--ok-bg);color:var(--ok)} .zbad--no{background:#FDECEA;color:var(--bad)}
.exzoom__x{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}

/* done */
.done{padding:40px 32px;border-radius:var(--r);background:var(--tile);text-align:center}
.done__i{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 24px;border-radius:50%;background:var(--star);color:#fff}
.done h1{font:600 clamp(21px,2.2vw,27px)/1.18 var(--f);letter-spacing:-.03em;color:var(--ink)}
.done p{max-width:480px;margin:8px auto 0;font:400 15px/23px var(--f);color:var(--muted)}
.done p b{color:var(--ink);font-weight:600}
.ref{display:inline-flex;align-items:center;gap:8px;margin-top:24px;height:40px;padding:0 16px;border-radius:999px;background:#fff;font:600 14.5px/1 var(--f);letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.ref small{font:500 12.5px/1 var(--f);letter-spacing:0;color:var(--muted)}
.next{display:grid;border-radius:var(--r);background:var(--tile);padding:8px 24px}
.next li{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.next li:first-child{border-top:0}
.next i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font:600 13px/1 var(--f);font-style:normal}
.next b{display:block;font:600 15px/22px var(--f);color:var(--ink)}
.next span{font:400 14px/21px var(--f);color:var(--muted)}

/* footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;padding:20px 32px;border-top:1px solid var(--rule);font:400 13.5px/22px var(--f);color:var(--text)}
.foot a{text-decoration:none} .foot a:hover{color:var(--blue)}
.foot__n,.foot small{font-size:13.5px;color:var(--muted)}

/* help "?" (existing funnel) */
.help{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;margin:-3px 0 0 8px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #B3C0D0;font:600 11px/1 var(--f);color:var(--muted);vertical-align:middle;cursor:pointer}
.help::after{content:"";position:absolute;inset:-12px}
.help:hover{color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.pop{width:min(440px,calc(100% - 32px));padding:24px;border:0;border-radius:var(--r);background:#fff;color:var(--text);box-shadow:0 24px 60px rgba(1,19,58,.28)}
.pop::backdrop{background:rgba(1,19,58,.42)}
.pop__i{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rs);background:var(--blue-tint);color:var(--blue)}
.pop h2{margin-top:16px;font:600 19px/25px var(--f);letter-spacing:-.01em;color:var(--ink)}
.pop p{margin-top:8px;font:400 14.5px/22px var(--f)} .pop p b{font-weight:600;color:var(--ink)}
.pop__x{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--muted)} .pop__x:hover{background:var(--tile)}
.pop .go{width:100%;margin-top:24px}

/* connections */
.vias{margin-top:16px}
.via{display:grid;grid-template-columns:1fr 48px;gap:8px;align-items:end}
.via+.via{margin-top:12px}
.via__x{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);color:var(--muted)}
.via__x:hover{color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.vias .add{margin-top:12px}
.path .ap-via{position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);font:600 10.5px/14px var(--f);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:.8}

/* typed signature */
.sig__alt{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0;border:0;background:none;font:500 14px/20px var(--f);color:var(--blue);text-decoration:underline;cursor:pointer}
.sigt{margin-top:4px}
.sigt .hint{margin-top:8px;font:400 13px/18px var(--f);color:var(--muted)}

/* laptop -> phone handoff (existing funnel's .hnd*) */
.hnd-b{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:500 14.5px/20px var(--f);color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow .15s,background .15s}
.hnd-b:hover{box-shadow:inset 0 0 0 1.5px var(--blue);background:var(--blue-tint)}
.hnd-b svg{color:var(--blue)} .hnd-b small{margin-left:auto;font:400 13px/18px var(--f);color:var(--muted)}
.hnd{position:relative;display:flex;gap:24px;align-items:flex-start;padding:24px;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--edge),0 12px 28px rgba(1,19,58,.08)}
.hnd__qr{flex:none;width:152px;height:152px;padding:8px;border-radius:var(--rs);box-shadow:inset 0 0 0 1px var(--rule)} .hnd__qr img{width:100%;height:100%}
.hnd__t{min-width:0;padding-right:32px}
.hnd__t>b{display:block;margin-bottom:8px;font:600 15px/21px var(--f);color:var(--ink)}
.hnd__t p{margin:0 0 8px;font:400 13.5px/20px var(--f);color:var(--muted)}
.hnd__c{line-height:28px!important}
.hnd__c code,.qrrow code{font:600 14px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;color:var(--ink);background:#EEF3F9;padding:4px 8px;border-radius:6px;white-space:nowrap}
.qrrow code{font-size:13px;padding:2px 6px}
.hnd__e{margin:0!important;font-size:12.5px!important;color:var(--muted);font-variant-numeric:tabular-nums}
.hnd__x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--rs);background:none;color:var(--muted)} .hnd__x:hover{background:#EEF3F9;color:var(--ink)}
.hnd-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:9999;width:max-content;max-width:min(calc(100vw - 32px),420px);padding:12px 16px;border-radius:var(--rs);background:var(--ink);color:#fff;font:500 14px/20px var(--f);box-shadow:0 14px 34px rgba(1,19,58,.3);transition:opacity .6s}
.hnd-toast.go{opacity:0}
.hnd-toast svg{display:inline-block;margin:-3px 8px 0 0;vertical-align:middle;color:var(--mint)}

/* referral (done) */
.refer{padding:24px;border-radius:var(--r);background:var(--blue-tint);box-shadow:inset 0 0 0 1px rgba(10,112,192,.16)}
.refer b{display:block;font:600 16px/22px var(--f);color:var(--ink)}
.refer p{margin-top:8px;font:400 14px/21px var(--f);color:var(--text)} .refer p b{display:inline;font-size:inherit}
.refer__l{display:flex;gap:8px;margin-top:16px}
.refer__l .in{flex:1;min-width:0;color:var(--muted)}
.refer__c{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);font:600 14.5px/1 var(--f);transition:box-shadow .15s,color .15s}
.refer__c:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.refer__c.is-done{color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.refer__s{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:12px;border:0;border-radius:var(--rs);background:var(--blue);color:#fff;font:600 15.5px/1 var(--f)}
.refer__s:hover{background:var(--blue-h)}
.refer__t{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.refer__t a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--line2);font:600 14px/1 var(--f);color:var(--ink);text-decoration:none;cursor:pointer;transition:box-shadow .15s}
.refer__t a:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.refer__n{margin-top:12px!important;font-size:13px!important;line-height:19px!important;color:var(--muted)!important}

/* phone bits hidden on desktop */
.mtop,.sheet{display:none}

/* ---------- Narrower desktops ---------- */
@media (max-width:1180px){
  :root{--side:min(34vw,368px)}
  .side{padding:40px 32px 0}
  .ap b{font-size:28px}
  .phd,.pbd{padding-left:16px;padding-right:16px} .stub{padding-left:16px;padding-right:16px}
  .tbar{gap:12px} .tbar .tb-up{display:none}
}
@media (max-height:820px) and (min-width:901px){
  .side{padding-top:40px} .sprog{margin-top:32px} .passhost{margin-top:16px}
  .side__t b{display:none} .side__t{padding-bottom:40px}
}

/* ---------- Phone + tablet ---------- */
@media (max-width:900px){
  .side,.top{display:none}
  .main{margin-left:0}
  .mtop{display:block;position:sticky;top:0;z-index:60;background:#fff;padding-top:env(safe-area-inset-top,0px)}
  .mtop__r{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 16px}
  .mtop .logo{font-size:23px;gap:8px;min-height:48px} .mtop .logo svg{width:28px;height:28px}
  /* compact ticket chip: LGW -> FCO · £440 (opens the pass) */
  .chip{flex:none;display:flex;align-items:center;height:48px;margin-right:-4px;padding:0 4px;border:0;background:none}
  .chip__t{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border-radius:var(--rs);background:var(--ocean) url(img/grad/smooth-deep.webp) 80% 70%/cover no-repeat;color:#fff;font:600 13.5px/1 var(--f);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .chip__t svg{opacity:.85}
  .chip__a{color:var(--mint)}
  .chip__d{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.55)}
  .chip .cv{transition:transform .25s var(--ease)}
  .chip[aria-expanded=true] .cv{transform:rotate(180deg)}
  .chip.pulse .chip__t{animation:pulse 1.1s var(--ease)}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(88,232,207,.8)}100%{box-shadow:0 0 0 8px rgba(88,232,207,0)}}

  .ts{display:flex;align-items:center;justify-content:center;height:36px;padding:0 16px;background:var(--tile);border-bottom:1px solid var(--rule);font:500 12px/1 var(--f);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
  .ts__i{display:inline-flex;align-items:center;gap:1px}
  .ts__i+.ts__i{margin-left:12px;padding-left:12px;border-left:1px solid var(--line2)}
  .ts__i b{font-weight:600;color:var(--ink)}
  .ts__s{display:inline-flex;margin-right:4px;color:var(--star)}
  .hook__r{display:none!important}
  .mline{height:3px;background:var(--tile-2)}
  .mline i{display:block;height:100%;width:0;background:var(--blue);transition:width .5s var(--ease)}
  .sheet{display:block;position:fixed;inset:0;z-index:55;pointer-events:none}
  .sheet__bd{position:absolute;inset:0;background:rgba(1,19,58,.42);opacity:0;transition:opacity .25s var(--ease)}
  .sheet__p{position:absolute;left:0;right:0;top:calc(95px + env(safe-area-inset-top,0px));max-height:calc(100dvh - 95px - env(safe-area-inset-top,0px));overflow:auto;padding:16px 16px 16px;background:var(--tile);border-radius:0 0 var(--r) var(--r);box-shadow:0 20px 50px rgba(1,19,58,.25);transform:translateY(calc(-100% - 72px));transition:transform .34s var(--ease)}
  .sheet.is-open{pointer-events:auto} .sheet.is-open .sheet__bd{opacity:1} .sheet.is-open .sheet__p{transform:none}
  .sheet .pass{max-width:400px;margin:0 auto}
  .sheet__f{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:400px;margin:12px auto 0}
  .sheet__f p{font:400 13px/18px var(--f);color:var(--muted)}
  .sheet__f button{flex:none;min-height:48px;padding:0 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:600 14px/1 var(--f);color:var(--blue)}

  .wrap{width:calc(100% - 32px);margin-top:20px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  #app{gap:12px}
  .hook{padding:0 0 4px}
  .hook h1{font:700 26px/32px var(--f);letter-spacing:-.025em}
  .hook h1 .br{display:inline}
  .hook p{margin-top:8px;font-size:14.5px;line-height:21px}
  .hook__r{display:flex;align-items:center;gap:8px;margin-top:12px;font:500 13px/18px var(--f);color:var(--text);white-space:nowrap}
  .hook__r>i{width:3px;height:3px;border-radius:50%;background:var(--faint)}
  .q{padding:20px 20px 24px}
  .in{font-size:16px}
  .tabs{margin-bottom:20px} .tabs button{min-height:44px}
  .pax__h button{min-height:48px;margin:-14px -4px -14px 0}
  .pax__i .chk{min-height:48px}
  .chk{min-height:48px;padding:12px 0}
  .chkw .err{margin-top:-8px}
  .sig__c{height:44px;padding:0 16px}
  .note{padding:16px;font-size:14px;line-height:20px}
  .row,.opts{grid-template-columns:1fr;gap:16px}
  .swap{left:auto;right:12px;top:58px;transform:none;width:44px;height:44px}
  .cb__l{position:static;margin-top:8px;max-height:min(46vh,340px);box-shadow:0 8px 28px rgba(1,19,58,.12),0 0 0 1px var(--rule)}
  .frow{padding:12px 16px;gap:12px}
  .frow .rad{display:none}
  .fsel{padding:12px 16px;gap:12px}
  .fsel .alg{width:36px;height:36px}
  .res{padding:20px 20px 16px}
  .res__o{margin-top:16px}
  .res__n{font-size:44px}
  .paxrow{margin-top:16px;padding-top:16px}
  .stepper button{width:48px;height:44px}
  .why{padding:4px 16px}
  .act{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--rule);gap:12px}
  .act.act--kb{visibility:hidden;pointer-events:none}   /* keyboard up: out of the way (claim.js) */
  .act .back{flex:none;width:52px;height:52px;padding:0;justify-content:center;border-radius:var(--rs);box-shadow:inset 0 0 0 1px var(--edge)}
  .act .back .bl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .act .go{flex:1;min-width:0;margin-left:0}
  .co-h{padding:4px 0 0} .co-h h1{font-size:20px;line-height:26px}
  .sec-h{min-height:72px;padding:16px;gap:12px}
  .sec-h .tt b{font:600 16px/22px var(--f)}
  .sec-h .ed{display:none}
  .q.sec{padding:0}
  .sec-b{padding:0 16px 20px}
  .sec-b .bar{display:none}
  .row--zip{grid-template-columns:1fr 1fr} .row--zip .fld:first-child,.row--zip .fld:last-child{grid-column:1/-1}
  .pax__i{gap:12px;padding:12px 12px 16px}
  .pcard__h{padding:16px} .drow{padding:16px}
  .done{padding:32px 20px} .next{padding:4px 16px}
  .foot{padding:16px 16px calc(96px + env(safe-area-inset-bottom,0px));gap:0 24px}
  .foot a{display:inline-block;padding:12px 0;min-height:48px}
  .foot__n{width:100%}
  /* drawer: a full-height sheet on phones */
  .draw__p{top:0;bottom:auto;width:100%;height:100dvh;box-shadow:none;transform:translateY(100%)}
  .draw__h{padding:16px 64px 12px 16px} .draw__x{right:12px;top:14px}
  .draw__i{width:44px;height:44px}
  .draw__scroll{padding:4px 16px 24px;-webkit-overflow-scrolling:touch}
  .draw__f{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .draw__lead{margin:8px 0 12px}
  .exs2{gap:12px}
  .dz2{min-height:184px}
  .hnd{flex-direction:column;gap:16px;padding:16px}
  .hnd-toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .refer{padding:20px 16px}
  .refer__t a{gap:6px;font-size:13.5px} .refer__t svg{width:16px;height:16px}
}
@media (max-width:600px){
  @media (max-width:374px){.ts__x{display:none}}
  .pax__i{grid-template-columns:1fr 1fr}
  .pax__i .fld--w{grid-column:1/-1}
  .pn-x{display:none}
}
@media (min-width:601px) and (max-width:900px){
  .wrap{width:min(640px,100% - 48px)}
  .row{grid-template-columns:1fr 1fr} .swap{left:50%;right:auto;top:34px;transform:translateX(-50%);width:32px;height:32px}
  .opts{grid-template-columns:1fr 1fr}
  .row--zip{grid-template-columns:1.5fr 1fr 1.4fr} .row--zip .fld:last-child{grid-column:auto}
  .hook h1 .br{display:none}
}

/* ---------- Custom inputs: date picker + select (replace the browser's own) ---------- */
.cx-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;left:0;bottom:0}
.cx{position:relative}
.cx-btn{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;line-height:48px;white-space:nowrap;overflow:hidden}
.cx-btn .cx-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cx-btn .cx-v.is-ph{color:#9AA8BA}
.cx-btn>.ico{flex:none;color:#8C97AB}
.cx-btn[aria-expanded=true]{box-shadow:inset 0 0 0 2px var(--blue)}
.cx-btn[aria-expanded=true] .cx-chev{transform:rotate(180deg)}
.cx-chev{transition:transform .2s var(--ease)}
.cx-native.is-bad~.cx-btn{box-shadow:inset 0 0 0 2px var(--bad);background:#FFF8F7}
.cx-pop{position:absolute;z-index:80;left:0;top:calc(100% + 8px);background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--rule),0 18px 48px -12px rgba(1,19,58,.28);animation:cxin .16s var(--ease)}
@keyframes cxin{from{opacity:0;transform:translateY(-4px)}}
.cx-bd{display:none}
.cx-sh{display:none}
/* calendar */
.cal{width:328px;padding:16px}
.cal__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal__m{font:600 15px/20px var(--f);color:var(--ink)}
.cal__n{display:flex;gap:4px}
.cal__n button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--rs);background:none;color:var(--ink)}
.cal__n button:hover:not([disabled]){background:var(--tile)}
.cal__n button[disabled]{color:#C3CFDD;cursor:default}
.cal__q{display:flex;gap:8px;margin-bottom:12px}
.cal__q button{height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line2);font:500 13px/1 var(--f);color:var(--ink)}
.cal__q button:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.cal__q button[aria-pressed=true]{background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.cal__w,.cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__w span{display:grid;place-items:center;height:28px;font:600 11px/1 var(--f);letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.cal__g button{position:relative;height:40px;border:0;border-radius:var(--rs);background:none;font:500 14px/1 var(--f);color:var(--ink);font-variant-numeric:tabular-nums}
.cal__g button:hover:not([disabled]):not([aria-selected=true]){background:var(--tile)}
.cal__g button.is-today::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--blue)}
.cal__g button[aria-selected=true]{background:var(--blue);color:#fff}
.cal__g button[aria-selected=true]::after{background:#fff}
.cal__g button[disabled]{color:#C3CFDD;cursor:default}
.cal__g i{display:block}
.cal__f{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);font:400 12.5px/18px var(--f);color:var(--muted)}
/* select list */
.cxl{min-width:100%;max-height:320px;overflow:auto;padding:6px}
.cxl button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--rs);background:none;text-align:left;font:400 15px/20px var(--f);color:var(--ink)}
.cxl button:hover,.cxl button.is-act{background:var(--tile)}
.cxl button[aria-selected=true]{font-weight:600;color:var(--blue)}
.cxl button .ico{color:var(--blue)}
.cx-pop :focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:var(--rs)}
.cal__g button[aria-selected=true]:focus-visible{outline-color:#fff;outline-offset:-4px}
@media (max-width:900px){
  .cx-pop{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:86dvh;overflow:auto;border-radius:16px 16px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));animation:cxup .24s var(--ease);z-index:91}
  @keyframes cxup{from{transform:translateY(100%)}}
  .cx-bd{display:block;position:fixed;inset:0;z-index:90;background:rgba(1,19,58,.42);animation:cxfade .2s}
  @keyframes cxfade{from{opacity:0}}
  .cx-sh{display:flex;align-items:center;justify-content:space-between;padding:12px 6px 8px 16px}
  .cx-sh b{font:600 16px/22px var(--f);color:var(--ink)}
  .cx-sh button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--rs);background:none;color:var(--muted)}
  .cal{width:auto;padding:0 16px 8px}
  .cal__g button{height:46px;font-size:15px}
  .cal__q button{height:36px}
  .cxl{max-height:none;padding:0 4px 8px}
  .cxl button{min-height:52px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ================= Live funnel additions (v6) ================= */
/* "What happened to your flight?": white option tiles, tap to go on */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;display:flex;align-items:center;gap:16px;min-height:72px;padding:12px 16px;border:0;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);text-align:left;font:600 15.5px/21px var(--f);color:var(--ink);transition:box-shadow .15s,background .15s}
.tile:hover{box-shadow:inset 0 0 0 1px var(--edge-h)}
.tile[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--blue);background:var(--blue-tint)}
.tile__i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue-tint);color:var(--blue)}
.tile[aria-pressed=true] .tile__i{background:#fff}
.tile__l{flex:1;min-width:0}
.tile>.ico:last-child{flex:none;color:var(--muted)}
.tiles .tile:last-child:nth-child(odd){grid-column:1/-1}
/* follow-up questions ("Tell us a bit more") */
.qq+.qq{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
.qq>h3{display:block;margin-bottom:12px;font:600 15px/22px var(--f);color:var(--ink)}
.qq>.hint{margin:-6px 0 12px;font:400 13.5px/20px var(--f);color:var(--muted)}
.opts--1{grid-template-columns:1fr}
input[type=time].in,input[type=datetime-local].in{padding-right:12px;min-width:0}
.res--wait{display:flex;align-items:center;gap:12px;padding:20px 24px;background:var(--tile);border:0;box-shadow:none;font:500 14.5px/20px var(--f);color:var(--ink)}
.res--wait .ico{color:var(--blue)}
.spin{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}
.floading{display:flex;align-items:center;gap:12px;min-height:72px;padding:16px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:500 14.5px/20px var(--f);color:var(--ink)}
.floading .ico{color:var(--blue)}
.fskel{height:72px;border-radius:var(--rs);background:linear-gradient(90deg,#fff 0%,#F4F7FB 50%,#fff 100%) 0 0/200% 100%;box-shadow:inset 0 0 0 1px var(--line2);animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.ferr{padding:16px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:400 14px/21px var(--f);color:var(--text)}
.ferr .ghost{margin-top:12px}
/* the pass: the passenger's own answer, in place of a status */
.stat{gap:8px}
.stat small{font:500 12px/16px var(--f);color:var(--muted)}
/* uploads in flight / refused */
.drow.is-up .drow__i em{background:var(--faint)}
.drow.is-err .drow__i em{background:var(--bad)}
.drow__b .drow__err{color:var(--bad);white-space:normal}
/* real QR codes come back from the server as inline SVG */
.qr svg,.hnd__qr svg{display:block;width:100%;height:100%}
.qr{display:grid;place-items:center}
.qr__retry{min-height:44px;padding:0 12px;border:0;border-radius:var(--rs);background:var(--tile);font:600 13px/1 var(--f);color:var(--blue)}
.qr__wait{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--line2);border-top-color:var(--blue);animation:spin 1s linear infinite}
/* "Started on a laptop? Enter your code" (phones) */
.hcode{font:400 13.5px/20px var(--f);color:var(--muted)}
.hcode .row{margin-top:12px}
.sigok{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);font:500 14px/1 var(--f);color:var(--ok)}
.sub-msg{margin-top:0}
.note--bad>svg{color:var(--bad)}
@media (max-width:900px){
  .tiles{grid-template-columns:1fr;gap:8px}
  .tile{min-height:64px}
}
/* the help widget (/widget.js) must never sit on a call to action: hidden while a drawer, sheet or
   picker is open, and above the pinned button bar on phones */
body:has(#draw:not([hidden])) .sfw-btn,body:has(.sheet.is-open) .sfw-btn,body:has(.cx-pop) .sfw-btn{display:none!important}
@media (max-width:900px){.sfw-btn{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}}

/* ================= Flow polish (v6.4): one step flowing into the next ================= */
/* screens: the new one fades and slides in as one piece (~200 ms); forward from the right, back from the left */
#app.sf-in{animation:sfin .14s ease-out both}
#app.sf-in.sf-back{animation-name:sfback}
#app.sf-in .enter{animation:none}
@keyframes sfin{from{opacity:0}}   /* a quick fade, no sideways slide: the slide read as a jitter (owner, 26 Oct) */
@keyframes sfback{from{opacity:0}}
/* the step heading takes focus for screen readers; no ring for that */
.sf-h:focus{outline:none}
.sec-h:focus:not(:focus-visible),.draw__p:focus{outline:none}
/* a field that needs fixing: a small sideways nudge */
.sf-shake{animation:sfshake .32s cubic-bezier(.36,.07,.19,.97) both}
@keyframes sfshake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
/* scrolling to a field keeps it clear of the sticky header and the pinned button bar */
html{scroll-padding-top:16px}
@media (max-width:900px){html{scroll-padding-top:112px;scroll-padding-bottom:104px}}
/* no zoom on focus on any touch screen (iPads are wider than the phone layout) */
@media (pointer:coarse){.in{font-size:16px}}
/* one short, true line under a field, at the moment people hesitate */
.fhint{margin:8px 0 0;font:400 13px/18px var(--f);color:var(--muted)}
.row+.fhint{margin-top:8px}
.sigw .fhint{margin-top:8px}
/* the flight list while it loads: a calm line and the shape of the rows to come */
.fload{display:flex;align-items:center;min-height:24px;margin:0 0 4px;font:500 14.5px/20px var(--f);color:var(--ink)}
.fskel{display:flex;align-items:center;gap:16px;height:72px;padding:12px 16px;background:#fff;animation:none}
.fskel i{flex:none;width:40px;height:40px;border-radius:8px}
.fskel span{flex:1;display:grid;gap:8px}
.fskel b{display:block;width:46%;height:12px;border-radius:6px}
.fskel em{display:block;width:30%;height:10px;border-radius:5px}
.fskel i,.fskel b,.fskel em{background:linear-gradient(90deg,#EEF3F9 0%,#F7F9FC 50%,#EEF3F9 100%) 0 0/200% 100%;animation:sk 1.8s linear infinite}
.fskel+.fskel{opacity:.75} .fskel+.fskel+.fskel{opacity:.5}
/* the drawer: "Boarding pass added. Next: Photo ID for Tom" */
.draw__next{display:flex;align-items:center;gap:12px;margin:8px 0 16px;padding:12px 16px;border-radius:var(--rs);background:var(--ok-bg);font:400 14px/20px var(--f);color:var(--ink)}
.draw__next>svg{color:var(--ok)}
.draw__next>span{flex:1;min-width:0}
.draw__next b{font-weight:600}
.draw__next .linkbtn{flex:none;min-height:40px;font-size:13.5px}
.sf-swap .draw__scroll,.draw__scroll.sf-swap{animation:sfswap .22s var(--ease) both}
@keyframes sfswap{from{opacity:0;transform:translateX(10px)}}
/* all documents in */
.docs-in{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 16px;border-radius:var(--rs);background:#fff;font:400 14px/20px var(--f);color:var(--text)}
.docs-in svg{flex:none;margin-top:1px;color:var(--ok)}
.docs-in b{font-weight:600;color:var(--ink)}
/* Submit, brought forward once everything is in; "Sign and continue" the moment there is a signature */
.go.is-pulse,.go.is-ready{animation:sfpulse 1.2s var(--ease) 2}
@keyframes sfpulse{0%{box-shadow:0 0 0 0 rgba(10,112,192,.45)}100%{box-shadow:0 0 0 12px rgba(10,112,192,0)}}
.go.is-soft.is-ready{animation:none}
@media (max-width:600px){.row>span:empty{display:none}}

/* ================= Compliance + data quality (v6.5) ================= */
/* a question about a value that looks unusual: amber, never blocking, with a one-tap fix where there is one */
.warn{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font:500 13px/19px var(--f);color:#7A4300}
.warn>svg{flex:none;margin-top:2px;color:#C27A00}
.warn .sugg,.warn .warn__b{display:inline;min-height:0;margin:0 0 0 2px;padding:0;border:0;background:none;font:600 13px/19px var(--f);color:var(--blue);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.warn .warn__b{display:inline-flex;align-items:center;min-height:32px;margin:4px 12px 0 0;padding:0 12px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--edge);text-decoration:none}
.warn .sugg{word-break:break-all}
.qq>.warn{margin-top:12px}
@media (pointer:coarse){.warn .sugg{padding:6px 0;margin:-6px 0 -6px 2px}.warn .warn__b{min-height:44px}}
/* small hints: the ones inside a <label> are <small>, so they need to be a block */
small.fhint{display:block}
.pax__i>.pax__hint{grid-column:1/-1;margin:-8px 0 0!important}
/* the estimate (their own answers don't qualify on their own): honest, calmer, still an amount */
.res__ok--est{background:var(--blue-tint);color:var(--blue)}
.res--est .res__n{margin-top:16px}
.res__est{margin-top:8px;font:500 14px/21px var(--f);color:var(--ink)}
/* the fee, word for word, beside the button that commits to it */
.act{flex-wrap:wrap}
.act__n{order:1;display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;justify-content:flex-end;margin:0;font:400 13px/18px var(--f);color:var(--muted);text-align:right}
.act__n svg{flex:none;color:var(--ok)}
.act>.go{order:2}
@media (min-width:901px){.act>.go{flex:none}}
.act:has(.act__n)>.go{margin-left:0}
@media (max-width:900px){
  .act{row-gap:8px}
  .act__n{order:-1;flex:1 0 100%;justify-content:center;text-align:center;font-size:12.5px;line-height:17px}
  body.has-actn .wrap{padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
  body.has-actn .foot{padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
}
/* before signing: the fee and the right to cancel, plainly, next to the one tick */
.keyterms{display:grid;gap:8px;margin-top:16px;padding:12px 16px;border-radius:var(--rs);background:#fff;box-shadow:inset 0 0 0 1px var(--rule);font:400 13.5px/20px var(--f);color:var(--ink)}
.keyterms li{display:flex;gap:10px;align-items:flex-start}
.keyterms svg{flex:none;margin-top:2px;color:var(--blue)}
.note--kids{margin-top:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
/* documents: what must show, the photo tip, the browser's first look and the server's reading */
.draw__must{display:flex;gap:8px;align-items:flex-start;margin:16px 4px 0;font:500 14px/20px var(--f);color:var(--ink)}
.draw__must svg{flex:none;margin-top:2px;color:var(--blue)}
.draw__tip{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font:400 14px/20px var(--f);color:var(--text)}
.draw__tip svg{flex:none;margin-top:2px;color:var(--blue)}
.dz2--busy{cursor:default}
.dz2--warn{border-style:solid;border-color:#F2C46D;background:#FFFBF2;cursor:default}
.dz2--warn b{font-size:17px}
.dz2__i--warn{background:#FFF1D6;color:#B86E00}
.dz2__th{width:auto;max-width:min(240px,70%);max-height:132px;margin-bottom:8px;border-radius:6px;object-fit:contain;box-shadow:0 0 0 1px var(--rule)}
.dz2--warn .dz2__th{opacity:.92}
.dz2__ck{display:block;max-width:100%;font:500 13.5px/19px var(--f)}
.dz2__ck--ok{color:var(--ok)} .dz2__ck--bad{color:#7A4300} .dz2__ck--wait{color:var(--muted)}
.dz2--bad{border-color:#F2C46D}
#dr-retake svg{margin-right:2px}
.drow.is-warn .drow__i{color:#B86E00} .drow.is-warn .drow__i em{background:#D98A00}
.drow__b .drow__ck{white-space:normal}
.drow__b .drow__ck--ok{color:var(--ok)} .drow__b .drow__ck--bad{color:#7A4300} .drow__b .drow__ck--wait{color:var(--muted)}
.draw__chk{display:block;margin-top:2px;font:500 13px/18px var(--f);color:var(--ok)}
.draw__chk:empty{display:none}
.draw__next.is-wait .draw__chk{color:var(--muted)}
.draw__next.is-warn{background:#FFF6E3}
.draw__next.is-warn>svg{color:#B86E00}
.draw__next.is-warn .draw__chk{color:#7A4300}
.draw__fix{display:inline;min-height:0!important;padding:0;font-size:13px!important}
.docs-fix{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 16px;border-radius:var(--rs);background:#FFF6E3;font:400 14px/20px var(--f);color:var(--ink)}
.docs-fix svg{flex:none;margin-top:1px;color:#B86E00}

/* the compliance + data-quality text on phones, on the owner's smaller phone scale (body 13-13.5, hints 12.5) */
@media (max-width:700px){
  .warn,.warn .sugg{font-size:12.5px;line-height:18px}
  .warn .warn__b{font-size:12.5px}
  .fhint,small.fhint{font-size:12.5px;line-height:18px}
  .res__est{font-size:13px;line-height:19px}
  .act__n{font-size:12px;line-height:16px}
  .keyterms{font-size:13px;line-height:19px}
  .draw__must,.draw__tip{font-size:13px;line-height:19px}
  .dz2--warn b{font-size:15.5px;line-height:21px}
  .dz2>span:not(.dz2__i),.dz2__ck{font-size:13px;line-height:19px}
  .draw__chk{font-size:12.5px}
  .docs-fix{font-size:13px;line-height:19px}
}

/* ===== Accents (18 Oct 2026): red "don't skip" note on documents, clearer invalid fields, quiet green on valid ones ===== */
.keystep{display:flex;gap:12px;align-items:flex-start;margin:4px 0 20px;padding:14px 16px;border-radius:12px;background:#FEF3F2;box-shadow:inset 0 0 0 1px #FECDCA;color:#7A271A}
.keystep__i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#FEE4E2;color:#D92D20}
.keystep b{display:block;font:600 14.5px/20px var(--f);color:#912018}
.keystep p{margin-top:2px;font:400 13.5px/20px var(--f);color:#7A271A}
.in:focus{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px rgba(10,112,192,.12)}
.in.is-bad,.pax__i .in.is-bad{box-shadow:inset 0 0 0 1.5px #D92D20,0 0 0 4px rgba(217,45,32,.10);background:#FFFBFA}
.in.is-bad:focus{box-shadow:inset 0 0 0 2px #D92D20,0 0 0 4px rgba(217,45,32,.14)}
.cx-native.is-bad~.cx-btn{box-shadow:inset 0 0 0 1.5px #D92D20,0 0 0 4px rgba(217,45,32,.10);background:#FFFBFA}
.fld:has(.is-bad)>span,.fld:has(.is-bad)>label,.fld:has(.is-bad)>span label{color:#B42318}
.err{display:flex;gap:6px;align-items:flex-start;font:500 13px/18px var(--f);color:#B42318}
.err::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D92D20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/14px no-repeat}
.chk.is-bad input{box-shadow:inset 0 0 0 1.5px #D92D20,0 0 0 4px rgba(217,45,32,.10)}
.sig.is-bad{box-shadow:inset 0 0 0 1.5px #D92D20,0 0 0 4px rgba(217,45,32,.10)}
.fld.is-ok .in:not(:focus){box-shadow:inset 0 0 0 1px #8FD3B8}
.fld.is-ok:not(.fld--ico-r)::after{content:"";position:absolute;right:14px;top:42px;width:16px;height:16px;border-radius:50%;background:#13CCA2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;pointer-events:none}
.fld.is-ok .in{padding-right:40px}
@media (max-width:700px){
  .keystep{padding:12px 14px} .keystep__i{width:28px;height:28px}
  .keystep b{font-size:13.5px;line-height:19px} .keystep p{font-size:13px;line-height:19px}
  .fld.is-ok::after{top:37px}
  .err{font-size:12.5px}
}

/* ===== Phone polish (18 Oct 2026, owner: "text is way too big on mobile" + "get rid of the iPhone blue highlight").
   Kept LAST so it wins. Inputs stay at 16px so iOS never zooms on focus. ===== */
*{-webkit-tap-highlight-color:transparent}
[tabindex="-1"]:focus,h1:focus,h2:focus,h3:focus{outline:none}
@media (pointer:coarse){
  button:focus,a:focus,label:focus,[role=button]:focus,[role=radio]:focus,[role=option]:focus{outline:none!important}
  .tile:hover,.opt:hover,.frow:hover,.drow:hover,.in:hover,.cal__q button:hover,.refer__t a:hover{box-shadow:inset 0 0 0 1px var(--edge)}
}
@media (max-width:700px){
  .hook h1{font-size:22px;line-height:28px}
  .hook p{font-size:13.5px;line-height:20px}
  .q>h2,.q>h1{font-size:16px;line-height:22px;margin-bottom:12px}
  .q>.hint,.hint{font-size:13px;line-height:19px}
  .fld>span,.fld>label{font-size:12.5px;margin-bottom:6px}
  .in{height:46px}
  .tabs button{font-size:13.5px}
  .tile{min-height:60px;gap:12px;padding:10px 14px;font-size:14.5px;line-height:20px}
  .tile__i{width:34px;height:34px}
  .tile__i svg{width:18px;height:18px}
  .opt{min-height:48px;font-size:14.5px}
  .qq>h3{font-size:14.5px;line-height:21px}
  .frow .ft b{font-size:14.5px}
  .frow .ft span{font-size:13px}
  .note,.q .note{font-size:13px;line-height:19px}
  .res__top b{font-size:14.5px}
  .res__top small{font-size:12.5px}
  .res__o{font-size:13px}
  .res__n{font-size:38px}
  .res__p{font-size:13px;line-height:19px}
  .paxrow b{font-size:14px}
  .why li{font-size:13px;line-height:19px}
  .go,.go--full{height:50px;font-size:15px}
  .co-h h1{font-size:18px;line-height:24px}
  .co-h p{font-size:13px;line-height:19px}
  .sec-h .tt b{font-size:15px;line-height:21px}
  .sec-h .tt small{font-size:12.5px;line-height:18px}
  .chk{font-size:13.5px;line-height:20px}
  .pcard__h b,.drow__b b{font-size:14.5px}
  .drow__b small{font-size:12.5px}
  .keystep p{font-size:13px;line-height:19px}
  .done h1{font-size:20px;line-height:26px}
  .done p{font-size:14px;line-height:21px}
  .refer b{font-size:15px}
  .refer p{font-size:13px;line-height:19px}
  .mtop .logo{font-size:21px} .mtop .logo svg{width:25px;height:25px}
  .chip__t{height:34px;font-size:12.5px}
  .ts{font-size:11.5px}
}
@media (max-width:700px){
  .hook h1{font-size:21px;line-height:26px}
  .hook p{font-size:13px;line-height:19px;margin-top:6px}
  .q{padding:18px 16px 20px}
  .q>h2,.q>h1{font-size:15.5px;line-height:21px}
  .q>.hint,.hint{font-size:12.5px;line-height:18px}
  .tile{min-height:54px;font-size:14px}
  .tile__i{width:30px;height:30px}
  .tiles{gap:8px}
  .opt{min-height:46px;font-size:14px}
  .in{height:44px}
  .go,.go--full{height:48px;font-size:14.5px}
  .act .back{width:48px;height:48px}
}

/* Until the first screen is drawn (claim.js adds .sf-ready), the footer and the pinned button bar keep their
   space but stay invisible: before, the footer showed mid-screen and dropped ~60px, and the bar grew as its
   buttons arrived. */
html:not(.sf-ready) .foot, html:not(.sf-ready) #act, html:not(.sf-ready) .sheet__f{visibility:hidden}
html:not(.sf-ready) #app{min-height:60vh}
/* phones: the footer lives below the first screen, so a step or tab that changes the screen's height never
   makes it bounce at the bottom, just above the pinned button bar */
@media (max-width:900px){ #app{min-height:calc(100svh - 150px)} }

/* Desktop claim summary: a clean list, not a ticket (owner, 26 Oct 2026: the pass looked childish). */
.sum{background:#fff;border:1px solid var(--rule,#DEE4ED);border-radius:16px;padding:20px 22px 22px;box-shadow:0 1px 2px rgba(1,19,58,.04),0 8px 24px rgba(1,19,58,.06);color:var(--ink,#01133A)}
.sum__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule,#DEE4ED)}
.sum__k{font:600 12px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#5F6C85)}
.sum__air{display:inline-flex;align-items:center;gap:8px;font:600 14px/1.2 var(--f);color:var(--ink,#01133A);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum__air img,.sum__air .alg{border-radius:6px;flex:none}
.sum__l{margin:0}
.sum__l>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule,#EEF2F7)}
.sum__l>div[hidden]{display:none}
.sum__l dt{font:500 14px/1.3 var(--f);color:var(--muted,#5F6C85);flex:none}
.sum__l dd{margin:0;display:flex;align-items:center;gap:7px;min-width:0;font:600 15px/1.3 var(--f);color:var(--ink,#01133A);text-align:right}
.sum__l dd b{font-weight:700;letter-spacing:.02em}
.sum__l dd span:not(.stamp){font-weight:400;color:var(--muted,#5F6C85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum__l .flg{width:18px;height:13px;border-radius:2px;flex:none}
.sum__via{justify-content:flex-end!important;font:500 13px/1.3 var(--f);color:var(--muted,#5F6C85);padding-top:0!important}
.sum__l .stamp{display:inline-block;padding:3px 9px;border:0;border-radius:99px;background:var(--tile,#EEF3FA);color:var(--ink,#01133A);font:600 12.5px/1.4 var(--f);letter-spacing:.02em;text-transform:none;transform:none}
.sum__l .stamp.blue{background:#E3F7EF;color:#13623E}
.sum__amt{margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--tile,#F4F7FB)}
.sum__amt small{display:block;font:500 13px/1.3 var(--f);color:var(--muted,#5F6C85)}
.sum__amt .amtv{display:block;margin-top:4px;font:700 30px/1.15 var(--f);letter-spacing:-.025em;color:var(--ink,#01133A)}
.sum__amt .amtv.is-empty{color:#B6BFCC}
.sum__amt .amts{margin-top:4px;font:400 13px/1.45 var(--f);color:var(--muted,#5F6C85)}

/* desktop: the step area keeps one height, so Back and Continue stay in the same place from step to step
   (they moved between 509px and 643px down the page); a longer step still pushes them down */
@media (min-width:901px){ #app{min-height:540px} }

/* Passengers step: mobile and ticket type folded behind small links (most people need neither: mobile is
   optional, nearly every ticket is a paid one). A field opens on its own when it already holds an answer. */
.more{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;margin-top:2px}
.more__d>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font:600 14px/1.4 var(--f);color:var(--blue,#0A68BF);padding:4px 0}
.more__d>summary::-webkit-details-marker{display:none}
.more__d>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--tile,#EEF3FA);font:700 13px/1 var(--f)}
.more__d[open]>summary::before{content:"–"}
.more__d>summary small{font-weight:400;color:var(--muted,#5F6C85)}
.more__d[open]{padding-bottom:6px}

/* Smooth pass (owner, 27 Oct): pieces that appear inside a screen after it has loaded (the result, a follow-up
   question) only fade, they don't slide, so nothing on the page moves while you read it. The page always keeps
   room for a scrollbar, so a short screen and a long one sit in exactly the same place. */
.enter{animation:in .22s ease-out both} @keyframes in{from{opacity:0}}
html{scrollbar-gutter:stable}

/* ================= Flow v7 (owner, 27 Oct 2026): AirHelp / ReFly order, one job per screen ================= */
/* "what happened": every question is its own card, so the divider between questions goes */
#qbox{display:grid;gap:16px}
#qbox>.q.qq{margin-top:0;border-top:0;padding-top:24px}
#qbox>.q.qq>h2{margin-bottom:12px}
#qbox>.q.qq>.hint{margin:-6px 0 12px}
/* who's claiming: the lead's name sits in the card itself, not in a passenger box */
.pax__i--lead{display:block;padding:0;background:none;box-shadow:none}
.pax__i--lead>.fhint{margin-top:8px}
/* the lead, already named, above the other passengers */
.pax__you{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 14.5px/20px var(--f);color:var(--ink)}
.pax__you svg{color:var(--star)}
.pax__you small{font-weight:400;color:var(--muted)}
#secb2>h2,#secb3>h2,#secb4>h2{margin-bottom:8px}
@media (max-width:900px){ #qbox>.q.qq{padding-top:20px} }
/* the three checkout screens are plain cards now (the accordion indent goes) */
#secb2,#secb3,#secb4{padding:0}
#secb3>.lead,#secb4>.lead{margin:0 0 16px}
/* the checkout screens' headings match every other screen's */
#secb2>h2,#secb3>h2,#secb4>h2{display:block;font:500 17px/24px var(--f);letter-spacing:-.01em;color:var(--ink)}
@media (max-width:900px){ #secb2>h2,#secb3>h2,#secb4>h2{font-size:16px;line-height:22px} }
@media (max-width:420px){ #secb2>h2,#secb3>h2,#secb4>h2{font-size:15.5px;line-height:21px} }
/* desktop: the help bubble never sits on the main button (it lives in the bottom-right corner too) */
@media (min-width:901px){ #act{padding-right:76px} }