/* ══════════════════════════════════════════════════════════════════
   LIGHT GROUND SYSTEM — three palette options, switchable.
   Nothing is dark except the footer. Meridian's page is light the
   whole way down; the deep colour lives in type and accents.
   Teal and amber kept. Hue separation teal↔amber: 96–104°.
   ══════════════════════════════════════════════════════════════════ */
/* map the new system onto the existing tokens */
html[data-palette]{ --cream:var(--ground); --card:var(--surface); --divider:var(--line); --green:var(--ink); --green-deep:var(--foot); --teal-cream:var(--teal); --teal-ink:var(--teal); --teal-dark:var(--teal); --body:var(--ink-2); --ink-soft:rgba(251,249,244,0.78); --ink-softer:rgba(251,249,244,0.55); --rule-dark:rgba(251,249,244,0.16); }
/* ── every surface is light ──────────────────────────────────── */
html[data-palette] .hero, html[data-palette] .what, html[data-palette] .faq{ background:var(--ground); }
html[data-palette] .faq{ border-top:1px solid var(--line); }
/* ── hero, now on light ──────────────────────────────────────── */
html[data-palette] .hero{ min-height:auto; padding:clamp(9rem,13vw,11rem) 0 0; display:block; color:var(--ink); }
html[data-palette] .hero h1{ color:var(--ink); text-shadow:none; }
html[data-palette] .hero-grid{ grid-template-columns:1fr; }
@media (min-width:1000px){
  html[data-palette] .hero-grid{ grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; }
}
/* ── the three stats sit on light now ────────────────────────── */
/* ── the timing band ─────────────────────────────────────────── */
/* ── sign-up block, light ────────────────────────────────────── */
/* ── header on a light page ──────────────────────────────────── */
html[data-palette] nav.top{ background:rgba(251,249,244,0.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
html[data-palette] nav.top.scrolled{ background:rgba(251,249,244,0.96) !important; }
html[data-palette] .nav-links, html[data-palette] .nav-links a, html[data-palette] .nav-dd-trigger{ color:var(--ink); }
html[data-palette] .nav-links a:hover, html[data-palette] .nav-dd-trigger:hover{ color:var(--teal) !important; }
html[data-palette] .nav-cta-group .cta:not(.cta-ghost){ background:var(--amber); color:var(--ink); box-shadow:0 8px 20px -6px rgba(232,164,0,.45); }
html[data-palette] .nav-cta-group .cta-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
html[data-palette] .nav-cta-group .cta-ghost:hover{ border-color:var(--teal) !important; color:var(--teal) !important; }
html[data-palette] .logo-nav{ filter:none; }
/* ── shared type + component colour ──────────────────────────── */
html[data-palette] .sec-head h2, html[data-palette] h2, html[data-palette] h3, html[data-palette] h4{ color:var(--ink) !important; }
html[data-palette] .eyebrow{ color:var(--teal); }
html[data-palette] p, html[data-palette] li{ color:var(--ink-2); }
html[data-palette] .part{ background:var(--surface); border:1px solid var(--line); box-shadow:0 1px 3px rgba(23,44,38,.05), 0 10px 26px -18px rgba(23,44,38,.22); }
html[data-palette] .part:hover{ border-color:var(--teal) !important; box-shadow:0 18px 38px -18px rgba(23,44,38,.24) !important; }
html[data-palette] .part .jump{ background:var(--ground); border:1px solid var(--line); color:var(--ink); }
html[data-palette] .part .jump:hover{ background:var(--amber) !important; border-color:var(--amber) !important; color:var(--ink) !important; }
html[data-palette] .cta{ color:var(--ink); }
html[data-palette] .ico-wrap svg{ color:var(--teal); }
html[data-palette] a.gl{ color:inherit; border-bottom-color:var(--teal); }
/* ── footer is the only dark surface ─────────────────────────── */
html[data-palette] footer{ background:var(--foot); color:rgba(251,249,244,.86); }
/* ── card rows: even height, action pinned to the bottom ───── */
html[data-palette] .part{ display:flex; flex-direction:column; }
html[data-palette] .part p{ flex:1 1 auto; }
html[data-palette] .part .jump{ margin-top:auto; align-self:flex-start; white-space:nowrap; font-size:.84rem; padding:.6rem 1rem; }
/* ── section headings sit below hero scale ─────────────────── */
html[data-palette] .what .sec-head h2, html[data-palette] .faq h2{ font-size:clamp(1.85rem,3vw,2.55rem); line-height:1.09; }
html[data-palette] .what .sec-head{ max-width:34ch; }
html[data-palette] .what .sec-head p{ max-width:58ch; }
/* ── tighten the hero-to-stats gap ─────────────────────────── */
html[data-palette] .hero{ padding-bottom:0; }
html[data-palette] .what.pad{ padding-top:clamp(3rem,5vw,4rem); }
html[data-palette] footer, html[data-palette] footer li, html[data-palette] footer p, html[data-palette] footer span{ color:rgba(251,249,244,.80) !important; }
html[data-palette] footer a{ color:rgba(251,249,244,.80); }
html[data-palette] footer a:hover{ color:#FFFFFF !important; }
/* ══════════════════════════════════════════════════════════════════
   TWO DARKS.  Teal and amber unchanged.
   The old dark green sat 2.2° from the teal in OKLCH hue, so the
   whole page read as one green. Both options break that.
   ══════════════════════════════════════════════════════════════════ */
/* ══ a pale amber band, matched in weight to the pale teal one ══
   teal band  #E8F3F0  L95.5 C0.012
   amber band #FCF1D8  L96.0 C0.035
   so the two can be compared on the same page. ══════════════ */
html[data-palette]{ --band-amber:#FCF1D8; --band-amber-line:#EFE0BC; }
/* the questions block returns to plain bone so the two bands read as a pair */
html[data-palette] .faq{ background:var(--ground); border-top:1px solid var(--line); }
/* ══ the mobile drawer is styled inside nav-mobile.js with the old dark
      palette (teal on green). Override it to match the light system. ══ */
html[data-palette] .mobile-nav{ background:var(--surface); color:var(--ink); box-shadow:-24px 0 60px -30px rgba(23,44,38,.4); }
html[data-palette] .mobile-nav-backdrop{ background:rgba(23,28,26,.42); }
html[data-palette] .mobile-nav-head{ border-bottom:1px solid var(--line); }
html[data-palette] .mobile-nav-close{ color:var(--ink); opacity:.7; }
html[data-palette] .mobile-nav-link{ color:var(--ink); }
html[data-palette] .mobile-nav-link:hover, html[data-palette] .mobile-nav-link:active{ color:var(--teal) !important; background:var(--ground) !important; }
html[data-palette] .mobile-nav-cta-block{ border-top:1px solid var(--line); }
html[data-palette] .mobile-nav-cta{ background:var(--amber); color:var(--ink); border:0; }
html[data-palette] .mobile-nav-cta.ghost, html[data-palette] .mobile-nav-cta[data-variant="ghost"]{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
html[data-palette] .mobile-nav .logo-nav{ filter:none; }
.mobile-nav-link .arrow{ color:var(--teal); opacity:.85; }
/* ══ THE TEAL LAW ══════════════════════════════════════════════
   One teal: #14C3A8. There is no second teal and no darker
   fallback. It measures 2.12 on bone, so it is never text on a
   light ground at any size or weight. On light it is a fill or a
   shape only: rules, keylines, chips, glyphs, borders, underlines.
   Where teal must carry words, the block is teal and the words are
   petrol (7.1:1). Teal as text is legal on petrol only.
   Dimming the teal so text passes is the wrong fix - change the
   element, not the colour. ═══════════════════════════════════ */
html{ ; }
:root, html[data-palette]{ --ground:#FBF9F4; --surface:#FFFFFF; --band:#E8F3F0; --line:#E6E1D6; --band-line:#CFE3DE; --band-amber:#FCF1D8; --band-amber-line:#EFE0BC; --ink:#0A2530; --ink-2:#4C5A61; --teal:#14C3A8; --teal-bright:#14C3A8; --teal-ink:#14C3A8; --teal-cream:#14C3A8; --teal-dark:#14C3A8; --amber:#FFC01F; --amber-2:#F0AC00; --foot:#0A2530; --cream:var(--ground); --card:var(--surface); --divider:var(--line); --green:var(--ink); --green-deep:var(--foot); --body:var(--ink-2); --ink-soft:rgba(251,249,244,0.80); --ink-softer:rgba(251,249,244,0.55); --rule-dark:rgba(251,249,244,0.16); }
/* small teal labels: heavier and a touch larger to carry the lighter tone */
.eyebrow{ color:var(--teal); font-weight:800; font-size:0.76rem; letter-spacing:0.15em; }
/* ══ teal does the popping now that amber is structural ═════════ */
/* the four cards: a teal rule across the top, teal icon, teal index */
html[data-palette] .part{ position:relative; overflow:hidden; }
html[data-palette] .part::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--teal); opacity:.9; }
html[data-palette] .part .ico-wrap{ background:var(--band); border:1px solid var(--band-line); border-radius:14px; display:inline-flex; align-items:center; justify-content:center; }
html[data-palette] .part .ico-wrap svg{ color:var(--teal); }
html[data-palette] .part:hover::before{ opacity:1; height:5px; }
html[data-palette] .part .jump:hover{ background:var(--teal) !important; border-color:var(--teal) !important; color:#FFFFFF !important; }
html[data-palette] .part .jump:hover svg{ color:#FFFFFF !important; }
/* the emphasis span in the headings */
/* inline link underlines lift from amber to teal */
html[data-palette] .cta-line{ border-bottom-color:var(--teal); }
html[data-palette] .cta-line:hover{ color:var(--teal) !important; }
html[data-palette] a.gl{ border-bottom:2px solid var(--teal); }
/* the timing band: teal numbers on the pale teal ground */
/* where-to-next cards */
/* the split row picks up a teal keyline down the copy side */
/* section eyebrows and the FAQ */
html[data-palette] .faq details summary::marker{ color:var(--teal); }
html[data-palette] .faq details[open] summary{ color:var(--teal); }
/* footer: the teal mark, amber headings, so both accents live there */
html[data-palette] footer h5{ color:var(--amber); }
/* ══ TEAL LAW ══════════════════════════════════════════════════
   Teal is #14C3A8 and there is no second teal. It measures 2.12 on
   bone, so it is NEVER text on a light ground — not small, not large, not bold. On light it appears only as a fill or a shape: rules, keylines, chips, borders, glyphs, underlines. Where teal has to
   carry words, the block is teal and the words are petrol (7.1:1).
   Teal as text is legal on petrol only (7.1:1). Any rule that dims
   the teal to make text pass is the wrong fix — change the element, not the colour. ═══════════════════════════════════════════════ */
/* — no teal letterforms on light. petrol carries the words. — */
html[data-palette] .eyebrow, html[data-palette] .cta-line{ color:var(--ink); }
html[data-palette] .faq details[open] summary{ color:var(--ink); }
html[data-palette] .part .jump:hover{ color:var(--ink) !important; }
html[data-palette] .part .jump:hover svg{ color:var(--ink) !important; }
html[data-palette] .nav-dd-menu a:hover .mi-t{ color:var(--ink) !important; }
html[data-palette] .cta-line:hover{ color:var(--ink) !important; }
/* — every teal label gets a solid teal marker instead of teal type — */
html[data-palette] .eyebrow{ display:inline-flex; align-items:center; gap:.55rem; }
html[data-palette] .eyebrow::before{ content:""; width:9px; height:9px; border-radius:2px; background:var(--teal); flex:0 0 auto; }
html[data-palette] .eyebrow::after{ content:none; }
/* — teal as mass: the icon chip becomes a solid teal block — */
html[data-palette] .part .ico-wrap{ background:var(--teal); border:0; border-radius:14px; padding:.62rem; display:inline-flex; align-items:center; justify-content:center; }
html[data-palette] .part .ico-wrap svg{ color:#FFFFFF; }
html[data-palette] #i-batt rect{ fill:#FFFFFF; }
html[data-palette] #i-batt path{ fill:var(--teal); }
/* — rules and keylines carry more weight now they carry the colour — */
html[data-palette] .part::before{ height:6px; opacity:1; }
html[data-palette] .part:hover::before{ height:8px !important; }
html[data-palette] .cta-line{ border-bottom:4px solid var(--teal); padding-bottom:3px; }
html[data-palette] a.gl{ border-bottom:3px solid var(--teal) !important; }
/* — where teal must hold words, it is the block and petrol is the type — */
html[data-palette] .part .jump:hover{ background:var(--teal) !important; border-color:var(--teal) !important; }
html[data-palette] .nav-cta-group .cta:not(.cta-ghost):hover{ background:var(--teal) !important; border-color:var(--teal) !important; color:var(--ink) !important; }
/* — teal as text is legal on petrol only — */
html[data-palette] footer a:hover{ color:var(--teal) !important; }
/* — sweep: the last teal letterforms on light grounds — */
html[data-palette] .waitlist label{ color:var(--ink); }
html[data-palette] .waitlist label::before{ content:""; display:inline-block; width:9px; height:9px; border-radius:2px; background:var(--teal); margin-right:.5rem; vertical-align:baseline; }
html[data-palette] .mobile-nav-link .arrow{ color:var(--ink); opacity:.55; }
/* the sign-up heading gets its teal as a block, not as letters */
/* ══ this round's fixes ════════════════════════════════════════ */
/* the highlighter block was clipping the descender on "address." */
/* "Join the list" was landing with the top of the form under the header */
html[data-palette] #waitlist{ scroll-margin-top:8.5rem; }
@media (max-width:900px){
  html[data-palette] #waitlist{ scroll-margin-top:6.5rem; }
}
/* My Tīrama: a solid bone pill so it reads as a real control on amber */
html[data-nav] .nav-cta-group .cta-ghost{ background:var(--ground); border:1.5px solid var(--ground); color:var(--ink); box-shadow:0 6px 16px -8px rgba(10,37,48,.38); font-weight:700; }
html[data-nav] .nav-cta-group .cta-ghost:hover{ background:#FFFFFF !important; border-color:#FFFFFF !important; color:var(--ink) !important; }
html[data-nav] .nav-cta-group .cta-ghost .lock{ color:var(--teal); }
/* the battery menu is the one people come for, so it is marked out */
html[data-nav] .nav-dd--battery > .nav-dd-trigger{ background:var(--teal); color:var(--ink) !important; padding:.5rem .9rem !important; border-radius:999px; font-weight:800; }
html[data-nav] .nav-dd--battery > .nav-dd-trigger:hover, html[data-nav] .nav-dd--battery > .nav-dd-trigger[aria-expanded="true"]{ background:#0FB295 !important; color:var(--ink) !important; }
html[data-nav] .nav-dd--battery .nav-dd-menu{ border-top:6px solid var(--teal); }
html[data-nav] .nav-dd--battery .nav-dd-menu a:hover{ background:var(--band) !important; }
/* ══ the header ════════════════════════════════════════════════ */
html[data-nav="amber"] nav.top{ background:rgba(255,192,31,.95) !important; border-bottom:1px solid rgba(10,37,48,.14) !important; }
html[data-nav="amber"] nav.top.scrolled{ background:rgba(255,192,31,.99) !important; box-shadow:0 10px 30px -18px rgba(10,37,48,.45); }
html[data-nav] .nav-links, html[data-nav] .nav-links a, html[data-nav] .nav-dd-trigger, html[data-nav] .page-label{ color:rgba(10,37,48,.88) !important; }
html[data-nav] .nav-links a:hover, html[data-nav] .nav-dd-trigger:hover{ color:var(--ink) !important; }
html[data-nav] .nav-dd-trigger:hover .chev{ color:var(--ink) !important; }
/* the amber CTA cannot sit on an amber bar, so it inverts to petrol */
html[data-nav] .nav-cta-group .cta:not(.cta-ghost){ background:var(--ink); color:#FBF9F4; border:1.5px solid var(--ink); box-shadow:0 8px 20px -8px rgba(10,37,48,.45); }
html[data-nav] .nav-cta-group .cta:not(.cta-ghost):hover{ background:var(--teal) !important; border-color:var(--teal) !important; color:var(--ink) !important; }
html[data-nav] .nav-cta-group .cta-ghost{ border:1.5px solid rgba(10,37,48,.36); color:var(--ink); }
html[data-nav] .nav-cta-group .cta-ghost:hover{ border-color:var(--ink) !important; background:rgba(255,255,255,.30) !important; }
/* the dropdown panel drops off the amber onto bone */
html[data-nav] .nav-dd-menu{ background:var(--surface); border:1px solid var(--line); box-shadow:0 26px 54px -26px rgba(10,37,48,.38); }
html[data-nav] .nav-dd-menu a{ color:var(--ink) !important; }
html[data-nav] .nav-dd-menu a:hover{ background:var(--band) !important; color:var(--ink) !important; }
html[data-nav] .nav-dd-menu a:hover .mi-t{ color:var(--teal) !important; }