/* Billow website. Colours are the app's tokens (design/tokens.json): the launch
   splash's neon pink for the hero, the app blue where the breath is, and the
   light fog the app lives on. The one bold move is the live plume rising
   through the pink hero; everything after it stays calm. Light only, like
   the app. */

/* Preloaded and small, so the page waits a moment for Fredoka rather than flashing a stand-in. */
@font-face { font-family: Fredoka; font-weight: 400; font-display: block; src: url(../assets/fonts/Fredoka_400Regular.ttf) format("truetype"); }
@font-face { font-family: Fredoka; font-weight: 600; font-display: block; src: url(../assets/fonts/Fredoka_600SemiBold.ttf) format("truetype"); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: block; src: url(../assets/fonts/Fredoka_700Bold.ttf) format("truetype"); }

:root {
  /* day (fog): where the app lives */
  --fog: #E6E8F0;
  --raised: #F3F4F8;
  --hairline: #D3D7E3;
  --ink: #1D2242;
  --ink-soft: #565C7E;
  /* the splash: neon pink, with its glow */
  --pink: #D43BA8;
  --pink-deep: #A9228A;
  --pink-soft: #FFE3F5;
  --glow: #FFD3F1;
  /* the app blue: primary on day, the sky on the blow screen */
  --blue: #3A4DFF;
  --blue-soft: #E3E6FF;
  /* category tints, as on the app's icon tiles */
  --violet: #8B3FF2;
  --orange: #EE4A16;
  --bezel: #0B0D24;

  --gutter: clamp(20px, 5vw, 48px);
  --measure: 34rem;
  --wide: 70rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font: 400 1.125rem/1.55 Fredoka, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- top bar (shared) ---------------------------------------------------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--wide); margin: 0 auto; padding: 20px var(--gutter);
  position: relative; z-index: 2;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.375rem; text-decoration: none; color: var(--blue); }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.bar__link { font-weight: 600; font-size: 1rem; text-decoration: none; padding: 10px 2px; }
.bar__link:hover { text-decoration: underline; }

