/* ============================================================
   Orinn — landing page styles
   Brand palette (locked):
     --harbor    #0F5F6E   primary deep teal
     --coral     #F2A28A   accent (decorative only — fails text contrast)
     --sand      #F4ECDF   surface neutral
     --ink       #0B2329   text & dark surface
     --grey      #5A6B70   secondary text
   ============================================================ */

:root {
  --harbor: #0F5F6E;
  --harbor-deep: #0B4D5A;
  --harbor-soft: #E5EFF1;
  --coral: #F2A28A;
  --sand: #F4ECDF;
  --sand-soft: #FBF7EF;
  --ink: #0B2329;
  --ink-soft: #143038;
  /* Greys darkened for legibility — earlier values failed WCAG AA
     contrast on white. --grey is now ~7:1 (AAA), --grey-soft ~5:1
     (AA). Tightens the entire site's body text without retouching
     every individual style. */
  --grey: #3D4A50;
  --grey-soft: #647177;
  --line: rgba(11, 35, 41, 0.10);
  --line-on-ink: rgba(244, 236, 223, 0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 35, 41, 0.04), 0 2px 6px rgba(11, 35, 41, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 35, 41, 0.06), 0 12px 28px rgba(11, 35, 41, 0.06);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-serif: 'Playfair Display', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;

  --content-width: 1080px;
  --content-narrow: 680px;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Pad anchor-jump targets clear of the sticky header. Without this
     a click on the "Get notified" nav link scrolls #notify so its
     true top sits under the sticky header — visually the chip
     ("First 10,000 families…") ended up clipped, leaving the user
     to read a partial "DAYS · NO CARD". Padding rather than
     scroll-margin on each section keeps it global and survives any
     future section additions. ~76px = header padding (16px×2) +
     row height (~44px) on mobile — leaves a small breathing line
     above the section title. */
  scroll-padding-top: 76px;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--sand-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--harbor); text-decoration: none; }

/* Links inside the dark --ink section need a brighter color than
   the default harbor teal — that's a deep teal that disappears
   against the ink background. Coral has good contrast on dark and
   is the only accent we already use there (eyebrows). Underlined so
   the link affordance is obvious without relying on color alone. */
.section--ink a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section--ink a:hover { color: #FBC9B8; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; border: 0; }

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

.skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--ink); color: var(--sand);
  padding: 8px 12px; border-radius: 6px;
  z-index: 100;
}
.skip-link:focus { top: 8px; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: var(--content-narrow); }

.section {
  padding: clamp(72px, 10vw, 128px) 0;
}
.section--sand   { background: var(--sand); }
.section--ink    { background: var(--ink); color: var(--sand); }
.section--cta    { background: var(--harbor); color: var(--sand); }

.section__header { max-width: 720px; margin: 0 0 56px; }
.section__header--center { margin-left: auto; margin-right: auto; text-align: center; }

.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--harbor);
  margin: 0 0 14px;
}
.section__eyebrow--on-ink { color: var(--coral); }

.section__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--ink);
}
.section__title--on-ink { color: var(--sand); }
.section__title--center { text-align: center; margin-left: auto; margin-right: auto; }

.section__lede {
  font-size: 18px;
  color: var(--grey);
  margin: 0;
  max-width: 60ch;
}
.section__lede--on-ink { color: rgba(244, 236, 223, 0.78); }
.section__lede--center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Announcement bar ---------- */
/* Sticks above the site header. Same backdrop blur so it reads as
   one cohesive top region. The deep teal gives the founding offer
   gravity without screaming "BANNER AD" — it's information, not
   marketing pressure. */
