/* The home page (home.mjs, home.js), and the small pieces the questions and contact pages share with it. */
:root {
  /* The app's category tiles: a soft pair, and the ink that reads on it. */
  --c-feed: #FFF0E5, #FFD9C0; --k-feed: #8F4A2A;
  --c-diaper: #E8F2FD, #C3DCF8; --k-diaper: #164A80;
  --c-sleep: #EFEBFE, #D6CEFB; --k-sleep: #33278A;
  --c-growth: #E7F6EC, #C3E8CF; --k-growth: #175A35;
  --c-med: #FDEBEF, #F8CAD4; --k-med: #85203A;
  --c-care: #E8F5FC, #C8E7F6; --k-care: #1D5C7D;
  --c-rose: #FAEEF5, #F0D7E6; --k-rose: #6E2D58;
  --card-ink: #271D1F; --card-ink-2: #4E4043;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
    --c-feed: #3A2014, #4E2B1B; --k-feed: #FFC9A6;
    --c-diaper: #142640, #1C3456; --k-diaper: #A9CFF7;
    --c-sleep: #231C48, #2E255D; --k-sleep: #CFC6FF;
    --c-growth: #14301F, #1B402A; --k-growth: #A6E5BD;
    --c-med: #3D1824, #4E202F; --k-med: #FFB8C8;
    --c-care: #13283A, #1A364C; --k-care: #A8DDF5;
    --c-rose: #33192B, #43223A; --k-rose: #F3CFE6;
    --card-ink: #FBF3F6; --card-ink-2: #E4D7E0;
  }
}
:root[data-theme="dark"] {
    --c-feed: #3A2014, #4E2B1B; --k-feed: #FFC9A6;
    --c-diaper: #142640, #1C3456; --k-diaper: #A9CFF7;
    --c-sleep: #231C48, #2E255D; --k-sleep: #CFC6FF;
    --c-growth: #14301F, #1B402A; --k-growth: #A6E5BD;
    --c-med: #3D1824, #4E202F; --k-med: #FFB8C8;
    --c-care: #13283A, #1A364C; --k-care: #A8DDF5;
    --c-rose: #33192B, #43223A; --k-rose: #F3CFE6;
    --card-ink: #FBF3F6; --card-ink-2: #E4D7E0;
  }

.feed { --c: var(--c-feed); --k: var(--k-feed); }
.diaper { --c: var(--c-diaper); --k: var(--k-diaper); }
.sleep { --c: var(--c-sleep); --k: var(--k-sleep); }
.growth { --c: var(--c-growth); --k: var(--k-growth); }
.med { --c: var(--c-med); --k: var(--k-med); }
.care { --c: var(--c-care); --k: var(--k-care); }
.rose { --c: var(--c-rose); --k: var(--k-rose); }

