/* ==========================================================================
   bangaverage.dev - bang average software
   Tokens lifted from the SimpleHRT styleguide (Theme.swift).
   ========================================================================== */

/* --- Geomanist ------------------------------------------------------------
   Licensed webfonts, served from /fonts/. The site only loads the four
   weights it uses; the other weights sit in src/fonts/ unreferenced.      */
@font-face {
  font-family: "Geomanist";
  src: url("/fonts/geomanist-book-webfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("/fonts/geomanist-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("/fonts/geomanist-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("/fonts/geomanist-black-webfont.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  /* Primitives - from the SimpleHRT styleguide */
  --cream:      #F0EAE1;
  --cream-deep: #E6DFD3;
  --card:       #F8F4ED;
  --coral:      #F27D7E;
  --coral-soft: #F9C9C9;
  --teal:       #35B0AA;
  --teal-soft:  #BDE4E1;
  --charcoal:   #2E2A26;
  --stone:      #968F81;
  --line:       #D8D0C2;

  /* Web-only additions: darker accents so text links pass WCAG AA on cream */
  --teal-ink:   #1E6E6A;
  --coral-ink:  #A64244;
  --stone-ink:  #6E6759;

  --radius-card: 18px;
  --radius-med:  14px;
  --shadow-card: 0 3px 6px rgba(46, 42, 38, 0.05);

  --font-stack: "Geomanist", -apple-system, BlinkMacSystemFont, "Segoe UI",
                system-ui, Avenir, "Helvetica Neue", sans-serif;
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-stack);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin: 0 0 0.4em;
}
h1 { font-weight: 900; font-size: clamp(34px, 6vw, 52px); }
h2 { font-weight: 700; font-size: clamp(24px, 4vw, 30px); }
h3 { font-weight: 500; font-size: 19px; }

p { margin: 0 0 1em; }

a {
  color: var(--teal-ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--coral-ink); }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--coral-soft); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 24px;
  top: -60px;
  background: var(--charcoal);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 10;
  transition: top 120ms ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* --- Header ---------------------------------------------------------------- */
.site-header { padding: 28px 0 8px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  text-decoration: none;
  color: var(--charcoal);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.3px;
}
.wordmark .bang {
  width: 15px;
  height: 21px;
  color: var(--coral);
  transform: translateY(2px);
}
.wordmark:hover .bang { color: var(--coral-ink); }
.wordmark:hover { color: var(--charcoal); }
.nav-link { font-weight: 500; font-size: 16px; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  padding: 28px 0 48px;
  font-size: 14px;
  color: var(--stone-ink);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  align-items: baseline;
}
.footer-copy { margin: 0; }
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer-links a { color: var(--stone-ink); }
.footer-links a:hover { color: var(--coral-ink); }

/* --- Landing page ---------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 72px 0 40px;
}
.hero .bang-hero {
  width: clamp(72px, 14vw, 110px);
  height: auto;
  color: var(--coral);
  margin-bottom: 8px;
}
.hero h1 { margin-bottom: 0.3em; }
.hero .lede {
  font-size: clamp(18px, 2.6vw, 21px);
  color: var(--stone-ink);
  max-width: 34em;
  margin: 0 auto 1em;
}
.hero .say-it {
  font-size: 14px;
  color: var(--stone-ink);
  margin: 0;
}

.section { margin-top: 72px; }
.section > h2 { margin-bottom: 0.8em; }

/* App cards on the landing page */
.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.app-card-link {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
  text-decoration: none;
  color: var(--charcoal);
}
.app-card-link:hover { color: var(--charcoal); }

/* App icon: squircle-ish mask plus a hairline keyline */
.app-card-icon {
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
  border-radius: 27px; /* ~22.5%, the iOS icon curve */
  border: 1px solid var(--line);
}
.app-card-body { min-width: 0; }
.app-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.app-card-name { font-weight: 700; font-size: 24px; }
/* Pills match the app: white text on brand teal.
   Geomanist sits optically high, so padding is nudged: more top, less bottom */
