/* askesis.day · shared stylesheet
   -------------------------------------------------------------------------
   Built from the app's own design tokens rather than a website template, so
   the page and the product look like the same thing. Sources:
   Askesis/Sources/DesignTokens.swift and the colorsets in Assets.xcassets.

   Light is the drawn theme, exactly as the app's token file says; dark is the
   same roles rebuilt on the near-black base. Amendment A25 retired the serif
   and put the whole app on one sans, with weight and tracking carrying the
   hierarchy. This follows it, on the system stack: no webfont of any kind,
   because the site promises it loads nothing from anywhere else and a Google
   Fonts request would make that untrue.

   Every colour pair is checked by tools/contrast.py. One value is not the
   app's: dark --accent-text. The app's #C0453C is 3.70:1 on the near-black
   ground, correct for a fill or large type and an AA failure for small text,
   and a web page sets accent text small.                                    */

:root {
  --base: #FAF8F5;
  --surface: #FFFFFF;
  --surface-muted: #F3EFE9;
  --surface-gold: #F5EFE6;
  --hairline: #EBE6E0;
  --accent: #8E2B25;        /* Byzantine red: fill and large type */
  --accent-text: #8E2B25;   /* 7.85:1 on the ground, so one value does both */
  --accent-hover: #6E211C;
  --gold: #8A6B2E;
  --text: #1C1A17;
  --text-secondary: #6E6862;
  --reading-ink: #332E29;
  --text-on-gold: #7A6845;
  --on-accent: #FFFFFF;
  --bezel: #2A2724;
  --shadow: rgba(28, 26, 23, 0.05);
  --shadow-lift: rgba(28, 26, 23, 0.20);

  /* Layout.Radius, the app's one ladder. */
  --r-row: 14px;
  --r-tile: 16px;
  --r-card: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #141210;
    --surface: #1F1C19;
    --surface-muted: #26231F;
    --surface-gold: #2B2418;
    --hairline: #332E29;
    --accent: #C0453C;
    --accent-text: #E8877E;
    --accent-hover: #F2A9A2;
    --gold: #B89554;
    --text: #F5EEE3;
    --text-secondary: #B5AB9C;
    --reading-ink: #EDE5DA;
    --text-on-gold: #C7B389;
    --on-accent: #FFFFFF;
    --bezel: #2A2724;
    --shadow: rgba(0, 0, 0, 0.40);
    --shadow-lift: rgba(0, 0, 0, 0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 12px; line-height: 1.1; letter-spacing: -0.025em; }
p { margin: 0 0 16px; }
img { max-width: 100%; height: auto; }

a { color: var(--accent-text); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

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

/* ---- bands: the page is a stack of full-bleed tinted bands -------------- */

.band { padding: clamp(56px, 7vw, 92px) 0; }
.band-base    { background: var(--base); }
.band-surface { background: var(--surface); }
.band-gold    { background: var(--surface-gold); }
.band-accent  { background: var(--accent); color: var(--on-accent); }
.band-accent h2, .band-accent p { color: var(--on-accent); }

.inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 60px); }

/* ---- navigation -------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: 12px clamp(18px, 2.5vw, 30px);
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px clamp(22px, 5vw, 60px) 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand svg { flex: none; display: block; color: var(--accent); }
.nav a:not(.brand) { font-size: 15px; font-weight: 550; color: var(--text-secondary); }
.nav a:not(.brand):hover { color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent-text); }

/* ---- type roles, named after the app's Typography enum ------------------ */

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.hub-title {
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.042em;
  margin: 0;
}
.hub-title .said { display: block; color: var(--accent-text); }
.display {
  font-size: clamp(32px, 3.7vw, 50px);
  font-weight: 680;
  line-height: 1.03;
  letter-spacing: -0.038em;
  margin: 0 0 16px;
}
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--reading-ink); }
.reading { color: var(--reading-ink); font-size: 18px; line-height: 1.6; }
.secondary { color: var(--text-secondary); }
.small { font-size: 15px; }

/* ---- hero -------------------------------------------------------------- */