.announce {
  background: var(--harbor);
  color: #ffffff;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 9px 24px;
  font-size: 13.5px;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.005em;
}
.announce__inner:hover { text-decoration: none; opacity: 0.95; }
.announce__star {
  color: var(--coral);
  font-size: 13px;
  flex: 0 0 auto;
}
.announce__text { color: rgba(255,255,255,0.96); }
.announce__text strong { color: #ffffff; font-weight: 600; }
.announce__more {
  color: rgba(255,255,255,0.78);
  font-size: 12.5px;
  flex: 0 0 auto;
}

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(251, 247, 239, 0.86);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__icon {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11, 35, 41, 0.10);
}
.brand--footer { font-size: 18px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.site-nav > a {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.005em;
}
.site-nav > a:hover {
  color: var(--harbor);
  text-decoration: none;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--sand) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.header-cta:hover {
  background: var(--harbor);
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(72px, 10vw, 132px) 24px clamp(72px, 10vw, 120px);
  text-align: center;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(15,95,110,0.10), transparent 70%),
    radial-gradient(40% 40% at 80% 30%, rgba(242,162,138,0.20), transparent 70%),
    var(--sand-soft);
  overflow: hidden;
}
.hero__inner {
  max-width: 760px;
  margin: 0 auto;
}
.hero__art {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.hero__icon {
  width: 96px; height: 96px;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(15, 95, 110, 0.22);
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--harbor);
  margin: 0 0 16px;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 6.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--harbor);
}

.hero__lede {
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--grey);
  max-width: 56ch;
  margin: 0 auto 36px;
}

.hero__credibility {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--grey-soft);
  letter-spacing: 0.01em;
}

/* join-kid.html — Safari fallback for kids who tap the parent's
   invite link but don't have the kid app installed yet. */
.join-kid__code-wrap {
  margin: 22px 0 4px;
  padding: 18px 22px;
  background: rgba(15, 95, 110, 0.07);
  border-radius: 16px;
  display: inline-block;
}
.join-kid__code-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.85;
}
.join-kid__code {
  margin: 6px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.join-kid__no-code {
  margin: 18px 0 0;
}
.join-kid__steps {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--grey-soft);
}

/* "Already have the app?" block — surfaced when a code is present
   on the URL. The current installed kid build (pre-Associated-
   Domains entitlement) won't intercept the universal link, so iOS
   drops the visitor into Safari; this block tells them to switch
   apps manually and type the code. Goes away once the new kid build
   ships and Universal Links auto-route. */
.join-kid__divider {
  margin: 28px auto;
  width: 60%;
  border: none;
  border-top: 1px solid rgba(15, 95, 110, 0.18);
}
.join-kid__already {
  margin: 24px 0 0;
  text-align: center;
}
.join-kid__already-label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.join-kid__already-body {
  margin: 6px auto 0;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey-soft);
}

/* Primary CTA — App Store download button. iOS-style: black pill,
   small "Download on the" line above a larger "App Store" line,
   chevron-style apple glyph on the left. Built from CSS rather than
   the official badge image so it scales with the page typography
   and looks crisp at any resolution. */
