/* Solar Split marketing site: page composition only.
   Every colour, size and timing comes from the design system (ds/tokens.css, base, components, layout).
   Nothing here defines a new colour, font or component; see docs/architecture/design-system.md. */

html { scroll-padding-top: 72px; }
body { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }

/* header: the app's top navigation, with the Early access button on the right */
.site-header { position: sticky; top: 0; z-index: 20; }
.site-header .appnav { position: static; }
.site-header .nav-cta, .site-header .nav a.nav-cta[aria-current='page'] { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .site-header .nav a.nav-cta:hover { color: var(--paper); } }
.site-header .nav-cta { min-width: 0; min-height: 40px; margin-left: 0; }
.site-header .appnav-tabs { margin-right: auto; }
.site-header .nav-register { min-width: 0; min-height: 40px; margin-left: 0; }
.site-header .nav-signin { margin-left: 0; }
.brand-mark { flex: none; }

/* phone: the bottom tab bar and More sheet replace the tab row (built by site.js) */
.tabbar--site { display: none; }
@media (max-width: 759.98px) {
  .site-header .appnav { padding-inline: var(--gut); min-height: 56px; gap: var(--space-3); flex-wrap: nowrap; }
  .has-tabbar .appnav-tabs { display: none; }
  .has-tabbar .tabbar--site { display: grid; }
  .has-tabbar body { padding-bottom: 64px; }
  .site-header .appnav-tabs { order: 3; flex-basis: 100%; }
  /* Sign in and Create account stay in the header on phones: a second row of two equal buttons under the brand row. The header scrolls away (the bottom bar stays), so the extra row costs no reading height. */
  .site-header { position: static; }
  .has-tabbar .site-header .appnav { flex-wrap: wrap; row-gap: var(--space-2); padding-block: var(--space-2); }
  .site-header .nav-brand { margin-right: auto; }
  .site-header .nav a.nav-signin, .site-header .nav a.nav-register { order: 5; height: 44px; flex: 1 1 calc(50% - var(--space-3)); min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
  .site-header .nav a.nav-signin { border: 1px solid var(--color-divider); border-radius: var(--radius-md); font-weight: 600; }
}
.is-waiting { opacity: 0; }

/* page heads */
.mk-head .wrap { padding-block: var(--space-8) var(--space-4); }
.mk-head h1 { font: 700 clamp(2rem, 5vw, 3.25rem)/1.05 var(--font-heading); letter-spacing: -0.03em; max-width: 20ch; margin: var(--space-2) 0 0; text-wrap: balance; }
.mk-head .lede, .lede { font-size: 1.1875rem; font-weight: 500; color: var(--ink-2); max-width: 52ch; margin: var(--space-4) 0 0; line-height: 1.45; }
.mk-head--poster { background: var(--color-accent-700); color: var(--color-bg); }
.mk-head--poster .card-kicker { color: var(--color-bg); font-size: 0.875rem; }
.mk-head--poster a { color: var(--color-bg); }

/* sections: the old heavy rule between bands becomes whitespace */
.mk-head.band, .mk-section.band { border-bottom: 0; }
/* sections */
.mk-section .wrap { padding-block: var(--space-6); }
.mk-section h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -0.02em; margin: 0 0 var(--space-4); text-wrap: balance; }
.mk-section h3 { font-size: 1.25rem; margin: 0 0 var(--space-2); }
.mk-section p, .mk-section ul, .mk-section ol { max-width: 62ch; }
.mk-section .cells, .mk-section .steps, .mk-section .rows, .mk-section .flow-diagram { max-width: none; }
.cells + p { margin-top: var(--space-4); }
.muted { color: var(--color-neutral-800); }
.small { font-size: 0.875rem; }
.prose h2 { font-size: 1.25rem; margin-top: var(--space-6); }
.draft-flag { border: 1px solid var(--sun-line); background: var(--sun-soft); border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-6); max-width: 62ch; }
.draft-flag p { margin: 0; font-weight: 800; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

/* hero on the home page: the app's Live hero, with the 3D property on the right */
.mk-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.mk-hero-copy { padding: var(--space-8) var(--gut); display: flex; flex-direction: column; gap: var(--space-4); }
.mk-hero-copy h1 { font: 800 clamp(2.5rem, 6.4vw, 4.75rem)/0.98 var(--font-heading); letter-spacing: -0.04em; margin: 0; text-wrap: balance; }
.mk-hero .hero-3d { min-height: 380px; }
.mk-hero .lede { margin-top: 0; }
.mk-hero .actions { margin-top: var(--space-2); }

.sw-accent { background: var(--color-accent); }
.statement-wrap { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .statement-wrap { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: end; } }

/* grids of cards */
.cells { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.cells > * { padding: var(--space-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
@media (min-width: 900px) {
  .cells { gap: var(--space-4); }
  .cells-2 { grid-template-columns: repeat(2, 1fr); }
  .cells-3 { grid-template-columns: repeat(3, 1fr); }
  .cells-4 { grid-template-columns: repeat(4, 1fr); }
}
.steps { list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: step; }
.steps > li { counter-increment: step; margin: 0; }
.steps > li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--color-accent); color: var(--paper); font: 700 1.0625rem var(--font-heading); }
li + li { margin-top: 0; }

/* "works with" chips: the equipment wording, solar only, solar + battery, or battery only */
.works-with { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: var(--space-4) 0 0; padding: 0; max-width: none; }
.works-with > li { margin: 0; }
.chip { display: inline-flex; align-items: center; min-height: 2rem; font-size: 0.875rem; font-weight: 600; padding: 0.25rem 0.875rem; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-800); white-space: nowrap; user-select: none; -webkit-user-select: none; }
.chip--sun { background: var(--sun-soft); color: var(--ink); }

/* infographics: a labelled figure, never the only carrier of a fact */
.infographic { margin: var(--space-4) 0 0; padding: var(--space-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.infographic figcaption { margin: 0 0 var(--space-3); font: 600 0.9375rem var(--font-body); color: var(--ink-2); }
.infographic .meter--split { height: 36px; border-radius: var(--radius-sm); overflow: hidden; }
.infographic .bar-key { margin-top: var(--space-2); }
.infographic .seg-a { --flex: 58; --sw: var(--home-1); }
.infographic .seg-b { --flex: 42; --sw: var(--home-4); }
.flow-diagram { list-style: none; margin: var(--space-4) 0 0; padding: 0; max-width: none; display: grid; gap: var(--space-3); }
.flow-diagram > li { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.flow-diagram svg { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; color: var(--color-accent); }
.flow-diagram b, .flow-diagram span { grid-column: 2; }
.flow-diagram b { font: 700 1.125rem var(--font-heading); }
.flow-diagram span { color: var(--ink-2); font-size: 0.9375rem; }
@media (min-width: 900px) { .flow-diagram { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

/* the example statement */
.statement { border-top: 2px solid var(--color-text); padding-top: var(--space-4); }
.statement-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.statement-head h2 { font-size: 1rem; margin: 0; letter-spacing: 0; }
.statement dl { margin: 0; }
.statement .row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.statement dt { margin: 0; }
.statement dd { margin: 0; font: 800 1.0625rem var(--font-heading); font-variant-numeric: tabular-nums; text-align: right; }
.bar { display: grid; height: 28px; gap: 2px; margin: var(--space-4) 0 var(--space-2); }
.bar-58-42 { grid-template-columns: 58fr 42fr; }
.bar-a { background: var(--color-neutral-400); }
.bar-b { background: var(--color-accent); }
.bar-key { display: flex; justify-content: space-between; font: 800 0.875rem var(--font-heading); gap: var(--space-3); }

/* equipment rows */
.tier { margin-bottom: var(--space-8); }
.tier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.tier-head h2 { margin: 0; }
.rows { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--color-divider); }
.rows > li { margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); align-items: start; }
.rows .v-name { font: 700 1.0625rem var(--font-heading); grid-column: 1; }
.rows .v-kind { grid-column: 1; color: var(--color-neutral-800); font-size: 0.875rem; }
.rows .v-note { grid-column: 1 / -1; font-size: 0.875rem; margin: 0; max-width: none; }
.rows .tag { grid-column: 2; grid-row: 1; justify-self: end; }
@media (min-width: 900px) {
  .rows > li { grid-template-columns: 2fr 2fr 2fr 3fr; align-items: baseline; }
  .rows .v-name, .rows .v-kind, .rows .tag, .rows .v-note { grid-column: auto; grid-row: auto; justify-self: start; }
}
.owner-note { font-weight: 600; }

/* "what you need" notes and checklist */
.need-note { font-size: 0.875rem; color: var(--color-neutral-800); max-width: 52ch; margin: var(--space-2) 0 0; }
.need-note b { color: var(--color-text); }
.checklist { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.checklist li { position: relative; padding: var(--space-3) 0 var(--space-3) 36px; border-top: 1px solid var(--color-divider); margin: 0; max-width: 62ch; }
.checklist li:last-child { border-bottom: 1px solid var(--color-divider); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border: 2px solid var(--color-accent); border-radius: 6px; }

/* pricing */
.price { font: 700 clamp(3rem, 8vw, 4.5rem)/1 var(--font-heading); letter-spacing: -0.04em; margin: var(--space-3) 0 var(--space-2); font-variant-numeric: tabular-nums; }
.price small { font-size: 1rem; letter-spacing: 0; font-weight: 600; }
.checks { list-style: none; padding: 0; }
.checks li { padding-left: 1.5em; position: relative; margin: 0 0 var(--space-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }

/* faq: one rounded card per question */
.faq { display: grid; gap: var(--space-2); }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding-inline: var(--space-4); }
.faq summary { list-style: none; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; min-height: 3.5rem; padding: var(--space-3) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font: 700 1.125rem var(--font-heading); letter-spacing: -0.01em; }
.faq summary:active { color: var(--color-accent-700); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.75rem; line-height: 1; font-weight: 400; flex: none; color: var(--color-accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--space-4); }
.faq h2 { margin-bottom: var(--space-2); }

/* poster: the red closing statement */
.poster { background: var(--color-accent-700); color: var(--color-bg); }
.poster .wrap { padding-block: var(--space-12); }
.poster h2 { font: 800 clamp(2rem, 5vw, 3.5rem)/1.05 var(--font-heading); letter-spacing: -0.03em; max-width: 18ch; color: var(--color-bg); text-wrap: balance; }
.poster p { font-size: 1.1875rem; font-weight: 600; max-width: 52ch; }
.poster a { color: var(--color-bg); }
.poster .btn-cta { background: var(--color-bg); color: var(--color-accent-800); }
@media (hover: hover) and (pointer: fine) { .poster .btn-cta:hover, .poster a.btn-cta:hover { background: var(--color-text); color: var(--color-bg); } }
.poster .btn-secondary { border-color: var(--color-bg); color: var(--color-bg); }
@media (hover: hover) and (pointer: fine) { .poster .btn-secondary:hover { background: var(--color-bg); color: var(--color-accent-800); } }

/* footer */
.site-footer { border-top: 0.0625rem solid var(--line); padding-block: var(--space-6); font-size: 0.875rem; }
.site-footer .wrap { display: grid; gap: var(--space-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); max-width: none; }
.site-footer li { margin: 0; }
.site-footer a { display: inline-block; padding: var(--space-2) 0; }
.site-footer .fine { color: var(--color-neutral-800); max-width: 70ch; margin: 0; font-size: 0.875rem; }

/* legal and support pages (rendered from docs/legal by scripts/build-legal.mjs) */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.legal-meta { margin: var(--space-4) 0 0; font-weight: 600; max-width: none; }
.legal-toc { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-md); padding: var(--space-4); align-self: start; }
.legal-toc-title { margin: 0 0 var(--space-2); font-weight: 800; }
.legal-toc ol { margin: 0; padding-left: var(--space-6); max-width: none; font-size: 0.875rem; }
.legal-toc a { display: inline-block; padding-block: var(--space-1); }
.prose h2 { scroll-margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-4); }
.prose .table-wrap { overflow-x: auto; margin-block: var(--space-4); max-width: 100%; }
.prose .table { min-width: 480px; }
.prose .table th, .prose .table td { text-align: left; vertical-align: top; }
.legal-contact { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (min-width: 960px) {
  .legal { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); }
  .legal-toc { position: sticky; top: var(--space-6); }
}

/* Home Kit waitlist form and unsubscribe page */
.wait-box { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); padding: var(--space-6); }
.wait-box p { max-width: none; }
.price--text { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.03em; }
.waitlist { display: grid; gap: var(--space-4); max-width: 520px; }
.waitlist h2 { margin: 0; }
.waitlist .actions { margin-top: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.buy-status { min-height: 1.5em; margin: var(--space-2) 0 0; font-weight: 600; color: var(--color-accent-800); }
/* waitlist field errors: right under the field, 17 px bold, error red on the card (never colour alone: a bar and words) */
.field-error { margin: var(--space-2) 0 0; padding-left: var(--space-3); border-left: 4px solid var(--c-error); font-size: var(--fs-3); font-weight: 700; line-height: 1.35; color: var(--c-error); max-width: none; }
.field-error:empty { display: none; }
.waitlist .input[aria-invalid='true'] { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.waitlist .choice:has(input[aria-invalid='true']) { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.order-note { border: 1px solid var(--color-accent-700); border-radius: var(--radius-sm); padding: var(--space-4); margin: 0 0 var(--space-6); max-width: 62ch; font-weight: 800; }
[hidden] { display: none !important; }

/* landing page: where existing customers sign in */
.signin-note { font-size: 0.875rem; color: var(--color-neutral-800); margin: var(--space-2) 0 0; }

/* tablet widths: brand and account buttons on the first row, the page tabs on a second row (and the header scrolls away, so a short landscape screen keeps its height) */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .site-header { position: static; }
  .site-header .appnav { gap: 0 var(--space-4); }
  .site-header .nav-brand { margin-right: auto; }
  .site-header .appnav-tabs { order: 3; flex-basis: 100%; margin-right: 0; }
}

/* Open-source licence texts (scripts/build-licences.mjs): wrap long lines, scroll by keyboard if needed */
.licence-text { white-space: pre-wrap; overflow-wrap: anywhere; border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: var(--space-4); font-size: 0.875rem; max-height: 24rem; overflow: auto; }