/*
    THE LANDING PAGE'S OWN STYLESHEET.

    Everything Components/Pages/Marketing/Landing.razor draws and nothing else: the hero, the canvas
    figure, the proof strip, the numbered steps, the marketing waterfall, the interruption stage
    strip, the document device, the report preview and the closing call to action.

    THE ONE SURFACE THAT HAS TO ARGUE FOR THE PRODUCT rather than operate it, so it gets devices the
    app does not: full-bleed bands, an inverted section, and charts drawn from real waterfall shapes.

    EVERYTHING HERE IS HTML AND CSS BUILT FROM TOKENS. The only bitmaps are photographs (see
    Documentation/design/marketing-imagery.md); nothing claiming to be a screenshot of a feature is a
    bitmap, because a bitmap cannot be kept honest as the product changes.

    WHAT IT DOES NOT OWN. The nav, the footer, the entry hero, the photo band and .sv-lead are
    public-site.css's, because about and help wear them too. .sv-container, .sv-section, .sv-btn and
    .sv-badge are utilities.
*/

.sv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sv-space-7);
  align-items: center;
  padding: var(--sv-space-7) 0;
}

/* Full-bleed horizontal bands. A band is a sibling of .sv-container, never a
   parent of one, so the tint reaches the viewport edge while the content stays
   on the 1120px measure. */
.sv-band {
  border-top: 1px solid var(--sv-border-subtle);
  border-bottom: 1px solid var(--sv-border-subtle);
  background: var(--sv-bg);
}

.sv-band--tint { background: var(--sv-bg-overlay); }

/*
  The inverted band. Applied together with data-theme="dark" on the same
  element, which re-declares every --sv-* token for that subtree - so the
  content inside needs no dark-specific class of its own. This is the design
  system's two-mode model used as a compositional device rather than a setting.
*/
.sv-band--ink {
  background: var(--sv-bg);
  border-color: var(--sv-border);
}

.sv-display--hero {
  font: 600 clamp(34px, 5.4vw, 58px) / 1.02 var(--sv-font-sans);
  letter-spacing: -0.035em;
}

.sv-section-lead {
  font: 400 16px/1.6 var(--sv-font-sans);
  color: var(--sv-text-secondary);
  max-width: 62ch;
  margin-top: var(--sv-space-3);
}

.sv-hero--landing {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--sv-space-6);
  align-items: center;
  padding: var(--sv-space-7) 0;
}

/* A row of headline facts under the call to action. Measured values, so mono -
   the same rule that governs a KPI tile governs a marketing statistic.
   auto-fit rather than flex-wrap: three facts in one hero column are too tight
   to wrap gracefully, and a lone orphan on a second line reads as a mistake.

   ITS OWN NAME, because .sv-facts is the app's label-and-value list and eleven
   screens set it. Two components under one name meant this one, loaded later,
   putting a top border and a 122px track on every panel of pairs in the
   product. */
.sv-hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: var(--sv-space-4);
  margin-top: var(--sv-space-6);
  padding-top: var(--sv-space-4);
  border-top: 1px solid var(--sv-border-subtle);
}

.sv-hero-fact { display: flex; flex-direction: column; gap: 3px; }

.sv-hero-fact__value {
  font: 400 21px/1.1 var(--sv-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sv-text);
}

.sv-hero-fact__label {
  font: 500 10px/1.2 var(--sv-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sv-text-tertiary);
}

/* ── The canvas figure ────────────────────────────────────────────────────
   A photograph of a real site with the array drawn over it in the same tokens
   the design canvas uses. The overlay is SVG, so it stays correct in both
   modes and at any width; the photograph is the only part that is a file.
   ------------------------------------------------------------------------ */

.sv-figure {
  /* A BORDERED PANEL, NOT A DOCUMENT FIGURE: the browser's own 40px side indent is what a figure
     in prose wants and has nothing to do with a surface that draws its own border. */
  margin: 0;
  position: relative;
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-panel);
  overflow: hidden;
  box-shadow: var(--sv-shadow-panel);
}

