/* Shared stylesheet for the Rethink Yearbooks marketing pages.
   Extracted from the previously-duplicated inline <style> (was verbatim across the
   9 marketing pages). Edit the header/design system HERE — once — not in 9 files.
   Page-unique overrides (if any) stay inline after the <link> on that page. */
  :root{
    --bg:#FBFAF4;          /* warm vanilla */
    --bg-2:#F1EFFE;        /* soft periwinkle tint */
    --card:#FFFFFF;
    --ink:#1C1830;         /* deep plum-ink */
    --ink-2:#3A3357;
    --violet:#5B4EE8;      /* electric periwinkle */
    --violet-deep:#473ACF;
    --violet-soft:#E9E6FD;
    --lime:#CBF24A;        /* chartreuse pop (signature) */
    --lime-deep:#A9D62E;
    --coral:#FF6B6B;
    --peach:#FFB37A;
    --dark:#241B45;        /* deep plum */
    --muted:#67627E;
    --line:#E8E5F2;
    --r:20px;--r-sm:12px;--maxw:1180px;
    --shadow:0 1px 2px rgba(28,24,48,.04), 0 22px 48px -28px rgba(71,58,207,.32);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:"Hanken Grotesque",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.04;letter-spacing:-.02em;margin:0;font-weight:700}
  a{color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
  .mono{font-family:"Space Mono",monospace}

  /* lime underline signature */
  .mark{position:relative;white-space:nowrap;z-index:0}
  .mark::after{content:"";position:absolute;left:-.02em;right:-.02em;bottom:.02em;height:.4em;background:var(--lime);
    z-index:-1;border-radius:3px;transform:skewX(-8deg);transform-origin:left;animation:swipe .65s .4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes swipe{from{transform:skewX(-8deg) scaleX(0)}to{transform:skewX(-8deg) scaleX(1)}}

  .btn{display:inline-flex;align-items:center;gap:.5em;font-family:"Hanken Grotesque",sans-serif;font-weight:600;
    font-size:15.5px;border-radius:999px;padding:13px 22px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--violet);color:#fff}
  .btn-primary:hover{background:var(--violet-deep);box-shadow:0 14px 26px -12px rgba(71,58,207,.6)}
  .btn-accent{background:var(--lime);color:var(--ink);border-color:var(--lime-deep)}
  .btn-accent:hover{background:#BCE634;box-shadow:0 14px 26px -12px rgba(169,214,46,.75)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
  .btn-sm{padding:9px 16px;font-size:14px}

  header.site{position:sticky;top:0;z-index:50;background:rgba(251,250,244,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:18px;height:68px}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
  .brand-mark{flex:none;display:block;height:44px;width:auto}
  .brand-word{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.03em;white-space:nowrap}
  .brand-word b{font-weight:800;color:var(--violet)}
  .navlinks{display:flex;gap:20px;margin-left:14px}
  .navlinks a{text-decoration:none;font-size:15px;color:var(--ink-2);font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
  .navlinks a:hover{border-color:var(--violet)}
  .nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
  /* Header CTA is a fixed chip: never let it wrap to two lines or get squeezed by
     the flex row on narrow phones. Longer in-page CTAs are still free to wrap. */
  .nav-cta .btn{white-space:nowrap;flex-shrink:0}
  .nav-cta .cta-short{display:none}
  /* Phones: the header is brand + CTA + hamburger with almost no slack, and the full
     label needs ~383px on its own. Show "Quote" instead so it never wraps. */
  @media (max-width:480px){
    .nav-cta .cta-full{display:none}
    .nav-cta .cta-short{display:inline}
    /* Compact brand: at 19px the wordmark alone needs 165px and stacked onto two
       lines next to the 44px logo. 36px logo + 16px wordmark fits on one line. */
    .brand{gap:8px}
    .brand-mark{height:36px}
    .brand-word{font-size:16px}
  }
  /* Very narrow phones still need the row itself tightened. */
  @media (max-width:380px){
    header .wrap{padding:0 16px}
    .nav{gap:12px}
    .nav-cta .btn{padding:8px 12px;font-size:13.5px}
  }
  /* Smallest phones (iPhone SE 1st gen and similar): a one-line wordmark only fits
     if the brand shrinks again, otherwise the hamburger is pushed off-screen. */
  @media (max-width:340px){
    .brand{gap:6px}
    .brand-mark{height:32px}
    .brand-word{font-size:13px}
  }
  .nav-cta .login{font-weight:600;font-size:15px;text-decoration:none;padding:8px 6px;color:var(--ink)}
  .hamb{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
  .hamb span{display:block;width:18px;height:2px;background:var(--ink);margin:3px 0;border-radius:2px}

  .hero{padding:58px 0 26px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
  .hero h1{font-size:clamp(38px,5.3vw,62px);font-weight:800;letter-spacing:-.035em}
  .hero p.lead{font-size:19px;color:var(--ink-2);max-width:40ch;margin:22px 0 0}
  .hero .sub{margin-top:6px;color:var(--muted);font-size:15.5px;max-width:42ch}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
  .route{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:border-color .15s, transform .15s, box-shadow .15s}
  .route:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .route .tag{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .route h3{font-size:20px;font-weight:700}
  .route p{margin:0;font-size:14.5px;color:var(--muted);min-height:42px}
  .route.fam:hover{border-color:var(--lime-deep)}
  .route.school:hover{border-color:var(--violet)}

  .stage{position:relative}
  .wall{position:relative;aspect-ratio:1/1.06;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);grid-auto-flow:row dense;gap:9px;padding:14px;background:var(--card);border:1.5px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
  .tile{border-radius:11px;position:relative;overflow:hidden;background:var(--g);opacity:0;transform:scale(.92);animation:pop .5s cubic-bezier(.2,.8,.2,1) forwards}
  .tile.tall{grid-row:span 2}
  .tile.tall3{grid-row:span 3}
  .tall .tile-collage,.tall3 .tile-collage{top:50%;width:84%;height:92%;grid-template-columns:1fr;grid-auto-rows:1fr}
  .tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.34),transparent 60%);z-index:0}
  .tile-photo{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:64%;height:60%;object-fit:cover;border-radius:7px;border:2.5px solid #fff;box-shadow:0 4px 11px rgba(0,0,0,.28);z-index:2}
  .tile-collage{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:78%;height:58%;display:grid;gap:6px;z-index:2}
  .tile-collage img{width:100%;height:100%;object-fit:contain;border-radius:3px;filter:drop-shadow(0 2px 5px rgba(28,24,48,.4))}
  .tile-collage.c2{grid-template-columns:1fr 1fr}
  .tile-collage.c3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .tile-collage.c3 img:first-child{grid-column:span 2}
  .tile-collage.c4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .hero-tile .tile-collage{top:51%;width:88%;height:78%;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:1fr}
  .tile-collage.c5{grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:1fr 1fr}
  .tile-collage.c5 img:first-child{grid-row:span 2}
  .tile-ph{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:74%;height:62%;display:grid;grid-template-columns:1fr 1fr;gap:5px;z-index:2}
  .tile-ph span{border:2px dashed rgba(255,255,255,.85);border-radius:5px;background:rgba(255,255,255,.18)}
  .tile .cap{z-index:3}
  .tile .cap{position:absolute;left:7px;bottom:6px;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:8.5px;color:#fff;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.35)}
  @keyframes pop{to{opacity:1;transform:scale(1)}}
  .tile.hero-tile{grid-column:span 2;grid-row:span 2;outline:4px solid var(--lime);outline-offset:-1px;box-shadow:0 0 0 2px var(--lime-deep), 0 14px 30px -12px rgba(0,0,0,.4);z-index:2}
  .badge{position:absolute;top:8px;left:8px;background:#fff;color:var(--ink);font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px;display:flex;align-items:center;gap:5px;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .badge .star{color:var(--violet)}
  .seen-note{position:absolute;right:-10px;bottom:-14px;background:var(--violet);color:#fff;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:12.5px;padding:9px 13px;border-radius:12px;box-shadow:var(--shadow);transform:rotate(-2deg)}
  .seen-note b{color:var(--lime)}
  .playbtn{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:rgba(28,24,48,.9);color:#fff;border:none;border-radius:999px;padding:10px 17px 10px 12px;font-family:"Hanken Grotesque",system-ui,"Segoe UI",Helvetica,sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s}
  .playbtn:hover{background:var(--violet)}
  .playbtn .tri{width:22px;height:22px;border-radius:999px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:11px}

  section{padding:72px 0}
  .sec-head{max-width:64ch}
  .sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;margin-top:10px}
  .sec-head p{color:var(--muted);font-size:17px;margin-top:14px}
  .dark{background:var(--dark);color:#fff}
  .dark .eyebrow{color:var(--lime)}
  .dark .sec-head p{color:#cdc6e6}
  .soft{background:var(--bg-2)}

  /* differentiator bar */
  .diffbar{background:var(--dark);color:#fff;border-radius:26px;padding:34px 34px 30px;position:relative;overflow:hidden}
  .diffbar::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 0%,rgba(203,242,74,.16),transparent 40%),radial-gradient(circle at 0% 100%,rgba(91,78,232,.3),transparent 45%)}
  .diffbar>*{position:relative}
  .diffbar h2{font-size:clamp(22px,2.6vw,30px);color:#fff;max-width:24ch}
  .diffbar .sub{color:#cdc6e6;font-size:15px;margin-top:8px}
  .diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
  .diff{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px}
  .diff .v{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
  .diff .v.lime{color:var(--lime)}
  .diff .k{color:#cdc6e6;font-size:12.5px;margin-top:4px}
  .why-inline{margin-top:44px;text-align:center;border-top:1px solid rgba(255,255,255,.14);padding-top:32px}
  .why-inline h2{color:#fff;font-size:clamp(20px,2.4vw,27px);max-width:30ch;margin:0 auto;letter-spacing:-.02em;line-height:1.1}
  .why-inline .sub{color:#cdc6e6;font-size:15px;margin:8px auto 0;max-width:60ch}
  .why-list{list-style:none;padding:0;margin:26px auto 0;max-width:660px;display:grid;grid-template-columns:1fr 1fr;gap:11px 32px;text-align:left}
  .why-list li{color:#cdc6e6;font-size:14px;line-height:1.4;position:relative;padding-left:22px}
  .why-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--lime);font-weight:800}
  .why-list li b{color:#fff;font-weight:700}
  @media(max-width:560px){.why-list{grid-template-columns:1fr;gap:9px}}
  .diffs-compact{grid-template-columns:repeat(6,1fr);gap:10px;margin-top:22px}
  .diffs-compact .diff{padding:11px 10px;text-align:left}
  .diffs-compact .diff .v{font-size:15px}
  .diffs-compact .diff .k{font-size:10px;margin-top:3px;line-height:1.3}
  @media(max-width:900px){.diffs-compact{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:520px){.diffs-compact{grid-template-columns:repeat(2,1fr)}}

  .ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
  .ba-card{border-radius:var(--r);padding:24px;border:1.5px solid var(--line);background:var(--card)}
  .ba-card.before{background:var(--bg-2)}
  .ba-card h4{font-size:17px;margin-bottom:4px}
  .ba-card .n{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:46px;letter-spacing:-.04em;line-height:1}
  .ba-card.after .n{color:var(--violet)}
  .ba-card.after{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
  .dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px}
  .statband-viz{align-items:start}
  .stat .l b{color:var(--violet);font-weight:700}
  .mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:16px}
  .mini-grid .mb{aspect-ratio:1;border-radius:5px;background:#1C1830;background-size:cover;background-position:center}
  .mini-collage{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;margin-top:16px;border-radius:7px;overflow:hidden}
  .mini-collage .mc{aspect-ratio:1;background:#1C1830;background-size:cover;background-position:center}
  .dot{width:11px;height:11px;border-radius:3px;background:#dcd8ea}
  .dot.on{background:var(--ink)}
  .dot.hl{background:var(--violet)}

  /* uvp cards */
  .uvp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  .uvp-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .15s, box-shadow .15s, border-color .15s}
  .uvp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--violet)}
  .uvp-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:700;color:#fff;font-size:12px;letter-spacing:.04em}
  .uvp-card h3{font-size:20px}
  .uvp-card p{margin:0;color:var(--muted);font-size:14.5px}
  .uvp-tag{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-top:auto}
  .dark .uvp-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
  .covers-band{margin-top:48px;text-align:center}
  .covers-lead{font-size:17px;color:var(--muted);max-width:42ch;margin:0 auto 28px}
  .covers-lead b{color:var(--violet)}
  .covers-row{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:0}
  .cover-card{width:150px;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:0 12px 16px;margin:0 -6px;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}
  .cover-card:hover{transform:translateY(-10px) rotate(0deg) !important;box-shadow:0 22px 40px -18px rgba(71,58,207,.45);z-index:6}
  .cc-top{height:48px;margin:0 -12px}
  .cc-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 3px 9px rgba(0,0,0,.18);margin:-38px auto 9px;display:block;position:relative;z-index:2}
  .cc-name{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:14px;color:var(--ink);line-height:1.1}
  .cc-meta{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:9.5px;color:var(--muted);margin-top:4px}
  .cc-year{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:9px;color:var(--muted);margin-top:2px}
  @media(max-width:620px){.cover-card{width:122px;margin:0 -4px}.cc-photo{width:64px;height:64px;margin-top:-32px}}
  .uvp-card .covers-row{justify-content:center;align-items:center;height:104px;margin:14px 0 2px}
  .uvp-card .cover-card{width:84px;padding:0 5px 8px;margin:0 -2px;border-radius:8px;box-shadow:0 8px 18px -10px rgba(28,24,48,.4);text-align:center}
  .uvp-card .cover-card .cc-top{height:24px;margin:0 -5px}
  .uvp-card .cover-card .cc-photo{width:38px;height:38px;border-width:2px;margin:-19px auto 5px;display:block}
  .uvp-card .cover-card .cc-name{font-size:8px}
  .uvp-card .cover-card .cc-meta{font-size:5.5px;margin-top:2px;white-space:nowrap}
  .uvp-card .cover-card .cc-year{font-size:5.5px;margin-top:1px}
  .page-mocks{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px 0 2px}
  .page-mock{width:108px;background:#fff;border:1.5px solid var(--line);border-radius:9px;box-shadow:0 10px 22px -12px rgba(28,24,48,.4);padding:7px;overflow:hidden;text-align:center}
  .page-mock .pm-img{width:100%;border-radius:5px;display:block}
  .page-mock .pm-cap{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:7.5px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.05em}
  .page-mocks .spread-img{width:100%;max-width:244px;height:104px;object-fit:contain;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:6px;display:block;margin:0 auto}
  .page-mocks .spread-fill{object-fit:cover;padding:0}
  #families .uvp-card{padding:18px;gap:9px}
  .cway{position:relative;max-width:1120px;margin:30px auto 0;min-height:470px}
  .cway-img{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
  .cway-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
  @media(max-width:980px){.cway-arrows{display:none}}
  .callout{position:absolute;width:246px;background:#fff;border:1.5px solid var(--line);border-left-width:4px;border-radius:13px;box-shadow:0 16px 34px -16px rgba(28,24,48,.5);padding:13px 15px}
  .callout b{display:block;font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:15px;color:var(--ink);line-height:1.2}
  .callout p{font-size:12.5px;color:var(--muted);margin:5px 0 0;line-height:1.42}
  .callout .tag-auto,.callout .tag-opt{margin-top:10px;display:inline-block;align-self:auto}
  .co-cover{top:1%;right:0;border-left-color:var(--violet)}
  .co-myclass{bottom:3%;left:0;border-left-color:var(--coral)}
  .co-custom{bottom:3%;right:0;border-left-color:#7CC00B}
  @media(max-width:980px){.cway{min-height:0;display:flex;flex-direction:column;gap:12px;max-width:560px}.callout{position:static;width:auto}}
  .dark .uvp-card:hover{border-color:var(--lime)}
  .dark .uvp-card h3{color:#fff}
  .dark .uvp-card p{color:#cdc6e6}
  .dark .uvp-tag{color:var(--lime)}

  /* canva */
  .pill-canva{display:inline-flex;align-items:center;gap:8px;background:var(--violet-soft);color:var(--violet-deep);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;font-family:"Space Mono",ui-monospace,Menlo,monospace;letter-spacing:.02em}
  .canva-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:46px;align-items:center;margin-top:36px}
  .canva-points{display:flex;flex-direction:column;gap:18px;margin-top:6px}
  .cp{display:flex;gap:14px}
  .cp .ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:700;font-size:15px;color:#fff}
  .cp:nth-child(1) .ic{background:var(--violet)}
  .cp:nth-child(2) .ic{background:var(--coral)}
  .cp:nth-child(3) .ic{background:var(--ink);color:var(--lime)}
  .cp:nth-child(4) .ic{background:var(--violet)}
  .cp h4{font-size:18px;margin-bottom:3px}
  .cp p{margin:0;color:var(--muted);font-size:14.5px}
  .tmpl-band{margin-top:48px}
  .tmpl-lead{text-align:center;color:var(--muted);font-size:16px;max-width:52ch;margin:0 auto 26px}
  .tmpl-lead b{color:var(--violet)}
  .tmpl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .tmpl-card{background:#fff;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
  .tmpl-card:hover{transform:translateY(-6px);box-shadow:0 20px 38px -18px rgba(71,58,207,.4)}
  .tmpl-art{aspect-ratio:3/4;background:center/cover no-repeat #faf9ff;position:relative;display:flex;align-items:flex-end;padding:10px}
  .tmpl-school{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:8.5px;color:#fff;background:rgba(28,24,48,.62);padding:3px 7px;border-radius:6px}
  .tmpl-card figcaption{padding:10px 12px;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center}
  @media(max-width:760px){.tmpl-row{grid-template-columns:1fr 1fr}}

  .editor{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  .editor-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:#faf9ff}
  .ed-dot{width:11px;height:11px;border-radius:99px}
  .ed-title{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);margin-left:6px}
  .avatars{margin-left:auto;display:flex}
  .av{width:26px;height:26px;border-radius:99px;border:2px solid #fff;margin-left:-8px;font-size:11px;color:#fff;display:grid;place-items:center;font-weight:700;font-family:"Hanken Grotesque",system-ui,"Segoe UI",Helvetica,sans-serif}
  .ed-share{margin-left:10px;background:var(--violet);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px}
  .editor-body{display:grid;grid-template-columns:64px 1fr;height:300px}
  .ed-rail{border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:8px;background:#faf9ff;overflow:hidden}
  .thumb{height:42px;border-radius:7px;background:var(--g) center/cover no-repeat;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .ed-canvas{position:relative;display:flex;align-items:center;justify-content:center;padding:14px;background:repeating-conic-gradient(#f1effb 0% 25%, #fff 0% 50%) 50%/22px 22px}
  .yb-page{position:relative;width:200px;height:268px;background:#fff;border-radius:4px;box-shadow:0 8px 22px rgba(28,24,48,.2);padding:11px;display:flex;flex-direction:column;gap:8px}
  .yb-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
  .yb-ttl{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-.01em;line-height:1}
  .yb-sub{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
  .yb-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:4px}
  .yb-cell{position:relative;border-radius:3px;background:var(--i) center/cover no-repeat;background-color:#eceaf6}
  .yb-cell.big{grid-column:span 2;grid-row:span 2}
  .yb-cell.sel{outline:2.5px solid var(--violet);outline-offset:1px;z-index:4}
  .ph{border-radius:9px;position:relative;overflow:hidden;background:var(--g) center/cover no-repeat}
  .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 60%)}
  .ph.sel{outline:2.5px solid var(--violet);outline-offset:1px;z-index:4}
  .handle{position:absolute;width:9px;height:9px;background:#fff;border:2px solid var(--violet);border-radius:2px;z-index:6}
  .handle.tl{top:-5px;left:-5px}.handle.tr{top:-5px;right:-5px}.handle.bl{bottom:-5px;left:-5px}.handle.br{bottom:-5px;right:-5px}
  .ed-page-title{position:absolute;top:8px;left:14px;z-index:7;font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.93);padding:3px 9px;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.14)}
  .cursor{position:absolute;z-index:5;font-size:11px;font-family:"Space Mono",ui-monospace,Menlo,monospace;color:var(--ink);background:var(--lime);padding:2px 7px;border-radius:8px;transform:translate(-4px,-4px);box-shadow:0 4px 10px rgba(0,0,0,.2);animation:float 4s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-12px)}}

  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
  .step{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:22px;position:relative;overflow:hidden;display:flex;flex-direction:column}
  .step .num{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:700;font-size:13px;color:var(--violet);letter-spacing:.1em}
  .step h3{font-size:19px;margin:14px 0 8px;font-weight:700}
  .step p{font-size:14.5px;color:var(--muted);margin:0}
  .step .free{margin-top:auto;align-self:flex-start;padding-top:0;display:inline-block;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.04em;color:var(--ink);background:var(--lime);padding:4px 9px;border-radius:999px}
  .step p{margin-bottom:14px}

  /* gallery */
  .gal{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:34px}
  .gcard{aspect-ratio:4/5;border-radius:14px;position:relative;overflow:hidden;background:var(--g);border:1.5px solid var(--line)}
  .gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.4))}
  .gcard{margin:0}
  .gmock{position:absolute;inset:0;width:100%;height:100%;display:block}
  .gcard .lbl,.gcard figcaption{position:absolute;left:9px;bottom:9px;z-index:2;color:#fff;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.02em;background:rgba(36,27,69,.74);padding:3px 8px;border-radius:7px}
  .gcard.wide{grid-column:span 2}
  .ig-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap}
  .ig-note{color:var(--muted);font-size:13.5px;max-width:46ch}
  .tag-auto,.tag-opt{align-self:flex-start;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:999px;margin-top:auto}
  .tag-auto{background:var(--lime);color:var(--ink)}
  .tag-opt{background:transparent;color:var(--muted);border:1.4px solid var(--line)}
  .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;cursor:default;box-shadow:none}
  .fam-note{margin:32px auto 0;max-width:840px;padding:22px 26px;background:var(--bg-2);border:1.5px solid #D9D2FA;border-left:6px solid var(--violet);border-radius:16px;font-size:16px;line-height:1.6;color:var(--ink-2);box-shadow:0 14px 34px -22px rgba(71,58,207,.5)}
  .fam-note b{color:var(--ink)}
  .fam-note-tag{display:block;width:fit-content;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--violet);padding:4px 10px;border-radius:999px;margin-bottom:12px}
  .dash-integrations{margin-top:32px;text-align:center;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.03em;color:var(--muted)}
  .dash-integrations b{color:var(--ink-2);font-weight:700}
  .how-video{position:relative;max-width:860px;margin:0 auto 40px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--shadow);background:#000}
  .how-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ig-carousel{position:relative;margin-top:30px}
  .ig-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ig-track::-webkit-scrollbar{display:none}
  .ig-card{flex:0 0 320px;width:320px;height:320px;scroll-snap-align:center;border:1.5px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;position:relative}
  .ig-embed{position:absolute;top:-54px;left:0;width:100%;height:470px;border:0}
  .ig-nav{position:absolute;top:calc(50% - 9px);transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,255,255,.96);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);transition:border-color .15s,color .15s,opacity .15s}
  .ig-nav:hover{border-color:var(--violet);color:var(--violet)}
  .ig-nav svg{width:20px;height:20px}
  .ig-nav.prev{left:-10px}
  .ig-nav.next{right:-10px}
  .ig-nav[disabled]{opacity:.32;cursor:default;border-color:var(--line);color:var(--ink)}
  @media(max-width:760px){.ig-nav{display:none}}
  @media(max-width:600px){.ig-card{flex-basis:300px;width:300px;height:300px}}

  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
  .price{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
  .price.school{background:var(--dark);color:#fff;border-color:var(--dark)}
  .price .who{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
  .price.school .who{color:var(--lime)}
  .price h3{font-size:24px;margin:8px 0 16px;font-weight:700}
  .price.school h3{color:#fff}
  .pline{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px}
  .price.school .pline{border-color:rgba(255,255,255,.18);color:#e7e2f5}
  .pline:last-of-type{border-bottom:0}
  .pline .v{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:700;white-space:nowrap}
  .price.school .pline .v{color:var(--lime)}
  .price .foot{margin-top:auto;padding-top:18px}
  .pnote{font-size:12.5px;color:var(--muted);margin-top:10px}
  .price.school .pnote{color:#b3a9d2}

  .tabs{display:inline-flex;background:var(--bg-2);border:1.5px solid var(--line);padding:5px;border-radius:999px;margin-top:26px;gap:4px}
  .tab{border:none;background:transparent;font-family:"Hanken Grotesque",system-ui,"Segoe UI",Helvetica,sans-serif;font-weight:600;font-size:14.5px;padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--muted)}
  .tab[aria-selected="true"]{background:var(--violet);color:#fff}
  .faq{margin-top:24px;border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line)}
  summary{list-style:none;cursor:pointer;padding:15px 4px;display:flex;justify-content:space-between;gap:16px;font-weight:600;font-size:16px;align-items:center}
  /* compact 2-column FAQ on wider screens */
  @media(min-width:760px){
    .faq-panel:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start;border-top:0}
    .faq-panel details:nth-child(-n+2){border-top:1px solid var(--line)}
  }
  details summary{font-size:15.5px}
  details p{font-size:14.5px;margin-bottom:16px}
  summary::-webkit-details-marker{display:none}
  summary .plus{flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line);display:grid;place-items:center;font-family:"Space Mono",ui-monospace,Menlo,monospace;transition:.2s;color:var(--ink)}
  details[open] summary .plus{background:var(--violet);border-color:var(--violet-deep);color:#fff;transform:rotate(45deg)}
  details p{margin:0 4px 20px;color:var(--muted);font-size:15.5px;max-width:70ch}
  .faq-panel[hidden]{display:none}

  .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:34px}
  .spec{background:var(--card);padding:22px}
  .spec .k{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .spec .val{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:700;font-size:21px;margin-top:8px;letter-spacing:-.02em}
  .spec .val small{font-family:"Hanken Grotesque",system-ui,"Segoe UI",Helvetica,sans-serif;font-weight:500;font-size:13px;color:var(--muted);display:block;margin-top:3px;letter-spacing:0}

  .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:34px}
  .quote .p-stat{color:var(--violet);font-weight:700}
  .quote{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:26px}
  .quote .mk{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:44px;color:var(--violet);line-height:.4}
  .quote p{font-size:17px;margin:16px 0 18px}
  .quote .by{font-size:13.5px;color:var(--muted);font-family:"Space Mono",ui-monospace,Menlo,monospace}

  .final{background:var(--dark);color:#fff;border-radius:28px;padding:60px;text-align:center;position:relative;overflow:hidden}
  .final::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 5%,rgba(203,242,74,.2),transparent 42%),radial-gradient(circle at 5% 95%,rgba(255,107,107,.22),transparent 44%),radial-gradient(circle at 95% 95%,rgba(91,78,232,.34),transparent 42%)}
  .final>*{position:relative}
  .final h2{font-size:clamp(32px,4.6vw,54px);font-weight:800}
  .final .cta-row{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}

  footer{padding:60px 0 40px;border-top:1px solid var(--line);margin-top:72px}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
  .foot-grid h5{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:700}
  .foot-grid a{display:block;text-decoration:none;color:var(--ink-2);font-size:14.5px;padding:5px 0}
  .foot-grid a:hover{color:var(--violet)}
  .news{display:flex;gap:8px;margin-top:10px}
  .news input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-family:inherit;font-size:14px;background:var(--card)}
  .news input:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
  .foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

  .modal{position:fixed;inset:0;z-index:100;background:rgba(20,16,40,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:24px}
  .modal[hidden]{display:none}
  .modal-card{width:min(880px,100%);background:#000;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
  .modal-x{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:99px;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer}
  .modal-x:hover{background:rgba(255,255,255,.3)}
  .video-frame{position:relative;aspect-ratio:16/9}
  .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

  /* comparison table */
  .compare-wrap{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ctable{width:100%;border-collapse:collapse;min-width:680px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
  .ctable th,.ctable td{padding:15px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:14.5px}
  .ctable thead th{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--muted);background:#faf9ff}
  .ctable td:first-child,.ctable thead th:first-child{text-align:left;font-weight:600;color:var(--ink)}
  .ctable .us{background:var(--violet-soft)}
  .ctable thead th.us{background:var(--violet);color:#fff}
  .ctable tbody tr:last-child td{border-bottom:0}
  .ctable .yes{color:var(--violet-deep);font-weight:700}
  .ctable .no{color:#bdb8cc}
  .compare-note{font-size:12px;color:var(--muted);margin-top:12px}

  /* won't-have-to block */
  .wonthave{margin-top:30px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:26px}
  .wonthave h3{font-size:19px;margin-bottom:16px}
  .wonthave ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
  .wonthave li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
  .wonthave li::before{content:"✕";color:var(--coral);font-weight:800;flex:none;line-height:1.4}
  @media(max-width:600px){.wonthave ul{grid-template-columns:1fr}}

  /* faq tools */
  .faq-tools{margin-top:22px;display:flex;flex-direction:column;gap:14px}
  .faq-search{width:100%;max-width:440px;border:1.5px solid var(--line);border-radius:999px;padding:12px 18px;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink)}
  .faq-search:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
  .faq-cats{display:flex;flex-wrap:wrap;gap:8px}
  .chip{border:1.5px solid var(--line);background:var(--card);font-family:"Hanken Grotesque",system-ui,"Segoe UI",Helvetica,sans-serif;font-weight:600;font-size:13.5px;padding:7px 14px;border-radius:999px;cursor:pointer;color:var(--muted)}
  .chip[aria-pressed="true"]{background:var(--violet);color:#fff;border-color:var(--violet)}
  .chip:hover{border-color:var(--violet)}
  .faq-empty{margin-top:18px;color:var(--muted);font-size:15px}
  .faq-subhead{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:24px 0 4px;padding-top:16px;border-top:1px solid var(--line)}

  /* hero help */
  .hero-help{margin-top:18px;font-size:12.5px;color:var(--muted);white-space:nowrap}
  .hero-help a{color:var(--violet);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
  .hero-help a:hover{border-color:var(--violet)}

  /* stats band */
  .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
  .stat{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:24px}
  .stat .n{font-family:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;font-weight:800;font-size:36px;letter-spacing:-.03em;color:var(--violet);line-height:1}
  .stat .n small{display:block;font-family:"Hanken Grotesque",system-ui,"Segoe UI",Helvetica,sans-serif;font-weight:700;font-size:14px;color:var(--violet);letter-spacing:0;margin-top:6px}
  .stat .l{color:var(--muted);font-size:14px;margin-top:8px}
  @media(max-width:700px){.statband{grid-template-columns:1fr 1fr}}

  /* lifechapters teaser */
  .lc-teaser{background:linear-gradient(135deg,#FFF2EB,#FFE6DC);border-top:1px solid var(--line)}
  .lc-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
  .lc-badge{display:inline-block;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#C24A2B;background:#FFD9C9;padding:6px 12px;border-radius:999px;font-weight:700}
  .lc-copy h2{margin:16px 0 0;font-size:clamp(24px,3vw,34px)}
  .lc-copy p{color:var(--ink-2);font-size:16px;margin-top:12px;max-width:56ch}
  .wl-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;position:relative}
  .wl-email{flex:1;min-width:220px;border:1.5px solid #E7B9A6;border-radius:999px;padding:13px 18px;font-family:inherit;font-size:15px;background:#fff;color:var(--ink)}
  .wl-email:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:var(--coral)}
  .wl-btn{background:var(--coral);color:#fff;border:none;border-radius:999px;padding:13px 24px;font-family:"Hanken Grotesque",system-ui,"Segoe UI",Helvetica,sans-serif;font-weight:700;font-size:15px;cursor:pointer}
  .wl-btn:hover{background:#ef5a5a}
  /* The CTA is now a link, not a submit button — the button styles alone
     leave it inline and underlined. */
  a.wl-btn{display:inline-block;text-decoration:none}
  .lc-cta-row{margin:22px 0 0}
  /* .lc-copy p (0,1,1) outranks .lc-fine (0,1,0), so font-size lost while every
     other declaration won — the line rendered as 16px mono and wrapped. Matching
     the parent selector settles it without !important. */
  .lc-copy p.lc-fine{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);margin:14px 0 0;max-width:none}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .wl-thanks{margin-top:14px;color:#19794f;font-weight:700}
  .lc-learn{margin-top:14px;font-size:14.5px}
  .lc-learn a{color:#C24A2B;font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
  .lc-learn a:hover{border-color:#C24A2B}
  .lc-art{display:flex;justify-content:center}
  @media(max-width:820px){.lc-inner{grid-template-columns:1fr}.lc-art{display:none}}
  /* privacy band */
  .privacy-band{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:30px 32px}
  .privacy-head h2{font-size:clamp(24px,3vw,34px);margin-top:8px}
  .privacy-head p{color:var(--muted);margin-top:10px}
  .privacy-list{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
  .privacy-list li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
  .privacy-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--violet);font-weight:800}
  .privacy-list li b{color:var(--ink)}
  @media(max-width:600px){.privacy-list{grid-template-columns:1fr}}

  /* parent → PTA referral */
  .fam-refer{margin:30px auto 0;max-width:840px;text-align:center;font-size:16px;color:var(--ink-2)}
  .fam-refer a{color:var(--violet);font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
  .fam-refer a:hover{border-color:var(--violet)}

  /* fundraising callout */
  .fundraise{margin-top:20px;background:var(--bg-2);border:1.5px solid #D9D2FA;border-left:6px solid var(--lime-deep);border-radius:16px;padding:20px 24px}
  .fundraise-tag{display:inline-block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:4px 10px;border-radius:999px;margin-bottom:10px}
  .fundraise p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
  .fundraise b{color:var(--ink)}

  /* self-hosted sample flip-through */
  .sample-wrap{display:flex;flex-direction:column;align-items:center;margin-top:8px}
  .sample-vid{width:100%;max-width:340px;aspect-ratio:4/5;border-radius:18px;border:1.5px solid var(--line);box-shadow:var(--shadow);background:#000;display:block}
  .sample-cap{margin:14px auto 0;max-width:46ch;text-align:center;font-size:14px;color:var(--muted)}
  .sample-cap b{color:var(--ink-2)}
  .sample-cap span{display:block;font-size:12px;margin-top:4px}
  .spreads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
  .spread{margin:0;background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
  .spread img{display:block;width:100%;height:auto}
  .spread figcaption{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center;padding:10px 8px}
  @media(max-width:760px){.spreads{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.spreads{grid-template-columns:1fr}}

  /* quote form */
  .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:8px}
  .quote-copy h2{font-size:clamp(26px,3.2vw,38px);margin-top:10px}
  .quote-copy>p{color:var(--muted);font-size:16px;margin-top:14px}
  .quote-benefits{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
  .quote-benefits li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
  .quote-benefits li::before{content:"✓";position:absolute;left:0;color:var(--violet);font-weight:800}
  .quote-alt{font-size:14.5px;margin-top:18px}
  .quote-alt a{color:var(--violet);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
  .quote-alt a:hover{border-color:var(--violet)}
  .quote-form{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
  .qf-field{display:flex;flex-direction:column;gap:5px}
  /* Marks a required field for sighted readers. aria-hidden, because the input's
     own `required` is what tells assistive tech — the star is never the only signal. */
  .qf-req{color:var(--violet);text-decoration:none;font-weight:700;margin-left:1px}
  .qf-field span{font-size:13px;font-weight:600;color:var(--ink-2)}
  .qf-field input,.qf-field select,.qf-field textarea{border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-family:inherit;font-size:15px;background:var(--bg);color:var(--ink)}
  .qf-field input:focus,.qf-field select:focus,.qf-field textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
  .qf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .qf-note{font-size:12px;color:var(--muted);margin:2px 0 0;text-align:center}

  /* Confirmation panel — occupies the form's slot in the grid after submit. */
  .quote-thanks{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;outline:none}
  .quote-thanks[hidden]{display:none}
  .qt-mark{width:44px;height:44px;border-radius:50%;background:#E4F5EC;color:#19794F;display:grid;place-items:center;font-size:21px;font-weight:700;line-height:1}
  .quote-thanks h3{margin:0;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.015em;text-wrap:balance}
  .qt-lede{margin:0;color:var(--ink);font-size:16px;line-height:1.55}
  .qt-next{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
  .qt-next li{position:relative;padding-left:22px;font-size:14.5px;color:var(--muted);line-height:1.5}
  .qt-next li::before{content:"";position:absolute;left:5px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--lime)}
  .qt-meanwhile{margin:8px 0 0;padding-top:15px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
  .qt-meanwhile a{color:var(--violet);font-weight:600}
  @media(prefers-reduced-motion:reduce){.quote-thanks{scroll-behavior:auto}}
  .qf-error{font-size:12.5px;font-weight:600;color:#c0362c;margin-top:2px}
  /* Submit-time failure banner. The per-field .qf-error is a 12.5px note under one box;
     this one has to carry the fact that an enquiry did NOT send, so it is bigger, boxed,
     and sits directly above the button. Its link is underlined rather than colour-only —
     it is the recovery path (email a human) for someone who has just been told the thing
     they filled in went nowhere, and it must not read as decoration. */
  .qf-submit-error{font-size:13.5px;line-height:1.5;margin:2px 0 0;padding:11px 12px;border:1.5px solid #c0362c;border-radius:10px;background:#FDF2F1}
  .qf-submit-error a{color:#c0362c;font-weight:700;text-decoration:underline}
  .qf-field input[aria-invalid="true"],.qf-field select[aria-invalid="true"],.qf-field textarea[aria-invalid="true"]{border-color:#c0362c}
  .qf-field input[aria-invalid="true"]:focus,.qf-field select[aria-invalid="true"]:focus,.qf-field textarea[aria-invalid="true"]:focus{outline-color:#c0362c}
  @media(max-width:820px){.quote-grid{grid-template-columns:1fr;gap:28px}}
  @media(max-width:520px){.qf-row{grid-template-columns:1fr}}

  :focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:6px}
  .mobile-menu{display:none}

  @media (max-width:980px){
    .navlinks,.nav-cta .navhide{display:none}
    .hamb{display:block}.nav-cta{margin-left:0}
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .canva-grid{grid-template-columns:1fr;gap:30px}
    .uvp{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .specs{grid-template-columns:1fr 1fr}
    .diffs{grid-template-columns:repeat(2,1fr)}
    .gal{grid-template-columns:repeat(3,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr}
    .final{padding:40px 24px}
    .mobile-menu.open{display:block;border-bottom:1px solid var(--line);background:var(--bg)}
    .mobile-menu a{display:block;padding:14px 0;text-decoration:none;font-weight:600;border-bottom:1px solid var(--line);color:var(--ink)}
  }
  @media (max-width:600px){
    .split,.ba,.steps,.price-grid,.quotes,.foot-grid{grid-template-columns:1fr}
    .diffs{grid-template-columns:repeat(2,1fr)}
    .gal{grid-template-columns:1fr 1fr}.gcard.wide{grid-column:span 2}
    .gal,.statband{margin-top:22px}
    .hero-grid{gap:24px}.wall{aspect-ratio:3/2;padding:10px;gap:7px}
    /* Lead is body copy and the loosest block in the mobile fold — tighten it below the
       compacted H1 (19px/~1.53 line-height is airy at phone widths). */
    .hero p.lead{font-size:16.5px;line-height:1.4;margin-top:14px}
    section{padding:40px 0}.hero{padding:30px 0 12px}
    .seen-note{right:0;left:auto;font-size:11px;padding:7px 10px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto}
    .mark::after{transform:skewX(-8deg)}.tile{opacity:1;transform:none}
  }


  /* --- Mobile header + hero: compact, and an eyebrow that fits on one line ---
     Declared last so it wins over the max-width:600px block above.
     At .16em tracking the 39-char eyebrow needed two lines; .08em fits one. */
  @media (max-width:480px){
    .nav{height:58px}
    .hero{padding:16px 0 18px}
    .hero-grid{gap:22px}
    .eyebrow{font-size:11px;letter-spacing:.08em;line-height:1.45}
  }
  @media (max-width:380px){
    .eyebrow{font-size:10.5px;letter-spacing:.06em}
  }
  @media (max-width:340px){
    .eyebrow{font-size:10px;letter-spacing:.04em}
  }

.qf-hint{display:block;margin-top:5px;font-weight:400;font-size:12.5px;line-height:1.45;color:var(--muted)}