/* One design system for every page (Nov 5, 2026): Inter type, one button style, links that look
   like links, and cards that look tappable. Loaded last (from the header partial) so it wins. */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ui-green: #00785a; --ui-green-2: #005f47; --ui-green-soft: #e6f3ee;
  --ui-ink: #14201a; --ui-ink-2: #34423b; --ui-mute: #4f5d56; --ui-line: #d5ddd8;
  --ui-radius: 12px;
}
html body, html body button, html body input, html body select, html body textarea { font-family: var(--ui-font); }
html body { color: var(--ui-ink); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss03"; }
html body h1, html body h2, html body h3, html body h4 { font-family: var(--ui-font); color: var(--ui-ink); }
html body h1 { font-weight: 800; letter-spacing: -0.028em; line-height: 1.08; }
html body h2 { font-weight: 750; letter-spacing: -0.02em; line-height: 1.18; }
html body h3, html body h4 { font-weight: 700; letter-spacing: -0.01em; }
html body .h4-hero h1, html body .lp-band h1 { color: #fff; }
html body .h4 { --mute: var(--ui-mute); --ink-2: var(--ui-ink-2); --ink: var(--ui-ink); }

/* Links in text: green, bold enough, clearly underlined. */
main p a:not([class]), main li a:not([class]), .lp-small a:not([class]), .h4-disclose a {
  color: var(--ui-green-2); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
main p a:not([class]):hover, main li a:not([class]):hover { color: var(--ui-green); text-decoration-thickness: 2.5px; }
.h4-hero .h4-disclose a, .lp-band a:not([class]) { color: #fff; }

/* One button style. Primary: solid green. Light: white on green bands. Quiet: outlined. */
.h4-btn, .btn, .cx-btn, .pdf-btn, .sbtn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--ui-radius);
  font-family: var(--ui-font); font-size: 16.5px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.2;
  text-decoration: none !important; cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.h4-btn:not(.h4-btn-light):not(.h4-btn-quiet), .btn-primary, .cx-btn:not(.cx-btn-quiet), .pdf-btn {
  background: linear-gradient(180deg, #0a8a68, var(--ui-green)); color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -10px rgba(0,95,71,.75);
}
.h4-btn:not(.h4-btn-light):not(.h4-btn-quiet):hover, .btn-primary:hover, .cx-btn:not(.cx-btn-quiet):hover, .pdf-btn:hover {
  background: linear-gradient(180deg, var(--ui-green), var(--ui-green-2)); transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(0,95,71,.85);
}
.h4-btn:active, .btn:active, .cx-btn:active, .pdf-btn:active { transform: translateY(0) scale(.985); }
.h4-btn:focus-visible, .btn:focus-visible, .cx-btn:focus-visible, .pdf-btn:focus-visible { outline: 3px solid #7cc4ad; outline-offset: 2px; }
.h4-btn-light { background: #fff; color: var(--ui-green-2) !important; box-shadow: 0 8px 18px -12px rgba(0,0,0,.45); }
.h4-btn-quiet, .cx-btn-quiet { background: #fff; color: var(--ui-green-2) !important; box-shadow: inset 0 0 0 1.5px var(--ui-line); }
.h4-btn-quiet:hover, .cx-btn-quiet:hover { box-shadow: inset 0 0 0 1.5px var(--ui-green); background: var(--ui-green-soft); }
.h4-btn[disabled], .pdf-btn:disabled, .cx-btn:disabled { opacity: .6; cursor: progress; transform: none; }
/* Text-style actions ("See all", "Back") read as actions, with an arrow. */
.dr-all, .fm-back, .guide-link, .lp-more { color: var(--ui-green-2) !important; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Chips and choice buttons: one height, one shape. */
.sc-ex, .h4-fchip, .h4-ask-sugg button { min-height: 44px; border-radius: 999px; font-family: var(--ui-font); font-weight: 600; }
.fm-opt { min-height: 54px; border-radius: var(--ui-radius); font-family: var(--ui-font); font-size: 16px; font-weight: 600; }

/* Cards that open something show a chevron, so they look tappable. */
.dr-card, .hl-card, .mt-card, .guide-card { position: relative; padding-right: 44px !important; }
.dr-card::after, .hl-card::after, .mt-card::after, .guide-card::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-right: 2.5px solid var(--ui-green); border-top: 2.5px solid var(--ui-green); transform: rotate(45deg); transition: right .15s;
}
.dr-card:hover::after, .hl-card:hover::after, .mt-card:hover::after, .guide-card:hover::after { right: 12px; }
.dr-card b, .hl-card b, .mt-card b { color: var(--ui-ink); }

/* Readable small text for 40+: nothing under 13px, muted text dark enough. */
.h4-consent, .h4-fine, .pdf-consent, .lp-small { font-size: 13.5px !important; color: var(--ui-mute) !important; }
.dr-head p, .h4-sub, .lp-lede { font-size: 16.5px; }

/* Homepage hero: no video; a centered, calm hero with the four doors in one row on wide screens. */
.h4-hero-video { display: none !important; } /* old hero video slot, now unused */
@media (min-width: 960px) {
  .h4-hero-grid { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; }
  .h4-hero-main { max-width: 900px; }
  .h4-hero-main .h4-sub, .h4-hero-main .h4-hask { margin-left: auto; margin-right: auto; }
  .h4-hask { max-width: 640px; }
  .h4-ask-sugg { justify-content: center; }
  .h4-doors { max-width: 900px; margin-left: auto; margin-right: auto; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); text-align: left; }
}

/* Hub order: value first, then the ask. Offers and helpers come before the Perk Pass; the sticky
   button on phones keeps the sign-up one tap away the whole time. */
.is-hub #main { display: flex; flex-direction: column; }
.is-hub #main > * { order: 9; }
.is-hub #main > .h4-hero { order: 0; }
.is-hub #main > #door-stuff { order: 1; }
.is-hub #main > #door-helpers { order: 2; }
.is-hub #main > .h4-joinsec { order: 3; padding-top: 28px; }
.is-hub #main > #door-tools { order: 4; }
.is-hub #main > #door-guides { order: 5; }

/* Hoppy video: its own calm section between the helpers and the Perk Pass (watch, then join). */
.is-hub #main > .vd-sec { order: 3; }
.is-hub #main > .h4-joinsec { order: 4; }
.is-hub #main > #door-tools { order: 5; }
.is-hub #main > #door-guides { order: 6; }
.is-stuff .vd-sec { display: none; }
.vd-sec { padding: 40px 0; margin-top: 28px; background: linear-gradient(180deg, #eef8f3, #f8fbf9); }
.vd-in { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .vd-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; } }
.vd-k { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-green); }
.vd-copy h2 { margin: 0; font-size: clamp(1.45rem, 4.8vw, 2rem); }
.vd-copy p { margin: 10px 0 0; color: var(--ui-ink-2); }
.vd-play { margin-top: 18px; }
.vd-fig { margin: 0; }
.vd-fig video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: #eaf6f0; box-shadow: 0 30px 60px -30px rgba(10,60,40,.5), 0 0 0 1px rgba(10,60,40,.08); object-fit: cover; }
.vd-fig figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ui-mute); }