*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg:      #ffffff;
    --surface: #f2f2f2;
    --card:    #ffffff;
    --border:  rgba(0,87,125,0.16);
    --green:   #00577d;
    --greenL:  #00688f;
    --teal:    #5bbed3;
    --gold:    #eeb311;
    --red:     #e66b19;
    --orange:  #e66b19;
    --purple:  #5e0f68;
    --link:    #5bb0c4;
    --grey:    #f2f2f2;
    --text:    #001f2d;
    --muted:   #565656;
  }
  html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Barlow', sans-serif; }
  body { min-height: 100vh; padding: 40px 20px; }
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--green); border-radius: 3px; }

  /* ── Layout ── */
  .wrap      { max-width: 760px; margin: 0 auto; }
  .wrap-sm   { max-width: 640px; margin: 0 auto; }
  .page      { display: none; }
  .page.active { display: block; }

  /* ── Cards ── */
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: 0 10px 30px rgba(0,31,45,.08); }
  .surface-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; }
  .surface-card a { color:var(--green); font-weight:600; text-decoration:none; }
  .surface-card a:hover { color:var(--link); text-decoration:underline; }

  /* ── Typography ── */
  .font-cond { font-family: 'Barlow Condensed', sans-serif; }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 5px 14px; margin-bottom: 20px; }
  .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; }
  .eyebrow span { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; color: var(--green); letter-spacing: .1em; text-transform: uppercase; }
  h1.hero { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(36px, 7vw, 60px); line-height: 1; letter-spacing: -.01em; margin-bottom: 16px; }
  .muted { color: var(--muted); }

  /* ── Buttons ── */
  .btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .04em; border: none; border-radius: 10px; padding: 14px 20px; cursor: pointer; font-size: 16px; transition: opacity .2s, transform .15s; }
  .btn:hover { opacity: .88; transform: translateY(-1px); }
  .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--green); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; border-radius: 10px; padding: 14px 20px; cursor: pointer; transition: border-color .2s, color .2s; }
  .btn-ghost:hover { border-color: var(--green); color: var(--green); }
  .btn-back { background: none; border: none; color: var(--green); cursor: pointer; font-family: 'Barlow', sans-serif; font-size: 14px; margin-bottom: 28px; display: inline-flex; align-items: center; gap: 6px; }
  .btn-back:hover { color: var(--link); }

  /* ── Mode cards ── */
  .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
  @media(max-width:540px){ .mode-grid { grid-template-columns: 1fr; } }
  .mode-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; text-align: center; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; position: relative; overflow: hidden; width: 100%; color: var(--text); font-family: 'Barlow', sans-serif; box-shadow: 0 10px 30px rgba(0,31,45,.08); align-self: stretch; display:flex; flex-direction:column; justify-content:flex-start; }
  .mode-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,31,45,.12); }
  .mode-card .corner-glow { position: absolute; top:0; right:0; width:120px; height:120px; border-radius:0 0 0 100%; opacity:.12; pointer-events:none; }
  .tag-pill { display: inline-block; font-family:'Barlow',sans-serif; font-size:11px; background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:3px 7px; color:var(--green); margin:3px 3px 0 0; }

  /* ── Dimension pills in intro ── */
  .dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
  .dim-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
  .dim-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; }

  /* ── Progress ── */
  .prog-row { display:flex; justify-content:space-between; margin-bottom:6px; }
  .prog-track { height:4px; background:rgba(0,87,125,.12); border-radius:4px; overflow:hidden; margin-bottom:24px; }
  .prog-fill { height:100%; border-radius:4px; transition: width .4s ease; }

  /* ── Question options ── */
  .opt-btn { background: transparent; border: 1.5px solid var(--border); border-radius: 9px; padding: 13px 16px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: all .15s; width: 100%; margin-bottom: 10px; }
  .opt-btn:hover { background: rgba(91,190,211,.08); border-color: rgba(0,87,125,.32); }
  .opt-btn.selected { border-color: var(--accent, var(--teal)); }
  .opt-radio { width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,87,125,.24); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
  .opt-btn.selected .opt-radio { border-color: var(--accent, var(--teal)); background: var(--accent, var(--teal)); }
  .opt-inner { width:8px; height:8px; border-radius:50%; background:#000; display:none; }
  .opt-btn.selected .opt-inner { display:block; }
  .opt-level { font-family:'Barlow Condensed',sans-serif; font-size:11px; opacity:.7; margin-right:6px; }
  .opt-text { font-family:'Barlow',sans-serif; font-size:14px; color:var(--muted); line-height:1.4; }
  .opt-btn.selected .opt-text { color:var(--text); }

  /* ── Dim tag ── */
  .dim-tag { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:5px 14px; margin-bottom:20px; }
  .dim-tag-dot { width:6px; height:6px; border-radius:50%; }
  .dim-tag span { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

  /* ── Results ── */
  .result-header { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:32px; margin-bottom:20px; text-align:center; position:relative; overflow:hidden; box-shadow: 0 10px 30px rgba(0,31,45,.08); }
  .result-header .glow1,.result-header .glow2 { position:absolute; border-radius:50%; opacity:.07; pointer-events:none; }
  .result-header .glow1 { width:220px; height:220px; top:-60px; right:-60px; }
  .result-header .glow2 { width:160px; height:160px; bottom:-40px; left:-40px; opacity:.05; }
  .result-emoji { font-size:52px; margin-bottom:8px; }
  .result-level { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(32px,6vw,52px); letter-spacing:-.01em; margin-bottom:6px; }
  .result-score { font-family:'Barlow Condensed',sans-serif; font-size:15px; color:var(--muted); margin-bottom:16px; }
  .result-headline { font-family:'Barlow',sans-serif; font-weight:300; font-size:16px; line-height:1.65; font-style:italic; max-width:540px; margin:0 auto; }

  /* ── Two-col results ── */
  .two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; align-items:start; }
  @media(max-width:600px){ .two-col { grid-template-columns:1fr; } }
  .radar-wrap { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 16px; box-shadow: 0 10px 30px rgba(0,31,45,.08); }
  .radar-wrap canvas { width:100% !important; height:280px !important; max-height:none !important; }
  .dim-scores-wrap { display:flex; flex-direction:column; gap:10px; }
  .dim-score-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; box-shadow: 0 8px 20px rgba(0,31,45,.06); }
  .dim-score-label { font-family:'Barlow',sans-serif; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
  .dim-score-row { display:flex; align-items:center; gap:8px; }
  .dim-score-val { font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:700; }
  .dots { display:flex; gap:3px; }
  .dot { width:8px; height:8px; border-radius:50%; }

  /* ── Next moves ── */
  .moves-wrap { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px 28px; margin-bottom:20px; }
  .section-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
  .move-row { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
  .move-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; }
  .move-text { font-family:'Barlow',sans-serif; font-size:14px; color:var(--text); line-height:1.65; padding-top:4px; }

  /* ── Maturity ladder ── */
  .ladder-item { display:flex; gap:12px; align-items:center; border:1px solid transparent; border-radius:8px; padding:10px 14px; margin-bottom:8px; }
  .ladder-item.me { border-color: rgba(0,87,125,.24); }
  .ladder-emoji { font-size:20px; flex-shrink:0; }
  .ladder-name { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; }
  .ladder-desc { font-family:'Barlow',sans-serif; font-size:12px; color:var(--muted); line-height:1.4; margin-top:2px; }
  .you-badge { font-family:'Barlow',sans-serif; font-size:11px; border-radius:100px; padding:2px 8px; margin-left:8px; }

  /* ── CTA row ── */
  .cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
  .cta-row .btn, .cta-row .btn-ghost { flex:1; min-width:180px; text-align:center; }

  /* ── Footer note ── */
  .footer-note { display:block; max-width:760px; margin:32px auto 44px; padding:0 20px; text-align:center; font-family:'Barlow',sans-serif; font-size:12px; color:var(--muted); opacity:.82; line-height:1.6; }
  .footer-note a { color:var(--green); text-decoration:none; font-weight:600; }
  .footer-note a:hover { color:var(--link); text-decoration:underline; }

  /* -- FAQ -- */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .site-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:32px; }
  .site-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(30px,5vw,46px); line-height:1; }
  .site-nav { display:flex; gap:10px; flex-wrap:wrap; }
  .nav-link { color:var(--green); text-decoration:none; border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.04em; }
  .nav-link:hover { color:var(--link); border-color:var(--link); }
  .faq-shell { padding:24px 0; }
  .faq-list { display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--card); box-shadow: 0 10px 30px rgba(0,31,45,.08); }
  .faq-item { border-bottom:1px solid var(--border); }
  .faq-item:last-child { border-bottom:none; }
  .faq-question { width:100%; background:var(--card); border:none; padding:16px 18px; text-align:left; cursor:pointer; display:flex; align-items:flex-start; gap:12px; transition:background .15s; color:var(--text); font-family:'Barlow',sans-serif; }
  .faq-question:hover, .faq-question.is-open { background:var(--surface); }
  .faq-cat { font-size:11px; font-weight:600; white-space:nowrap; padding:3px 8px; border-radius:100px; flex-shrink:0; margin-top:1px; color:#000; }
  .faq-cat-about, .faq-cat-using { background:var(--teal); }
  .faq-cat-taking { background:var(--gold); }
  .faq-cat-results { background:var(--greenL); color:#fff; }
  .faq-cat-privacy { background:var(--muted); color:var(--bg); }
  .faq-q-text { font-size:15px; font-weight:500; color:var(--text); flex:1; line-height:1.4; }
  .faq-arrow { font-size:18px; color:var(--muted); flex-shrink:0; font-weight:400; line-height:1.2; }
  .faq-answer { padding:0 18px 18px 18px; background:var(--surface); }
  .faq-answer p { font-size:14px; color:var(--muted); line-height:1.7; margin:0; }
  @media(max-width:640px){ .site-header { align-items:flex-start; flex-direction:column; } .faq-question { flex-direction:column; } }