/* FwdLink. Tokens, component specs and the do/don't list are in DESIGN.md (Apple-design-analysis).
   Two rules from that doc govern everything below:
   one accent — Action Blue, on every interactive element and nothing else;
   one shadow — the answer plate, which is this page's "product render". Surfaces, not chrome, divide the page. */

/* 1. Motion. First in the file so a truncated stylesheet can never leave the plate blank.
      main.js sets html[data-motion="on"] only when the visitor has not asked for reduced motion. */
@keyframes answer-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mark-in   { from { opacity: 0; } to { opacity: 1; } }

html[data-motion="on"] .answer-list > li,
html[data-motion="on"] .answer-sources { animation: answer-in 260ms cubic-bezier(0.2, 0, 0, 1) both; }
html[data-motion="on"] .answer-list > li:nth-child(1) { animation-delay: 350ms; }
html[data-motion="on"] .answer-list > li:nth-child(2) { animation-delay: 490ms; }
html[data-motion="on"] .answer-list > li:nth-child(3) { animation-delay: 630ms; }
html[data-motion="on"] .answer-list > li:nth-child(4) { animation-delay: 770ms; }
html[data-motion="on"] .answer-sources { animation-delay: 1000ms; animation-duration: 240ms; }
/* The model has finished. A pause, then the empty slot appears. No movement: it is a gap, not an arrival. */
html[data-motion="on"] .answer-list > li.answer-empty { animation: mark-in 300ms ease-out 1500ms both; }
html[data-motion="on"] .answer-slot-label { animation: mark-in 240ms ease-out 1700ms both; }

@media print, (prefers-reduced-motion: reduce) {
  .answer-list > li, .answer-sources, .answer-slot-label { animation: none !important; }
  * { transition: none !important; }
}

/* 2. Tokens — DESIGN.md `colors:`, `typography:`, `spacing:`, `rounded:` */
:root {
  --primary: #0066cc;          /* Action Blue. The only accent. */
  --primary-focus: #0071e3;    /* focus ring only */
  --primary-on-dark: #2997ff;  /* Sky Link Blue. Dark tiles only. */

  --ink: #1d1d1f;
  --on-dark: #ffffff;
  --body-muted: #cccccc;       /* secondary copy on dark tiles */
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;

  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --tile-1: #272729;
  --tile-2: #2a2a2c;
  --black: #000000;

  --hairline: #e0e0e0;
  --divider-soft: #f0f0f0;
  --hairline-on-dark: rgba(255, 255, 255, 0.14);

  /* ponytail: one stack, not the doc's Display/Text pair — -apple-system already resolves
     SF Pro Display above 19px and SF Pro Text below it, so two identical vars would be dead flexibility.
     No Inter webfont: on non-Apple platforms system-ui is close enough to skip a Google Fonts request. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --content: 980px;   /* text-heavy sections */
  --wide: 1140px;     /* utility card grid */
  --measure: 680px;   /* reading column */
  --pad: 22px;
  --section: 80px;
  --pill: 9999px;
  --product-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.47 var(--sans);
  letter-spacing: -0.374px;
  scroll-padding-top: 44px;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }   /* inherits into .hero h1's block spans */
p { max-width: var(--measure); text-wrap: pretty; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; border-radius: 2px; }

.skip-link { position: absolute; left: 24px; top: -200px; padding: 10px 14px; background: var(--canvas); border-radius: 8px; }
.skip-link:focus { top: 52px; z-index: 20; }

/* 4. Tiles. Edge-to-edge, no radius, no border: the surface colour is the divider. */
main > section { padding: var(--section) 0; }
main > section > * { width: min(var(--content), 100% - var(--pad) * 2); margin-inline: auto; }

.hero { background: var(--parchment); }
.found { background: var(--tile-1); color: var(--on-dark); }
.weekly { background: var(--parchment); }
.weeks { background: var(--canvas); }
.pricing { background: var(--tile-2); color: var(--on-dark); }
.faq { background: var(--canvas); }

.found a:not(.button), .pricing a:not(.button) { color: var(--primary-on-dark); }

h2 { font-size: 40px; line-height: 1.1; letter-spacing: 0; text-align: center; }
h3 { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; }