/*
  The photograph sits in a background-image rather than an <img>, so a missing
  file degrades to --sv-map-canvas - the token for exactly this surface, the
  ground behind imagery that has not loaded - instead of a broken-image glyph.
  The overlay above it still reads. Ship the file and it fills in; forget to
  and the page is merely plainer, never broken.
*/
.sv-figure__photo {
  position: absolute;
  inset: 0;
  background-color: var(--sv-map-canvas);
  background-image: url('../images/marketing/hero-site-aerial.webp');
  background-size: cover;
  background-position: center;
}

/* Photography is not a design surface: it carries its own contrast, so the
   overlay's thin strokes need a consistent ground to sit on. A flat scrim,
   not a gradient. */
.sv-figure__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--sv-bg) 22%, transparent);
}

.sv-figure__overlay {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.sv-figure__readout {
  position: absolute;
  left: var(--sv-space-4);
  bottom: var(--sv-space-4);
  right: var(--sv-space-4);
  max-width: 340px;
  padding: var(--sv-space-3) var(--sv-space-4);
  border-radius: var(--sv-radius-card);
  border: 1px solid var(--sv-border);
  background: color-mix(in srgb, var(--sv-bg-raised) 92%, transparent);
  backdrop-filter: blur(6px);
}

.sv-readout__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-3);
  padding: 3px 0;
}

.sv-readout__row + .sv-readout__row {
  border-top: 1px solid var(--sv-border-subtle);
}

.sv-readout__value {
  font: 400 15px/1.2 var(--sv-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sv-text);
}

/* ── Proof strip ──────────────────────────────────────────────────────────── */

.sv-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-3) var(--sv-space-5);
  padding: var(--sv-space-4) 0;
}

.sv-strip__item {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  font: 500 10px/1.2 var(--sv-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sv-text-tertiary);
}

.sv-strip__item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sv-accent-fill);
  flex: none;
}

/* ── Numbered steps ───────────────────────────────────────────────────────── */

.sv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sv-space-4);
  margin-top: var(--sv-space-6);
}

.sv-step {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  padding-top: var(--sv-space-4);
  border-top: 2px solid var(--sv-accent-fill);
}

.sv-step__num {
  font: 400 26px/1 var(--sv-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sv-text-faint);
}

/* ── Loss waterfall ───────────────────────────────────────────────────────
   The report's spine, drawn as CSS bars. Charts on this page are never a
   library and never a bitmap: a bar is a div with a width, it prints, and it
   inherits the mode it is placed in.
   ------------------------------------------------------------------------ */

.sv-wf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sv-space-6);
  margin-top: var(--sv-space-5);
}

.sv-wf__col { display: flex; flex-direction: column; gap: 0; }

.sv-wf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-3);
  padding-bottom: var(--sv-space-2);
  border-bottom: 1px solid var(--sv-border);
  margin-bottom: var(--sv-space-2);
}

/*
  Two lines per step, not four columns. Step names run from "POA Irradiance" to
  "Output at Irradiance Levels", and squeezing those into a fixed column either
  truncates the long ones or wastes half the row on the short ones. Label and
  value share the first line; the bar spans the full width beneath.
*/
.sv-wf__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px var(--sv-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--sv-border-subtle);
}

.sv-wf__name {
  grid-column: 1;
  font: 400 12.5px/1.35 var(--sv-font-sans);
  color: var(--sv-text-secondary);
  min-width: 0;
}

/* The rows that close a stage - Total Collector Irradiance, Optimal DC Output,
   Energy to Grid - are results, not losses, and are weighted accordingly. */
.sv-wf__row--total .sv-wf__name { color: var(--sv-text); font-weight: 500; }
.sv-wf__row--total { border-bottom-color: var(--sv-border); }

/* Two segments on one rail, so the row shows both what survived and what this step took. */
.sv-wf__track {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  height: 7px;
  border-radius: 2px;
  background: var(--sv-chart-track);
  overflow: hidden;
}

