/* ===========================================================================
   Pill Ringer — pillringer.com
   ---------------------------------------------------------------------------
   Five colours, one typeface. The tokens below are the app's own, copied from
   src/ui.js so the site and the app read as one thing. Nothing has been added
   to the brand: the neutrals (#FFFFFF, #F4F1EB, #E7E2DA), the two soft tints
   (#E6F0EC, #FBF1E2) and the deep green (#07452F) are already in src/ui.js as
   the derived ramp, and everything else on this page is one of the five.

   Sized for the reader the app is for: nothing functional on this page is
   below 16px. The only smaller type is inside the phone mockups, which are
   pictures of a screen, not page text.
   =========================================================================== */

:root {
  /* The five */
  --cream:      #FBF9F6;
  --green:      #0A5C43;
  --ink:        #1A1A1A;
  --grey:       #666666;
  --amber:      #8A5210;

  /* The app's own derived ramp (src/ui.js) */
  --white:      #FFFFFF;
  --cream-2:    #F4F1EB;   /* C.surfaceAlt */
  --line:       #E7E2DA;   /* C.line */
  --line-soft:  #F1EDE6;   /* C.lineSoft */
  --green-deep: #07452F;   /* C.brandDeep */
  --green-soft: #E6F0EC;   /* C.brandSoft */
  --amber-soft: #FBF1E2;   /* C.accentSoft */

  /* Cream, dimmed, for secondary text on the green bands. 5.5:1 on --green. */
  --on-green-soft: rgba(251, 249, 246, 0.78);

  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;

  --gutter: 28px;
  --measure: 1200px;
}

/* 1200px is right up to about a 1440 laptop. On the 1920 monitor the founder
   actually uses it left 360px of dead cream down each side and made the whole
   page look like a small thing floating in the middle of a big screen. The
   full-bleed bands already run edge to edge; it is only the shell that was
   short. Every paragraph on the page carries its own max-width in em, so the
   extra width goes to the grids and no line of text gets longer. */
@media (min-width: 1500px) { :root { --measure: 1330px; --gutter: 36px; } }
@media (min-width: 1800px) { :root { --measure: 1460px; --gutter: 40px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

/* --- links and focus ----------------------------------------------------- */

a { color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--green :focus-visible,
.alarm :focus-visible { outline-color: var(--cream); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--green); color: var(--cream);
  padding: 14px 20px; z-index: 50; border-radius: 0 0 10px 0;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; color: var(--cream); }

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

/* --- layout -------------------------------------------------------------- */

.shell { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.band { padding: 84px 0; position: relative; }
.band--tight { padding: 76px 0; }

.band--green {
  background: var(--green);
  color: var(--cream);
}
.band--green a { color: var(--cream); }
.band--white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Section openers. Heading left, the sentence that qualifies it right, both
   substantial — not a stub heading with a column of white beneath it, which
   is what made every band read the same and left two thirds of a desktop
   doing nothing. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px 72px;
  align-items: end;
  margin-bottom: 44px;
}
.sec-head .lead { margin: 0; max-width: 34em; }

/* A phone held next to the claim it proves. auto keeps the device at its own
   size and gives every remaining pixel to the words. */
.split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px 76px;
  align-items: center;
}
.split__say .lead { margin: 18px 0 30px; max-width: 32em; }

/* The four promises sit beside their heading rather than under it, two by
   two, so the block is a block and not another full-width stack. */
.promises-in {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 40px 76px;
  align-items: start;
}
.promises-in__say .lead { margin: 18px 0 0; max-width: 25em; }
.promises-in > .promises__cost { grid-column: 1 / -1; }

/* --- headings ------------------------------------------------------------ */

.eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 18px;
}
.band--green .eyebrow { color: var(--on-green-soft); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }

