/* ==========================================================================
   MULTI-PAGE ADDITIONS
   site.css is the stylesheet from the original one-page draft
   (docs/reference/one-page-draft.html), kept verbatim so the two stay easy to
   compare. Everything the split into separate pages needed lives here.
   ========================================================================== */

.topbar-actions{display:flex;gap:.55rem;align-items:center;flex:none}
nav.main a[aria-current="page"]{color:var(--plum);border-bottom-color:var(--gold-btn);font-weight:500}

/* Small screens. The draft hid its nav below 66rem and leaned on in-page
   anchors; with separate pages that would strand people on the first one, so
   the same links sit in a scrollable strip under the bar. */
.mnav{display:flex;gap:.45rem;overflow-x:auto;padding-block:0 .6rem;scrollbar-width:none}
.mnav::-webkit-scrollbar{display:none}
.mnav a{flex:none;font-size:.82rem;text-decoration:none;color:var(--ink-2);background:var(--paper);
  border:1.5px solid var(--rule);border-radius:20px;padding:.32rem .8rem;line-height:1.3}
.mnav a:hover,.mnav a[aria-current="page"]{border-color:var(--plum);color:var(--plum)}
.mnav a[aria-current="page"]{font-weight:500}
@media (min-width:66rem){.mnav{display:none}}
@media (max-width:65.99rem){html{scroll-padding-top:7.5rem}}
@media (max-width:24rem){.themetoggle{padding-inline:.4rem}.brand .wm small{letter-spacing:.1em}}

/* the first heading on an inner page is its h1, sized like the draft's h2 */
.shead h1{font-size:calc(clamp(2rem,1.35rem + 2.6vw,3.25rem) * var(--scale));font-weight:800;letter-spacing:-.03em;line-height:1.12}

/* Heading levels. Splitting the page promoted some h3/h4 to h2/h3 so each page
   has a clean outline. site.css styles those components by tag, so the look is
   restored here by class instead. */
.h3{font-size:calc(clamp(1.24rem,1.05rem + .72vw,1.58rem) * var(--scale));font-weight:600;letter-spacing:-.022em}
.h4{font-size:calc(1.06rem * var(--scale));font-weight:600;letter-spacing:-.012em}
.pillar .h3{margin-bottom:.55rem}
.honest .h3{font-size:calc(1.2rem * var(--scale));margin-bottom:.8rem}
.offer .h3{font-size:calc(1.42rem * var(--scale));margin-bottom:.45rem;letter-spacing:-.026em}
.step .h4{margin-bottom:.3rem}

.more{margin-top:1.9rem}

/* footer column headings: h2 for a correct outline, styled as the draft's h4 */
footer .fhead{font-family:var(--ff-mono);font-size:calc(.68rem * var(--scale));letter-spacing:.13em;text-transform:uppercase;
  color:var(--plum);font-weight:500;margin-bottom:.85rem}

/* ---------- home: one card per offer ---------- */
.teasers{display:grid;gap:1rem}
@media (min-width:40rem){.teasers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:66rem){.teasers{grid-template-columns:repeat(4,minmax(0,1fr))}}
.teaser{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-top:5px solid var(--plum);border-radius:10px;padding:1.2rem 1.15rem;
  transition:transform .13s ease,border-color .13s ease}
.teaser.is-gold{border-top-color:var(--gold-btn)}
.teaser.is-teal{border-top-color:var(--teal)}
.teaser:hover{transform:translateY(-2px);border-left-color:var(--plum);border-right-color:var(--plum);border-bottom-color:var(--plum)}
.teaser h3{font-size:calc(1.18rem * var(--scale))}
.teaser .price{font-size:calc(1.55rem * var(--scale))}
.teaser p{font-size:calc(.9rem * var(--scale));line-height:1.5;color:var(--ink-2);margin:0}
.teaser .go{margin-top:auto;padding-top:.5rem;font-family:var(--ff-mono);font-size:calc(.68rem * var(--scale));
  letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}

/* ---------- closing call to action on every page but /start/ ---------- */
.cta-sec{padding-block:clamp(2.5rem,6vw,4.5rem)}
.cta{border:2px solid var(--plum);border-radius:10px;background:var(--plum-soft);padding:clamp(1.4rem,3vw,2.2rem);
  display:grid;gap:1.2rem;align-items:center}
@media (min-width:52rem){.cta{grid-template-columns:minmax(0,1fr) auto;gap:2.5rem}}
.cta h2{font-size:calc(clamp(1.45rem,1.15rem + 1.2vw,2rem) * var(--scale));margin-bottom:.5rem}
.cta p{color:var(--ink-2);margin:0;max-width:56ch}

/* Netlify Forms honeypot: people never see it, bots fill it in */
.hp{display:none}