:root{ --green:#0A2530; --green-deep:#0A1E1A; --cream:#FBF9F4; --card:#EDE6D6; --divider:#D8D0BC; --amber:#FFC01F; --amber-2:#F0AC00; --teal-cream:#1A8A78; --teal-dark:#3EC9B3; --body:#2A2A2A; --ink-soft:rgba(244,239,229,0.62); --ink-softer:rgba(244,239,229,0.32); --rule-dark:rgba(244,239,229,0.10); --ease-out:cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1); --max:1280px; }
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:'Inter', system-ui, -apple-system, Segoe UI, sans-serif; background:var(--cream); color:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }
@media (min-width: 768px){
  .wrap{ padding:0 3rem; }
}
.display{ font-family:'Barlow Condensed','Inter',sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:0.95; }
.display-xl{ font-size:clamp(3.2rem, 9vw, 7.5rem); }
.display-lg{ font-size:clamp(2.4rem, 6vw, 5rem); }
.eyebrow{ font-family:'Inter',sans-serif; font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; }
.lede{ font-family:'Inter',sans-serif; font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.55; max-width:46ch; }
.lede-dark{ color:var(--ink-soft); }
p{ max-width:65ch; }
/* Logo lockup — official brand asset */
.logo-link{ display:inline-flex; align-items:center; line-height:0; }
.logo-link img{ display:block; height:34px; width:auto; }
.logo-nav{ height:44px; }
@media (min-width:768px){
  .logo-nav{ height:52px; }
}
.logo-foot{ height:46px; }
/* Standalone amber battery icon — the ī, recognisable on its own */
/* Larger standalone version — for section markers, dividers */
/* Used as a list-style bullet */
nav.top{ position:fixed; top:0; left:0; right:0; z-index:80; padding:1.45rem 1.5rem; display:flex; align-items:center; justify-content:space-between; transition:background 280ms var(--ease-out), border-color 280ms var(--ease-out), backdrop-filter 280ms var(--ease-out); border-bottom:1px solid transparent; }
@media (min-width:768px){
  nav.top{ padding:1.55rem 3rem; }
}
nav.top.scrolled{ background:rgba(15,41,36,0.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--rule-dark); }
.nav-links{ display:none; gap:1.15rem; font-size:0.85rem; color:var(--cream); font-weight:500; }
@media (min-width:1200px){
  .nav-links{ display:flex; align-items:center; }
}
.nav-links a{ color:var(--ink-soft); transition:color 160ms ease; }
.nav-links a:hover{ color:var(--cream); }
.nav-dd{ position:relative; display:inline-flex; align-items:center; }
.nav-dd-trigger{ display:inline-flex; align-items:center; gap:0.3rem; background:transparent; border:0; padding:0; margin:0; cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:500; color:var(--ink-soft); transition:color 160ms ease; }
.nav-dd-trigger .chev{ width:13px; height:13px; opacity:0.8; transition:transform 240ms var(--ease-out); }
.nav-dd:hover .nav-dd-trigger, .nav-dd.open .nav-dd-trigger{ color:var(--cream); }
.nav-dd:hover .nav-dd-trigger .chev, .nav-dd.open .nav-dd-trigger .chev{ transform:rotate(180deg); }
.nav-dd::after{ content:''; position:absolute; top:100%; left:-1rem; right:-1rem; height:1.1rem; }
.nav-dd-menu{ position:absolute; top:100%; left:50%; margin-top:0.9rem; transform:translateX(-50%) translateY(8px); min-width:210px; background:rgba(248,244,236,0.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(15,41,36,0.12); border-radius:15px; box-shadow:0 24px 50px -16px rgba(15,41,36,0.28); padding:0.5rem; display:flex; flex-direction:column; gap:0.1rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms var(--ease-out), transform 260ms var(--ease-out), visibility 200ms; z-index:90; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dd--end .nav-dd-menu{ left:auto; right:0; transform:translateX(0) translateY(8px); }
.nav-dd--end:hover .nav-dd-menu, .nav-dd--end.open .nav-dd-menu{ transform:translateX(0) translateY(0); }
.nav-dd-menu a{ display:flex; flex-direction:column; gap:0.12rem; padding:0.62rem 0.8rem; border-radius:10px; transition:background 140ms ease, padding-left 220ms var(--ease-out); }
.nav-dd-menu a:hover{ background:rgba(0,128,129,0.09); padding-left:1rem; }
.nav-dd-menu .mi-t{ color:var(--green); font-size:0.9rem; font-weight:600; transition:color 140ms ease; }
.nav-dd-menu a:hover .mi-t{ color:var(--teal-dark); }
.cta{ display:inline-flex; align-items:center; justify-content:center; background:var(--amber); color:var(--green); font-family:'Inter',sans-serif; font-weight:600; font-size:0.82rem; letter-spacing:0.04em; padding:0.75rem 1.4rem; border:none; cursor:pointer; border-radius:9999px; transition:background 160ms var(--ease-out), transform 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.cta:hover{ background:var(--amber-2); }
.cta:active{ transform:scale(0.97); }
.cta-ghost{ background:var(--teal-cream); color:var(--cream); border:1px solid var(--teal-cream); padding:0.7rem 1.1rem; gap:0.45rem; box-shadow:0 0 0 0 rgba(0,128,129,0); }
.cta-ghost:hover{ background:var(--teal-dark); border-color:var(--teal-dark); color:var(--cream); box-shadow:0 0 0 4px rgba(0,128,129,0.18); }
.cta-ghost .lock{ width:14px; height:14px; display:inline-block; }
.nav-cta-group{ display:inline-flex; align-items:center; gap:0.55rem; }
.hero{ min-height:100dvh; background:linear-gradient(180deg, rgba(15,41,36,0.62) 0%, rgba(15,41,36,0.55) 45%, rgba(15,41,36,0.78) 100%), url('assets/hero-woven.webp') center/cover no-repeat, var(--green); color:var(--cream); position:relative; overflow:hidden; padding:8rem 0 5rem; }
.hero h1{ color:var(--cream); margin-bottom:1.75rem; }
.hero h1 .em{ color:var(--amber); }
.waitlist{ max-width:30rem; background:transparent; border:0; padding:0; }
.waitlist label{ display:block; font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,239,229,0.82); margin-bottom:0.6rem; }
.waitlist .row{ display:grid; grid-template-columns:1fr; gap:0.6rem; }
@media (min-width:520px){
  .waitlist .row{ grid-template-columns:1fr auto; }
}
.waitlist input[type="email"]{ background:transparent; border:1px solid transparent; outline:none; color:var(--cream); font-family:inherit; font-size:1rem; padding:0.85rem 1rem; border-radius:12px; width:100%; transition:border-color 160ms ease; }
.waitlist input[type="email"]::placeholder{ color:var(--ink-soft); }
.waitlist input[type="email"]:focus{ border-color:rgba(244,239,229,0.18); }
.waitlist .submit{ background:var(--amber); color:var(--green); font-weight:600; font-family:inherit; font-size:0.9rem; border:none; padding:0.85rem 1.35rem; border-radius:12px; cursor:pointer; transition:background 160ms var(--ease-out), transform 160ms var(--ease-out); white-space:nowrap; }
.waitlist .submit:hover{ background:var(--amber-2); }
.waitlist .submit:active{ transform:scale(0.97); }
.waitlist .fine{ font-size:0.7rem; color:rgba(244,239,229,0.66); margin-top:0.85rem; line-height:1.5; }
.waitlist.is-submitted .row, .waitlist.is-submitted .fine{ display:none; }
.pad{ padding:6rem 0; }
@media (min-width:768px){
  .pad{ padding:8rem 0; }
}
.sec-head{ margin-bottom:3rem; max-width:60ch; }
.sec-head .eyebrow{ margin-bottom:1.25rem; display:inline-block; }
.sec-head h2{ color:var(--green); margin-bottom:1rem; }
.sec-head p{ color:var(--body); font-size:1.05rem; line-height:1.6; }
.offer{ background:var(--cream); }
.how{ background:var(--green); color:var(--cream); }
.how .sec-head h2{ color:var(--cream); }
.how .sec-head p{ color:var(--ink-soft); }
.steps{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--rule-dark); }
@media (min-width:880px){
  .steps{ grid-template-columns:repeat(4,1fr); border-top:none; }
}
.step{ padding:2rem 0; border-bottom:1px solid var(--rule-dark); display:flex; gap:1.25rem; }
@media (min-width:880px){
  .step{ flex-direction:column; padding:0 2rem 0 0; border-bottom:none; border-left:1px solid var(--rule-dark); padding-left:2rem; min-height:240px; }
  .step:first-child{ border-left:none; padding-left:0; }
}
.step h4{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.4rem; color:var(--cream); margin-bottom:0.5rem; }
.step p{ color:var(--ink-soft); font-size:0.92rem; line-height:1.55; }
/* Sell power with us */
.share{ background:var(--green); border-radius:24px; padding:2.5rem 1.75rem; color:var(--cream); position:relative; overflow:hidden; }
@media (min-width:880px){
  .share{ padding:3rem 3.25rem; }
}
.share::before{ content:""; position:absolute; top:-30%; right:-8%; width:52%; height:160%; background:radial-gradient(ellipse at center, rgba(255,192,31,0.07) 0%, transparent 62%); pointer-events:none; }
.share > *{ position:relative; z-index:1; }
.anchor{ background:var(--green-deep); color:var(--cream); position:relative; overflow:hidden; }
.anchor::before{ content:""; position:absolute; top:-20%; right:-10%; width:60%; height:140%; background:radial-gradient(ellipse at center, rgba(255,192,31,0.06) 0%, transparent 60%); pointer-events:none; }
.anchor h2{ color:var(--cream); margin-bottom:1.5rem; }
.anchor .lede-dark{ color:var(--ink-soft); }
/* Early adopter block — sits inside the anchor section */
/* Contact block — visible on the front page */
.contact{ background:var(--cream); border-top:1px solid var(--divider); padding:5rem 0; }
.contact h2{ color:var(--green); margin-bottom:1rem; }
.faq{ background:var(--cream); border-top:1px solid var(--divider); }
.faq details{ border-bottom:1px solid var(--divider); padding:1.25rem 0; }
.faq details:first-of-type{ border-top:1px solid var(--divider); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:2rem; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(1.2rem,1.9vw,1.45rem); color:var(--green); transition:color 160ms ease; padding:0.4rem 0; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--teal-cream); }
.faq summary .plus{ flex-shrink:0; width:24px; height:24px; position:relative; transition:transform 220ms var(--ease-out); }
.faq summary .plus::before, .faq summary .plus::after{ content:""; position:absolute; background:var(--green); top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.faq summary .plus::after{ transform:translateY(-50%) rotate(90deg); transition:transform 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.faq details[open] summary .plus{ transform:rotate(45deg); }
.faq details[open] summary .plus::after{ opacity:0; }
.faq .answer{ padding:1.1rem 0 0.5rem; color:var(--body); font-size:1rem; line-height:1.65; max-width:64ch; }
.faq .answer p + p{ margin-top:0.85rem; }
.final{ background:var(--green); color:var(--cream); position:relative; overflow:hidden; }
.final::before{ content:""; position:absolute; bottom:-40%; left:-10%; width:80%; height:140%; background:radial-gradient(ellipse at center, rgba(255,192,31,0.08) 0%, transparent 60%); pointer-events:none; }
.final-grid{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; position:relative; z-index:1; }
@media (min-width:960px){
  .final-grid{ grid-template-columns:1fr 1fr; gap:5rem; }
}
.final h2{ color:var(--cream); margin-bottom:1.25rem; }
.final h2 .em{ color:var(--amber); }
.final .lede{ color:var(--ink-soft); margin-bottom:0; }
footer{ background:var(--green-deep); color:var(--ink-soft); padding:4rem 0 2.5rem; font-size:0.88rem; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:760px){
  .foot-grid{ grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; }
}
footer .blurb{ max-width:30ch; line-height:1.5; color:var(--ink-softer); font-size:0.85rem; }
.foot-col h5{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:1rem; }
.foot-col ul{ list-style:none; display:grid; gap:0.6rem; }
.foot-col a{ color:var(--ink-soft); transition:color 160ms ease; }
.foot-col a:hover{ color:var(--cream); }
.foot-legal{ border-top:1px solid var(--rule-dark); margin-top:3rem; padding-top:1.75rem; display:flex; flex-direction:column; gap:0.75rem; font-size:0.74rem; color:var(--ink-softer); }
@media (min-width:680px){
  .foot-legal{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@starting-style{ .rise{ opacity:0; transform:translateY(12px); } }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}
/* Stacked waitlist form fields */
.waitlist .field{ margin-bottom:0.55rem; }
.waitlist .field:last-of-type{ margin-bottom:0.85rem; }
.waitlist .field-label{ display:block; font-size:0.66rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,239,229,0.78); margin-bottom:0.3rem; padding-left:0.2rem; }
.waitlist input[type="text"], .waitlist input[type="tel"]{ background:transparent; border:1px solid transparent; outline:none; color:var(--cream); font-family:inherit; font-size:0.98rem; padding:0.78rem 1rem; border-radius:12px; width:100%; transition:border-color 160ms ease; }
.waitlist input[type="text"]::placeholder, .waitlist input[type="tel"]::placeholder{ color:var(--ink-soft); }
.waitlist input[type="text"]:focus, .waitlist input[type="tel"]:focus{ border-color:rgba(244,239,229,0.18); }
.waitlist .field input{ background:rgba(244,239,229,0.06); border:1px solid rgba(244,239,229,0.38); }
.waitlist .field input:focus{ border-color:rgba(255,192,31,0.7); background:rgba(244,239,229,0.09); }
.waitlist .submit.full{ width:100%; padding:0.95rem 1.4rem; font-size:0.95rem; }
/* AddressFinder dropdown — themed to the dark hero card */
/* Invalid field highlight */
.waitlist .field.invalid input{ border-color:rgba(255,142,92,0.65) !important; background:rgba(255,142,92,0.08) !important; animation:shake 380ms ease; }
@keyframes shake{10%, 90%{ transform:translateX(-1.5px); }20%, 80%{ transform:translateX(2.5px); }30%, 50%, 70%{ transform:translateX(-4px); }40%, 60%{ transform:translateX(4px); }
    }
/* ──── STYLISED SUCCESS STATE ──── */
.waitlist.is-submitted .field, .waitlist.is-submitted label, .waitlist.is-submitted .row, .waitlist.is-submitted .submit, .waitlist.is-submitted .fine, .waitlist.is-submitted .submit.full{ display:none !important; }
.waitlist.is-submitted{ background:transparent !important; border:none !important; padding:0 !important; max-width:100% !important; }
.success-card{ display:none; padding:2rem 1.75rem 2.25rem; background:linear-gradient(180deg, rgba(255,192,31,0.08), rgba(255,192,31,0.02)); border:1px solid rgba(255,192,31,0.32); border-radius:22px; box-shadow:0 0 0 1px rgba(255,192,31,0.05), 0 18px 48px -16px rgba(255,192,31,0.18); animation:success-rise 700ms var(--ease-out) both; }
.waitlist.is-submitted .success-card{ display:block; }
@keyframes success-rise{
      from{ opacity:0; transform:translateY(14px) scale(0.97); }
      to{ opacity:1; transform:translateY(0) scale(1); }
    }
.success-mark{ display:inline-block; width:36px; height:36px; position:relative; margin-bottom:1.25rem; }
.success-mark .bat{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:36px; background:var(--amber); border-radius:4px; box-shadow:0 0 24px rgba(255,192,31,0.7); animation:bat-glow 1.6s ease-in-out infinite; }
.success-mark .bat::before{ content:""; position:absolute; left:50%; top:-7px; transform:translateX(-50%); width:10px; height:7px; background:var(--amber); border-radius:2px 2px 0 0; }
@keyframes bat-glow{0%, 100%{ box-shadow:0 0 18px rgba(255,192,31,0.5); }
      50%{ box-shadow:0 0 32px rgba(255,192,31,0.9); }
    }
.success-eyebrow{ font-family:'Inter',sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); margin-bottom:0.65rem; }
.success-title{ font-family:'Barlow Condensed','Helvetica Neue',sans-serif; font-weight:800; font-size:clamp(1.8rem, 3.5vw, 2.4rem); line-height:1.05; letter-spacing:-0.005em; color:var(--cream); margin-bottom:0.9rem; }
.success-body{ font-family:'Inter',sans-serif; font-size:1rem; line-height:1.55; color:var(--ink-soft); margin-bottom:1.25rem; max-width:38ch; }
.success-meta{ display:flex; align-items:center; gap:0.65rem; font-family:'Inter',sans-serif; font-size:0.78rem; color:var(--ink-softer); letter-spacing:0.05em; }
.success-meta .pulse{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px rgba(255,192,31,0.7); animation:dot-blink 2s ease infinite; }
::selection{ background:var(--amber); color:var(--green); }
.page-label{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--teal-dark); margin-left:0.85rem; padding-left:0.85rem; border-left:1px solid rgba(244,239,229,0.22); line-height:1; align-self:center; white-space:nowrap; }
/* cta glow on hover */
.cta, .cta-ghost, .waitlist .submit{ transition:background .18s ease, transform .2s ease, box-shadow .28s ease, filter .2s ease, color .18s ease, text-shadow .2s ease !important; }
.cta:hover, .waitlist .submit:hover{ transform:translateY(-2px); box-shadow:0 0 22px 2px rgba(255,192,31,0.55), 0 10px 28px rgba(255,192,31,0.30); filter:brightness(1.06); }
.cta-ghost:hover{ transform:translateY(-2px); box-shadow:0 0 22px 1px rgba(0,160,161,0.55), 0 10px 26px rgba(0,128,129,0.30); color:#fff; text-shadow:0 0 12px rgba(62,201,179,0.7); }
/* ══════════════════════════════════════════════════════
       JOURNEY COMPONENTS  (icon diagrams + photo bands)
       ══════════════════════════════════════════════════════ */
/* ── Icon system ── */
/* ── Full-bleed photo breaker ── */
/* ── Section 01: what Tīrama is ── */
.what{ background:var(--cream); }
.what .sec-head h2{ color:var(--green); font-size:clamp(2.2rem,4.6vw,3.8rem); }
/* ── The offer, in four parts ── */
.part{ background:var(--card); border:1px solid var(--divider); border-top:3px solid var(--pc); border-radius:20px; padding:1.9rem 1.6rem 1.5rem; display:flex; flex-direction:column; box-shadow:0 4px 16px -6px rgba(15,41,36,0.06); transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .part:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(15,41,36,0.14); }
}
.part h4{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(1.4rem,2vw,1.65rem); color:var(--green); line-height:1.05; margin-bottom:0.7rem; }
.part p{ color:var(--body); font-size:0.94rem; line-height:1.58; margin-bottom:1.35rem; }
.part .jump{ margin-top:auto; display:inline-flex; align-items:center; gap:0.45rem; font-size:0.8rem; font-weight:600; color:var(--green); border-top:1px solid var(--divider); padding-top:0.9rem; transition:color 160ms ease, gap 200ms var(--ease-out); }
.part .jump svg{ width:13px; height:13px; }
.part .jump:hover{ color:var(--teal-cream); gap:0.7rem; }
/* ── Why 01: the two lanes ── */
/* ── Why 02: price ── */
/* ── Why 03: backup ── */
/* ── Why 04: the venn ── */
/* ── Solar aside ── */
/* ── Anchor jump offset for the fixed nav ── */
section[id]{ scroll-margin-top:5.5rem; }
/* ── indicative rate card (hero) ─────────────────────────────── */
.btn-amber{ display:inline-flex; align-items:center; gap:.55rem; background:var(--amber); color:var(--green-deep); font-weight:800; font-size:.95rem; text-decoration:none; padding:.95rem 1.75rem; border-radius:999px; transition:transform .25s var(--ease-out),background .25s; }
.btn-amber:hover{ background:var(--amber-2); transform:translateY(-2px); }
/* ── glossary-linked jargon ──────────────────────────────────── */
a.gl{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; opacity:.95; cursor:help; }
a.gl:hover{ border-bottom-style:solid; color:var(--teal-cream); }
.on-dark a.gl:hover{ color:var(--teal-dark); }
/* ── deep-dive / glossary page shell ─────────────────────────── */
.pagehead{ background:var(--green); color:var(--cream); padding:clamp(7rem,12vw,10rem) 0 clamp(3rem,6vw,4.5rem); }
.pagehead .eyebrow{ color:var(--amber); }
.pagehead h1{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(2.5rem,5.6vw,4.4rem); line-height:1.0; margin:.6rem 0 1.1rem; color:var(--cream); }
.pagehead p{ max-width:62ch; font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.6; color:var(--ink-soft); margin:0; }
/* ── glossary ────────────────────────────────────────────────── */
@media(max-width:820px){.ratecard{margin-top:2.2rem}}
/* hero mechanism card */
/* questions link block */
/* rates table on the calculator page */
/* ═══ header: larger targets, full-width mega panel ═══ */
nav.top{ padding:1.05rem 1.4rem; }
@media (min-width:960px){
  nav.top{ padding:1.1rem 2.5rem; }
}
.nav-links{ gap:1.75rem; font-size:0.95rem; }
.nav-links > a{ padding:0.55rem 0; font-weight:600; }
.nav-dd-trigger{ font-size:0.95rem; font-weight:600; padding:0.55rem 0; }
.nav-dd-trigger .chev{ width:14px; height:14px; }
/* the dropdown becomes a full-width panel anchored to the header */
.nav-dd{ position:static; }
.nav-dd-menu{ position:absolute; left:0; right:0; top:100%; width:auto; min-width:0; max-width:none; transform:translateY(10px); background:var(--cream); border:0; border-top:1px solid var(--divider); border-radius:0 0 22px 22px; box-shadow:0 34px 80px rgba(10,30,26,.26); padding:2.1rem clamp(1.4rem,4vw,2.5rem) 2.2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.35rem 1.6rem; align-content:start; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu{ transform:translateY(0); }
.nav-dd--end .nav-dd-menu, .nav-dd--end:hover .nav-dd-menu, .nav-dd--end.open .nav-dd-menu{ left:0; right:0; transform:translateY(0); }
.nav-dd--end .nav-dd-menu{ transform:translateY(10px); }
.nav-dd-menu a{ padding:0.72rem 0.85rem; }
.nav-dd-menu .mi-t{ font-size:0.98rem; }
.nav-dd::after{ left:0; right:0; height:1.2rem; }
/* header buttons: bigger, higher contrast, always reachable */
.nav-cta-group{ gap:0.7rem; }
.nav-cta-group .cta{ font-size:0.95rem; font-weight:800; padding:0.85rem 1.7rem; border-radius:999px; }
.nav-cta-group .cta:not(.cta-ghost){ background:var(--amber); color:var(--green-deep); box-shadow:0 8px 22px rgba(255,192,31,.28); }
.nav-cta-group .cta:not(.cta-ghost):hover{ background:var(--amber-2); transform:translateY(-1px); }
.nav-cta-group .cta-ghost{ padding:0.8rem 1.35rem; font-weight:700; }
@media (max-width:959px){
  .nav-cta-group .cta{ font-size:0.9rem; padding:0.78rem 1.35rem; }
  .nav-cta-group .cta-ghost{ display:none; }
}
.nav-links > a, .nav-dd-trigger{ white-space:nowrap; }
.nav-cta-group .cta{ white-space:nowrap; }
@media (min-width:960px) and (max-width:1500px){
  .nav-links{ gap:1.25rem; font-size:0.9rem; }
  .nav-dd-trigger{ font-size:0.9rem; }
  nav.top{ padding:1.05rem 1.6rem; }
}
.nav-dd-menu{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1200px){
  .nav-dd-menu{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:960px) and (max-width:1379px){
  .nav-links{ gap:0.95rem; font-size:0.85rem; }
  .nav-dd-trigger{ font-size:0.85rem; }
  .nav-cta-group .cta{ font-size:0.86rem; padding:0.72rem 1.2rem; }
  .nav-cta-group .cta-ghost{ padding:0.68rem 1rem; }
  nav.top{ padding:0.95rem 1.2rem; }
}
/* ═══ one cream ground: hero photo, cream body, dark sign-up ═══ */
.how{ background:var(--cream); color:var(--body); }
.how .sec-head h2{ color:var(--green); }
.how .sec-head p{ color:var(--body); }
.how h4{ color:var(--green); }
.how p{ color:#4a4a4a; }
.anchor{ background:var(--card); color:var(--body); }
.anchor::before{ display:none; }
.anchor .lede-dark, .anchor .lede{ color:#3d3d3d; }
.steps{ border-top-color:var(--divider); }
.steps > *{ border-color:var(--divider); }
/* the two photo bands keep their image but sit on cream */
/* section rules and dividers move to the light palette */
.how hr, .anchor hr{ border-color:var(--divider); }
/* ═══ one card unit: offer parts, backup points, terms, steps, asides ═══ */
.part, .steps .step{ background:#FFFFFF; border:1px solid var(--divider); border-radius:18px; padding:1.75rem 1.6rem; box-shadow:0 2px 10px rgba(15,41,36,.045); transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.part:hover, .steps .step:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -12px rgba(15,41,36,.16); }
/* same grid rhythm everywhere */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.35rem; border-top:0; list-style:none; padding:0; margin-top:2.5rem; }
/* same type scale inside every card */
.part h4, .steps .step h4{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.32rem; line-height:1.07; color:var(--green); margin:0 0 0.6rem; }
.part p, .steps .step p{ color:#4a4a4a; font-size:0.94rem; line-height:1.6; margin:0; }
.part p{ margin-bottom:1.2rem; }
/* step numbers become a small label, not a column */
.steps .step{ display:block; }
.steps .step > div{ display:block; }
/* amber reads poorly on cream: use the teal accent in light sections */
.what .em, .anchor .em, .how .em{ color:var(--teal-cream); }
.how .eyebrow, .anchor .eyebrow, .what .eyebrow{ color:var(--teal-cream); }
/* ═══ single cream ground, white cards carry the contrast ═══ */
.what, .anchor, .how, .faq{ background:var(--cream); }
.anchor, .how, .faq{ border-top:1px solid var(--divider); }
/* amber is for the dark hero and the sign-up block only */
section.anchor .eyebrow, section.how .eyebrow, section.what .eyebrow, section.faq .eyebrow{ color:var(--teal-cream); }
/* three-years block: heading full width, terms as a normal card row */
/* hero: the photograph is the thing */
.hero{ min-height:100dvh; background:linear-gradient(180deg, rgba(15,41,36,0.30) 0%, rgba(15,41,36,0.18) 38%, rgba(15,41,36,0.86) 100%),
             url('assets/hero-woven.webp') center/cover no-repeat, var(--green); display:flex; flex-direction:column; justify-content:flex-end; padding:9rem 0 4.5rem; }
.hero > .wrap{ width:100%; }
.hero h1{ margin-bottom:1.4rem; text-shadow:0 2px 30px rgba(10,30,26,.45); }
@media (min-width:900px){
  .hero h1{ font-size:clamp(3rem,5.6vw,5rem); }
}
/* the card row lives inside the page grid like everything else */
@media (min-width:1000px){
  .what > .wrap{ padding-inline:2.5rem; }
}
/* the link on each card has to look like a link you can hit */
.part .jump{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.88rem; font-weight:800; color:var(--green); background:var(--card); border:1px solid var(--divider); padding:0.62rem 1.05rem; border-radius:999px; text-decoration:none; transition:background .2s var(--ease-out), border-color .2s, gap .2s; }
.part .jump:hover{ background:var(--amber); border-color:var(--amber); color:var(--green-deep); gap:0.75rem; }
.part .jump svg{ width:12px; height:12px; }
/* ─── THREE YEARS: a reference list, not a card grid ─────────────
   Meridian is the only NZ retailer that treats "how long am I tied in"
   as a design element. It reads as a table of facts, so build it as one. */
.anchor{ background:var(--green); color:var(--cream); }
.anchor h2{ color:var(--cream); }
.anchor .lede, .anchor .lede-dark{ color:rgba(244,239,229,.80); }
.anchor .eyebrow{ color:var(--amber); }
.anchor .btn-amber{ margin-top:2.75rem; }
/* ─── FOUR STEPS: a vertical sequence on a rule, not four boxes ───
   No NZ retailer uses a horizontal timeline; it breaks on mobile.
   A stepped list on a left rule degrades to one column cleanly. */
.how .steps{ display:block; margin-top:3rem; border-top:0; position:relative; }
.how .steps .step{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0 0 2.6rem 0; display:grid; grid-template-columns:1fr; gap:.5rem; position:relative; transform:none; }
.how .steps .step:hover{ transform:none !important; box-shadow:none !important; }
.how .steps .step:last-child{ padding-bottom:0; }
@media (min-width:760px){
  .how .steps .step{ grid-template-columns:5.5rem 1fr; column-gap:2.25rem; padding-left:0; }
  .how .steps .step > div{ border-left:1px solid var(--divider); padding-left:2.25rem; padding-bottom:.35rem; }
  .how .steps .step:last-child > div{ border-left-color:transparent; }
}
.how .steps .step h4{ font-size:1.5rem; margin-bottom:.55rem; }
.how .steps .step p{ font-size:1rem; line-height:1.7; max-width:56ch; }
/* three years stays on the cream ground; the layout does the work */
.anchor{ background:var(--cream); color:var(--body); }
.anchor h2{ color:var(--green); }
.anchor .lede, .anchor .lede-dark{ color:#3d3d3d; }
.anchor .eyebrow{ color:var(--teal-cream); }
/* the stepped sequence was breathing too hard */
.how .steps .step{ padding-bottom:1.9rem; }
@media (min-width:760px){
  .how .steps .step{ grid-template-columns:5rem 1fr; column-gap:1.75rem; }
  .how .steps .step > div{ padding-left:1.9rem; padding-bottom:.1rem; }
}
.how .steps .step p{ max-width:64ch; }
.how .sec-head{ max-width:24ch; }
/* .parts is a direct child of <section>, so it needs the page grid itself */
/* match .wrap's own responsive gutter exactly */
.what > .wrap{ padding-inline:1.5rem; }
@media (min-width:768px){
  .what > .wrap{ padding-inline:3rem; }
}
/* ─── four steps: tighter, heading stops wrapping to four lines ─── */
.how .sec-head{ max-width:34ch; }
.how .sec-head h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.06; }
.how .steps{ margin-top:2.25rem; }
.how .steps .step{ padding-bottom:1.35rem; }
@media (min-width:760px){
  .how .steps .step{ grid-template-columns:4.25rem 1fr; column-gap:1.5rem; }
  .how .steps .step > div{ padding-left:1.6rem; padding-bottom:0; }
}
.how .steps .step h4{ font-size:1.3rem; margin-bottom:.35rem; }
.how .steps .step p{ font-size:.98rem; line-height:1.62; max-width:64ch; }
.how.pad{ padding-top:4.5rem; padding-bottom:4.5rem; }
/* the step rows carry a 240px min-height from the old 4-column layout */
.how .steps .step{ min-height:0; }
.how .sec-head{ max-width:46rem; }
.how .steps{ row-gap:0; }
/* ─── where to next: the homepage's map of the rest of the site ─── */
.next{ background:var(--cream); border-top:1px solid var(--divider); }
/* ─── header: five items means it can breathe ─── */
nav.top{ padding:1.6rem 2rem; }
@media (min-width:1100px){
  nav.top{ padding:1.75rem 3rem; }
}
.logo-nav{ height:56px; }
@media (min-width:1100px){
  .logo-nav{ height:62px; }
}
.nav-links{ gap:2.4rem; font-size:1.02rem; }
@media (min-width:960px) and (max-width:1379px){
  .nav-links{ gap:1.6rem; font-size:0.96rem; }
  .nav-dd-trigger{ font-size:0.96rem; }
  nav.top{ padding:1.45rem 1.75rem; }
}
.nav-links > a, .nav-dd-trigger{ font-size:inherit; font-weight:600 !important; padding:0.7rem 0; white-space:nowrap; }
.nav-dd-trigger .chev{ width:15px !important; height:15px !important; }
.nav-cta-group{ gap:0.85rem; }
.nav-cta-group .cta{ font-size:1rem; font-weight:800; padding:1.05rem 2.1rem; border-radius:999px; }
.nav-cta-group .cta-ghost{ padding:1rem 1.6rem; font-weight:700; }
@media (max-width:1099px){
  .nav-cta-group .cta{ font-size:0.94rem; padding:0.9rem 1.5rem; }
  .nav-cta-group .cta-ghost{ display:none; }
}
/* the mega panel sits below a taller bar */
.nav-dd-menu{ padding:2.4rem clamp(1.5rem,4vw,3rem) 2.6rem; }
.nav-dd-menu .mi-t{ font-size:1.02rem !important; }
/* content clears the taller fixed header */
.pagehead{ padding-top:clamp(9rem,14vw,12rem); }
/* the page-label chip beside the logo is clutter; no competitor shows one */
.page-label{ display:none; }
/* secondary section headings should not run at hero scale */
.next .sec-head{ max-width:52rem; }
.next .sec-head h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.08; }
.faq .sec-head h2, .faq h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.08; }
/* ─── dropdowns: close the dead zone and forgive diagonal movement ───
   The trigger sits inside the header's padding, so there was a ~28px gap
   between it and the panel where neither element was hovered. */
.nav-dd-trigger{ position:relative; }
.nav-dd-trigger::after{ content:''; position:absolute; left:-1.25rem; right:-1.25rem; top:100%; height:3rem; pointer-events:auto; }
/* the old full-width bridge is no longer needed and sat over the page */
.nav-dd::after{ display:none; }
/* opening is instant;closing waits, so you can move the mouse diagonally */
.nav-dd-menu{ transition:opacity .16s ease, visibility .16s ease, transform .22s var(--ease-out); transition-delay:.32s; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu{ transition-delay:0s !important; }
/* a bigger, more forgiving target inside the panel itself */
.nav-dd-menu a{ padding:0.85rem 0.9rem; }
/* the bridge only exists while the group is open, so it never blocks the page */
.nav-dd:hover .nav-dd-trigger::after, .nav-dd.open .nav-dd-trigger::after{ pointer-events:auto; }
/* ─── dropdowns are driven by JS intent, not raw :hover ─────────── */
.nav-dd:hover .nav-dd-menu{ opacity:0; visibility:hidden; pointer-events:none; }
.nav-dd.open > .nav-dd-menu{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; }
.nav-dd-menu{ transition:opacity .16s ease, visibility .16s ease, transform .2s var(--ease-out) !important; transition-delay:0s !important; }
.nav-dd.open .nav-dd-trigger{ color:var(--cream); }
.nav-dd.open .nav-dd-trigger .chev{ transform:rotate(180deg); }
.nav-dd-trigger::after{ pointer-events:none; }
.nav-dd.open .nav-dd-trigger::after{ pointer-events:auto; }
/* ─── share band: three numbers, no ornament ─── */
.sharband{ background:var(--cream); border-top:1px solid var(--divider); }
.sharband .sb-head{ max-width:44rem; }
.sharband h2{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.08; color:var(--green); margin:0 0 .8rem; }
.sharband .sb-lede{ color:#4a4a4a; font-size:1.02rem; line-height:1.65; margin:0; max-width:58ch; }
/* ══ HOMEPAGE COLOUR TEST · 24 Aug 2026 ══════════════════════════
   Lighter bone · brighter green used as a surface (Meridian)
   · brighter teal · brighter amber.  Homepage only.
   ═══════════════════════════════════════════════════════════════ */
/* ══ green used as a real surface, the way Meridian does ══════════ */
.sharband{ background:var(--green); border-top:0; position:relative; overflow:hidden; }
.sharband::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(circle at 18% 12%, rgba(84,221,197,.13) 0%, transparent 46%),
    radial-gradient(circle at 88% 84%, rgba(255,192,31,.10) 0%, transparent 44%); }
.sharband > .wrap{ position:relative; z-index:1; }
.sharband h2{ color:var(--cream); }
.sharband .sb-lede{ color:var(--ink-soft); }
/* the questions block closes the light run before the dark sign-up */
.faq{ background:var(--card); border-top:1px solid var(--divider); }
/* white cards need a touch more lift on the lighter bone */
.part, .steps .step{ box-shadow:0 2px 14px rgba(18,63,53,.055); border-color:var(--divider); }
.part:hover{ box-shadow:0 18px 38px -14px rgba(18,63,53,.18) !important; }
/* hero gradient rebuilt on the brighter green */
.hero{ background:linear-gradient(180deg, rgba(18,63,53,0.28) 0%, rgba(18,63,53,0.16) 38%, rgba(18,63,53,0.88) 100%),
             url('assets/hero-woven.webp') center/cover no-repeat, var(--green); }
nav.top.scrolled{ background:rgba(18,63,53,0.94) !important; }
.final{ background:var(--green-deep); }
/* small uppercase labels need weight to hold up at this teal */
.eyebrow{ font-weight:800; }
/* values here are phrases, not percentages: label first, then the phrase */
/* ══════════════════════════════════════════════════════════════
   COLOUR SYSTEM · measured, not eyeballed
   Teal sits 3.8 degrees from the green in OKLCH hue. On a green
   ground it reads as a tint of the ground, never as an accent.
   Amber sits 92 degrees away, bone 91. Those are the accents.

   RULE: teal only ever appears on LIGHT grounds.
         On green the accents are amber and bone. Never teal.
   ══════════════════════════════════════════════════════════════ */
/* ── on green: bone carries the value, amber carries the label ── */
footer h5, .footer h5{ color:var(--amber); }
.on-dark .eyebrow{ color:var(--amber) !important; }
/* ── on light: small labels take the deeper teal so they hold up ── */
.eyebrow{ color:var(--teal-ink); }
.what .eyebrow, .next .eyebrow, .faq .eyebrow{ color:var(--teal-ink); }
.nav-dd-menu a:hover .mi-t{ color:var(--teal-cream) !important; }
/* large display accents keep the brighter teal */
/* secondary action on the green header: outline, not a filled teal pill.
   A teal fill on green is the same 3.8-degree problem, and two filled
   buttons side by side flattens the hierarchy. One amber CTA only. */
.nav-cta-group .cta-ghost{ background:transparent; border:1.5px solid rgba(249,245,237,0.40); color:var(--cream); }
.nav-cta-group .cta-ghost:hover{ border-color:var(--cream) !important; background:rgba(249,245,237,0.08) !important; }
.nav-cta-group .cta-ghost svg{ color:var(--cream); }
/* ══════════════════════════════════════════════════════════════════
   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] .next, html[data-palette] .faq, html[data-palette] .final{ background:var(--ground); }
html[data-palette] .sharband{ background:var(--band); border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line); }
html[data-palette] .sharband::before{ display:none; }
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 h1 .em{ color:var(--teal-bright); }
/* ── the three stats sit on light now ────────────────────────── */
/* ── the timing band ─────────────────────────────────────────── */
html[data-palette] .sharband h2{ color:var(--ink); }
html[data-palette] .sharband .sb-lede{ color:var(--ink-2); }
/* ── sign-up block, light ────────────────────────────────────── */
html[data-palette] .final{ border-top:1px solid var(--line); }
html[data-palette] .final h2{ color:var(--ink); }
html[data-palette] .final h2 .em{ color:var(--teal-bright); }
html[data-palette] .final .lede-dark{ color:var(--ink-2); }
html[data-palette] .final .waitlist{ background:var(--surface) !important; border:1px solid var(--line) !important; box-shadow:0 24px 60px -30px rgba(23,44,38,.28); }
html[data-palette] .final label, html[data-palette] .final .field-label{ color:var(--teal); }
html[data-palette] .final input{ background:var(--ground); border:1px solid var(--line); color:var(--ink); }
html[data-palette] .final input::placeholder{ color:#9AA29E; }
html[data-palette] .final .fine{ color:var(--ink-2); }
html[data-palette] .final .fine a{ color:var(--ink); }
html[data-palette] .final .submit{ background:var(--amber); color:var(--ink); }
/* ── 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); }
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] .btn-amber{ background:var(--amber); color:var(--ink); }
html[data-palette] .btn-amber:hover{ background:var(--amber-2) !important; }
html[data-palette] .cta{ color:var(--ink); }
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); }
html[data-palette] .final .field, html[data-palette] .final .waitlist, html[data-palette] .final .waitlist *{ color:var(--ink); }
html[data-palette] .final .field-label{ color:var(--teal); }
html[data-palette] .final .fine, html[data-palette] .final .fine *{ color:var(--ink-2); }
html[data-palette] .final .submit{ color:var(--ink); }
/* ── hero: text leads, the photograph supports ─────────────── */
html[data-palette] .hero h1{ font-size:clamp(2.6rem,5.2vw,4.3rem); margin-bottom:1.35rem; letter-spacing:-0.015em; }
/* ── the supporting band: wide, short, inset ────────────────── */
/* logo sits on a light bar now */
html[data-palette] .logo-nav{ height:52px; }
@media (min-width:1100px){
  html[data-palette] .logo-nav{ height:58px; }
}
/* ── 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] .sharband h2, html[data-palette] .next .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] .final input{ border:1px solid #D6D0C2; border-radius:10px; padding:.85rem 1rem; background:#FFFFFF; }
html[data-palette] .final input:focus{ outline:none !important; border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(14,156,136,.16) !important; }
html[data-palette] .final .waitlist{ padding:1.9rem 1.75rem; }
html[data-palette] .final .fine{ font-size:.78rem; line-height:1.6; }
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); }
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; }
html[data-palette] .next{ background:var(--band-amber); border-top:1px solid var(--band-amber-line); border-bottom:1px solid var(--band-amber-line); }
html[data-palette] .next .sec-head h2{ color:var(--ink); }
/* 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); }
/* ══ hero: a full-bleed photograph carrying one line, everything
      else on the light ground beneath it. ══════════════════════ */
html[data-palette] .hero{ background:var(--ground); padding:0 0 clamp(2.5rem,4vw,3.25rem); min-height:0; display:block; }
/* the row under the photograph */
/* ══ 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; }
/* ══ the row of choices under the photograph ════════════════════ */
html[data-palette] .pick{ display:flex; flex-direction:column; gap:.3rem; padding:1.15rem 1.3rem; border-radius:14px; text-decoration:none; background:var(--surface); border:1.5px solid var(--line); transition:border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
html[data-palette] .pick:hover{ border-color:var(--teal); transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(10,37,48,.28); }
/* ══ two-half rows, the way Genesis carries an explanation ══════ */
html[data-palette] .split{ background:var(--ground); }
html[data-palette] .cta-line{ display:inline-block; font-size:.95rem; font-weight:800; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--amber); padding-bottom:2px; }
html[data-palette] .cta-line:hover{ color:var(--teal); border-bottom-color:var(--teal); }
/* ══ all four choices in amber, one word each ═══════════════════ */
html[data-palette] .pick{ background:var(--amber); border:1.5px solid var(--amber); align-items:center; text-align:center; padding:1.05rem 1.2rem; gap:0; box-shadow:0 10px 24px -14px rgba(160,110,0,.45); }
html[data-palette] .pick:hover{ background:var(--amber-2) !important; border-color:var(--amber-2) !important; transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(160,110,0,.55); }
/* ══ the header ════════════════════════════════════════════════ */
html[data-nav="amber"] nav.top{ background:rgba(255,192,31,.95); border-bottom:1px solid rgba(10,37,48,.14); }
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); }
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); }
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; }
/* ══ 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: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 */
html[data-palette] .sharband{ border-top:3px solid var(--teal); }
/* 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] .final .field-label, 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, html[data-palette] .final .field-label{ display:inline-flex; align-items:center; gap:.55rem; }
html[data-palette] .eyebrow::before, html[data-palette] .final .field-label::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] #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] .sharband{ border-top:6px solid var(--teal); }
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); }
/* — 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; }
html[data-palette] .final .submit:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }
/* — sweep: the last teal letterforms on light grounds — */
html[data-palette] .final .display .em, html[data-palette] .final h2 .em, html[data-palette] .display .em{ color:var(--ink); }
html[data-palette] .waitlist label, html[data-palette] .final .waitlist label, html[data-palette] .final label{ color:var(--ink); }
html[data-palette] .waitlist label::before, html[data-palette] .final 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 */
html[data-palette] .final .display .em{ background:var(--teal); color:var(--ink); padding:0 .18em; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* ══ the two commercial figures carry the weight ═══════════════
   The first two stats are the offer, so they sit on solid teal with
   petrol type (7.12:1). The third supports and stays on bone. */
/* ══ this round's fixes ════════════════════════════════════════ */
/* the highlighter block was clipping the descender on "address." */
html[data-palette] .final .display .em{ display:inline-block; padding:.05em .22em .17em; line-height:1.04; }
/* "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); 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 app row ═══════════════════════════════════════════════ */
/* give the display heading room so "your" keeps its descender clear of the block */
html[data-palette] .final .display{ line-height:1.16; }
html[data-palette] .final .display .em{ margin-top:.10em; padding:.02em .22em .18em; }
/* ══ generic conversion layer ══════════════════════════════════
   The homepage blocks name its own sections. Every other page has
   its own section classes, so this catches them by behaviour. */
/* no dark grounds anywhere but the footer */
html[data-palette] section:not(.sharband):not(.next):not(.band), html[data-palette] header.hero, html[data-palette] main > div{ background:var(--ground); }
html[data-palette] .on-dark, html[data-palette] section.on-dark{ background:var(--band) !important; color:var(--ink-2) !important; border-top:6px solid var(--teal) !important; border-bottom:0 !important; }
html[data-palette] .on-dark h1, html[data-palette] .on-dark h2, html[data-palette] .on-dark h3, html[data-palette] .on-dark h4, html[data-palette] .on-dark .em, html[data-palette] .on-dark b, html[data-palette] .on-dark strong, html[data-palette] .on-dark dt{ color:var(--ink) !important; }
html[data-palette] .on-dark p, html[data-palette] .on-dark li, html[data-palette] .on-dark dd, html[data-palette] .on-dark td{ color:var(--ink-2) !important; }
html[data-palette] .on-dark .card, html[data-palette] .on-dark .part{ background:var(--surface) !important; border:1px solid var(--band-line) !important; }
/* headline emphasis is never teal letterforms */
html[data-palette] h1 .em, html[data-palette] h2 .em, html[data-palette] h3 .em, html[data-palette] .hero h1 .em, html[data-palette] .final h2 .em{ color:var(--ink); }
/* the small-label family across the deep-dive pages */
/* pill badges: teal is the fill, petrol is the type */
/* numeric units riding beside a figure */
html[data-palette] .big small, html[data-palette] .figure small{ color:var(--ink-2); }
/* anything still painting teal type on a light card */
/* unit suffixes riding beside a figure, wherever they live */
html[data-palette] .kwh small, html[data-palette] .v small, html[data-palette] h1 small, html[data-palette] h2 small, html[data-palette] h3 small, html[data-palette] .big small, html[data-palette] .figure small{ color:var(--ink-2); }
/* pages that carry their own bullet marker do not also get the teal square */
/* product illustration panels move off the retired green onto petrol */
/* the page-label chip beside the logo is clutter; no competitor shows one */
html[data-palette] .page-label{ display:none; }
/* pages carrying their own battery glyph beside an eyebrow: one marker, not two */
/* the hero product render moves off the retired green onto petrol */
/* ══ inherited dark-era colour, caught at the token ═════════════
   These two tokens were cream because every ground used to be dark.
   On a light page they render text at 1:1 against the background. */
html[data-palette]{ --ink-soft:var(--ink-2); --ink-softer:var(--ink-3); --cream:var(--ground); }
html[data-palette] footer{ --ink-soft:rgba(251,249,244,.86); --ink-softer:rgba(251,249,244,.60); }
/* large amber numerals on white cards: amber is a fill, not a figure colour */
html[data-palette] .kwh{ color:var(--ink); }
/* ghost buttons away from the amber bar */
html[data-palette] .ghost:not(nav.top .ghost), html[data-palette] .cta-ghost:not(.nav-cta-group .cta-ghost){ color:var(--ink); border:1.5px solid var(--line); background:transparent; }
html[data-palette] .ghost:not(nav.top .ghost):hover, html[data-palette] .cta-ghost:not(.nav-cta-group .cta-ghost):hover{ border-color:var(--teal) !important; background:var(--band) !important; }
/* ══ page heads on the deep-dive pages ═════════════════════════
   These were dark sections. The ground is bone now, so the type
   has to come back to petrol or it renders invisible. */
html[data-palette] .pagehead, html[data-palette] header.hero{ background:var(--ground); color:var(--ink-2); border-bottom:1px solid var(--line); }
html[data-palette] .pagehead h1, html[data-palette] .pagehead h2, html[data-palette] header.hero h1, html[data-palette] .pagehead .em, html[data-palette] header.hero .em{ color:var(--ink); }
html[data-palette] .pagehead p, html[data-palette] .pagehead .lede, html[data-palette] header.hero p, html[data-palette] header.hero .lede{ color:var(--ink-2); }
html[data-palette] .pagehead .eyebrow, html[data-palette] header.hero .eyebrow{ color:var(--ink); }
/* anything still inheriting the old cream text colour on a light ground */
html[data-palette] .wrap > h1, html[data-palette] .wrap > h2, html[data-palette] section > .wrap h1{ color:var(--ink); }
/* the nav CTA: some pages wrap it differently, so target it both ways */
html[data-nav] nav.top .cta:not(.cta-ghost), html[data-nav] .nav-cta-group .cta:not(.cta-ghost){ background:var(--ink); color:#FBF9F4; border:1.5px solid var(--ink); }
html[data-nav] nav.top .cta:not(.cta-ghost):hover{ background:var(--teal) !important; border-color:var(--teal) !important; color:var(--ink) !important; }
html[data-nav] nav.top .cta-ghost{ background:var(--ground); border:1.5px solid var(--ground); color:var(--ink); font-weight:700; }
html[data-nav] nav.top .cta-ghost .lock{ color:var(--teal); }
/* pale wash panels that assumed a dark ground */
/* highlighted lanes: a pale amber wash needs petrol type, not amber */
/* utility pages carry a header.page instead of a pagehead */
html[data-palette] header.page{ background:var(--ground); color:var(--ink-2); border-bottom:1px solid var(--line); }
html[data-palette] header.page h1, html[data-palette] header.page h2, html[data-palette] header.page .display, html[data-palette] header.page .em{ color:var(--ink); }
html[data-palette] header.page p, html[data-palette] header.page .lede{ color:var(--ink-2); }
html[data-palette] header.page .eyebrow{ color:var(--ink); }
/* inline links in running copy: petrol type on a teal underline, because teal letterforms on a light ground are the one thing banned */
html[data-palette] p a:not(.cta):not(.btn):not(.jump):not(.cta-line):not(.gl), html[data-palette] li a:not(.cta):not(.btn):not(.jump):not(.mobile-nav-link), html[data-palette] dd a, html[data-palette] td a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--teal); padding-bottom:1px; }
html[data-palette] p a:hover, html[data-palette] li a:hover{ background:var(--band); }
html[data-palette] footer li a:not(.cta):not(.btn):not(.jump):not(.mobile-nav-link), html[data-palette] footer p a:not(.cta):not(.btn):not(.jump):not(.cta-line):not(.gl){ color:rgba(251,249,244,.80); border-bottom:0; background:transparent; }
html[data-palette] footer li a:hover, html[data-palette] footer p a:hover{ color:#FFFFFF !important; background:transparent !important; }
/* ══ pages with their own naming scheme ════════════════════════ */
html[data-palette] [class*="__eyebrow"], html[data-palette] [class*="__tag"], html[data-palette] [class*="__more"], html[data-palette] [class*="__sub"], html[data-palette] [class*="__title"], html[data-palette] .ar, html[data-palette] .placeholder{ color:var(--ink); }
/* dark feature panels on the newsroom and elsewhere */
html[data-palette] [class*="__title"]{ color:var(--ink); }
html[data-palette] .card, html[data-palette] [class*="card"]{ ; }
html[data-palette] .card{ background:var(--surface); }
/* amber wash chips need petrol type */
html[data-palette] .placeholder{ background:var(--band-amber); color:var(--ink); }
/* any remaining dark section, but never the pale teal and pale amber bands */
html[data-palette] section.pad:not(.band):not(.sharband):not(.next):not(.what):not(.faq):not(.bundle):not(.unit):not(.split){ background:var(--ground); }
html[data-palette] section[style*="background:#0"], html[data-palette] section[style*="background:#1"], html[data-palette] section[style*="background: #0"], html[data-palette] section[style*="background: #1"]{ background:var(--ground); }
/* the two bands are part of the system, not leftovers */
html[data-palette] .sharband{ background:var(--band); }
html[data-palette] .next{ background:var(--band-amber); }
/* table headers were teal on the old dark tables */
html[data-palette] th{ color:var(--ink); background:var(--raise,var(--band)); }
html[data-palette] table{ color:var(--ink-2); }
/* newsroom take-outs sat on a translucent black wash */
html[data-palette] .take, html[data-palette] [class*="take"]{ background:transparent; }
html[data-palette] .take{ background:var(--band); border:1px solid var(--band-line); }
html[data-palette] .take *{ color:var(--ink-2); }
html[data-palette] .take .n{ color:var(--ink); }
html[data-palette] [style*="rgba(0, 0, 0.2"]{ background:var(--band); }
/* links that sit directly in a container rather than inside a p or li */
html[data-palette] .note a, html[data-palette] .aside a, html[data-palette] .fine a, html[data-palette] .card a:not(.cta):not(.btn):not(.jump){ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--teal); padding-bottom:1px; }
/* ══ one dropdown shape everywhere ═════════════════════════════
   Some pages only carried the old narrow popover. Every panel is
   the full-width mega panel now, so the nav behaves the same on
   every page. */
