/* ============================================================================
   pages.css — page-level composition
   Hero, workflow, downloads, support, release notes, legal, 404
   ========================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* Top padding is deliberately tighter than the bottom: the sticky header
   already provides visual separation, so a large gap above the eyebrow just
   reads as dead space. */
.hero { padding-block: var(--sp-10) var(--sp-16); position: relative; overflow: hidden; }
.hero::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(900px, 90%); height: 1px;
  background: var(--g-rule);
}
.hero__inner { display: grid; gap: var(--sp-16); align-items: center; }

/* The copy block is centred and the screenshot runs full width beneath it, so
   the application itself gets the largest possible presentation. */
.hero__copy { max-width: 860px; margin-inline: auto; text-align: center; }
.hero__copy .eyebrow { justify-content: center; }
.hero h1 { margin-bottom: var(--sp-6); }
.hero__lede { font-size: var(--fs-md); color: var(--c-text-2); max-width: 660px; margin-inline: auto; }
.hero .btn-row { margin-top: var(--sp-8); justify-content: center; }

.hero__platforms {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.hero__platforms .badge { margin-right: 2px; }

/* .hero__meta / .hero__stat — the VERSION / RUNS / PROJECTS strip.
   The markup was removed from index.html; these rules are retained so the
   block can be reinstated later without rewriting any CSS. */
.hero__meta {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-10);
  max-width: 640px;
  margin-inline: auto;
}
.hero__stat { align-items: center; text-align: center; }
.hero__stat { display: flex; flex-direction: column; gap: 3px; }
.hero__stat dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--c-text-4);
}
.hero__stat dd { font-size: var(--fs-sm); color: var(--c-text); font-weight: 600; }

/* ── Feature overview ─────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5); }

/* ── How it works ─────────────────────────────────────────────────────── */
/* Every step tile is the same height regardless of how much text it holds.
   `grid-auto-rows: 1fr` makes all rows equal, and the default `stretch`
   alignment then fills each tile to its row — so a one-line step matches a
   three-line one. Single-column layouts undo this in responsive.css, where
   uniform heights would just add dead space. */
.workflow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-6);
  grid-auto-rows: 1fr;
}

/* ── Benefits row (Built for better takeoffs) ─────────────────────────────
   Deliberately lighter than the feature cards above: no panel fill, just an
   icon, a hairline top rule that lights up in RoofDatum blue on hover, and the
   copy. Gives the page a second rhythm instead of a third grid of cards. */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8);
  list-style: none;
  padding: 0;
}
.benefit {
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border-2);
  transition: border-color var(--t-med) var(--ease);
}
.benefit:hover { border-top-color: var(--c-accent); }
.benefit__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  border: 1px solid rgba(11,132,255,0.22);
  color: var(--c-accent-hi);
}
.benefit__icon svg { width: 18px; height: 18px; }
.benefit h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.benefit p  { font-size: var(--fs-sm); color: var(--c-text-2); margin: 0; }

/* ── Professional-use notice ──────────────────────────────────────────── */
/* No max-width: the notice spans the full container so its left and right
   edges line up exactly with the platform cards in #requirements above. */
.use-notice { max-width: none; }

/* ── System requirements ──────────────────────────────────────────────── */
.requirements { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-6); }
.req-card { padding: 0; overflow: hidden; }
.req-card__head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.req-card__head h3 { font-size: var(--fs-md); margin: 0; }
.req-card__head .badge { margin-left: auto; }
.req-card__body { padding: var(--sp-6); }
.req-card__lead {
  font-size: var(--fs-md);
  color: var(--c-text);
  margin-bottom: var(--sp-5);
}
.req-list { display: grid; gap: var(--sp-3); list-style: none; padding: 0; }
.req-list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.req-list svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--c-accent-hi);
}

/* ── Final call to action ─────────────────────────────────────────────── */
.cta {
  position: relative;
  padding: var(--sp-16) var(--sp-10);
  text-align: center;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(11,132,255,0.13), transparent 70%),
    linear-gradient(180deg, var(--c-navy) 0%, var(--c-surface) 100%);
  box-shadow: var(--shadow-3), var(--ring);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
}
.cta h2 { margin-bottom: var(--sp-4); }
.cta p { max-width: 620px; margin-inline: auto; color: var(--c-text-2); }
.cta .btn-row { justify-content: center; margin-top: var(--sp-8); }
.cta__note { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--c-text-4); }

