/* Mempaper website. Brand palette from the app (indigo + coral), soft lavender/peach
   backgrounds, rounded headlines with a serif-italic accent, mono labels. */
:root {
  --indigo: #3D3F9E;
  --indigo-deep: #2B2D7C;
  --coral: #F4744D;
  --ink: #1E1F5E;
  --muted: #6B6C8A;
  --bg: #F7F6FD;
  --surface: #FFFFFF;
  --cream: #F4EFE6;
  --line: #E6E4F3;
  --soft: #EEEDFB;
  --success: #3BB89E;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(30, 31, 94, 0.12);
  --shadow-sm: 0 6px 20px rgba(30, 31, 94, 0.07);
  --sans: 'Quicksand', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 28px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: clamp(42px, 5.6vw, 74px); }
h2 { font-size: clamp(32px, 4.4vw, 54px); }
h3 { font-size: 21px; line-height: 1.25; }
em.accent, h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--indigo); letter-spacing: -0.01em; }

.label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--indigo); background: rgba(255,255,255,0.75); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 246, 253, 0.82); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(230,228,243,0.8); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 50%; }
.wordmark { font-family: 'Special Elite', monospace; font-size: 25px; color: var(--indigo); }
.wordmark span { color: var(--coral); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--ink); font-weight: 500; font-size: 15px; }
.nav-links a:hover { color: var(--indigo); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-weight: 600; font-family: var(--body);
  text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--indigo); color: #fff !important; padding: 15px 28px; font-size: 16px; box-shadow: 0 10px 26px rgba(61,63,158,0.32); }
.btn-dark:hover { background: var(--indigo-deep); }
.btn-small { background: var(--indigo); color: #fff !important; padding: 10px 20px; font-size: 14px; }
.btn-ghost { color: var(--ink) !important; padding: 15px 8px; font-size: 16px; }
.btn-ghost:hover { color: var(--indigo) !important; }
.btn-light { background: #fff; color: var(--ink) !important; padding: 14px 26px; border: 1px solid var(--line); }
.btn svg { width: 18px; height: 18px; }
.btn-play { background: #fff; color: var(--ink) !important; padding: 12px 26px 12px 20px; border-radius: 16px; box-shadow: 0 10px 28px rgba(10,10,40,.22); }
.btn-play:hover { box-shadow: 0 14px 34px rgba(10,10,40,.3); }
.btn-play svg { width: 30px; height: 30px; }
.btn-play span { display: flex; flex-direction: column; line-height: 1.15; font-size: 20px; text-align: left; font-weight: 600; }
.btn-play small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted); font-weight: 500; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 50px 0 60px; overflow: hidden;
  background:
    radial-gradient(900px 600px at 8% 30%, rgba(154, 150, 240, 0.28), transparent 60%),
    radial-gradient(800px 600px at 92% 10%, rgba(255, 182, 150, 0.35), transparent 60%),
    radial-gradient(700px 500px at 70% 100%, rgba(255, 210, 225, 0.35), transparent 60%),
    var(--bg); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.hero h1 { margin: 26px 0 26px; }
.hero h1 em { display: block; }
.lead { font-size: 19px; color: var(--muted); max-width: 32em; }
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 34px 0 44px; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.trust li { position: relative; padding-left: 26px; font-weight: 500; color: var(--ink); font-size: 15px; }
.trust li::before { content: ''; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--success); }
.trust li::after { content: ''; position: absolute; left: 5px; top: 7px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.stats { display: flex; gap: 46px; }
.stat b { display: block; font-family: var(--sans); font-size: 34px; font-weight: 700; line-height: 1; }
.stat span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }

/* ---------- Phone mockups (rendered in CSS) ---------- */
.phone { container-type: inline-size; position: relative; width: 250px; aspect-ratio: 9 / 19.2; background: #15152a; border-radius: 38px; padding: 9px;
  box-shadow: 0 30px 70px rgba(20, 20, 60, 0.28), inset 0 0 0 1.5px rgba(255,255,255,0.08); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--cream); }
