:root{
    --bg:#f6f6f4;
    --bg-raise:#ffffff;
    --ink:#171410;
    --ink-soft:#4c463d;
    --ink-faint:#7d7668;
    --line:#ddd8cd;
    --accent:#b45309;
    --accent-strong:#92400e;
    --accent-soft:#fdf0dd;
    --dark-bg:#131109;
    --dark-raise:#1d1a12;
    --dark-ink:#f3efe6;
    --dark-soft:#b9b2a2;
    --dark-line:#35301f;
    --ok:#2f7d4f;
    --radius:14px;
    --maxw:1180px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#100e0a;
      --bg-raise:#1a1712;
      --ink:#f3efe6;
      --ink-soft:#c9c2b2;
      --ink-faint:#948d7c;
      --line:#2e2a20;
      --accent:#f0a832;
      --accent-strong:#f5bc55;
      --accent-soft:#2a2110;
      --dark-bg:#0a0906;
      --dark-raise:#171410;
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Archivo", system-ui, sans-serif;
    font-size:16.5px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:"IBM Plex Mono", ui-monospace, monospace}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
  a{color:inherit}
  img{display:block; max-width:100%}

  /* ---------- Site nav ---------- */
  .sitenav{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
  .sitenav .wrap{display:flex; align-items:center; gap:28px; padding-top:14px; padding-bottom:14px}
  .wordmark{font-weight:900; letter-spacing:.02em; font-size:19px; line-height:1.05; text-decoration:none}
  .wordmark small{display:block; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:10.5px; letter-spacing:.32em; color:var(--accent); margin-top:3px}
  .navlinks{margin-left:auto; display:flex; gap:26px; align-items:center}
  .navlinks a{text-decoration:none; font-size:14.5px; font-weight:600; color:var(--ink-soft)}
  .navlinks a:hover{color:var(--ink)}
  .btn{
    display:inline-block; text-decoration:none; font-weight:700; font-size:15px;
    padding:12px 22px; border-radius:10px; border:1.5px solid var(--ink);
    background:var(--ink); color:var(--bg); cursor:pointer; text-align:center;
  }
  .btn:hover{opacity:.88}
  .btn.ghost{background:transparent; color:var(--ink)}
  .btn.accent{background:var(--accent); border-color:var(--accent); color:#fff}
  @media (prefers-color-scheme: dark){ .btn.accent{color:#171410} }
  .navlinks .btn{padding:9px 18px; font-size:14px}
  @media (max-width:760px){ .navlinks a:not(.btn){display:none} }

  /* ---------- Hero ---------- */
  .hero{padding:64px 0 56px}
  .hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
  @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} .hero{padding:40px 0} }
  .kicker{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.22em; color:var(--accent); font-weight:600; margin:0 0 18px}
  h1{font-size:clamp(38px, 4.6vw, 58px); line-height:1.04; font-weight:900; letter-spacing:-.015em; margin:0 0 20px}
  h1 .hl{color:var(--accent)}
  .mission{font-size:19px; color:var(--ink-soft); margin:0 0 14px; max-width:34em}
  .mission b{color:var(--ink)}
  .hero .sub{color:var(--ink-faint); font-size:15.5px; margin:0 0 30px; max-width:32em}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
  .cta-note{font-size:13.5px; color:var(--ink-faint); margin-top:14px}
  .hero-media{position:relative}
  .hero-media img{border-radius:var(--radius); aspect-ratio:16/10.5; object-fit:cover; width:100%}
  .chip{
    position:absolute; left:16px; bottom:16px; background:rgba(16,14,10,.88); color:#f3efe6;
    border-radius:10px; padding:12px 16px; font-size:13.5px; line-height:1.45; max-width:290px;
  }
  .chip b{color:#f0a832; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; display:block; margin-bottom:2px}
  .chip-tr{
    position:absolute; right:16px; top:16px; background:#f0a832; color:#171410;
    font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:12px; letter-spacing:.06em;
    padding:7px 12px; border-radius:999px;
  }

  /* ---------- Ladder ---------- */
  .ladder{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-raise)}
  .ladder .wrap{padding-top:34px; padding-bottom:34px}
  .ladder h2{font-size:14px; font-family:"IBM Plex Mono",monospace; letter-spacing:.2em; color:var(--ink-faint); margin:0 0 22px; font-weight:600}
  .steps{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch}
  @media (max-width:820px){ .steps{grid-template-columns:1fr} .arrow{transform:rotate(90deg); justify-self:center} }
  .step{border:1.5px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:var(--bg)}
  .step .num{font-family:"IBM Plex Mono",monospace; color:var(--accent); font-weight:600; font-size:13px; letter-spacing:.12em}
  .step h3{margin:6px 0 6px; font-size:20px; font-weight:800}
  .step p{margin:0; font-size:14.5px; color:var(--ink-soft)}
  .step .price{margin-top:12px; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px}
  .arrow{align-self:center; font-size:22px; color:var(--accent); font-weight:700}
  .foundation{
    margin-top:14px; border:1.5px dashed var(--accent); border-radius:var(--radius);
    padding:14px 22px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; background:var(--accent-soft);
  }
  .foundation b{font-size:15.5px}
  .foundation span{font-size:14.5px; color:var(--ink-soft)}

  /* ---------- Sections ---------- */
  section.block{padding:72px 0}
  @media (max-width:760px){ section.block{padding:48px 0} }
  .sec-head{max-width:720px; margin-bottom:36px}
  .sec-head .kicker{margin-bottom:10px}
  .sec-head h2{font-size:clamp(28px,3.4vw,40px); font-weight:900; line-height:1.12; letter-spacing:-.01em; margin:0 0 12px}
  .sec-head p{color:var(--ink-soft); margin:0; font-size:17px}

  .split{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
  @media (max-width:900px){ .split{grid-template-columns:1fr} }
  ul.checks{list-style:none; margin:0; padding:0; display:grid; gap:14px}
  ul.checks li{display:flex; gap:12px; font-size:16px}
  ul.checks .tick{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; margin-top:2px}
  @media (prefers-color-scheme: dark){ ul.checks .tick{color:#171410} }
  ul.checks li b{font-weight:700}
  ul.checks li span{color:var(--ink-soft)}
  ul.checks li div{font-size:16px}

  .pricecard{border:2px solid var(--ink); border-radius:var(--radius); background:var(--bg-raise); padding:28px; position:sticky; top:96px}
  @media (max-width:900px){ .pricecard{position:static} }
  .pricecard .plan{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.18em; color:var(--accent); font-weight:600}
  .pricecard .amount{font-size:54px; font-weight:900; line-height:1; margin:10px 0 2px}
  .pricecard .amount small{font-size:16px; font-weight:600; color:var(--ink-faint)}
  .pricecard .when{font-weight:700; font-size:16.5px; margin:8px 0 4px}
  .pricecard p{color:var(--ink-soft); font-size:14.5px; margin:0 0 18px}
  .pricecard hr{border:none; border-top:1px solid var(--line); margin:18px 0}
  .pricecard .fine{font-size:13px; color:var(--ink-faint)}
  .pricecard .btn{display:block; margin-top:6px}

  /* Website design visual */
  .browser{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-raise); margin-top:34px}
  .browser .bar{display:flex; gap:6px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg)}
  .browser .dot{width:10px; height:10px; border-radius:50%; background:var(--line)}
  .browser .url{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-faint); margin-left:8px}
  .browser img{aspect-ratio:16/8.5; object-fit:cover; width:100%}
  .browser .caption{padding:14px 18px; font-size:14px; color:var(--ink-soft)}
  .browser .caption b{color:var(--ink)}

  /* ---------- Dark stage 2 ---------- */
  .dark{background:var(--dark-bg); color:var(--dark-ink)}
  .dark .sec-head p{color:var(--dark-soft)}
  .dark .kicker{color:#f0a832}
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:22px}
  @media (max-width:820px){ .duo{grid-template-columns:1fr} }
  .duo .card{background:var(--dark-raise); border:1px solid var(--dark-line); border-radius:var(--radius); padding:28px}
  .duo .card .tag{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em; color:#f0a832; font-weight:600}
  .duo .card h3{font-size:24px; font-weight:800; margin:8px 0 10px}
  .duo .card p{color:var(--dark-soft); font-size:15.5px; margin:0 0 16px}
  .duo .card ul{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; font-size:15px}
  .duo .card ul li{padding-left:20px; position:relative}
  .duo .card ul li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:2px; background:#f0a832}
  .duo .price-line{border-top:1px solid var(--dark-line); padding-top:16px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
  .duo .price-line .big{font-size:30px; font-weight:900}
  .duo .price-line .per{color:var(--dark-soft); font-size:14px}
  .dark .note{margin-top:22px; color:var(--dark-soft); font-size:14.5px; border-left:3px solid #f0a832; padding-left:16px; max-width:760px}
  .dark .note b{color:var(--dark-ink)}

  /* ---------- Care plan band ---------- */
  .care{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-raise)}
  .care .wrap{display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding-top:36px; padding-bottom:36px}
  @media (max-width:820px){ .care .wrap{grid-template-columns:1fr} }
  .care .big{font-size:44px; font-weight:900; line-height:1}
  .care .big small{display:block; font-size:12px; font-family:"IBM Plex Mono",monospace; letter-spacing:.16em; color:var(--accent); margin-bottom:6px}
  .care p{margin:0; color:var(--ink-soft); max-width:56em}
  .care p b{color:var(--ink)}

  /* ---------- Who / areas ---------- */
  .chips{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 26px}
  .chiplet{border:1.5px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:600; font-size:14.5px; background:var(--bg-raise)}
  .areas{font-family:"IBM Plex Mono",monospace; font-size:13.5px; color:var(--ink-faint); letter-spacing:.04em}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px}
  details{border-bottom:1px solid var(--line); padding:18px 2px}
  details:first-of-type{border-top:1px solid var(--line)}
  summary{font-weight:700; font-size:17px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; color:var(--accent); font-weight:800; font-size:20px; line-height:1}
  details[open ] summary::after{content:"–"}
  details p{color:var(--ink-soft); margin:10px 0 2px; max-width:44em}

  /* ---------- Final CTA / footer ---------- */
  .final{background:var(--dark-bg); color:var(--dark-ink); padding:64px 0}
  .final h2{font-size:clamp(28px,3.6vw,42px); font-weight:900; margin:0 0 12px; line-height:1.12}
  .final p{color:var(--dark-soft); max-width:38em; margin:0 0 26px; font-size:17px}
  .final .btn{background:#f0a832; border-color:#f0a832; color:#171410}
  .final .btn.ghosty{background:transparent; color:var(--dark-ink); border-color:var(--dark-line)}
  footer.site{border-top:1px solid var(--line); padding:28px 0 40px; font-size:13.5px; color:var(--ink-faint)}
  footer.site .wrap{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between}

  /* ---------- Page switching (main site / agency page) ---------- */
  [hidden]{display:none !important}
  .navgroup{display:flex; gap:26px; align-items:center}
  @media (max-width:760px){ .navgroup{gap:0} }

  /* ---------- TikTok LIVE agency page ---------- */
  .status-pill{
    display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--accent); border-radius:999px;
    padding:8px 16px; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; letter-spacing:.1em;
    color:var(--accent-strong); background:var(--accent-soft); margin:0 0 22px;
  }
  @media (prefers-color-scheme: dark){ .status-pill{color:var(--accent)} }
  .status-dot{flex:none; width:9px; height:9px; border-radius:50%; background:var(--accent)}
  .deal{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  @media (max-width:820px){ .deal{grid-template-columns:1fr} }
  .deal .item{border-top:3px solid var(--accent); padding-top:16px}
  .deal .item h3{margin:0 0 8px; font-size:20px; font-weight:800}
  .deal .item p{margin:0; color:var(--ink-soft); font-size:15.5px}
  .deal .item .big{font-size:34px; font-weight:900; line-height:1.1; margin-bottom:6px}
  .joinsteps{display:grid; gap:0; max-width:820px}
  .joinstep{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--dark-line)}
  .joinstep:first-child{padding-top:0}
  .joinstep:last-child{border-bottom:none}
  .joinstep .n{font-family:"IBM Plex Mono",monospace; font-size:26px; font-weight:600; color:#f0a832}
  .joinstep h3{margin:2px 0 6px; font-size:19px; font-weight:800}
  .joinstep p{margin:0; color:var(--dark-soft); font-size:15.5px; max-width:40em}
  .dark details{border-color:var(--dark-line)}
  .dark details p{color:var(--dark-soft)}

  /* Navigation and accessibility */
  img{height:auto}
  :target{scroll-margin-top:100px}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
  .skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:8px}
  .skip-link:focus{top:12px}
  .nav-toggle{display:none;background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:8px;padding:9px 14px;font:inherit;font-weight:700;cursor:pointer}
  .navlinks a[aria-current="page"]{color:var(--accent)}
  .contact-email{font-size:15px!important;margin-top:20px!important;overflow-wrap:anywhere}
  footer.site nav{display:flex;flex-wrap:wrap;gap:10px 20px;width:100%;margin-top:8px}
  @media(max-width:1100px){
    .sitenav .wrap{flex-wrap:wrap;gap:14px}
    .nav-toggle:not([hidden]){display:block;margin-left:auto}
    .navlinks{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:16px;padding:6px 0 8px}
    .navlinks a:not(.btn){display:block;padding:7px 0}
    .navgroup{flex-direction:column;align-items:stretch;gap:2px;width:100%}
    .nav-ready .navlinks{display:none}
    .nav-ready .navlinks.is-open{display:flex}
    .navlinks .btn{align-self:flex-start}
  }
  @media(max-width:420px){
    .wrap{padding-left:20px;padding-right:20px}
    .hero .wrap{gap:28px}
    .status-pill{font-size:10px;letter-spacing:.05em;padding:8px 10px}
    .wordmark{font-size:17px}
    .wordmark small{font-size:9.5px;letter-spacing:.25em}
    .joinstep{grid-template-columns:40px 1fr;gap:12px}
  }