:root{
    --canvas:#FBFBF9; --paper:#fff; --ink:#0a0a0a; --body:#2c2c2c; --muted:#6b6b6b; --line:#ece9e2;
    --teal:#1bafbf; --teal-tx:#0f7d8a; --teal-tint:#e9f7f9;
    --green:#6fcf97; --green-tx:#258253; --green-tint:#edf9f2;
    --red:#d94a54; --red-tx:#c0313b; --red-tint:#fdeeef;
    --purple:#9b59b6; --purple-tx:#7f45a0; --purple-tint:#f4ecf8;
    --yellow:#ffc93c; --yellow-tx:#916812; --yellow-tint:#fff6e0;
    --maxw:1120px;
  }
  *{box-sizing:border-box;}
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{ margin:0; background:var(--canvas); color:var(--body);
    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
  h1,h2,h3{ color:var(--ink); margin:0; letter-spacing:-.02em; font-weight:800; line-height:1.08; }
  p{ margin:0; }
  .eyebrow{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 16px; }
  .btn{ display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-weight:800; font-size:1rem;
    padding:15px 26px; border-radius:13px; cursor:pointer; text-decoration:none; border:2px solid transparent;
    transition:transform .18s ease, background .18s ease; }
  .btn--primary{ background:var(--teal); color:var(--ink); box-shadow:0 12px 26px -12px rgba(27,175,191,.7); }
  .btn--primary:hover{ transform:translateY(-2px); background:#18a1b0; }
  .btn--ghost{ background:transparent; color:var(--ink); border-color:#d9d5cc; }
  .btn--ghost:hover{ background:#fff; border-color:var(--ink); transform:translateY(-2px); }
  .btn--light{ background:#fff; color:var(--ink); }
  .btn--light:hover{ transform:translateY(-2px); }
  .btn svg{ width:17px; height:17px; }
  .sectitle{ text-align:center; max-width:24ch; margin:0 auto 40px; }
  .sectitle h2{ font-size:clamp(1.8rem,4vw,2.5rem); }
  .sectitle p{ margin-top:14px; color:var(--body); font-size:1.06rem; max-width:52ch; margin-left:auto; margin-right:auto; }
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.is-in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .anim *{animation:none!important;} }

  /* ---------- HERO ---------- */
  .hero{ padding:60px 0 0; text-align:center; overflow:hidden; }
  .hero .eyebrow{ color:var(--teal-tx); background:var(--teal-tint); padding:8px 16px; border-radius:100px; }
  .hero h1{ font-weight:900; font-size:clamp(2.6rem,7vw,4.6rem); margin:0 auto; max-width:16ch; }
  .hero h1 .u{ background:linear-gradient(180deg,transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%); padding:0 .04em; }
  .hero .lead{ margin:24px auto 0; max-width:52ch; font-size:clamp(1.05rem,1.9vw,1.28rem); color:var(--body); font-weight:500; }
  .cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
  .reassure{ margin-top:16px; font-size:.82rem; color:var(--muted); font-weight:600; }
  .reassure b{ color:var(--teal-tx); }
  .scene{ margin-top:34px; width:100%; line-height:0; }
  .scene svg{ width:100%; height:auto; display:block; }
  .ray{ stroke:var(--yellow); stroke-width:7; stroke-linecap:round; }
  .win{ fill:#fff; opacity:.92; } .win--n{ fill:#aab2b9; opacity:.9; }
  #bulbGroup{ transform-box:fill-box; transform-origin:center bottom; }
  .anim #bulbGroup{ animation:bulbRise 1s cubic-bezier(.2,.75,.3,1) both; }
  .anim .ray{ opacity:0; animation:rayIn .5s ease both .5s; }
  .anim .house{ transform-box:fill-box; transform-origin:center bottom; animation:houseUp .6s cubic-bezier(.2,.8,.3,1) both; }
  .anim .house:nth-of-type(1){animation-delay:.15s;} .anim .house:nth-of-type(2){animation-delay:.22s;}
  .anim .house:nth-of-type(3){animation-delay:.29s;} .anim .house:nth-of-type(4){animation-delay:.36s;}
  .anim .house:nth-of-type(5){animation-delay:.43s;} .anim .house:nth-of-type(6){animation-delay:.5s;}
  .anim .house:nth-of-type(7){animation-delay:.57s;} .anim .house:nth-of-type(8){animation-delay:.64s;}
  @keyframes bulbRise{ from{transform:translateY(46px) scale(.9);opacity:0;} to{transform:none;opacity:1;} }
  @keyframes rayIn{ from{opacity:0;} to{opacity:.95;} }
  @keyframes houseUp{ from{transform:translateY(60px);opacity:0;} to{transform:none;opacity:1;} }

  /* ---------- BEATS ---------- */
  .beats{ background:var(--paper); border-top:1px solid var(--line); padding:52px 0 58px; }
  .beats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .beat{ text-align:center; padding:0 8px; }
  .beat__ic{ width:66px; height:66px; border-radius:20px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; }
  .beat__ic svg{ width:38px; height:38px; }
  .beat h3{ font-size:1.18rem; margin:0 0 8px; }
  .beat p{ color:var(--body); font-size:.96rem; }
  .beat__step{ font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; }
  .b1 .beat__ic{ background:var(--teal-tint); color:var(--teal);} .b1 .beat__step{ color:var(--teal-tx);}
  .b2 .beat__ic{ background:var(--green-tint); color:var(--green);} .b2 .beat__step{ color:var(--green-tx);}
  .b3 .beat__ic{ background:var(--purple-tint); color:var(--purple);} .b3 .beat__step{ color:var(--purple-tx);}

  /* ---------- SHOWCASE (real photos) ---------- */
  .show{ padding:80px 0; }
  .show__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
  .show .eyebrow{ color:var(--red-tx); }
  .show h2{ font-size:clamp(1.8rem,4vw,2.5rem); }
  .show p.lead{ margin-top:16px; color:var(--body); font-size:1.06rem; max-width:44ch; }
  .legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:26px; }
  .legend span{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.92rem; color:var(--ink); }
  .legend i{ width:14px; height:14px; border-radius:5px; display:inline-block; }
  .show__cta{ margin-top:30px; }
  .collage{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:center;
            max-width:620px; margin:0 auto; padding:14px 0; }
  .collage img{ width:100%; height:auto; aspect-ratio:720/974; object-fit:cover; border-radius:14px;
            border:5px solid #fff; box-shadow:0 18px 40px -24px rgba(10,10,10,.55); display:block; }
  .collage img:nth-child(1){ transform:rotate(-6deg); }
  .collage img:nth-child(2){ transform:rotate(2deg) scale(1.07); position:relative; z-index:2; }
  .collage img:nth-child(3){ transform:rotate(7deg); }

  /* ---------- AUDIENCE ---------- */
  .aud{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:76px 0; }
  .aud__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .chip{ display:flex; align-items:center; gap:14px; background:var(--canvas); border:1px solid var(--line);
    border-radius:14px; padding:18px 20px; }
  .chip i{ width:12px; height:40px; border-radius:6px; flex:none; }
  .chip b{ display:block; color:var(--ink); font-size:1.02rem; font-weight:800; letter-spacing:-.01em; }
  .chip span{ font-size:.85rem; color:var(--muted); font-weight:600; }

  /* ---------- WHY ---------- */
  .why{ padding:80px 0; }
  .why__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto; }
  .why__card{ display:flex; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px;
    box-shadow:0 14px 40px -30px rgba(10,10,10,.5); }
  .why__ic{ width:52px; height:52px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center; }
  .why__ic svg{ width:31px; height:31px; }
  .why__card h3{ font-size:1.16rem; margin:0 0 6px; }
  .why__card p{ color:var(--body); font-size:.96rem; }
  .wc1 .why__ic{ background:var(--green-tint); color:var(--green-tx);} 
  .wc2 .why__ic{ background:var(--teal-tint); color:var(--teal-tx);}
  .wc3 .why__ic{ background:var(--purple-tint); color:var(--purple-tx);}
  .wc4 .why__ic{ background:var(--red-tint); color:var(--red-tx);}

  /* ---------- LOOP TEASER ---------- */
  .loop{ background:var(--paper); border-top:1px solid var(--line); padding:76px 0; }
  .loop__row{ display:flex; align-items:flex-start; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:36px; }
  .node{ width:150px; text-align:center; }
  .node__ic{ width:74px; height:74px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; }
  .node__ic svg{ width:42px; height:42px; }
  .node b{ display:block; color:var(--ink); font-size:.98rem; font-weight:800; }
  .node span{ font-size:.8rem; color:var(--muted); font-weight:600; }
  .arrow{ align-self:center; margin-top:26px; color:#cfccc3; flex:none; }
  .arrow svg{ width:22px; height:22px; display:block; }
  .n1 .node__ic{ background:var(--teal-tint); color:var(--teal);} 
  .n2 .node__ic{ background:var(--green-tint); color:var(--green);}
  .n3 .node__ic{ background:var(--red-tint); color:var(--red);}
  .n4 .node__ic{ background:var(--purple-tint); color:var(--purple);}
  .n5 .node__ic{ background:var(--yellow-tint); color:var(--yellow-tx);}
  .loop__cta{ text-align:center; }

  /* ---------- CTA BAND ---------- */
  .cta-band{ background:var(--ink); color:#fff; padding:78px 0; text-align:center; }
  .cta-band h2{ color:#fff; font-size:clamp(1.8rem,4.4vw,2.6rem); max-width:20ch; margin:0 auto; }
  .cta-band p{ margin:16px auto 0; max-width:46ch; color:#d7d7d7; font-size:1.06rem; }
  .cta-band .cta{ margin-top:30px; }
  .cta-band .dot{ color:var(--teal); }
  .cta-band .reassure{ color:#9a9a9a; } .cta-band .reassure b{ color:var(--yellow); }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--paper); border-top:1px solid var(--line); padding:56px 0 30px; }
  .foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.4rem; color:var(--ink); letter-spacing:-.02em; }
  .brand svg{ width:30px; height:30px; }
  .foot__tag{ margin-top:14px; color:var(--muted); font-size:.92rem; max-width:32ch; }
  .foot h4{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 14px; font-weight:800; }
  .foot a{ display:block; color:var(--body); text-decoration:none; font-size:.94rem; font-weight:600; margin-bottom:10px; }
  .foot a:hover{ color:var(--teal-tx); }
  .foot__bottom{ margin-top:18px; display:flex; justify-content:space-between;
    gap:12px; flex-wrap:wrap; color:var(--muted); font-size:.84rem; font-weight:600; }

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .show__grid{ grid-template-columns:1fr; gap:20px; }
    .aud__grid{ grid-template-columns:repeat(2,1fr); }
    .foot__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  }
  @media (max-width:760px){
    .beats__grid{ grid-template-columns:1fr; gap:30px; max-width:420px; margin:0 auto; }
    .why__grid{ grid-template-columns:1fr; }
    .arrow{ transform:rotate(90deg); margin:0; }
    .node{ width:auto; }
  }
  @media (max-width:520px){
    .hero{ padding:44px 0 0; }
    .btn{ width:100%; justify-content:center; } .cta{ padding:0 6px; }
    .aud__grid{ grid-template-columns:1fr; }
    .foot__grid{ grid-template-columns:1fr; }
  }

  /* ---------- SITE NAV ---------- */
  section[id],header[id]{ scroll-margin-top:84px; }
  .nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(9px);
    border-bottom:1px solid var(--line); transition:box-shadow .2s ease; }
  .nav.scrolled{ box-shadow:0 6px 22px -16px rgba(10,10,10,.45); }
  .nav__in{ max-width:var(--maxw); margin:0 auto; padding:0 22px; height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .nav__logo{ display:flex; align-items:center; gap:9px; font-weight:900; font-size:1.16rem; color:var(--ink); letter-spacing:-.02em; text-decoration:none; }
  .nav__logo svg{ width:28px; height:28px; }
  .nav__right{ display:flex; align-items:center; gap:24px; }
  .nav__links{ display:flex; align-items:center; gap:24px; }
  .nav__links a{ color:var(--body); text-decoration:none; font-weight:700; font-size:.9rem; letter-spacing:-.01em; transition:color .15s ease; }
  .nav__links a:hover{ color:var(--teal-tx); }
  .nav__cta{ padding:10px 18px; font-size:.9rem; border-radius:10px; }
  .nav__burger{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
  .nav__burger span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; display:block; transition:transform .2s ease, opacity .2s ease; }
  .nav__burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .nav__panel{ display:none; padding:10px 22px 20px; border-top:1px solid var(--line); background:#fff; }
  .nav__panel.open{ display:block; }
  .nav__panel a{ display:block; padding:13px 2px; color:var(--ink); text-decoration:none; font-weight:700; font-size:1rem; border-bottom:1px solid var(--line); }
  .nav__panel a.btn{ border-bottom:none; text-align:center; margin-top:12px; width:100%; justify-content:center; }
  @media (max-width:1080px){
    .nav__links{ display:none; }
    .nav__right .nav__cta{ display:none; }
    .nav__burger{ display:flex; }
  }


/* ===== components from How It Works ===== */


  /* ---------- shared type ---------- */
  .eyebrow{
    font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted); margin:0 0 14px;
  }


  /* ---------- section rhythm ---------- */
  .sec{ padding:76px 0; }

  .sec--paper{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

  .hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }

  .hero .lead b{ color:var(--ink); font-weight:800; }

  .hero


  /* fanned card cast */


  /* ---------- CARD (the real deck face) ---------- */
  .card{
    background:var(--paper); border-radius:14px; overflow:hidden;
    border:1px solid var(--line);
  }

  .card__band{
    background:var(--deck); height:104px; display:flex; align-items:center; justify-content:center;
  }

  .card__disc{
    width:60px; height:60px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
  }

  .card__disc svg{ width:39px; height:39px; color:var(--deck); display:block; }

  .card__body{ padding:16px 14px 20px; text-align:center; }

  .card__title{ font-weight:900; font-size:1.18rem; color:var(--deck-tx); letter-spacing:-.01em; }

  .card__sub{ font-size:.74rem; color:var(--deck-tx); font-weight:600; margin-top:6px; line-height:1.35; }

  .card--ah .card__title,.card--ah .card__sub{ color:var(--yellow-tx); }


  /* ---------- THE FIVE DECKS strip ---------- */
  .decks{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:8px; }

  .decks .card{ box-shadow:0 10px 26px -20px rgba(10,10,10,.4); }


  /* ---------- STEPS ---------- */
  .steps{ display:flex; flex-direction:column; gap:26px; }

  .step{
    display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
    padding:34px; box-shadow:0 14px 40px -30px rgba(10,10,10,.5);
  }

  .step:nth-child(even) .step__media{ order:2; }

  .step__head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }

  .step__num{
    width:46px; height:46px; border-radius:12px; background:var(--deck); color:var(--ink);
    font-weight:900; font-size:1.24rem; display:flex; align-items:center; justify-content:center; flex:none;
  }

  .step__eq{ font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--deck-tx); }

  .step h3{ font-size:clamp(1.4rem,3vw,1.85rem); font-weight:800; }

  .step p{ margin-top:14px; color:var(--body); font-size:1.02rem; }

  .step__media{ display:flex; justify-content:center; }

  .step__media .card{ width:184px; box-shadow:0 22px 48px -22px rgba(10,10,10,.5); }

  .step__media .card .card__band{ height:120px; }

  .step__media .card .card__disc{ width:68px; height:68px; }

  .step__media .card .card__disc svg{ width:44px; height:44px; }


  /* blueprint mini canvas inside step 3 */
  .bp{ margin-top:22px; }

  .bp__lbl{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }

  .bp__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }

  .bp__cell{
    border:1.5px solid var(--line); border-radius:10px; padding:10px 12px;
    font-size:.8rem; font-weight:700; color:var(--ink); background:#fff; min-height:52px;
    display:flex; align-items:center;
  }

  .bp__cell span{ display:block; }

  .bp__cell i{ display:block; font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red-tx); margin-bottom:2px; }


  /* ---------- TIME FORMATS ---------- */
  .time__top{ text-align:center; max-width:56ch; margin:0 auto 34px; }

  .time__top h2{ font-size:clamp(1.7rem,4vw,2.3rem); }

  .time__top p{ margin-top:12px; color:var(--body); font-size:1.05rem; }

  .pills{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

  .pill{
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    padding:22px 30px; text-align:center; min-width:150px;
    box-shadow:0 12px 30px -26px rgba(10,10,10,.5);
  }

  .pill b{ display:block; font-size:2rem; font-weight:900; color:var(--ink); letter-spacing:-.02em; }

  .pill b em{ font-style:normal; font-size:.95rem; font-weight:700; color:var(--muted); }

  .pill span{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; display:block; }

  .pill:nth-child(1) span{ color:var(--teal-tx); }

  .pill:nth-child(2) span{ color:var(--purple-tx); }

  .pill:nth-child(3) span{ color:var(--green-tx); }


  /* ---------- CLOSING BAND ---------- */
  .closing{ background:var(--ink); color:#fff; padding:74px 0; text-align:center; }

  .closing p.big{
    font-size:clamp(1.5rem,3.6vw,2.15rem); font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.2;
    max-width:24ch; margin:0 auto;
  }

  .closing .dot{ color:var(--teal); }

  .closing p.q{ margin-top:18px; font-size:clamp(1.1rem,2.4vw,1.4rem); font-weight:800; }

  .closing .q em{ font-style:normal; color:var(--yellow); }


  /* ---------- reveal motion ---------- */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }

  .card{ transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }

  .decks .card:hover,.step__media .card:hover{ transform:translateY(-8px); }


  @media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .card,.decks .card:hover,.step__media .card:hover{ transition:none; transform:none; }
    .hero__cards--anim .card{ animation:none !important; }
  }


  /* hero load animation */
  .hero__cards--anim .card{ opacity:0; animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards; }

  .hero__cards--anim .card:nth-child(1){ animation-delay:.05s; }

  .hero__cards--anim .card:nth-child(2){ animation-delay:.13s; }

  .hero__cards--anim .card:nth-child(3){ animation-delay:.21s; }

  .hero__cards--anim .card:nth-child(4){ animation-delay:.29s; }

  .hero__cards--anim .card:nth-child(5){ animation-delay:.37s; }

  @keyframes rise{ from{ opacity:0; transform:var(--rest) translateY(30px);} to{ opacity:1; } }


  /* ---------- responsive ---------- */
  @media (max-width:860px){
    .hero__grid{ grid-template-columns:1fr; gap:20px; }
    .decks{ grid-template-columns:repeat(3,1fr); }
    .step{ grid-template-columns:1fr; gap:24px; padding:26px 22px; }
    .step:nth-child(even) .step__media{ order:0; }
    .step__media{ order:0; }
    .bp__grid{ grid-template-columns:repeat(2,1fr); }
  }

  @media (max-width:520px){
    .sec{ padding:56px 0; }
    .hero{ padding:60px 0 48px; }
    .decks{ grid-template-columns:repeat(2,1fr); }
    .decks .card:nth-child(5){ grid-column:1 / -1; max-width:calc(50% - 8px); margin:0 auto; }
    .bp__grid{ grid-template-columns:1fr; }
  }

/* ===== What's Included ===== */
.page-hero{ padding:70px 0 10px; text-align:center; }
.page-hero .eyebrow{ color:var(--teal-tx); background:var(--teal-tint); padding:8px 16px; border-radius:100px; }
.page-hero h1{ font-weight:900; font-size:clamp(2.3rem,5.5vw,3.6rem); max-width:18ch; margin:0 auto; }
.page-hero p{ margin:20px auto 0; max-width:52ch; color:var(--body); font-size:clamp(1.02rem,1.8vw,1.2rem); font-weight:500; }
.page-hero .cta{ margin-top:28px; }
.pack{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:0 16px 44px -32px rgba(10,10,10,.5); }
.pack--edu{ border:2px solid var(--teal); position:relative; }
.pack__tag{ position:absolute; top:-13px; left:30px; background:var(--teal); color:var(--ink); font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:100px; }
.pack h3{ font-size:1.5rem; }
.pack__for{ color:var(--muted); font-weight:600; font-size:.9rem; margin-top:4px; }
.pack__feat{ list-style:none; padding:0; margin:22px 0 0; }
.pack__feat li{ display:flex; align-items:flex-start; gap:11px; padding:9px 0; font-size:.98rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }
.pack__feat li:last-child{ border-bottom:none; }
.pack__feat svg{ width:22px; height:22px; flex:none; margin-top:1px; }
.pack__feat .ck{ color:var(--green-tx); }
.pack__feat .muted{ color:var(--muted); font-weight:500; }

.photostrip{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:900px; margin:0 auto; }
.photostrip img{ width:100%; height:340px; object-fit:cover; border-radius:16px; border:5px solid #fff; box-shadow:0 20px 44px -26px rgba(10,10,10,.5); }

.faq{ max-width:760px; margin:0 auto; }
.faq details{ background:var(--paper); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.faq summary{ cursor:pointer; padding:20px 24px; font-weight:800; color:var(--ink); font-size:1.04rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--teal); font-weight:400; line-height:1; flex:none; }
.faq details[open] summary::after{ content:"\2212"; }
.faq details[open] summary{ color:var(--teal-tx); }
.faq p{ padding:0 24px 22px; color:var(--body); font-size:.98rem; }

@media (max-width:720px){
  .photostrip{ grid-template-columns:1fr; }
  .photostrip img{ height:280px; }
}

/* ===== For Educators + About ===== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:960px; margin:0 auto; }
.quote{ background:var(--ink); color:#fff; padding:72px 0; }
.quote .wrap{ max-width:820px; text-align:center; }
.quote p{ font-size:clamp(1.4rem,3.4vw,2.05rem); font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.25; margin:0; }
.quote p .hl{ color:var(--yellow); }
.quote cite{ display:block; margin-top:20px; font-style:normal; font-weight:700; font-size:.92rem; color:#a3a3a3; letter-spacing:.03em; }
.prose{ max-width:720px; margin:0 auto; }
.prose p{ color:var(--body); font-size:1.08rem; line-height:1.75; margin:0 0 22px; }
.prose p.lede{ font-size:1.22rem; color:var(--ink); font-weight:500; }
.prose h3{ color:var(--ink); font-size:1.4rem; letter-spacing:-.01em; margin:38px 0 14px; }
@media(max-width:820px){ .grid-3{ grid-template-columns:1fr; max-width:460px; } }

/* ===== Buy page ===== */
.product-photo{ max-width:760px; margin:0 auto; }
.product-photo img{ width:100%; height:300px; object-fit:cover; border-radius:16px; border:5px solid #fff; box-shadow:0 20px 44px -26px rgba(10,10,10,.5); }
.price{ font-size:2.4rem; font-weight:900; color:var(--ink); letter-spacing:-.02em; margin:14px 0 2px; }
.price span{ font-size:.95rem; font-weight:700; color:var(--muted); }
.buyslot{ margin-top:20px; }
.btn--full{ width:100%; justify-content:center; }
.buyslot__note{ font-size:.82rem; color:var(--muted); font-weight:600; text-align:center; margin-top:10px; }

/* ===== Editions (3-up) ===== */
.editions{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1020px; margin:0 auto; align-items:start; }
@media(max-width:820px){ .editions{ grid-template-columns:1fr; max-width:440px; } }

/* ===== Resource hub / Town Hall ===== */
.hub-bar{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
.hub-bar__in{ max-width:var(--maxw); margin:0 auto; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hub-bar__logo{ display:flex; align-items:center; gap:9px; font-weight:900; font-size:1.16rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em; }
.hub-bar__logo svg{ width:28px; height:28px; }
.hub-bar__tag{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.toolgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin:0 auto; }
.tool{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; box-shadow:0 12px 34px -26px rgba(10,10,10,.5); }
.tool__ic{ width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
.tool__ic svg{ width:32px; height:32px; }
.tool h3{ font-size:1.14rem; margin:0 0 6px; }
.tool p{ color:var(--body); font-size:.92rem; margin:0 0 18px; flex:1; }
.tool .btn{ padding:11px 18px; font-size:.88rem; border-radius:11px; align-self:flex-start; }
.dl{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:820px; margin:0 auto; }
.dl a{ display:flex; align-items:center; gap:13px; background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:16px 18px; text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.dl a:hover{ border-color:var(--teal); transform:translateY(-2px); }
.dl i{ width:11px; height:36px; border-radius:6px; flex:none; }
.dl b{ color:var(--ink); font-size:1rem; font-weight:800; display:block; }
.dl span{ color:var(--muted); font-size:.83rem; font-weight:600; }
@media(max-width:820px){ .toolgrid{ grid-template-columns:1fr; } .dl{ grid-template-columns:1fr; } }

/* ===== Legal / policy pages + footer legal row ===== */
.foot__legal{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line); display:flex; gap:10px 22px; flex-wrap:wrap; }
.foot__legal a{ color:var(--muted); font-size:.84rem; font-weight:700; text-decoration:none; }
.foot__legal a:hover{ color:var(--teal-tx); }
.notice{ background:var(--yellow-tint); border:1px solid #efd486; border-radius:12px; padding:15px 20px; margin:0 0 28px; font-size:.9rem; color:#7a5b12; font-weight:600; line-height:1.55; }
.prose ul{ margin:0 0 22px; padding-left:22px; }
.prose li{ color:var(--body); font-size:1.04rem; line-height:1.7; margin-bottom:8px; }
.prose a{ color:var(--teal-tx); font-weight:700; }
.prose strong{ color:var(--ink); }

/* ===== Accessibility: visible keyboard focus ===== */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid var(--teal-tx); outline-offset:2px; border-radius:3px; }

/* ===== Accessibility utilities ===== */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:10px; top:-52px; z-index:200; background:#111; color:#fff; padding:11px 18px; border-radius:8px; font-weight:700; text-decoration:none; transition:top .15s ease; }
.skip:focus{ top:10px; }
#main{ scroll-margin-top:84px; }

/* ===== Theme toggle button ===== */
.theme-btn{ background:none; border:1.5px solid var(--line); border-radius:10px; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); padding:0; flex:none; }
.theme-btn:hover{ border-color:var(--teal); color:var(--teal-tx); }
.theme-btn svg{ width:19px; height:19px; }
.theme-btn .ic-sun{ display:none; }
[data-theme="dark"] .theme-btn .ic-sun{ display:block; }
[data-theme="dark"] .theme-btn .ic-moon{ display:none; }

/* ===== Dark theme (auto-detected on load, toggle-able per session) ===== */
[data-theme="dark"]{
  --canvas:#141519; --paper:#1e2027; --ink:#f3f4f6; --body:#c5c8cf; --muted:#9095a0; --line:#2d2f38;
  --teal-tx:#3cc5d5; --green-tx:#74d29b; --red-tx:#ff7079; --purple-tx:#c48fda; --yellow-tx:#ffcf4a;
  --teal-tint:rgba(27,175,191,.16); --green-tint:rgba(111,207,151,.15); --red-tint:rgba(217,74,84,.15);
  --purple-tint:rgba(155,89,182,.18); --yellow-tint:rgba(255,201,60,.15);
}
[data-theme="dark"] .nav{ background:rgba(18,19,23,.86); }
[data-theme="dark"] .nav.scrolled{ box-shadow:0 6px 22px -14px rgba(0,0,0,.85); }
[data-theme="dark"] .beats,[data-theme="dark"] .aud,[data-theme="dark"] .loop,[data-theme="dark"] .sec--paper,[data-theme="dark"] footer,[data-theme="dark"] .hub-bar{ background:#1a1c22; }
[data-theme="dark"] .card,[data-theme="dark"] .step,[data-theme="dark"] .why__card,[data-theme="dark"] .pack,[data-theme="dark"] .tool,[data-theme="dark"] .dl a,[data-theme="dark"] .pill,[data-theme="dark"] .faq details{ background:var(--paper); }
[data-theme="dark"] .chip,[data-theme="dark"] .bp__cell{ background:#23252d; }
[data-theme="dark"] .cta-band,[data-theme="dark"] .quote,[data-theme="dark"] .closing{ background:#0c0d10; }
[data-theme="dark"] .btn--primary,[data-theme="dark"] .step__num,[data-theme="dark"] .pack__tag,[data-theme="dark"] .btn--light{ color:#0a0a0a; }
[data-theme="dark"] .btn--ghost{ color:var(--ink); border-color:#3a3d47; }
[data-theme="dark"] .btn--ghost:hover{ background:#23252d; border-color:var(--ink); }
[data-theme="dark"] .card--ah .card__title,[data-theme="dark"] .card--ah .card__sub{ color:var(--yellow-tx); }
[data-theme="dark"] .notice{ background:rgba(255,201,60,.10); border-color:#5b4c1f; color:#e7cb79; }
[data-theme="dark"] .collage img,[data-theme="dark"] .photostrip img{ border-color:#2d2f38; }
[data-theme="dark"] :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{ outline-color:#ffcf4a; }

/* ===== Testimonials ===== */
.testi{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; margin:0 auto; }
.testi figure{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:0 12px 34px -26px rgba(10,10,10,.5); margin:0; display:flex; flex-direction:column; }
.testi blockquote{ margin:0; color:var(--ink); font-size:1.02rem; font-weight:600; line-height:1.6; flex:1; }
.testi blockquote::before{ content:"\201C"; display:block; font-size:2.6rem; line-height:.6; color:var(--teal); font-weight:900; margin-bottom:10px; }
.testi figcaption{ margin-top:16px; color:var(--muted); font-size:.88rem; font-weight:700; }
.testi figcaption b{ color:var(--ink); display:block; font-size:.94rem; }
@media(max-width:820px){ .testi{ grid-template-columns:1fr; max-width:460px; } }

/* ===== Status note (teal, friendly) ===== */
.notice--ok{ background:var(--teal-tint); border-color:#9ad9e0; color:#0f6d79; }
[data-theme="dark"] .notice--ok{ background:rgba(27,175,191,.12); border-color:#2a5a62; color:#7fd6e2; }

/* ===== Blog ===== */
.postcard{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; max-width:900px; margin:0 auto; box-shadow:0 16px 44px -32px rgba(10,10,10,.5); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.postcard:hover{ transform:translateY(-3px); box-shadow:0 22px 50px -30px rgba(10,10,10,.6); }
.postcard img{ width:100%; height:100%; min-height:240px; object-fit:cover; display:block; }
.postcard__b{ padding:28px 30px; display:flex; flex-direction:column; justify-content:center; }
.post-meta{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.post-meta b{ color:var(--teal-tx); }
.postcard__b h3{ color:var(--ink); font-size:1.35rem; letter-spacing:-.01em; line-height:1.3; margin:0 0 10px; }
.postcard__b p{ color:var(--body); font-size:.95rem; margin:0 0 16px; }
.postcard__b .link{ color:var(--teal-tx); font-weight:800; font-size:.92rem; }
.post-hero{ max-width:760px; margin:0 auto 34px; }
.post-hero img{ width:100%; height:320px; object-fit:cover; border-radius:16px; border:5px solid #fff; box-shadow:0 20px 44px -26px rgba(10,10,10,.5); }
[data-theme="dark"] .post-hero img{ border-color:#2d2f38; }
.authorbox{ max-width:720px; margin:40px auto 0; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px 24px; display:flex; gap:14px; align-items:center; }
.authorbox .dot{ width:46px; height:46px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.2rem; flex:none; }
.authorbox p{ margin:0; color:var(--body); font-size:.92rem; }
.authorbox b{ color:var(--ink); }
@media(max-width:760px){ .postcard{ grid-template-columns:1fr; } .postcard img{ min-height:190px; } }

/* ===== Logo image (client-supplied mark) ===== */
.nav__logo img{ width:30px; height:30px; object-fit:contain; display:block; }
.brand img{ width:32px; height:32px; object-fit:contain; display:block; }
.hub-bar__logo img{ width:30px; height:30px; object-fit:contain; display:block; }


/* ===== Mobile menu panel in dark mode ===== */
[data-theme="dark"] .nav__panel{ background:#1a1c22; border-top-color:var(--line); }
[data-theme="dark"] .nav__panel a{ color:var(--ink); border-bottom-color:var(--line); }
[data-theme="dark"] .nav__burger span{ background:var(--ink); }

/* ===== Worksheet section ===== */
.sheet{ max-width:760px; margin:0 auto; background:var(--paper); border:1px solid var(--line);
        border-radius:18px; padding:30px; box-shadow:0 16px 44px -32px rgba(10,10,10,.5); }
.sheet h3{ font-size:1.3rem; margin:0 0 6px; }
.sheet p.lead-sm{ color:var(--body); font-size:.97rem; margin:0 0 20px; }
.badge-soon{ display:inline-block; background:var(--yellow-tint); color:var(--yellow-tx);
        font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
        padding:5px 11px; border-radius:100px; margin-left:8px; vertical-align:middle; }

/* ===== Contact form ===== */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:34px; max-width:960px; margin:0 auto; align-items:start; }
.formcard{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:30px;
           box-shadow:0 16px 44px -32px rgba(10,10,10,.5); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:800; font-size:.88rem; color:var(--ink); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:11px; padding:13px 14px; transition:border-color .15s ease; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); }
.field input::placeholder, .field textarea::placeholder{ color:#a6a6a6; }
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{
  background:#16181d; border-color:#333640; color:var(--ink); }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.form-note{ font-size:.83rem; color:var(--muted); font-weight:600; margin-top:12px; }
.form-msg{ display:none; border-radius:12px; padding:15px 18px; font-weight:700; font-size:.95rem; margin-top:16px; }
.form-msg.ok{ display:block; background:var(--green-tint); color:var(--green-tx); }
.form-msg.err{ display:block; background:var(--red-tint); color:var(--red-tx); }
.infocard{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px; }
.infocard h3{ font-size:1.05rem; margin:0 0 6px; }
.infocard h3:not(:first-child){ margin-top:22px; }
.infocard p{ color:var(--body); font-size:.93rem; margin:0; }
.infocard a{ color:var(--teal-tx); font-weight:700; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   HUMAN TOUCHES
   Small deliberate imperfections + details nobody had to add.
   ============================================================ */

/* 1. Paper grain — kills the "pure digital white" flatness */
.sec--paper, .beats, .aud, .loop, footer{ position:relative; }
.sec--paper::before, .beats::before, .aud::before, .loop::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(10,10,10,.030) 1px, transparent 1px);
  background-size:14px 14px; }
[data-theme="dark"] .sec--paper::before,[data-theme="dark"] .beats::before,
[data-theme="dark"] .aud::before,[data-theme="dark"] .loop::before{
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); }
.sec--paper > *, .beats > *, .aud > *, .loop > *{ position:relative; z-index:1; }

/* 2. Hand-drawn marker underline — looks scribbled, not generated */
.scribble{ position:relative; display:inline-block; }
.scribble svg{ position:absolute; left:-4%; bottom:-.38em; width:108%; height:.55em;
  overflow:visible; pointer-events:none; }
.scribble path{ fill:none; stroke:var(--yellow); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 1.1s ease .5s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .scribble path{ animation:none; stroke-dashoffset:0; } }

/* 3. Cards lift and tilt slightly on hover — feels physical, like real cards */
.card, .why__card, .pack, .step__media .card, .tool{
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease; }
.decks .card:hover{ transform:translateY(-7px) rotate(-1.4deg); box-shadow:0 24px 44px -26px rgba(10,10,10,.55); }
.decks .card:nth-child(even):hover{ transform:translateY(-7px) rotate(1.4deg); }
.why__card:hover, .tool:hover{ transform:translateY(-4px); }
.pack:hover{ transform:translateY(-5px); }
@media (prefers-reduced-motion: reduce){
  .card:hover,.why__card:hover,.pack:hover,.tool:hover{ transform:none; } }

/* 4. Photos sit at slightly different angles — nothing is perfectly square */
.photostrip img:nth-child(1){ transform:rotate(-1.6deg); }
.photostrip img:nth-child(2){ transform:rotate(1.3deg); }
.photostrip img{ transition:transform .25s ease; }
.photostrip img:hover{ transform:rotate(0deg) scale(1.015); }

/* 5. A handwritten sign-off in the footer */
.signoff{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.signoff span{ color:var(--muted); font-size:.88rem; font-weight:600; }
.signoff .sig{ font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:1.5rem; color:var(--teal-tx); transform:rotate(-3deg); display:inline-block; }

/* ============================================================
   2026 BROWSER FEATURES  (progressive enhancement — older
   browsers simply don't run these and nothing breaks)
   ============================================================ */

/* 1. VIEW TRANSITIONS — pages cross-fade instead of hard-reloading,
      so the site feels like an app rather than a set of documents. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .18s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation:vt-in .26s cubic-bezier(0,0,.2,1) both; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(6px); } }
/* the logo and nav stay put across page changes instead of flickering */
.nav__logo{ view-transition-name:site-logo; }
.nav{ view-transition-name:site-nav; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; } }

/* 2. SCROLL-DRIVEN ANIMATION — reading progress on articles,
      tied directly to scroll position with no JavaScript at all. */
.readbar{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:120;
  background:linear-gradient(90deg,var(--teal),var(--yellow));
  transform-origin:0 50%; transform:scaleX(0); }
@supports (animation-timeline: scroll()){
  .readbar{ animation:readprog linear both; animation-timeline:scroll(root block); }
  @keyframes readprog{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}
@media (prefers-reduced-motion: reduce){ .readbar{ display:none; } }