/* The homepage's deep teal look. Loads after home.css, which holds the layout.
   Hero: one clean teal, a soft video behind it, stage lights over it, ending in a wave.
   Below it, warm cream and deep teal sections take turns, joined by the same wave. */
:root {
  --cream: #fbf5e6; --cream-2: #f3ead5; --deep: #06424f; --deep-2: #04303a;
  --on-deep: #fff; --on-deep-soft: #d5ddf2; --on-deep-accent: #5fe3e8;
  --bg: var(--cream); --bg-2: var(--cream); --line: #e8dfcb; --muted: #565877;
  --cta: #d93a27; --cta-2: #c4301f;
  --section-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V64C260 0 560 4 820 42 1060 78 1260 74 1440 24V100Z'/%3E%3C/svg%3E");
  --section-wave-h: clamp(30px, 5vw, 76px);
}

/* Header: clear over the hero, solid cream once scrolled (js/home.js sets .at-top) */
.head { background: rgba(251, 245, 230, .97); transition: background-color .2s ease; }
.head.at-top { background: transparent; }
.head.at-top .logo, .head.at-top .nav-links a, .head.at-top .nav-links a:hover { color: #fff; }
.head.at-top .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.head.at-top .btn-primary, .head.at-top .btn-primary:hover { background: #fff; color: #111640; box-shadow: none; }
@media (max-height: 560px) { .head { position: relative; } } /* stays above the hero background on short windows */

/* The hero fills the window exactly (--head-h comes from js/home.js), so the next section never peeks in.
   Spare space goes around the headline; the cards and features stay at the bottom. */
.first { isolation: isolate; min-height: calc(100svh - var(--head-h, 56px)); }
.hero-copy { margin-block: auto; }
@media (min-width: 1000px) {
  .hero-band { margin-block: auto; }
  .hero-copy { margin-block: 0; }
}
.hero-wave, .hero-wave-left, .ground-wave { display: none; }

/* Hero background. --film-strength and --film-dim are the two dials for how much the video shows.
   --film-lift only has to be taller than the header; the extra sits above the page and is never seen. */
.hero-film {
  --film-strength: .6; --film-dim: .85; --film-lift: 120px;
  --wave-h: clamp(30px, 5vw, 76px);
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V36C1180 104 880 100 620 62 380 26 180 30 0 80Z'/%3E%3C/svg%3E");
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--film-lift));
  height: calc(100% + var(--film-lift) + var(--wave-h));
  z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(170deg, #06424f, #0a6a78);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat, var(--wave-mask) bottom / 100% var(--wave-h) no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat, var(--wave-mask) bottom / 100% var(--wave-h) no-repeat;
}
.hero-film video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  filter: grayscale(1) contrast(1.15) brightness(var(--film-dim));
  mix-blend-mode: soft-light; opacity: var(--film-strength);
}
.hero-film::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(38% 52% at 74% 36%, rgba(120, 240, 240, .22), transparent 72%), radial-gradient(34% 46% at 8% 92%, rgba(244, 89, 75, .2), transparent 72%);
}

