/* littleturns.app. Palette B from docs/spec.md section 9: orange is the adult (rounded square),
   blue is the child (circle), ink for every control. Grain: noise.png over soft gradients. */

@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #FBFAF7;
  --card: #FFFFFF;
  --fill: #F1F0EC;
  --ink: #23251E;
  --ink-soft: #3E4038;
  --secondary: #62645D;
  --hair: #E4E2DC;
  --adult: #D36340;
  --adult-soft: #F2A585;
  --child: #1666AA;
  --child-soft: #7FB8EC;
  --child-tint: #E7F4FF;
  --bar-low: #9EC3E2;
  --good: #397949;
  --link: #1666AA;
  --shadow: 0 2px 16px rgba(35, 37, 30, 0.06);
  --grain: 0.42;
  --blob-1: rgba(127, 184, 236, 0.75);
  --blob-2: rgba(242, 165, 133, 0.7);
  --blob-3: rgba(231, 244, 255, 0.95);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121310;
    --card: #1C1C18;
    --fill: #191A16;
    --ink: #F5F4EF;
    --ink-soft: #DCDBD4;
    --secondary: #A8A7A0;
    --hair: #33332B;
    --adult: #E7764F;
    --adult-soft: #E7764F;
    --child: #7FB8EC;
    --child-soft: #7FB8EC;
    --child-tint: #16283A;
    --bar-low: #3B5F7D;
    --good: #6FC28F;
    --link: #7FB8EC;
    --shadow: none;
    --grain: 0.5;
    --blob-1: rgba(22, 102, 170, 0.6);
    --blob-2: rgba(211, 99, 64, 0.38);
    --blob-3: rgba(22, 40, 58, 0.9);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); }
h1 { font-weight: 900; font-size: clamp(2.5rem, 1.55rem + 4.2vw, 4.5rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 1.25rem; text-wrap: balance; }
h2 { font-weight: 850; font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.875rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
h3 { font-weight: 800; font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--child); outline-offset: 3px; border-radius: 8px; }
strong { font-weight: 600; color: var(--ink); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
.center { text-align: center; }
.muted { color: var(--secondary); }
.fine { font-size: 0.875rem; color: var(--secondary); line-height: 1.55; margin-top: 2rem; }
.lead { font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem); line-height: 1.55; color: var(--ink-soft); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--card); color: var(--ink); padding: 0.75rem 1rem; border-radius: 12px; }
.skip:focus { top: 8px; }

/* The two marks: adult a rounded square (radius a quarter of its size), child a circle. */
.mark { display: inline-block; width: 0.75rem; height: 0.75rem; flex: none; }
.mark.adult { background: var(--adult); border-radius: 25%; }
.mark.child { background: var(--child); border-radius: 50%; }

/* ---------- Header and footer ---------- */
.site-header { position: relative; z-index: 3; }
.home .site-header { position: absolute; inset: 0 0 auto 0; }
.page .site-header { border-bottom: 1px solid var(--hair); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.875rem; }
.brand { display: inline-flex; align-items: center; gap: 0.3125rem; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand .mark { width: 0.875rem; height: 0.875rem; }
.brand-name { font-family: "Nunito", sans-serif; font-weight: 850; font-size: 1.3125rem; letter-spacing: -0.01em; margin-left: 0.375rem; }
.top-nav { display: flex; flex-wrap: wrap; gap: 0.125rem; margin-inline: -0.75rem; }
.top-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; border-radius: 999px; color: var(--ink-soft); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.top-nav a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (max-width: 719px) { .top-nav { width: calc(100% + 1.5rem); } .top-nav a { font-size: 0.875rem; padding: 0 0.625rem; } }
@media (min-width: 720px) { .top-nav { margin-inline: 0 -0.75rem; } }

.site-footer { border-top: 1px solid var(--hair); padding-block: 2.5rem 3.5rem; color: var(--secondary); font-size: 0.9375rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-row nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.footer-row nav a:hover { text-decoration: underline; }
.site-footer p { margin: 0 0 0.5rem; max-width: 70ch; }
.site-footer p a { color: var(--secondary); }

/* ---------- Grain: soft gradient blobs with film grain on top ---------- */
.grain-scene, .grain-dark, .grain-card { position: relative; overflow: hidden; isolation: isolate; }
.grain-scene::after, .grain-dark::after, .grain-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: url("/assets/noise.png") 0 0 / 256px; mix-blend-mode: overlay; opacity: var(--grain);
}
@media (min-resolution: 2dppx) { .grain-scene::after, .grain-dark::after, .grain-card::after { background-size: 128px; } }
.grain-scene > :not(.blobs), .grain-dark > :not(.blobs), .grain-card > * { position: relative; z-index: 1; }
.blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; }

