/* AgeCare — agecare.app
   One stylesheet, no framework, no JavaScript. One self-hosted variable font
   (Manrope, ~40 KB for both subsets) — no request ever leaves the origin.

   "Clear Signal" (Brand Concept 2026): a warm-cream ground, deep pine ink,
   hairline rules instead of drop shadows, flat colour. Signal teal carries the
   brand, tangerine marks the person at the centre, butter warms the notes that
   must not read as alarms. The same six colours are the app's palette tokens,
   so a screenshot never looks pasted onto this page.

   Signal teal (#19b6a4) is 2.3:1 on cream and cannot carry text: --teal is the
   AA-safe deep end for type and buttons, --teal-signal is the brand hue and
   stays a fill. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f6f3ea;          /* WARM CREAM */
  --paper-deep: #ece7d9;
  --surface: #fffdf7;
  --ink: #163b35;            /* PINE */
  --muted: #4c6961;
  --hairline: #dde4dd;
  --hairline-strong: #b6ccc2;
  --teal: #0b6f62;
  --teal-deep: #08544a;
  --teal-signal: #19b6a4;    /* SIGNAL TEAL */
  --mint: #9ddbc9;           /* MINT */
  --sage: #dcf0e8;
  --sage-border: #9ddbc9;
  --tangerine: #ff7a3d;      /* TANGERINE */
  --butter: #ffd866;         /* BUTTER */
  --amber-soft: #fff4d6;
  --amber-border: #f3da97;
  --amber-ink: #8a5a16;
  --shadow-ink: 22, 59, 53;  /* pine, as rgb() parts for translucent shadows */
  --radius: 12px;
  --radius-lg: 18px;
  --wrap: 1140px;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3, h4 { line-height: 1.25; margin: 0 0 .4em; letter-spacing: -.01em; font-weight: 650; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 3rem 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
.lede { font-size: 1.14rem; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; max-width: 640px; }

section { padding: clamp(52px, 7vw, 96px) 0; }
section.tight { padding: clamp(32px, 4vw, 56px) 0; }
section + section { border-top: 1px solid var(--hairline); }

/* small-caps label above a heading */
.kicker {
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--teal);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--tangerine); }
.kicker.on-dark { color: rgba(255,255,255,.75); }
.kicker.on-dark::before { background: var(--tangerine); }

.sec-head { max-width: 720px; margin-bottom: clamp(30px, 4.5vw, 56px); }
.sec-head .lede { margin-bottom: 0; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 243, 234, .94);
  backdrop-filter: saturate(130%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}
/* Lockup: emblem, two-tone wordmark, tangerine endpoint — the same three
   notes as the mark, in the same order. */
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 800; font-size: 1.22rem; color: var(--ink); letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo svg { display: block; flex: none; }
.logo .word { display: flex; align-items: baseline; }
.logo .care { color: var(--teal); }
.logo .dot { width: .21em; height: .21em; border-radius: 50%; background: var(--tangerine); margin-left: .17em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--ink); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.nav a.current { color: var(--teal); }
.nav .btn { text-transform: none; letter-spacing: 0; font-size: .9rem; }
/* `.nav a` outspecifies `.btn-primary`, which turned the CTA's text ink-dark */
.nav a.btn-primary { color: #fff; }

.menu-check { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn, .nav-scrim { display: none; }

/* Grouped nav: two dropdowns and two direct links instead of nine links.
   Pure CSS — hover opens on pointer devices, :focus-within covers keyboards. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  cursor: default;
  /* Tall enough to reach the header's edges, so the pointer never crosses a
     dead gap between the label and the panel it opens. */
  padding: 23px 0;
}
.nav-group-label .caret { color: var(--hairline-strong); }
.nav-group-label.current { color: var(--teal); }
.nav-group:hover .nav-group-label,
.nav-group:focus-within .nav-group-label { color: var(--teal); }
.nav-group:hover .nav-group-label .caret,
.nav-group:focus-within .nav-group-label .caret { color: var(--teal); }
.nav-drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 8px;
  display: none;
  z-index: 30;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop { display: block; }
.nav-drop-in {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 20px 44px -20px rgba(var(--shadow-ink), .28);
  padding: 8px;
  min-width: 186px;
}
.nav-drop-in a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .78rem;
  white-space: nowrap;
}
.nav-drop-in a:hover { background: var(--sage); color: var(--teal-deep); text-decoration: none; }
.nav-drop-in a.current { color: var(--teal); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 650;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--teal-deep); }
.btn-light:hover { background: var(--sage); }

