/* =====================================================================
   Not An Age — shared stylesheet for every page.

   Mobile first, deliberately: the traffic comes from YouTube, and a parent
   watching a video about their kid's phone is holding a phone. Desktop is
   the enhancement here, not the baseline.

   The one visual device is the notification badge — a small red disc with a
   number in it. It is the thing every parent on this site is fighting, used
   as the numbering system. It earns its place; nothing else is red.
   ===================================================================== */

:root {
  --paper:  #FBFAF7;
  --card:   #FFFFFF;
  --ink:    #1C1D22;
  --muted:  #64676F;
  --faint:  #8E9198;
  --rule:   #E6E3DC;
  --indigo: #2E3A6E;
  --indigo-soft: #EEF0F7;
  --badge:  #E8503A;
  --badge-soft: #FDEEEA;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --col: min(680px, 100% - 2.5rem);
  --wide: min(1080px, 100% - 2.5rem);

  /* Motion. Everything here is under 250ms and none of it is decorative —
     the job is acknowledging input and bridging changes that would
     otherwise teleport. Content the reader is reading never moves. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 160ms;
  --dur-hover: 160ms;
  --dur-panel: 240ms;
}

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

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

::selection { background: rgba(46,58,110,0.14); }
a { color: var(--indigo); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6.5vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.05rem); line-height: 1.16; letter-spacing: -0.018em; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { width: var(--col); margin-inline: auto; }
.wrap-wide { width: var(--wide); margin-inline: auto; }
.stack { display: grid; gap: 1.15rem; }
.stack-lg { display: grid; gap: 2rem; }
section { padding-block: clamp(2.75rem, 8vw, 4.5rem); }
.lede { font-size: 1.0625rem; color: var(--muted); }

.eyebrow {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--indigo);
}

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); }
.head-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.9rem;
}
.brand {
  font-family: var(--serif); font-size: 1.1875rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 0.45rem;
}
.brand .dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--badge); display: inline-block;
}
.head-links { display: none; gap: 1.5rem; }
@media (min-width: 720px) { .head-links { display: flex; } }
.head-links a {
  font-size: 0.875rem; color: var(--muted); text-decoration: none;
  transition: color var(--dur-hover) ease-out;
}
.head-links a:hover { color: var(--ink); }
.head-cta {
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  background: var(--ink); color: var(--paper);
  padding: 0.55rem 0.9rem; border-radius: 6px; white-space: nowrap;
  transition: background-color var(--dur-hover) ease-out,
              transform var(--dur-press) var(--ease-out);
}
.head-cta:hover { background: var(--indigo); }
.head-cta:active { transform: scale(0.97); }

/* ---------- badge numbering: the device ---------- */
.badge {
  flex-shrink: 0;
  min-width: 1.5rem; height: 1.5rem; padding-inline: 0.4rem;
  border-radius: 999px; background: var(--badge); color: #fff;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.badge-quiet { background: var(--indigo); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  background: var(--indigo); color: #fff; text-decoration: none;
  padding: 0.95rem 1.5rem; border: 2px solid var(--indigo); border-radius: 8px;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: background-color var(--dur-hover) ease-out,
              border-color var(--dur-hover) ease-out,
              transform var(--dur-press) var(--ease-out);
}
/* The traffic is phones, where there is no hover at all — without this a
   tap produces no acknowledgement of any kind until the page changes. */
.btn:active { transform: scale(0.97); }
.btn:hover { background: #26305C; border-color: #26305C; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--indigo); }
.btn-ghost:hover { background: var(--indigo-soft); border-color: var(--indigo); }
.btn-buy { background: var(--badge); border-color: var(--badge); }
.btn-buy:hover { background: #D4452F; border-color: #D4452F; }

.microcopy { font-size: 0.8125rem; color: var(--faint); }

/* ---------- forms ---------- */
form.optin { display: grid; gap: 0.6rem; }
input[type="email"], input[type="text"] {
  font-family: var(--sans); font-size: 1rem; width: 100%;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--rule); border-radius: 8px; padding: 0.9rem 1rem;
}
input::placeholder { color: var(--faint); }
input[type="email"], input[type="text"] { transition: border-color var(--dur-hover) ease-out; }
input:focus { outline: none; border-color: var(--indigo); }
/* min-height already reserves the space, so this fades in without shifting
   anything below it. */
.form-msg { font-size: 0.875rem; color: var(--indigo); min-height: 1.2em; }
.form-msg.is-new { animation: msg-in 200ms var(--ease-out); }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.form-msg[data-state="error"] { color: #B23A28; }

/* ---------- cards & panels ---------- */
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.5rem;
}
.tint { background: var(--indigo-soft); border-radius: 12px; padding: 1.5rem; }
.alarm { background: var(--badge-soft); border-radius: 12px; padding: 1.5rem; }

/* ---------- lists ---------- */
ul.plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
ul.plain li { display: flex; gap: 0.85rem; align-items: flex-start; }
ul.plain li p { color: var(--muted); font-size: 0.9375rem; margin-top: 0.15rem; }
ul.plain li strong { display: block; }

.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.checks li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9375rem; }
.checks li::before {
  content: "✓"; color: var(--indigo); font-weight: 700; flex-shrink: 0;
}

/* ---------- pricing ---------- */
.price-row { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .price-row { grid-template-columns: 1fr 1fr; align-items: start; } }
.price-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.75rem; display: grid; gap: 1rem; align-content: start;
}
.price-card.featured { border: 2px solid var(--indigo); position: relative; }
.price-flag {
  position: absolute; top: -0.75rem; left: 1.5rem;
  background: var(--indigo); color: #fff; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 4px;
}
.price {
  font-family: var(--serif); font-size: 2.5rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.price small { font-family: var(--sans); font-size: 0.875rem; color: var(--muted); font-variant-numeric: normal; }

/* ---------- faq ---------- */
details {
  border-bottom: 1px solid var(--rule); padding-block: 1rem;
}
details summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
  display: flex; gap: 0.75rem; align-items: baseline;
}
details summary::-webkit-details-marker { display: none; }
/* Always a "+", rotated 45° into a "×" when open. Swapping the glyph for a
   "–" gives the same information with no continuity between the two states;
   rotating the same mark keeps it one object that turned. */
