/* ============================================================
     NOTCHAMATCHA — design tokens
     Palette tells the story: "grass water" is a flat yellow-green
     villain; the good stuff is deep creamy jade. Strawberry-pink +
     honey accents pull from the actual recipes (strawberry matcha,
     brown sugar), and keep us far from the usual terracotta look.
     ============================================================ */
  :root{
    --ink:      #22352A;   /* body text, near-black green */
    --deep:     #1B392C;   /* dark sections */
    --deep-2:   #14301F;   /* deeper */
    --matcha:   #5E8B3F;   /* living matcha — buttons, accents */
    --matcha-d: #4A7130;   /* pressed */
    --soft:     #C3D6A8;   /* soft matcha */
    --grass:    #B7C24E;   /* the "grass water" villain green */
    --bg:       #F3F0E2;   /* warm rice-milk background */
    --foam:     #FCFBF4;   /* latte foam — cards */
    --berry:    #DB6A8F;   /* strawberry matcha */
    --honey:    #E0A23C;   /* brown sugar / honey */
    --line:     #E2DECB;   /* hairlines on light */
    --line-d:   rgba(255,255,255,.14);

    --serif: "Fraunces", Georgia, serif;
    --sans: "Hanken Grotesk", system-ui, sans-serif;
    --mono: "Space Mono", ui-monospace, monospace;

    --r: 18px;
    --maxw: 1080px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

  body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--bg);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
  a{ color:inherit; }
  ::selection{ background:var(--berry); color:#fff; }
  :focus-visible{ outline:3px solid var(--matcha); outline-offset:3px; border-radius:6px; }

  h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.01em; }
  .eyebrow{
    font-family:var(--mono); font-size:.72rem; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; color:var(--matcha);
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(243,240,226,.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:82px; }
  .logo{ text-decoration:none; display:inline-flex; align-items:center; }
  header .logo img{ height:52px; width:auto; display:block; }
  footer .logo img{ height:62px; width:auto; display:block; }
  @media(max-width:560px){
    header .logo img{ height:44px; }
    footer .logo img{ height:54px; }
  }
  .nav-links{ display:flex; align-items:center; gap:26px; }
  .nav-links a{ text-decoration:none; font-weight:600; font-size:.94rem; color:var(--ink); opacity:.8; }
  .nav-links a:hover{ opacity:1; }
  .btn{
    font-family:var(--sans); font-weight:700; font-size:.95rem;
    border:none; cursor:pointer; border-radius:100px;
    padding:12px 22px; background:var(--matcha); color:#fff;
    text-decoration:none; display:inline-flex; align-items:center; gap:9px;
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
    box-shadow:0 6px 16px -8px rgba(27,57,44,.5);
  }
  .btn:hover{ background:var(--matcha-d); transform:translateY(-2px); }
  .btn:active{ transform:translateY(0); }
  .btn.ghost{ background:transparent; color:var(--ink); box-shadow:none; border:1.5px solid var(--ink); }
  .btn.ghost:hover{ background:var(--ink); color:var(--bg); }
  .btn.berry{ background:var(--berry); }
  .btn.berry:hover{ background:#c9557c; }
  .nav .btn{ padding:10px 18px; }
  @media(max-width:720px){ .nav-links a:not(.btn){ display:none; } }

  /* ---------- hero ---------- */
  .hero{ padding:64px 0 40px; position:relative; }
  .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
  .hero h1{ font-size:clamp(2.6rem, 6.2vw, 4.6rem); }
  .hero h1 .swap{ color:var(--matcha); font-style:italic; }
  .hero p.lede{ font-size:clamp(1.05rem,1.6vw,1.24rem); margin:22px 0 30px; max-width:34ch; color:#3a4c40; }
  .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .trauma{ font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:#6a7768; margin-top:22px; }
  .trauma b{ color:var(--berry); }

  /* animated matcha bowl */
  .bowl-stage{ display:flex; justify-content:center; align-items:center; }
  .bowl{ width:min(360px,86vw); height:auto; filter:drop-shadow(0 24px 34px rgba(27,57,44,.22)); }
  @keyframes froth{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
  @keyframes steamRise{ 0%{ opacity:0; transform:translateY(8px); } 25%{ opacity:.38; } 75%{ opacity:.22; } 100%{ opacity:0; transform:translateY(-10px); } }
  .bubble{ animation:froth 3.4s ease-in-out infinite; }
  .bubble.b2{ animation-delay:.6s } .bubble.b3{ animation-delay:1.2s } .bubble.b4{ animation-delay:1.8s }
  .steam{ animation:steamRise 3.6s ease-in-out infinite; }
  .steam.s2{ animation-delay:.9s; }
  .steam.s3{ animation-delay:1.8s; }
  @media(max-width:860px){ .hero-grid{ grid-template-columns:1fr; } .bowl-stage{ order:-1; } .bowl{ width:min(260px,70vw); } }

  /* ---------- problems band ---------- */
  .problems{ background:var(--deep); color:var(--foam); padding:64px 0; }
  .problems h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--foam); max-width:16ch; }
  .problems .sub{ color:#b9cbb2; margin-top:12px; max-width:46ch; }
  .chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
  .chip{
    text-align:left; cursor:pointer; font-family:var(--sans);
    background:rgba(255,255,255,.05); border:1px solid var(--line-d);
    color:var(--foam); border-radius:14px; padding:20px 20px;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .chip:hover{ background:rgba(255,255,255,.1); border-color:var(--soft); transform:translateY(-3px); }
  .chip .q{ font-family:var(--mono); font-size:.72rem; color:var(--soft); letter-spacing:.1em; }
  .chip .t{ font-family:var(--serif); font-size:1.24rem; margin-top:8px; display:block; }
  .chip .go{ font-size:.86rem; color:#a9bda2; margin-top:10px; display:flex; align-items:center; gap:6px; }
  @media(max-width:820px){ .chips{ grid-template-columns:1fr 1fr; } }
  @media(max-width:520px){ .chips{ grid-template-columns:1fr; } }

  /* ---------- how it works ---------- */
  .how{ padding:70px 0; }
  .how h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); text-align:center; }
  .how .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
  .step .n{ font-family:var(--mono); font-weight:700; color:var(--matcha); font-size:.9rem; letter-spacing:.1em; }
  .step h3{ font-size:1.4rem; margin:10px 0 8px; }
  .step p{ color:#4b5a4f; }
  .step .ln{ height:2px; background:linear-gradient(90deg,var(--soft),transparent); margin-top:14px; }
  @media(max-width:760px){ .how .steps{ grid-template-columns:1fr; gap:22px; } }

  /* ============================================================
     MATCH — quiz + result live here
     ============================================================ */
  .match{ background:var(--foam); border-top:1px solid var(--line); padding:70px 0 90px; }
  .panel{ display:none; }
  .panel.active{ display:block; animation:rise .4s ease both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }

  /* quiz */
  .quiz-head{ text-align:center; max-width:34ch; margin:0 auto 8px; }
  .quiz-head .eyebrow{ display:block; margin-bottom:12px; }
  .progress{ max-width:520px; margin:26px auto 34px; }
  .progress .bar{ height:8px; background:var(--line); border-radius:100px; overflow:hidden; }
  .progress .fill{ height:100%; width:0; background:linear-gradient(90deg,var(--soft),var(--matcha)); border-radius:100px; transition:width .4s cubic-bezier(.2,.7,.2,1); }
  .progress .meta{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.72rem; color:#7d8a7c; margin-top:9px; letter-spacing:.05em; }

  .question{ max-width:640px; margin:0 auto; }
  .question .qtext{ font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.1rem); text-align:center; line-height:1.1; }
  .options{ display:grid; gap:12px; margin-top:28px; }
  .opt{
    text-align:left; cursor:pointer; font-family:var(--sans); font-size:1.02rem; font-weight:500;
    background:var(--bg); border:2px solid var(--line); color:var(--ink);
    border-radius:14px; padding:17px 20px; display:flex; align-items:center; gap:14px;
    transition:border-color .14s ease, background .14s ease, transform .14s ease;
  }
  .opt:hover{ border-color:var(--matcha); transform:translateX(3px); }
  .opt .mk{ width:22px; height:22px; border-radius:7px; border:2px solid var(--soft); flex:none; display:grid; place-items:center; color:transparent; font-size:13px; }
  .opt.sel{ border-color:var(--matcha); background:#eef4e4; }
  .opt.sel .mk{ background:var(--matcha); border-color:var(--matcha); color:#fff; }
  .quiz-nav{ display:flex; justify-content:space-between; align-items:center; max-width:640px; margin:30px auto 0; }
  .link-btn{ background:none; border:none; cursor:pointer; font-family:var(--sans); font-weight:600; color:#6a7768; font-size:.95rem; text-decoration:underline; text-underline-offset:3px; }
  .link-btn:hover{ color:var(--ink); }

  /* result */
  .result-head{ text-align:center; margin-bottom:28px; }
  .result-head .eyebrow{ display:block; margin-bottom:10px; }
  .result-head h2{ font-size:clamp(2rem,5vw,3.2rem); }
  .result-head h2 em{ font-style:italic; color:var(--matcha); }

  .card{
    background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
    overflow:hidden; box-shadow:0 30px 60px -40px rgba(27,57,44,.45);
    max-width:760px; margin:0 auto;
  }
  .card-top{ background:var(--deep); color:var(--foam); padding:30px 32px; position:relative; overflow:hidden; }
  .card-top .code{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; color:var(--soft); }
  .card-top h3{ font-size:clamp(1.7rem,4vw,2.5rem); color:var(--foam); margin:6px 0 10px; }
  .card-top p{ color:#c7d7bf; max-width:52ch; }
  .card-top .glow{ position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,var(--matcha),transparent 70%); opacity:.4; }

  .card-body{ padding:30px 32px; }
  .diag{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px; }
  .diag .box{ background:var(--foam); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
  .diag .box .lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#8a9587; }
  .diag .box.fix .lbl{ color:var(--matcha); }
  .diag .box p{ margin-top:7px; color:#3f4e44; font-size:.98rem; }
  @media(max-width:560px){ .diag{ grid-template-columns:1fr; } }

  .sec-lbl{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--matcha); margin:26px 0 4px; display:flex; align-items:center; gap:10px; }
  .sec-lbl::after{ content:""; flex:1; height:1px; background:var(--line); }

  /* recipe */
  .recipe{ background:var(--foam); border:1px solid var(--line); border-radius:14px; padding:22px 24px; margin-top:14px; }
  .recipe h4{ font-family:var(--serif); font-size:1.35rem; }
  .recipe .meta{ font-family:var(--mono); font-size:.72rem; color:#8a9587; margin:4px 0 14px; letter-spacing:.05em; }
  .recipe ol{ padding-left:20px; }
  .recipe ol li{ margin-bottom:7px; color:#3f4e44; }
  .recipe .ings{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .recipe .ing{ background:#eef4e4; border:1px solid var(--soft); color:var(--matcha-d); font-size:.82rem; font-weight:600; padding:5px 11px; border-radius:100px; }

  /* kit */
  .kit{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
  .prod{ background:var(--foam); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; }
  .prod .pc{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--berry); }
  .prod h5{ font-family:var(--serif); font-weight:600; font-size:1.12rem; margin:6px 0 6px; }
  .prod p{ font-size:.9rem; color:#4b5a4f; flex:1; }
  .prod a{ margin-top:14px; font-weight:700; font-size:.9rem; text-decoration:none; color:var(--matcha-d); display:inline-flex; align-items:center; gap:6px; align-self:flex-start; }
  .prod a:hover{ gap:10px; }
  @media(max-width:560px){ .kit{ grid-template-columns:1fr; } }

  .disclose{ font-size:.82rem; color:#7d8a7c; background:#eef4e4; border:1px dashed var(--soft); border-radius:10px; padding:12px 16px; margin-top:16px; }

  .result-actions{ display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap; }

  /* email capture */
  .capture{ max-width:760px; margin:28px auto 0; background:var(--deep); border-radius:var(--r); padding:34px; color:var(--foam); text-align:center; }
  .capture .eyebrow{ color:var(--soft); }
  .capture h3{ font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--foam); margin:10px auto 8px; max-width:22ch; }
  .capture p{ color:#c7d7bf; max-width:46ch; margin:0 auto 20px; }
  .capture form{ display:flex; gap:10px; max-width:440px; margin:0 auto; }
  .capture input{ flex:1; font-family:var(--sans); font-size:1rem; padding:14px 18px; border-radius:100px; border:2px solid transparent; background:rgba(255,255,255,.1); color:#fff; }
  .capture input::placeholder{ color:#a9bda2; }
  .capture input:focus{ outline:none; border-color:var(--soft); }
  .capture .ok{ font-family:var(--serif); font-size:1.3rem; }
  @media(max-width:520px){ .capture form{ flex-direction:column; } }

  /* ---------- footer ---------- */
  footer{ background:var(--deep-2); color:#a9bda2; padding:56px 0 40px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
  footer .logo{ color:var(--foam); }
  footer h6{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-bottom:14px; font-weight:700; }
  footer ul{ list-style:none; }
  footer li{ margin-bottom:9px; }
  footer a{ text-decoration:none; color:#a9bda2; font-size:.94rem; }
  footer a:hover{ color:var(--foam); }
  .foot-tag{ color:#8fa588; margin-top:14px; max-width:38ch; font-size:.92rem; }
  .foot-bottom{ border-top:1px solid var(--line-d); margin-top:40px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#7d8a7c; }
  .foot-disclose{ font-family:var(--mono); font-size:.76rem; }
  @media(max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } footer .brand-col{ grid-column:1/-1; } }

  /* ---------- simple legal pages ---------- */
  .legal-page{ padding:56px 0 80px; }
  .legal-shell{ max-width:800px; margin:0 auto; background:var(--foam); border:1px solid var(--line); border-radius:var(--r); padding:34px; box-shadow:0 30px 60px -40px rgba(27,57,44,.25); }
  .legal-shell h1{ font-size:clamp(2rem,5vw,3.2rem); margin:10px 0 14px; }
  .legal-shell h2{ font-size:1.25rem; margin:28px 0 10px; }
  .legal-shell p, .legal-shell li{ color:#425248; }
  .legal-shell ul{ padding-left:20px; }
  .legal-shell .updated{ font-family:var(--mono); font-size:.78rem; color:#7d8a7c; letter-spacing:.04em; }
  .legal-links-inline{ display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:22px; }
  .legal-links-inline a{ color:var(--matcha-d); font-weight:700; text-decoration:none; }
  .legal-links-inline a:hover{ text-decoration:underline; }

  /* ============================================================
     CONTENT PAGES — recipe + guide articles (added v8)
     Reuses existing tokens; header/footer/.recipe/.kit/.prod inherited.
     ============================================================ */
  .article-head{ padding-top:48px; padding-bottom:6px; }
  .breadcrumb{ font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:#7d8a7c; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .breadcrumb a{ color:var(--matcha-d); text-decoration:none; }
  .breadcrumb a:hover{ text-decoration:underline; }
  .breadcrumb .sep{ color:#c1cab6; }
  .article-head h1{ font-size:clamp(2rem,5vw,3.1rem); margin:18px 0 0; max-width:22ch; }
  .article-lede{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:#4b5a4f; margin-top:16px; max-width:60ch; }
  .article-meta{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-top:22px; color:#5b6a5f; font-size:.9rem; font-family:var(--mono); letter-spacing:.02em; }
  .byline{ display:flex; align-items:center; gap:10px; }
  .byline .av{ width:36px; height:36px; border-radius:50%; background:var(--soft); display:grid; place-items:center; font-family:var(--serif); font-weight:600; color:var(--deep); font-size:.95rem; }
  .byline b{ color:var(--ink); font-weight:700; }

  .article-body{ padding-top:26px; padding-bottom:30px; }
  .grid-article{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:52px; align-items:start; }
  @media(max-width:920px){ .grid-article{ grid-template-columns:1fr; } .aside{ order:2; position:static; } }
  .prose{ max-width:68ch; }
  .prose > p{ font-size:1.06rem; color:#33413a; margin-bottom:18px; }
  .prose h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3vw,2rem); margin:40px 0 12px; letter-spacing:-.01em; }
  .prose h3{ font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:26px 0 10px; }
  .prose ul, .prose ol{ padding-left:22px; margin-bottom:18px; }
  .prose li{ margin-bottom:9px; color:#33413a; font-size:1.04rem; }
  .prose a{ color:var(--matcha-d); font-weight:600; }
  .prose strong{ color:var(--ink); }

  /* answer-first block — keep body ~40-60 words so AI engines can lift it whole */
  .answer-box{ background:#eef4e4; border:1px solid var(--soft); border-left:5px solid var(--matcha); border-radius:12px; padding:20px 24px; margin:6px 0 30px; }
  .answer-box .lbl{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--matcha-d); margin-bottom:8px; }
  .answer-box p{ font-size:1.12rem; line-height:1.5; color:var(--ink); margin:0; }

  .aside{ position:sticky; top:100px; }
  .aside-card{ background:var(--foam); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
  .aside-card .eyebrow{ display:block; margin-bottom:10px; }
  .aside-card h4{ font-family:var(--serif); font-size:1.35rem; margin-bottom:8px; line-height:1.1; }
  .aside-card p{ font-size:.92rem; color:#4b5a4f; margin-bottom:16px; }

  /* FAQ — must mirror FAQPage JSON-LD exactly */
  .faq{ margin-top:16px; }
  .faq details{ border-bottom:1px solid var(--line); padding:16px 2px; }
  .faq details:first-of-type{ border-top:1px solid var(--line); }
  .faq summary{ font-family:var(--serif); font-weight:600; font-size:1.18rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; color:var(--ink); }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; color:var(--matcha); font-family:var(--sans); font-weight:800; font-size:1.3rem; line-height:1; }
  .faq details[open] summary::after{ content:"\2013"; }
  .faq details p{ margin-top:12px; color:#33413a; font-size:1.02rem; }

  /* CTA band — funnels readers into the quiz */
  .cta-band{ background:var(--deep); color:var(--foam); border-radius:var(--r); padding:44px 34px; text-align:center; margin:40px 0; }
  .cta-band .eyebrow{ color:var(--soft); }
  .cta-band h2{ color:var(--foam); font-size:clamp(1.6rem,3.4vw,2.3rem); margin:12px auto 8px; max-width:20ch; }
  .cta-band p{ color:#c7d7bf; max-width:44ch; margin:0 auto 22px; }

  .related{ margin:44px 0 10px; }
  .related h2{ font-family:var(--serif); font-weight:600; font-size:1.5rem; margin-bottom:18px; }
  .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media(max-width:700px){ .related-grid{ grid-template-columns:1fr; } }
  .related-card{ display:block; text-decoration:none; background:var(--foam); border:1px solid var(--line); border-radius:14px; padding:18px; transition:transform .15s ease, border-color .15s ease; }
  .related-card:hover{ transform:translateY(-3px); border-color:var(--soft); }
  .related-card .k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--berry); }
  .related-card h3{ font-family:var(--serif); font-weight:600; font-size:1.12rem; margin-top:8px; color:var(--ink); }

  .foot-bottom a, .foot-disclose a{ font-size:inherit; }

  /* hub / listing pages */
  .hub-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:8px 0 30px; }
  @media(max-width:640px){ .hub-grid{ grid-template-columns:1fr; } }
  .hub-card{ display:block; text-decoration:none; background:var(--foam); border:1px solid var(--line); border-radius:16px; padding:24px; transition:transform .15s ease, border-color .15s ease; }
  .hub-card:hover{ transform:translateY(-3px); border-color:var(--soft); }
  .hub-card .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--berry); }
  .hub-card h3{ font-family:var(--serif); font-weight:600; font-size:1.35rem; margin:10px 0 6px; color:var(--ink); }
  .hub-card p{ font-size:.95rem; color:#4b5a4f; }