/*
  ToddlerLock site. Implements DESIGN.md, the same system the app ships.
  Tokens are copied, not reinterpreted. If this file and DESIGN.md disagree,
  one of them is a bug.

  Light only, on purpose. DESIGN.md commits the product to a single warm mode
  and the Android theme was moved off DayNight to match. A dark site would
  fracture the brand for no gain.

  Motion is at DESIGN.md's level: state changes only, nothing decorative.
*/

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/bricolage-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/instrument-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/instrument-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/instrument-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/martian-600.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --paper: #F7F3EC;
  --card: #FFFFFF;
  --sunk: #EFE8DD;
  --line: #E4DCD0;

  --ink: #1A1613;
  --ink2: #6B625A;
  --ink3: #6F675E;

  /* Fill only. Raw amber on paper is 2.25, so it is never text. */
  --amber: #E09422;
  --amber-deep: #8E5713;
  --amber-tint: #FBEBD1;

  --r-card: 20px;
  --r-ctl: 16px;
  --r-chip: 12px;
  --r-pill: 999px;

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'SF Mono', monospace;

  --page: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--amber-deep); }

/* ----------------------------------------------------------------- nav */

.nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-link { font-size: 15px; color: var(--ink2); text-decoration: none; }
.nav-link:hover { color: var(--ink); }

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

/* Ink on amber measures 7.22. Paper on amber would be 2.25, so never that. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1);
}

.btn:active { transform: translateY(1px); }

.btn-quiet {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }

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

/* Asymmetric split, not centred. VARIANCE 5: offset, not chaotic. */
.hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: center;
  padding-block: 64px 88px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
}

.hero p {
  margin: 22px 0 0;
  font-size: 19px;
  color: var(--ink2);
  max-width: 46ch;
}

.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* --------------------------------------------------------- phone preview */

/* The hero image is a real capture of the shipping Home screen, rendered from
   the app's own components at 2x. Not an imitation of the product built out of
   divs, which is what was here before and read as exactly that. */
.heroshot { display: flex; justify-content: center; }

.heroshot img {
  width: 330px;
  height: auto;
  border-radius: 30px;
  box-shadow: 0 26px 70px rgba(60, 46, 30, 0.18);
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .heroshot img { width: 300px; }
}

/* The small in-page previews below still use the component styles. */
.phone {
  width: 300px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 30px;
  padding: 22px 18px 20px;
  box-shadow: 0 22px 60px rgba(60, 46, 30, 0.16);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

/* The strip shrinks on purpose: tops aligned, heights stepping down in even
   65px increments, so the three states read as a sequence winding down, not
   as cards that happened to end at different places. Two equal and one short
   read as a bug; three distinct steps read as intent. */
.states > div:nth-child(1) .phone { min-height: 440px; }
.states > div:nth-child(2) .phone { min-height: 390px; }
.states > div:nth-child(3) .phone { min-height: 340px; }

.phone-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
}

.phone-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 20px 0 0;
}

.phone-sub { color: var(--ink2); font-size: 13px; margin: 7px 0 0; }

.phone-pick {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 11px;
  margin-top: 18px;
}

.phone-tile {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-chip);
  background: var(--sunk);
  display: grid; place-items: center;
  color: var(--ink3);
}

.phone-name { font-weight: 600; font-size: 14px; }
.phone-meta { color: var(--ink3); font-size: 11.5px; }

.phone-label {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink3); margin: 18px 0 7px;
}

.phone-chips { display: flex; gap: 6px; }

.phone-chip {
  min-width: 42px; height: 38px;
  padding: 0 10px;
  border-radius: var(--r-chip);
  background: var(--card);
  color: var(--ink2);
  font-size: 13px; font-weight: 600;
  display: grid; place-items: center;
}

.phone-chip.on { background: var(--amber); color: var(--ink); }

.phone-cta {
  margin-top: auto;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--ink);
  font-weight: 600; font-size: 15px;
  display: grid; place-items: center;
}

/* held variant, used in the strip below */
.phone-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: var(--r-pill);
  background: var(--amber-tint);
  color: var(--amber-deep);
  font-size: 11.5px; font-weight: 600;
}

.phone-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

.phone-time {
  font-family: var(--font-mono);
  font-weight: 600; font-size: 34px;
  letter-spacing: -0.05em;
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}

.phone-rail { height: 5px; border-radius: var(--r-pill); background: var(--sunk); margin-top: 11px; overflow: hidden; }
.phone-rail i { display: block; height: 100%; width: 72%; border-radius: var(--r-pill); background: var(--amber); }
.phone-railmeta { display: flex; justify-content: space-between; color: var(--ink3); font-size: 11px; margin-top: 6px; }

.phone-slide {
  display: flex; align-items: center;
  flex: 0 0 52px;
  height: 52px; margin-top: auto; padding: 5px;
  border-radius: var(--r-pill); background: var(--sunk);
  position: relative;
}

