:root{
      --ink:#151515; --sub:#6b7280; --bg:#ffffff; --soft:#f6f5f2;
      --accent:#111827; --gold:#c6a15b; --brand:#0b5cff;
      --radius:18px; --shadow:0 14px 38px rgba(0,0,0,.08);
      --max: min(92rem, 92vw);
      --content: 920px;
      --gap: clamp(16px, 3vw, 28px);
      --pad: clamp(16px, 4vw, 28px);
      --lh: 1.8;
    }
    @media (prefers-color-scheme: dark){
      :root{ --bg:#0b0b0d; --soft:#141418; --ink:#f5f6f8; --sub:#a0a3ad; --accent:#f5f6f8; --shadow:0 18px 40px rgba(0,0,0,.5) }
      .card, .step, details, .toc, .hero{ border-color:#1f2430 !important; background:#0f1014 !important }
      .btn{ color:#111 !important }
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      background:var(--bg); color:var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height: var(--lh);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .wrap{max-width:var(--max); margin-inline:auto; padding: var(--pad)}
    main{max-width: var(--content); margin-inline:auto}

    .hero{
      border-radius: clamp(16px, 2vw, 28px);
      background: linear-gradient(180deg, #fff, var(--soft));
      padding: var(--pad);
      box-shadow: var(--shadow);
      margin-top: 6px;
      border:1px solid #eee;
    }
    .hero .tag{
      display:inline-block; font-size:.78rem; letter-spacing:.08em;
      color:#111; background:#efece5; border:1px solid var(--gold);
      padding:6px 10px; border-radius:999px
    }
    h1{
      font-size: clamp(1.6rem, 3.2vw, 2.6rem);
      line-height:1.25; margin:14px 0 10px; color:var(--accent)
    }
    .lede{color:var(--sub); font-size: clamp(0.98rem, 1.4vw, 1.12rem); margin:0 0 14px}
    .hero img{width:100%; height:auto; border-radius: clamp(12px, 1.6vw, 20px); margin-top:14px}

    /* Grid becomes single column on small screens */
    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      margin-top: var(--gap);
    }
    @media (min-width: 1024px){
      .grid{ grid-template-columns: 1fr 320px }
    }

    /* Sidebar */
    .side{ position: relative }
    @media (min-width: 1024px){
      .side{ position: sticky; top: 16px; height: max-content }
    }
    .card{
      background:#fff; border:1px solid #eee; border-radius:20px;
      padding:18px; box-shadow: var(--shadow)
    }

    /* Mobile TOC: collapsible; Desktop TOC: static list */
    .toc h3{margin:0 0 10px; font-size: clamp(1rem, 1.6vw, 1.05rem); color:#111}
    .toc a{
      display:block; padding:10px 0; text-decoration:none; color:#374151; 
      font-size: clamp(.98rem, 1.4vw, 1rem);
      border-bottom:1px dashed #e8e8e8;
    }
    .toc a:last-child{ border-bottom:0 }
    .toc details{ display: block }
    .toc summary{
      display:flex; align-items:center; justify-content:space-between;
      font-weight:700; cursor:pointer; padding:10px 0;
    }
    @media (min-width: 1024px){
      .toc details{ display:none }     /* hide collapsible on desktop */
      .toc .toc-desktop{ display:block }
    }
    @media (max-width: 1023.98px){
      .toc .toc-desktop{ display:none } /* hide static list on mobile */
    }

    /* Content blocks */
    h2{
      font-size: clamp(1.25rem, 2.2vw, 1.6rem);
      margin: 28px 0 12px; color:#111
    }
    h3{ font-size: clamp(1.05rem, 1.7vw, 1.15rem); margin: 20px 0 8px }
    p, li{ font-size: clamp(0.98rem, 1.5vw, 1.05rem) }
    ul,ol{ padding-left: 1.1rem; margin: 10px 0 }
    li{ margin: .28rem 0 }

    .step{
      background:#fff; border:1px solid #eee; border-radius:18px;
      padding: clamp(14px, 2.4vw, 18px); margin:16px 0; box-shadow: var(--shadow)
    }
    .step strong.badge{
      display:inline-block; background:#111; color:#fff;
      border-radius:999px; padding:6px 10px; font-size:.8rem; margin-right:8px
    }

    .tip{
      background:#fff7ea; border:1px solid #f3e1bf; border-radius:14px;
      padding:12px 14px; color:#7a5b1a; margin:14px 0
    }

    /* FAQ */
    details{ border:1px solid #eee; border-radius:14px; padding:12px 14px; margin:10px 0; background:#fff }
    summary{ cursor:pointer; font-weight:700 }
    summary::-webkit-details-marker{ display:none }

    /* CTAs */
    .foot-cta{
      display:flex; gap:14px; align-items:center; justify-content:space-between;
      background:linear-gradient(90deg,#111,#3a3a3a); color:#fff; border-radius:22px;
      padding: clamp(14px, 2.6vw, 18px)  clamp(16px, 3vw, 20px);
      margin: clamp(22px, 4vw, 32px) 0; flex-wrap:wrap
    }
    .foot-cta p{ margin:0; font-size: clamp(1rem, 1.6vw, 1.05rem) }
    .btn{
      display:inline-block; background:var(--gold); color:#111;
      padding: clamp(10px, 2.2vw, 12px) clamp(12px, 2.6vw, 16px);
      border-radius:12px; font-weight:700; text-decoration:none
    }

    /* Mobile button: full-width for easier tap */
    @media (max-width: 640px){
      .btn{ display:block; width:100%; text-align:center; margin-top:8px }
    }

    .note{ font-size:.92rem; color:var(--sub); text-align:center; margin-top:8px }
    .kicker{ font-size:.92rem; color:#374151; margin:12px 0 0 }
    a.link{ color:var(--brand); text-underline-offset:3px }