.phone .screen::after { content: ''; position: absolute; top: 9px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #0b0b14; z-index: 5; }
.phone .time { position: absolute; top: 15cqw; left: 0; right: 0; text-align: center; z-index: 3; font-family: var(--sans); font-weight: 600; font-size: 17.6cqw; letter-spacing: -0.4cqw; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.phone .date { position: absolute; top: 11cqw; left: 0; right: 0; text-align: center; z-index: 3; font-family: var(--mono); font-size: 3.8cqw; letter-spacing: .14em; color: rgba(255,255,255,.92); }
.phone.dark-text .time { color: var(--ink); text-shadow: none; }
.phone .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.phone .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 62%, rgba(0,0,0,.5) 100%); }
.phone .caption { position: absolute; left: 0; right: 0; bottom: 17cqw; text-align: center; z-index: 3; font-family: var(--serif); font-style: italic; font-size: 6.8cqw; line-height: 1.25; color: #fff; padding: 0 7cqw; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.phone .polaroid { position: absolute; left: 50%; top: 52%; width: 66%; transform: translate(-50%, -50%) rotate(-3deg); background: #fff; padding: 3.6cqw 3.6cqw 16.8cqw; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.phone .polaroid div { aspect-ratio: 4 / 4.6; background-size: cover; background-position: center; }
.phone .polaroid p { position: absolute; left: 0; right: 0; bottom: 4.8cqw; text-align: center; font-family: var(--serif); font-style: italic; font-size: 5.6cqw; white-space: nowrap; color: var(--ink); }
.phone .framed { position: absolute; left: 50%; top: 54%; width: 62%; aspect-ratio: 3 / 4.2; transform: translate(-50%, -50%); border: 6px solid #fff; border-radius: 14px; background-size: cover; background-position: center; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.phone .framed-cap { position: absolute; left: 0; right: 0; bottom: 13.6cqw; text-align: center; font-family: var(--serif); font-style: italic; font-size: 5.6cqw; color: var(--ink); }
.phone .tag { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--muted); }
.phone .collage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: #fff; }
.phone .collage div { background-size: cover; background-position: center; }
.phone .home-bar { position: absolute; bottom: 8px; left: 50%; width: 34%; margin-left: -17%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); z-index: 4; }
.phone.dark-text .home-bar { background: rgba(30,31,94,.35); }
.notif { position: absolute; left: 4.8cqw; right: 4.8cqw; top: 40cqw; z-index: 6; background: rgba(255,255,255,.94); border-radius: 7cqw; padding: 4cqw 4.8cqw; display: flex; gap: 4cqw; align-items: center; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.notif img { width: 12cqw; height: 12cqw; border-radius: 50%; flex: 0 0 auto; }
.notif small { display: block; font-family: var(--mono); font-size: 3.2cqw; letter-spacing: .14em; color: var(--muted); }
.notif b { display: block; font-size: 5cqw; line-height: 1.25; color: var(--ink); }
.notif i { display: block; font-style: normal; font-size: 4.2cqw; color: var(--muted); }

.hero-phones { position: relative; height: 600px; }
.hero-phones .phone { position: absolute; top: 50%; left: 50%; }
.hero-phones .p-center { width: 272px; z-index: 3; transform: translate(-50%, -50%); }
.hero-phones .p-left { width: 205px; z-index: 2; transform: translate(-128%, -42%) rotate(-9deg); }
.hero-phones .p-right { width: 205px; z-index: 2; transform: translate(28%, -38%) rotate(8deg); }
.hero-phones .p-left .polaroid { width: 80%; top: 55%; }
/* "On the day" and "Next up" call-outs floating by the phones */
.date-badge { position: absolute; z-index: 5; left: 2%; bottom: 60px; width: 104px; background: #fff; border-radius: 20px; overflow: hidden; text-align: center;
  box-shadow: 0 18px 40px rgba(20,20,60,.22); transform: rotate(-7deg); animation: float 6s ease-in-out infinite; }
.date-badge span { display: block; background: var(--coral); color: #fff; font-family: var(--mono); font-size: 13px; letter-spacing: .2em; padding: 7px 0; }
.date-badge b { display: block; font-family: var(--serif); font-style: italic; font-size: 46px; line-height: 1; padding: 10px 0 2px; color: var(--ink); }
.date-badge i { display: block; font-style: normal; font-size: 11px; color: var(--muted); padding-bottom: 12px; }
.next-chip { position: absolute; z-index: 5; right: -18px; top: 200px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.95);
  border-radius: 18px; padding: 11px 16px 11px 11px; box-shadow: 0 18px 40px rgba(20,20,60,.18); animation: float 6s ease-in-out -3s infinite; }
.next-chip img { width: 34px; height: 34px; border-radius: 50%; }
.next-chip small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--coral); }
.next-chip b { display: block; font-size: 14px; line-height: 1.2; }
.next-chip i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .date-badge, .next-chip { animation: none; } }

/* ---------- Sections ---------- */
.section { padding: 110px 0; }
.section.tint { background: var(--surface); }
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { margin: 14px 0 18px; }
.section-head p { color: var(--muted); font-size: 18px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.feature .num { font-family: var(--mono); font-size: 12px; color: var(--coral); letter-spacing: .1em; }
.feature h3 { margin: 18px 0 10px; }
.feature p { color: var(--muted); }
.feature .pro { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--indigo); background: var(--soft); padding: 3px 8px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }

.ritual { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; align-items: start; }
.ritual .section-head { position: sticky; top: 110px; margin-bottom: 0; }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; }
.step .n { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 34px; color: var(--indigo); line-height: 1; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); }

.layouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.layout { text-align: center; }
.layout .phone { width: 100%; max-width: 230px; margin: 0 auto 22px; }
.layout h3 { margin-bottom: 6px; }
.layout p { color: var(--muted); font-size: 15px; padding: 0 6px; }

.stories { display: flex; flex-direction: column; gap: 110px; }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story.flip .story-art { order: -1; }
.story h3 { font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0 18px; }
.story p { color: var(--muted); font-size: 18px; max-width: 30em; }
.story .chip { display: inline-block; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--indigo); background: var(--soft); padding: 7px 12px; border-radius: 999px; }
.story-art { display: flex; justify-content: center; position: relative; }
.story-art::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(154,150,240,.28), transparent 70%); }
.story-art.warm::before { background: radial-gradient(circle, rgba(255,170,140,.32), transparent 70%); }
.story-art .phone { width: 260px; }

.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); padding: 22px 0; }
.ticker-track { display: flex; gap: 46px; width: max-content; animation: ticker 40s linear infinite; }
.ticker span { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--ink); white-space: nowrap; }
.ticker span:nth-child(3n+2) { color: var(--coral); }
.ticker span:nth-child(3n) { color: var(--indigo); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 24px; display: flex; flex-direction: column; }
.plan .label { color: var(--muted); }
.plan .price { font-family: var(--sans); font-size: 46px; font-weight: 700; margin: 12px 0 2px; letter-spacing: -0.03em; }
.plan .per { color: var(--muted); font-size: 14px; }
.plan .desc { margin: 18px 0 20px; }
.plan ul { list-style: none; margin-bottom: 28px; flex: 1; }
.plan li { padding: 8px 0 8px 28px; position: relative; border-top: 1px solid var(--line); font-size: 15px; }
.plan li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 14px; height: 8px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
.plan .btn { width: 100%; }
.plan.best { background: var(--indigo); color: #fff; border-color: var(--indigo); box-shadow: 0 24px 60px rgba(61,63,158,.35); transform: translateY(-10px); }
.plan.best .label, .plan.best .per { color: rgba(255,255,255,.75); }
.plan.best li { border-top-color: rgba(255,255,255,.18); }
.plan.best li::before { border-color: #9DF2DA; }
.plan.best .btn { background: #fff; color: var(--indigo) !important; border-color: #fff; }
.plan .badge { position: absolute; top: -13px; left: 24px; background: var(--coral); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; padding: 6px 12px; border-radius: 999px; }
.plans-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 34px; }

.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; align-items: start; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; font-family: var(--sans); font-weight: 700; font-size: 19px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 18px; font-size: 28px; font-weight: 400; color: var(--indigo); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--muted); }