.hero__primary-cta {
  margin: 24px 0 0;
}
.hero__primary-cta--center {
  text-align: center;
}
.hero__appstore-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: #000;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  line-height: 1.1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.hero__appstore-btn:hover,
.hero__appstore-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.hero__appstore-btn__chev {
  display: inline-block;
  width: 26px;
  height: 30px;
  /* Inline apple glyph as data URI — avoids an extra HTTP request
     and works without external assets. Pure SVG, white fill. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='%23ffffff' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zM251.6 87.7c34.2-40.4 31.1-77.2 30.1-90.4-30.2 1.7-65.2 20.6-85.1 43.8-21.9 24.9-34.8 55.7-32 84.5 32.7 2.5 62.5-14.3 87-37.9z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hero__appstore-btn__label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hero__appstore-btn__sub {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.hero__appstore-btn__main {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Secondary CTA for the kid app — intentionally smaller than the
   primary notify form so it doesn't compete for attention. Sits
   between the notify form and the credibility line. */
.hero__kid-cta {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--grey-soft);
  letter-spacing: 0.01em;
}
.hero__kid-cta a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(15, 95, 110, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.hero__kid-cta a:hover,
.hero__kid-cta a:focus {
  border-bottom-color: var(--teal);
}
.hero__kid-cta strong {
  font-weight: 600;
  color: var(--ink);
}

/* Two-column hero variant: copy on the left, phone mockup on the
   right. Falls back to a single column under 900px so the image
   stacks below the text and doesn't crowd the form. */
.hero__inner--split {
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  text-align: left;
}
.hero__inner--split .hero__title,
.hero__inner--split .hero__lede {
  margin-left: 0;
}
.hero__inner--split .notify-form {
  margin-left: 0;
}
.hero__inner--split .notify-form__note,
.hero__inner--split .hero__credibility {
  text-align: left;
}
.hero__copy { min-width: 0; }
.hero__device {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero__phone {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(11, 35, 41, 0.18));
}
@media (max-width: 900px) {
  .hero__inner--split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__inner--split .hero__title,
  .hero__inner--split .hero__lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero__inner--split .notify-form { margin-left: auto; margin-right: auto; }
  .hero__inner--split .notify-form__note,
  .hero__inner--split .hero__credibility { text-align: center; }
  .hero__device { order: -1; margin-bottom: 16px; }
  .hero__phone { max-width: 240px; }
}

/* Privacy section centered illustration above the headline. */
.privacy-hero-art {
  display: block;
  width: 200px;
  height: auto;
  margin: 0 auto 24px;
  filter: drop-shadow(0 12px 24px rgba(15, 95, 110, 0.25));
}

/* Inline H1 hero block for the long-form pages (features / guide /
   faq). Two-column layout: copy + a small phone illustration. Drops
   to a single column under 760px so the image stacks above the text. */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  margin-bottom: 16px;
}
.page-hero__copy { min-width: 0; }
.page-hero__art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-hero__art img {
  width: 100%;
  max-width: 240px;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(11, 35, 41, 0.16));
}
@media (max-width: 760px) {
  .page-hero {
    grid-template-columns: 1fr;
  }
  .page-hero__art { order: -1; }
  .page-hero__art img { max-width: 180px; }
}

/* Small section-header art for FAQ category headings. */
.faq-section-art {
  display: block;
  width: 100px;
  height: auto;
  margin: 0 0 18px;
  filter: drop-shadow(0 8px 18px rgba(15, 95, 110, 0.18));
}

/* ---------- Notify form ---------- */
.notify-form {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 18px;
  box-shadow: var(--shadow-sm);
}
.notify-form input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 10px 0;
  min-width: 0;
}
.notify-form input::placeholder { color: var(--grey-soft); }
.notify-form button {
  appearance: none;
  background: var(--harbor);
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
}
.notify-form button:hover { background: var(--harbor-deep); }
.notify-form button:active { transform: translateY(1px); }
.notify-form button:disabled {
  background: #2c8392;
  cursor: default;
}
.notify-form input:focus-visible,
.notify-form button:focus-visible {
  outline: 2px solid var(--harbor);
  outline-offset: 3px;
}
.notify-form.is-success {
  border-color: var(--harbor);
  box-shadow: 0 0 0 3px rgba(15,95,110,0.15);
}

.notify-form--lg {
  max-width: 520px;
  background: #ffffff;
}
.notify-form--lg button { padding: 12px 24px; font-size: 16px; }

.notify-form__note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--grey);
  text-align: center;
}
/* Sand at full opacity for the surrounding "Or email … and we'll add
   you to the list" copy — earlier this was 0.75 then 0.85 opacity
   and still read as faint on the teal background. Solid sand
   guarantees the prose is legible at glance. */
.notify-form__note--center { color: var(--sand); }
/* The mailto link is the most-clicked element on this section so
   it has to POP. Earlier attempts:
     - coral on teal → invisible (palette warns; failed contrast)
     - sand on teal → readable but blends with surrounding note copy
   Final: pure white, bold, underlined with extra thickness +
   offset so the underline is unmistakable even at low zoom or
   small viewports. White on harbor teal hits ~10:1 contrast,
   well past WCAG AAA. */
