/* Raka — getraka.com, under the app's own skies (Storybook, FamilySky in
   FamilyStyle.swift). One sky stays fixed behind the page and moves from
   Asr's afternoon to Maghrib's sunset to Isha's night as you scroll
   (home.js); each section says which sky it belongs to (data-sky) and
   night sections switch to the light night colours. */
:root {
  /* Day: Storybook's day tokens */
  --ink: #221748;
  --ink-dim: #3E2F6E;
  --ink-faint: #574A86;
  --gold: #5A3A08;
  --amber: #B07A1E;
  --gold-dim: rgba(176, 122, 30, 0.18);
  --surface: rgba(255, 250, 246, 0.76);
  --raised: rgba(255, 255, 255, 0.88);
  --line: rgba(34, 23, 72, 0.12);
  --line-strong: rgba(34, 23, 72, 0.22);
  --prayed: #2E7A62;
  --cream: #FFF6E6;
  --button: #221748;
  --button-ink: #FFF6E6;
  --shadow: rgba(70, 40, 10, 0.32);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
/* Night: Storybook's night tokens, for Isha's sections. */
.night {
  --ink: #FFF6E6;
  --ink-dim: #E2DDF7;
  --ink-faint: #CFC8EE;
  --gold: #F6C35B;
  --amber: #F6C35B;
  --gold-dim: rgba(246, 195, 91, 0.16);
  --surface: rgba(54, 62, 130, 0.9);
  --raised: rgba(65, 74, 146, 0.95);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.26);
  --button: #FFF6E6;
  --button-ink: #0E1233;
  --shadow: rgba(0, 0, 0, 0.5);
  color: var(--ink);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: #FFE0A3;
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}

/* Decorations may reach past the screen edge. Clip them at main so they
   can never widen the page (iOS Safari would zoom out to fit). clip, unlike
   hidden, doesn't make main a scroll container, so sticky still works. */
main { overflow-x: hidden; }
@supports (overflow: clip) { main { overflow-x: clip; } }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--round); }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.narrow { max-width: 720px; }

/* ---------- The sky, fixed behind everything ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky-layer { position: absolute; inset: 0; transition: opacity 0.9s ease; }
.sky-layer.asr { background: linear-gradient(180deg, #F2BC5E 0%, #FFE0A3 55%, #FFF1D2 100%); }
.sky-layer.maghrib { background: linear-gradient(180deg, #A99BE6 0%, #D8B5E0 45%, #FFD3B8 100%); opacity: 0; }
.sky-layer.isha { background: linear-gradient(180deg, #0E1233 0%, #1C1F4F 60%, #2C2A63 100%); opacity: 0; }
html[data-sky="maghrib"] .sky-layer.maghrib,
html[data-sky="isha"] .sky-layer.maghrib,
html[data-sky="isha"] .sky-layer.isha { opacity: 1; }
.sky .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26vh; min-height: 150px; display: block; }
.sky .sun { position: absolute; border-radius: 50%; }
.asr .sun { width: 140px; height: 140px; right: 10%; top: 14vh; background: #FFE58F; box-shadow: 0 0 0 30px rgba(255, 236, 170, 0.35), 0 0 120px 50px rgba(255, 230, 150, 0.45); }
.maghrib .sun { width: 170px; height: 170px; right: 16%; bottom: 6vh; background: #FFB98C; box-shadow: 0 0 100px 50px rgba(255, 170, 140, 0.45); }
.isha .sun { width: 80px; height: 80px; right: 12%; top: 12vh; background: transparent; box-shadow: 16px -12px 0 0 #F3E7C9; }
.sky .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFF6E6; opacity: 0.75; animation: twinkle var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.85; } }
.cloud { position: absolute; height: 30px; border-radius: 30px; background: rgba(255, 255, 255, 0.72); animation: drift 46s ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 52px; height: 52px; left: 18px; top: -26px; }
.cloud::after { width: 38px; height: 38px; left: 56px; top: -16px; }
.maghrib .cloud { background: rgba(255, 236, 242, 0.62); }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(80px); } }
/* Without the script there's only the afternoon: night sections bring
   their own night. */