.app-card-status {
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: var(--teal);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Geomanist carries a lot of built-in leading, so a pill sized by the line
   box always sits the letters low. Where supported, trim the box back to the
   letterforms themselves (cap height to baseline) and let equal padding do
   the centring properly. Chrome/Edge 133+ and Safari 18.2+ honour this;
   Firefox hasn't shipped it yet and falls back to the padding above. */
@supports (text-box: trim-both cap alphabetic) {
  .app-card-status {
    text-box: trim-both cap alphabetic;
    padding: 7px 12px;
  }
}
.app-card-strap {
  font-weight: 500;
  color: var(--coral-ink);
  margin: 6px 0 4px;
}
.app-card-blurb { color: var(--stone-ink); margin: 0; }
.app-card-more {
  display: inline-block;
  margin-top: 12px;
  font-weight: 500;
  color: var(--teal-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* The "one day, maybe" empty slot */
.app-slot {
  border: 2px dashed var(--line);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  color: var(--stone-ink);
  font-size: 15px;
}
.app-slot p { margin: 0; }

/* Support / contact strip */
.tip-strip {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.tip-strip p { margin: 0; max-width: 36em; }
/* Buttons match the app: white text on brand teal */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: var(--teal);
  border: none;
  border-radius: 999px;
  padding: 14px 26px 10px; /* Geomanist optical baseline nudge */
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--teal-ink); color: #fff; }
.btn-coral { background: var(--coral); }
.btn-coral:hover { background: var(--coral-ink); color: #fff; }

/* --- App page ---------------------------------------------------------------- */
.app-hero {
  text-align: center;
  padding: 56px 0 16px;
}
.app-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px; /* ~22.5%, the iOS icon curve */
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  margin-bottom: 18px;
}
.app-hero .lede {
  font-size: clamp(18px, 2.6vw, 21px);
  color: var(--stone-ink);
  max-width: 30em;
  margin: 0 auto 1.4em;
}

/* Official Apple App Store badge. The artwork is Apple's and must not be
   redrawn, recoloured or cropped. Height is 50px - Apple's onscreen minimum
   is 40px - and the margin is a quarter of that height, which is the clear
   space Apple's identity guidelines require on every side. */
.app-store-badge {
  display: inline-block;
  margin: 13px 0;
  line-height: 0;
  border-radius: 8px;
}
.app-store-badge img {
  height: 50px;
  width: auto;
  display: block;
}
.app-store-badge:hover { opacity: 0.85; }
.app-store-badge:focus-visible {
  outline: 3px solid var(--teal-ink);
  outline-offset: 4px;
}

/* "soon on the App Store" placeholder - our own shape, used before an app
   is live, when Apple's badge would be a lie. Deliberately not Apple's. */
.store-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--charcoal);
  color: #fff;
  border-radius: 12px;
  padding: 11px 22px 9px; /* Geomanist optical baseline nudge */
  text-decoration: none;
  line-height: 1.15;
  margin: 0;
}
.store-badge:hover { color: #fff; opacity: 0.9; }
.store-badge-pre { font-size: 12px; font-weight: 400; opacity: 0.85; }
.store-badge-name { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
/* Placeholder shares the real badge's charcoal-and-white look */
.store-badge-placeholder { cursor: default; }

/* Feature cards */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.feature {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}
.feature h3 { margin-bottom: 0.35em; }
.feature p { margin: 0; color: var(--stone-ink); font-size: 15px; }
.feature-glyph {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.feature-glyph svg { width: 20px; height: 20px; }
.glyph-coral { background: rgba(242, 125, 126, 0.14); color: var(--coral-ink); }
.glyph-teal  { background: rgba(53, 176, 170, 0.14);  color: var(--teal-ink); }
.glyph-plum  { background: rgba(138, 90, 120, 0.14);  color: #8A5A78; }
.glyph-honey { background: rgba(224, 164, 88, 0.18);  color: #9A6A24; }
.glyph-sage  { background: rgba(127, 163, 122, 0.16); color: #4F7050; }

/* Emphasised privacy band: coral-soft with charcoal text, coral border */
.privacy-band {
  background: var(--coral-soft);
  border-radius: var(--radius-card);
  padding: 32px 34px;
  color: var(--charcoal);
  border: 2px solid var(--coral);
}
.privacy-band p { max-width: 44em; }
.privacy-band p:last-child { margin-bottom: 0; }
.privacy-band a { color: var(--charcoal); }
.privacy-band a:hover { color: var(--coral-ink); }

/* Screenshot placeholders - swap each .shot-placeholder for a real <img>   */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.shot { margin: 0; }
.shot img,
.shot-placeholder {
  width: 100%;
  border-radius: 24px;
  display: block;
}
.shot img {
  height: auto; /* scale down with the column; the attribute height only reserves space */
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.shot-placeholder {
  aspect-ratio: 9 / 19.5;
  border: 2px dashed var(--line);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--stone-ink);
  font-size: 14px;
}
.shot figcaption {
  text-align: center;
  font-size: 14px;
  color: var(--stone-ink);
  margin-top: 10px;
}

.app-page-footer {
  margin-top: 72px;
  text-align: center;
  color: var(--stone-ink);
}

/* --- Prose pages (privacy, support) -------------------------------------- */
.prose {
  max-width: 640px;
  margin: 0 auto;
  padding-top: 40px;
}
.prose-header { margin-bottom: 40px; }
.eyebrow {
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--coral-ink);
  margin-bottom: 10px;
}
.prose .lede { font-size: 19px; color: var(--stone-ink); }
.updated {
  font-size: 14px;
  color: var(--stone-ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.prose h2 { font-size: 24px; margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.5em; }

/* FAQ details/summary - works without JS */
.faq details {
  background: var(--card);
  border-radius: var(--radius-med);
  box-shadow: var(--shadow-card);
  padding: 4px 0;
  margin-bottom: 10px;
}
.faq summary {
  font-weight: 500;
  font-size: 17px;
  padding: 14px;
  cursor: pointer;
  list-style-position: inside;
}
.faq summary::marker { color: var(--coral); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details p { padding: 14px 14px 12px; margin: 0; }

/* --- Small screens ---------------------------------------------------------- */
@media (max-width: 560px) {
  .hero { padding-top: 48px; }
  .tip-strip { flex-direction: column; align-items: flex-start; }
  .footer-inner { flex-direction: column; }
  .app-card-link { gap: 18px; }
  .app-card-icon { width: 76px; height: 76px; border-radius: 17px; align-self: flex-start; }
}

/* --- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link { transition: none; }
}