.notify-form__note--center a {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.notify-form__note--center a:hover {
  color: #FFFFFF;
  text-decoration-thickness: 3px;
}

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
}
.pillar__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--harbor-soft);
  color: var(--harbor);
  margin-bottom: 18px;
}
.pillar__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pillar__body {
  margin: 0;
  color: var(--grey);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(15,95,110,0.20);
}
.feature__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--harbor);
  color: #ffffff;
  margin-bottom: 14px;
}
.feature__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.feature__body {
  margin: 0;
  color: var(--grey);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- Pricing ---------- */
/* Section uses sand-soft (matches body bg) so the founding card +
   plan cards read as the foreground. Lots of whitespace between
   blocks — pricing pages get noisy fast and a calm layout reinforces
   the "honest pricing" claim. */
.section--sand-soft { background: var(--sand-soft); }

.founding-card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(242,162,138,0.18), transparent 60%),
    var(--harbor);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  margin: 0 auto 56px;
  max-width: 920px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}
.founding-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.founding-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: #ffffff;
}
.founding-card__lede {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
  max-width: 50ch;
}
.founding-card__list {
  list-style: none;
  margin: 0;
  padding: 20px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: #ffffff;
}
.founding-card__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.founding-card__check {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--harbor-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.founding-card__limit {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.66);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Plan comparison ---------- */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.plan {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan--plus {
  border-color: rgba(15,95,110,0.30);
  box-shadow: 0 0 0 3px rgba(15,95,110,0.06), var(--shadow-md);
  position: relative;
}
.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--harbor);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan__header { padding-bottom: 4px; }
.plan__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.plan__price {
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan__price-amount {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plan__price-unit {
  font-size: 14.5px;
  color: var(--grey);
  font-weight: 500;
}
.plan__price-alt {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--grey);
}
.plan__pitch {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--grey);
  line-height: 1.55;
}
.plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.plan__check {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: rgba(15,95,110,0.10);
  color: var(--harbor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
.plan__check--plus {
  background: var(--harbor);
  color: #ffffff;
}
.plan__footer {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--grey);
}
.plan__footer--accent { color: var(--harbor); font-weight: 600; }

.plans__note {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
}

/* ---------- CTA chip ---------- */
.cta__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(244,236,223,0.16);
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 auto 18px;
}

/* ---------- Privacy ---------- */
.privacy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.privacy-card {
  background: var(--ink-soft);
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.privacy-card--no { background: var(--ink-soft); }
.privacy-card--yes { background: var(--ink-soft); }

.privacy-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 18px;
  color: var(--sand);
  letter-spacing: -0.01em;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checklist li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--line-on-ink);
  color: rgba(244, 236, 223, 0.92);
  font-size: 15.5px;
}
.checklist li:last-child { border-bottom: 0; }
.checklist--no li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(242, 162, 138, 0.18);
  background-image:
    linear-gradient(45deg, transparent 9px, var(--coral) 9px, var(--coral) 13px, transparent 13px),
    linear-gradient(-45deg, transparent 9px, var(--coral) 9px, var(--coral) 13px, transparent 13px);
}

.disclosure {
  border-bottom: 1px solid var(--line-on-ink);
  padding: 12px 0;
}
.disclosure:last-child { border-bottom: 0; }
.disclosure summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--sand);
  padding: 6px 0;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--coral);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.disclosure[open] summary::after { content: "−"; }
.disclosure__why {
  color: rgba(244, 236, 223, 0.55);
  font-weight: 400;
  font-size: 14px;
}
.disclosure p {
  margin: 8px 0 4px;
  font-size: 14.5px;
  color: rgba(244, 236, 223, 0.78);
  line-height: 1.55;
  max-width: 60ch;
}