h2 {
  font-size: clamp(30px, 4.5vw, 54px);
  line-height: 1.06;
}
h3 {
  font-size: 21px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.rule {
  width: 44px; height: 4px; border: 0; margin: 0 0 22px;
  background: var(--green); border-radius: 2px;
}
.band--green .rule { background: var(--cream); }
.rule--amber { background: var(--amber); }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(19px, 1.75vw, 23px);
  line-height: 1.55;
  color: var(--grey);
  font-weight: 500;
}
.band--green .lead { color: var(--on-green-soft); }


/* =========================================================================
   Site header
   ========================================================================= */

.site-head {
  padding: 26px 0 0;
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
}
.wordmark:hover { color: var(--ink); }
.wordmark svg { display: block; width: 34px; height: 34px; border-radius: 9px; flex: none; }

.site-head nav { display: flex; gap: 26px; font-size: 16px; font-weight: 600; }
.site-head nav a { text-decoration: none; }
.site-head nav a:hover { text-decoration: underline; }

/* =========================================================================
   Hero
   ========================================================================= */

.hero { padding: 48px 0 84px; }
.hero__in {
  display: grid;
  /* The words get the larger share so the display line can be as big as it
     wants to be; the device keeps enough to stay readable beside it. */
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 72px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(44px, 7.4vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin: 0 0 26px;
}
/* The one typographic idea on the page: the two sentences of the position are
   not the same colour, because they are not the same promise. */
.hero h1 .a { display: block; color: var(--ink); }
.hero h1 .b { display: block; color: var(--green); }

.hero .lead { max-width: 30em; }

.hero__facts {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.hero__facts li { display: flex; align-items: center; }
.hero__facts li:not(:last-child)::after {
  content: ''; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line); margin: 0 14px;
}

/* --- the honest call to action ------------------------------------------ */

.cta {
  margin: 32px 0 0;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  padding: 22px 26px;
  max-width: 29em;
}
.cta__status {
  display: flex; align-items: center; gap: 11px;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.cta__status .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--amber); flex: none;
}
.cta p { font-size: 17px; color: var(--grey); margin: 0 0 16px; font-weight: 500; }
.cta__mail {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green); color: var(--cream);
  font-weight: 700; font-size: 17px;
  padding: 15px 22px; border-radius: 13px;
  text-decoration: none; min-height: 52px;
}
.cta__mail:hover { background: var(--green-deep); color: var(--cream); }
.cta__mail svg { width: 20px; height: 20px; flex: none; }
.cta__fine { display: block; margin-top: 14px; font-size: 16px; color: var(--grey); font-weight: 500; }
.band--white .cta { background: var(--cream); }

/* =========================================================================
   The phone
   -------------------------------------------------------------------------
   Everything inside .phone is sized in em against .phone's own font-size, so
   the whole device scales as one object and never pushes the page sideways.
   1em = 16px at rest, which is the app's real density on a ~360dp screen.
   ========================================================================= */

.stage { display: flex; justify-content: center; }

.phone {
  font-size: 16px;
  line-height: 1.32;                /* the app's own ratio, not the page's 1.6 */
  width: 26.75em;                   /* 412px screen + 2 × 8px bezel */
  flex: none;
  background: #101010;
  border-radius: 2.75em;
  padding: 0.5em;
  box-shadow: 0 2px 3px rgba(26,26,26,0.10), 0 28px 60px -18px rgba(10,92,67,0.32);
  position: relative;
}
/* The dashboard, cropped. The day carries on past the bottom edge — which is
   what the screen does on a real phone too, and what the label says.
   The CROP is the fade at the foot of .ph-body, not a shorter device: the
   screen keeps its 57.2em so the handset stays 412x915. Only font-size sets
   how large it is drawn, and because the screen height and its contents are
   both in em, changing that scales the whole picture without moving where
   the day is cut. */
.phone--dash { font-size: 13px; }

