@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/big-shoulders-display-latin-wght-normal.woff2) format("woff2")}
/* numerals only: Big Shoulders' "1" reads as an "I", so digits come from Saira Extra Condensed */
@font-face{font-family:"TF Digits";font-style:normal;font-weight:100 300;font-display:swap;size-adjust:108%;unicode-range:U+0030-0039,U+003A;src:url(/fonts/saira-extra-condensed-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"TF Digits";font-style:normal;font-weight:400 900;font-display:swap;size-adjust:108%;unicode-range:U+0030-0039,U+003A;src:url(/fonts/saira-extra-condensed-latin-400-normal.woff2) format("woff2")}
/* Josefin Sans: small x-height and caps that hug the ascender. size-adjust lifts it ~14% (≈ +2px on body copy);
   the ascent/descent overrides put equal space above the caps and below the baseline, so text centres in buttons/pills. */
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/josefin-sans-latin-wght-normal.woff2) format("woff2");
  size-adjust:114%;ascent-override:84%;descent-override:21.5%;line-gap-override:0%}

:root{
  /* X-profile palette, sampled from the official banner + avatar (art/xbrand/) */
  --bg:#030607; --navy:#06100f;
  --glass:rgba(4,11,13,.66); --glass2:rgba(10,38,44,.55);
  --line:rgba(73,195,212,.15); --line2:rgba(73,195,212,.27); --lineOn:rgba(126,235,244,.78);
  --field:rgba(1,5,6,.62);
  --silver:#f1e8d6; --pearl:#f6efe1; --ice:#6fe0ec; --steel:#49c3d4; --steelD:#0d3e4b;
  --cyan:#49c3d4; --cyanB:#7eebf4; --bulb:#f7e6ca; --amber:#bb9d78;
  --glow:0 0 0 1px rgba(126,235,244,.55),0 0 22px rgba(73,195,212,.38);
  --text:#ece6da; --muted:#9fb1b0; --dim:#6d8382; --bad:#ff9aa8; --good:#8fe8d8;
  --deco:"TF Digits","Big Shoulders Display","Josefin Sans",system-ui,sans-serif;
  --sans:"Josefin Sans",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(2,6,7,.38),rgba(2,6,7,0) 70%),
    linear-gradient(180deg,rgba(2,6,7,.35) 0%,rgba(2,6,7,.1) 35%,rgba(2,6,7,.6) 100%),
    image-set(url(/assets/bg-xbrand-soft.webp) type("image/webp"),url(/assets/bg-xbrand-soft.jpg) type("image/jpeg")) 9% 0/cover no-repeat,var(--bg)}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.xh{font-weight:inherit}