.final { position: relative; overflow: hidden; background: var(--indigo); color: #fff; border-radius: 36px; padding: 80px 60px; text-align: center; max-width: 1104px; width: calc(100% - 56px); margin: 0 auto;
  background-image: radial-gradient(600px 400px at 10% 0%, rgba(255,255,255,.14), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(244,116,77,.45), transparent 60%); }
.final .label { color: #FFA57A; } /* orange, 4.5:1 on indigo for small text */
.final h2 { color: #fff; margin: 16px auto 18px; max-width: 14em; }
.final h2 em { color: #FF9A6B; } /* orange, ties in with the coral CTA at the top */
.final p { color: rgba(255,255,255,.82); font-size: 18px; max-width: 34em; margin: 0 auto 32px; }
.final .row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.final .fine { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.65); margin-top: 26px; }

/* ---------- Document pages ---------- */
.doc { padding: 70px 28px 100px; }
.doc h1 { font-size: clamp(38px, 5vw, 56px); margin: 12px 0 10px; }
.doc h2 { font-size: 24px; margin: 40px 0 12px; }
.doc p, .doc li { margin-bottom: 12px; }
.doc ul { padding-left: 22px; }
.doc .lead { margin: 16px 0 22px; }
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 10px; }
.toc a { background: var(--surface); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); }
.callout { background: var(--soft); border-radius: var(--radius); padding: 28px; margin: 30px 0; text-align: center; }
.callout p { margin-bottom: 16px; }