/* ---------- Hero ---------- */
.hero { background: var(--ground); padding-block: 9.5rem 5.5rem; }
/* The hero's gradient and grain fade into the page instead of ending on a hard line. */
.hero .blobs, .hero::after { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.hero .b1 { width: 820px; height: 820px; top: -340px; right: -220px; background: radial-gradient(closest-side, var(--blob-1), transparent); }
.hero .b2 { width: 560px; height: 560px; top: 200px; right: 160px; background: radial-gradient(closest-side, var(--blob-2), transparent); }
.hero .b3 { width: 760px; height: 520px; bottom: -330px; left: -240px; background: radial-gradient(closest-side, var(--blob-3), transparent); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 4rem; } }
.eyebrow { display: inline-flex; align-items: center; gap: 0.3125rem; margin: 0 0 1.5rem; padding: 0.375rem 0.875rem 0.375rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--card) 72%, transparent); border: 1px solid var(--hair); font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.eyebrow .mark { width: 0.625rem; height: 0.625rem; }
.eyebrow .mark.child { margin-right: 0.375rem; }
.hero-copy .lead { max-width: 36rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; }
.cta-row.center { justify-content: center; }
.cta-note { margin: 0; font-size: 0.9375rem; color: var(--secondary); }
.soon { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 52px; padding: 0 1.375rem; border-radius: 14px; background: var(--ink); color: var(--ground); font-weight: 600; font-size: 1rem; }
.soon-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--child-soft); }
.store-badge { display: inline-flex; min-height: 44px; }
.store-badge img { display: block; height: 45px; width: auto; }

/* The live session (board 8b), drawn in CSS with the app's tokens, so it is light or dark with the page.
   The looping demo (count, chain, timer, lanes, insight) is generated below by website/live_demo.py. */