.phone__screen {
  border-radius: 2.3em;
  overflow: hidden;
  background: var(--cream);
  display: flex; flex-direction: column;
  height: 57.2em;                   /* 412 x 915 — a real Android viewport */
  padding-bottom: 1.6em;
  position: relative;
}
/* The punch-hole camera and the home indicator. Both live on the SCREEN, not
   on the frame, so each one can take a colour that shows up on the screen it
   is drawn over — a cream indicator was invisible on the cream dashboard. */
.phone__screen::before {
  content: ''; position: absolute; z-index: 2;
  left: 50%; top: 0.85em; transform: translateX(-50%);
  width: 0.68em; height: 0.68em; border-radius: 50%;
  background: #101010;
}
.phone__screen::after {
  content: ''; position: absolute; z-index: 2;
  left: 50%; bottom: 0.5em; transform: translateX(-50%);
  width: 8.5em; height: 0.26em; border-radius: 0.26em;
  background: rgba(26,26,26,0.32);
}
.phone--alarm .phone__screen::after { background: rgba(251,249,246,0.5); }

/* status bar */
.ph-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75em 1.5em 0.1em;
  font-size: 0.8125em; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.ph-status__icons { display: flex; align-items: center; gap: 0.4em; }
.ph-status__icons svg { width: 1.05em; height: 1.05em; display: block; }

/* -- dashboard ------------------------------------------------------------ */

/* The dashboard is a scrolling screen: the day carries on past the bottom of
   the viewport, exactly as it does on the phone. The fade says "this scrolls"
   so a clipped edge does not read as a clipped drawing. */
.ph-body {
  padding: 0.75em 1.25em 0;
  flex: 1; overflow: hidden; min-height: 0;
  position: relative;
}
/* The fade the note above promises. It had gone missing, which is why the
   evening dose was being sliced through the middle of its own text by a hard
   edge — the exact "card ends mid-word" defect. It starts just under the
   Evening divider, so everything above it (the head, the ring card, and both
   Morning doses) is crisp and whole, and the dose the day carries on into is
   washed out rather than guillotined. */
.ph-body::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6em;
  background: linear-gradient(to bottom, rgba(251, 249, 246, 0) 0%, var(--cream) 76%);
  pointer-events: none;
}

.ph-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; }
.ph-head__greet { font-size: 0.9375em; font-weight: 500; color: var(--grey); line-height: 1.35; }
.ph-head__date  { font-size: 1.125em; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-top: 0.1em; }
.ph-gear {
  width: 3.25em; height: 3.25em; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.ph-gear svg { width: 1.5em; height: 1.5em; display: block; }

.ph-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.25em;
  padding: 1em;
  margin-top: 1em;
  box-shadow: 0 4px 14px rgba(42,33,24,0.06);
}