/* ---------- Footer ---------- */
.site-footer { padding: 80px 0 34px; }
.footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-grid p { margin-top: 12px; max-width: 22em; }
.footer-cols { display: flex; gap: 70px; flex-wrap: wrap; }
.footer-cols div { display: flex; flex-direction: column; gap: 10px; }
.footer-cols .label { color: var(--muted); margin-bottom: 4px; }
.footer-cols a { color: var(--ink); font-size: 15px; }
.legal { font-size: 13px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .ritual, .faq-grid, .story { grid-template-columns: 1fr; }
  .hero-phones { height: 520px; margin-top: 10px; }
  .features { grid-template-columns: 1fr 1fr; }
  .layouts { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan.best { transform: none; }
  .ritual .section-head { position: static; margin-bottom: 30px; }
  .story, .story.flip { gap: 40px; }
  .story.flip .story-art { order: 0; }
  .nav-links a:not(.btn) { display: none; }
}
@media (max-width: 600px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .section { padding: 80px 0; }
  .features { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .stats { gap: 28px; }
  .hero-phones { height: 460px; }
  .hero-phones .p-center { width: 210px; }
  .hero-phones .p-left, .hero-phones .p-right { width: 160px; }
  .date-badge { width: 82px; bottom: 30px; }
  .date-badge b { font-size: 36px; }
  /* No room beside the phones on small screens; the date badge carries the idea. */
  .next-chip { display: none; }
  .final { padding: 60px 24px; width: calc(100% - 32px); border-radius: 28px; }
  .step { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Hero showcase: one phone cycling through memories ---------- */
.showcase { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; padding: 10px 0 0; }
.showcase .phone { position: relative; top: auto; left: auto; }
.showcase .p-solo { width: 268px; transform: rotate(-3deg); }
.showcase .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.showcase .slide.active { opacity: 1; }
.showcase .slide .bg { transform: scale(1.06); transition: transform 4.5s ease-out; }
.showcase .slide.active .bg { transform: scale(1); }
.showcase .slide.dark-text .time { color: var(--ink); text-shadow: none; }
.showcase .slide.dark-text .date { color: var(--muted); }
.showcase .slide .notif { transform: translateY(-10px); opacity: 0; transition: transform .6s ease .5s, opacity .6s ease .5s; }
.showcase .slide.active .notif { transform: none; opacity: 1; }
.showcase .date-badge { left: calc(50% - 228px); bottom: 100px; }
.date-badge.flip { animation: badgeFlip .5s ease, float 6s ease-in-out .5s infinite; }
@keyframes badgeFlip { 0% { transform: rotate(-7deg) scale(.85); opacity: .4; } 100% { transform: rotate(-7deg) scale(1); opacity: 1; } }
.showcase .dots { display: flex; gap: 8px; margin-top: 20px; }
.showcase .dot { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(61,63,158,.25); cursor: pointer; transition: width .3s ease, background .3s ease; }
.showcase .dot.active { width: 26px; background: var(--indigo); }
@media (max-width: 980px) { .showcase .date-badge { left: calc(50% - 230px); } }
@media (max-width: 600px) {
  .showcase .p-solo { width: 240px; }
  /* Over the photo's middle, clear of the notification (top) and caption (bottom). */
  .showcase .date-badge { left: 4px; bottom: auto; top: 250px; }
}
@media (prefers-reduced-motion: reduce) { .showcase .slide, .showcase .slide .bg, .showcase .slide .notif { transition: none; } }

/* ---------- Large screens & TVs: scale the whole design up proportionally ---------- */
@media (min-width: 1700px) { html { zoom: 1.18; } }
@media (min-width: 2200px) { html { zoom: 1.5; } }
@media (min-width: 3000px) { html { zoom: 2; } }

/* ---------- Mobile menu ---------- */
.menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-left: 8px; }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
body.menu-open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: flex; flex-direction: column; padding: 8px 20px 18px; border-top: 1px solid var(--line); background: var(--bg); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 14px 4px; font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover { text-decoration: none; color: var(--indigo); }
@media (max-width: 980px) {
  .menu-btn { display: inline-flex; }
  .nav-links { gap: 0; }
}
@media (min-width: 981px) { .mobile-menu { display: none !important; } }
.btn-small { white-space: nowrap; }
@media (max-width: 420px) {
  .nav .wordmark { font-size: 21px; }
  .nav .brand img { width: 30px; height: 30px; }
  .nav .brand { gap: 7px; }
  .btn-small { padding: 9px 14px; font-size: 13px; }
  .menu-btn { width: 38px; height: 38px; margin-left: 6px; }
}
/* Anchor targets stop below the sticky header instead of under it. */
section[id], h2[id] { scroll-margin-top: 84px; }

/* Main call to action in the hero: warm coral so it stands out from the indigo around it.
   A deeper shade than the app's #F4744D so white text meets WCAG AA (4.68:1). */
.btn-coral { background: #C94A26; color: #fff !important; padding: 15px 28px; font-size: 16px; box-shadow: 0 10px 26px rgba(201,74,38,0.35); }
.btn-coral:hover { background: #B3401F; }

/* =============================================================================================
   Brand v2 — matches the Play Store screenshots & feature graphic: warm cream, Outfit headlines
   with a peach marker highlight, bold pill labels, an indigo panel behind the hero phone.
   ============================================================================================= */
:root {
  --bg: #FFF6EF;
  --cream: #FFF6EF;
  --peach: #FFC9B5;
  --peach-soft: #FFE3D6;
  --soft: #FFE3D6;
  --line: #F1E3D8;
  --muted: #5E5F80;
  --sans: 'Outfit', 'Inter', system-ui, sans-serif;
  --shadow: 0 18px 50px rgba(30, 31, 94, 0.13);
}
h1, h2, h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-weight: 700; letter-spacing: -0.01em; }
/* The highlighted word: a peach marker stroke instead of italic serif */
em.accent, h1 em, h2 em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; letter-spacing: inherit;
  background: linear-gradient(transparent 56%, var(--peach) 56%, var(--peach) 90%, transparent 90%);
  padding: 0 .08em; margin: 0 -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero h1 em { display: inline; }

.label { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--coral); padding: 7px 15px; border-radius: 999px; }
.plan .label { background: none; padding: 0; color: var(--muted); }
.plan.best .label { color: rgba(255,255,255,.8); }
.pill { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--ink); border: 0; padding: 9px 16px; }
.pill::before { background: var(--coral); }

.site-header { background: rgba(255, 246, 239, 0.86); border-bottom-color: rgba(241, 227, 216, 0.9); }
.stat span, .feature .num, .btn-play small, .next-chip small, .date-badge span { font-family: var(--sans); font-weight: 700; }
.date-badge b { font-family: var(--sans); font-style: normal; font-weight: 800; }

/* Hero: cream, a peach circle top-left, an indigo panel + coral circle behind the phone */
.hero { background: var(--bg); }
.hero::before { content: ''; position: absolute; left: -140px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: var(--peach-soft); }
.hero .hero-grid { position: relative; z-index: 1; }
.hero .showcase { position: relative; }
.hero .showcase::before { content: ''; position: absolute; z-index: 0; left: 50%; top: calc(50% - 18px); width: 460px; height: 600px; transform: translate(-42%, -50%);
  border-radius: 110px; background: linear-gradient(160deg, #2B2D7C, #3D3F9E 55%, #5A4FC8); }
.hero .showcase::after { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 190px; height: 190px; border-radius: 50%;
  transform: translate(-190%, 70%); background: var(--coral); }
.hero .showcase > * { position: relative; z-index: 1; }
.hero .showcase .dots { margin-top: 44px; }
.hero .showcase .date-badge { position: absolute; z-index: 5; }
/* The panel sits a little right of centre, so shift the phone and date tile with it:
   the phone ends up centred on the panel and the tile overlaps the panel's left edge. */
.hero .showcase .p-solo, .hero .showcase .dots { translate: 37px 0; }
.hero .showcase .date-badge { left: calc(50% - 168px); }
.showcase .dots { gap: 10px; }
.showcase .dot { width: 10px; height: 10px; border-radius: 5px; background: rgba(61,63,158,.45); }
.showcase .dot.active { width: 30px; background: var(--coral); }

/* Cards and tinted sections a touch warmer */
.feature { background: var(--bg); border-color: var(--line); }
.section.tint { background: #FFFFFF; }
.trust li::before { background: var(--coral); }

@media (max-width: 600px) {
  .hero::before { width: 300px; height: 300px; left: -120px; top: -120px; }
  .hero .showcase::before { width: 320px; height: 500px; border-radius: 80px; transform: translate(-45%, -50%); }
  .hero .showcase .p-solo, .hero .showcase .dots { translate: 16px 0; }
  .hero .showcase .date-badge { left: 26px; }
  .hero .showcase::after { width: 120px; height: 120px; transform: translate(-190%, 100%); }
}

/* Final CTA on indigo: white headline with a coral marker (as on the indigo store screenshots),
   a light pill label, and the fine print in the brand font. */
.final .label { background: rgba(255,255,255,.14); color: #FFD9CB; }
.final h2 em { color: #fff; background: linear-gradient(transparent 58%, var(--coral) 58%, var(--coral) 90%, transparent 90%); }
.final .fine { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.footer-cols .label { background: none; padding: 0; color: var(--muted); }

/* Scroller: brand headline font instead of the old italic serif, with a coral ✦ between phrases */
.ticker { background: var(--bg); }
.ticker-track { gap: 0; }
.ticker span { font-family: var(--sans); font-style: normal; font-weight: 800; font-size: 28px; letter-spacing: -0.01em; }
.ticker span::after { content: '✦'; display: inline-block; margin: 0 30px; font-size: 20px; color: var(--coral); vertical-align: middle; }
.ticker span:nth-child(3n) { color: var(--indigo); }
.ticker span:nth-child(3n+1) { color: var(--ink); }
@media (max-width: 600px) { .ticker span { font-size: 22px; } .ticker span::after { margin: 0 20px; } }

/* Occasions band right under the hero: indigo, white text, scrolling the opposite way */
.ticker-band { background: var(--indigo); border: 0; padding: 20px 0; }
.ticker-band .ticker-track { animation-direction: reverse; animation-duration: 46s; }
.ticker-band span, .ticker-band span:nth-child(3n), .ticker-band span:nth-child(3n+1) { color: #fff; font-size: 24px; font-weight: 700; }
.ticker-band span::after { color: var(--coral); }
@media (max-width: 600px) { .ticker-band span, .ticker-band span:nth-child(3n), .ticker-band span:nth-child(3n+1) { font-size: 19px; } }

/* Phone mockups: real-phone type (Outfit) for the lock-screen date and notification labels;
   captions stay serif italic (the personal touch) but bigger, balanced and more readable. */
.phone .date { font-family: var(--sans); font-weight: 600; letter-spacing: .06em; }
.notif small { font-family: var(--sans); font-weight: 600; letter-spacing: .06em; }
.notif b { font-family: var(--sans); font-weight: 700; }
.notif i { font-family: var(--sans); }
.phone .tag { font-family: var(--sans); font-weight: 600; letter-spacing: .08em; }
.phone .scrim { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.62) 100%); }
.phone .caption { font-size: 7.4cqw; line-height: 1.2; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.45); }
.phone .polaroid p, .phone .framed-cap { text-wrap: balance; }

/* Remaining monospace / italic-serif leftovers → brand font */
.feature .num, .feature .pro, .story .chip, .plan .badge, .final .fine { font-family: var(--sans); font-weight: 700; letter-spacing: .06em; }
.step .n { font-family: var(--sans); font-style: normal; font-weight: 800; color: var(--coral); }


/* Monospace font no longer loaded: anything still pointing at --mono uses the brand font */
:root { --mono: var(--sans); }

/* Desktop QR code beside the hero buttons (hidden on phones, where the button installs directly) */
.qr-hint { display: flex; align-items: center; gap: 12px; margin-left: 8px; padding: 8px 14px 8px 8px; background: #fff;
  border-radius: 16px; box-shadow: var(--shadow-sm); }
.qr-hint img { width: 72px; height: 72px; border-radius: 8px; }
.qr-hint span { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
@media (max-width: 980px), (hover: none) { .qr-hint { display: none; } }

/* See it in action: three looping demo videos */
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.demo { margin: 0; text-align: center; }
.demo video { width: 100%; aspect-ratio: 9 / 16; border-radius: 26px; background: var(--peach-soft); box-shadow: var(--shadow); display: block; object-fit: cover; }
.demo figcaption { margin-top: 14px; font-family: var(--sans); font-weight: 700; font-size: 17px; color: var(--ink); }
@media (max-width: 980px) {
  .demo-grid { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
    margin: 0 -28px; padding-left: 28px; padding-right: 28px; }
  .demo { scroll-snap-align: center; }
}

/* Desktop hero: Download + QR side by side as one "get the app" pair (the "See how it works"
   link is redundant there — it's in the header). Phones/tablets keep the link, no QR. */
@media (min-width: 981px) and (hover: hover) {
  .hero .cta-row { flex-wrap: nowrap; }
  .hero .cta-row .btn-ghost { display: none; }
  .qr-hint { margin-left: 4px; padding: 6px 14px 6px 6px; }
  .qr-hint img { width: 58px; height: 58px; }
}

/* Scroll-spy: current section in the header */
.nav-links a:not(.btn) { position: relative; transition: color .2s; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--coral, #F26B3A); transform: scaleX(0); transition: transform .25s; }
.nav-links a.active { color: var(--indigo); font-weight: 700; }
.nav-links a.active::after { transform: scaleX(1); }
.mobile-menu a.active { color: var(--indigo); font-weight: 700; }
html { scroll-padding-top: 84px; }

/* QR beside the Play badge in the final CTA (desktop only, same rule as the hero) */
.final .row { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.qr-final { margin-left: 0; padding: 6px 16px 6px 6px; box-shadow: 0 10px 28px rgba(10,10,40,.22); text-align: left; }
.qr-final img { width: 58px; height: 58px; }

/* See it in action — phone: one video at a time, full width, with dots */
.demo-dots { display: none; }
@media (max-width: 980px) {
  .demo-grid { grid-template-columns: repeat(3, 100%); gap: 16px; margin: 0; padding: 0 0 4px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .demo-grid::-webkit-scrollbar { display: none; }
  .demo { scroll-snap-align: center; scroll-snap-stop: always; }
  .demo video { max-width: 300px; margin: 0 auto; }
  .demo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .demo-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--ink); opacity: .22; cursor: pointer;
    transition: width .25s, opacity .25s, background .25s; }
  .demo-dots button.on { width: 24px; opacity: 1; background: var(--coral); }
}

/* Hero bubbles: three soft, slow-drifting circles behind the content (decoration only) */
.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
.bubbles span { position: absolute; bottom: -140px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 42%), var(--bub);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 8px 24px rgba(61,64,160,.06); animation: bubble-rise linear infinite; will-change: transform, opacity; }
.bubbles span:nth-child(1) { --bub: rgba(244,116,77,.26);  width: 90px;  height: 90px;  left: 6%;  animation-duration: 26s; }
.bubbles span:nth-child(2) { --bub: rgba(61,64,160,.20);   width: 56px;  height: 56px;  left: 44%; animation-duration: 32s; animation-delay: -12s; }
.bubbles span:nth-child(3) { --bub: rgba(255,160,125,.38); width: 120px; height: 120px; left: 86%; animation-duration: 38s; animation-delay: -22s; }
@keyframes bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.9); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate3d(24px, -55vh, 0) scale(1); }
  85%  { opacity: 1; }
  100% { transform: translate3d(-18px, -110vh, 0) scale(1.05); opacity: 0; }
}
/* Phones: two smaller bubbles. Reduced motion: none. */
@media (max-width: 760px) {
  .bubbles span:nth-child(2) { display: none; }
  .bubbles span:nth-child(1) { width: 60px; height: 60px; }
  .bubbles span:nth-child(3) { width: 80px; height: 80px; left: 78%; }
}
@media (prefers-reduced-motion: reduce) { .bubbles { display: none; } }

/* Bubbles in the other sections: same drift, different placement per section */
.section { position: relative; }
/* Clip inside the bubble layer, not the section, so sticky headings keep working. */
.bubbles { overflow: hidden; }
.section > .wrap, .final > *:not(.bubbles):not(.balloons) { position: relative; z-index: 1; }
.bubbles.b1 span:nth-child(1) { left: 88%; } .bubbles.b1 span:nth-child(2) { left: 12%; } .bubbles.b1 span:nth-child(3) { left: 60%; }
.bubbles.b2 span:nth-child(1) { left: 3%; }  .bubbles.b2 span:nth-child(2) { left: 72%; } .bubbles.b2 span:nth-child(3) { left: 30%; }
.bubbles.b3 span:nth-child(1) { left: 52%; } .bubbles.b3 span:nth-child(2) { left: 93%; } .bubbles.b3 span:nth-child(3) { left: -2%; }
.bubbles.b1 span { animation-delay: -5s; } .bubbles.b2 span { animation-delay: -17s; } .bubbles.b3 span { animation-delay: -29s; }
.bubbles.b1 span:nth-child(2), .bubbles.b2 span:nth-child(3), .bubbles.b3 span:nth-child(1) { animation-delay: -9s; }
/* On the indigo call-to-action card: white bubbles */
.bubbles.on-dark span { --bub: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.bubbles.on-dark span:nth-child(1) { left: 8%; } .bubbles.on-dark span:nth-child(3) { left: 82%; }
@media (max-width: 760px) {
  .bubbles.b1 span:nth-child(3), .bubbles.b2 span:nth-child(3), .bubbles.b3 span:nth-child(3) { left: 80%; }
}

/* Bubble shapes: some bubbles are hearts or stars (masked, so the glossy highlight stays) */
.bubbles span:nth-child(2) { border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 92C18 70 4 52 6 32 8 14 30 4 50 24 70 4 92 14 94 32 96 52 82 70 50 92Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 92C18 70 4 52 6 32 8 14 30 4 50 24 70 4 92 14 94 32 96 52 82 70 50 92Z'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow: none; }
.bubbles.b2 span:nth-child(3), .bubbles.on-dark span:nth-child(3) { border-radius: 0; box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 61 36 94 38 68 58 77 91 50 72 23 91 32 58 6 38 39 36Z' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 61 36 94 38 68 58 77 91 50 72 23 91 32 58 6 38 39 36Z' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Hearts and stars look best a little bolder */
.bubbles span:nth-child(2) { --bub: rgba(244,116,77,.30); }
.bubbles.b2 span:nth-child(3) { --bub: rgba(255,190,90,.45); }
.bubbles.on-dark span:nth-child(2), .bubbles.on-dark span:nth-child(3) { --bub: rgba(255,255,255,.16); }

/* Balloons (hero + final card): rise slowly, string and balloon sway */
.balloons { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.balloon { position: absolute; bottom: -200px; width: 58px; opacity: 0; animation: balloon-rise linear infinite; will-change: transform, opacity; }
.balloon svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 20%; animation: balloon-sway 5s ease-in-out infinite alternate; }
.balloon.k1 { left: 3%;  color: #F4744D; width: 64px; animation-duration: 30s; animation-delay: -4s; }
.balloon.k2 { left: 38%; color: #8E8BE8; width: 50px; animation-duration: 36s; animation-delay: -20s; }
.balloon.k3 { left: 58%; color: #FFB08F; width: 56px; animation-duration: 33s; animation-delay: -12s; }
.balloon.k4 { left: 94%; color: #3D40A0; width: 46px; animation-duration: 40s; animation-delay: -28s; }
.balloon.k2 svg { animation-duration: 6s; } .balloon.k3 svg { animation-duration: 4.5s; } .balloon.k4 svg { animation-duration: 5.5s; }
.balloons.on-dark .balloon.k1 { left: 5%;  color: #F4744D; }
.balloons.on-dark .balloon.k2 { left: 88%; color: #FFB08F; }
.balloons.on-dark .balloon.k3 { left: 70%; color: #ffffff; }
@keyframes balloon-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: .55; }
  88%  { opacity: .55; }
  100% { transform: translate3d(30px, -125vh, 0); opacity: 0; }
}
@keyframes balloon-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.final .balloons .balloon { animation-name: balloon-rise-card; }
@keyframes balloon-rise-card {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: .8; }
  85%  { opacity: .8; }
  100% { transform: translate3d(20px, -900px, 0); opacity: 0; }
}
@media (max-width: 760px) {
  .balloon.k2, .balloon.k4 { display: none; }
  .balloon { width: 42px !important; }
  .balloon.k3 { left: 82%; }
}
@media (prefers-reduced-motion: reduce) { .balloons { display: none; } }

/* Magnetic buttons: smooth spring back */
.btn.magnetic { transition: transform .35s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s, background .2s; will-change: transform; }
.btn.magnetic > span, .btn.magnetic > svg { transition: transform .35s cubic-bezier(.2,.9,.3,1.3); }

/* Hero headline: words rise in one by one, then the highlight sweeps under "right day." (once) */
.h-anim .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(4px);
  animation: word-in .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 90ms + 100ms); }
.h-anim em { background-size: 0% 100%; background-repeat: no-repeat; animation: marker .7s cubic-bezier(.6,0,.2,1) .85s forwards; }
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes marker { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .h-anim .w { animation: none; opacity: 1; transform: none; filter: none; }
  .h-anim em { animation: none; background-size: 100% 100%; }
}

/* Branded scrollbar (desktop): slim indigo thumb on a cream track, coral on hover */
html { scrollbar-width: thin; scrollbar-color: #3D3F9E #FFF0E6; } /* Firefox */
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
  html::-webkit-scrollbar { width: 12px; }
  html::-webkit-scrollbar-track { background: #FFF0E6; }
  html::-webkit-scrollbar-thumb { background: #3D3F9E; border-radius: 999px; border: 3px solid #FFF0E6; }
  html::-webkit-scrollbar-thumb:hover { background: #F4744D; }
  html::-webkit-scrollbar-thumb:active { background: #D9582F; }
}

/* Reading progress line under the header */
.site-header { position: sticky; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; overflow: hidden; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #F4744D, #FF9A6B); border-radius: 0 3px 3px 0; will-change: transform; }


/* ---- Accessibility: visible keyboard focus + skip link ---- */
:focus-visible { outline: 3px solid #3D3F9E; outline-offset: 3px; border-radius: 6px; }
.final :focus-visible, .plan.best :focus-visible { outline-color: #FFFFFF; }
main:focus { outline: none; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; background: #3D3F9E; color: #fff !important; padding: 12px 20px;
  border-radius: 999px; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: 12px; }

/* ---- Press kit page ---- */
.press-h { font-size: 26px; margin: 56px 0 18px; }
.section-head h1 { margin: 14px 0 14px; }
.section-head .btn { margin-top: 18px; }
.press-about { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.press-card { background: #fff; border: 1px solid var(--line, #F1E3D8); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-sm); }
.press-card p { margin: 8px 0 0; }
.press-wide { grid-column: 1 / -1; }
.press-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin: 0; }
.press-facts div { background: #fff; border-radius: 16px; padding: 16px 20px; border: 1px solid var(--line, #F1E3D8); }
.press-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 4px; }
.press-facts dd { margin: 0; }
.press-assets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.press-assets .press-card { display: flex; flex-direction: column; gap: 4px; }
.press-assets span { color: var(--muted); font-size: 14px; }
.press-assets a { margin-top: 8px; font-weight: 600; }
.press-view { display: flex; align-items: center; justify-content: center; height: 150px; background: #FFF0E6; border-radius: 14px; margin-bottom: 12px; }
.press-view img { max-width: 80%; max-height: 120px; width: auto; height: auto; }
.press-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.press-shot { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.press-shot img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-sm); background: #FFF0E6; }
.press-shot span { font-size: 14px; font-weight: 600; line-height: 1.3; }
.press-shot b { display: block; color: var(--coral); font-weight: 600; }
.press-note { margin-top: 14px; font-size: 14px; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.swatch { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.swatch span { height: 64px; border-radius: 14px; border: 1px solid rgba(30,31,94,.1); }
.swatch code { color: var(--muted); font-size: 13px; }
.press-use { padding-left: 20px; }
.press-use li { margin-bottom: 8px; }
@media (max-width: 900px) {
  .press-shots { grid-template-columns: repeat(2, 1fr); }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .press-assets { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .press-about, .press-facts { grid-template-columns: 1fr; }
}


/* ---- Brand text selection ---- */
::selection { background: #3D3F9E; color: #fff; }
.final ::selection, .plan.best ::selection, .ticker-band ::selection, .site-footer ::selection { background: #F4744D; color: #fff; }

/* ---- Indigo mouse cursor with a white outline (desktop mouse only; falls back to the system cursor) ---- */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cpath%20d=%22M5%203%20L5%2024.5%20L10.2%2019.6%20L13.6%2027.4%20L17.4%2025.7%20L14%2018%20L21.5%2018%20Z%22%20fill=%22%23fff%22%20stroke=%22%23fff%22%20stroke-width=%223.2%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M5%203%20L5%2024.5%20L10.2%2019.6%20L13.6%2027.4%20L17.4%2025.7%20L14%2018%20L21.5%2018%20Z%22%20fill=%22%233D3F9E%22/%3E%3C/svg%3E") 4 3, auto; }
  /* keep the text cursor over readable text so people can see it is selectable */
  p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote, figcaption, label, code { cursor: text; }
  a, a *, button, button *, summary, summary *, [role="button"], .btn, .btn *, .demo-dots button { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20fill=%22%23fff%22%20stroke=%22%23fff%22%20stroke-width=%223.2%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%229.4%22%20y=%222.2%22%20width=%225.4%22%20height=%2215%22%20rx=%222.7%22/%3E%3Crect%20x=%2214.8%22%20y=%229%22%20width=%224.8%22%20height=%2210%22%20rx=%222.4%22/%3E%3Crect%20x=%2219.6%22%20y=%2210.4%22%20width=%224.8%22%20height=%229.4%22%20rx=%222.4%22/%3E%3Crect%20x=%2224.2%22%20y=%2212.4%22%20width=%224.4%22%20height=%228.4%22%20rx=%222.2%22/%3E%3Crect%20x=%228.4%22%20y=%2214.5%22%20width=%2220.2%22%20height=%2212.8%22%20rx=%226%22/%3E%3Crect%20x=%223.4%22%20y=%2214.6%22%20width=%2210%22%20height=%225%22%20rx=%222.5%22%20transform=%22rotate(28%208.4%2017.1)%22/%3E%3C/g%3E%3Cg%20fill=%22%233D3F9E%22%3E%3Crect%20x=%229.4%22%20y=%222.2%22%20width=%225.4%22%20height=%2215%22%20rx=%222.7%22/%3E%3Crect%20x=%2214.8%22%20y=%229%22%20width=%224.8%22%20height=%2210%22%20rx=%222.4%22/%3E%3Crect%20x=%2219.6%22%20y=%2210.4%22%20width=%224.8%22%20height=%229.4%22%20rx=%222.4%22/%3E%3Crect%20x=%2224.2%22%20y=%2212.4%22%20width=%224.4%22%20height=%228.4%22%20rx=%222.2%22/%3E%3Crect%20x=%228.4%22%20y=%2214.5%22%20width=%2220.2%22%20height=%2212.8%22%20rx=%226%22/%3E%3Crect%20x=%223.4%22%20y=%2214.6%22%20width=%2210%22%20height=%225%22%20rx=%222.5%22%20transform=%22rotate(28%208.4%2017.1)%22/%3E%3C/g%3E%3C/svg%3E") 12 3, pointer; }
}

/* Same hand over the older, more specific clickable rules */
@media (hover: hover) and (pointer: fine) {
  .faq summary, .faq summary *, .showcase .dot, .menu-btn, .menu-btn * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20fill=%22%23fff%22%20stroke=%22%23fff%22%20stroke-width=%223.2%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%229.4%22%20y=%222.2%22%20width=%225.4%22%20height=%2215%22%20rx=%222.7%22/%3E%3Crect%20x=%2214.8%22%20y=%229%22%20width=%224.8%22%20height=%2210%22%20rx=%222.4%22/%3E%3Crect%20x=%2219.6%22%20y=%2210.4%22%20width=%224.8%22%20height=%229.4%22%20rx=%222.4%22/%3E%3Crect%20x=%2224.2%22%20y=%2212.4%22%20width=%224.4%22%20height=%228.4%22%20rx=%222.2%22/%3E%3Crect%20x=%228.4%22%20y=%2214.5%22%20width=%2220.2%22%20height=%2212.8%22%20rx=%226%22/%3E%3Crect%20x=%223.4%22%20y=%2214.6%22%20width=%2210%22%20height=%225%22%20rx=%222.5%22%20transform=%22rotate(28%208.4%2017.1)%22/%3E%3C/g%3E%3Cg%20fill=%22%233D3F9E%22%3E%3Crect%20x=%229.4%22%20y=%222.2%22%20width=%225.4%22%20height=%2215%22%20rx=%222.7%22/%3E%3Crect%20x=%2214.8%22%20y=%229%22%20width=%224.8%22%20height=%2210%22%20rx=%222.4%22/%3E%3Crect%20x=%2219.6%22%20y=%2210.4%22%20width=%224.8%22%20height=%229.4%22%20rx=%222.4%22/%3E%3Crect%20x=%2224.2%22%20y=%2212.4%22%20width=%224.4%22%20height=%228.4%22%20rx=%222.2%22/%3E%3Crect%20x=%228.4%22%20y=%2214.5%22%20width=%2220.2%22%20height=%2212.8%22%20rx=%226%22/%3E%3Crect%20x=%223.4%22%20y=%2214.6%22%20width=%2210%22%20height=%225%22%20rx=%222.5%22%20transform=%22rotate(28%208.4%2017.1)%22/%3E%3C/g%3E%3C/svg%3E") 12 3, pointer; }
}


/* Pricing buttons: clear indigo outline on the paid plans (the border used to be nearly invisible);
   "Start free" is the filled coral button, "Go Annual" stays white on the indigo card. */
#pricing .plan:not(.best) .btn-light { background: #fff; border: 2px solid var(--indigo); color: var(--indigo) !important; padding: 13px 25px; }
#pricing .plan:not(.best) .btn-light:hover { background: var(--indigo); color: #fff !important; }
#pricing .plan .btn-coral { font-size: inherit; }


/* Social icons: a slim strip in the left gutter, desktops only. It needs a viewport at least 1320px wide so it
   sits outside the 1160px content column; phones and smaller windows use the footer's Follow links instead. */
.social-rail { display: none; }
@media (min-width: 1320px) {
  .social-rail { display: flex; flex-direction: column; gap: 12px; position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 40; }
  .social-rail a { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--indigo);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .18s ease, background .18s ease, color .18s ease; }
  .social-rail a:hover, .social-rail a:focus-visible { background: var(--indigo); color: #fff; transform: translateX(3px); text-decoration: none; }
  .social-rail a:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .social-rail a { transition: none; } .social-rail a:hover { transform: none; } }


/* Hero download button: a short, gentle wiggle to draw the eye. It plays three times (first after 3s, then every 10s)
   and then stops, pauses when the pointer or keyboard focus is on the button, and is off for people who prefer reduced motion. */
@keyframes cta-wiggle {
  0%, 9%, 100% { transform: rotate(0deg); }
  1.5% { transform: rotate(-3.5deg); }
  3% { transform: rotate(3deg); }
  4.5% { transform: rotate(-2.5deg); }
  6% { transform: rotate(2deg); }
  7.5% { transform: rotate(-1deg); }
}
.hero-cta { animation: cta-wiggle 10s ease-in-out 3s 3; transform-origin: 50% 60%; }
.hero-cta:hover, .hero-cta:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-cta { animation: none; } }


/* Social icons and the footer's Follow links: a small wiggle when the pointer or keyboard focus lands on them. */
@keyframes social-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
}
.social-link { align-self: flex-start; transform-origin: 20% 60%; }
.social-link:hover, .social-link:focus-visible { animation: social-wiggle .5s ease-in-out; }
@media (min-width: 1320px) {
  .social-rail a:hover, .social-rail a:focus-visible { transform: none; animation: social-wiggle .5s ease-in-out; }
}
@media (prefers-reduced-motion: reduce) { .social-link:hover, .social-link:focus-visible, .social-rail a:hover, .social-rail a:focus-visible { animation: none; } }