:root{
    --forest:#1d4d2e; --forestDeep:#143620; --forestLite:#27623c;
    --cream:#f4ecd8; --paper:#f7f1e2; --ink:#1f1d1a; --muted:#6b6356; --faint:#9a917d;
    --gold:#c9a84c; --goldDeep:#a98a35; --hair:#e0d8c4; --line2:#ece5d3;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--paper); color:var(--ink); font-family:'Source Serif 4',Georgia,serif; line-height:1.6; }
  .wm{ font-family:'Inter',sans-serif; font-weight:500; letter-spacing:-0.02em; }
  .mono{ font-family:'JetBrains Mono',monospace; }
  .sans{ font-family:'Inter',sans-serif; }
  .disp{ font-family:'Source Serif 4',Georgia,serif; }
  a{ color:inherit; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 30px; }
  .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:3px; text-transform:uppercase; color:var(--goldDeep); }

  /* ── NAV ── */
  nav{ position:sticky; top:0; z-index:20; background:rgba(247,241,226,0.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair); }
  nav .inner{ max-width:1080px; margin:0 auto; padding:14px 30px; display:flex; align-items:center; justify-content:space-between; }
  nav .brand{ display:flex; align-items:center; gap:10px; }
  nav .brand .wm{ font-size:21px; color:var(--ink); }
  nav .links{ display:flex; gap:26px; align-items:center; }
  nav .links a{ font-family:'Inter',sans-serif; font-size:14px; color:var(--muted); text-decoration:none; }
  nav .links a:hover{ color:var(--ink); }
  nav .links a.cta{ color:var(--forest); font-weight:600; }
  @media(max-width:680px){ nav .links a:not(.cta){ display:none; } }

  /* ── HERO (feature-graphic continuity) ── */
  .hero{ position:relative; background:var(--forest); color:var(--cream); overflow:hidden; }
  .hero svg.field{ position:absolute; inset:0; width:100%; height:100%; }
  .hero .inner{ position:relative; max-width:1080px; margin:0 auto; padding:96px 30px 104px; text-align:center; }
  .hero .crest{ margin:0 auto 26px; width:78px; height:78px; display:block; }
  .hero h1{ font-family:'Inter',sans-serif; font-weight:500; letter-spacing:-0.03em; font-size:96px; line-height:0.96; color:var(--cream); }
  .hero .tag{ display:flex; align-items:center; justify-content:center; gap:16px; margin:24px 0 0; }
  .hero .tag .ln{ height:1px; width:64px; background:var(--gold); opacity:0.7; }
  .hero .tag .t{ font-family:'JetBrains Mono',monospace; font-size:15px; letter-spacing:6px; color:var(--cream); }
  .hero .lede{ font-family:'Source Serif 4',serif; font-style:italic; font-size:23px; color:#e9e0c6; margin:30px auto 0; max-width:560px; }
  .hero .cta-row{ display:flex; gap:14px; justify-content:center; align-items:center; margin-top:40px; flex-wrap:wrap; }
  .playbtn{ display:inline-flex; align-items:center; gap:12px; background:var(--cream); color:var(--ink); border-radius:12px; padding:12px 22px 12px 18px; text-decoration:none; border:1.5px solid var(--cream); transition:transform .15s; }
  .playbtn:hover{ transform:translateY(-1px); }
  .playbtn .pi{ width:26px; height:26px; }
  .playbtn .lab{ text-align:left; font-family:'Inter',sans-serif; line-height:1.1; }
  .playbtn .lab .s{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
  .playbtn .lab .b{ font-size:17px; font-weight:600; }
  .ghostbtn{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid rgba(201,168,76,0.6); color:var(--cream); border-radius:12px; padding:13px 22px; text-decoration:none; font-family:'Inter',sans-serif; font-size:15px; font-weight:500; }
  .ghostbtn:hover{ border-color:var(--gold); }
  @media(max-width:680px){ .hero h1{ font-size:64px; } .hero .inner{ padding:64px 24px 72px; } .hero .lede{ font-size:19px; } }

  /* ── COMING SOON + TEXTURE + USE CASES ── */
  .soonwrap{ display:flex; flex-direction:column; align-items:center; gap:9px; }
  .playbtn.soon{ background:#efe7d0; border-color:#e0d8c4; cursor:default; }
  .playbtn.soon:hover{ transform:none; }
  .playbtn.dark.soon{ background:#1a4429; border-color:#1a4429; }
  .soonnote{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:1.5px; color:#bcd0c1; text-transform:uppercase; }
  .soonnote.ondark{ color:var(--muted); }
  .texture{ margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
  .tx{ display:flex; flex-direction:column; gap:9px; }
  .tx .ic{ width:26px; height:26px; color:var(--goldDeep); }
  .tx h4{ font-family:'Source Serif 4',serif; font-weight:600; font-size:18px; line-height:1.2; }
  .tx p{ font-size:14px; color:var(--muted); line-height:1.55; }
  @media(max-width:840px){ .texture{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:480px){ .texture{ grid-template-columns:1fr; } }
  .uses{ list-style:none; margin:18px 0 0; display:flex; flex-direction:column; gap:13px; }
  .uses li{ font-family:'Source Serif 4',serif; font-size:15px; color:var(--muted); line-height:1.5; padding-left:18px; position:relative; }
  .uses li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
  .uses li b{ color:var(--ink); font-weight:600; font-family:'Inter',sans-serif; font-size:14px; }

  /* ── SECTION SHELL ── */
  section{ padding:84px 0; }
  .sec-head{ text-align:center; max-width:620px; margin:0 auto 52px; }
  .sec-head h2{ font-family:'Source Serif 4',serif; font-weight:600; font-size:38px; letter-spacing:-0.01em; margin-top:12px; line-height:1.1; }
  .sec-head p{ color:var(--muted); font-size:18px; margin-top:14px; }

  /* ── WHAT IT IS · four movements ── */
  .moves{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:16px; overflow:hidden; }
  .move{ background:var(--paper); padding:34px 26px; }
  .move .n{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--goldDeep); }
  .move .ic{ width:38px; height:38px; color:var(--forest); margin:18px 0 16px; }
  .move h3{ font-family:'Source Serif 4',serif; font-weight:600; font-size:23px; }
  .move p{ font-size:15.5px; color:var(--muted); margin-top:8px; line-height:1.55; }
  @media(max-width:840px){ .moves{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:480px){ .moves{ grid-template-columns:1fr; } }

  /* ── PRIVACY ── */
  .privacy{ background:var(--forest); color:var(--cream); position:relative; overflow:hidden; }
  .privacy svg.field{ position:absolute; inset:0; width:100%; height:100%; opacity:0.7; }
  .privacy .inner{ position:relative; }
  .privacy .sec-head h2{ color:var(--cream); }
  .privacy .sec-head .eyebrow{ color:var(--gold); }
  .privacy .sec-head p{ color:#d8cfb2; }
  .promise{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:8px; }
  .pcard{ border:1px solid rgba(201,168,76,0.35); border-radius:14px; padding:26px 22px; background:rgba(0,0,0,0.08); }
  .pcard .ic{ width:30px; height:30px; color:var(--gold); margin-bottom:14px; }
  .pcard h4{ font-family:'Inter',sans-serif; font-size:16px; font-weight:600; color:var(--cream); }
  .pcard p{ font-size:14px; color:#cfc6a9; margin-top:6px; line-height:1.5; }
  .privacy .foot{ text-align:center; margin-top:40px; font-style:italic; color:#d8cfb2; font-size:17px; }
  @media(max-width:840px){ .promise{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:480px){ .promise{ grid-template-columns:1fr; } }

  /* ── BASHO ── */
  .basho{ background:var(--cream); }
  .basho .inner{ max-width:720px; margin:0 auto; text-align:center; }
  .basho .mark{ width:46px; height:46px; color:var(--goldDeep); margin:0 auto 22px; }
  .basho blockquote{ font-family:'Source Serif 4',serif; font-weight:500; font-size:27px; line-height:1.4; color:var(--ink); font-style:italic; }
  .basho .src{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:2px; color:var(--muted); margin-top:22px; text-transform:uppercase; }
  .basho .note{ font-size:17px; color:var(--muted); margin-top:18px; }

  /* ── TWO PATHS ── */
  .paths{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  .path{ border:1.5px solid var(--hair); border-radius:18px; padding:38px 34px; background:var(--paper); display:flex; flex-direction:column; }
  .path.curious{ background:var(--paper); }
  .path.inst{ background:#fbf6ea; }
  .path .eyebrow{ color:var(--goldDeep); }
  .path h3{ font-family:'Source Serif 4',serif; font-weight:600; font-size:27px; margin-top:12px; }
  .path p{ color:var(--muted); font-size:16px; margin-top:12px; flex:1; }
  .path .act{ margin-top:26px; }
  .playbtn.dark{ background:var(--forest); color:var(--cream); border-color:var(--forest); }
  .playbtn.dark .lab .s{ color:#bcd0c1; }
  .mailbtn{ display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:var(--cream); border-radius:12px; padding:14px 24px; text-decoration:none; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
  .mailbtn:hover{ background:#000; }
  .path .who{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .chip{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--muted); border:1px solid var(--hair); border-radius:20px; padding:5px 12px; background:#fff; }
  @media(max-width:760px){ .paths{ grid-template-columns:1fr; } }

  /* ── PASSPORT PREVIEW ── */
  #preview .preview-frame{ max-width:1040px; margin:8px auto 0; }
  #preview .preview-frame iframe{
    width:100%; height:560px;
    border:1px solid var(--hair); border-radius:16px; background:var(--paper);
    display:block; box-shadow:0 1px 2px rgba(31,29,26,0.04);
  }
  @media(max-width:480px){ #preview .preview-frame iframe{ border-radius:12px; } }


  /* ── WAITLIST ── */
  #join .join-card{ max-width:680px; margin:0 auto; text-align:center; border:1.5px solid var(--hair); border-radius:18px; padding:46px 40px; background:#fbf6ea; }
  #join h2{ font-family:'Source Serif 4',serif; font-weight:600; font-size:34px; letter-spacing:-0.01em; margin-top:12px; line-height:1.12; }
  .join-lede{ color:var(--muted); font-size:17px; margin:12px auto 26px; max-width:500px; }
  .join-form{ max-width:520px; margin:0 auto; text-align:left; }
  .join-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .join-row input[type=email]{ flex:1; min-width:200px; font-family:'Inter',sans-serif; font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--hair); border-radius:12px; padding:13px 16px; }
  .join-row input[type=email]:focus{ outline:none; border-color:var(--gold); }
  .joinbtn{ display:inline-flex; align-items:center; gap:8px; background:var(--forest); color:var(--cream); border:1.5px solid var(--forest); border-radius:12px; padding:13px 22px; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:transform .15s; }
  .joinbtn:hover{ transform:translateY(-1px); }
  .joinbtn:disabled{ opacity:0.6; cursor:default; transform:none; }
  .join-consent{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-family:'Inter',sans-serif; font-size:13px; color:var(--muted); line-height:1.5; cursor:pointer; }
  .join-consent input{ margin-top:3px; width:16px; height:16px; flex:none; accent-color:var(--forest); cursor:pointer; }
  .join-msg{ font-family:'Inter',sans-serif; font-size:14px; margin-top:14px; min-height:18px; }
  .join-msg.ok{ color:var(--forest); font-weight:600; }
  .join-msg.err{ color:#9a3b2e; }
  .join-fine{ font-family:'Inter',sans-serif; font-size:12px; color:var(--faint); margin-top:6px; }
  .ghostbtn.solid{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
  .ghostbtn.solid:hover{ border-color:var(--gold); }
  @media(max-width:480px){ #join .join-card{ padding:34px 22px; } .joinbtn{ width:100%; justify-content:center; } }

  /* ── FOOTER ── */
  footer{ background:var(--forestDeep); color:#cfc6a9; padding:54px 0 46px; }
  footer .inner{ max-width:1080px; margin:0 auto; padding:0 30px; display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
  footer .wm{ font-size:30px; color:var(--cream); }
  footer .tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:3px; color:var(--gold); margin-top:10px; }
  footer .col .ln{ font-family:'Inter',sans-serif; font-size:14px; margin-top:7px; }
  footer a{ color:#cfc6a9; text-decoration:none; }
  footer a:hover{ color:var(--cream); }
  footer .meta{ text-align:right; }
  @media(max-width:600px){ footer .inner{ flex-direction:column; } footer .meta{ text-align:left; } }