/* ============================================================================
   ouRGeo — marketing page components
   ----------------------------------------------------------------------------
   The hero, feature grid, download cards, policy body and version-history
   timeline: the pieces that exist only on index / features / download /
   versions / privacy and have no business in the shared design system.

   Everything those pages used to declare that site.css or docs.css ALREADY
   declares has been dropped rather than copied here. That was not tidying — the
   inline copies had fallen behind. They still said `border-radius: 16px` and
   `text-transform: uppercase` where site.css now says var(--radius) and
   var(--display-transform), so the marketing pages were silently ignoring the
   theme's corner radius and letter case. Deleting the stale duplicates is what
   makes them themeable.

   Linked AFTER site.css and docs.css, so anything here still wins.
   ========================================================================== */

.hero { text-align: center; padding: 30px 18px 26px; border-bottom: 1px solid rgb(var(--water-rgb) / 0.14); margin-bottom: 26px; }
.hero-logo-wrap { width: 140px; margin: 0 auto 18px; filter: drop-shadow(0 0 26px rgb(var(--water-rgb) / 0.28)); }
.hero-logo { display: block; width: 100%; height: auto; clip-path: ellipse(48.9% 48.4% at 50% 49.35%); }
.hero h1 { font-family: var(--font-display); font-size: 2.7rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-strong); text-shadow: 0 0 26px rgb(var(--water-rgb) / 0.45); margin-bottom: 12px; }
.hero h1 .r { color: var(--aqua); }
.hero .tagline { font-size: 1.1rem; color: var(--text); max-width: 660px; margin: 0 auto 6px; line-height: 1.6; }
.hero .subline { font-size: 0.95rem; color: var(--muted); max-width: 620px; margin: 10px auto 0; line-height: 1.6; }
.hero-rule { width: 150px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--aqua)); margin: 20px auto 0; box-shadow: 0 0 12px rgb(var(--water-rgb) / 0.6); border-radius: 2px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.feature-item { background: rgb(var(--water-rgb) / 0.04); border-radius: 10px; padding: 18px 16px;       border: 1px solid rgb(var(--water-rgb) / 0.15); text-align: left;       transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.feature-item:hover { border-color: var(--water); transform: translateY(-2px); box-shadow: 0 0 18px rgb(var(--water-rgb) / 0.15); }
.feature-item .icon { font-size: 26px; display: block; margin-bottom: 10px; }
.feature-item strong { display: block; font-family: var(--font-display); font-size: 0.82rem; color: var(--water); letter-spacing: 0.03em; margin-bottom: 6px; }
.feature-item span { font-size: 0.86rem; color: var(--text); line-height: 1.5; }
.feature-item a.more { display: inline-block; margin-top: 8px; font-size: 0.78rem; color: var(--aqua); text-decoration: none; font-weight: 600; }
.feature-item a.more:hover { text-decoration: underline; }
table.cmp .col-ours { background: rgb(var(--aqua-rgb) / 0.05); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.page-head .ver { display: inline-block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--aqua); border: 1px solid rgb(var(--aqua-rgb) / 0.35); border-radius: 999px; padding: 4px 14px; }
/* The version-history pointer under the release badge in .page-head. Its own
   line rather than beside the badge: the badge is a pill and this is a link,
   and at phone width they wrap into each other. */
.page-head .ver-links { margin: -4px 0 14px; font-size: 0.85rem; }
.page-head .ver-links a { color: var(--aqua); text-decoration: none; }
.page-head .ver-links a:hover { color: var(--water); text-decoration: underline; }
.download-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 8px; }
.download-card { background: linear-gradient(180deg, rgb(var(--water-rgb) / 0.07), rgb(var(--panel-rgb) / 0.85));       border-radius: 14px; padding: 24px 20px; border: 1px solid rgb(var(--water-rgb) / 0.28);       text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center;       transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s; }
a.download-card:hover { border-color: var(--water); box-shadow: 0 0 28px rgb(var(--water-rgb) / 0.28); transform: translateY(-3px); }
.download-card .os-icon { font-size: 42px; display: block; margin-bottom: 10px; }
.download-card .os-name { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-strong); letter-spacing: 0.04em; margin-bottom: 3px; }
.download-card .os-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; }
.download-card .file-ext { font-family: var(--font-mono); font-size: 1.05rem; color: var(--aqua); margin-bottom: 4px; }
.download-card .file-size { font-size: 0.78rem; color: var(--muted); }
.download-card .dl-btn { margin-top: 16px; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;       color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--aqua)); padding: 10px 20px; border-radius: 9px; }
.download-card.soon { opacity: 0.72; filter: grayscale(0.3); cursor: default; }
.download-card.soon .coming { margin-top: 16px; font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--route); border: 1px solid rgb(var(--route-rgb) / 0.5); border-radius: 999px; padding: 8px 16px; }
.req-list { list-style: none; padding: 0; margin-top: 6px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.req-list li { font-size: 0.95rem; color: var(--text); padding-left: 22px; position: relative; line-height: 1.5; }
.req-list li::before { content: "▸"; color: var(--water); position: absolute; left: 4px; top: 0; }
.policy-body { background:         repeating-linear-gradient(0deg, transparent 0 39px, rgb(var(--water-rgb) / 0.04) 39px 40px),         repeating-linear-gradient(90deg, transparent 0 39px, rgb(var(--water-rgb) / 0.04) 39px 40px),         var(--map-deep);       border-radius: 14px; padding: 32px 34px 36px; border: 1px solid rgb(var(--water-rgb) / 0.16);       box-shadow: inset 0 0 60px rgb(var(--water-rgb) / 0.05); position: relative; }
.policy-body::before, .policy-body::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid rgb(var(--water-rgb) / 0.5); }
.policy-body::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.policy-body::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.policy-body h1 { font-family: var(--font-display); font-size: 1.7rem; color: var(--water); letter-spacing: 0.04em; margin-bottom: 6px; }
.effective-date { font-size: 0.85rem; color: var(--muted); margin-bottom: 26px; }
.policy-body h2 { font-family: var(--font-display); font-size: 0.9rem; color: var(--water); text-transform: uppercase; letter-spacing: 0.08em; margin: 28px 0 10px; display: flex; align-items: center; gap: 12px; }
.policy-body h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(var(--water-rgb) / 0.3), transparent); }
.policy-body h3 { font-family: var(--font-display); font-size: 0.82rem; color: var(--aqua); letter-spacing: 0.04em; margin: 20px 0 8px; font-weight: 500; }
.policy-body p { color: var(--text); line-height: 1.8; font-size: 0.97rem; margin-bottom: 14px; }
.policy-body p:last-child { margin-bottom: 0; }
.policy-body a { color: var(--aqua); text-decoration: none; }
.policy-body a:hover { color: var(--water); }
.policy-body code { font-family: var(--font-mono); font-size: 0.88em; color: var(--aqua); }
.callout { background: rgb(var(--aqua-rgb) / 0.06); border-left: 3px solid var(--aqua); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 22px 0; color: var(--text-strong); font-size: 0.97rem; line-height: 1.7; }

