/* ==========================================================================
   Proxima Power — landing page
   Committed single-theme design: white page, dark navy ink, blue accent.
   Every color is painted explicitly so the page holds on any host ground.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --paper-raised: #f6f9fd;
  --ink: #0e2340;
  --ink-dim: #3f5a7d;
  --ink-faint: #7389a6;
  --line: #dbe3ee;
  --line-strong: #b6c4d8;
  --accent: #1257c4;
  --accent-hover: #0e46a0;
  --accent-ink: #ffffff;
  --accent-soft: #dde8fb;
  --gain: #1257c4;
  --phase: #00a39b;

  /* Studio pool behind the product photo. The outermost stop is exactly
     --paper-raised, so the edges of the photo frame are the same colour as the
     plot panels next to it; the falloff is spread over several stops so it
     reads as a gradient rather than a disc with a visible rim. */
  --panel-surface: radial-gradient(ellipse 78% 72% at 50% 44%,
      #ffffff 0%,
      #ffffff 24%,
      #fcfdff 48%,
      #f9fbfe 70%,
      #f7fafe 87%,
      #f6f9fd 100%);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --max-width: 1040px;
  --radius: 3px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

.mono { font-family: var(--font-mono); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phase);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* -- document chrome -- */
.doc-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.doc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.doc-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

/* -- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
  padding: 9px 18px;
  font-size: 0.85rem;
}

.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-full { width: 100%; }

/* -- hero -- */
.hero { padding: 56px 0 48px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.eyebrow { margin-bottom: 18px; }

.hero h1 {
  font-size: clamp(2rem, 3.7vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.hero h1 em { font-style: normal; color: var(--accent); }

.hero-sub {
  color: var(--ink-dim);
  font-size: 1.1rem;
  max-width: 48ch;
  margin: 0 0 28px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.price {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.price-note {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.microcopy {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin: 14px 0 0;
}

/* -- bode plot panel -- */
.plot-panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 16px 12px;
}

/* No text-transform here: uppercasing turns the micro sign (µ) into Greek
   capital Mu, which reads as "M" — i.e. "10 µHz" would render as "10 MHz". */
.plot-panel-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.plot-panel svg { display: block; width: 100%; height: auto; }

/* -- sections -- */
.section { padding: 56px 0; border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.section-head h2 { font-size: 1.45rem; }

.section-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* -- figures: product photo + waveform panel -- */
.figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.figure-grid--single { grid-template-columns: 1fr; }

.figure { margin: 0; }

/* The frame carries the surface and the border; the image is scaled up inside
   it so the product fills the frame instead of sitting in ~23% dead transparent
   margin. overflow:hidden crops that overflow, and keeps the drop-shadow from
   spilling outside the border. */
.figure-frame {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.figure-frame img {
  display: block;
  width: 100%;
  height: auto;
  /* The device sits low in the source PNG (content spans y 121-582 of 675), so
     scaling about the centre left 35px of headroom and only 7px underneath.
     The translate re-centres it, biased slightly high to leave room for the
     drop-shadow below. Recompute both if the source render is ever re-exported. */
  transform: translateY(-4.3%) scale(1.22);
  /* Two layers: a wide ambient shadow for the lift, and a tight contact shadow
     so the instrument sits on the surface instead of floating. Kept light --
     a single heavy shadow read as a dark smudge against the pale pool. */
  filter: drop-shadow(0 10px 24px rgba(14, 35, 64, 0.13))
          drop-shadow(0 2px 5px rgba(14, 35, 64, 0.09));
}

.figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* -- company statement -- */
.about-strip {
  border-top: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 26px 0;
}

.about-strip p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 1rem;
  /* No max-width here on purpose. A 70ch cap is the right call for a paragraph
     you read line after line, but this is a single statement meant to sit on
     one line — the cap was forcing it to wrap at ~623px when the sentence
     needs ~799px and the container offers 1040px. It still wraps below about
     an 865px viewport, which is unavoidable. */
  /* Hanging indent: without this, a wrapped second line starts flush left,
     unaligned with the text after the bullet on the first line — reads as a
     broken sentence rather than one flowing line. text-indent pulls the
     first line (bullet + text) back by the same amount padding-left reserves
     for every line, so wrapped lines land under "Proxima", not under "›".
     The marker's width below must match this value exactly, or the two
     indents disagree and the gap after the bullet looks wrong instead. */
  padding-left: 1.15em;
  text-indent: -1.15em;
}

.about-strip p::before {
  content: "\203A";
  display: inline-block;
  width: 1.15em;
  color: var(--accent);
  font-weight: 600;
}

/* -- spec table -- */
.table-scroll { overflow-x: auto; }

.spec-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.spec-table th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--line-strong);
}

.spec-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.spec-table tr:last-child td { border-bottom: none; }

.spec-table td.param { color: var(--ink); font-weight: 600; white-space: nowrap; }
.spec-table td.value { color: var(--accent); font-weight: 600; white-space: nowrap; }
.spec-table td.value sub { font-size: 0.75em; }
.spec-table td.note { color: var(--ink-dim); font-family: var(--font-body); font-size: 0.95rem; }

/* -- waitlist -- */
.waitlist-shell {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.waitlist-copy h2 { font-size: 1.5rem; margin-bottom: 12px; }
.waitlist-copy p { color: var(--ink-dim); margin: 0 0 18px; }

.waitlist-copy ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-dim);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.waitlist-copy li {
  /* Same hanging-indent fix as .about-strip, and the same rule: this value
     must match the marker's width below. */
  padding-left: 1.15em;
  text-indent: -1.15em;
}

.waitlist-copy li::before {
  content: "\203A";
  display: inline-block;
  width: 1.15em;
  color: var(--accent);
  font-weight: 600;
}

.waitlist-form { display: flex; flex-direction: column; gap: 4px; }

.waitlist-form label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 14px;
}

.waitlist-form input[type="text"],
.waitlist-form input[type="email"] {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
}

.waitlist-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.waitlist-form button { margin-top: 22px; }

.hidden-field { display: none; }

/* -- footer -- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.thank-you { padding-top: 80px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .figure-grid { grid-template-columns: 1fr; gap: 28px; }
  .waitlist-shell { grid-template-columns: 1fr; padding: 26px; }
}

/* On a phone the spec table is the content people came for, so it stacks into
   readable blocks rather than sitting in a sideways-scrolling box. */
@media (max-width: 700px) {
  .hero { padding: 36px 0 40px; }
  .section { padding: 40px 0; }
  .doc-meta { display: none; }

  .table-scroll { overflow-x: visible; }
  .spec-table { min-width: 0; }
  .spec-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; width: 100%; }
  .spec-table tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .spec-table tr:last-child { border-bottom: none; }
  .spec-table td { padding: 0; border-bottom: none; white-space: normal; }
  .spec-table td.param {
    font-family: var(--font-body);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
  }
  .spec-table td.value { font-size: 1.2rem; margin: 2px 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}