/* Hero text and main button */
.hero-copy h1, .hero-copy .lede, .hero-copy .btn-link, .hero-copy .btn-link:hover { color: #fff; }
.hero-copy .lede { font-weight: 400; }
.hero-copy .btn-link { text-decoration-color: rgba(255, 255, 255, .7); }
.swoosh svg path { stroke: #f4594b; }

/* Phones and Bud */
.stage { --phone-frame: #0a0f3a; }
.stage .blob { display: none; }
.stage .spark { color: #4fe3e8; }
.stage .phone { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22), 0 30px 60px -20px rgba(2, 6, 34, .9); }
.stage .phone-song img, .stage .phone-voice img { filter: none; }
.stage .mascot { filter: drop-shadow(1.6px 0 0 rgba(255, 255, 255, .95)) drop-shadow(-1.6px 0 0 rgba(255, 255, 255, .95)) drop-shadow(0 1.6px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1.6px 0 rgba(255, 255, 255, .95)) drop-shadow(0 12px 22px rgba(2, 6, 34, .6)); }

/* Cards: the photo is the card, with the words on it */
.occasion { box-shadow: 0 18px 34px -20px rgba(2, 6, 34, .9); transition: transform .25s ease, box-shadow .25s ease; }
.occasion:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -20px rgba(2, 6, 34, .95); }
.occasion::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%, rgba(6, 10, 44, .82) 100%); }
.pill { z-index: 1; background: transparent; box-shadow: none; color: #fff; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.pill svg { display: none; }

/* Features: quiet, so the cards lead */
.first .features li { color: #fff; font-weight: 500; }
.first .feat-ico { background: none; width: auto; height: auto; color: var(--on-deep-accent); }
.first .features li + li { border-left-color: rgba(255, 255, 255, .28); }
.first .feature-band { padding-bottom: calc(30 * var(--u)); }

/* The one big call to action is always coral */
.btn-lg.btn-primary, .plan-life .btn-primary { background: var(--cta); color: #fff; box-shadow: 0 16px 30px -16px rgba(228, 67, 47, .9); }
.btn-lg.btn-primary:hover, .plan-life .btn-primary:hover { background: var(--cta-2); }

/* Cream sections */
.ways li, .lesson-stage { background: var(--cream-2); }
.step, .also-list li, .faq-item { background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 14px 28px -24px rgba(40, 30, 10, .5); }
.step-num, .lesson-steps li::before { background: var(--deep); color: #fff; }
.lesson-steps li:last-child::before { background: var(--cta); }
.also-list li { transition: transform .2s ease; }
.also-list li:hover { transform: translateY(-3px); }
#also, .faq { background: var(--cream); }

/* The wave that opens each new colour */
.demo, #also, .pricing, .faq, .start { position: relative; }
.demo::before, #also::before, .pricing::before, .faq::before, .start::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--section-wave-h);
  background: inherit; pointer-events: none;
  -webkit-mask: var(--section-wave) center / 100% 100% no-repeat; mask: var(--section-wave) center / 100% 100% no-repeat;
}

/* Deep sections */
.demo, .pricing, .start { background: var(--deep); }
.demo .sec-head h2, .pricing .sec-head h2, .start h2, .compare-wrap h3, .demo .sec-lede, .pricing .sec-lede, .start .sec-lede { color: var(--on-deep); }
.demo .eyebrow, .pricing .eyebrow { color: var(--on-deep-accent); }
.demo-more, .start-fine, .compare-note { color: var(--on-deep-soft); }
.demo-more a { text-decoration-color: var(--on-deep-accent); }

/* Pricing: Free is quiet, Lifetime is the bright card */
.plan { background: rgba(255, 255, 255, .07); color: var(--on-deep); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.plan .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 13l5 5L20 6.5' fill='none' stroke='%235fe3e8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan-life { background: var(--cream); color: var(--ink); box-shadow: 0 26px 50px -22px rgba(2, 6, 34, .95); }
.plan-life .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 13l5 5L20 6.5' fill='none' stroke='%230a7580' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.compare th, .compare td { color: var(--on-deep); border-top-color: rgba(255, 255, 255, .2); }
.compare .is-us th, .compare .is-us td { color: var(--on-deep-accent); }

/* Footer */
.footer { background: var(--deep-2); color: var(--on-deep-soft); border-top: 0; }
.footer .logo, .footer-col h2 { color: var(--on-deep); }
.footer-about p, .footer-col a, .footer-bottom { color: var(--on-deep-soft); }
.footer-col a:hover { color: var(--on-deep-accent); }
.footer-bottom { border-top-color: rgba(255, 255, 255, .2); }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* App store buttons. Hidden until the apps are live: remove `hidden` from both .stores blocks in index.html,
   add the store links, and swap these drawings for the official badges. The layout below then applies by itself. */
.stores[hidden] { display: none; }
.store { display: inline-flex; align-items: center; gap: 9px; border-radius: 10px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); white-space: nowrap; }
.store span { display: grid; text-align: left; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; line-height: 1.05; }
.store small { font-weight: 400; }
.store b { font-weight: 500; letter-spacing: -.01em; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.footer .stores { margin-top: 18px; }
.footer .store { height: 46px; padding-inline: 12px 15px; }
.footer .store svg { flex: none; width: 23px; height: 23px; }
.footer .store small { font-size: 10px; }
.footer .store b { font-size: 17px; }
.hero-copy .stores { margin-top: calc(14 * var(--u)); }
.hero-copy .store { height: max(42px, calc(50 * var(--u))); padding-inline: 13px 16px; }
.hero-copy .store svg { flex: none; width: max(21px, calc(26 * var(--u))); height: max(21px, calc(26 * var(--u))); }
.hero-copy .store small { font-size: max(9px, calc(11 * var(--u))); }
.hero-copy .store b { font-size: max(16px, calc(20 * var(--u))); }
/* With the buttons showing, the pitch link gives way where height is tight, so the cards stay on the first screen */
@media (max-width: 999px), (max-height: 820px) { .hero-copy .stores:not([hidden]) ~ .hero-alt { display: none; } }
@media (max-width: 999px) {
  .hero-copy .stores:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; gap: 8px; }
  .hero-copy .store { justify-content: center; padding-inline: 8px; height: 40px; }
  .hero-copy .store b { font-size: 15px; }
  .hero-copy .store svg { width: 19px; height: 19px; }
}
@media (min-width: 1000px) {
  .hero-copy { --cta-w: max(300px, calc(350 * var(--u))); }
  .hero-copy:has(.stores:not([hidden])) .btn-lg { width: var(--cta-w); justify-content: center; padding-inline: 16px; }
  .hero-copy .stores:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: var(--cta-w); margin-top: 10px; }
  .hero-copy .store { justify-content: center; padding-inline: 8px; border-radius: 14px; }
}
@media (min-width: 1000px) and (max-height: 620px) { .hero-copy .store { height: 38px; } .hero-copy .store b { font-size: 14px; } .hero-copy .store svg { width: 18px; height: 18px; } .hero-copy .stores:not([hidden]) { margin-top: 6px; } }
@media (max-width: 999px) and (max-height: 600px), (min-width: 1000px) and (max-height: 540px) { .hero-copy .stores:not([hidden]) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .occasion, .also-list li { transition: none; }
  .occasion:hover, .also-list li:hover { transform: none; }
}

/* Phones and tablets: the headline and Start free first, then Bud and the phones, then the cards and features (user's choice, 7 Nov 2026) */
@media (max-width: 999px) {
  .stage { order: 2; margin-top: 18px; margin-bottom: 4px; }
  .occasions { order: 3; }
  .feature-band { order: 4; }
}
@media (min-width: 560px) and (max-width: 999px) { .stage { max-width: 720px; } }
/* A little smaller on phones and tablets, so Bud and the phones sit comfortably under the button */
@media (max-width: 559px) { .stage { max-width: min(80vw, 300px); } }
@media (min-width: 560px) and (max-width: 999px) { .stage { max-width: 600px; } }