/* nav */
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:40px;height:64px;padding:0 40px;background:rgba(2,6,7,.72);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo img{display:block;width:30px;height:30px}
.logo span{font:400 25px/1 var(--deco);text-transform:uppercase;letter-spacing:.24em;color:var(--pearl)}
.links{display:flex;gap:6px;height:100%}
.links a{position:relative;display:flex;align-items:center;padding:0 12px;text-decoration:none;color:var(--muted);font-weight:500;font-size:14.5px}
.links a:hover{color:var(--text)}
.links a.active{color:var(--pearl)}
.links a.active::after{content:"";position:absolute;left:10px;right:10px;bottom:12px;height:2px;border-radius:2px;background:var(--silver)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.badge{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border:1px solid var(--line2);border-radius:999px;background:rgba(3,10,12,.7);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ice)}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--ice)}
.btn-nav{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;background:var(--silver);color:var(--navy);font-weight:600;font-size:14px;text-decoration:none}
.btn-nav:hover{background:#fff}

/* page */
.page{max-width:1240px;margin:0 auto;padding:28px 40px 56px}
.intro{text-align:center}
.intro-copy{max-width:840px;margin:16px auto 0}
.intro-copy p,.intro-sub{margin:0 0 8px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.intro-copy p.lead{font-size:17px;color:var(--text);font-weight:500}
.intro-sub{margin:12px auto 0;font-size:16px}
.facts{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:12px;max-width:860px;margin:18px auto 0}
.fact{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:74px;padding:12px 18px;border:1px solid var(--line2);border-radius:14px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.f-label{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.f-value{font:300 32px/1 var(--deco);letter-spacing:.06em;color:var(--pearl);text-transform:uppercase}
.f-value.small{font:500 15px/1.35 var(--sans);letter-spacing:0;text-transform:none}
.fact-text{font-size:14px;line-height:1.45;color:var(--muted)}
.f-note{margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.f-note-short{display:none;font-size:13px;color:var(--muted)}
.fact-text a{color:var(--ice);font-weight:600;text-decoration:none;white-space:nowrap}
.fact-text a:hover{text-decoration:underline}
.foot{margin:28px 0 0;text-align:center;font-size:13px;color:var(--dim)}
/* compact hero once the flow has started (steps 2–4), desktop/tablet only */
@media (min-width:900px){
  body:not([data-step="1"]) .page{padding-top:22px}
  body:not([data-step="1"]) .intro h1{font-size:50px}
  body:not([data-step="1"]) .intro-sub{margin-top:10px}
  body:not([data-step="1"]) .facts{max-width:none;grid-template-columns:repeat(3,auto);justify-content:center;margin-top:14px}
  body:not([data-step="1"]) .fact *{white-space:nowrap}
  body:not([data-step="1"]) .fact{min-height:0;padding:9px 16px;flex-direction:row;align-items:baseline;justify-content:center;gap:10px}
  body:not([data-step="1"]) .fact:nth-child(2){flex-direction:row}
  body:not([data-step="1"]) .f-value{font-size:25px}
  body:not([data-step="1"]) .f-value.small{font-size:14px}
  body:not([data-step="1"]) .fact-text{display:block;text-align:center;font-size:13px}
  body:not([data-step="1"]) .f-note{display:none}
  body:not([data-step="1"]) .f-note-short{display:inline}
  body:not([data-step="1"]) .fact-text a{margin-left:6px}
  body:not([data-step="1"]) .steps{margin-top:18px}
}
body.closed .badge{color:var(--muted)}
body.closed .badge i{background:var(--dim)}
.intro h1{margin:0;font:300 56px/1 var(--deco);text-transform:uppercase;letter-spacing:.08em;color:var(--pearl)}
.intro p{margin:12px 0 0;font-size:16px;color:var(--muted)}

/* step tabs */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:22px 0 16px;padding:0}
.steps li{display:flex;align-items:center;gap:12px;height:50px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:rgba(3,10,12,.45);color:var(--dim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);font:600 12px var(--sans);color:var(--muted)}
.steps span{font:400 21px/1 var(--deco);text-transform:uppercase;letter-spacing:.14em}
.steps li.done{color:var(--muted);cursor:pointer}
.steps li.done b{background:var(--steelD);border-color:var(--steelD);color:var(--pearl);font-size:0}
.steps li.done b::after{content:"✓";font-size:12px}
.steps li.current{border-color:var(--lineOn);background:var(--glass2);color:var(--pearl)}
.steps li.current b{background:var(--silver);border-color:var(--silver);color:var(--navy)}
body.applied .steps li.done{cursor:default}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:20px;align-items:start}
.panel{border:1px solid var(--line2);border-radius:18px;background:var(--glass);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:inset 0 1px 0 rgba(241,232,214,.06)}
.screen{padding:22px 28px 22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px}
h2{margin:0;font:400 27px/1 var(--deco);text-transform:uppercase;letter-spacing:.12em;color:var(--pearl)}
h2 span{color:var(--steel)}
.hint{margin:8px 0 14px;color:var(--muted)}
.ref-chip,.who,.chain{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--line2);border-radius:999px;background:rgba(2,6,7,.5);color:var(--muted);font-size:13px;font-weight:500}
.ref-chip b,.who b{color:var(--pearl);font-weight:600}
.who{color:var(--pearl);font-weight:600}
.who.on{font-weight:500;color:var(--muted)}
.chain i{width:6px;height:6px;border-radius:50%;background:var(--ice)}

/* forms */
.form{display:grid;gap:8px;margin-top:22px}
.label{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;align-items:center;height:56px;border:1px solid var(--line);border-radius:12px;background:var(--field);overflow:hidden}
.field:focus-within{border-color:var(--lineOn)}
.field.bad{border-color:rgba(255,154,168,.6)}
.field .pre{display:grid;place-items:center;width:50px;height:100%;border-right:1px solid var(--line);font:500 18px var(--sans);color:var(--steel)}
.field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 16px;font:500 17px var(--sans);color:var(--pearl)}
.field input::placeholder{color:var(--dim);font-weight:400}
.field.mono input{font:500 15.5px var(--mono);letter-spacing:.01em}
.field .ok{margin-right:16px;color:var(--good);font-weight:700}
.msg{min-height:20px;margin:2px 0 0;font-size:13.5px;color:var(--dim)}
.msg.err{color:var(--bad)}.msg.ok{color:var(--good)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border:1px solid transparent;border-radius:12px;background:var(--silver);color:var(--navy);font:600 15px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:#fff}
.btn:disabled{background:rgba(73,195,212,.12);color:var(--dim);cursor:not-allowed}
.btn.ghost{background:rgba(2,6,7,.4);border-color:var(--line2);color:var(--text)}
.btn.ghost:hover{border-color:var(--lineOn)}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.fine{font-size:13px;color:var(--dim);margin:0}


/* step 2: tasks */
.tasks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.task{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(2,6,7,.32)}
.num{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);font:400 21px/1 var(--deco);font-style:normal;color:var(--ice)}
.t-body{flex:1;min-width:0;display:grid}
.t-body strong{font-weight:600;font-size:15px}
.t-body small{font-size:13px;color:var(--muted)}
.t-btn{flex:none;height:38px;min-width:104px;padding:0 14px;border:1px solid var(--line2);border-radius:10px;background:rgba(2,6,7,.4);font-weight:600;font-size:13.5px;cursor:pointer}
.t-btn:hover{border-color:var(--lineOn)}
.task.pending .t-btn{color:var(--ice);border-color:rgba(126,235,244,.45)}
.task.done{border-color:rgba(126,235,244,.32);background:rgba(13,62,75,.42)}
.task.done .num{background:var(--silver);border-color:var(--silver);color:var(--navy);font-size:0}
.task.done .num::after{content:"✓";font:700 15px var(--sans)}
.task.done .t-btn{background:var(--silver);border-color:var(--silver);color:var(--navy)}
.task.reply{align-items:flex-start}
.task.reply .num,.task.reply .t-btn{margin-top:2px}
.bubble{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 8px 8px 13px;border:1px solid var(--line);border-radius:12px;background:var(--field);font-size:14px;color:var(--text)}
.bubble span{flex:1}
.count{margin-left:auto;font-size:14px;color:var(--muted)}
.count b{color:var(--pearl);font-weight:700}

/* step 3 */
.checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.checks li{position:relative;padding-left:24px;font-size:14px;color:var(--muted)}
.checks li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--ice);font-weight:700}
.checks.small li{font-size:13px}
#s3 .checks{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(2,6,7,.32)}