html:not(.js) .night { background: #1C1F4F; }

/* ---------- Header: a floating glass bar ---------- */
.site-header { position: sticky; top: 12px; z-index: 50; padding-inline: 12px; margin-top: 12px; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 58px; max-width: 1080px; padding-inline: 20px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 250, 240, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 30px rgba(90, 58, 8, 0.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  transition: background 0.9s ease, border-color 0.9s ease;
}
.brand { display: flex; align-items: center; gap: 10px; color: #221748; font-weight: 800; font-size: 19px; font-family: var(--round); transition: color 0.9s ease; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav { display: flex; gap: 4px; font-size: 15px; font-weight: 600; }
.nav a { color: #3E2F6E; padding: 8px 13px; border-radius: 999px; transition: color 0.2s, background 0.2s; }
.nav a:hover, .nav a[aria-current="page"] { color: #221748; background: rgba(34, 23, 72, 0.07); text-decoration: none; }
html[data-sky="isha"] .site-header .wrap { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)), rgba(20, 24, 60, 0.55); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.35); }
html[data-sky="isha"] .brand { color: #FFF6E6; }
html[data-sky="isha"] .nav a { color: #E2DDF7; }
html[data-sky="isha"] .nav a:hover { color: #FFF6E6; background: rgba(255, 255, 255, 0.08); }

/* ---------- Shared pieces ---------- */
.pill {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--gold); background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(176, 122, 30, 0.3);
  padding: 5px 12px; border-radius: 999px;
}
.night .pill { background: rgba(255, 255, 255, 0.1); border-color: rgba(246, 195, 91, 0.3); }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2, .row-copy h2, .closing h2, .parents h2 {
  font-size: clamp(34px, 5vw, 54px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 900;
  margin: 16px 0 0; text-wrap: balance; color: var(--ink);
}
.store-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--button); color: var(--button-ink);
  border-radius: 14px; padding: 10px 20px 10px 14px;
  font-weight: 700; font-size: 18px; line-height: 1.1;
}
.store-pill svg { width: 26px; height: 26px; }
.store-pill small { display: block; font-size: 11.5px; font-weight: 500; opacity: 0.75; }

/* The launch list (Kit). Tokens only, so it follows day and night. */
.waitlist { width: 100%; max-width: 440px; margin: 10px auto 0; text-align: center; }
.wl-label { display: block; font-weight: 800; font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.wl-row { display: flex; gap: 8px; }
.wl-row input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--raised); border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 12px 14px;
}
.wl-row input::placeholder { color: var(--ink-faint); }
.wl-row input:focus { outline: none; border-color: var(--amber); }
.wl-row button {
  flex: none; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer;
  color: var(--button-ink); background: var(--button); border: 0; border-radius: 14px; padding: 12px 18px;
}
.wl-row button:hover { filter: brightness(1.1); }
.closing .waitlist { margin-top: 26px; }
@media (max-width: 380px) { .wl-row { flex-direction: column; } }

/* A generic phone around an app screen (720 x 1565 captures): graphite
   metal rim, black glass bezel, a faint sheen. No side buttons or other
   iPhone-only details (Apple's marketing guidelines). */
.phone {
  --rim: 3px; --bezel: 9px; --r: 50px;
  position: relative; width: 300px; max-width: 100%;
  border: var(--rim) solid transparent; padding: var(--bezel); border-radius: var(--r);
  background:
    linear-gradient(#040406, #040406) padding-box,
    linear-gradient(135deg, #6E7380 0%, #33363F 14%, #1A1C22 34%, #111216 58%, #262930 80%, #7A7F8C 100%) border-box;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 50px 90px -20px var(--shadow),
    0 20px 40px -10px var(--shadow);
}
.phone::before {
  content: ""; position: absolute; inset: calc(var(--rim) * -1); border-radius: var(--r); padding: var(--rim); pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 22%, transparent 45%, transparent 70%, rgba(255, 255, 255, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.phone::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: calc(var(--r) - var(--rim)); pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 28%, transparent 42%);
}
.phone img, .phone .scr { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1565; border-radius: calc(var(--r) - var(--rim) - var(--bezel)); }
.phone .scr { position: relative; overflow: hidden; container-type: inline-size; isolation: isolate; }

/* ---------- Hero ---------- */
/* The hero runs up behind the floating header (12px gap + 58px bar). */
.hero { --under-header: 70px; position: relative; margin-top: calc(var(--under-header) * -1); padding-block: calc(56px + var(--under-header)) 40px; }
.hero-grid { position: relative; display: grid; gap: 48px; align-items: center; text-align: center; }
.hero h1 { font-size: clamp(46px, 8vw, 84px); line-height: 0.98; letter-spacing: -0.03em; font-weight: 900; margin: 0 0 22px; color: var(--ink); }
.hero h1 em, .closing h2 em { font-style: normal; color: var(--gold); }
.hero-copy p { font-size: clamp(18px, 2.2vw, 21px); font-weight: 500; color: var(--ink-dim); max-width: 30em; margin: 0 auto 32px; text-wrap: pretty; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-note { font-size: 14px; font-weight: 600; color: var(--ink-faint); }
.hero-visual { position: relative; width: min(340px, 100%); margin-inline: auto; }
.hero-visual .phone { width: 100%; rotate: 3deg; }

/* The hero phone: Raka's Family view, drawn in HTML so each square can
   move (home.js plays a week). Sizes are in em of 3.55cqw, so the screen
   scales with the phone like a capture would. */
.fam { position: absolute; inset: 0; font-size: 3.55cqw; font-family: var(--round); color: #221748; background: linear-gradient(180deg, #F2BC5E 0%, #FFE0A3 38%, #FFF1D2 100%); padding: 4.6em 1.05em 1.1em; display: flex; flex-direction: column; gap: 0.7em; text-align: left; line-height: 1.3; }
.fam::before { content: ""; position: absolute; top: 0.95em; left: 50%; transform: translateX(-50%); width: 8.4em; height: 2.4em; border-radius: 2em; background: #000; }
.fam .bar { position: absolute; top: 1.2em; left: 2.6em; right: 2.4em; display: flex; justify-content: space-between; font: 600 1.25em/1 -apple-system, system-ui, sans-serif; color: #221748; }
.fam .bar i { width: 2.2em; height: 1.05em; border: 1.5px solid currentColor; border-radius: 0.3em; position: relative; opacity: 0.85; }
.fam .bar i::after { content: ""; position: absolute; inset: 0.15em 0.35em 0.15em 0.15em; background: currentColor; border-radius: 0.1em; }
.fam .pnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-weight: 800; font-size: 1.3em; }
.fam .pnav span:first-child { color: #5A3A08; font-size: 0.85em; font-weight: 700; }
.fam .chips { display: flex; gap: 0.4em; }
.fam .chip { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.3em 0.7em 0.3em 0.4em; border-radius: 99px; background: rgba(255, 250, 246, 0.75); border: 1px solid rgba(34, 23, 72, 0.12); font-weight: 800; font-size: 0.95em; white-space: nowrap; }
.fam .chip.on { background: #221748; color: #FFF6E6; border-color: #221748; }
.fam .chip svg { width: 1.1em; height: 1.3em; }
.fam .you { width: 1.2em; height: 1.2em; border-radius: 50%; background: #2A3150; color: #F2C46E; display: grid; place-items: center; font-size: 0.7em; }
.fam .pcard { display: flex; align-items: center; gap: 0.7em; background: rgba(255, 255, 255, 0.88); border: 1.3px solid rgba(176, 122, 30, 0.55); border-radius: 1.1em; padding: 0.6em 0.8em; }
.fam .pcard .bd { display: flex; } .fam .pcard .bd svg { width: 1.5em; height: 1.8em; margin-right: -0.5em; }
.fam .pcard b { display: block; font-size: 1.05em; font-weight: 800; }
.fam .pcard span { display: block; font-size: 0.8em; font-weight: 600; color: #3E2F6E; }
.fam .seg { display: grid; grid-template-columns: 1fr 1fr; background: rgba(176, 122, 30, 0.16); border-radius: 0.8em; padding: 0.2em; font-weight: 800; font-size: 0.9em; text-align: center; }
.fam .seg span { padding: 0.3em; border-radius: 0.6em; color: #3E2F6E; }
.fam .seg .on { background: #fff; color: #221748; }
.fam .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.fam .tile { background: rgba(255, 250, 246, 0.75); border: 1px solid rgba(34, 23, 72, 0.12); border-radius: 1em; padding: 0.6em 0.7em; transition: box-shadow 0.4s ease, background 0.4s ease; }
.fam .tile .l { font-size: 0.75em; font-weight: 800; color: #3E2F6E; }
.fam .tile .v { font-weight: 900; font-size: 1.4em; line-height: 1.2; margin-top: 0.05em; }
.fam .tile .v small { font-size: 0.57em; font-weight: 700; color: #3E2F6E; }
.fam .tile .v .gr { display: block; font-size: 0.72em; line-height: 1.65; white-space: nowrap; }
.fam .tile .s { font-size: 0.7em; font-weight: 600; color: #574A86; }
.fam .tile .wk { font-size: 0.7em; font-weight: 800; color: #5A3A08; margin-top: 0.1em; }
.fam .dots { display: flex; gap: 0.3em; margin: 0.3em 0 0.2em; }
.fam .dots i { width: 0.7em; height: 0.7em; border-radius: 50%; box-shadow: inset 0 0 0 1.2px rgba(34, 23, 72, 0.3); transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.fam .dots i.on { background: #B07A1E; box-shadow: none; transform: scale(1.15); }
.fam .tile.reached { background: rgba(255, 240, 205, 0.95); box-shadow: 0 0 0 1.5px rgba(176, 122, 30, 0.7), 0 0.6em 1.8em rgba(176, 122, 30, 0.3); }
.fam .gh { display: flex; justify-content: space-between; font-size: 0.85em; font-weight: 800; color: #3E2F6E; }
/* The prayer names' column fits the longest (Maghrib) in any font. */
.fam .grid { display: grid; grid-template-columns: max-content repeat(7, minmax(0, 1fr)); gap: 0.3em; align-items: center; }
.fam .dh { text-align: center; font-size: 0.65em; font-weight: 700; color: #574A86; line-height: 1.15; }
.fam .dh b { display: block; font-size: 1.3em; color: #3E2F6E; }
.fam .dh.td, .fam .dh.td b { color: #B07A1E; }
.fam .ph { font-size: 0.8em; font-weight: 800; color: #3E2F6E; }
.fam .c { aspect-ratio: 1; border-radius: 0.6em; display: grid; place-items: center; position: relative; background: rgba(34, 23, 72, 0.07); transition: background 0.35s ease, box-shadow 0.35s ease; }
.fam .c .t { color: #fff; font-size: 0.9em; font-weight: 900; opacity: 0; transform: scale(0.4); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.fam .c.prayed { background: #2E7A62; }
.fam .c.prayed .t { opacity: 1; transform: scale(1); }
.fam .c.tog { background: rgba(176, 122, 30, 0.22); box-shadow: inset 0 0 0 1.2px rgba(176, 122, 30, 0.6); }
.fam .c .st { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fam .c .st svg { width: 46%; height: 55%; margin: 0 -7%; opacity: 0; transform: translateY(-0.6em) scale(0.3); transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.3, 1.7, 0.5, 1); }
.fam .c.tog .st svg { opacity: 1; transform: none; }
.fam .c.tog .st svg:nth-child(2) { transition-delay: 0.12s; }
.fam .c.now { background: transparent; box-shadow: inset 0 0 0 1.6px #B07A1E; }
.fam .c.fut { background: transparent; box-shadow: inset 0 0 0 1px rgba(34, 23, 72, 0.25); }
.fam .lg { display: flex; flex-wrap: wrap; gap: 0.3em 0.8em; font-size: 0.7em; font-weight: 700; color: #3E2F6E; }
.fam .lg span { display: inline-flex; align-items: center; gap: 0.3em; }
.fam .lg i { width: 0.8em; height: 0.8em; border-radius: 0.25em; display: inline-block; }
.fam .lg svg { width: 0.8em; height: 1em; }
/* One grid for every row, so the meters start together after the longest name. */
.fam .tbp { background: rgba(255, 250, 246, 0.75); border: 1px solid rgba(34, 23, 72, 0.12); border-radius: 1em; padding: 0.6em 0.8em; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 0.4em 0.45em; align-items: center; }
.fam .tbp .h { grid-column: 1 / -1; font-size: 0.7em; letter-spacing: 0.08em; font-weight: 800; color: #3E2F6E; display: flex; justify-content: space-between; }
.fam .tbp .r { display: contents; font-size: 0.75em; font-weight: 800; color: #3E2F6E; }
.fam .tbp .meter { height: 0.4em; border-radius: 0.2em; background: rgba(34, 23, 72, 0.1); overflow: hidden; }
.fam .tbp .meter i { display: block; height: 100%; background: #B07A1E; border-radius: 0.2em; transition: width 0.5s ease; }
.fam .tbp .r b { color: #221748; text-align: right; }
.fam .toast { position: absolute; left: 1.4em; right: 1.4em; top: 4.2em; background: #fff; border-radius: 1.2em; box-shadow: 0 0.8em 2.4em rgba(34, 23, 72, 0.2); padding: 0.7em 0.9em; display: flex; align-items: center; gap: 0.6em; font-size: 0.95em; font-weight: 800; opacity: 0; transform: translateY(-1em); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); z-index: 2; }
.fam .toast i { width: 1.6em; height: 1.6em; border-radius: 50%; background: #B07A1E; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 0.9em; flex: none; }
.fam .toast.show { opacity: 1; transform: none; }
.fam .spark { position: absolute; width: 0.6em; height: 0.6em; border-radius: 50%; background: #F6C35B; opacity: 0; pointer-events: none; }
.fam .spark.go { animation: spark 0.9s ease-out forwards; }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); } }

/* ---------- Statement, lit word by word ---------- */
.statement { position: relative; padding-block: 72px 96px; text-align: center; }
.statement p {
  max-width: 900px; margin: 0 auto; color: var(--ink); font-family: var(--round);
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  text-wrap: balance;
}
.statement .u { position: relative; white-space: nowrap; }
.statement .u .w { color: #8A5A12 !important; }
.statement .stroke { position: absolute; left: -2%; bottom: -0.3em; width: 104%; height: 0.4em; overflow: visible; }
.statement .stroke path { fill: none; stroke: #B07A1E; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease) 0.15s; }
.statement p.done .stroke path, html:not(.js) .statement .stroke path { stroke-dashoffset: 0; }
.js .statement p .w { opacity: 0.22; transition: opacity 0.35s ease; }
.js .statement p .w.lit { opacity: 1; }

/* ---------- Showcase rows ---------- */
.showcase { display: grid; gap: 110px; padding-block: 48px 110px; }
.row { display: grid; gap: 40px; align-items: center; text-align: center; }
.row-copy p { color: var(--ink-dim); font-size: 18px; font-weight: 500; max-width: 26em; margin: 16px auto 0; }
.row-visual { perspective: 1400px; display: flex; justify-content: center; }
.tilt {
  --edge: 1;
  width: 280px;
  transform: rotateY(var(--ry, -16deg)) rotateX(var(--rx, 6deg)) rotateZ(var(--rz, 2deg));
  transition: transform 0.2s linear;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    calc(var(--edge) * 1px) 1px 0 #34373F,
    calc(var(--edge) * 2px) 2px 0 #2D3037,
    calc(var(--edge) * 3px) 3px 0 #272A30,
    calc(var(--edge) * 4px) 4px 0 #222429,
    calc(var(--edge) * 5px) 5px 0 #1D1F23,
    calc(var(--edge) * 6px) 6px 0 #18191D,
    calc(var(--edge) * 7px) 7px 0 #141518,
    calc(var(--edge) * 30px) 60px 90px -20px var(--shadow);
}
.flip .tilt { --ry: 16deg; --rz: -2deg; --edge: -1; }
/* Help to stay consistent: the blocking row, then the other aids */
.consistent { display: grid; gap: 40px; }
.aids { display: grid; gap: 12px; }
/* On a phone, each is a compact row: the icon beside its text. */
@media (max-width: 759px) {
  .aids .card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .aids .card .badge { width: 40px; height: 40px; margin: 0; grid-row: span 2; }
  .aids .card h3 { margin: 0 0 2px; }
}

/* ---------- For parents ---------- */
.parents { padding-block: 40px 110px; }
.parents .head { max-width: 680px; }
.parents .lead { font-size: clamp(18px, 2.2vw, 21px); font-weight: 500; color: var(--ink-dim); margin: 16px 0 0; }
.parents-grid { display: grid; gap: 16px; margin-top: 36px; align-items: start; }
.p-cards { display: grid; gap: 14px; }
.p-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 22px 24px; }
.p-card .badge { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-dim); color: var(--gold); display: grid; place-items: center; margin-bottom: 12px; }
.p-card .badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-card h3 { margin: 0 0 6px; font-size: 20px; font-weight: 900; line-height: 1.2; }
.p-card p { margin: 0; color: var(--ink-dim); font-size: 16px; }
.parents .row-visual { margin-top: 8px; }
.p-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; color: var(--ink-dim); font-size: 15px; font-weight: 600; max-width: 40em; }
.p-note svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Three promises ---------- */
.trio { display: grid; gap: 16px; padding-block: 40px 96px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.card .badge {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold-dim); color: var(--gold);
  display: grid; place-items: center; margin-bottom: 16px;
}
.card .badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.card p { margin: 0; color: var(--ink-dim); font-size: 15.5px; }

/* ---------- Plans ---------- */
.plans-section { padding-bottom: 96px; }
.plans { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.plan.pro { border-color: rgba(246, 195, 91, 0.5); background: linear-gradient(160deg, rgba(246, 195, 91, 0.16), rgba(246, 195, 91, 0.02) 60%), var(--surface); }
.plan h3 { margin: 0 0 4px; font-size: 22px; font-weight: 900; }
.plan .sub { color: var(--ink-dim); font-size: 15px; margin: 0 0 16px; }
.plan ul { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 15.5px; }
.plan li { margin: 6px 0; }

/* ---------- Closing ---------- */
.closing { text-align: center; padding-block: 24px 120px; }
.closing .logo { width: 68px; height: 68px; border-radius: 16px; filter: drop-shadow(0 0 30px rgba(246, 195, 91, 0.4)); }
.closing h2 { margin: 18px 0 32px; }
.closing h2 em { display: inline-block; text-wrap: balance; }

/* Scroll reveals (only when JS runs, so the page never hides content without it) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Documents: privacy, terms, support ---------- */
.doc { margin-block: 32px 72px; width: calc(100% - 24px); padding: 36px clamp(20px, 5vw, 44px) 44px; background: rgba(255, 250, 246, 0.86); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 28px; box-shadow: 0 20px 60px rgba(90, 58, 8, 0.12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.doc h1 { font-size: clamp(30px, 5vw, 40px); margin: 0 0 6px; letter-spacing: -0.01em; font-weight: 900; }
.doc .updated { color: var(--ink-faint); font-size: 15px; margin: 0 0 32px; }
.doc h2 { font-size: 21px; margin: 36px 0 8px; font-weight: 800; }
.doc h3 { font-size: 17px; margin: 22px 0 4px; }
.doc p, .doc li { color: var(--ink-dim); }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.summary { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-bottom: 8px; }
.summary p { margin: 0 0 8px; }
.summary ul { margin: 0; }

/* Support */
[hidden] { display: none !important; }
.search { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 16px; }
.search::placeholder { color: var(--ink-faint); }
.search:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.no-results { margin-top: 18px; }
.faq-group { margin-top: 30px; }
.faq-group h2 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
details { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; }
summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "›"; display: inline-block; color: var(--ink-faint); transition: transform 0.15s; }
details[open] summary::after { transform: rotate(90deg); }
details .answer { padding: 0 18px 14px; }
details .answer p { margin: 0 0 8px; }
.contact { background: rgba(176, 122, 30, 0.12); border-radius: 18px; padding: 24px; text-align: center; margin-top: 36px; }
.contact h2 { margin: 0 0 6px; font-size: 21px; }
.contact p { margin: 0 0 16px; }
.email { font-size: 19px; font-weight: 700; }
.contact .tip { font-size: 14.5px; margin: 16px auto 0; max-width: 34em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 26px; color: var(--ink-faint); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--ink-dim); }
/* Short pages keep the footer at the bottom, over the hills. */
body.doc-page { min-height: 100vh; display: flex; flex-direction: column; }
body.doc-page .site-footer { margin-top: auto; background: rgba(255, 250, 246, 0.7); }

/* Tablet and up */
@media (min-width: 760px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: 1fr 1fr; }
  .p-cards { grid-template-columns: 1fr 1fr; }
  .aids { grid-template-columns: 1fr 1fr; }
}

/* Desktop: side-by-side hero, rows and parents */
@media (min-width: 960px) {
  .hero { padding-block: calc(40px + var(--under-header)) 48px; }
  /* The whole phone fits on a laptop screen. */
  .hero-visual { width: clamp(280px, calc((100vh - 150px) * 0.45), 340px); }
  .hero-grid { grid-template-columns: 1.15fr 1fr; text-align: left; }
  .hero-copy p { margin-inline: 0; }
  .hero-actions { align-items: flex-start; }
  .hero .waitlist { margin-inline: 0; text-align: left; }
  .row { grid-template-columns: 1fr 1fr; text-align: left; gap: 64px; }
  .row-copy p { margin-inline: 0; }
  .row.flip .row-copy { order: 2; }
  .tilt { width: 300px; }
  .parents-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; }
  .aids { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
  .site-header { top: 8px; padding-inline: 8px; }
  .site-header .wrap { padding-inline: 16px 6px; }
  .nav { gap: 0; font-size: 14px; }
  .nav a { padding: 8px 10px; }
  .nav .hide-sm { display: none; }
  .hero { padding-block: calc(36px + var(--under-header)) 24px; }
  .asr .sun { width: 96px; height: 96px; top: 11vh; right: 6%; }
  /* On a phone the hero's headline fills that part of the sky. */
  .cloud.c1 { display: none; }
}

/* Respect reduced motion: final states, no movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky .star, .cloud { animation: none; }
  .js .reveal { transform: none; transition: opacity 0.3s; }
  .tilt { transition: none; }
  .fam .c .t, .fam .c .st svg, .fam .dots i, .fam .toast, .fam .tile, .fam .tbp .meter i { transition: none !important; }
}