@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: 2rem; }
  .features { grid-template-columns: 1fr; }
  .download-cards { grid-template-columns: 1fr; }
  .req-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .policy-body { padding: 22px 18px; }
  .policy-body h1 { font-size: 1.3rem; }
}

/* ── Version history (ourgeo-versions.html) ─────────────────────────────────
   Generated by tools/versions/gen_versions.py from the app's own release
   notes. Two states, and the whole page turns on telling them apart: a
   `.shipped` release is an installer somebody can download, everything else is
   a milestone whose work arrived inside one of those. So the distinction is
   carried by border, ground and rail colour rather than by the tag alone —
   a tag is a word you have to read, and the point is to see it while
   scrolling.
   ------------------------------------------------------------------------- */

.release-list { position: relative; margin: 6px 0 22px; }

/* The rail the releases hang off. Left of the cards on a wide screen, gone
   entirely when they go full width — see the narrow rules at the bottom. */
.release-list::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg,
    rgb(var(--water-rgb) / 0.45), rgb(var(--water-rgb) / 0.12));
}

.release {
  position: relative; margin-left: 30px; margin-bottom: 16px;
  background: rgb(var(--water-rgb) / 0.04);
  border: 1px solid rgb(var(--water-rgb) / 0.15);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
}

/* The station mark on the rail, aligned with the release number's line. */
.release::before {
  content: ""; position: absolute; left: -27px; top: 24px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-1); border: 1px solid var(--water);
}

.release.shipped {
  background: linear-gradient(180deg,
    rgb(var(--aqua-rgb) / 0.08), rgb(var(--panel-rgb) / 0.55));
  border-color: rgb(var(--aqua-rgb) / 0.45);
  box-shadow: 0 0 22px rgb(var(--aqua-rgb) / 0.10);
}
.release.shipped::before {
  background: var(--aqua); border-color: var(--aqua);
  box-shadow: 0 0 10px rgb(var(--aqua-rgb) / 0.8);
}

.release:target { border-color: var(--water); }

.rel-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.rel-num {
  font-family: var(--font-mono); font-size: 1.05rem; color: var(--water);
  flex: none; min-width: 74px;
}
.release.shipped .rel-num { color: var(--aqua); font-weight: 600; }
.rel-id { flex: 1 1 260px; }
.rel-id h2 {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--text-strong);
  letter-spacing: var(--display-tracking); text-transform: var(--display-transform);
  margin: 0;
}
.rel-date { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }

.rel-tag {
  flex: none; font-family: var(--font-display); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--aqua));
  border-radius: 999px; padding: 5px 13px;
}
.rel-tag.milestone {
  color: var(--muted); background: none;
  border: 1px solid rgb(var(--muted-rgb) / 0.35);
}

.rel-summary { color: var(--text); line-height: 1.7; font-size: 0.95rem; margin: 0 0 10px; }
.release.shipped .rel-summary { color: var(--text-strong); }

.rel-points { list-style: none; padding: 0; margin: 0; }
.rel-points li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  font-size: 0.9rem; color: var(--text); line-height: 1.65;
}
.rel-points li:last-child { margin-bottom: 0; }
.rel-points li::before {
  content: "▸"; position: absolute; left: 2px; top: 0; color: var(--water);
}
.release.shipped .rel-points li::before { color: var(--aqua); }

/* Narrow screens: the rail costs 30px of text width and says nothing the
   cards do not, so it goes rather than being squeezed. */
@media (max-width: 720px) {
  .release-list::before { display: none; }
  .release { margin-left: 0; }
  .release::before { display: none; }
  .rel-num { min-width: 0; }
}