.h2026 h2:not(.h2) { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; text-wrap: balance; }
.h2026 .eyebrow { display: block; font-size: 14px; font-weight: 700; color: var(--k); margin-bottom: 8px; }
:where(.h2026) :where(button) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ── Hero: what Bani is, in five seconds ── */
.h2026 .hero { min-height: min(100svh, 920px); }
.h2026 .hero .wrap { padding-top: 96px; }
.h2026 .hero .kicker { color: var(--ink-2); font-weight: 600; margin-bottom: 20px; }
.h2026 .hero h1 { font-size: clamp(48px, 6.6vw, 96px); letter-spacing: -0.02em; line-height: 1; }
.h2026 .hero .lead { max-width: 28ch; }
.h2026 .hero .phone-wrap { width: min(360px, 74vw); margin-bottom: -130px; }
.h2026 .hero .phone.front { transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) rotate(-2.5deg); }
/* Bani stands on top of the phone, waves hello, and hops on a tap. */
.peek { position: absolute; z-index: 3; top: -112px; inset-inline-end: 16%; width: 104px; height: 114px; cursor: pointer; transform: rotate(-2.5deg); animation: peek 0.9s var(--ease-out) 0.4s both; }
.peek .bani-bunny { width: 100%; height: 100%; filter: drop-shadow(0 10px 12px rgba(30, 50, 90, 0.18)); }
@keyframes peek { from { opacity: 0; transform: translateY(30px) rotate(-2.5deg); } }
/* A real family notification from the app, arriving. */
.note-card { position: absolute; z-index: 3; top: 26%; inset-inline-start: -34%; width: max-content; max-width: 260px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.92); color: #271D1F; box-shadow: 0 20px 44px -20px rgba(30, 30, 60, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: arrive 0.8s var(--ease-out) 1.6s both; }
.note-card .ni { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #E7F0FA; display: grid; place-items: center; }
.note-card .ni svg { width: 14px; height: 22px; fill: #7FB3EA; }
.note-card b { display: block; font-size: 15px; }
.note-card span span { display: block; font-size: 14px; color: #5C4D50; }
.note-card time { align-self: flex-start; font-size: 12px; color: #7A6A6D; margin-inline-start: 6px; }
@keyframes arrive { from { opacity: 0; transform: translateY(-14px) scale(0.96); } }
@media (max-width: 900px) {
  .h2026 .hero .wrap { padding-top: 104px; gap: 120px; }
  .h2026 .hero .hero-text { text-align: center; }
  .h2026 .hero .lead { margin-inline: auto; }
  .h2026 .hero .btns { justify-content: center; }
  .note-card { inset-inline-start: -12%; top: 45%; }
}
@media (max-width: 560px) {
  .h2026 .hero h1 { font-size: clamp(42px, 12vw, 56px); }
  .h2026 .hero .btns .btn { width: 100%; justify-content: center; }
  .h2026 .hero .pill { min-height: 0; padding: 0; background: none; font-size: 15px; }
  .note-card { inset-inline-start: -4%; top: 47%; padding: 10px 12px; }
  .peek { width: 70px; height: 77px; top: -75px; }
}

/* ── One day with Bani: a 24-hour dial in the day's own sky. Tap an hour; the sky, the clock and the screen follow. ── */
.day .dpin { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 10vw, 128px) 0; background: linear-gradient(160deg, var(--sky1) 0%, var(--sky2) 48%, var(--sky3) 100%); }
.day .dpin::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--stars); background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.6px 1.6px at 46% 12%, #fff, transparent), radial-gradient(1px 1px at 64% 38%, #fff, transparent), radial-gradient(1.3px 1.3px at 82% 22%, #fff, transparent), radial-gradient(1px 1px at 90% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 8% 84%, #fff, transparent), radial-gradient(1px 1px at 56% 88%, #fff, transparent); }
.day .dgrid { display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 6vw, 100px); align-items: center; }
.dlabel { font-size: clamp(32px, 3.8vw, 54px); font-weight: 800; color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; }
.dline { margin-top: 12px; max-width: 42ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); line-height: 1.55; }
.dayrow { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; }