.ph-ringrow { display: flex; align-items: center; gap: 1em; }
.ph-ring { position: relative; width: 6.5em; height: 6.5em; flex: none; }
.ph-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ph-ring__n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.375em; font-weight: 800; color: var(--ink); letter-spacing: -0.035em;
}
.ph-ringrow__t { font-size: 1.0625em; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ph-link {
  display: flex; align-items: center; gap: 0.32em; margin-top: 0.5em;
  font-size: 0.96875em; font-weight: 600; color: var(--green);
}
.ph-link svg { width: 1em; height: 1em; display: block; }

.ph-div { height: 1px; background: var(--line-soft); margin: 0.875em 0; }

.ph-headline { display: flex; align-items: center; gap: 0.625em; --knock: var(--white); }
.ph-headline svg { width: 1.375em; height: 1.375em; flex: none; display: block; }
.ph-headline span { font-size: 1.125em; font-weight: 700; color: var(--ink); line-height: 1.33; }

.ph-group { display: flex; align-items: center; gap: 0.75em; margin: 1.625em 0 0.75em; }
.ph-group b { font-size: 1.1875em; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.ph-group i { display: block; flex: 1; height: 1px; background: var(--line); }

/* dose card */
.ph-dose {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.25em;
  padding: 0.875em 1em;
  margin-bottom: 0.75em;
  min-height: 6.5em;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 4px 14px rgba(42,33,24,0.06);
}
.ph-dose--loud { border-width: 2px; border-color: var(--amber); }
.ph-dose--done { background: var(--cream-2); box-shadow: none; }

.ph-dose__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625em; gap: 0.5em; }
.ph-dose__time { font-size: 1.375em; font-weight: 800; letter-spacing: -0.023em; color: var(--ink); line-height: 1.2; }
.ph-dose--done .ph-dose__time { color: var(--grey); }

.ph-tag {
  display: inline-flex; align-items: center; gap: 0.375em; line-height: 1.2;
  border-radius: 999px; padding: 0.3125em 0.75em 0.3125em 0.5em;
  font-size: 0.9375em; font-weight: 700; white-space: nowrap;
}
.ph-tag svg { width: 1.25em; height: 1.25em; display: block; flex: none; }
.ph-tag--due     { background: var(--amber-soft); color: var(--amber); --knock: var(--amber-soft); }
.ph-tag--taken   { background: var(--green-soft); color: var(--green); --knock: var(--green-soft); }
.ph-tag--later   { background: var(--cream-2);   color: var(--grey); }

.ph-dose__row { display: flex; align-items: center; gap: 0.75em; }
.ph-dose__row > span:last-child { display: block; flex: 1; min-width: 0; }
.ph-pill {
  width: 3em; height: 3em; border-radius: 0.75em; flex: none;
  border: 1px solid var(--line); background: var(--cream-2);
  display: flex; align-items: center; justify-content: center;
}
.ph-pill svg { width: 2.1em; height: 2.1em; display: block; }
.ph-dose__name { display: block; font-size: 1.25em; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; }
.ph-dose__amt  { display: block; font-size: 1.0625em; font-weight: 800; letter-spacing: -0.012em; color: var(--ink); margin-top: 0.25em; line-height: 1.25; }
.ph-dose__str  { display: block; font-size: 1em; font-weight: 500; color: var(--grey); margin-top: 0.19em; line-height: 1.3; }

.ph-foot {
  padding: 0.625em 1.25em 0.5em;
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
}
.ph-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.625em; border-radius: 1em;
  background: var(--green); color: var(--cream);
  font-size: 1.09375em; font-weight: 700;
}

/* -- the full-screen alarm ------------------------------------------------
   Rebuilt from AlarmActivity.kt. Every size below is that file's own sp/dp
   value divided by 16. Order, weights and both button styles are its own.
   The one deliberate change is the green: the Kotlin hard-codes #0F5D4C,
   which BRAND.md logs as palette drift to be corrected, so the site draws
   the real brand green #0A5C43 (and cream #FBF9F6 for its #F7F5F0).
   ------------------------------------------------------------------------ */

.phone--alarm .phone__screen {
  background: var(--green); padding-bottom: 0;
}
/* The alarm really is this empty — AlarmActivity.kt puts the dose in a
   top-aligned fill-viewport scroller and pins the buttons to the bottom, and
   on a 915px screen that leaves a lot of green.
   That emptiness is the picture telling the truth, so it stays. What does NOT
   stay is squashing the handset to hide it: this screen used to be cut to
   43em, which drew a 412x915 phone at 0.61 — a squat slab, not a phone, and
   the dashboard below it was cut to 0.52, so one page showed the same device
   as two different shapes. Both now keep the real 57.2em, and the two buttons
   are kept above the fold by drawing the device SMALLER, which is what the em
   system is for. */
@media (min-width: 641px) {
  /* Scaled off the viewport so the device always fits its half of the hero
     grid: never wider than the column at 1024, never timid at 1800. */
  .phone--alarm { font-size: clamp(10.5px, 0.86vw, 13.4px); }
}
.phone--alarm .ph-status { color: var(--on-green-soft); }

.alarm {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 1.75em 1.5em;            /* 28dp / 24dp */
  color: var(--cream);
  text-align: center;
}
.alarm p { margin: 0; }