.hero { padding: clamp(46px, 5.5vw, 76px) 0 clamp(56px, 6vw, 84px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 40px;
  align-items: center;
}
.hero-lede { max-width: 22em; margin: 20px 0 0; }
.hero-note { margin: 18px 0 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 650;
}
.pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 30px;
  border-radius: var(--r-tile);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  font-weight: 650;
  border: 2px solid var(--accent);
}
.btn:hover { text-decoration: none; color: var(--on-accent); filter: brightness(1.08); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn-quiet:hover { background: var(--surface-muted); color: var(--text); filter: none; }

/* The device cluster: two phones, the second angled behind the first. */
.cluster { position: relative; min-height: 624px; }
.cluster .phone-back {
  position: absolute; left: 186px; top: 60px; width: 250px;
  transform: rotate(4deg);
}
.cluster .phone-front { position: absolute; left: 0; top: 0; width: 282px; }

/* ---- the device frame -------------------------------------------------- */

.phone {
  padding: 9px;
  background: var(--bezel);
  border-radius: 42px;
  box-shadow: 0 22px 44px var(--shadow-lift);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 34px; }
.phone-lg { padding: 10px; border-radius: 46px; box-shadow: 0 30px 58px var(--shadow-lift); }
.phone-lg img { border-radius: 37px; }
.phone-sm { padding: 8px; border-radius: 34px; box-shadow: 0 18px 36px var(--shadow-lift); }
.phone-sm img { border-radius: 27px; }

/* ---- generic grids ----------------------------------------------------- */

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(30px, 3.5vw, 40px);
}
.trio h2 { font-size: clamp(23px, 2vw, 26px); font-weight: 640; margin: 18px 0 8px; }
.trio p { font-size: 17px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.trio svg { color: var(--accent); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* The phone-beside-a-list row. */
.aside-phone {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: clamp(36px, 7vw, 88px);
  align-items: center;
}
.aside-phone > .phone { width: 330px; }

.numbered { display: flex; flex-direction: column; gap: 30px; }
.numbered > li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
}
.numbered { list-style: none; margin: 0; padding: 0; }
.numbered .n { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
.numbered h3 { font-size: clamp(20px, 1.8vw, 23px); font-weight: 640; margin: 0 0 5px; }
.numbered p { font-size: 17px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 26px 24px;
}
.figure .n {
  display: block;
  font-size: clamp(38px, 3.6vw, 50px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure .w { display: block; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--text-on-gold); }

.tally { display: flex; align-items: baseline; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--hairline); }
.tally .n {
  font-size: clamp(48px, 4.8vw, 68px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.tally .w { font-size: 18px; line-height: 1.45; color: var(--text-secondary); }

.gold-card {
  background: var(--surface-gold);
  color: var(--text-on-gold);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.5vw, 28px);
  margin-top: 26px;
}
.gold-card p { margin: 0; font-size: 18px; line-height: 1.55; }
.gold-card strong { color: var(--text); }

/* ---- gallery ----------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(22px, 2.6vw, 32px);
}
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 16px; font-size: 16px; color: var(--text-secondary); }

/* ---- cards ------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 22px;
}
.card {
  background: var(--base);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.4vw, 28px);
}
.band-base .card, .band-gold .card { background: var(--surface); box-shadow: 0 4px 6px var(--shadow); }
.card h3 { font-size: 20px; font-weight: 640; margin: 0 0 8px; }
.card p { font-size: 16px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* The app reserves the accent ring for exactly two surfaces, the day's
   fasting answer and the scanner verdict, so the ring always means "this is
   the answer". One surface here earns it: the free-forever promise. */
.answer {
  border: 2px solid var(--accent);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.8vw, 32px);
  background: var(--surface);
}
.answer p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--reading-ink); }
.answer strong { color: var(--text); }
.answer .eyebrow { color: var(--text-secondary); font-size: 12px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.plan {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-row);
  padding: 22px;
}
.plan .price { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.038em; font-variant-numeric: tabular-nums; }
.plan .per { display: block; margin-top: 4px; font-size: 15px; color: var(--text-secondary); }
.plan .note { display: block; margin-top: 10px; font-size: 14px; font-weight: 650; color: var(--gold); }

/* ---- the closing band -------------------------------------------------- */

.close-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.close-grid h2 {
  font-size: clamp(34px, 4.3vw, 58px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.042em;
  margin: 0;
}
.mail-btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 28px;
  border-radius: var(--r-tile);
  background: var(--base);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}
.mail-btn:hover { text-decoration: none; color: var(--accent); filter: brightness(0.97); }
.band-accent a:not(.mail-btn) { color: var(--on-accent); text-decoration: underline; }
.band-accent :focus-visible { outline-color: var(--on-accent); }

/* ---- the prose pages' own shell --------------------------------------- */

/* support.html and privacy.html are documents, not bands: one column on the
   page ground, with the same rhythm as a band. */
.section { padding: clamp(48px, 6vw, 80px) 0 0; }
.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.column { max-width: 66ch; }

/* ---- prose (support and privacy) --------------------------------------- */

.prose { max-width: 68ch; color: var(--reading-ink); }
.prose h2 { font-size: 24px; font-weight: 640; margin: 44px 0 10px; color: var(--text); }
.prose h3 { font-size: 18px; font-weight: 640; margin: 30px 0 6px; color: var(--text); }
.prose ul { padding-left: 1.25rem; margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 18px 0 26px; }
.prose th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.prose td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; line-height: 1.55; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }

@media (max-width: 620px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prose tr { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .prose td { border: 0; padding: 2px 0; }
  .prose td:first-child { font-weight: 650; color: var(--text); }
}

.crumb { font-size: 15px; color: var(--text-secondary); margin: 0 0 14px; }
.crumb a { color: var(--text-secondary); }

/* ---- footer ------------------------------------------------------------ */

.foot {
  display: flex;
  gap: 12px 28px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: 34px 0 46px;
  font-size: 15px;
  color: var(--text-secondary);
}
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--text); }
.foot-links a:hover { color: var(--accent-text); }

/* ---- responsive -------------------------------------------------------- */

/* The hero cluster and the phone-beside-a-list row are the only two fixed
   grids. Below this width both stack, and the cluster becomes one phone:
   the angled second device has nowhere to go on a phone screen. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .cluster { min-height: 0; margin-top: 36px; }
  .cluster .phone-back { display: none; }
  .cluster .phone-front { position: static; width: 100%; max-width: 340px; }
  .aside-phone { grid-template-columns: minmax(0, 1fr); }
  .aside-phone > .phone { width: 100%; max-width: 330px; order: 2; }
}

/* Email addresses are assembled at render time, so the literal string never
   appears in the served HTML. .eml-x holds decoy text hidden from the page,
   from selection and from assistive technology, so a scraper that strips tags
   harvests an address that cannot be delivered. Identical pattern, and the
   identical /eml.js, to handfulapps.com and reward.study. */
span.eml { display: inline; }
.eml-x { display: none; }