/* ---------- mascot ---------- */

/* The 2D character system. The brand book's rule is that the mascot has a job
   — it greets, points, or holds the thing the page is asking you to install —
   so it only appears where it is doing one, never as ornament. Every instance
   is aria-hidden: the sentence beside it already carries the meaning.

   The poses are transparent PNGs drawn at 640px wide, twice the widest any of
   them is ever painted, so none is ever scaled up. Every <img> carries its own
   width/height so the box is reserved before the bytes arrive, and object-fit
   keeps the drawing in proportion if a container ever disagrees. */
.mascot { display: block; width: 100%; height: auto; object-fit: contain; }

/* Standing in the empty column beside a section head. The head is capped at
   720px inside a 1200px wrap, so on a desktop there is real space to its right
   and the character fills it without crowding the heading. */
.sec-head-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(30px, 4.5vw, 56px);
}
.sec-head-row .sec-head { flex: 1 1 auto; margin-bottom: 0; }
.sec-head-row .mascot { flex: none; width: clamp(150px, 17vw, 230px); }

/* Tucked into the end of a feature's text column, in the space the column
   leaves once its list runs out. margin-left:auto pushes it to the inside
   edge so it leans toward the screenshot it is talking about. It sits in
   normal flow, so it can never land on the copy or the button above it. */
.mascot-note {
  width: clamp(140px, 16vw, 200px);
  margin: clamp(20px, 3vw, 32px) 0 0 auto;
}

/* Centred over a heading, on a page that has nothing else on it — the 404 and
   the coming-soon panel. */
.mascot-lead { width: clamp(132px, 16vw, 190px); margin: 0 auto clamp(16px, 2.5vw, 26px); }

/* Above the text rather than beside it, for a column too narrow to give up
   140px without breaking the headline across four lines. */
.mascot-inline { width: clamp(120px, 12vw, 156px); margin: 0 0 18px; }

@media (max-width: 860px) {
  /* the gap beside the section head closes here, so it drops underneath */
  .sec-head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sec-head-row .mascot { width: clamp(130px, 34vw, 172px); }
}

/* Below 980px every feature collapses to one column, and a character stacked
   directly above a screenshot reads as two things queueing rather than one
   picture. So the character stands in front of the phone, overlapping its top
   edge.

   The overlap is kept to roughly the character's feet and each one is aligned
   to whichever side of *that* screenshot is empty at the top, so it stands on
   the phone rather than over what the phone is showing. Those two things are
   per-screenshot, which is why this is three tuned rules and not one blanket
   one — the medication screen opens with white space on the left, the medical
   card puts its heading there, and the responder row runs the full width.

   Only blocks that actually carry a character are pulled up, hence
   `.with-mascot` and the `#emergency` scope. */
@media (max-width: 980px) {
  .with-mascot .feature-text,
  #emergency .sec-head-row {
    position: relative;
    z-index: 3;
  }

  .with-mascot .feature-shot,
  #emergency .grid.g3 {
    position: relative;
    z-index: 1;
  }

  .with-mascot .mascot-note {
    width: clamp(144px, 39vw, 190px);
    margin-top: clamp(10px, 2vw, 18px);
    margin-bottom: 0;
  }

  /* Medications: the screen opens with a band of white space on the left and
     keeps its two icons hard right, so the character stands left and its feet
     land in that band. */
  #features .with-mascot .mascot-note { margin-left: 0; margin-right: auto; }
  #features .with-mascot .feature-shot { margin-top: -46px; }

  /* The scannable card: that screen's top row runs the full width, so the
     character goes right, where the row runs out before the edge does. */
  #emergency .with-mascot .mascot-note { margin-left: auto; margin-right: 0; }
  #emergency .with-mascot .feature-shot { margin-top: -42px; }

  /* The medical card: "Medical card" sits top-left in that screenshot, and the
     opposite corner is empty, so this one stands on the right. */
  #emergency .sec-head-row .mascot { align-self: flex-end; }
}

/* The emergency section's three features are still a 3-up grid until 720px,
   where the character on the right would come down on the third card rather
   than the medical card it belongs to. So that one overlaps only once the grid
   is a single column. */
@media (max-width: 720px) {
  #emergency .sec-head-row { margin-bottom: -50px; }
}