/* ── Page hero (interior pages) ───────────────────────────────────────── */
.page-hero {
  padding-block: var(--sp-16) var(--sp-12);
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(180deg, rgba(13,31,60,0.42), transparent);
}
.page-hero h1 { font-size: var(--fs-3xl); }
.page-hero p { margin-top: var(--sp-4); font-size: var(--fs-md); max-width: 680px; }

/* ── Downloads page ───────────────────────────────────────────────────── */
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-6); }

.dl-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.dl-card__head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.dl-card__head h2 { font-size: var(--fs-lg); margin: 0; }
.dl-card__head .badge { margin-left: auto; }
.dl-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); flex: 1; }
.dl-card__body .btn { margin-top: auto; }
.dl-card__state {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.dl-platform-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  border: 1px solid rgba(11,132,255,0.22);
  color: var(--c-accent-hi);
}
.dl-platform-icon svg { width: 21px; height: 21px; }

/* ── Support page ─────────────────────────────────────────────────────── */
.support-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-10); align-items: start; }

.faq { display: grid; gap: var(--sp-3); }
.faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--c-border-2); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  font-weight: 600;
  color: var(--c-text);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  width: 9px; height: 9px; flex-shrink: 0;
  border-right: 1.5px solid var(--c-text-3);
  border-bottom: 1.5px solid var(--c-text-3);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--t-med) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq__a { padding: 0 var(--sp-6) var(--sp-6); font-size: var(--fs-sm); }
.faq__a p + p { margin-top: var(--sp-3); }

.contact-card { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.contact-card dl { display: grid; gap: var(--sp-5); }
.contact-card dt {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--c-text-3); margin-bottom: 3px;
}
.contact-card dd { font-size: var(--fs-sm); color: var(--c-text); }

/* ── Release notes ────────────────────────────────────────────────────── */
.release { display: grid; gap: var(--sp-6); }
.release__item { padding: var(--sp-6) var(--sp-8); }
.release__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.release__version { font-family: var(--f-mono); font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); }
.release__date { font-size: var(--fs-xs); color: var(--c-text-4); font-family: var(--f-mono); }
.release__item ul { font-size: var(--fs-sm); }

/* ── Legal pages ──────────────────────────────────────────────────────── */
.legal { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-12); align-items: start; }
.legal__nav { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.legal__nav h4 {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--c-text-3); margin-bottom: var(--sp-4);
}
.legal__nav ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.legal__nav a {
  display: block; padding: 8px 12px; border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--c-text-2);
}
.legal__nav a:hover { background: var(--c-surface-2); color: var(--c-text); }
.legal__nav a[aria-current="page"] {
  background: var(--c-accent-soft); color: var(--c-accent-hi);
  box-shadow: inset 2px 0 0 var(--c-accent);
}

.legal__doc { max-width: 760px; }
.legal__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  font-size: var(--fs-xs);
}
.legal__meta div { display: flex; flex-direction: column; gap: 3px; }
.legal__meta dt, .legal__meta .k {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--c-text-4);
}
.legal__meta .v { color: var(--c-text); font-family: var(--f-mono); }

/* The slot approved legal wording drops into. Styled and ready; empty today. */
.legal__slot {
  border: 1px dashed var(--c-border-2);
  border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}
.legal__slot h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.legal__slot p { max-width: 520px; margin-inline: auto; font-size: var(--fs-sm); }
.legal__slot .badge { margin-bottom: var(--sp-6); }

/* Typography for approved legal wording once it is inserted into .legal__doc. */
.legal__doc h2 { font-size: var(--fs-xl); margin-top: var(--sp-12); margin-bottom: var(--sp-4); }
.legal__doc h3 { font-size: var(--fs-md); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.legal__doc p, .legal__doc li { font-size: var(--fs-sm); }
.legal__doc p + p { margin-top: var(--sp-4); }
.legal__doc ol, .legal__doc ul { margin-top: var(--sp-4); }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.notfound { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--sp-20); }
.notfound__code {
  font-family: var(--f-mono);
  font-size: clamp(72px, 16vw, 150px);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, #1e3454, #0d1f3c);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.03em;
}
.notfound h1 { margin-top: var(--sp-6); font-size: var(--fs-2xl); }
.notfound p { margin-top: var(--sp-4); }
.notfound .btn-row { justify-content: center; margin-top: var(--sp-8); }

/* ── Small shared bits ────────────────────────────────────────────────── */
.lede { font-size: var(--fs-md); color: var(--c-text-2); }
.fine { font-size: var(--fs-xs); color: var(--c-text-4); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }