/* Skullaroo — public marketing/legal pages (/about, /product, /contact,
   /privacy, /terms). Deliberately plain: static HTML, no JavaScript required,
   no React, no app dependency. A reviewer (or a crawler) with scripting off
   still gets the whole page. Tokens are lifted verbatim from teaser.html so
   these read as the same brand.

   These pages outlive the PWA — when the app moves to native, this is the only
   part of this repo that carries over unchanged. Keep it dependency-free. */

:root {
  --ink-950: #081109;
  --green-900: #0c3c24;
  --brand: #0e7a43;
  --volt: #c8f03a;
  --text: #eaf7ee;
  --muted: rgba(234, 247, 238, 0.62);
  --faint: rgba(234, 247, 238, 0.32);
  --rule: rgba(234, 247, 238, 0.12);
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink-950);
  background-image: radial-gradient(120% 70% at 50% -10%, #174b31 0%, #0c1c13 42%, var(--ink-950) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  padding: 18px clamp(20px, 5vw, 40px);
}
.site-head__in {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}
.brand svg { width: 26px; height: 26px; flex: none; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand__word .k { color: var(--volt); }
.site-nav {
  display: flex;
  gap: clamp(14px, 3vw, 24px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav a { color: var(--muted); text-decoration: none; padding: 6px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--volt); }

/* ---------- page body ---------- */

main {
  flex: 1;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(36px, 7vw, 64px) clamp(20px, 5vw, 40px) 64px;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--volt);
  margin-bottom: 14px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 34px;
  max-width: 60ch;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 42px 0 12px;
}
h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0;
  margin: 28px 0 8px;
}
p { margin: 0 0 18px; max-width: 68ch; }
a { color: var(--volt); text-underline-offset: 3px; }
ul, ol { max-width: 68ch; padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 8px; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

.mono { font-family: var(--mono); }
.updated {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 32px;
}

/* A framed aside — used for the plain-English privacy summary and the
   contact card. Quiet, not a callout box that shouts. */
.panel {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--volt);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.028);
  padding: 22px clamp(18px, 4vw, 26px);
  margin: 0 0 32px;
}
.panel > :last-child { margin-bottom: 0; }
.panel h2 { margin-top: 0; font-size: 1.12rem; }

.addr {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.75;
  font-style: normal;
  margin: 0 0 18px;
}

/* ---------- footer ---------- */
/* Required by the Apple Developer Program organization review: the legal
   entity, a real postal address, and a working business email, reachable
   with no login from every page. Do not abbreviate the entity name. */

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 26px clamp(20px, 5vw, 40px) calc(28px + env(safe-area-inset-bottom));
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: rgba(234, 247, 238, 0.3);
}
.site-foot__in { max-width: 780px; margin: 0 auto; }

/* Navigation first and legible — these links are how a reviewer reaches the
   company pages, so they are the one part of the footer that must not recede. */
.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-foot__links a { color: rgba(234, 247, 238, 0.66); text-decoration: none; }
.site-foot__links a:hover { color: var(--volt); }
.site-foot__links span[aria-current] { color: rgba(234, 247, 238, 0.32); }

.site-foot__org { font-style: normal; }
.site-foot__name { color: rgba(234, 247, 238, 0.52); }
.site-foot__contact a { color: rgba(234, 247, 238, 0.42); text-decoration: none; }
.site-foot__contact a:hover { color: var(--volt); }
.site-foot__legal { margin-top: 6px; font-variant-numeric: tabular-nums; color: rgba(234, 247, 238, 0.22); }

/* Touch targets. The project floor is 44px, and these links are small mono by
   design — so the box grows on coarse pointers only, leaving the desktop
   footer compact. Keyed off input capability, the same test PhoneFrame uses. */
@media (hover: none) and (pointer: coarse) {
  .site-nav a,
  .site-foot__links a,
  .site-foot__links span[aria-current] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .site-foot__links { gap: 0 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}