/* ---------- CTA section ---------- */
.section--cta .notify-form {
  background: rgba(255, 255, 255, 0.96);
  border: 0;
}
.section--cta .notify-form input { color: var(--ink); }
.section--cta .notify-form input::placeholder { color: var(--grey-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--sand);
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14.5px;
}
.site-footer__nav a { color: var(--grey); }
.site-footer__nav a:hover { color: var(--harbor); }
.site-footer__copy {
  margin: 0;
  font-size: 13.5px;
  color: var(--grey-soft);
  width: 100%;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; gap: 16px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .privacy  { grid-template-columns: 1fr; }
  .plans    { grid-template-columns: 1fr; }
  .founding-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 20px;
  }
  .announce__more { display: none; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .features { grid-template-columns: 1fr; }
  .notify-form {
    flex-direction: column;
    border-radius: var(--radius-md);
    padding: 10px;
    gap: 10px;
  }
  .notify-form input { padding: 12px 8px; }
  .notify-form button { width: 100%; padding: 14px 16px; border-radius: var(--radius-md); }
  .site-header { padding: 12px 16px; }
  .site-nav { gap: 14px; }
  .site-nav > a:not(.header-cta) { display: none; }
  .header-cta { padding: 7px 14px; font-size: 13.5px; }
  .announce__inner {
    padding: 8px 16px;
    font-size: 12.5px;
    gap: 8px;
  }
  .announce__text strong { display: block; margin-bottom: 1px; }
  .privacy-card { padding: 24px; }
  .founding-card { padding: 22px; border-radius: var(--radius-md); }
  .founding-card__title { font-size: 22px; }
  .plan { padding: 24px 22px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__copy { text-align: left; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .header-cta, .notify-form, .section--cta { display: none; }
  body { background: #fff; color: #000; }
}

/* =========================================
   CONTENT PAGES (features / guide / faq)
   Shared utilities for the three deeper pages.
   ========================================= */

/* Table of contents — anchors at the top of long pages so visitors
   can jump to the section they want. Soft pill grid. */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--sand-soft, #f3ebd8);
  border-radius: var(--radius-md, 14px);
}
.toc a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(11, 35, 41, 0.08);
  transition: background-color 120ms ease, color 120ms ease;
}
.toc a:hover { background: var(--harbor, #0F5F6E); color: #fff; }

/* Numbered/bulleted step lists used in the guide + features pages.
   Comfortable line-height so a page of instructions doesn't read
   as a wall of text. */
.steps {
  margin: 18px 0 0 0;
  padding-left: 1.4em;
  line-height: 1.7;
  color: var(--ink);
}
.steps li {
  margin-bottom: 10px;
  font-size: 16px;
}
.steps li strong { font-weight: 600; }

/* Section H3 inside a long-form section (used in /guide for
   "On your phone" / "On your kid's phone" sub-headings). One
   step below .section__title in weight. */
.step-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 32px 0 8px 0;
}

/* Soft inline callout — flag tips, "why we built it this way"
   notes, the occasional warning. Sand-soft fill + teal left rule
   for emphasis without leaning on a heavier ribbon. */
.callout {
  margin: 20px 0;
  padding: 14px 16px;
  background: var(--sand-soft, #f3ebd8);
  border-left: 3px solid var(--harbor, #0F5F6E);
  border-radius: 8px;
  font-size: 15.5px;
  color: var(--ink);
}
.callout strong { font-weight: 600; }

/* Plus-feature badge used inline in headings. Distinguishes
   "this is in the paid plan" from "this is on every plan"
   without making it look like an upsell. */
.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--harbor, #0F5F6E);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Vertical stack of disclosure rows used by the FAQ pages.
   The default .disclosure styles (in the privacy section above)
   are tuned for the dark --ink background and use cream text
   that washes out on white. Inside .faq-list we override every
   color so the rows are properly readable on a light card. */
.faq-list {
  margin-top: 24px;
  background: #fff;
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(11, 35, 41, 0.10);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 35, 41, 0.03);
}
.faq-list .disclosure {
  padding: 6px 18px;
  border-bottom: 1px solid rgba(11, 35, 41, 0.08);
}
.faq-list .disclosure:last-child { border-bottom: 0; }
.faq-list .disclosure summary {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
}
.faq-list .disclosure summary::after {
  color: var(--harbor);
}
.faq-list .disclosure p {
  color: var(--ink);
  opacity: 0.86;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 68ch;
  margin: 4px 0 14px;
}
.faq-list .disclosure p a {
  color: var(--harbor);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-list--center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Body prose inside the long-form content sections. The .section
   pattern doesn't set type defaults; we add them here so the
   features/guide/faq pages have comfortable paragraph rhythm. */
.section .container--narrow > p,
.section .container > p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 14px 0 0 0;
}
.section .container--narrow > p a,
.section .container > p a,
.section .steps a,
.section .callout a {
  color: var(--harbor, #0F5F6E);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Active-page indicator in the top nav. */
.site-nav a[aria-current="page"] {
  color: var(--harbor, #0F5F6E);
  font-weight: 600;
}

/* ---------- Screenshot spotlights (homepage "See it in action") ----------
   Alternating phone+copy rows. Phone has a subtle soft device frame
   (rounded corners + shadow) without using a stock template — kept
   in-brand by matching the rest of the site's shadow + radius
   tokens. On mobile the rows stack phone-on-top; on desktop they
   alternate via :nth-child(even). */
.spotlights {
  display: flex;
  flex-direction: column;
  gap: 96px;
  margin-top: 56px;
}
.spotlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.spotlight__phone {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
/* The phone image itself. We give it the iOS-like continuous-curve
   corner and a soft ambient shadow plus a tighter contact shadow so
   it floats above the sand background instead of being a flat
   rectangle. Inline width=320 in the markup gives a sensible base;
   max-height clamps so very tall captures don't blow the layout. */
.spotlight__phone img {
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: 38px;
  box-shadow:
    0 1px 2px rgba(11, 35, 41, 0.08),
    0 18px 44px rgba(11, 35, 41, 0.16),
    0 38px 70px rgba(11, 35, 41, 0.10);
  /* Thin inner border to read as "device bezel" without rendering an
     actual bezel image — keeps the file lighter and resolution-free. */
  outline: 1px solid rgba(11, 35, 41, 0.06);
  outline-offset: -1px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.spotlight:hover .spotlight__phone img {
  transform: translateY(-4px);
}
.spotlight__copy {
  flex: 1 1 auto;
  max-width: 480px;
}
.spotlight__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.spotlight__body {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--grey);
}

@media (min-width: 760px) {
  .spotlight {
    flex-direction: row;
    align-items: center;
    gap: 72px;
    text-align: left;
  }
  /* Alternate sides — phone on left for odd rows, on right for even.
     Reads like a magazine spread rather than a list of products. */
  .spotlight:nth-child(even) {
    flex-direction: row-reverse;
  }
  .spotlight__phone img {
    width: 320px;
  }
}

/* ---------- Hero centered variant (post-hero-phone-removal) ----------
   Replaces .hero__inner--split when the illustrated phone is gone.
   Centers the copy in a comfortable reading column instead of a
   50/50 grid that leaves a giant blank slot on the right. */
.hero__inner--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.hero__inner--centered .hero__title,
.hero__inner--centered .hero__lede {
  text-align: center;
}
.hero__inner--centered .hero__lede {
  margin-left: auto;
  margin-right: auto;
}
.hero__inner--centered .notify-form {
  margin-left: auto;
  margin-right: auto;
}
.hero__inner--centered .notify-form__note,
.hero__inner--centered .hero__credibility {
  text-align: center;
}

/* ---------- CTA section legibility ----------
   .section--cta has a harbor-teal background. The section's container
   already sets `color: var(--sand)` but section__title / section__lede
   each declare their own dark `--ink` color that wins via specificity.
   Earlier markup had to remember the --on-ink modifier class — easy
   to miss, screenshots caught it. These scoped overrides force the
   correct sand/cream tones for ANY title/lede inside .section--cta,
   so future copy doesn't need the modifier. */
.section--cta .section__title { color: var(--sand); }
.section--cta .section__lede {
  /* Slight opacity drop so the lede sits below the title visually
     while still being clearly readable (we used 0.78 elsewhere for
     the same effect — keep consistent). */
  color: rgba(244, 236, 223, 0.85);
}
.section--cta .cta__chip {
  /* The chip's pill background was rgba(244,236,223,0.16) which
     reads as a faint cream wash on teal. Coral text on that is
     decorative-only contrast — the same warning the palette
     comment flags for coral-on-anything-dark. Bump to sand text +
     stronger pill background so the eyebrow reads cleanly. */
  background: rgba(244, 236, 223, 0.22);
  color: var(--sand);
}