.dayclock { --d: clamp(230px, 21vw, 290px); --r: calc(var(--d) / 2 - 22px); position: relative; width: var(--d); height: var(--d); direction: ltr; touch-action: manipulation; }
.dayclock .ring { position: absolute; inset: 22px; border-radius: 50%; background: conic-gradient(from 0deg, #22305A 0deg, #2A3A68 80deg, #F0BC98 96deg, #F6DCA2 118deg, #F7E7BC 160deg, #CFE0F2 215deg, #E8C690 255deg, #EE9F80 272deg, #3D5486 292deg, #22305A 320deg, #22305A 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.dayclock .pt { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; transform: rotate(var(--p)) translateY(calc(-1 * var(--r) + 6px)) rotate(calc(-1 * var(--p))); display: grid; place-items: center; }
.dayclock .pt i { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(26, 42, 74, 0.16), 0 4px 10px -2px rgba(26, 42, 74, 0.35); transition: transform 0.5s var(--spring), background 0.3s; }
.dayclock .pt span { position: absolute; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transform: rotate(var(--p)) translateY(-30px) rotate(calc(-1 * var(--p))); opacity: 0.85; transition: color 0.3s, opacity 0.3s; }
.dayclock .pt:hover i { transform: scale(1.25); }
.dayclock .pt[aria-pressed="true"] i { transform: scale(1.6); background: var(--ink); box-shadow: 0 0 0 4px #fff, 0 6px 16px -4px rgba(26, 42, 74, 0.5); }
.dayclock .pt[aria-pressed="true"] span { color: var(--ink); opacity: 1; }
.dayclock .pt:active i { transform: scale(1.1); transition-duration: 0.1s; }
.dayclock .face { position: absolute; inset: 56px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; pointer-events: none; }
.dayclock .clock { font-size: clamp(36px, 3.4vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dayclock .clock i { font-style: normal; padding: 0 0.02em; }
.dayclock .part { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.on-dark .dayclock .pt[aria-pressed="true"] i { background: #fff; }
.on-dark .dayclock .pt[aria-pressed="true"] i { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 6px 16px -4px rgba(0, 0, 0, 0.5); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.moments { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 440px; }
/* The words change like a breath: the old ones fade quickly, the new ones rise into focus. */
.moments .m { grid-area: 1 / 1; opacity: 0; transform: translateY(-6px); filter: blur(4px); transition: opacity 0.28s ease, transform 0.4s var(--ease-out), filter 0.3s ease; pointer-events: none; }
.moments .m.on { opacity: 1; transform: none; filter: none; pointer-events: auto; transition: opacity 0.7s var(--ease-out) 0.12s, transform 0.8s var(--ease-out) 0.12s, filter 0.7s var(--ease-out) 0.12s; }
.moments h3 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; color: var(--ink); text-wrap: balance; }
.moments p { margin-top: 10px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.dnext { grid-area: 2 / 1; justify-self: start; margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.5); transition: background 0.3s, transform 0.5s var(--spring); }
.dnext svg { width: 18px; height: 18px; transition: transform 0.4s var(--spring); }
.dnext:hover svg { transform: translateX(-3px); }
[dir="ltr"] .dnext svg { transform: scaleX(-1); }
[dir="ltr"] .dnext:hover svg { transform: scaleX(-1) translateX(-3px); }
.dnext:active { transform: scale(0.95); transition-duration: 0.1s; }
.on-dark .dnext { background: rgba(255, 255, 255, 0.14); }
.dphone .phone { width: min(330px, 28vw); }
/* One screen dissolves into the next, the new one settling into focus from a touch closer. */
.dphone .screen > * { opacity: 0; transform: scale(0.985); filter: blur(6px); transition: opacity 0.5s ease, transform 0.7s var(--ease-out), filter 0.5s ease; }
.dphone .screen > .on { z-index: 1; opacity: 1; transform: none; filter: none; transition: opacity 0.75s var(--ease-out), transform 0.9s var(--ease-out), filter 0.75s var(--ease-out); }
.dphone .screen > :not(.on) { transform: scale(1.03); }
@media (max-width: 1100px) and (min-width: 861px) { .dayrow { grid-template-columns: 1fr; justify-items: start; } }
@media (max-width: 860px) {
  .day .dgrid { grid-template-columns: 1fr; gap: 36px; }
  .dayrow { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .dayclock { --d: min(272px, 74vw); }
  .moments { max-width: none; width: 100%; min-height: 10.5em; text-align: center; }
  .moments h3 { font-size: 24px; }
  .moments p { font-size: 16px; }
  .dnext { justify-self: center; }
  .dphone { justify-self: center; }
  .dphone .phone { width: min(300px, 72vw); }
}
@media (prefers-reduced-motion: reduce) { .day .dpin, .dayclock .hand { transition: none; } }

/* ── Together: the live Mom and Dad phones ── */
.together { padding: clamp(60px, 8vw, 110px) 0; background: var(--muted); }
.thead { max-width: 620px; }
.duo { margin-top: 44px; display: flex; justify-content: center; gap: clamp(14px, 6vw, 90px); }
.duo figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.duo .phone { width: min(300px, 43vw); }
.duo figcaption { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.duo figcaption svg { width: 14px; height: 22px; }
.duo figure:first-child figcaption svg { fill: #E98BA0; }
.duo figure:last-child figcaption svg { fill: #5FA0E8; }
.duo .hint { font-weight: 400; font-size: 14px; color: var(--text-3); }
.demo-note { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-3); }
@media (max-width: 640px) { .duo .phone { padding: 2.4%; border-radius: 13% / 6%; } .duo .hint { display: none; } .duo figcaption { font-size: 14px; } }
.flyer { position: fixed; z-index: 60; top: 0; left: 0; width: 34px; height: 52px; pointer-events: none; }

/* ── Free, for every parent ── */
.free { padding: clamp(70px, 9vw, 120px) 0 clamp(50px, 6vw, 80px); }
.fhead { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.fhead .lead2 { margin-top: 14px; }
.ftitle { display: flex; gap: 18px; align-items: flex-end; }
.ftitle > .bani-bunny { flex: none; width: 92px; height: 101px; margin-bottom: 6px; }
@media (max-width: 560px) { .ftitle { flex-direction: column; align-items: flex-start; gap: 6px; } .ftitle > .bani-bunny { width: 64px; height: 70px; } }
.ask { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset, 0 20px 40px -28px rgba(var(--shadow), 0.4); }
.ask .date { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-radius: 999px; background: var(--tint-soft); color: var(--text); cursor: pointer; }
.ask .date span { font-size: 15px; font-weight: 700; color: var(--tint); white-space: nowrap; }
.dsel { display: flex; gap: 2px; }
.dsel select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 17px; font-weight: 600; border: 0; border-radius: 12px; background: none; color: var(--text); padding: 8px 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.dsel select:hover { background: rgba(var(--shadow), 0.06); }
.dsel select:focus-visible { outline: 2px solid var(--tint); outline-offset: 0; }
.dsel option { color: #1A2A4A; background: #fff; }
.ask .sex { display: flex; gap: 4px; }
.ask .sex button { height: 56px; min-width: 60px; padding: 0 16px; border-radius: 999px; font-weight: 700; transition: background 0.2s ease, color 0.2s ease, transform 0.5s var(--spring); }
.ask .sex button:active { transform: scale(0.94); transition-duration: 0.1s; }
.ask .sex button[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); }
.private { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--text-3); justify-content: flex-end; }
.private svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .fhead { grid-template-columns: 1fr; }
  .ask { display: grid; grid-template-columns: 1fr; width: 100%; border-radius: 28px; }
  .ask .date { justify-content: space-between; }
  .ask .sex button { flex: 1; }
  .private { justify-content: flex-start; }
}
.today { margin-top: 26px; }
.today .example { font-size: 14px; color: var(--text-3); margin-bottom: 12px; min-height: 1.5em; transition: opacity 0.3s ease; }
.today:not(.demo) .example { opacity: 0; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card { position: relative; border-radius: 28px; padding: 22px; background: linear-gradient(160deg, var(--c, var(--surface), var(--surface))); color: var(--card-ink); overflow: hidden; }
.card h3 { font-size: 21px; line-height: 1.25; }
.card p { color: var(--card-ink-2); font-size: 15px; margin-top: 8px; }
.card .again { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); color: #271D1F; font-weight: 700; font-size: 15px; transition: transform 0.5s var(--spring); }
.card .again:active { transform: scale(0.94); transition-duration: 0.1s; }
.card .again svg { width: 17px; height: 17px; }
.w2 { grid-column: span 2; }
.agecard { background: linear-gradient(160deg, #EAF2FC, #D2E3F6); --k: #2F6DB0; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .agecard { background: linear-gradient(160deg, #1C2838, #22344F); --k: #9CC6F2; }
}
:root[data-theme="dark"] .agecard { background: linear-gradient(160deg, #1C2838, #22344F); --k: #9CC6F2; }

.agecard .big { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; line-height: 1.08; max-width: 13ch; }
.agecard .mini { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.agecard .mini b { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.agecard .mini span { font-size: 13.5px; color: var(--card-ink-2); }
.agecard .round { position: absolute; inset-inline-end: 20px; top: 20px; display: grid; justify-items: center; gap: 6px; text-align: center; width: 112px; }
.agecard .round svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.agecard .round circle { fill: none; stroke: rgba(47, 109, 176, 0.16); stroke-width: 4; }
.agecard .round circle.p { stroke: var(--k); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset 1.1s var(--ease-out); }
.agecard .round span { font-size: 12.5px; line-height: 1.3; color: var(--card-ink-2); }
.agecard .round span b { display: block; font-size: 20px; color: var(--card-ink); }
.visit ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--card-ink-2); }
.visit li { display: flex; gap: 8px; }
.visit li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--k); }
.visit .when { font-size: 13.5px; margin-top: 4px; }
.card a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 14.5px; color: var(--k); text-decoration: none; }
.card a svg, .faq-sec .more svg { width: 16px; transform: scaleX(-1); }
[dir="ltr"] .card a svg, [dir="ltr"] .faq-sec .more svg { transform: none; }
.wake h3 { font-size: 24px; }
.wake .bar { position: relative; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.6); margin-top: 16px; overflow: hidden; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .wake .bar { background: rgba(255, 255, 255, 0.12); }
}
:root[data-theme="dark"] .wake .bar { background: rgba(255, 255, 255, 0.12); }

.wake .bar i { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--a, 10%); width: var(--w, 30%); border-radius: 10px; background: var(--k); transition: inset-inline-start 0.8s var(--ease-out), width 0.8s var(--ease-out); }
.wake .ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--card-ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.idea h3 { font-size: 20px; font-weight: 700; min-height: 2.5em; }
.swap { animation: swap 0.45s var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } }
.glist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.gtile { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 12px 6px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); color: #271D1F; transition: transform 0.5s var(--spring), background 0.2s; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .gtile { background: rgba(255, 255, 255, 0.08); color: var(--card-ink); }
}
:root[data-theme="dark"] .gtile { background: rgba(255, 255, 255, 0.08); color: var(--card-ink); }

.gtile:active { transform: scale(0.94); transition-duration: 0.1s; }
@media (hover: hover) { .gtile:hover { background: #fff; } }
.gtile .ic { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(160deg, var(--c)); color: var(--k); display: grid; place-items: center; }
.gtile .ic svg { width: 19px; height: 19px; }
.gtile .gt { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.today .fine { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.today .fine a { color: var(--tint); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, 1fr); } }
/* On a phone the cards sit in a row to swipe, the next one peeking in. */
@media (max-width: 640px) {
  .bento { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -24px; padding: 0 24px 8px; scroll-padding-inline: 24px; scrollbar-width: none; align-items: stretch; }
  .bento::-webkit-scrollbar { display: none; }
  .bento > .card { flex: 0 0 84%; scroll-snap-align: start; }
  .agecard .round { position: static; margin-top: 16px; display: flex; width: auto; text-align: start; }
  .agecard .round svg { width: 52px; height: 52px; }
  .glist { gap: 6px; }
  .gtile .gt { font-size: 12.5px; }
}

/* The step player */
.player { border: 0; padding: 0; background: none; max-width: min(600px, calc(100vw - 24px)); width: 100%; color: var(--card-ink); }
.player::backdrop { background: rgba(20, 16, 22, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.player .pin { position: relative; border-radius: 32px; padding: 28px clamp(22px, 4vw, 38px) 24px; background-color: var(--surface); background-image: linear-gradient(160deg, var(--c)); background-size: 100% 42%; background-repeat: no-repeat; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.45); }
.player[open] .pin { animation: rise 0.45s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
.player .x { position: absolute; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); font-size: 24px; color: #5C4D50; }
.player h2 { font-size: clamp(26px, 3.6vw, 34px); padding-inline-end: 50px; }
.player .dots { display: flex; gap: 6px; margin-top: 16px; }
.player .dots i { height: 5px; flex: 1; border-radius: 5px; background: rgba(0, 0, 0, 0.1); transition: background 0.3s ease; }
.player .dots i.on { background: var(--k); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .player .dots i { background: rgba(255, 255, 255, 0.14); }
}
:root[data-theme="dark"] .player .dots i { background: rgba(255, 255, 255, 0.14); }

.player .stage { min-height: 180px; display: flex; align-items: center; }
.player .step { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; margin: 0; color: var(--card-ink); }
.player .step b.n { display: block; font-size: 14px; font-weight: 700; color: var(--k); margin-bottom: 8px; }
.player .nav { display: flex; gap: 10px; }
.player .nav button { flex: 1; height: 54px; border-radius: 999px; font-weight: 700; font-size: 17px; transition: transform 0.5s var(--spring), opacity 0.2s; }
.player .nav button:active { transform: scale(0.96); transition-duration: 0.1s; }
.player .prev { background: var(--muted); color: var(--text); }
.player .next { background: var(--tint); color: var(--on-tint); }
.player .prev[disabled] { opacity: 0.4; }
.player .full { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--k); }
.player .full svg { width: 16px; transform: scaleX(-1); }
[dir="ltr"] .player .full svg { transform: none; }

/* ── Questions ── */
.faq-sec { padding: clamp(70px, 9vw, 120px) 0 0; }
.faq-sec .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq-sec .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 700; color: var(--tint); text-decoration: none; }
.faq { display: grid; gap: 8px; }
.faq details { border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset; transition: background 0.2s; }
.faq details[open] { background: var(--tint-soft); box-shadow: none; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 22px; font-weight: 700; font-size: 18px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--muted); transition: transform 0.4s var(--spring), background 0.2s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 2px; border-radius: 2px; background: var(--text-2); }
.faq summary i::after { transform: rotate(90deg); transition: transform 0.3s ease; }
.faq details[open] summary i { background: #fff; transform: rotate(180deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details > div { padding: 0 22px 18px; color: var(--text-2); font-size: 16.5px; line-height: 1.6; }
.faq details > div a { color: var(--tint); }
.faq details[open] > div { animation: swap 0.35s var(--ease-out); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .faq details[open] summary i { background: rgba(255, 255, 255, 0.14); }
}
:root[data-theme="dark"] .faq details[open] summary i { background: rgba(255, 255, 255, 0.14); }

@media (max-width: 860px) { .faq-sec .wrap { grid-template-columns: 1fr; } .faq summary { font-size: 17px; padding: 12px 18px; } }

/* ── The end ── */
.h2026 .end { padding-top: clamp(60px, 8vw, 110px); }
.h2026 .hopper { display: block; margin: 0 auto 22px; width: 120px; height: 132px; }
.h2026 .hopper .bani-bunny { width: 100%; height: 100%; }

/* ── Contact ── */
.contact { display: grid; gap: 12px; }
.ccard { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border-radius: 26px; background: linear-gradient(160deg, var(--c)); color: var(--card-ink); text-decoration: none; transition: transform 0.5s var(--spring); }
a.ccard:active { transform: scale(0.98); transition-duration: 0.12s; }
.ccard .ci { flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--k); display: grid; place-items: center; }
.ccard .ci svg { width: 22px; height: 22px; }
.ccard h2 { font-size: 21px; }
.ccard b { display: block; font-size: 20px; margin-top: 4px; color: var(--k); text-align: start; }
.ccard p { color: var(--card-ink-2); margin-top: 6px; }
.ccard p a { color: var(--k); }
.ccard .btns { margin-top: 14px; }
.ccard .btn { min-height: 46px; font-size: 15px; padding: 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .h2026 *, .h2026 *::before, .h2026 *::after, .faq *, .player * { animation: none !important; transition: none !important; }
}
.faq details, .faq details:last-of-type { border: 0; padding: 0; }
.faq summary::after { content: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .ccard .ci, :root:not([data-theme]) .card .again { background: rgba(255, 255, 255, 0.12); color: var(--k); }
}
:root[data-theme="dark"] .ccard .ci, :root[data-theme="dark"] .card .again { background: rgba(255, 255, 255, 0.12); color: var(--k); }

.faq details[open] summary::after { content: none; }
.player .pin { background: var(--surface); overflow: hidden; }
.player .pin::before { content: ''; position: absolute; inset: 0 0 auto; height: 60%; z-index: -1; background: linear-gradient(160deg, var(--c)); -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.player .pin { isolation: isolate; }
.day::before { display: none; }
.day { height: auto; }
.dsel select:invalid { color: var(--text-3); font-weight: 500; }

/* The family film: the wide cut on a wide screen, the reel on a phone. It plays while on screen, and a tap stops it. */
.film-card { position: relative; margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1000px; border-radius: 28px; overflow: hidden; background: #1A2A4A; box-shadow: 0 40px 80px -40px rgba(var(--shadow), 0.55); }
.brandfilm { display: block; width: 100%; height: auto; }
.brandfilm.reel { display: none; }
.fplay { position: absolute; inset-block-end: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20, 28, 48, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.5s var(--spring), background 0.2s; }
.fplay:hover { background: rgba(20, 28, 48, 0.65); }
.fplay:active { transform: scale(0.92); transition-duration: 0.1s; }
.fplay svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fplay .i-play { display: none; fill: currentColor; stroke-width: 1.6; }
.fplay[aria-pressed="true"] .i-pause { display: none; }
.fplay[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 640px) {
  .film-card { max-width: 380px; border-radius: 24px; }
  .brandfilm.wide { display: none; }
  .brandfilm.reel { display: block; }
}

/* ── The dial's knob: grab it and the day turns under the finger; a flick lands on the moment it was heading for ── */
.dayclock .knob { position: absolute; z-index: 3; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; transform: rotate(var(--a, 0deg)) translateY(calc(-1 * var(--r) + 6px)); cursor: grab; touch-action: none; }
.dayclock .knob::before { content: ''; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #1A2A4A 0 4.5px, #fff 5px); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35), 0 6px 16px -4px rgba(26, 42, 74, 0.55); transition: transform 0.45s var(--spring), box-shadow 0.25s; }
.dayclock.held .knob { cursor: grabbing; }
.dayclock.held .knob::before { transform: scale(1.14); transition-duration: 0.1s; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3), 0 10px 22px -6px rgba(26, 42, 74, 0.6); }
.dayclock .pt[aria-pressed="true"] i { transform: scale(1); background: #fff; box-shadow: 0 0 0 3px rgba(26, 42, 74, 0.16); }
.on-dark .dayclock .pt[aria-pressed="true"] i { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); }
.dayclock .pt span { letter-spacing: 0.01em; }
.h2026 .eyebrow { letter-spacing: 0.01em; }

/* The guide steps follow the finger sideways; the page still scrolls up and down. */
.player .stage { touch-action: pan-y; overflow: hidden; }
.player .step { will-change: transform; }
.player.closing .pin { animation: sink 0.24s var(--ease-in) forwards; }
@keyframes sink { to { opacity: 0; transform: translateY(24px) scale(0.97); } }
.player::backdrop { transition: opacity 0.24s; }
.player.closing::backdrop { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dayclock .knob::before { transition: none; } .player.closing .pin { animation: none; } }

/* The hero's phone changes its screen with the hour the same soft way. */
.hero .front .screen > * { will-change: opacity; }
@media (prefers-reduced-motion: reduce) { .moments .m, .moments .m.on, .dphone .screen > *, .dphone .screen > .on { filter: none; transform: none; transition: opacity 0.3s ease; } }

/* ── The first screen arrives in order: the words, then the phone rising into the light, then Bani and the note ── */
.motion .h2026 .hero .phone-wrap { animation: rise-in 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.motion .h2026 .hero .btns { animation: focus-in 1s var(--ease-out) 0.75s both; }
.motion .h2026 .peek { animation-delay: 1.3s; }
.motion .h2026 .note-card { animation-delay: 2.1s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(90px) scale(0.94); filter: blur(10px); } }
@keyframes focus-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { .motion .h2026 .hero .phone-wrap, .motion .h2026 .hero .btns { animation: none; } }

/* ── The story in chapters: the home leads to them, and each one fills its own page ── */
.h2026 .filmch { background: radial-gradient(120% 80% at 50% 30%, #1F2C4D 0%, #121A2E 55%, #0B0F1B 100%); padding: clamp(60px, 7vw, 100px) 0; }
.filmch .film-card { margin: 0 auto; width: min(1120px, calc((100svh - 220px) * 16 / 9)); max-width: 100%; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06); }
@media (max-width: 640px) { .filmch .film-card { width: min(380px, calc((100svh - 190px) * 9 / 16)); } }
.chpage > section:first-of-type { min-height: calc(100svh - 84px); display: flex; flex-direction: column; justify-content: center; }
.chpage > section:first-of-type > .wrap, .chpage .day .dpin { width: 100%; }
.chpage .day { display: block; }
.chpage .day .dpin { min-height: calc(100svh - 84px); display: flex; align-items: center; }
.chpage .free { background: var(--bg); }

/* The four chapter cards on the home. */
.chapters { padding: clamp(70px, 9vw, 130px) 0; background: var(--bg); }
.chhead { max-width: 640px; }
.chhead h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; }
.chgrid { margin-top: clamp(34px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chcard { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 10px; min-height: clamp(300px, 30vw, 400px); padding: clamp(26px, 3vw, 40px); padding-inline-end: 42%; border-radius: 34px; text-decoration: none; color: var(--cc-ink); background: var(--cc-bg); box-shadow: 0 30px 60px -42px rgba(var(--shadow), 0.6); transition: transform 0.6s var(--spring), box-shadow 0.4s var(--ease-out); }
.chcard.night { --cc-bg: radial-gradient(120% 90% at 80% 0%, #2E4472 0%, #1A2A4A 55%, #14213C 100%); --cc-ink: #fff; --cc-ink2: rgba(236, 241, 250, 0.82); }
.chcard.muted { --cc-bg: linear-gradient(160deg, #F6EEE7, #EADFD6); --cc-ink: #271D1F; --cc-ink2: #5C4D50; }
.chcard.sky { --cc-bg: linear-gradient(160deg, #F7E5B0 0%, #EFEADB 48%, #CFDDEE 100%); --cc-ink: #271D1F; --cc-ink2: #5C4D50; }
.chcard.rose { --cc-bg: linear-gradient(160deg, #FAEEF5, #F0D7E6); --cc-ink: #3A1530; --cc-ink2: #6E2D58; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .chcard.muted { --cc-bg: linear-gradient(160deg, #272030, #1D1724); --cc-ink: #FBF3F6; --cc-ink2: #E4D7E0; }
:root:not([data-theme]) .chcard.rose { --cc-bg: linear-gradient(160deg, #33192B, #43223A); --cc-ink: #FBF3F6; --cc-ink2: #F3CFE6; }
}
:root[data-theme="dark"] .chcard.muted { --cc-bg: linear-gradient(160deg, #272030, #1D1724); --cc-ink: #FBF3F6; --cc-ink2: #E4D7E0; }
:root[data-theme="dark"] .chcard.rose { --cc-bg: linear-gradient(160deg, #33192B, #43223A); --cc-ink: #FBF3F6; --cc-ink2: #F3CFE6; }

.cc-n { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--cc-ink2); font-variant-numeric: tabular-nums; }
.cc-t { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.cc-l { font-size: 16.5px; line-height: 1.55; color: var(--cc-ink2); max-width: 30ch; text-wrap: pretty; }
.cc-a { position: absolute; inset-block-end: clamp(22px, 2.6vw, 34px); inset-inline-start: clamp(26px, 3vw, 40px); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.85); color: #271D1F; box-shadow: 0 10px 24px -14px rgba(16, 12, 32, 0.6); transition: transform 0.6s var(--spring); }
.cc-a svg, .chnext .cn-a svg { width: 22px; height: 22px; }
[dir="rtl"] .cc-a svg, [dir="rtl"] .chnext .cn-a svg { transform: scaleX(-1); }
/* A real screen of the app leans out of the card's corner. */
.cc-shot { position: absolute; z-index: -1; inset-inline-end: -4%; inset-block-start: 14%; width: 40%; aspect-ratio: 390 / 844; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(16, 12, 32, 0.55), 0 0 0 6px #16131B; transform: rotate(-6deg); transition: transform 0.8s var(--spring); }
[dir="ltr"] .cc-shot { transform: rotate(6deg); }
.cc-shot img { width: 100%; height: 100%; object-fit: cover; }
.cc-bunny { position: absolute; z-index: -1; inset-inline-end: 8%; inset-block-end: 12%; width: 30%; max-width: 150px; aspect-ratio: 120 / 132; transition: transform 0.8s var(--spring); }
.cc-bunny .bani-bunny { width: 100%; height: 100%; }
@media (hover: hover) {
  .chcard:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(var(--shadow), 0.7); }
  .chcard:hover .cc-shot { transform: rotate(-3deg) translateY(-8px); }
  [dir="ltr"] .chcard:hover .cc-shot { transform: rotate(3deg) translateY(-8px); }
  .chcard:hover .cc-a { transform: translateX(-4px); }
  [dir="ltr"] .chcard:hover .cc-a { transform: translateX(4px); }
  .chcard:hover .cc-bunny { transform: translateY(-6px); }
}
.chcard:active { transform: scale(0.98); transition: transform 0.1s ease-out; }
@media (max-width: 760px) {
  .chgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chcard { min-height: 230px; padding-inline-end: 44%; border-radius: 28px; }
  .cc-shot { width: 40%; inset-block-start: 18%; border-radius: 20px; box-shadow: 0 24px 40px -20px rgba(16, 12, 32, 0.55), 0 0 0 4px #16131B; }
  .cc-l { font-size: 15px; }
  .cc-a { width: 44px; height: 44px; }
}

/* The way on, at the end of every chapter. */
.chfoot { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 70px); background: var(--bg); }
.chnext { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'k a' 't a'; align-items: center; column-gap: 20px; max-width: var(--wrap); margin: 0 auto; width: calc(100% - 48px); padding: clamp(24px, 3vw, 36px) clamp(26px, 3vw, 40px); border-radius: 30px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 0 0 1px var(--border) inset, 0 30px 60px -44px rgba(var(--shadow), 0.6); transition: transform 0.6s var(--spring), box-shadow 0.4s var(--ease-out); }
.cn-k { grid-area: k; font-size: 14px; font-weight: 700; color: var(--tint); }
.cn-t { grid-area: t; font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.1; margin-top: 4px; }
.cn-a { grid-area: a; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--on-tint); transition: transform 0.6s var(--spring); }
@media (hover: hover) { .chnext:hover { transform: translateY(-3px); } .chnext:hover .cn-a { transform: translateX(-5px); } [dir="ltr"] .chnext:hover .cn-a { transform: translateX(5px); } }
.chnext:active { transform: scale(0.98); transition: transform 0.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .chcard, .cc-shot, .cc-a, .cc-bunny, .chnext, .cn-a { transition: none; } }
.chcard { padding-block-end: clamp(96px, 9vw, 120px); }
@media (max-width: 760px) { .chcard { padding-block-end: 86px; } }