/* slumberpal.app (T28-04, T28-15): the house look on the web. Tokens are SleepSkyColors
   (docs/design/style-guide.md §2); the rules are .claude/skills/slumberpal-brand/SKILL.md.
   Nunito Sans only. One gold primary per page. Motion only in the hero scene, and only when the
   visitor has not asked for reduced motion. Nothing here loads from any other origin. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/NunitoSans-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}
:root {
  --night-top: #0b1736;
  --night-bottom: #1a3b7e;
  --on-night: #ffffff;
  --on-night-muted: #d5e0f7;
  --shell: #eff7fc;
  --row: #f0f6ff;
  --card: #ffffff;
  --ink: #14254b;
  --ink-muted: #475674;
  --selected: #1c326d;
  --chip: #dfeeff;
  --cta: #ffd66d;
  --plus-note: #fff5da;
  --rule: #d6e2f0;
  --shadow: 0 8px 24px rgba(20, 37, 75, 0.08);
  --radius-card: 24px;
  --radius-button: 16px;
  --radius-note: 16px;
  --gutter: 16px;
  --measure: 38rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}
a { color: var(--selected); text-underline-offset: 0.15em; text-decoration-thickness: 1.5px; touch-action: manipulation; }
a:hover { text-decoration-thickness: 2.5px; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--selected); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--card); padding: 8px 12px; z-index: 2; border-radius: 10px; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
h1 { font-size: 2.125rem; line-height: 1.1; }
h2 { font-size: 1.625rem; margin-top: 32px; }
h3 { font-size: 1.375rem; margin-top: 24px; }
p, ul, ol, table, pre, blockquote, details { margin: 0 0 16px; }
ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 8px; }
img, video { max-width: 100%; height: auto; display: block; }
.meta, .small, figcaption { color: var(--ink-muted); font-size: 0.9375rem; }
blockquote { border-left: 4px solid var(--rule); padding-left: 16px; color: var(--ink-muted); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; }
pre { white-space: pre-wrap; border: 1px solid var(--rule); background: var(--card); border-radius: 12px; padding: 12px; font-size: 0.875rem; line-height: 1.5; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
th { background: var(--row); font-weight: 800; overflow-wrap: normal; hyphens: none; white-space: nowrap; }
td { overflow-wrap: normal; }
article table { font-size: 0.9375rem; }
tr:last-child td { border-bottom: 0; }
@media (max-width: 40rem) {
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table, tbody, tr, td { display: block; }
  td::before { content: attr(data-label); display: block; font-weight: 800; color: var(--ink-muted); font-size: 0.875rem; }
  tr { border-bottom: 2px solid var(--rule); padding: 8px 12px; }
  td { border: 0; padding: 4px 0; }
}

/* Header: burger, logo, short nav; the side menu opens with a checkbox, no script */
.top { display: flex; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 10px var(--gutter); }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: 1; }
.brand img { width: 200px; height: auto; }
.top-nav { display: none; }
.top-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 0; }
.top-nav a { display: inline-block; padding: 10px 0; font-weight: 800; text-decoration: none; }
.top-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.burger { color: inherit; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 5px; cursor: pointer; touch-action: manipulation; }
.burger span { display: block; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.burger:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.menu { position: fixed; inset: 0 auto 0 0; width: min(360px, 90vw); background: var(--shell); color: var(--ink); padding: 0 0 24px; overflow-y: auto; transform: translateX(-100%); transition: transform 180ms ease; z-index: 20; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.menu-head { background: linear-gradient(180deg, var(--night-top), var(--night-bottom)); padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-head img { width: 150px; height: auto; }
.menu-close { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--on-night-muted); color: var(--on-night); font-weight: 800; cursor: pointer; touch-action: manipulation; }
.menu-close:focus-visible { outline: 3px solid var(--on-night); outline-offset: 2px; }
.menu-scrim { position: fixed; inset: 0; background: rgba(11, 23, 54, 0.5); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 19; }
.menu:target { transform: none; }
.menu:target ~ .menu-scrim { opacity: 1; pointer-events: auto; }
.menu-list, .menu-list ul { list-style: none; padding: 0; margin: 0; }
.menu-list { display: grid; gap: 12px; padding: 0 var(--gutter); }
.menu-card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 12px 16px 6px; }
.menu-group { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.0625rem; margin: 0 0 4px; color: var(--ink); }
.menu-group .bubble { width: 34px; height: 34px; margin: 0; }
.menu-group .bubble .icon { width: 20px; height: 20px; }
.menu-card li + li { border-top: 1px solid var(--rule); }
.menu-list a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 0; text-decoration: none; font-weight: 400; color: var(--ink); }
.menu-list a[aria-current="page"] { font-weight: 800; }
.menu-list .chev { color: var(--ink-muted); font-size: 1.5rem; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .menu, .menu-scrim { transition: none; } }
@media (min-width: 48rem) { .top-nav { display: block; } .burger, .menu, .menu-scrim { display: none; } .brand { flex: initial; margin-right: auto; } .brand img { width: 240px; } }
main { max-width: 1120px; margin: 0 auto; padding: 8px var(--gutter) 24px; }
article { max-width: var(--measure); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 24px var(--gutter); margin: 8px auto 32px; }
article h1 { margin-top: 0; }
article.wide { max-width: 1120px; }
article.wide > :not(.lead-tiles):not(.step):not(h1) { max-width: var(--measure); }
/* A section with a figure beside it (content/site/en-GB/<page>.figures.json): text, then the figure. */
.step { display: grid; gap: 20px 32px; align-items: start; margin: 8px 0 16px; }
.step-text > :first-child { margin-top: 0; }
.fig { margin: 8px 0 0; }
.fig figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--ink-muted); }
.fig.scene-fig .tablet.small { max-width: none; }
.fig.scene-fig .plate.day.on { opacity: 1; }
.fig.image img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--rule); }
.phone-stage.single .phone3d.front { width: min(58%, 230px); transform: rotateY(-14deg) rotateX(3deg); }
@media (min-width: 48rem) {
  .step { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
  .step .phone-stage .phone3d { width: min(64%, 180px); }
  .step .phone-stage.single .phone3d.front { width: min(58%, 170px); }
  .step .step-text { max-width: var(--measure); }
  .fig.phone-stage { padding-top: 0; }
}
.lead-tiles { margin: 8px 0 12px; }
footer { border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: 0.9375rem; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 24px var(--gutter) 32px; }
footer nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
footer nav a { display: inline-block; padding: 8px 0; }

/* Buttons: one gold primary per page, outline for the rest (style guide §4) */
.button-gold, .button-outline {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 28px;
  border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; line-height: 1.2;
}
.button-gold { background: var(--cta); color: var(--ink); transition: background-color 120ms ease, transform 120ms ease; }
.button-gold:hover { background: #ffcc45; }
.button-outline:hover { background: var(--chip); }
.button-gold, .button-outline, summary { touch-action: manipulation; }
.button-outline { border: 2px solid var(--selected); color: var(--selected); border-radius: var(--radius-button); min-height: 48px; padding: 10px 20px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.coming { color: var(--on-night-muted); font-weight: 800; }
.button-outline.on-night { border-color: var(--on-night-muted); color: var(--on-night); }
.hero-secondary { margin: 4px 0 0; }
.hero-secondary a { color: var(--on-night); font-weight: 800; }
.hero-secondary a:focus-visible { outline-color: var(--on-night); }
.trust { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--on-night-muted); font-size: 0.9375rem; }
.trust li { margin: 0; }
.trust li + li::before { content: "\00b7"; margin: 0 10px; color: var(--cta); font-weight: 800; }
.home .hero .hero-secondary { display: none; }
@media (min-width: 48rem) { .home .hero .hero-secondary { display: block; } }
/* The official store badges, unaltered, at exactly the same height. Google's PNG is cropped to its own
   box (its transparent clear space removed, the artwork untouched) so both boxes measure the same; the
   clear space both guidelines ask for is the gap and margin here. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.badge { display: inline-flex; align-items: center; border-radius: 10px; }
.badge img { display: block; height: 64px; width: auto; }
.badge:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; }
.badge.is-pending { opacity: 0.9; }
.dock .badges { flex-wrap: nowrap; gap: 10px; justify-content: center; }
.dock .badge img { height: 52px; }
.menu-foot { padding: 4px var(--gutter) 0; margin: 0; }
.menu-foot .badges { gap: 8px 10px; }
.menu-foot .badge img { height: 48px; }
.menu-foot .small { margin: 6px 0 0; }
/* The store buttons docked to the foot of a phone screen; dissolved into the page from tablet width */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--card); box-shadow: 0 -8px 24px rgba(20, 37, 75, 0.12); padding: 10px max(var(--gutter), env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.dock-inner { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.dock .button-gold { flex: 1; min-height: 52px; }
.dock .badges { justify-content: center; }
.dock .coming { color: var(--ink-muted); font-size: 0.875rem; }
.dock .button-outline.on-night { border-color: var(--selected); color: var(--selected); }
.home { padding-bottom: 84px; scroll-padding-bottom: 96px; }
.home .hero .actions { display: none; }

@media (min-width: 48rem) { .dock { display: none; } .home { padding-bottom: 0; } .home .hero .actions { display: flex; } }

/* Home: the hero band is the one dark panel on the page, and the header sits inside it */
.home main { max-width: none; padding: 0; }
.home .top { position: absolute; left: 0; right: 0; top: 0; z-index: 1; color: var(--on-night); }
.home .top-nav a { color: var(--on-night); }
.home .top-nav a:focus-visible { outline-color: var(--on-night); }
.home { position: relative; }
.home .hero { padding-top: 132px; }
.hero { background: linear-gradient(180deg, var(--night-top) 0%, var(--night-bottom) 100%); color: var(--on-night); padding: 32px 0 40px; overflow: hidden; }
.hero-inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 32px; }
.hero h1 { color: var(--on-night); max-width: 22ch; }
.hero p { color: var(--on-night-muted); max-width: var(--measure); font-size: 1.125rem; }
.hero .sub { color: var(--cta); font-size: 1.375rem; font-weight: 800; line-height: 1.3; margin: 0 0 12px; max-width: 26ch; text-wrap: balance; }
.hero .coming { color: var(--on-night-muted); }
.prereg-note { margin: 8px 0 0; font-size: 0.9375rem; color: var(--ink-muted); max-width: 34rem; }
.hero .prereg-note { color: var(--on-night-muted); }
.closing .prereg-note { margin-left: auto; margin-right: auto; }
.hero .actions .button-gold:focus-visible { outline-color: var(--on-night); }

/* A pause or play button inside the tablet, bottom right: a checkbox with no script pauses the keyframes (WCAG 2.2.2) */
.pause-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pause-label { position: absolute; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 23, 54, 0.74); color: var(--on-night); cursor: pointer; touch-action: manipulation; z-index: 1; }
.pause-label:hover { background: rgba(11, 23, 54, 0.9); }
.pause-toggle:focus-visible ~ .pause-label { outline: 3px solid var(--cta); outline-offset: 2px; }
.pause-label .when-paused, .pause-toggle:checked ~ .pause-label .when-playing { display: none; }
.pause-toggle:checked ~ .pause-label .when-paused { display: block; }
.pause-toggle:checked ~ .scene .star, .pause-toggle:checked ~ .scene .plate.day { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pause-toggle, .pause-label { display: none; } }

/* The drawn tablet, and the Pal Screen scene inside it */
.tablet { position: relative; width: 100%; max-width: 640px; margin: 0; padding: 14px; background: #0a1024; border: 2px solid #2a3c6e; border-radius: 28px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); }
.scene, .screen-video { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 14px; overflow: hidden; background: #0b1736; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate.day { opacity: 0; }
/* The six stars where the app draws them: contracts/scene/scene-geometry-v2.json starArc.centres over the
   1920x1080 master, star 1 at the left going out first (stars/star_layer.dart); the default star size,
   110 design px at a 1194 px reference width, is 9.21% of the scene's width. */
.stars { position: absolute; inset: 0; }
.star { position: absolute; width: 9.21%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px rgba(255, 214, 109, 0.6)); }
.s1 { left: 21.25%; top: 53.52%; }
.s2 { left: 30.47%; top: 35.28%; }
.s3 { left: 43.12%; top: 25.28%; }
.s4 { left: 56.88%; top: 25.28%; }
.s5 { left: 69.53%; top: 35.28%; }
.s6 { left: 78.75%; top: 53.52%; }
.tag { position: absolute; right: 10px; top: 10px; background: rgba(11, 23, 54, 0.74); color: var(--on-night); font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .plate.day { animation: dawn 18s ease-in-out infinite; }
  .star { animation: star-out 18s ease-in-out infinite; }
  .s1 { animation-delay: 0s; } .s2 { animation-delay: 1.4s; } .s3 { animation-delay: 2.8s; } .s4 { animation-delay: 4.2s; } .s5 { animation-delay: 5.6s; } .s6 { animation-delay: 7s; }
  .scene.still .star { animation: none; }
}
@keyframes star-out { 0%, 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 20%, 82% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 90%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes dawn { 0%, 55% { opacity: 0; } 70%, 84% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes sunrise { 0%, 55% { transform: translateY(140%); } 70%, 84% { transform: translateY(0); } 95%, 100% { transform: translateY(140%); } }
@keyframes hill { 0%, 55% { background: #0f2650; } 70%, 84% { background: #7fb46d; } 95%, 100% { background: #0f2650; } }
/* Without motion the hero shows the draw itself: the sun up, the stars gone, the hill green. */
@media (prefers-reduced-motion: reduce) {
  .hero .star { opacity: 0; }
  .hero .plate.day { opacity: 1; }
}

/* The experience: three numbered tiles (bedtime, sleep time, morning) */
.experience { counter-reset: tile; }
.experience .tile { counter-increment: tile; position: relative; }
.experience .tile h3::before { content: counter(tile) ". "; color: var(--selected); }
.mini.scene.still { aspect-ratio: auto; }
.mini.scene.still .plate { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; }
.mini.scene.still .stars { inset: 6px; }
.star.out { opacity: 0.25; }
.plain { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 14px; }
.plain li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; margin: 0; }
.plain .bubble { margin: 0; }
.plain h3 { font-size: 1.125rem; margin: 6px 0 2px; }
.plain p { margin: 0; color: var(--ink-muted); }
.band-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.band-head h2 { margin: 0; }
.band-head .pill { margin-top: 0; }
.rail { list-style: none; margin: 20px 0 0; padding: 4px 4px 18px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: var(--selected) var(--chip); -webkit-overflow-scrolling: touch; }
.rail:focus-visible { outline: 3px solid var(--selected); outline-offset: 2px; border-radius: 12px; }
.rail-item { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
.rail-item .tablet.small { max-width: none; }
.rail-item h3 { margin: 14px 0 4px; font-size: 1.0625rem; }
.rail-item p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }
.rail-item .pill { margin-top: 8px; }
.rail-actions { margin-top: 10px; }
.scene.drawn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 48rem) { .rail-item { flex-basis: 330px; } }
.top-nav .nav-get { color: var(--ink); background: var(--cta); padding: 8px 14px; border-radius: 999px; }
.home .top-nav .nav-get { color: var(--ink); }

/* Tiles: a drawn mini screen, a title and a line */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
ol.tiles { counter-reset: none; }
.tiles li, .tiles .tile { margin: 0; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 12px 12px 16px; }
.tiles h3 { font-size: 1.125rem; margin: 10px 0 4px; }
.tiles p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }
.mini { position: relative; border-radius: 12px; overflow: hidden; background: #0a1024; padding: 6px; }
.mini svg { display: block; width: 100%; height: auto; }
.mini-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #0b1736; }
.mini .tag { top: 10px; right: 10px; font-size: 0.6875rem; }
.pill { display: inline-block; margin-top: 10px; background: var(--plus-note); color: var(--ink); font-weight: 800; font-size: 0.8125rem; padding: 4px 10px; border-radius: 999px; }
.pill.free { background: #e3f1e8; color: #2e6b45; }
.guides h3 { font-size: 1.125rem; margin: 0 0 4px; }
.guides h3 a { text-decoration-thickness: 1.5px; }
/* Two real phone screens at an angle: the Sleep times page in front, Today behind */
.phone-stage { margin: 0; position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; perspective: 1400px; padding: 12px 0 0; }
.phone3d { width: min(62%, 250px); border-radius: 30px; background: #0a1024; padding: 10px; box-shadow: 0 24px 48px rgba(20, 37, 75, 0.28); grid-area: 1 / 1; }
.phone3d img { width: 100%; height: auto; border-radius: 22px; display: block; }
.phone3d.front { transform: rotateY(-16deg) rotateX(3deg) translateX(14%); z-index: 1; }
.phone3d.back { transform: rotateY(-22deg) rotateX(3deg) translateX(-42%) translateY(-6%) scale(0.92); filter: brightness(0.92); }
.phone-stage figcaption { grid-area: 2 / 1; margin-top: 16px; }
.remote .split { align-items: center; }

/* Own pal: two numbered steps, the photos then the screen */
.own-steps { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.own-steps li { margin: 0; position: relative; padding-top: 20px; }
.own-steps .step-number { position: static; display: inline-grid; margin: 0 0 8px; }
.own-steps h3 { margin: 0 0 12px; font-size: 1.25rem; }
.own-steps p { margin: 12px 0 0; color: var(--ink-muted); }
.own-steps .photos { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.own-steps .photos img { border-width: 3px; }
.own-steps .tablet.small { max-width: none; margin: 0; }
.photos { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photos img { border-radius: 20px; border: 4px solid var(--card); box-shadow: var(--shadow); }
.tablet.small { max-width: 420px; margin: 0; padding: 10px; border-radius: 20px; border-bottom: 2px solid #2a3c6e; box-shadow: var(--shadow); }
.tablet.small .scene, .tablet.small .screen-video { border-radius: 10px; }
.scene.still { background: linear-gradient(180deg, #0b1736 0%, #1a3b7e 60%, #2d5aa8 100%); }
.scene.still .s1, .scene.still .s2 { opacity: 0.35; }

/* Sections on the shell */
.band { max-width: 1120px; margin: 0 auto; padding: 32px var(--gutter) 8px; }
.band > h2 { margin-top: 0; }
.lead { max-width: var(--measure); font-size: 1.125rem; }
.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 20px var(--gutter); }
.card h2, .card h3 { margin-top: 0; }
.split { display: grid; gap: 24px; align-items: center; }
.split img { border-radius: 16px; }
.split p:last-child, .split ul:last-child { margin-bottom: 0; }
.steps-card { display: grid; gap: 16px; align-items: center; }
.steps-card img { border-radius: 16px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { position: relative; padding: 4px 0 4px 60px; margin: 0; }
.steps li::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: -14px; width: 2px; background: var(--rule); }
.steps li:last-child::after { display: none; }
.steps li:last-child .step-number { background: var(--success-fill, #e3f1e8); color: #2e6b45; }
.steps h3 { margin: 0 0 4px; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--ink-muted); }
.step-number { position: absolute; left: 0; top: 2px; width: 44px; height: 44px; border-radius: 50%; background: var(--cta); color: var(--ink); font-weight: 800; display: grid; place-items: center; font-size: 1.125rem; }
.note { background: var(--row); border-radius: var(--radius-note); padding: 12px 16px; font-weight: 800; }
.photos { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photos img { border-radius: 20px; border: 4px solid var(--card); box-shadow: var(--shadow); }
.photos figcaption { grid-column: 1 / -1; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cards li { margin: 0; }
.bubble { width: 42px; height: 42px; border-radius: 50%; background: var(--chip); color: var(--selected); display: grid; place-items: center; margin-bottom: 12px; }
.cards h3 { font-size: 1.25rem; margin: 0 0 4px; }
.cards p { margin: 0; color: var(--ink-muted); }
.promise ul { padding-left: 1.25rem; }
.plans { display: grid; gap: 12px; margin-bottom: 16px; }
.plan .price { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.plan .price-note { font-size: 0.9375rem; color: var(--ink-muted); margin: 0 0 12px; }
.plan-plus { background: var(--plus-note); }
.plan ul { margin: 0; padding-left: 1.25rem; }
.ways { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ways li { background: var(--card); border-radius: 12px; padding: 10px 14px; margin: 0; box-shadow: var(--shadow); }
.faq details { background: var(--card); border-radius: var(--radius-note); box-shadow: var(--shadow); padding: 0 16px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 800; padding: 16px 0; list-style-position: inside; }
.faq details[open] summary { border-bottom: 1px solid var(--rule); }
.faq details p { padding: 12px 0 16px; margin: 0; color: var(--ink-muted); }
.closing { padding-bottom: 32px; }
.closing .actions { margin-top: 16px; }

@media (min-width: 48rem) {
  :root { --gutter: 24px; }
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  .brand img { width: 200px; }
  .hero { padding-top: 48px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
  .hero { padding-bottom: 56px; }
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .own-steps { grid-template-columns: 1fr 1fr; }
  .own-steps .photos { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 28px; }
  .steps-card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards.why { grid-template-columns: repeat(2, 1fr); }
  .tiles.three { grid-template-columns: repeat(3, 1fr); }
  .tiles.six { grid-template-columns: repeat(3, 1fr); }
  .home .hero { padding-top: 120px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .band { padding-top: 48px; }
}
@media (min-width: 70rem) {
  .hero-inner { grid-template-columns: 6fr 6fr; }
  .tiles.six { grid-template-columns: repeat(6, 1fr); }
  .cards.why { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 30rem) and (max-width: 48rem) {
  .tiles.six, .tiles.three { grid-template-columns: repeat(2, 1fr); }
}

/* Analytics consent (docs/decisions/2026-11-01-site-google-analytics.md): asked once, at the foot of the
   screen, two buttons of one size and weight; the page stays readable behind it. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--card); color: var(--ink); box-shadow: 0 -8px 24px rgba(20, 37, 75, 0.16); border-top: 1px solid var(--rule); padding: 14px max(var(--gutter), env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.consent[hidden] { display: none; }
.consent p { max-width: 1120px; margin: 0 auto 10px; font-size: 0.9375rem; }
.consent-actions { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; }
.consent-button { flex: 1 1 10rem; min-height: 48px; padding: 10px 18px; border-radius: var(--radius-button); border: 2px solid var(--selected); background: var(--card); color: var(--selected); font: 800 1rem/1.2 inherit; font-family: inherit; cursor: pointer; touch-action: manipulation; }
.consent-button:focus-visible { outline: 3px solid var(--selected); outline-offset: 2px; }
.linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--selected); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.linklike[hidden] { display: none; }
@media (min-width: 48rem) {
  .consent { padding-top: 16px; }
  .consent-actions { justify-content: flex-end; }
  .consent-button { flex: 0 0 auto; min-width: 11rem; }
}