:root{
    --bg:#0C0E12;
    --bg-2:#111419;
    --card:#171B22;
    --card-flat:#12151B;
    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.16);
    --amber:#F5B833;
    --amber-soft:rgba(245,184,51,0.12);
    --teal:#2DD4BF;
    --teal-soft:rgba(45,212,191,0.12);
    --violet:#8B7CF6;
    --violet-soft:rgba(139,124,246,0.12);
    --text:#EDEFF3;
    --text-soft:#9BA3AF;
    --text-dim:#6B7280;
    --display:'Space Grotesk', 'Inter', sans-serif;
    --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(245,184,51,0.10), transparent 60%),
      radial-gradient(ellipse 800px 500px at 100% 5%, rgba(139,124,246,0.09), transparent 55%),
      radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: auto, auto, 26px 26px;
    background-attachment:fixed;
  }
  a{ color:var(--amber); text-decoration:none; }
  a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }

  /* ---------- Header ---------- */
  header.top{
    position:sticky; top:0; z-index:30;
    background:rgba(12,14,18,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:16px clamp(16px,4vw,44px);
    display:flex; align-items:center; gap:16px;
    transform:translateZ(0); -webkit-transform:translateZ(0);
  }
  .mark{
    width:38px; height:38px; border-radius:11px; flex:0 0 auto;
    background:linear-gradient(135deg, var(--amber), #C98A17);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-weight:700; color:#1A1305; font-size:14px;
  }
  header.top h1{ margin:0; font-family:var(--display); font-weight:600; font-size:16.5px; color:var(--text); }
  header.top .sub{ margin:0; font-size:11.5px; color:var(--text-dim); }
  header.top .spacer{ margin-left:auto; display:flex; gap:10px; align-items:center; }
  header.top a.extlink{
    color:var(--text-soft); font-size:13px; border:1px solid var(--border-strong);
    padding:8px 14px; border-radius:100px; white-space:nowrap; transition:all .15s ease;
  }
  header.top a.extlink:hover{ color:var(--text); border-color:var(--amber); }

  .navbar-wrap{ position:sticky; top:70px; z-index:25; padding:14px clamp(16px,4vw,44px) 0; transform:translateZ(0); -webkit-transform:translateZ(0); }
  .navbar-inner{ max-width:1180px; margin:0 auto; position:relative; }
  .scroll-fade{
    position:absolute; top:5px; bottom:5px; width:34px; z-index:2; pointer-events:none;
    opacity:0; transition:opacity .2s ease; border-radius:100px;
  }
  .scroll-fade.left{ left:0; background:linear-gradient(90deg, var(--card) 20%, transparent); }
  .scroll-fade.right{ right:0; background:linear-gradient(270deg, var(--card) 20%, transparent); }
  .scroll-fade.show{ opacity:1; }
  .scroll-hint{
    position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:3; pointer-events:none;
    width:16px; height:16px; color:var(--text-dim); opacity:0; transition:opacity .2s ease;
    animation: nudge 1.6s ease-in-out infinite;
  }
  .scroll-hint.show{ opacity:1; }
  .scroll-hint svg{ width:100%; height:100%; }
  @keyframes nudge{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(4px); } }
  @media (prefers-reduced-motion: reduce){ .scroll-hint{ animation:none; } }
  nav.pillnav{
    max-width:1180px; margin:0 auto; display:flex; gap:4px; overflow-x:auto;
    background:var(--card); border:1px solid var(--border); border-radius:100px; padding:5px;
    scrollbar-width:none; position:relative; -webkit-overflow-scrolling:touch;
  }
  nav.pillnav::-webkit-scrollbar{ display:none; }
  .pill-indicator{
    position:absolute; top:5px; bottom:5px; left:5px; width:0;
    background:linear-gradient(135deg, var(--amber), #C98A17); border-radius:100px;
    box-shadow:0 2px 10px rgba(245,184,51,0.25);
    transition: left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1);
    z-index:0; pointer-events:none;
  }
  .pill-indicator.notransition{ transition:none; }
  .navpill{
    position:relative; z-index:1; display:inline-flex; align-items:center;
    flex:0 0 auto; background:none; border:none; cursor:pointer; color:var(--text-soft);
    font-family:var(--sans); font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:100px;
    transition:color .2s ease; white-space:nowrap; text-decoration:none;
  }
  .navpill.active{ color:#1A1305; }
  .navpill:not(.active):hover{ color:var(--text); }

  /* ---------- Layout ---------- */
  main{ max-width:760px; margin:0 auto; padding:40px clamp(16px,3vw,44px) 110px; }
  #main.page-fade{ animation:fade .3s ease; }
  @keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

  /* ---------- Hero ---------- */
  .hero{ text-align:left; padding:10px 0 8px; }
  .hero-icon{
    width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:var(--amber-soft); color:var(--amber); margin-bottom:20px;
  }
  .hero-icon svg{ width:28px; height:28px; }
  .chip{
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:6px 13px; border-radius:100px; margin-bottom:16px; border:1px solid var(--border-strong);
    color:var(--text-soft); background:rgba(255,255,255,0.03);
  }
  .chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); }
  .chip.teal::before{ background:var(--teal); }
  .chip.violet::before{ background:var(--violet); }

  h1.page-title{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4.6vw,42px); margin:0 0 12px; line-height:1.08; color:#fff; letter-spacing:-0.6px; }
  h1.hero-title{
    font-family:var(--display); font-weight:700; margin:0 0 18px; line-height:0.96; letter-spacing:-2.5px;
    font-size:clamp(52px,11vw,96px);
    background:linear-gradient(135deg, #ffffff 15%, var(--amber) 75%, var(--teal) 130%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
  p.lede{ font-size:16.5px; color:var(--text-soft); max-width:56ch; margin:0 0 6px; }
  .hero p.lede{ font-size:19px; color:var(--text-soft); font-weight:500; }

  .section-block{ margin-top:44px; }
  .section-block h2{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin:0 0 14px; }

  /* ---------- Feature grid (Home quick-picks) ---------- */
  .persona-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:24px; }
  .persona{
    background:var(--card); border:1px solid var(--border); border-radius:22px;
    padding:26px 26px 24px; transition:border-color .15s ease;
  }
  .persona:hover{ border-color:var(--border-strong); }
  .persona-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--amber-soft); color:var(--amber); margin-bottom:16px; }
  .persona-icon svg{ width:24px; height:24px; }
  .persona.violet .persona-icon{ background:var(--violet-soft); color:var(--violet); }
  .persona-title{ font-family:var(--display); font-weight:700; font-size:18px; color:#fff; margin-bottom:6px; }
  .persona-desc{ font-size:13.5px; color:var(--text-soft); line-height:1.55; margin-bottom:18px; }
  .persona-cta{
    display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
    font-family:var(--sans); font-weight:700; font-size:14px; color:var(--amber); padding:0;
  }
  .persona-cta .arrow{ transition:transform .15s ease; }
  .persona-cta:hover .arrow{ transform:translateX(3px); }
  .persona-subtext{ font-size:12.5px; color:var(--text-dim); margin-top:10px; }
  .persona-subtext a{ color:var(--text-soft); text-decoration:underline; text-underline-offset:2px; }

  details.persona-expand{ position:relative; }
  details.persona-expand > summary{ display:block; list-style:none; cursor:pointer; }
  details.persona-expand > summary::-webkit-details-marker{ display:none; }
  .persona-toggle-arrow{
    position:absolute; top:28px; right:26px; color:var(--violet); font-size:14px; font-weight:700;
    transform:rotate(90deg); transition:transform .2s ease;
  }
  details.persona-expand[open] .persona-toggle-arrow{ transform:rotate(-90deg); }
  .persona-body{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }

  .journey-list{ display:flex; flex-direction:column; gap:8px; }
  .journey-step{
    display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:12px; padding:11px 14px; cursor:pointer; text-align:left; width:100%; transition:all .15s ease;
    font-family:var(--sans);
  }
  .journey-step:hover{ border-color:var(--violet); background:rgba(255,255,255,0.05); }
  .journey-step .js-num{
    width:24px; height:24px; border-radius:50%; background:var(--violet-soft); color:var(--violet);
    display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:12px; flex:0 0 auto;
  }
  .journey-step .js-text{ flex:1; font-weight:600; font-size:13.5px; color:var(--text); }
  .journey-step .js-sub{ display:block; font-weight:400; font-size:12px; color:var(--text-dim); margin-top:1px; }
  .journey-step .arrow{ color:var(--violet); font-size:14px; flex:0 0 auto; }

  /* ---------- Level 1: group card (2-4 per page, the only thing visible until clicked) ---------- */
  details.group{
    background:var(--card); border:1px solid var(--border); border-radius:20px;
    margin-bottom:14px; overflow:hidden; transition:border-color .15s ease;
  }
  details.group:hover{ border-color:var(--border-strong); }
  details.group[open]{ border-color:var(--border-strong); }
  details.group > summary{
    list-style:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; gap:16px;
  }
  details.group > summary::-webkit-details-marker{ display:none; }
  .group-icon{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--amber-soft); color:var(--amber); }
  .group-icon svg{ width:22px; height:22px; }
  details.group.teal .group-icon{ background:var(--teal-soft); color:var(--teal); }
  details.group.violet .group-icon{ background:var(--violet-soft); color:var(--violet); }
  .group-text{ flex:1 1 auto; min-width:0; }
  .group-title{ font-family:var(--display); font-weight:700; font-size:16.5px; color:#fff; }
  .group-sub{ font-size:12.5px; color:var(--text-dim); margin-top:3px; }
  .group-arrow{ color:var(--amber); font-size:14px; font-weight:700; flex:0 0 auto; transform:rotate(90deg); transition:transform .2s ease; }
  details.group[open] .group-arrow{ transform:rotate(-90deg); }
  details.group[open] > summary{ border-bottom:1px solid var(--border); }
  .group-body{ padding:8px 24px 22px; }

  /* ---------- Level 2: item row (nested inside group) ---------- */
  details.item{ border-bottom:1px solid var(--border); padding:4px 0; }
  details.item:last-child{ border-bottom:none; }
  details.item summary{
    cursor:pointer; list-style:none; padding:13px 0; font-weight:600; font-size:14.5px; color:var(--text);
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  details.item summary::-webkit-details-marker{ display:none; }
  details.item summary::after{ content:"+"; font-size:16px; color:var(--amber); font-weight:700; flex:0 0 auto; }
  details.item[open] summary::after{ content:"–"; }
  .item-body{ padding:0 0 16px; color:var(--text-soft); font-size:13.5px; max-width:66ch; }
  .item-body p{ margin:0 0 9px; }
  .item-body ul{ margin:6px 0 9px; padding-left:20px; }
  .item-body li{ margin-bottom:5px; }
  .item-body a{ color:var(--amber); }

  /* ---------- Level 3: faq (nested inside item, for the densest pages) ---------- */
  details.faq{
    background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:10px; padding:2px 14px;
    margin-bottom:7px; margin-top:7px;
  }
  details.faq summary{
    cursor:pointer; list-style:none; padding:11px 0; font-weight:600; font-size:13.5px; color:var(--text);
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq summary::after{ content:"+"; font-size:15px; color:var(--amber); font-weight:700; }
  details.faq[open] summary::after{ content:"–"; }
  details.faq .faq-body{ padding:0 0 13px; color:var(--text-soft); font-size:13px; max-width:64ch; }
  details.faq .faq-body p{ margin:0 0 8px; }

  .tag{
    font-family:'Space Grotesk'; font-size:11.5px; font-weight:600; color:var(--amber);
    background:var(--amber-soft); border-radius:6px; padding:2px 7px; white-space:nowrap;
  }
  .tag.gold{ color:var(--teal); background:var(--teal-soft); }
  .tag.credit{
    font-family:'Space Grotesk'; font-size:11.5px; font-weight:700; color:#1A1305;
    background:var(--amber); border-radius:100px; padding:3px 10px; white-space:nowrap;
  }

  .plain p{ color:var(--text-soft); font-size:13.5px; max-width:66ch; }
  .plain ul{ padding-left:20px; color:var(--text-soft); font-size:13.5px; max-width:66ch; }
  .plain li{ margin-bottom:5px; }

  .grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-top:12px; }
  .card{ background:rgba(255,255,255,0.025); border:1px solid var(--border); border-radius:13px; padding:14px 16px; }
  .card h3{ margin:0 0 6px; font-family:var(--display); font-size:13.5px; color:#fff; }
  .card p{ margin:0 0 4px; font-size:12.5px; color:var(--text-soft); }
  .card a{ color:var(--amber); font-weight:600; }
  .card a:hover{ text-decoration:underline; }

  .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:13.5px;
    padding:12px 22px; border-radius:100px; text-decoration:none; border:1px solid var(--border-strong);
    color:var(--text); transition:all .15s ease;
  }
  .btn:hover{ border-color:var(--amber); color:#fff; }
  .btn.filled{ background:linear-gradient(135deg, var(--amber), #C98A17); color:#1A1305; border:none; }
  .btn.filled:hover{ filter:brightness(1.08); transform:translateY(-1px); }

  .video-frame{ position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden; border:1px solid var(--border); margin:14px 0 4px; background:#000; }
  .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

  ol.steps{ counter-reset:step; list-style:none; padding:0; margin:10px 0 0; }
  ol.steps li{ counter-increment:step; position:relative; padding:5px 0 5px 32px; margin-bottom:3px; font-size:13px; color:var(--text-soft); }
  ol.steps li::before{
    content:counter(step); position:absolute; left:0; top:4px; width:21px; height:21px; border-radius:7px;
    background:var(--amber-soft); color:var(--amber); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }

  table.pathway{ width:100%; border-collapse:collapse; margin-top:10px; font-size:12.5px; }
  table.pathway th, table.pathway td{ border:1px solid var(--border); padding:8px 9px; text-align:left; vertical-align:top; }
  table.pathway th{ background:rgba(255,255,255,0.03); color:var(--text); font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; }
  table.pathway td{ color:var(--text-soft); }
  table.pathway .credits{ font-family:'Space Grotesk'; font-weight:600; color:var(--teal); white-space:nowrap; }

  .callout{
    background:linear-gradient(135deg, rgba(245,184,51,0.10), rgba(139,124,246,0.08));
    border:1px solid var(--border-strong); border-radius:16px; padding:16px 20px; margin-top:18px;
    font-size:13px; color:var(--text-soft);
  }
  .callout strong{ color:#fff; }

  .page-end{ margin-top:40px; padding-top:22px; border-top:1px solid var(--border); display:flex; justify-content:center; }
  .page-end a{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13.5px; font-weight:700;
    color:var(--amber); border:1px solid rgba(245,184,51,0.35); background:rgba(245,184,51,0.07);
    padding:11px 20px; border-radius:100px; transition:all .15s ease;
  }
  .page-end a:hover{ color:#fff; border-color:var(--amber); background:rgba(245,184,51,0.14); }
  .page-end a svg{ width:14px; height:14px; flex:0 0 auto; }

  footer.site-footer{
    max-width:760px; margin:0 auto; padding:26px clamp(16px,3vw,44px) 60px;
    color:var(--text-dim); font-size:11.5px; border-top:1px solid var(--border); margin-top:20px;
  }
  footer.site-footer a{ color:var(--amber); }

  @media (max-width:860px){ .navbar-wrap{ top:64px; } }