details summary::before {
  content: "+"; color: var(--badge); font-weight: 700;
  display: inline-block; transition: transform var(--dur-panel) var(--ease-out);
}
details[open] summary::before { transform: rotate(45deg); }
details p { margin-top: 0.75rem; color: var(--muted); font-size: 0.9375rem; }

/* Height on a native <details> is only animatable in browsers that support
   interpolate-size and ::details-content. Where they are missing the panel
   simply snaps, which is exactly what it does today — no regression, and no
   JavaScript needed to hold the FAQ together. */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    height: 0; overflow: hidden;
    transition: height var(--dur-panel) var(--ease-out),
                content-visibility var(--dur-panel) allow-discrete;
  }
  details[open]::details-content { height: auto; }
}

/* ---------- guides index ---------- */
.guide-list { display: grid; gap: 1rem; }
.guide-card {
  display: grid; gap: 0.4rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.4rem 1.5rem;
}
.guide-card {
  transition: border-color var(--dur-hover) ease-out,
              transform 200ms var(--ease-out);
}
.guide-card:hover { border-color: var(--indigo); }
/* Lift only where there is a real cursor. On touch, :hover sticks after a tap
   and the card would sit raised until you tapped elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover { transform: translateY(-2px); }
}
.guide-card:active { transform: scale(0.995); }
.guide-card h3 { color: var(--indigo); }
.guide-card p { color: var(--muted); font-size: 0.9375rem; }
.guide-card .meta {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------- document previews ----------
   The real first page of the real PDF, rendered. People are being asked to
   trade an address — and later $39 — for documents they have never seen, so
   showing the actual thing does more than any amount of description.

   Displayed at half the pixel width it ships at, so it stays sharp on the
   phones this site is mostly read on. The page's own margins are what give
   it the shape of a document rather than a screenshot. */
.doc-shot {
  display: block; width: 247px; max-width: 100%; height: auto;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(28,29,34,0.05), 0 10px 28px rgba(28,29,34,0.07);
}
.doc-row { display: grid; gap: 1.5rem; justify-items: start; align-items: center; }
@media (min-width: 620px) {
  .doc-row { grid-template-columns: auto 1fr; gap: 2rem; }
}
.doc-cap { font-size: 0.8125rem; color: var(--faint); margin-top: 0.6rem; }

/* ---------- proof slot: deliberately empty until real ---------- */
.proof-slot {
  border: 2px dashed var(--rule); border-radius: 12px; padding: 1.25rem;
  font-family: var(--mono); font-size: 0.75rem; color: var(--faint); line-height: 1.7;
}

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--rule); padding-block: 2.5rem; margin-top: 1rem;
}
.foot-in { display: grid; gap: 1.25rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-links a {
  font-size: 0.875rem; color: var(--muted); text-decoration: none;
  transition: color var(--dur-hover) ease-out;
}
.foot-links a:hover { color: var(--ink); }
.disclaimer { font-size: 0.75rem; color: var(--faint); line-height: 1.7; max-width: 60ch; }

/* ---------- misc ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Reduced motion means less movement, not none. Colour and opacity are kept —
   they carry the feedback and do not move anything on screen. What goes is
   everything positional: the press scale, the card lift, the panel height. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, opacity !important;
    transition-duration: 120ms !important;
  }
  .btn:active, .head-cta:active, .guide-card:active, .guide-card:hover { transform: none; }
  details[open] summary::before { transform: none; }
  details[open] summary::before { content: "–"; }
}