/* The home page (home.mjs, home.js), and the small pieces the questions and contact pages share with it. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  /* 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 {
    --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); transition: transform 0.6s var(--ease-out); }
/* 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%); transition: --sky1 0.9s ease, --sky2 0.9s ease, --sky3 0.9s ease; }
.day .dpin::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--stars); transition: opacity 0.9s ease; 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; opacity: 0.4; animation: colon 2s steps(1) infinite; }
.dayclock .part { font-size: 13px; font-weight: 700; color: var(--ink-2); }
@keyframes colon { 50% { opacity: 0.12; } }
.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; }
.moments .m { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.55s var(--ease-out); pointer-events: none; }
.moments .m.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.06s; }
.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); }
.dphone .screen > * { opacity: 0; transform: scale(1.02); transition: opacity 0.45s ease, transform 0.6s var(--ease-out); }
.dphone .screen > .on { opacity: 1; transform: none; }
@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; } .dayclock .clock i { animation: 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) { .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) { .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) { .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) { .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) { .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) { .ccard .ci, .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; }