/* ==== KLIXEY SKY TOKENS (from klixey-design-system) ==== */
  :root{
    --blue-50:#EAF4FF; --blue-100:#D3E8FF; --blue-200:#ADD4FF; --blue-300:#93C9FF;
    --blue-400:#4DA6FF; --blue-500:#0282FD; --blue-700:#0A66D8; --blue-800:#0A4FA8; --blue-900:#0A2E5C;
    --citrus-300:#FFE234; --on-citrus:#2A2400;
    --gray-50:#F7F9FC; --gray-100:#EFF2F7; --gray-200:#E2E7EE; --gray-300:#CBD2DD;
    --gray-400:#97A1B0; --gray-500:#5C6675; --gray-700:#353D4B; --gray-900:#0B0E14;
    --green-700:#157A45; --green-50:#E6F6ED;
    --amber-500:#C77700; --amber-700:#7A4A00; --amber-50:#FFF1DA;
    --red-500:#D12626; --red-600:#C01F1F; --red-50:#FCEBEB;
    --on-band-muted:#AEB6C4;
    --font-display:"Instrument Serif",Georgia,serif;
    --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --tracking-caps:0.08em;
    --r-sm:10px; --r-md:14px; --r-lg:18px; --r-2xl:30px; --r-pill:999px;
    --shadow-2:0 1px 3px rgba(10,46,92,.06),0 10px 30px -22px rgba(10,46,92,.30);
    --shadow-3:0 2px 6px rgba(10,46,92,.07),0 26px 50px -32px rgba(10,46,92,.38);
    --shadow-brand:0 18px 40px -20px rgba(2,130,253,.55);
    --ease-out:cubic-bezier(.22,1,.36,1); --dur-2:220ms;
  }
  *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html{ height:100%; }
  body{
    font-family:var(--font-sans); background:var(--gray-50); color:var(--gray-900);
    display:flex; flex-direction:column; align-items:center; min-height:100dvh;
    padding:18px 14px 28px; overflow-x:hidden;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  /* soft sky washes (hero treatment) */
  .orb{ position:fixed; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
  .orb.a{ width:480px; height:480px; background:var(--blue-100); opacity:.8; top:-160px; left:-160px; }
  .orb.b{ width:420px; height:420px; background:var(--blue-50); opacity:.9; bottom:-160px; right:-140px; }

  .brand{ z-index:2; display:flex; align-items:center; gap:10px; margin-bottom:14px; user-select:none; }
  .brand .logo{ font-weight:600; letter-spacing:var(--tracking-caps); font-size:14px; color:var(--blue-500); }
  .brand .sep{ width:1px; height:14px; background:var(--gray-300); }
  .brand .tag{ font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--gray-500); }

  .app{
    z-index:2; width:100%; max-width:480px; background:#fff;
    border:1px solid var(--gray-200); border-radius:var(--r-2xl); box-shadow:var(--shadow-3);
    overflow:hidden; display:flex; flex-direction:column; min-height:620px; flex-shrink:0; position:relative;
  }

  /* progress — 5 moat segments, 2 ticks each */
  .progress{ display:flex; gap:5px; padding:18px 22px 0; }
  .pseg{ flex:1; display:flex; gap:3px; }
  .ptick{ flex:1; height:5px; border-radius:3px; background:var(--gray-200); transition:background var(--dur-2); }
  .ptick.done{ background:linear-gradient(90deg,var(--blue-700),var(--blue-400)); }
  .plabels{ display:flex; gap:5px; padding:5px 22px 0; }
  .plabel{ flex:1; font-size:9px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--gray-400); text-align:center; font-weight:600; transition:color var(--dur-2); }
  .plabel.active{ color:var(--blue-700); }

  .screen{ flex:1; display:flex; flex-direction:column; padding:22px 24px 24px; animation:fadeUp .38s var(--ease-out) both; }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

  .kicker{ font-size:12px; letter-spacing:var(--tracking-caps); text-transform:uppercase; font-weight:600; color:var(--blue-700); }
  .serif{ font-family:var(--font-display); font-style:italic; font-weight:400; }
  h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(36px,10vw,46px); line-height:1.08; letter-spacing:-0.01em; margin:10px 0 12px; }
  h2{ font-family:var(--font-display); font-weight:400; font-size:29px; line-height:1.16; letter-spacing:-0.01em; margin:8px 0 8px; }
  h3{ font-family:var(--font-sans); font-size:16px; font-weight:600; }
  p.body{ font-size:14.5px; line-height:1.6; color:var(--gray-700); }
  p.body b{ font-weight:600; }

  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    min-height:48px; border:1.5px solid var(--blue-700); cursor:pointer;
    font-family:var(--font-sans); font-weight:600; letter-spacing:.01em;
    font-size:16px; padding:12px 24px; border-radius:var(--r-pill); color:#fff;
    background:var(--blue-700); box-shadow:var(--shadow-brand);
    transition:transform .15s var(--ease-out), background var(--dur-2), box-shadow .15s;
  }
  .btn:hover{ background:var(--blue-800); border-color:var(--blue-800); }
  .btn:active{ transform:scale(.98); }
  .btn.coral{ background:var(--citrus-300); border-color:var(--citrus-300); color:var(--on-citrus); box-shadow:none; }
  .btn.coral:hover{ background:#FFEC73; border-color:#FFEC73; }
  .btn:focus-visible, .opt:focus-visible, .ghost:focus-visible, input:focus-visible{ outline:2px solid var(--blue-700); outline-offset:3px; }
  .inter .btn:focus-visible, .weak :focus-visible{ outline-color:#fff; }
  .ghost{ background:none; border:none; cursor:pointer; font-family:var(--font-sans); font-size:13px; color:var(--gray-500); padding:10px; text-decoration:underline; text-underline-offset:3px; border-radius:var(--r-sm); }

  /* intro */
  .chips{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px; }
  .chip{ font-size:12px; font-weight:500; color:var(--gray-700); background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--r-pill); padding:6px 13px; }
  .introStats{ display:flex; gap:9px; margin:18px 0 20px; }
  .istat{ flex:1; background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--r-md); padding:12px 11px; }
  .istat .n{ font-family:var(--font-display); font-weight:400; font-size:22px; color:var(--blue-700); }
  .istat .l{ font-size:10.5px; line-height:1.4; color:var(--gray-500); margin-top:3px; }

  /* question */
  .moatTag{ display:inline-flex; align-items:center; gap:6px; background:var(--blue-50); color:var(--blue-700); font-size:11px; font-weight:600; letter-spacing:var(--tracking-caps); text-transform:uppercase; border-radius:var(--r-pill); padding:6px 13px; }
  .qnum{ font-size:12px; color:var(--gray-400); font-weight:600; margin-left:auto; }
  .qtop{ display:flex; align-items:center; }
  .qblock{ min-height:172px; margin:16px 0 0; }
  .qtext{ font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1.28; letter-spacing:-0.005em; }
  .qsub{ font-family:var(--font-sans); font-size:14px; line-height:1.5; color:var(--gray-500); margin-top:9px; }
  .qtext b{ font-weight:400; color:var(--blue-700); }
  .opts{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
  .opt{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
    background:#fff; border:1.5px solid var(--gray-300); border-radius:var(--r-md); padding:14px 16px;
    font-family:var(--font-sans); transition:border-color .15s, background .15s, transform .12s;
  }
  .opt:hover{ border-color:var(--gray-400); }
  .opt:active{ transform:scale(.985); }
  .opt .dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--gray-300); flex:none; display:flex; align-items:center; justify-content:center; transition:all .15s; }
  .opt .ol{ font-size:16px; font-weight:600; color:var(--gray-900); }
  .opt .od{ font-size:12.5px; color:var(--gray-500); margin-top:1px; }
  .opt .pts{ margin-left:auto; font-size:12px; font-weight:600; color:var(--gray-400); }
  .opt.sel{ border-color:var(--blue-700); background:var(--blue-50); }
  .opt.sel .dot{ border-color:var(--blue-700); background:var(--blue-700); }
  .opt.sel .dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; }
  .opt.sel .pts{ color:var(--blue-700); }
  .qfoot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:16px; }

  /* interstitial — dark band-ink */
  .inter{ background:var(--gray-900); color:#fff; margin:-22px -24px -24px; padding:34px 26px 26px; flex:1; display:flex; flex-direction:column; }
  .inter .kicker{ color:var(--citrus-300); }
  .interQuote{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:24px; line-height:1.4; margin:16px 0 12px; color:#fff; }
  .interQuote b{ color:var(--blue-300); font-style:normal; font-weight:400; }
  .interSrc{ font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--on-band-muted); margin-bottom:10px; }
  .interBig{ font-family:var(--font-display); font-weight:400; font-size:60px; letter-spacing:-0.01em; color:var(--blue-300); }

  /* email gate */
  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:12px; font-weight:600; letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--gray-500); margin-bottom:6px; }
  .field input{
    width:100%; font-family:var(--font-sans); font-size:16px; padding:13px 16px;
    border:1.5px solid #6E7681; border-radius:var(--r-sm); background:#fff; color:var(--gray-900);
  }
  .field input.err{ border-color:var(--red-500); }
  .errmsg{ font-size:12px; color:var(--red-600); margin-top:5px; display:none; }
  .lockRow{ display:flex; align-items:center; gap:9px; background:var(--blue-50); border:1px dashed var(--blue-200); border-radius:var(--r-md); padding:11px 14px; margin:14px 0 18px; }
  .lockRow .ic{ font-size:16px; }
  .lockRow p{ font-size:12px; line-height:1.5; color:var(--gray-500); }

  /* results */
  .scoreWrap{ display:flex; flex-direction:column; align-items:center; margin:6px 0 4px; }
  .gauge{ position:relative; width:190px; height:112px; }
  .gauge svg{ width:190px; height:112px; overflow:visible; }
  .gauge .val{ position:absolute; left:0; right:0; bottom:0; text-align:center; }
  .gauge .val .n{ font-family:var(--font-display); font-weight:400; font-size:48px; letter-spacing:-0.01em; line-height:1; }
  .gauge .val .d{ font-size:12px; color:var(--gray-500); font-weight:500; }
  .band{ display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-pill); padding:7px 16px; font-size:13px; font-weight:600; margin-top:12px; }
  .band.exposed{ background:var(--red-50); color:var(--red-600); }
  .band.halfway{ background:var(--amber-50); color:var(--amber-700); }
  .band.proof{ background:var(--green-50); color:var(--green-700); }
  .bandDesc{ font-size:13.5px; line-height:1.55; color:var(--gray-700); text-align:center; margin:10px 4px 0; }

  .moats{ margin:18px 0 6px; }
  .mrow{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .mrow .mn{ width:122px; font-size:12px; font-weight:600; color:var(--gray-900); flex:none; }
  .mbar{ flex:1; height:9px; border-radius:5px; background:var(--gray-200); overflow:hidden; }
  .mfill{ height:100%; border-radius:5px; width:0; background:linear-gradient(90deg,var(--blue-700),var(--blue-400)); transition:width .9s var(--ease-out); }
  .mfill.low{ background:linear-gradient(90deg,var(--amber-500),#E09A2B); }
  .mrow .ms{ width:26px; font-size:11.5px; font-weight:600; color:var(--gray-500); text-align:right; flex:none; }

  .weak{ background:var(--gray-900); color:#fff; border-radius:var(--r-lg); padding:18px 18px 16px; margin:12px 0; }
  .weak .wk{ font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; font-weight:600; color:var(--citrus-300); }
  .weak h3{ font-family:var(--font-display); font-weight:400; font-size:20px; margin:6px 0 8px; }
  .weak ul{ list-style:none; }
  .weak li{ font-size:12.5px; line-height:1.55; color:var(--on-band-muted); padding-left:16px; position:relative; margin-bottom:6px; }
  .weak li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--citrus-300); }

  .cta{ background:var(--blue-700); color:#fff; border-radius:var(--r-lg); padding:18px; margin:6px 0 14px; }
  .cta .ck{ font-size:11px; letter-spacing:var(--tracking-caps); text-transform:uppercase; font-weight:600; color:var(--blue-100); }
  .cta h3{ font-family:var(--font-display); font-weight:400; font-size:20px; line-height:1.25; margin:6px 0 6px; }
  .cta p{ font-size:12.5px; line-height:1.55; color:var(--blue-50); margin-bottom:12px; }
  .cta p b{ font-weight:600; }
  .cta .cbtn{ display:flex; align-items:center; justify-content:center; min-height:44px; background:#fff; color:var(--blue-700); font-weight:600; font-size:15px; border-radius:var(--r-pill); padding:10px; text-decoration:none; }
  .resActions{ display:flex; gap:10px; }
  .resActions .btn{ font-size:14px; min-height:46px; padding:10px 16px; }
  .resActions .alt{ background:#fff; color:var(--gray-900); border:1.5px solid #6E7681; box-shadow:none; }
  .resActions .alt:hover{ background:var(--gray-900); color:#fff; border-color:var(--gray-900); }
  .toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(80px); background:var(--gray-900); color:#fff; font-size:13px; padding:11px 18px; border-radius:var(--r-pill); z-index:50; transition:transform .3s var(--ease-out); box-shadow:var(--shadow-2); }
  .toast.show{ transform:translateX(-50%) translateY(0); }

  @media (max-width:400px){ h1{ font-size:34px; } .qtext{ font-size:25px; } .qblock{ min-height:158px; } .qsub{ font-size:13px; } .mrow .mn{ width:106px; font-size:11px; } }