/* 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:hover, .site-header .nav a.nav-cta[aria-current='page'] { color: var(--color-bg); }
.site-header .nav-cta { min-width: 0; min-height: 40px; margin-left: 0; }
.site-header .appnav-tabs { margin-right: auto; }
.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%; }
  .has-tabbar .site-header .appnav { flex-wrap: nowrap; }
}
.is-waiting { opacity: 0; }

/* page heads */
.mk-head .wrap { padding-block: var(--space-8) var(--space-6); }
.mk-head h1 { font: 800 clamp(32px, 5vw, 56px)/1.05 var(--font-heading); letter-spacing: -0.03em; max-width: 18ch; margin: var(--space-2) 0 0; text-wrap: balance; }
.mk-head .lede, .lede { font-size: 19px; font-weight: 600; 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: 12px; }
.mk-head--poster a { color: var(--color-bg); }

/* sections */
.mk-section .wrap { padding-block: var(--space-8); }
.mk-section h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.02em; margin: 0 0 var(--space-4); text-wrap: balance; }
.mk-section h3 { font-size: 20px; 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 { max-width: none; }
.muted { color: var(--color-neutral-800); }
.small { font-size: 13px; }
.prose h2 { font-size: 20px; margin-top: var(--space-6); }
.draft-flag { border: 2px solid var(--color-accent-700); 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(40px, 6.4vw, 76px)/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 ruled cells */
.cells { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--color-divider); margin-top: var(--space-6); }
.cells > * { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-divider); }
.cells > *:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .cells-2 { grid-template-columns: repeat(2, 1fr); }
  .cells-3 { grid-template-columns: repeat(3, 1fr); }
  .cells-4 { grid-template-columns: repeat(4, 1fr); }
  .cells > * { border-bottom: 0; border-left: 1px solid var(--color-divider); padding: var(--space-6) var(--space-6); }
  .cells > *:first-child { border-left: 0; padding-left: 0; }
}
.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: 36px; height: 36px; margin-bottom: var(--space-3); background: var(--color-text); color: var(--color-bg); font: 800 17px var(--font-heading); }
li + li { margin-top: 0; }

/* 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: 16px; 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 17px 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 14px 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: 2px 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: 800 17px var(--font-heading); grid-column: 1; }
.rows .v-kind { grid-column: 1; color: var(--color-neutral-800); font-size: 14px; }
.rows .v-note { grid-column: 1 / -1; font-size: 14px; 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: 13px; 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-text); }

/* pricing */
.price { font: 800 clamp(48px, 8vw, 72px)/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: 16px; 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; background: var(--color-accent); }

/* faq */
.faq details { border-top: 2px solid var(--color-divider); }
.faq details:last-child { border-bottom: 2px solid var(--color-divider); }
.faq summary { list-style: none; cursor: pointer; min-height: 56px; padding: var(--space-3) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font: 800 18px var(--font-heading); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 28px; line-height: 1; font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--space-4); }

/* 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(32px, 5vw, 56px)/1.05 var(--font-heading); letter-spacing: -0.03em; max-width: 18ch; color: var(--color-bg); text-wrap: balance; }
.poster p { font-size: 19px; font-weight: 600; max-width: 52ch; }
.poster a { color: var(--color-bg); }
.poster .btn-cta { background: var(--color-bg); color: var(--color-accent-800); }
.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); }
.poster .btn-secondary:hover { background: var(--color-bg); color: var(--color-accent-800); }

/* footer */
.site-footer { border-top: 2px solid var(--color-text); padding-block: var(--space-6); font-size: 14px; }
.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: 13px; }