/* ---------- store badges ---------- */

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px 10px 15px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  min-width: 176px;
}
.badge:hover { background: #000; text-decoration: none; }
.badge svg { flex: none; fill: #fff; }
.badge span { display: block; line-height: 1.15; }
.badge .b1 { font-size: .66rem; opacity: .8; letter-spacing: .03em; }
.badge .b2 { font-size: 1.04rem; font-weight: 650; letter-spacing: -.01em; }
.stores.on-dark .badge { background: #fff; color: var(--ink); border-color: #fff; }
.stores.on-dark .badge svg { fill: var(--ink); }
.stores.on-dark .badge:hover { background: var(--sage); }

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

.hero { padding-top: clamp(44px, 6vw, 84px); padding-bottom: 0; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero .wrap > div:first-child { padding-bottom: clamp(44px, 6vw, 84px); }
.hero h1 { margin-bottom: .4em; }
.hero h1 .accent { color: var(--teal); }
.hero .lede { font-size: 1.18rem; max-width: 44ch; }

.hero-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--sage); border: 1px solid var(--sage-border);
  color: var(--teal-deep);
  border-radius: 999px; padding: 7px 16px;
  font-size: .85rem; font-weight: 650;
  margin: 0 0 22px;
}
.hero-pill svg { flex: none; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 28px; }
.hero-cta .btn svg { flex: none; }

.trust-row { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; flex: none; }
.avatars span {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 800;
  border: 2px solid var(--paper);
  margin-left: -10px;
  background: var(--sage); color: var(--teal-deep);
}
.avatars span:first-child { margin-left: 0; }
.avatars span:nth-child(2) { background: var(--teal); color: #fff; }
.avatars span:nth-child(3) { background: var(--amber-soft); color: var(--amber-ink); }
.avatars span:nth-child(4) { background: var(--teal-deep); color: #fff; }
.trust-row p { margin: 0; font-size: .9rem; color: var(--muted); max-width: 26ch; }

/* two overlapping phones, tilted, cropped by the hero's bottom edge */
.hero-shot { position: relative; display: block; min-height: clamp(420px, 44vw, 620px); }
.hero-shot .phone { position: absolute; box-shadow: 0 34px 64px -28px rgba(var(--shadow-ink), .45); }
.hero-phone-front {
  z-index: 3;
  left: 0; top: clamp(24px, 3vw, 56px);
  max-width: clamp(230px, 24vw, 300px);
  transform: rotate(-7deg);
}
.hero-phone-back {
  z-index: 1;
  right: 0; top: 0;
  max-width: clamp(210px, 22vw, 280px);
  transform: rotate(7deg);
}

/* The mascot in the hero: it stands in the seam between the two screenshots,
   in front of the back phone (z-index 1) and behind the front one (z-index 3),
   which is what makes it read as standing *between* them rather than pasted on
   top of the pair. The two phones only overlap by about 30px, so it is nudged
   off-centre until most of its body clears the front phone's edge — otherwise
   the front screenshot hides it completely.

   Anchored to the bottom, because the phones bleed off the section's bottom
   edge and the character has to stand on the same floor as them.

   Unlike the section mascots this one shows at every width: the hero is the one
   place the character introduces the whole product rather than commenting on a
   single screen. */
.hero-mascot {
  --mascot-x: 24%;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(26px, 5vw, 78px);
  width: clamp(108px, 12.5vw, 168px);
  height: auto;
  transform: translateX(var(--mascot-x));
  animation: mascot-float 7s ease-in-out infinite;
}

/* Three pixels over seven seconds — enough to read as alive at the top of the
   page, small enough that it never pulls the eye off the headline. It is the
   only animated instance on the site. The X offset is repeated in both frames
   because a transform replaces the one above rather than adding to it. */
@keyframes mascot-float {
  0%, 100% { transform: translate(var(--mascot-x), 0); }
  50%      { transform: translate(var(--mascot-x), -3px); }
}

/* On the dark download panel the near-black outline would sink into the
   ground, so that instance stands on a warm-cream plaque — the same move the
   brand book's cover makes with the app icon, and the app's splash makes. */
.cta-mascot {
  display: block;
  width: clamp(158px, 18vw, 218px);
  height: auto;
  margin: 0 auto 22px;
  background: var(--paper);
  border-radius: 22px;
  padding: 14px 14px 6px;
}

/* ---------- feature strip (below hero) ---------- */

.feature-strip { background: var(--sage); border-top: 1px solid var(--sage-border); border-bottom: 1px solid var(--sage-border); }
.feature-strip .sec-head { max-width: none; text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.feature-strip .sec-head .lede { margin: 0 auto; max-width: 52ch; }
.mini-feature { display: flex; align-items: flex-start; gap: 15px; }
.mini-icon {
  width: 56px; height: 56px; flex: none;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--sage-border);
  display: grid; place-items: center;
  color: var(--teal);
}
.mini-feature h3 { font-size: 1rem; margin: 4px 0 .25em; }
.mini-feature p { margin: 0; font-size: .89rem; color: var(--muted); }

/* ---------- phone frame ---------- */

/* Device bezel drawn as an outline: painted outside the box, takes no layout
   space, so the screenshot keeps its full width. */
.phone {
  width: 100%;
  max-width: 320px;
  border-radius: 25px;
  outline: 10px solid var(--ink);
  background: var(--ink);
  box-shadow: 0 24px 48px -20px rgba(var(--shadow-ink), .35);
  overflow: hidden;
}
.phone.sm { max-width: 260px; outline-width: 8px; }

.phone-pair { display: flex; flex-wrap: nowrap; gap: 32px; justify-content: center; }
.phone-pair .phone { flex: 0 1 260px; min-width: 0; }
.phone-pair .phone:last-child { margin-top: 36px; padding-top: 10px; background: var(--paper); }

/* ---------- fact strip ---------- */

.strip { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface); }
.strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 40px;
  padding-top: 26px;
  padding-bottom: 26px;
  counter-reset: fact;
}
.strip p { margin: 0; font-size: .86rem; color: var(--muted); counter-increment: fact; }
.strip p::before {
  content: "0" counter(fact);
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--hairline-strong);
  margin-bottom: 4px;
}
.strip b { display: block; color: var(--ink); font-weight: 650; }

/* ---------- cards & grids ---------- */

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }

/* feature rows: text beside a screenshot */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.feature + .feature { margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hairline); }
.feature.flip .feature-text { order: 2; }
.feature-shot { display: flex; justify-content: center; }
.feature h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.feature ul { list-style: none; padding: 0; margin: 22px 0 0; }
.feature ul li {
  margin: 0;
  padding: 11px 0;
  color: var(--muted);
  font-size: .95rem;
  border-top: 1px solid var(--hairline);
}

/* role tiles */
.role { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px; }
.role .tag { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.role h3 { margin: 8px 0 .3em; }
.role p { margin: 0; color: var(--muted); font-size: .93rem; }

/* pricing */
.price-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.price-card:hover {
  border-color: var(--hairline-strong);
  box-shadow: 0 20px 40px -26px rgba(var(--shadow-ink), .35);
  transform: translateY(-3px);
}
.price-card.featured {
  border: 1.8px solid var(--teal);
  background: linear-gradient(180deg, var(--sage) 0%, var(--surface) 52%);
  box-shadow: 0 24px 48px -26px rgba(var(--shadow-ink), .38);
}
.price-card.featured:hover { border-color: var(--teal-deep); }
.price-card .tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--sage);
  border: 1px solid var(--sage-border);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 14px;
}
.price-card.featured .tag { background: var(--teal); border-color: var(--teal); color: #fff; }
.price-card h3 { font-family: var(--serif); font-size: 1.34rem; font-weight: 750; margin: 0; }
.price-line { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 2px; }
.price-line .price { font-family: var(--serif); font-weight: 800; font-size: 2.15rem; line-height: 1; color: var(--ink); }
.price-line .price-sm { font-size: 1.5rem; line-height: 1.15; }
.price-line .per { color: var(--muted); font-size: .85rem; }
.price-card .annual { color: var(--muted); font-size: .85rem; margin: 0 0 10px; }

/* monthly / yearly billing toggle — CSS only, same checked-input pattern as the menu */
.bill-check { position: absolute; opacity: 0; pointer-events: none; }
.bill-toggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto clamp(26px, 4vw, 38px); border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--surface); overflow: hidden; }
.bill-toggle label { padding: 9px 22px; font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.bill-toggle .save { font-weight: 400; font-size: .8rem; }
#bill-m:checked ~ .bill-toggle label[for="bill-m"],
#bill-y:checked ~ .bill-toggle label[for="bill-y"] { background: var(--teal); color: #fff; }
#bill-y:checked ~ .bill-toggle label[for="bill-y"] .save { color: rgba(255, 255, 255, .8); }
.bill-price-y { display: none; }
#bill-y:checked ~ .grid .price-line.bill-price-y { display: flex; }
#bill-y:checked ~ .grid p.bill-price-y { display: block; }
#bill-y:checked ~ .grid .bill-price-m { display: none; }
.price-card .pitch { color: var(--muted); font-size: .92rem; margin: 4px 0 0; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 20px; flex: 1; }
.price-card ul li {
  position: relative;
  padding: 6px 0 6px 26px;
  margin: 0;
  color: var(--muted);
  font-size: .89rem;
}
.price-card ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--teal-deep);
  font-size: .6rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.price-card .btn { width: 100%; margin-top: auto; }