/* 5. Global nav. True black, 44px, 12px links — the only pure black on the site. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px 28px;
  height: 44px;
  padding-inline: max(var(--pad), (100% - 1024px) / 2);
  background: var(--black);
  color: var(--on-dark);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.12px;
}
.wordmark { display: inline-flex; align-items: center; }
.wordmark:hover { text-decoration: none; }
.wordmark svg { display: block; height: 14px; width: auto; overflow: visible; }
.wordmark-slot { fill: none; stroke: var(--primary); stroke-width: 1.5; }
.wordmark-text { font: 600 20px var(--sans); letter-spacing: -0.32px; fill: currentColor; }
.site-header .wordmark { color: var(--on-dark); }
/* DESIGN.md: the accent becomes Sky Link Blue on dark ground — the nav is the site's only pure black. */
.site-header .wordmark-slot { stroke: var(--primary-on-dark); }
.header-nav { display: flex; gap: 28px; margin-right: auto; }
.header-nav a { color: rgba(255, 255, 255, 0.8); }
.header-nav a:hover { color: var(--on-dark); text-decoration: none; }
.header-cta {
  padding: 6px 14px;
  background: var(--primary);
  color: var(--on-dark);
  border-radius: var(--pill);
  transition: background-color 120ms, transform 120ms;
}
.header-cta:hover { background: var(--primary-focus); color: var(--on-dark); text-decoration: none; }
.header-cta:active { transform: scale(0.95); }

/* 6. Hero tile. Centred stack: headline, lead, CTAs, then the render resting on the surface. */
.hero { padding-top: 96px; text-align: center; }
.hero h1 { font-size: 56px; line-height: 1.07; letter-spacing: -0.28px; }
.hero h1 span { display: block; }
.hero-sub {
  margin: 24px auto 0;
  max-width: 30em;
  font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: 0;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* Buttons. Pill = action, and scale(0.95) is the system-wide press. */
.button {
  display: inline-block;
  padding: 11px 22px;
  background: var(--primary);
  color: var(--on-dark);
  font-size: 17px; line-height: 1.47; letter-spacing: -0.374px;
  border-radius: var(--pill);
  transition: background-color 120ms, transform 120ms;
}
.button:hover { background: var(--primary-focus); color: var(--on-dark); text-decoration: none; }
.button:active { transform: scale(0.95); }
.text-link { font-size: 17px; }

/* 7. The answer plate. The product render: the one element carrying the one shadow. */
.answer { width: min(760px, 100% - var(--pad) * 2); margin: 64px auto 0; }
.answer-plate {
  background: var(--canvas);
  border-radius: 18px;
  box-shadow: var(--product-shadow);
  padding: 32px;
  text-align: left;
}
.answer-query { font-size: 14px; letter-spacing: -0.224px; color: var(--ink-muted-48); padding-bottom: 16px; border-bottom: 1px solid var(--divider-soft); margin-bottom: 20px; max-width: none; }
.answer-list { list-style: none; padding: 0; counter-reset: rec; display: grid; gap: 14px; }
.answer-list > li { position: relative; padding-left: 30px; counter-increment: rec; }
.answer-list > li::before {
  content: counter(rec) ".";
  position: absolute; left: 0; top: 0;
  color: var(--ink-muted-48);
  font-variant-numeric: tabular-nums;
}
.answer-name { font-weight: 600; }
.answer-why { color: var(--ink-muted-80); }
.answer-empty::before { color: var(--primary); }
.answer-slot {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--pill);
  color: var(--primary);
  font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px;
}
.answer-sources {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--divider-soft);
  font-size: 14px; letter-spacing: -0.224px; color: var(--ink-muted-48); max-width: none;
}
.answer-sources-label { margin-right: 4px; }
.answer-source { padding: 4px 12px; background: var(--parchment); border-radius: var(--pill); }
.answer figcaption { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ink-muted-48); margin-top: 20px; text-align: center; }

/* 8. What we found. Dark tile, three figures, no chrome. */
.found { text-align: center; }
.lead { margin-top: 24px; max-width: 34em; font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: 0; color: var(--on-dark); }
.facts { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.fact dt { white-space: nowrap; font-size: 56px; font-weight: 600; line-height: 1.07; letter-spacing: -0.28px; font-variant-numeric: lining-nums tabular-nums; }
.fact dd { margin-top: 12px; color: var(--body-muted); max-width: 24em; margin-inline: auto; }
.found-close { margin-top: 64px; color: var(--body-muted); max-width: 40em; }

/* 9. What you get every week. The utility card grid: white, hairline, 18px, no shadow. */
.weekly-items { width: min(var(--wide), 100% - var(--pad) * 2); margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.weekly-item { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 18px; padding: 24px; }
.weekly-item h3 { font-size: 17px; font-weight: 600; line-height: 1.24; letter-spacing: -0.374px; }
.weekly-item p { margin-top: 12px; color: var(--ink-muted-80); max-width: none; }

/* 10. The first four weeks. Rows, so this tile does not read as a second card grid. */
.weeks-list { list-style: none; padding: 0; counter-reset: wk; margin-top: 48px; max-width: 800px; }
.weeks-list > li { display: grid; grid-template-columns: 88px 1fr; column-gap: 32px; row-gap: 8px; padding: 32px 0; counter-increment: wk; }
.weeks-list > li + li { border-top: 1px solid var(--hairline); }
.weeks-list > li::before { content: counter(wk); grid-row: 1 / span 2; font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--ink-muted-48); font-variant-numeric: tabular-nums; }
.weeks-list > li > * { grid-column: 2; }
.weeks-list h3 { font-size: 17px; font-weight: 600; line-height: 1.24; letter-spacing: -0.374px; }
.weeks-list p { color: var(--ink-muted-80); }

/* 11. Pricing. Dark tile, one price, one pill. */
.pricing { text-align: center; }
.plan { margin-top: 48px; }
.plan-name { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; color: var(--body-muted); }
.plan-price { white-space: nowrap; margin: 12px auto 0; max-width: none; font-size: 56px; font-weight: 600; line-height: 1.07; letter-spacing: -0.28px; font-variant-numeric: lining-nums tabular-nums; }
.plan-period { font-size: 21px; font-weight: 400; color: var(--body-muted); letter-spacing: 0; }
.plan-terms { margin: 12px auto 0; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--body-muted); }
.plan-includes { list-style: none; padding: 0; margin: 40px auto 0; max-width: 520px; text-align: left; }
.plan-includes li { padding: 14px 0; border-bottom: 1px solid var(--hairline-on-dark); }
.plan-includes li:first-child { border-top: 1px solid var(--hairline-on-dark); }
.plan-guarantee { margin: 32px auto 0; }
.plan-note { margin: 12px auto 0; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--body-muted); }
.plan-actions { margin-top: 32px; max-width: none; }