/*
  --sv-module-edge, not --sv-chart-loss. In dark mode the loss token is #2B3B4B and the track behind
  it is #1B2735 - two values a fifth of a step apart, which is why fifteen bars on an inked band read
  as one flat rectangle and the section looked as though only the amber rows meant anything. The
  module tokens are the product's DATA family and the edge variant is the one chosen to stay legible
  against a surface in both modes, which is exactly this job. It is not a second brand colour: the
  same rule already governs the chart lines on the component pages and the six tones of the loss
  donut.
*/
.sv-wf__bar {
  height: 100%;
  flex: 0 0 auto;
  background: var(--sv-module-edge);
}

/* What this step moved. Muted against the bar so the eye reads the descent first and the cost
   second, but distinct enough that an 8.6 % step and a 0.1 % step are not the same picture. */
.sv-wf__step-delta {
  height: 100%;
  flex: 0 0 auto;
  background: var(--sv-chart-loss);
}

/* A gain, not a negative loss - step 2, where a tilted plane collects more than a flat one. It gets
   the accent as a FILL because it is a shape, and it is the one place in this chart where amber
   marks something other than a chain total. */
.sv-wf__step-delta--gain {
  background: var(--sv-accent-fill);
  opacity: 0.55;
}

.sv-wf__row--total .sv-wf__bar { background: var(--sv-chart-bar); }

.sv-wf__value {
  grid-column: 2;
  font: 400 12px/1.2 var(--sv-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sv-text);
  white-space: nowrap;
}

.sv-wf__delta {
  font: 400 11px/1.2 var(--sv-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sv-text-tertiary);
  margin-left: 6px;
}

.sv-wf__step {
  font: 400 11px/1.2 var(--sv-font-mono);
  color: var(--sv-text-faint);
  margin-right: 7px;
}

/* SVG text is painted with fill, not color, so the label utilities do not reach
   it. The compass and scale bar on the canvas figure get their own rule. */
.sv-figure__mark {
  font: 500 10px/1 var(--sv-font-mono);
  letter-spacing: 0.14em;
  fill: var(--sv-text-secondary);
}

/* The compass and scale bar sit on photography, whose tone is whatever the site
   happens to be, so they carry a plate rather than trusting the ground. */
.sv-figure__plate {
  fill: color-mix(in srgb, var(--sv-bg-raised) 88%, transparent);
  stroke: var(--sv-border);
  stroke-width: 1;
}

/* ── Load-shedding stage strip ────────────────────────────────────────────── */

.sv-stages {
  display: flex;
  gap: 3px;
  margin-top: var(--sv-space-3);
}

.sv-stage {
  flex: 1 1 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--sv-chart-track);
  font: 500 10px/1 var(--sv-font-mono);
  color: var(--sv-text-tertiary);
}

.sv-stage--covered {
  background: var(--sv-accent-fill);
  color: var(--sv-on-accent);
}

/* ── Document device ──────────────────────────────────────────────────────── */

.sv-doc {
  margin-top: var(--sv-space-3);
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-border);
  border-radius: 4px;
  background: var(--sv-bg-overlay);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sv-doc__line {
  height: 5px;
  border-radius: 2px;
  background: var(--sv-chart-track);
}

.sv-doc__line--filled { background: var(--sv-accent-wash); border: 1px solid var(--sv-accent-fill); height: 7px; }

.sv-sheet-mini {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 210 / 297;
  padding: 26px;
  background: var(--sv-bg-raised);
  border: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow-sheet);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* THE SHEET IS A MINIATURE, so its spacings are the miniature's own and not the
   design system's steps - 2px between a heading and the figure under it, 5px
   between the rows below. They are named here rather than written into the
   markup, where two raw pixel lengths read as an oversight. */
.sv-sheet-mini__headline {
  margin: 2px 0 0;
}

.sv-sheet-mini__rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sv-sheet-mini__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 84px;
}

.sv-sheet-mini__bars > i {
  flex: 1 1 0;
  background: var(--sv-chart-bar);
  border-radius: 1px;
}

.sv-sheet-mini__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.sv-sheet-mini__lines > i {
  display: block;
  height: 5px;
  border-radius: 2px;
  background: var(--sv-chart-loss);
}

.sv-sheet-mini__lines > i:last-child { background: var(--sv-chart-bar); }

.sv-sheet-mini__foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sv-border-subtle);
  font: 500 8px/1.3 var(--sv-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-text-tertiary);
}

/* ── Closing call to action ───────────────────────────────────────────────── */

.sv-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sv-space-5);
  padding: var(--sv-space-6);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-panel);
  background: var(--sv-bg-raised);
}

@media (max-width: 900px) {
  .sv-hero--landing { grid-template-columns: 1fr; }
  .sv-figure__readout { position: static; max-width: none; margin: 0; border: 0; border-top: 1px solid var(--sv-border); border-radius: 0; backdrop-filter: none; }
  .sv-wf { gap: var(--sv-space-5); }
  .sv-wf__row { grid-template-columns: minmax(0, 1fr) 56px 62px; }
}

/* THE HERO STACKS BELOW 900px, and the rule lives here rather than in a shared responsive block:
   a breakpoint about this page that this page's own stylesheet does not carry is a rule nobody
   reading the page will find. */
@media (max-width: 900px) {
  .sv-hero {
    grid-template-columns: 1fr;
  }
}

/* ── The gaps the page used to state in its markup ────────────────────────────
   Thirty-one inline margins, most of them one of four shapes repeated three or
   four times down the page. Each is a property of a composition this file
   already draws - an eyebrow over a heading, a feature card, the readout, the
   sheet miniature - so each is named once here.
   ------------------------------------------------------------------------ */

/* AN EYEBROW OVER A HEADING. Four headings on this page wear a badge above them,
   and the step under it belongs to the pair rather than to each heading. */
.sv-badge + .sv-display--hero {
  margin: var(--sv-space-4) 0;
}

.sv-badge + .sv-h2 {
  margin-top: var(--sv-space-4);
}

/* The call to action stands away from the sentence that earns it. */
.sv-hero .sv-lead + .sv-row {
  margin-top: var(--sv-space-5);
}

/* The readout's caption, above the rows it labels. A margin rather than the
   container's gap: the rows carry a rule between them and a gap would break it. */
.sv-figure__readout > .sv-label {
  margin: 0 0 var(--sv-space-2);
}

/* Under the waterfall, what the figures on it are. */
.sv-wf + .sv-label {
  margin-top: var(--sv-space-5);
}

/* A FEATURE CARD IS FIVE THINGS IN A COLUMN - its index, what it is, what it
   does, a picture of it, and what the picture shows - and the three cards each
   stated the same four gaps. The picture keeps its own margin, because .sv-doc
   and .sv-stages are drawings rather than prose and stand further off. */
.sv-grid--cards > .sv-card > .sv-h3 {
  margin: var(--sv-space-2) 0;
}

.sv-grid--cards > .sv-card > p {
  margin: 0;
}

.sv-grid--cards > .sv-card > p.sv-label {
  margin-top: var(--sv-space-2);
}

/* The two blocks that follow the feature grid: the pair of photographs, and on
   the deliverable band the list and the note under it. */
.sv-section-lead + .sv-grid--cards {
  margin-top: var(--sv-space-6);
}

.sv-grid--cards + .sv-grid {
  margin-top: var(--sv-space-5);
}

.sv-section-lead + .sv-points {
  margin-top: var(--sv-space-5);
}

.sv-points + .sv-small {
  margin-top: var(--sv-space-5);
}

/* THE MINIATURE IS A DRAWING OF A SHEET. Nothing in it flows as prose, so no
   paragraph in it carries a paragraph's margin; the sheet's own column states
   every gap, and .sv-sheet-mini__headline states the two-pixel one it does not. */
.sv-sheet-mini p {
  margin: 0;
}

/* The closing statement, under the heading it belongs to. */
.sv-cta p {
  margin: var(--sv-space-3) 0 0;
}