.alarm__kicker {                     /* 13sp bold, muted, letterSpacing 0.14 */
  font-size: 0.8125em; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-green-soft); line-height: 1.3;
}
.alarm__clock {                      /* 16sp regular, muted, 4dp above */
  font-size: 1em; font-weight: 400; color: var(--on-green-soft);
  margin-top: 0.25em;
}
.alarm__name {                       /* 34sp bold, 22dp above */
  font-size: 2.125em; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1; margin-top: 0.647em;
}
.alarm__take {                       /* 22sp regular, 8dp above */
  font-size: 1.375em; font-weight: 400; line-height: 1.25; margin-top: 0.364em;
}
/* 28sp when there is no photo of the pill — it becomes the only way to tell
   one white tablet from another, so the Kotlin promotes it. */
.alarm__desc {
  font-size: 1.75em; font-weight: 400; line-height: 1.2; margin-top: 0.357em;
}

.alarm__spacer { flex: 1; min-height: 1.25em; }

.alarm__btn {                        /* 20sp, minHeight 64dp, radius 18dp */
  display: flex; align-items: center; justify-content: center;
  min-height: 3.2em; border-radius: 0.9em;   /* 64dp / 18dp at 20sp */
  padding: 0.9em 1em;                        /* 18dp / 20dp at 20sp */
  font-size: 1.25em; font-weight: 400; line-height: 1.2;
}
.alarm__btn--take { background: var(--cream); color: var(--green); }
.alarm__btn--snooze {                /* transparent, 2dp stroke, 12dp above */
  margin-top: 0.6em;
  background: transparent; color: var(--cream);
  border: 2px solid var(--on-green-soft);
}
.alarm__hint {                       /* 13sp muted, 14dp above */
  font-size: 0.8125em; font-weight: 400; line-height: 1.45;
  color: var(--on-green-soft); margin-top: 1.077em;
}

/* =========================================================================
   The dose timeline — the mechanism, drawn
   ========================================================================= */

.tl {
  margin: 48px 0 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  padding: 34px 36px 32px;
}
.band--green .tl { border-color: transparent; }

/* The caption is the second half of the headline, so it is set like a claim
   and not like a caption. */
.tl__cap {
  display: flex; align-items: center; gap: 20px;
  margin: 0 0 26px; padding: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.tl__cap > svg { width: 50px; height: 50px; flex: none; display: block; }
.tl__cap > span { display: block; flex: 1; min-width: 0; font-size: 17px; color: var(--grey); font-weight: 500; }
.tl__cap b {
  display: block; color: var(--ink); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.03em;
  line-height: 1.15; margin-bottom: 6px;
}

.tl__steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.tl__steps::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 7px;
  height: 2px; background: var(--line);
}
.tl__step { position: relative; padding-right: 16px; }
.tl__dot {
  display: block;
  width: 16px; height: 16px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--amber); border: 3px solid var(--cream); box-sizing: content-box;
  margin: -3px 0 0 -3px;
}
.tl__step--end .tl__dot { background: var(--green); }
.tl__t { display: block; margin-top: 16px; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.tl__w { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--amber); }
.tl__step--end .tl__w { color: var(--green); }
.tl__d { display: block; margin-top: 4px; font-size: 16px; color: var(--grey); font-weight: 500; line-height: 1.4; }

/* =========================================================================
   Sound comparison (green band)
   ========================================================================= */

/* Two panels side by side, the width of the band. The one the app uses is
   lit; the one it refuses is struck through. */