/* step 4 */
.card-frame{line-height:0;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--navy)}
.card-frame canvas{width:100%;height:auto}
#s4 .card-frame{margin-top:18px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}

/* side */
.side{position:sticky;top:84px;display:grid;gap:16px}
.side .panel{padding:20px}
.side-label{margin-bottom:14px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.card-frame.small{border-radius:12px}
.rows{margin:16px 0 0;display:grid;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:rgba(2,6,7,.32)}
.row dt{font-size:13px;color:var(--muted)}
.row dd{margin:0;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--pearl);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row dd.empty{color:var(--dim);font-weight:500}
.row dd.mono{font-family:var(--mono);font-size:13px}
.segs{display:flex;gap:4px}
.segs i{width:22px;height:5px;border-radius:3px;background:rgba(73,195,212,.2)}
.segs i.on{background:var(--silver)}
.preview .checks{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.share{display:none}
body[data-step="4"] .preview{display:none}
body[data-step="4"] .share{display:block}
.big-count{display:flex;align-items:baseline;gap:12px;margin:-2px 0 18px}
.big-count b{font:300 64px/1 var(--deco);color:var(--pearl)}
.big-count span{color:var(--muted);font-size:14px}
.share .label{display:block;margin-bottom:8px}
.copyrow{display:flex;gap:8px}
.copyrow input{flex:1;min-width:0;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--field);color:var(--text);font:500 13px var(--mono);outline:0}
.copybtn{height:46px;padding:0 18px;border:0;border-radius:11px;background:var(--silver);color:var(--navy);font-weight:600;cursor:pointer}
.share .checks{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);opacity:0;pointer-events:none;padding:11px 18px;border:1px solid var(--line2);border-radius:12px;background:#071114;color:var(--text);font-weight:500;z-index:10}
.toast.show{opacity:1}
.toast.err{border-color:rgba(255,154,168,.6)}

/* responsive */
@media (max-width:1200px){
  .links{display:none}
  .layout{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:640px){
  body::before{background:linear-gradient(180deg,rgba(2,6,7,.25),rgba(2,6,7,.45) 45%,rgba(2,6,7,.8)),image-set(url(/assets/bg-xbrand-soft.webp) type("image/webp"),url(/assets/bg-xbrand-soft.jpg) type("image/jpeg")) 64% 0/auto 100% no-repeat,var(--bg)}
  .nav{height:58px;padding:0 16px;gap:12px}
  .logo span{font-size:22px;letter-spacing:.2em}
  .badge{display:none}
  .btn-nav{height:36px;padding:0 12px;font-size:13px}
  .btn-nav>span{display:none}
  .page{padding:22px 14px 40px}
  .intro h1{font-size:40px}
  .intro p{font-size:15px;margin-top:8px}
  .steps{gap:6px;margin:18px 0 14px}
  .steps li{height:42px;padding:0;justify-content:center;gap:0}
  .steps li span{display:none}
  .steps li.current{gap:8px;padding:0 10px}
  .steps li.current span{display:inline;font-size:18px}
  .steps{display:flex}
  .steps li{flex:1}
  .steps li.current{flex:3}
  .screen{padding:20px 16px 20px}
  h2{font-size:24px}
  .panel-head{flex-wrap:wrap;gap:10px}
  .form{margin-top:18px}
  .panel-foot{flex-wrap:wrap}
  .panel-foot .fine{order:2;width:100%;text-align:center}
  .panel-foot .btn:not(.ghost){flex:1}
  .actions{grid-template-columns:1fr}
  .side .panel{padding:16px}
  .intro-copy p{font-size:15px}
  .intro-copy p.lead{font-size:16px}
  .facts{grid-template-columns:1fr 1fr;gap:8px}
  .fact{padding:12px 14px;min-height:70px}
  .fact-text{grid-column:span 2}
  .f-value{font-size:28px}
}

/* ---------- X-profile accents: cyan neon = main accent, cream = text/logo/primary buttons, bulb ivory = secondary ---------- */
.logo img{width:32px;height:32px}
.logo span{color:var(--silver)}
.links a.active::after{background:var(--cyan);box-shadow:0 0 10px rgba(73,195,212,.7)}
.badge{border-color:rgba(73,195,212,.45);background:rgba(3,14,16,.75);color:var(--cyanB)}
.badge i{background:var(--cyanB);box-shadow:0 0 8px var(--cyan)}
.btn-nav,.btn:not(.ghost):not(:disabled),.copybtn{box-shadow:0 0 0 1px rgba(126,235,244,.4),0 0 22px rgba(73,195,212,.3)}
.btn-nav:hover,.btn:not(.ghost):not(:disabled):hover,.copybtn:hover{background:#fffaf0;box-shadow:var(--glow)}
.btn.ghost:hover,.t-btn:hover{border-color:var(--cyan)}
.intro h1{color:var(--silver);text-shadow:0 0 28px rgba(247,230,202,.22)}
.f-value{color:var(--bulb);text-shadow:0 0 16px rgba(247,230,202,.28)}
.f-value.small{color:var(--text);text-shadow:none}
.fact-text a,.ref-chip b{color:var(--cyanB)}
h2{color:var(--silver)}
h2 span{color:var(--cyan)}
.steps li.current{border-color:var(--lineOn);background:rgba(8,40,46,.62);box-shadow:0 0 18px rgba(73,195,212,.22),inset 0 0 0 1px rgba(126,235,244,.12)}
.steps li.current b{background:var(--cyanB);border-color:var(--cyanB);color:#021012;box-shadow:0 0 10px rgba(73,195,212,.7)}
.steps li.done b{background:rgba(13,62,75,.9);border-color:rgba(126,235,244,.5);color:var(--cyanB)}
.field:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(73,195,212,.18)}
.field .pre{color:var(--cyan)}
.num{color:var(--cyan)}
.task.done{border-color:rgba(126,235,244,.38);background:rgba(10,52,60,.42)}
.task.done .num{background:var(--cyanB);border-color:var(--cyanB);color:#021012}
.task.done .t-btn{background:rgba(73,195,212,.14);border-color:rgba(126,235,244,.6);color:var(--cyanB)}
.segs i.on{background:var(--cyanB);box-shadow:0 0 8px rgba(73,195,212,.75)}
.count b{color:var(--cyanB)}
.checks li::before,.chain i{color:var(--cyan)}
.chain i{background:var(--cyanB);box-shadow:0 0 8px var(--cyan)}
.big-count b{color:var(--bulb);text-shadow:0 0 22px rgba(247,230,202,.3)}
.card-frame{background:#000}
.side .panel .side-label,.label{color:#a9bdbc}