/* HELIOSPAN — a cool data-sheet design for a solar mounting range.
   A pale cool grey ground with a saturated blue accent and a monospace data treatment, so numbers
   and labels read as a specification rather than as prose. Distinct from the warm garden and kraft
   packaging designs and from the dark machining families.

   The shared motion layer makes the sticky header take the body's background colour, so the
   masthead is designed as part of the body surface: the same colours apply whether or not the
   script runs. */

:root {
  color-scheme: light;
  --ground: #eef1f5;
  --surface: #ffffff;
  --surface-2: #e4e9f0;
  --ink: #10161f;
  --ink-2: #4a5567;
  --ink-3: #7c8798;
  --rule: #c8d1dd;
  --accent: #1f5fd0;
  --accent-ink: #ffffff;
  --warn: #b26a00;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shell: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.shell { width: min(100% - 2.4rem, var(--shell)); margin-inline: auto; }

/* ---------------------------------------------------------------- masthead */

.masthead { background: var(--ground); color: var(--ink); border-bottom: 2px solid var(--ink); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; padding: 0.9rem 0; }
.brand { display: flex; align-items: baseline; gap: 0.7rem; margin: 0; }
.brand strong { font-family: var(--mono); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.brand span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.05rem; margin-inline-start: auto; }
.site-nav a { font-family: var(--mono); color: var(--ink-2); font-size: 0.79rem; letter-spacing: 0.02em; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--accent); text-decoration: none; border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- headings */

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.65rem; }
h1 { font-size: clamp(1.95rem, 1.2rem + 2.8vw, 3.1rem); font-weight: 600; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.72rem); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1.02rem; font-weight: 600; }

p { margin: 0 0 1rem; color: var(--ink-2); }
p.lead { font-size: 1.08rem; color: var(--ink); max-width: 60ch; }

.eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.75rem; }

.breadcrumb { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); margin: 0 0 1.1rem; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-inline: 0.42rem; }

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(2.2rem, 1.3rem + 3vw, 3.6rem) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { max-width: 62ch; margin-bottom: 1.6rem; }
.section-head.spaced { margin-top: 2.2rem; }

.hero { padding: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem) 0 clamp(1.6rem, 1rem + 2vw, 2.5rem); }
.hero-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.9rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; } }

.hero-figure { margin: 0; background: var(--surface); border: 1px solid var(--rule); }
.hero-figure img { width: 100%; }
.hero-figure figcaption { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); padding: 0.6rem 0.9rem; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- grids */

.grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.45rem; }
.card h3 { margin: 0; }
.card p { margin: 0; font-size: 0.94rem; }
.card .tag { font-family: var(--mono); font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.card a.more { font-family: var(--mono); font-size: 0.82rem; margin-top: auto; }

.product-card { background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.product-card img { border-bottom: 1px solid var(--rule); }
.product-card .body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.product-card h3 { margin: 0; }
.product-card .body p { margin: 0; font-size: 0.93rem; }
.product-card .body a.more { margin-top: 0.45rem; font-family: var(--mono); font-size: 0.82rem; }

/* ---------------------------------------------------------------- data */

.spec-list { margin: 0 0 1.3rem; border-top: 2px solid var(--ink); }
.spec-list > div { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: 0.2rem 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .spec-list > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.spec-list dt { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin: 0; }
.spec-list dd { margin: 0; color: var(--ink); font-size: 0.95rem; }

.table-scroll { overflow-x: auto; margin: 0 0 1.3rem; border: 1px solid var(--rule); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; }
caption { text-align: left; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); }
th, td { text-align: left; padding: 0.68rem 0.9rem; border-bottom: 1px solid var(--rule); font-size: 0.93rem; }
thead th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
tbody th { color: var(--ink); font-weight: 600; }
tbody td { color: var(--ink-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- notes */

details { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 0.9rem 1.1rem; margin: 0 0 0.7rem; }
summary { cursor: pointer; font-weight: 600; font-size: 0.98rem; color: var(--ink); }
summary::marker { color: var(--accent); }
details p { margin: 0.62rem 0 0; font-size: 0.94rem; }

.note { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-2); background: var(--surface-2); padding: 0.7rem 1rem; margin: 0 0 1.3rem; border-left: 3px solid var(--warn); }

.demo-band { background: var(--ink); color: var(--surface); padding: 0.7rem 1.1rem; font-family: var(--mono); font-size: 0.78rem; margin: 0 0 1.4rem; }
.demo-band strong { color: #8fb6f5; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- links */

.link-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.link-row a { font-family: var(--mono); font-size: 0.82rem; border: 1px solid var(--ink); padding: 0.6rem 1.05rem; color: var(--ink); background: var(--surface); }
.link-row a:hover { background: var(--ink); color: var(--surface); text-decoration: none; }
.link-row a.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.link-row a.primary:hover { background: #17499f; border-color: #17499f; color: var(--accent-ink); }

.next-links { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); margin-top: 1.3rem; }
.next-links a { background: var(--surface); border: 1px solid var(--rule); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.22rem; }
.next-links a span { font-family: var(--mono); font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.next-links a b { font-weight: 600; font-size: 1rem; color: var(--ink); }
.next-links a:hover { border-color: var(--accent); text-decoration: none; }
.next-links a:hover b { color: var(--accent); }

/* ---------------------------------------------------------------- footer */

.site-foot { border-top: 2px solid var(--ink); background: var(--surface-2); margin-top: 2.2rem; padding: 1.8rem 0 2.8rem; }
.site-foot p { font-size: 0.86rem; color: var(--ink-2); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin-bottom: 0.9rem; }
.site-foot .links a { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- utilities */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1.1rem; z-index: 40; font-family: var(--mono); }
.skip:focus { left: 0.5rem; top: 0.5rem; }
main:focus { outline: none; }