.chan {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.chan li {
  padding: 30px 32px 32px;
  border: 1px solid rgba(251,249,246,0.24);
  border-radius: 20px;
}
.chan .on { background: rgba(251,249,246,0.08); border-color: rgba(251,249,246,0.44); }
.chan__ic { display: block; width: 38px; height: 38px; margin-bottom: 18px; }
.chan__ic svg { width: 100%; height: 100%; display: block; }
.chan b { display: block; font-size: clamp(20px, 1.9vw, 24px); font-weight: 800; letter-spacing: -0.025em; }
.chan b + span { display: block; font-size: 17px; color: var(--on-green-soft); margin-top: 8px; font-weight: 500; }
.chan__note {
  margin: 24px 0 0; max-width: 68em;
  font-size: 17px; font-weight: 500; color: var(--on-green-soft);
}
.chan .off .chan__ic, .chan .off b { color: var(--on-green-soft); }
.chan .off b { text-decoration: line-through; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* =========================================================================
   Plain lists used in several bands
   ========================================================================= */

.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 20px 0; border-top: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 5px; }
.facts span { display: block; font-size: 17px; color: var(--grey); font-weight: 500; }
.band--green .facts li { border-color: rgba(251,249,246,0.22); }
.band--green .facts span { color: var(--on-green-soft); }

/* The four promises: one row, four short lines, no section apiece. */
.promises {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px;
}
.promises li { border-top: 3px solid var(--green); padding-top: 18px; }
.promises b {
  display: block; font-size: clamp(19px, 1.7vw, 22px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 8px;
}
.promises span { display: block; font-size: 17px; color: var(--grey); font-weight: 500; }
.promises__cost {
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 17px; color: var(--grey); font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px 40px;
}
.promises__cost > span { max-width: 44em; }
.promises__cost b { color: var(--ink); font-weight: 800; }
.promises__cost a { white-space: nowrap; font-weight: 700; }

/* =========================================================================
   Honest limits
   ========================================================================= */

/* The close: the position and the way to reach a human on one side, the
   disclaimer that has to be here on the other. */
.close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px 76px;
  align-items: start;
}
.close__say .lead { margin: 18px 0 0; max-width: 26em; }
/* Breaks where the headline breaks, so the last screen echoes the first. */
.close__h span { display: block; }
.close .cta { max-width: none; }

.limits {
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
  border-radius: 0 18px 18px 0;
  padding: 28px 32px;
}
.limits .rule { margin-bottom: 18px; }
.limits__lead { margin-top: 20px; }
.limits b { font-weight: 800; color: var(--ink); }
.limits h3 { margin-bottom: 10px; }
.limits p { font-size: 17px; }
.limits ul { margin: 0; padding-left: 22px; font-size: 17px; }
.limits li { margin-bottom: 10px; }
.limits li:last-child { margin-bottom: 0; }
.limits ul + p { margin-top: 18px; }

/* =========================================================================
   Footer
   ========================================================================= */

.site-foot {
  background: var(--green-deep);
  color: var(--cream);
  padding: 56px 0 60px;
}
.site-foot a { color: var(--cream); }
.site-foot__in {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
  padding-bottom: 30px; border-bottom: 1px solid rgba(251,249,246,0.22);
}
.site-foot .wordmark { color: var(--cream); }
.site-foot__col { min-width: 200px; }
.site-foot__col h3 { font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-green-soft); margin-bottom: 12px; font-weight: 700; }
.site-foot__col p { font-size: 17px; margin: 0 0 8px; color: var(--cream); }
.site-foot__sub { color: var(--on-green-soft) !important; margin-top: 14px; }
.site-foot__note { margin-top: 26px; font-size: 16px; color: var(--on-green-soft); max-width: 52em; }