html[data-palette] nav.top{ position:sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between; }
html[data-palette] .nav-dd{ position:static; }
html[data-palette] .nav-links{ position:static; }
html[data-palette] .nav-dd-menu{ position:absolute; left:0; right:0; top:100%; width:auto; min-width:0; max-width:none; transform:translateY(10px); background:var(--surface); border:0; border-top:1px solid var(--line); border-radius:0 0 22px 22px; box-shadow:0 34px 80px -30px rgba(10,37,48,.34); padding:2rem clamp(1.4rem,4vw,2.6rem) 2.2rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem 1.6rem; }
@media (max-width:1200px){
  html[data-palette] .nav-dd-menu{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:940px){
  html[data-palette] .nav-dd-menu{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
html[data-palette] .nav-dd:hover .nav-dd-menu, html[data-palette] .nav-dd.open .nav-dd-menu{ transform:translateY(0) !important; }
html[data-palette] .nav-dd--end .nav-dd-menu{ left:0; right:0; }
html[data-palette] .nav-dd-menu a{ display:block; padding:.75rem .85rem; border-radius:11px; text-decoration:none; }
html[data-palette] .nav-dd-menu .mi-t{ display:block; font-weight:700; font-size:1rem; line-height:1.2; color:var(--ink); }
/* a mail glyph inside a button that opens an email */
html[data-palette] a[href^="mailto:"].cta{ display:inline-flex; align-items:center; }
/* the numbered rail on the getting-set-up page */
/* ══ the bar now carries six items plus two controls ═══════════ */
html[data-palette] nav.top{ gap:1rem; padding-left:clamp(1rem,2.4vw,2rem) !important; padding-right:clamp(1rem,2.4vw,2rem) !important; }
html[data-palette] .logo-nav{ height:46px; flex:0 0 auto; }
@media (min-width:1280px){
  html[data-palette] .logo-nav{ height:52px; }
}
html[data-palette] .nav-links{ gap:.15rem; }
html[data-palette] .nav-links > a, html[data-palette] .nav-dd-trigger{ font-size:.94rem; padding:.5rem .62rem; white-space:nowrap; }
@media (min-width:1380px){
  html[data-palette] .nav-links{ gap:.35rem !important; }
  html[data-palette] .nav-links > a, html[data-palette] .nav-dd-trigger{ font-size:1rem !important; padding:.5rem .8rem !important; }
}
html[data-palette] .nav-cta-group{ gap:.45rem; flex:0 0 auto; }
html[data-palette] .nav-cta-group .cta{ font-size:.9rem; padding:.62rem 1.05rem; white-space:nowrap; }
@media (max-width:1120px){
  html[data-palette] .nav-cta-group .cta-ghost{ display:none; }
}
/* the coming-soon shell is a real page now, not a holding note */
html[data-palette] .soon{ min-height:0; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); }
html[data-palette] .soon h1{ font-size:clamp(2.4rem,5.4vw,3.9rem); line-height:1.02; margin-bottom:1rem; }
html[data-palette] .soon .lede{ font-size:1.1rem; }
/* ══ the nav component, self-contained ═════════════════════════
   The legal and utility pages never carried the full header, so
   swapping the markup in left them with no layout at all. These
   rules make the bar work on a page that has none of its own. */
html[data-palette] nav.top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; box-sizing:border-box; }
html[data-palette] nav.top .logo-link{ display:inline-flex; align-items:center; line-height:0; text-decoration:none; }
html[data-palette] nav.top .logo-nav{ width:auto; display:block; }
html[data-palette] .nav-links{ display:none; align-items:center; font-weight:600; }
@media (min-width:1060px){
  html[data-palette] .nav-links{ display:inline-flex; }
}
html[data-palette] .nav-dd{ display:inline-flex; align-items:center; }
html[data-palette] .nav-dd-trigger{ display:inline-flex; align-items:center; gap:.32rem; background:transparent; border:0; margin:0; cursor:pointer; font-family:inherit; font-weight:600; line-height:1.2; }
html[data-palette] .nav-links > a{ display:inline-flex; align-items:center; text-decoration:none; font-weight:600; line-height:1.2; }
html[data-palette] .chev{ width:12px; height:12px; flex:0 0 auto; opacity:.85; transition:transform .24s var(--ease-out,ease); }
html[data-palette] .nav-dd:hover .chev{ transform:rotate(180deg); }
html[data-palette] .nav-cta-group{ display:inline-flex; align-items:center; }
html[data-palette] nav.top .cta{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-family:inherit; font-weight:700; line-height:1; text-decoration:none; border-radius:999px; cursor:pointer; box-sizing:border-box; }
html[data-palette] nav.top .lock{ width:14px; height:14px; flex:0 0 auto; display:inline-block; }
html[data-palette] nav.top svg{ max-width:100%; }
/* the burger only exists below the desktop breakpoint */
/* a fixed bar needs the page to start below it */
html[data-palette] body{ padding-top:0; }
html[data-palette] nav.top ~ *:not(script):not(style){ ; }
/* the panel is closed until asked for. Pages without their own header
   CSS had no closed state at all, so every menu rendered open. */
html[data-palette] .nav-dd-menu{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, visibility .16s ease, transform .22s var(--ease-out,ease); }
html[data-palette] .nav-dd:hover > .nav-dd-menu, html[data-palette] .nav-dd.open > .nav-dd-menu{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
/* body{overflow-x:hidden}turns the body into a scroll container, which adds a
   scrollbar's width to scrollWidth and reads as a horizontal overflow that is
   not there. clip does the same job without the scroll container. */
html[data-palette] body{ overflow-x:clip; overflow-y:visible; }
html[data-palette]{ overflow-x:clip; }