.price-card .plan-note {
  text-align: center;
  font-size: .76rem;
  color: var(--muted);
  margin: 10px 0 0;
}
.price-note { color: var(--muted); font-size: .9rem; max-width: 68ch; margin: 26px auto 0; text-align: center; }

/* panels */
.panel {
  background: var(--teal-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 60px);
}
.panel h2, .panel h3 { color: #fff; }
.panel p { color: rgba(255, 255, 255, .84); }
.panel a:not(.btn):not(.badge) { color: #fff; text-decoration: underline; }

/* plain list on a dark panel, matching the feature-list rhythm */
.list-plain { list-style: none; padding: 0; margin: 22px 0 0; color: rgba(255, 255, 255, .86); }
.list-plain li { margin: 0; padding: 10px 0; font-size: .95rem; border-top: 1px solid rgba(255, 255, 255, .18); }

.panel-soft { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); }
.panel-sage { background: var(--sage); border: 1px solid var(--sage-border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); }
.panel-note { background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: var(--radius); padding: 18px 20px; color: var(--amber-ink); }
.panel-note p:last-child { margin-bottom: 0; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat .n { font-family: var(--serif); font-weight: 800; font-size: 2.2rem; color: var(--teal-deep); line-height: 1.1; }
.stat .l { font-size: .9rem; color: var(--muted); }

/* faq */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; padding: 19px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 1.2rem; color: var(--teal); line-height: 1.3; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0 0 20px; max-width: 66ch; }

/* screenshot gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: .85rem; color: var(--muted); margin-top: 10px; text-align: center; }
.gallery .phone { max-width: 100%; }

/* blog */
.post-list { display: grid; gap: 0; }
.post-card { background: transparent; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; padding: 28px 0; }
.post-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; margin-bottom: .3em; letter-spacing: -.01em; }
.post-card h3 a { color: var(--ink); }
.post-meta { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.prose { max-width: 700px; }
.prose h2 { margin-top: 1.7em; font-size: 1.65rem; }
.prose h3 { margin-top: 1.6em; }
.prose blockquote {
  margin: 1.8em 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--teal);
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.prose th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* contact */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .88rem; font-weight: 650; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }

.contact-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.contact-item:first-child { padding-top: 0; }
.contact-item div { flex: 1; }
.contact-item h3 { margin-bottom: .15em; font-size: 1rem; }
.contact-item p { margin: 0; color: var(--muted); font-size: .93rem; }

/* footer */
.site-footer { border-top: 1px solid var(--hairline); padding: 56px 0 28px; background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; font-weight: 650; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--ink); font-size: .92rem; }
.footer-mark {
  font-family: var(--serif);
  font-size: clamp(64px, 13vw, 150px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--paper-deep);
  -webkit-text-stroke: 1px var(--hairline-strong);
  margin-top: 48px;
  user-select: none;
}
.footer-bottom { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .84rem; color: var(--muted); }
.disclaimer { font-size: .82rem; color: var(--muted); max-width: 66ch; margin-top: 14px; }

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

