:root{
    --ink:#0A0A0B; --surface:#131315; --raise:#1A1A1D; --line:#26262A;
    --text:#F4F2EE; --dim:#918B81; --gold:#FFC53D; --red:#FF4B3E;
    --max:1120px; --read:60ch;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink); color:var(--text);
    font:400 17px/1.65 Poppins,-apple-system,"Segoe UI",Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
  .y{color:var(--gold)} .r{color:var(--red)}
  a{color:inherit}

  /* ---- top bar ---- */
  .bar{background:var(--gold);color:#111;text-align:center;font-size:.82rem;
       font-weight:600;padding:9px 16px;letter-spacing:.01em}
  .bar a{text-decoration:underline;text-underline-offset:2px}

  /* ---- nav ---- */
  nav{position:sticky;top:0;z-index:20;background:rgba(10,10,11,.88);
      backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;gap:20px;height:66px}
  .logo{font-weight:800;font-size:1.02rem;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
  .logo span{color:var(--gold)}
  nav a.link{text-decoration:none;color:var(--dim);font-size:.9rem;font-weight:500}
  nav a.link:hover{color:var(--text)}
  .btn{display:inline-block;background:var(--gold);color:#111;text-decoration:none;
       font-weight:700;font-size:.88rem;padding:11px 20px;border-radius:999px;
       transition:transform .15s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}

  /* ---- hero ---- */
  .hero{padding:clamp(64px,10vw,128px) 0 clamp(56px,8vw,96px);border-bottom:1px solid var(--line)}
  .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
           color:var(--dim);font-weight:600;margin-bottom:26px}
  .hero h1{font-size:clamp(2.6rem,7.5vw,5rem)}
  .hero h1 em{font-style:normal;color:var(--gold)}
  .hero .lede{max-width:var(--read);margin-top:28px;font-size:clamp(1.05rem,2.1vw,1.24rem);
              color:#D6D2CA;line-height:1.6}
  .hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
  .media{margin-top:56px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;
         background:linear-gradient(160deg,var(--raise),var(--surface));
         display:grid;place-items:center;text-align:center;padding:24px}
  .media p{color:var(--dim);font-size:.86rem;max-width:44ch}

  /* ---- sections ---- */
  section{padding:clamp(60px,8vw,104px) 0;border-bottom:1px solid var(--line)}
  .kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
          color:var(--gold);font-weight:700;margin-bottom:18px}
  h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:20ch}
  .sub{color:var(--dim);margin-top:18px;max-width:var(--read);font-size:1.02rem}

  /* ---- honest state ---- */
  .state{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
         border-radius:14px;overflow:hidden;margin-top:44px}
  @media(min-width:760px){.state{grid-template-columns:1fr 1fr}}
  .cell{background:var(--ink);padding:30px 28px}
  .cell h3{font-size:1.02rem;margin-bottom:10px}
  .cell.is h3{color:var(--gold)} .cell.isnt h3{color:var(--red)}
  .cell ul{list-style:none;display:grid;gap:11px}
  .cell li{padding-left:20px;position:relative;color:#CFCAC2;font-size:.97rem;line-height:1.55}
  .cell li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--dim)}
  .prose{max-width:var(--read);margin-top:44px;display:grid;gap:20px;color:#CFCAC2}
  .prose strong{color:var(--text);font-weight:600}

  /* ---- guides ---- */
  .guides{display:grid;gap:20px;margin-top:48px}
  @media(min-width:820px){.guides{grid-template-columns:repeat(3,1fr)}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
        padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px;
        text-decoration:none;transition:border-color .18s ease,transform .18s ease}
  .card:hover{border-color:var(--gold);transform:translateY(-3px)}
  .tag{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
       color:var(--gold);font-weight:700}
  .card h3{font-size:1.22rem;line-height:1.25}
  .card p{color:var(--dim);font-size:.94rem;line-height:1.6;flex:1}
  .meta{font-size:.76rem;color:var(--dim);border-top:1px solid var(--line);padding-top:14px}

  /* ---- free note ---- */
  .note{margin-top:48px;border-left:3px solid var(--gold);padding:22px 26px;
        background:var(--surface);border-radius:0 14px 14px 0;max-width:var(--read)}
  .note p{color:#CFCAC2;font-size:.99rem}

  /* ---- final cta ---- */
  .final{text-align:center}
  .final h2{margin:0 auto;max-width:16ch}
  .final .sub{margin-left:auto;margin-right:auto}
  .final .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}

  /* ---- mobile ---- */
  @media(max-width:760px){
    body{font-size:16px}
    .bar{font-size:.76rem;padding:8px 14px}
    nav .wrap{height:60px;gap:12px}
    .logo{font-size:.94rem;white-space:nowrap}
    nav a.link{display:none}          /* links live in the page, not a cramped bar */
    .btn{padding:10px 16px;font-size:.8rem;white-space:nowrap}
    .hero{padding:52px 0 48px}
    .media{aspect-ratio:4/3}
    .cell{padding:26px 22px}
    .hero .cta .btn{flex:1 1 100%;text-align:center}
  }

  footer{padding:44px 0 64px}
  footer .wrap{display:grid;gap:18px}
  .fine{color:var(--dim);font-size:.8rem;line-height:1.6;max-width:72ch}
  .todo{color:var(--red);font-size:.78rem;font-weight:600;letter-spacing:.04em}

/* ================= guide pages ================= */
.gwrap{max-width:760px;margin:0 auto;padding:0 24px}
.ghead{padding:clamp(56px,8vw,96px) 0 clamp(32px,5vw,52px);border-bottom:1px solid var(--line)}
.back{display:inline-block;color:var(--dim);text-decoration:none;font-size:.86rem;
      margin-bottom:26px}
.back:hover{color:var(--gold)}
.ghead h1{font-size:clamp(2.1rem,5.5vw,3.4rem)}
.ghead .lede{color:#CFCAC2;margin-top:22px;font-size:1.08rem;line-height:1.62}
.gmeta{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;font-size:.76rem;
       letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.gmeta .on{color:var(--gold)}

.gbody{padding:clamp(40px,6vw,64px) 0}
.step{margin-bottom:clamp(40px,6vw,60px)}
.step-n{display:inline-flex;align-items:center;justify-content:center;
        width:34px;height:34px;border-radius:50%;background:var(--gold);color:#111;
        font-weight:800;font-size:.92rem;margin-bottom:16px}
.step h2{font-size:clamp(1.35rem,3.2vw,1.85rem);max-width:24ch}
.step p{color:#CFCAC2;margin-top:14px;line-height:1.68}
.step p + p{margin-top:14px}
.step strong{color:var(--text);font-weight:600}

.paste{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
       border-radius:0 12px 12px 0;padding:22px 24px;margin:22px 0;
       font:400 .92rem/1.62 ui-monospace,SFMono-Regular,Menlo,monospace;
       color:#E8E4DC;white-space:pre-wrap;overflow-wrap:anywhere}
.paste-h{font:700 .68rem/1 Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;
         color:var(--gold);margin-bottom:12px;display:block}
.why{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;
     color:var(--dim);font-size:.95rem;line-height:1.62}
.why b{color:var(--gold);font-weight:700}

.gend{border-top:1px solid var(--line);padding:clamp(44px,6vw,64px) 0 clamp(60px,8vw,90px);
      text-align:center}
.gend h2{font-size:clamp(1.5rem,3.5vw,2.1rem);margin:0 auto;max-width:18ch}
.gend p{color:var(--dim);margin:16px auto 0;max-width:52ch}
.gend .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
@media(max-width:760px){.gend .cta .btn{flex:1 1 100%;text-align:center}}

/* ---- real-talk block: the disclaimer, moved up where it does work ---- */
.realtalk{max-width:var(--read);margin-top:22px;padding:16px 20px;
  border-left:3px solid var(--red);background:var(--surface);
  border-radius:0 12px 12px 0;color:#CFCAC2;font-size:.97rem;line-height:1.62}
.realtalk b{color:var(--text);font-weight:600}

/* ---- anchor image for the story section ---- */
.anchor{margin:44px 0 0;max-width:520px}
.anchor img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--line)}
.anchor figcaption{margin-top:12px;color:var(--dim);font-size:.86rem;line-height:1.5}
@media(min-width:900px){
  .anchor{float:right;max-width:340px;margin:8px 0 26px 40px}
}

/* ---- tools: grouped by workflow stage ---- */
.stage{margin-top:44px}
.stage-h{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.stage-h h2{font-size:1.15rem;letter-spacing:-.01em;max-width:none}
.stage-h span{font-size:.76rem;color:var(--dim);letter-spacing:.06em}
.soon{opacity:.5;pointer-events:none}
.soon .tag{color:var(--dim)}

/* ---- community CTA: real photo beside the ask ---- */
.final{text-align:left}
.final-grid{display:grid;gap:32px;align-items:center}
@media(min-width:860px){
  .final-grid{grid-template-columns:0.85fr 1fr;gap:52px}
}
.final-img{margin:0}
.final-img img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--line)}
.final-copy h2{max-width:16ch}
.final-copy .sub{margin-left:0;margin-right:0}
.final-copy .cta{justify-content:flex-start}
@media(max-width:760px){
  .final-copy .cta .btn{flex:1 1 100%;text-align:center}
}

/* ---- Start here: reads like the profile they just came from ---- */
.welcome{padding:clamp(26px,4vw,40px) 0;border-bottom:1px solid var(--line);
  background:var(--surface)}
.profile{display:flex;gap:24px;align-items:flex-start}
.pfp{width:104px;height:104px;flex:none;border-radius:50%;object-fit:cover;
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--gold)}
.profile-body{min-width:0}
.profile-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pname{font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.pthin{font-weight:500;color:var(--dim)}
.verified{width:19px;height:19px;flex:none}
.handle{color:var(--dim);font-size:.86rem;margin-top:3px;
  font-variant-numeric:tabular-nums}
.pbio{margin-top:12px;color:#CFCAC2;font-size:.98rem;line-height:1.62;max-width:56ch}
.pbio b{color:var(--text);font-weight:600}
.pactions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pactions .btn{font-size:.85rem;padding:10px 18px}
@media(max-width:620px){
  .profile{gap:16px}
  .pfp{width:76px;height:76px}
  .pname{font-size:1.05rem}
  .pthin{display:block;font-size:.9rem}
  .pbio{font-size:.94rem}
  .pactions .btn{flex:1 1 100%;text-align:center}
}

/* the hero now follows a band, so it needs less air on top */
.hero{padding-top:clamp(44px,6vw,80px)}

/* ---- handoff: the walk from site into community ---- */
.handoff{padding:clamp(60px,8vw,104px) 0}
.handoff .sub{margin-bottom:38px}
.handoff img{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--line)}
.door{display:block;transition:transform .2s ease,border-color .2s ease}
.door:hover{transform:translateY(-2px)}
.handoff-step{margin-top:34px}
.handoff-step .lead{color:var(--text);font-weight:600;font-size:1.02rem;
  margin-bottom:14px;display:flex;align-items:center;gap:10px}
.handoff-step .lead::before{content:"";width:22px;height:2px;background:var(--gold);
  flex:none}
.handoff-cta{margin-top:44px;text-align:center}
.btn.big{font-size:1rem;padding:15px 30px}
.handoff-cta .fine{margin-top:14px;color:var(--dim);font-size:.85rem}
@media(max-width:760px){.btn.big{display:block;text-align:center}}

/* ---- usability pass: iPhone / iPad / desktop ---- */

/* badge sits with the name, so it never orphans onto the descriptor line */
.verified{vertical-align:-2px;display:inline-block}

/* every tap target clears Apple's 44px minimum */
.btn{padding:13px 22px}
.pactions .btn{padding:13px 20px}
.bar-link{display:block;text-decoration:none;padding:13px 16px}
.bar-cta{text-decoration:underline;text-underline-offset:2px}
@media(min-width:761px){nav a.link{padding:11px 0;display:inline-block}}
.logo{padding:12px 0;display:inline-block}
.back{padding:8px 0}

/* iPad portrait: two guide cards per row instead of one tall column */
@media(min-width:620px) and (max-width:819px){
  .guides{grid-template-columns:1fr 1fr}
}

/* keep running text nearer a comfortable measure on wide screens */
:root{--read:66ch}

/* ---- nav: fit on a phone without the button running off the edge ---- */
.join-short{display:none}
@media(max-width:620px){
  .join-full{display:none}
  .join-short{display:inline}
  nav .wrap{gap:12px}
  .logo{font-size:.92rem}
}