/* 12. Questions. Two columns, hairline rows. */
.faq-list { margin-top: 48px; }
.faq-item { display: grid; grid-template-columns: 5fr 7fr; gap: 12px 40px; padding: 32px 0; }
.faq-item + .faq-item { border-top: 1px solid var(--hairline); }
.faq-item p { color: var(--ink-muted-80); }

/* 13. Footer. Parchment, deliberately dense. */
.site-footer {
  background: var(--parchment);
  color: var(--ink-muted-80);
  padding: 64px 0;
  font-size: 12px; line-height: 1.5; letter-spacing: -0.12px;
}
.site-footer > * { width: min(720px, 100% - var(--pad) * 2); margin-inline: auto; max-width: min(720px, 100% - var(--pad) * 2); }
.footer-mark { margin-bottom: 20px; color: var(--ink); }
.footer-entity { font-size: 0.8rem; color: var(--ink-muted-48); word-break: keep-all; }
.footer-contact { margin-top: 16px; font-size: 14px; letter-spacing: -0.224px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 14px; letter-spacing: -0.224px; }
.footer-copy { margin-top: 20px; color: var(--ink-muted-48); }

/* 14. Legal pages */
.doc { padding: 64px var(--pad) 96px; }
.doc > * { max-width: var(--measure); margin-inline: auto; }
.doc h1 { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
.doc-meta { margin-top: 12px; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ink-muted-48); }
.doc h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.374px; margin-top: 48px; text-align: left; }
.doc p, .doc ul { margin-top: 16px; max-width: var(--measure); }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 8px; }

/* 15. Responsive. Breakpoints from DESIGN.md: 1068 / 833 / 640 / 480. */
@media (max-width: 1068px) {
  .hero h1 { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
  .fact dt, .plan-price { font-size: 48px; }
}
@media (max-width: 833px) {
  :root { --section: 64px; }
  .header-nav { display: none; }
  .wordmark { margin-right: auto; }
  .weekly-items, .facts { grid-template-columns: 1fr; }
  .facts { gap: 40px; }
  .faq-item { grid-template-columns: 1fr; }
  h2 { font-size: 34px; letter-spacing: -0.374px; }
}
@media (max-width: 640px) {
  :root { --section: 48px; --pad: 20px; }
  .hero { padding-top: 64px; }
  .hero h1 { font-size: 34px; letter-spacing: -0.374px; }
  .hero-sub, .lead { font-size: 21px; }
  .answer-plate { padding: 22px; }
  .answer { margin-top: 48px; }
  .weeks-list > li { grid-template-columns: 52px 1fr; column-gap: 20px; }
  .weeks-list > li::before { font-size: 28px; }
  .doc h1 { font-size: 34px; letter-spacing: -0.374px; }
}
@media (max-width: 419px) {
  .hero h1 { font-size: 28px; }
  .fact dt, .plan-price { font-size: 40px; }
}

@media print {
  .skip-link, .site-header { display: none; }
  .found, .pricing { background: none; color: var(--ink); }
  .found a, .pricing a, .lead, .fact dd, .found-close, .plan-name, .plan-period, .plan-terms, .plan-note { color: var(--ink); }
  .plan-includes li, .plan-includes li:first-child { border-color: var(--hairline); }
  .answer-plate { box-shadow: none; border: 1px solid var(--hairline); }
  .button { background: none; color: var(--ink); border: 1px solid var(--ink); }
}