@media (max-width: 980px) {
  .g4, .gallery, .stats, .strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .strip .wrap { gap: 18px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .wrap > div:first-child { padding-bottom: 0; }
  .hero-shot { min-height: clamp(380px, 62vw, 520px); margin-top: 8px; }
  .hero-phone-front { left: 8%; max-width: clamp(220px, 34vw, 280px); }
  .hero-phone-back { right: 8%; max-width: clamp(200px, 31vw, 260px); }
  .feature, .feature.flip .feature-text { grid-template-columns: 1fr; order: 0; }
  .feature-shot { order: 2; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .strip .wrap { grid-template-columns: 1fr 1fr; }
  .phone-pair { flex-wrap: wrap; }
  .phone-pair .phone:last-child { margin-top: 0; }

  /* On a phone the character is the hero's illustration rather than a detail
     inside it: roughly three times its desktop size, standing on the section's
     bottom edge with the two screenshots angled behind its shoulders. The
     container is grown to make room, so the character never rides up over the
     download buttons. */
  .hero-shot { min-height: 132vw; }
  .hero-phone-front { left: 2%; max-width: 52vw; }
  .hero-phone-back { right: 0; max-width: 46vw; }
  .hero-mascot {
    --mascot-x: -50%;
    z-index: 4;
    left: 50%;
    bottom: 0;
    width: min(84vw, 340px);
  }
  .hero-cta .btn { flex: 1 1 100%; }
  .feature-strip .grid.g4 { grid-template-columns: 1fr; gap: 22px; }

  /* Pricing on a phone: one swipeable row per grid instead of a 2×2-plus-1
     stack. Full-bleed via the wrap's own 24px gutter, snap per card, and the
     next card peeks in from the right as the affordance to scroll. */
  #pricing .grid.g4,
  #pricing .grid.g3 {
    display: flex;
    gap: 14px;
    margin: 0 -24px;
    padding: 4px 24px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #pricing .grid.g4::-webkit-scrollbar,
  #pricing .grid.g3::-webkit-scrollbar { display: none; }
  #pricing .price-card {
    flex: 0 0 min(82vw, 330px);
    scroll-snap-align: start;
  }
  /* the lift-on-hover transform fights the scroll gesture on touch */
  #pricing .price-card:hover { transform: none; }

  /* CSS-only side drawer: a checkbox toggles it, no JavaScript on the page.
     The header's backdrop-filter is dropped here because a filtered ancestor
     becomes the containing block for `position: fixed`, which would trap the
     drawer inside the 66px header instead of the viewport. */
  .site-header { backdrop-filter: none; background: var(--paper); }

  .menu-btn {
    display: grid; place-items: center; margin-left: auto;
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--hairline-strong); background: var(--surface); cursor: pointer;
    position: relative; z-index: 40;
  }
  .menu-btn span { position: relative; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
  }
  .menu-btn span::before, .menu-btn span::after {
    content: ""; position: absolute; left: 0;
    transition: transform .2s ease, top .2s ease;
  }
  .menu-btn span::before { top: -6px; }
  .menu-btn span::after { top: 6px; }
  .menu-check:focus-visible ~ .menu-btn { outline: 2px solid var(--teal); outline-offset: 2px; }

  .menu-check:checked ~ .menu-btn span { background: transparent; }
  .menu-check:checked ~ .menu-btn span::before { top: 0; transform: rotate(45deg); }
  .menu-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg); }

  /* full-screen menu, editorial: numbered serif links, CTA pinned at bottom */
  .nav {
    position: fixed; inset: 0;
    width: 100%;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    margin-left: 0;
    background: var(--paper);
    padding: 96px 28px max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .24s ease;
    z-index: 30;
    counter-reset: navi;
  }
  .nav a:not(.btn) {
    counter-increment: navi;
    display: flex; align-items: baseline; gap: 16px;
    padding: 19px 0;
    font-family: var(--serif);
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
    border-bottom: 1px solid var(--hairline);
  }
  .nav a:not(.btn)::before {
    content: "0" counter(navi);
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .14em;
    color: var(--teal);
  }
  .nav a.current { color: var(--teal); }
  .nav .btn { margin-top: auto; width: 100%; padding: 16px; font-size: 1rem; }
  .menu-check:checked ~ .nav { transform: none; }

  /* In the drawer the dropdown groups dissolve: their links join the single
     numbered list, and the group labels disappear. The hover/focus selectors
     that open the desktop dropdown are more specific than a bare class, so
     they are repeated here — otherwise tapping inside the drawer re-summons
     the floating dropdown panel. */
  .nav-group, .nav-drop, .nav-drop-in { display: contents; }
  .nav-group:hover .nav-drop,
  .nav-group:focus-within .nav-drop { display: contents; }
  .nav-group-label,
  .nav-group:hover .nav-group-label,
  .nav-group:focus-within .nav-group-label { display: none; }
  .nav-drop-in a { padding: 19px 0; border-radius: 0; white-space: normal; }
  .nav-drop-in a:hover { background: transparent; color: inherit; }

  /* full-width panel needs no scrim; keep the element as a click-away target
     for any viewport where the panel doesn't fully cover */
  .nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(var(--shadow-ink), .45);
    opacity: 0; pointer-events: none;
    transition: opacity .24s ease;
    z-index: 25;
  }
  .menu-check:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }
}

@media (max-width: 400px) {
  /* keep both toggle labels plus the save hint on one 320px-wide line */
  .bill-toggle label { padding: 9px 13px; font-size: .84rem; }
  .bill-toggle .save { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-scrim, .menu-btn span::before, .menu-btn span::after { transition: none; }
  .hero-mascot { animation: none; }
}