.phone-knob {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
}

.phone-slidetext {
  position: absolute; left: 54px; right: 14px;
  text-align: center; color: var(--ink2); font-size: 12.5px;
}

/* -------------------------------------------------------------- sections */

section { padding: 84px 0; }

/* .wrap declares horizontal padding with the shorthand, and on the two
   sections that carry .wrap directly the class beat the element selector and
   zeroed the vertical rhythm. Restore it at equal specificity. */
section.wrap { padding-top: 84px; padding-bottom: 84px; }

.band { background: var(--sunk); }

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 20ch;
}

.lede {
  margin: 18px 0 0;
  font-size: 18px;
  color: var(--ink2);
  max-width: 58ch;
}

/* the three-state strip: one layout family, used once */
.states {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 52px;
  align-items: start;
}

.state-cap {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--ink2);
  max-width: 34ch;
}

.state-cap b { color: var(--ink); font-weight: 600; }

/* tiers: asymmetric two-column, a different family from the strip */
.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.tier {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 30px 28px;
}

.tier-paid { background: var(--ink); color: var(--paper); }

.tier h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.01em;
}

.tier-price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  margin: 8px 0 0;
  color: var(--ink2);
}

.tier-paid .tier-price { color: var(--amber); }

.tier ul { list-style: none; margin: 22px 0 0; padding: 0; }

.tier li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 0;
  font-size: 15.5px;
  color: var(--ink2);
}

.tier-paid li { color: #D9D0C4; }

.tick {
  flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--amber-tint);
  color: var(--amber-deep);
  display: grid; place-items: center;
  margin-top: 1px;
}

.tier-paid .tick { background: rgba(224, 148, 34, 0.22); color: var(--amber); }

/* the privacy statement: full width, no cards, a third family */
.statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 24ch;
}

.statement-body {
  margin: 26px 0 0;
  font-size: 18px;
  color: var(--ink2);
  max-width: 56ch;
}

.closer { text-align: center; padding-block: 96px; }
.closer h2 { margin: 0 auto; max-width: 18ch; }
.closer .hero-actions { justify-content: center; }

/* ------------------------------------------------------------------ foot */

footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 60px;
  color: var(--ink2);
  font-size: 15px;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
}

.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------- article */

.article { max-width: 720px; padding: 56px 0 80px; }
.article h1 { font-size: clamp(32px, 4vw, 44px); }
.article .sub { color: var(--ink2); margin: 12px 0 34px; }
.article h2 { font-size: 21px; margin: 38px 0 10px; max-width: none; }
.article p, .article li { color: var(--ink2); font-size: 16.5px; margin: 0 0 12px; }
.article strong { color: var(--ink); font-weight: 600; }
.article ul { margin: 10px 0 18px; padding-left: 22px; }

.callout {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 22px 24px;
  margin: 0 0 8px;
}

.callout p:last-child { margin-bottom: 0; }

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

/* Below 560 the brand plus a nowrap CTA is wider than the content box, and
   .nav does not wrap, so the document itself got wider than the viewport and
   every section inherited the overflow. The hero CTA sits directly below, so
   dropping the nav one costs nothing.

   The label is not shortened on purpose: two CTAs with the same intent must
   carry the same words, or the page reads as two different offers. */
@media (max-width: 560px) {
  .nav .btn { display: none; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .phone { width: 100%; max-width: 300px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding-block: 40px 64px; }
  .states { grid-template-columns: 1fr; gap: 44px; }
  /* The stepped heights are a three-across composition. In one column they
     only produce dead space above the CTA, so let each card size to content. */
  .states > div:nth-child(1) .phone,
  .states > div:nth-child(2) .phone,
  .states > div:nth-child(3) .phone { min-height: 0; }
  .tiers { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
  section.wrap { padding-top: 60px; padding-bottom: 60px; }
  .closer { padding-block: 68px; }
  body { font-size: 16px; }
  .nav-link.hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}

/* The child's view during a lock: the video and nothing else. Dark because
   video is dark; the one deliberate exception to the paper ground, and the
   point of the panel. */
.phone-dark {
  background: var(--ink);
  border-color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
}

.videoarea {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 220px;
}

.videoglyph {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(247, 243, 236, 0.12);
  color: var(--paper);
  display: grid;
  place-items: center;
}

.videobar { height: 4px; border-radius: 999px; background: rgba(247,243,236,0.18); overflow: hidden; }
.videobar i { display: block; height: 100%; width: 34%; background: var(--amber); border-radius: 999px; }

/* ------------------------------------------------------------------- faq */

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-top: 44px; }

.faq div { max-width: 52ch; }

.faq h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 8px;
}

.faq p { margin: 0; color: var(--ink2); font-size: 15.5px; }

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
}