@property --turns { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --chain { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --ss { syntax: "<integer>"; inherits: false; initial-value: 0; }
.phone { --cell: 13.5px; --ring-track: #EEEDE8; justify-self: center; width: min(310px, 100%); padding: 10px; border-radius: 52px; background: #0B0C0A; box-shadow: 0 40px 80px -30px rgba(18, 19, 16, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
@media (prefers-color-scheme: dark) { .phone { --ring-track: #2A2A23; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px #33332B; } }
.phone-screen { border-radius: 42px; background: var(--ground); color: var(--ink); padding: 2.75rem 1rem 1.125rem; overflow: hidden; }
.lt-screen { display: flex; flex-direction: column; gap: 0.75rem; }
.phone-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; }
.chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.875rem; padding: 0 0.625rem 0 0.75rem; border-radius: 999px; background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--hair) inset; font-weight: 600; }
.chev { width: 0.375rem; height: 0.375rem; margin-top: -0.1875rem; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.listening { display: inline-flex; align-items: center; gap: 0.4375rem; color: var(--secondary); font-weight: 600; }
.live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.lt-timer { margin-left: 0.25rem; color: var(--ink); font-variant-numeric: tabular-nums; counter-reset: ss var(--ss); }
.lt-timer::after { content: "00:" counter(ss, decimal-leading-zero); }
.live-ring { position: relative; width: 12.5rem; height: 12.5rem; margin: 0.5rem auto 0; border-radius: 50%; background: var(--card); box-shadow: 0 2px 14px rgba(35, 37, 30, 0.07); }
@media (prefers-color-scheme: dark) { .live-ring { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); } }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke-width: 3.2; }
.ring-track { stroke: var(--ring-track); }
.ring-arc { stroke-linecap: round; }
.lt-arc-adult { stroke: var(--adult); }
.lt-arc-child { stroke: var(--child); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lt-count { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 5rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; counter-reset: turns var(--turns); }
.lt-count::after { content: counter(turns); }
.phone-label { color: var(--secondary); font-size: 0.875rem; }
.chain-pill { width: fit-content; margin: 0 auto 0.125rem; display: inline-flex; align-items: center; min-height: 1.875rem; padding: 0 0.875rem; border-radius: 999px; background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--hair) inset; font-size: 0.75rem; font-weight: 700; counter-reset: chain var(--chain); }
.lt-chain::after { content: "Longest chain \00B7  " counter(chain) " in a row"; }
.lanes-card { padding: 0.75rem 0.875rem; border-radius: 20px; background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--hair) inset; display: grid; gap: 0.5rem; }
.lanes-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.6875rem; color: var(--secondary); }
.lanes-head span:first-child { font-weight: 600; }
.lane { display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; }
.lane-name { font-size: 0.6875rem; color: var(--secondary); }
.lane-window { width: calc(var(--cell) * 14); overflow: hidden; justify-self: end; }
.lt-row { display: flex; width: max-content; }
.lt-row i { flex: 0 0 var(--cell); height: var(--cell); display: grid; place-items: center; }
.lt-row i::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--hair); }
.lt-row i.sq::before { width: 9.5px; height: 9.5px; border-radius: 25%; background: var(--adult); }
.lt-row i.ci::before { width: 9.5px; height: 9.5px; border-radius: 50%; background: var(--child); }
.insight { display: flex; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: 18px; background: var(--child-tint); font-size: 0.8125rem; line-height: 1.45; }
.sparkle { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.125rem; background: var(--child); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.lt-lines { display: grid; }
.lt-line { grid-area: 1 / 1; }
.phone-buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.625rem; font-size: 0.8125rem; font-weight: 600; }
.phone-buttons span { display: flex; align-items: center; justify-content: center; gap: 0.4375rem; min-height: 2.75rem; border-radius: 999px; }
.btn-2 { background: var(--card); box-shadow: 0 0 0 1.5px var(--hair) inset; }
.btn-1 { background: var(--ink); color: var(--ground); }
.pause { width: 0.5625rem; height: 0.625rem; border: solid currentColor; border-width: 0 3px; }
.stop { width: 0.5625rem; height: 0.5625rem; border-radius: 2px; background: currentColor; }
.phone .live-ring { animation: none; }
@media (prefers-reduced-motion: no-preference) { .phone .live-ring { animation: breathe 3s ease-in-out infinite alternate; } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.03); } }
/* live-demo: generated by website/live_demo.py, edit the script instead */
.lt-row { transform: translateX(calc(var(--cell) * -8)); }
.lt-count { --turns: 6; }
.lt-chain { --chain: 6; }
.lt-timer { --ss: 15; }
.lt-arc-adult { stroke-dasharray: 19.75 276.46; }
.lt-arc-child { stroke-dasharray: 19.75 276.46; stroke-dashoffset: -28.04; }
.lt-line { opacity: 0; }
.lt-line-5 { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .lt-screen, .lt-row, .lt-count, .lt-chain, .lt-timer, .lt-arc-adult, .lt-arc-child, .lt-insight, .lt-line { animation: 20s linear infinite both; }
  .lt-screen { animation-name: lt-screen; }
  .lt-row { animation-name: lt-shift; }
  .lt-count { animation-name: lt-count; }
  .lt-chain { animation-name: lt-chain; }
  .lt-timer { animation-name: lt-timer; }
  .lt-arc-adult { animation-name: lt-arc-adult; }
  .lt-arc-child { animation-name: lt-arc-child; }
  .lt-insight { animation-name: lt-insight; }
  @keyframes lt-screen { 0% { opacity: 0; } 2.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes lt-shift { 0% { transform: translateX(0); } 6% { transform: translateX(calc(var(--cell) * -0)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 8.5% { transform: translateX(calc(var(--cell) * -1)); } 16% { transform: translateX(calc(var(--cell) * -1)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 18.5% { transform: translateX(calc(var(--cell) * -2)); } 26% { transform: translateX(calc(var(--cell) * -2)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 28.5% { transform: translateX(calc(var(--cell) * -3)); } 36% { transform: translateX(calc(var(--cell) * -3)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 38.5% { transform: translateX(calc(var(--cell) * -4)); } 46% { transform: translateX(calc(var(--cell) * -4)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 48.5% { transform: translateX(calc(var(--cell) * -5)); } 56% { transform: translateX(calc(var(--cell) * -5)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 58.5% { transform: translateX(calc(var(--cell) * -6)); } 66% { transform: translateX(calc(var(--cell) * -6)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 68.5% { transform: translateX(calc(var(--cell) * -7)); } 76% { transform: translateX(calc(var(--cell) * -7)); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 78.5% { transform: translateX(calc(var(--cell) * -8)); } 100% { transform: translateX(calc(var(--cell) * -8)); } }
  @keyframes lt-count { 0% { --turns: 0; } 16% { --turns: 0; } 16.1% { --turns: 1; } 26% { --turns: 1; } 26.1% { --turns: 2; } 36% { --turns: 2; } 36.1% { --turns: 3; } 46% { --turns: 3; } 46.1% { --turns: 4; } 56% { --turns: 4; } 56.1% { --turns: 5; } 76% { --turns: 5; } 76.1% { --turns: 6; } 100% { --turns: 6; } }
  @keyframes lt-chain { 0% { --chain: 0; } 16% { --chain: 0; } 16.1% { --chain: 1; } 26% { --chain: 1; } 26.1% { --chain: 2; } 36% { --chain: 2; } 36.1% { --chain: 3; } 46% { --chain: 3; } 46.1% { --chain: 4; } 56% { --chain: 4; } 56.1% { --chain: 5; } 76% { --chain: 5; } 76.1% { --chain: 6; } 100% { --chain: 6; } }
  @keyframes lt-timer { 0% { --ss: 0; } 5% { --ss: 0; } 5.1% { --ss: 1; } 10% { --ss: 1; } 10.1% { --ss: 2; } 15% { --ss: 2; } 15.1% { --ss: 3; } 20% { --ss: 3; } 20.1% { --ss: 4; } 25% { --ss: 4; } 25.1% { --ss: 5; } 30% { --ss: 5; } 30.1% { --ss: 6; } 35% { --ss: 6; } 35.1% { --ss: 7; } 40% { --ss: 7; } 40.1% { --ss: 8; } 45% { --ss: 8; } 45.1% { --ss: 9; } 50% { --ss: 9; } 50.1% { --ss: 10; } 55% { --ss: 10; } 55.1% { --ss: 11; } 60% { --ss: 11; } 60.1% { --ss: 12; } 65% { --ss: 12; } 65.1% { --ss: 13; } 70% { --ss: 13; } 70.1% { --ss: 14; } 75% { --ss: 14; } 75.1% { --ss: 15; } 80% { --ss: 15; } 80.1% { --ss: 16; } 85% { --ss: 16; } 85.1% { --ss: 17; } 90% { --ss: 17; } 90.1% { --ss: 18; } 95% { --ss: 18; } 95.1% { --ss: 19; } 100% { --ss: 19; } }
  @keyframes lt-arc-adult { 0% { stroke-dasharray: 15.21 276.46; stroke-dashoffset: 0.00; opacity: 1; } 76% { stroke-dasharray: 15.21 276.46; stroke-dashoffset: 0.00; opacity: 1; } 78.5% { stroke-dasharray: 19.75 276.46; stroke-dashoffset: 0.00; opacity: 1; } 100% { stroke-dasharray: 19.75 276.46; stroke-dashoffset: 0.00; opacity: 1; } }
  @keyframes lt-arc-child { 0% { stroke-dasharray: 0.00 276.46; stroke-dashoffset: -23.50; opacity: 0; } 16% { stroke-dasharray: 0.00 276.46; stroke-dashoffset: -23.50; opacity: 0; } 18.5% { stroke-dasharray: 4.94 276.46; stroke-dashoffset: -23.50; opacity: 1; } 36% { stroke-dasharray: 4.94 276.46; stroke-dashoffset: -23.50; opacity: 1; } 38.5% { stroke-dasharray: 9.87 276.46; stroke-dashoffset: -23.50; opacity: 1; } 56% { stroke-dasharray: 9.87 276.46; stroke-dashoffset: -23.50; opacity: 1; } 58.5% { stroke-dasharray: 14.81 276.46; stroke-dashoffset: -23.50; opacity: 1; } 66% { stroke-dasharray: 14.81 276.46; stroke-dashoffset: -23.50; opacity: 1; } 68.5% { stroke-dasharray: 19.75 276.46; stroke-dashoffset: -23.50; opacity: 1; } 76% { stroke-dasharray: 19.75 276.46; stroke-dashoffset: -23.50; opacity: 1; } 78.5% { stroke-dasharray: 19.75 276.46; stroke-dashoffset: -28.04; opacity: 1; } 100% { stroke-dasharray: 19.75 276.46; stroke-dashoffset: -28.04; opacity: 1; } }
  @keyframes lt-insight { 0%, 16.5% { opacity: 0; } 18.5%, 100% { opacity: 1; } }
  @keyframes lt-line-1 { 0%, 16.75% { opacity: 0; } 18.5% { opacity: 1; } 36% { opacity: 1; } 37.25%, 100% { opacity: 0; } }
  .lt-line-1 { animation-name: lt-line-1; }
  @keyframes lt-line-2 { 0%, 36.75% { opacity: 0; } 38.5% { opacity: 1; } 46% { opacity: 1; } 47.25%, 100% { opacity: 0; } }
  .lt-line-2 { animation-name: lt-line-2; }
  @keyframes lt-line-3 { 0%, 46.75% { opacity: 0; } 48.5% { opacity: 1; } 56% { opacity: 1; } 57.25%, 100% { opacity: 0; } }
  .lt-line-3 { animation-name: lt-line-3; }
  @keyframes lt-line-4 { 0%, 56.75% { opacity: 0; } 58.5% { opacity: 1; } 76% { opacity: 1; } 77.25%, 100% { opacity: 0; } }
  .lt-line-4 { animation-name: lt-line-4; }
  @keyframes lt-line-5 { 0%, 76.75% { opacity: 0; } 78.5% { opacity: 1; } 100% { opacity: 1; } }
  .lt-line-5 { animation-name: lt-line-5; }
}
/* /live-demo */

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem); }
.tinted { background: var(--fill); }
.kicker { margin: 0 0 0.875rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); }
.split { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.split-body p, .split-lead { font-size: 1.125rem; color: var(--ink-soft); }
.card { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); border: 1px solid transparent; }
@media (prefers-color-scheme: dark) { .card { border-color: var(--hair); } }

.research { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 800px) { .research { grid-template-columns: 1fr 1fr; } }
.quote { margin: 0; padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-family: "Nunito", sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.quote figcaption { font-size: 0.9375rem; color: var(--secondary); }
.quote cite { font-style: italic; }

.steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 1.75rem; }
.step-n { display: block; font-family: "Nunito", sans-serif; font-weight: 900; font-size: 3rem; line-height: 1; color: var(--child); margin-bottom: 1.25rem; font-variant-numeric: tabular-nums; }
.step p { margin: 0; color: var(--secondary); }

.features { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.feature { padding: 1.5rem; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); border: 1px solid transparent; }
@media (prefers-color-scheme: dark) { .feature { border-color: var(--hair); } }
.feature p { margin: 0; color: var(--secondary); font-size: 1rem; }
.feature h3 { font-size: 1.125rem; }
.feature-mark { display: flex; align-items: flex-end; gap: 6px; height: 28px; margin-bottom: 1.125rem; }
.feature-mark .mark { width: 1rem; height: 1rem; }
.feature-mark .bar { width: 10px; border-radius: 3px; background: var(--child); }
.feature-mark .b-1 { height: 12px; background: var(--bar-low); }
.feature-mark .b-2 { height: 20px; }
.feature-mark .b-3 { height: 28px; }
.feature-mark .ring { width: 28px; height: 28px; border-radius: 50%; border: 5px solid var(--child); border-left-color: var(--bar-low); border-bottom-color: var(--bar-low); transform: rotate(45deg); }
.feature-mark .doc { width: 22px; height: 28px; border-radius: 5px; border: 2px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) 4px 8px / 10px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 4px 14px / 8px 2px no-repeat; }
.feature-mark .island { width: 46px; height: 16px; border-radius: 999px; background: var(--ink); margin-bottom: 6px; }

/* ---------- On-device AI ---------- */
.ai-panel { border-radius: 32px; padding: clamp(1.75rem, 1rem + 4vw, 4rem); background: #0F1A26; color: #F5F4EF; --grain: 0.55; }
@media (prefers-color-scheme: dark) { .ai-panel { box-shadow: 0 0 0 1px #2A3340 inset; } }
.ai-panel .c1 { width: 720px; height: 720px; top: -380px; left: -200px; background: radial-gradient(closest-side, rgba(22, 102, 170, 0.85), transparent); }
.ai-panel .c2 { width: 640px; height: 640px; bottom: -380px; right: -160px; background: radial-gradient(closest-side, rgba(211, 99, 64, 0.6), transparent); }
.ai-panel h2, .ai-panel h3 { color: #FFFFFF; }
.kicker.on-dark { color: rgba(245, 244, 239, 0.72); }
.ai-head { max-width: 46rem; }
.ai-lead { font-size: 1.125rem; color: rgba(245, 244, 239, 0.86); margin: 0; }
.ai-grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 800px) { .ai-grid { grid-template-columns: 1fr 1fr; } }
.ai-item { padding: 1.5rem; border-radius: 20px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); }
.ai-item h3 { font-size: 1.3125rem; }
.ai-item p:last-child { margin: 0; color: rgba(245, 244, 239, 0.84); font-size: 1rem; }
.tag { display: inline-block; margin: 0 0 0.875rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #F5F4EF; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ai-item.plain .tag { background: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset; }
.ai-foot { margin: 1.75rem 0 0; font-size: 0.9375rem; color: rgba(245, 244, 239, 0.78); }

/* ---------- Privacy ---------- */
.facts { margin: 0; }
.fact { display: grid; gap: 0.25rem 1.5rem; padding-block: 1.125rem; border-top: 1px solid var(--hair); }
.fact:last-child { border-bottom: 1px solid var(--hair); }
@media (min-width: 600px) { .fact { grid-template-columns: 11rem 1fr; } }
.fact dt { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 1.125rem; }
.fact dd { margin: 0; color: var(--secondary); }
.arrow-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.arrow-link::after { content: "→"; margin-left: 0.375rem; transition: transform 0.25s ease-out; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- Pricing, ElevenLabs-style plan cards ---------- */
.pricing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 2rem; }
.pricing-head h2 { margin: 0; }
.pricing-sub { margin: 0; max-width: 26rem; color: var(--ink-soft); font-size: 1.0625rem; }
.plans { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-col { display: flex; flex-direction: column; gap: 1rem; }
.plan { min-height: 18rem; padding: 1.75rem; border-radius: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.plan h3 { margin: 0; font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em; }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.badge { padding: 0.125rem 0.75rem; border-radius: 999px; border: 1.5px solid currentColor; font-size: 0.875rem; font-weight: 600; }
.plan-price p { margin: 0; }
.plan-was { font-size: 0.9375rem; opacity: 0.86; margin-bottom: 0.25rem !important; }
.price { font-family: "Inter", sans-serif; font-weight: 600; font-size: 2.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-right: 0.25rem; }
.plan.featured { color: #FFFFFF; --grain: 0.35; background: linear-gradient(155deg, #0F2D5C 0%, #1666AA 100%); }
/* The Yearly card's art: the live screen's lanes, your squares and your child's circles taking turns,
   fading out before the text. */
.lanes-art { position: absolute !important; z-index: 0 !important; top: 0; right: 0; width: 52%; height: 74%;
  -webkit-mask-image: radial-gradient(130% 110% at 100% 0%, #000 30%, rgba(0, 0, 0, 0.45) 55%, transparent 80%);
  mask-image: radial-gradient(130% 110% at 100% 0%, #000 30%, rgba(0, 0, 0, 0.45) 55%, transparent 80%); }
.lanes-art .la { fill: #E7764F; }
.lanes-art .lc { fill: #7FB8EC; }
.plan.featured h3 { color: #FFFFFF; }
.plan.stone { background: #F2F0EC; color: var(--ink); --grain: 0.5; box-shadow: 0 0 0 1px var(--hair) inset; }
@media (prefers-color-scheme: dark) { .plan.stone { background: #22231E; } }
.pill { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 1.5rem; border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.pill:hover { text-decoration: none; background: color-mix(in srgb, var(--ink) 88%, var(--ground)); }
.pill-soon { cursor: default; }
.pill-soon:hover { background: var(--ink); }
.includes { padding-top: 0.25rem; }
.includes-title { margin: 0; color: var(--secondary); font-size: 1rem; }
.dotted { list-style: none; margin: 0; padding: 0; }
.dotted li { position: relative; padding: 0.8125rem 0 0.8125rem 1.75rem; border-bottom: 2px dotted var(--hair); font-size: 1rem; }
.dotted li::before { content: ""; position: absolute; left: 0.125rem; top: 1.2rem; width: 0.5rem; height: 0.875rem; border: solid var(--good); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- Questions ---------- */
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { position: relative; display: flex; align-items: center; min-height: 44px; padding: 1.125rem 2.5rem 1.125rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 0.625rem; height: 0.625rem; margin-top: -0.4375rem; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.25s ease-out; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -0.125rem; }
.faq details p { margin: 0 0 1.25rem; color: var(--secondary); max-width: 62ch; }

/* ---------- Closing band ---------- */
.closing-wrap { padding-top: 0; }
.closing { border-radius: 32px; padding: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(1.25rem, 4vw, 3rem); text-align: center; background: var(--fill); }
.closing .b1 { width: 620px; height: 620px; top: -320px; right: -160px; background: radial-gradient(closest-side, var(--blob-1), transparent); }
.closing .b2 { width: 520px; height: 520px; bottom: -300px; left: -120px; background: radial-gradient(closest-side, var(--blob-2), transparent); }
.closing .b3 { width: 420px; height: 420px; top: -120px; left: 30%; background: radial-gradient(closest-side, var(--blob-3), transparent); }
.closing .lead { max-width: 34rem; margin-inline: auto; }

/* ---------- Inner pages ---------- */
.page main { padding-block: 2.5rem 1rem; }
.page main > h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); margin-top: 1rem; }
.page main > h2 { font-size: 1.625rem; margin-top: 3rem; }
.contact { padding: 1.75rem; margin-top: 2rem; }
.contact h2 { font-size: 1.5rem; }
.contact p:last-child { margin: 0; }
.prose h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.875rem); margin-top: 1rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.prose h3 { font-size: 1.1875rem; margin-top: 1.75rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.375rem; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2rem 0; }
.lost { text-align: center; padding-block: 5rem 4rem !important; }
.lost-marks { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.lost-marks .mark { width: 2.5rem; height: 2.5rem; }
.lost .pill { display: inline-flex; margin-top: 1rem; }

/* ---------- Motion: only when the reader allows it ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero .b1, .closing .b1 { animation: drift 18s ease-in-out infinite alternate; }
  .hero .b2, .closing .b2 { animation: drift 22s ease-in-out infinite alternate-reverse; }
  .ai-panel .c2 { animation: drift 20s ease-in-out infinite alternate; }
  .soon-dot { animation: pulse 2.4s ease-out infinite; }
}
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.08); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(127, 184, 236, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(127, 184, 236, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 184, 236, 0); } }

@media (max-width: 719px) {
  .hero { padding-block: 8.25rem 4rem; }
  .hero .b1 { width: 520px; height: 520px; top: -240px; right: -220px; }
  .hero .b2 { width: 380px; height: 380px; top: 520px; right: -140px; }
  .hero .b3 { width: 520px; height: 420px; bottom: -260px; left: -260px; }
}