/* ---- hero: the splash, with the live plume ------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(660px, 100svh);
  display: flex; flex-direction: column;
  background: var(--pink) url(../assets/plume-hero.jpg) center bottom / cover no-repeat;
  color: #fff;
}
.hero.has-plume { background-image: none; }
.hero__plume { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero .brand { color: #fff; }
.hero .brand img { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.hero__copy {
  max-width: 52rem; margin: 0 auto; padding: clamp(4px, 4vh, 56px) var(--gutter) 0;
  text-align: center;
}
/* The icon's neon stop sign (its glow is in the image), popping in as the plume rises to it, as on the splash. */
.hero__sign {
  width: clamp(96px, 56px + 7vw, 150px); height: auto; margin: 0 auto clamp(4px, 1.5vh, 14px);
  animation: sign-pop 620ms var(--ease) 900ms both;
}
@keyframes sign-pop {
  0% { opacity: 0; transform: scale(0.55); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.hero h1 {
  font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.4rem);
  line-height: 1; letter-spacing: -0.015em;
  text-shadow: 0 0 28px rgba(255, 211, 241, 0.75), 0 2px 18px rgba(140, 20, 110, 0.35);
}
.hero__lede {
  max-width: 34rem; margin: 22px auto 0;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); color: var(--pink-soft);
  text-shadow: 0 1px 14px rgba(140, 20, 110, 0.55);
}
.get { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.get img { height: 52px; width: auto; }
.get__note { font-size: 0.9375rem; color: var(--pink-soft); text-shadow: 0 1px 10px rgba(140, 20, 110, 0.7); }

/* The demo: hold the pill and the plume climbs; at the top it's counted. */
.try {
  margin-top: auto; padding: clamp(24px, 4vh, 40px) var(--gutter) clamp(22px, 5vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.hold {
  appearance: none; border: 2px solid #fff; border-radius: 999px;
  min-height: 56px; padding: 0 30px;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 600 1.0625rem/1 Fredoka, ui-rounded, system-ui, sans-serif;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.hold:hover { background: rgba(255, 255, 255, 0.26); }
.hold[data-state="holding"] { transform: scale(0.96); background: rgba(255, 255, 255, 0.32); }
.hold[data-state="counted"] { background: #fff; color: var(--pink); }
.try__hint { font-size: 0.9375rem; color: var(--pink-soft); max-width: 22rem; text-shadow: 0 1px 10px rgba(140, 20, 110, 0.6); }
/* The splash's own line, at the foot of the hero as at the foot of the splash. */
.flavor {
  margin-top: 10px; font-weight: 600; font-size: 1.125rem; letter-spacing: 0.01em;
  text-shadow: 0 0 14px var(--glow), 0 0 4px rgba(255, 211, 241, 0.8);
}
.hero.no-webgl .try .hold, .hero.no-webgl .try__hint { display: none; }

/* Today's counter, over the base of the plume: a dot per puff in the day's
   limit around the count, as on Today. Shown once the demo can run. */
.tally {
  display: none; position: relative; width: clamp(104px, 84px + 3vw, 124px); aspect-ratio: 1;
  border-radius: 50%; place-items: center; align-content: center;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero.has-plume .tally { display: grid; }
.tally__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Idle dots faint white; a counted puff's dot in the app blue, as on Today. */
.tally__ring circle { fill: #fff; opacity: 0.34; transition: opacity 240ms var(--ease), fill 240ms var(--ease); }
.tally__ring circle.is-used { fill: var(--blue); opacity: 1; stroke: #fff; stroke-width: 1.4; }
.tally__count {
  font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em;
  text-shadow: 0 0 18px rgba(255, 211, 241, 0.7);
}
.tally__count.is-new { animation: count-tick 420ms var(--ease); }
@keyframes count-tick { 0% { transform: scale(1.14); } 100% { transform: scale(1); } }
.tally__label { max-width: 76%; margin-top: 2px; font-size: 0.75rem; line-height: 1.2; color: var(--pink-soft); }

/* ---- shared section pieces ------------------------------------------------ */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.section-title { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.008em; }
.phone {
  margin: 0 auto; width: min(300px, 76vw);
  padding: 9px; border-radius: 48px; background: var(--bezel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 34px 60px -24px rgba(29, 34, 66, 0.45), 0 12px 24px -12px rgba(29, 34, 66, 0.3);
}
.phone img { width: 100%; border-radius: 39px; aspect-ratio: 1320 / 2868; }

/* A small solid tile in a category tint, as on the app's cards. */
.tile {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: #fff; flex: none;
}
.tile svg { width: 22px; height: 22px; }
.tile--violet { background: var(--violet); box-shadow: 0 6px 16px -6px var(--violet); }
.tile--orange { background: var(--orange); box-shadow: 0 6px 16px -6px var(--orange); }
.tile--pink { background: var(--pink); box-shadow: 0 6px 16px -6px var(--pink); }
.tile--blue { background: var(--blue); box-shadow: 0 6px 16px -6px var(--blue); }

/* ---- the breath: the blow screen's blue ----------------------------------- */
.breath {
  background: var(--blue) url(../assets/plume-band.jpg) center bottom / 100% auto no-repeat;
  color: #fff;
  padding: clamp(80px, 12vw, 140px) 0;
}
.breath .wrap { display: grid; gap: 48px; align-items: center; }
.breath p { margin-top: 18px; max-width: var(--measure); color: var(--blue-soft); }
.mic {
  margin-top: 28px; display: flex; align-items: center; gap: 14px;
  max-width: 28rem; padding: 14px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-weight: 600; color: #fff;
}
.mic .tile { background: rgba(255, 255, 255, 0.22); box-shadow: none; }
@media (min-width: 820px) {
  .breath .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(48px, 7vw, 112px); }
}

/* ---- features on fog: a claim beside the screen that shows it -------------- */
.feature { padding-top: clamp(80px, 12vw, 136px); }
.feature .wrap { display: grid; gap: 40px; align-items: center; }
.feature__head { display: flex; flex-direction: column; gap: 18px; }
.feature p { max-width: var(--measure); color: var(--ink-soft); }
@media (min-width: 820px) {
  .feature .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(48px, 7vw, 112px); }
  .feature--flip .wrap { grid-template-columns: auto minmax(0, 1fr); }
  .feature--flip .phone { order: -1; }
}

/* ---- the hard moments: three tools side by side ----------------------------- */
.moments { padding: clamp(96px, 14vw, 160px) 0 0; }
.moments__lede { margin-top: 16px; max-width: 38rem; color: var(--ink-soft); }
.trio {
  margin-top: 48px; display: grid; gap: 48px 32px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.trio figure { margin: 0; }
.trio .phone { width: min(260px, 72vw); border-radius: 42px; padding: 8px; }
.trio .phone img { border-radius: 34px; }
.trio figcaption { margin: 26px auto 0; max-width: 18rem; display: flex; gap: 14px; align-items: flex-start; }
.trio h3 { font-size: 1.25rem; line-height: 1.2; }
.trio figcaption p { margin-top: 4px; font-size: 1rem; color: var(--ink-soft); }

/* ---- widgets: back to the blue -------------------------------------------- */
.anywhere { margin-top: clamp(96px, 14vw, 160px); background: var(--blue); color: #fff; padding: clamp(80px, 11vw, 128px) 0; overflow: hidden; }
.anywhere .wrap { display: grid; gap: 48px; align-items: center; }
.anywhere p { margin-top: 18px; max-width: var(--measure); color: var(--blue-soft); }
.widgets { margin: 0 auto; width: min(560px, 100%); filter: drop-shadow(0 28px 36px rgba(10, 16, 110, 0.45)); }
@media (min-width: 820px) { .anywhere .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* ---- pricing ------------------------------------------------------------ */
.pricing { padding: clamp(96px, 14vw, 160px) 0 clamp(80px, 12vw, 128px); }
.plans { margin-top: 40px; display: grid; gap: 20px; }
.plan { padding: 30px 28px 32px; border-radius: 24px; background: var(--raised); }
.plan--plus { background: #fff; box-shadow: 0 0 0 2px var(--blue), 0 24px 48px -28px rgba(58, 77, 255, 0.55); }
.plan h3 { font-size: 1.5rem; }
.plan__price { margin-top: 6px; color: var(--ink-soft); }
.plan__trial { margin-top: 2px; font-weight: 600; color: var(--blue); }
.plan ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li { padding-left: 30px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 14px; height: 8px;
  border-left: 2.5px solid var(--violet); border-bottom: 2.5px solid var(--violet); transform: rotate(-45deg);
}
.pricing__small { margin-top: 24px; font-size: 0.9375rem; color: var(--ink-soft); max-width: 42rem; }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; } }

/* ---- common questions ---------------------------------------------------- */
.faq { padding-bottom: clamp(80px, 11vw, 128px); }
.faq__list { margin-top: 32px; display: grid; gap: 12px; max-width: 46rem; }
.faq details { border-radius: 20px; background: var(--raised); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 22px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.125rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg);
  transition: transform 200ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq details p { padding: 0 22px 20px; max-width: 40rem; color: var(--ink-soft); }

/* ---- languages: each in its own words ------------------------------------- */
.langs { padding-bottom: clamp(72px, 10vw, 112px); }
.langs h2 { font-size: 1.375rem; }
.langs ul { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.langs li { padding: 8px 16px; border-radius: 999px; background: var(--raised); font-weight: 600; font-size: 1rem; }

/* ---- footer (shared) ---------------------------------------------------- */
.foot { max-width: var(--wide); margin: 0 auto; padding: 48px var(--gutter) 56px; font-size: 0.9375rem; color: var(--ink-soft); border-top: 1px solid var(--hairline); }
.foot__care { max-width: 40rem; }
.foot__nav { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot__nav a { color: var(--ink); font-weight: 600; text-decoration: none; padding: 6px 0; }
.foot__nav a:hover { text-decoration: underline; }
.foot__legal { margin-top: 16px; }

/* ---- reading pages: privacy, terms, support ----------------------------- */
.doc { max-width: 44rem; margin: 0 auto; padding: clamp(24px, 6vw, 64px) var(--gutter) 40px; font-size: 1.0625rem; line-height: 1.62; }
.doc h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.06; color: var(--blue); }
.doc__date { margin-top: 10px; color: var(--ink-soft); }
.doc h2 { font-size: 1.375rem; line-height: 1.25; margin-top: 44px; }
.doc h3 { font-size: 1.125rem; margin-top: 28px; }
.doc p, .doc ul, .doc table { margin-top: 12px; }
.doc ul { padding-left: 1.25em; }
.doc li + li { margin-top: 6px; }
.doc strong { font-weight: 600; }
.doc .conspicuous { font-weight: 600; }
.doc a { color: var(--blue); }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); }
.doc th { font-weight: 600; }
.doc .summary { margin-top: 28px; padding: 22px 24px; border-radius: 20px; background: var(--raised); }
.doc .summary h2 { margin-top: 0; }
.doc .summary ul { margin-top: 10px; }
.table-scroll { overflow-x: auto; }
.doc address { font-style: normal; margin-top: 12px; }

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hold, .tally__ring circle, .faq summary::after { transition: none; }
  .hero__sign, .tally__count.is-new { animation: none; }
}