/* =========================================================================
   Privacy policy — same page furniture, markup untouched.
   These selectors match exactly what web/build.mjs emits from PRIVACY.md:
   main.prose > p.back, h1–h4, p, ul, ol, li, hr, code, strong, a.
   Nothing here depends on any class that script does not write.
   ========================================================================= */

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 28px 96px;
  font-size: 18px;
  line-height: 1.65;
}
.prose .back {
  font-size: 17px; font-weight: 700; margin: 0 0 40px;
}
.prose .back a { text-decoration: none; }
.prose .back a:hover { text-decoration: underline; }
.prose h1 {
  font-size: clamp(34px, 6vw, 46px);
  letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 20px;
}
.prose h2 {
  font-size: clamp(24px, 3.4vw, 30px);
  margin: 56px 0 14px; padding-top: 26px; border-top: 3px solid var(--green);
  letter-spacing: -0.028em;
}
.prose h3 { font-size: 21px; margin: 36px 0 8px; }
.prose h4 { font-size: 18px; margin: 26px 0 6px; letter-spacing: -0.01em; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 24px; }
.prose li { margin: 0 0 10px; }
.prose li::marker { color: var(--green); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose strong { font-weight: 800; }
.prose code {
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1120px) {
  .split { gap: 36px 52px; }
  .phone--dash { font-size: 11.5px; }
}

@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .band { padding: 76px 0; }
  .band--tight { padding: 68px 0; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; }
  .split { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .split__say { max-width: 36em; }
  .close { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .promises-in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .promises-in__say .lead { max-width: 36em; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .hero { padding: 44px 0 76px; }
  .hero .lead, .cta { max-width: none; }
  .phone--dash { font-size: 14px; }
}

@media (max-width: 760px) {
  .chan { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .promises { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tl { margin-top: 44px; }
  .tl__steps { grid-template-columns: minmax(0, 1fr); }
  .tl__steps::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .tl__step { padding: 0 0 26px 30px; }
  .tl__step:last-child { padding-bottom: 0; }
  .tl__dot { position: absolute; left: 0; top: 4px; margin: 0; }
  .tl__t { margin-top: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 17px; }
  .band { padding: 58px 0; }
  .band--tight { padding: 48px 0; }
  .limits { padding: 24px 22px; }
  .tl { padding: 26px 22px; }
  .tl__cap { gap: 14px; }
  .tl__cap > svg { width: 46px; height: 46px; }
  .chan li { padding: 24px 22px 26px; }
  .site-head nav { gap: 18px; }

  /* Let the device use the full width rather than shrink into illegibility. */
  .stage { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  /* The device is 26.75em wide, so this is the largest it can be and still
     keep a margin either side of a 360px screen. */
  .phone { font-size: clamp(11.6px, 3.55vw, 16px); }
  .cta { padding: 20px 18px; }
  .cta__mail { width: 100%; justify-content: center; padding-left: 14px; padding-right: 14px; }
}

/* The three facts are one line on a desktop and two on a phone, and the dot
   that separates them was being left stranded at the end of the first line —
   ":not(:last-child)" cannot see a line END, only the last item in the list,
   so it kept drawing a separator after "No account" with nothing after it.
   Below the width where the row wraps, the dots come out and the spacing does
   the separating instead. Same three facts, same order, same weight; nothing
   is added and the row stays two lines high. */
@media (max-width: 640px) {
  .hero__facts { gap: 2px 20px; }
  .hero__facts li:not(:last-child)::after { display: none; }
}

@media (max-width: 380px) {
  .hero__facts { font-size: 16px; }
}

/* =========================================================================
   Motion — one thing, and it is off the moment the phone asks.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* The progress ring draws itself once, exactly as it does in the app
     (500ms, ease-out-cubic). Nothing else on this page moves. */
  .ph-ring__arc {
    animation: ring 900ms cubic-bezier(0.215, 0.61, 0.355, 1) 350ms backwards;
  }
  @keyframes ring { from { stroke-dashoffset: 289.03; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* 1 of 4 answered: circumference 2πr at r=46 is 289.03, so a quarter arc
   leaves 216.77 of it hidden. Written here, not in the keyframe, so an
   engine that never animates still draws the correct ring. */
.ph-ring__arc { stroke-dasharray: 289.03; stroke-dashoffset: 216.77; }

@media print {
  .site-head nav, .cta__mail { color: var(--ink); }
  .band--green { background: var(--white); color: var(--ink); }
}