/* ==========================================================================
   DayErly — site styles

   Design notes, so future edits keep the intent:

   The app's own UI is light — near-white with soft tinted cards. The site
   is dark. That contrast is deliberate: every screenshot on the page
   becomes a bright object against a dark field, so the product reads as
   the subject rather than as decoration inside a layout.

   The recurring device is the coral dot from the app icon. It marks
   sections, sits inside the logo, and terminates the eyebrow rules. It is
   the one motif carried everywhere, which is what keeps a ten-page site
   feeling like one thing.

   Type is a single family (Figtree) worked hard: 800 for display at tight
   tracking, 400 for prose at generous leading. Two families would compete
   with the screenshots, which already carry a lot of visual information.
   ========================================================================== */

:root {
  --bg: #121419;
  --bg-elevated: #1A1C24;
  --surface: #212328;
  --surface-hi: #2A2D34;

  --coral: #FF6B6B;
  --orange: #FF8E53;
  --mint: #34C759;
  --sky: #64D2FF;

  --text: #F5F6F8;
  --text-2: #A8ADBA;
  --text-3: #6F7684;

  --line: rgba(255, 255, 255, .08);
  --line-hi: rgba(255, 255, 255, .14);

  --grad: linear-gradient(135deg, var(--coral), var(--orange));

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shell: 1160px;
  --gutter: clamp(20px, 5vw, 40px);

  --step: clamp(64px, 9vw, 116px);
}

/* ── Reset ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

a { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--coral); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; z-index: 200;
}
.skip-link:focus { left: 0; top: 0; }

/* ── Type scale ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}

h1 { font-size: clamp(2.35rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.025em; }
h3 { font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.25; }
h4 { font-size: 1.02rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 56ch;
}

.muted { color: var(--text-2); }
.small { font-size: .92rem; }

/* Section eyebrow. The rule ends in the icon's coral dot rather than
   being a tracked-out caps label floating on its own. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 700;
  color: var(--text-3);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--coral));
  border-radius: 2px;
}
.eyebrow::after {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: var(--coral);
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Anything with an id can be jumped to. Without this the sticky header
   covers the heading you just navigated to, which reads as the link
   landing in the wrong place. */
[id] { scroll-margin-top: 88px; }

.section { padding-block: var(--step); }
.section--tight { padding-block: calc(var(--step) * .6); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head p { margin-top: 14px; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn--primary { background: var(--grad); color: #fff; }
.btn--primary:hover { color: #fff; }

.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-hi);
}
.btn--ghost:hover { border-color: var(--coral); color: var(--coral); }

.btn--sm { padding: 10px 18px; font-size: .92rem; }

/* Store buttons. A store link that isn't live yet becomes a labelled,
   non-interactive chip — better than a button that goes nowhere. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }

.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px;
  border: 1px solid var(--line-hi);
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color .16s ease, background-color .16s ease;
}
.store-btn:hover { text-decoration: none; border-color: var(--coral); background: var(--surface); }
.store-btn svg { flex: none; }
.store-btn span { display: block; font-size: .68rem; color: var(--text-3); line-height: 1.3; }
.store-btn strong { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }

.store-btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }

/* ── Header ─────────────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15, 17, 21, .82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex; align-items: center; gap: 20px;
  height: 68px;
}

.logo {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--text); font-weight: 800; font-size: 1.16rem;
  letter-spacing: -.03em; margin-right: auto;
}
.logo:hover { text-decoration: none; }
.logo img { width: 32px; height: 32px; border-radius: 9px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 14px; border-radius: 999px;
  color: var(--text-2); font-size: .96rem; font-weight: 600;
}
.nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); }

/* The nav carries its own CTA for the mobile drawer. On desktop the
   standalone one beside it is the real button, so this copy hides —
   otherwise the header shows "Download DayErly" twice. */
.nav > .btn { display: none; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text); cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .header__inner { gap: 12px; }
  .nav {
    position: fixed; inset: 68px 0 auto;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 16px var(--gutter) 26px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 13px 14px; font-size: 1.04rem; }
  .header__inner > .btn { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 10px; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px) clamp(60px, 8vw, 104px);
  overflow: hidden;
}

/* One soft coral bloom behind the phones. The only ambient effect on the
   site — spending the glow budget in a single place keeps the rest of
   the page calm. */
.hero::before {
  content: "";
  position: absolute; top: -22%; right: -8%;
  width: min(780px, 92vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 107, 107, .17), transparent 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid; gap: clamp(40px, 6vw, 68px);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 32px; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px;
}

/* Phone frames ------------------------------------------------------- */

.phone {
  position: relative;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #35383F, #17191E);
  box-shadow:
    0 2px 3px rgba(255, 255, 255, .08) inset,
    0 30px 70px -20px rgba(0, 0, 0, .8);
}
/* height: auto is load-bearing, not tidiness. The <img> tags carry
   width/height attributes so the browser can reserve space before the
   image loads (which prevents layout shift). Setting only `width` in CSS
   leaves the HTML `height` attribute in force, so every screenshot
   rendered 196px wide by its full 1348px tall — squeezed to about a
   third of its proper width. */
.phone img {
  border-radius: 32px;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 620 / 1348;
  object-fit: cover;
}

/* No drawn notch: the screenshots already include the Dynamic Island,
   and overlaying a second one produced a doubled black blob. The bezel
   alone is enough to read as a phone. */

.hero__phones {
  position: relative;
  padding-block: 8px;
  min-height: 540px;
}

.hero__phones .phone {
  position: absolute;
  width: 62%;
}
/* Front phone: the one that has to be readable. */
.hero__phones .phone:first-child {
  left: 0; top: 40px;
  z-index: 2;
}
/* Back phone: offset up and right, dimmed slightly so the eye settles on
   the front one rather than treating them as equals. */
/* nth-child(2), not :last-child — Dayo is the last child now. */
.hero__phones .phone:nth-child(2) {
  right: 0; top: 0;
  z-index: 1;
  width: 58%;
  opacity: .92;
}

@media (max-width: 940px) {
  .hero__phones { max-width: 560px; margin-inline: auto; min-height: 520px; }
}
@media (max-width: 560px) {
  .hero__phones { min-height: 0; padding-block: 0; }
  .hero__phones .phone { position: static; width: 100%; max-width: 290px; margin-inline: auto; }
  .hero__phones .phone:nth-child(2) { display: none; }
}

/* ── Cards ──────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}

.card h3 { margin-bottom: 9px; }
.card p { color: var(--text-2); font-size: .98rem; margin: 0; }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(255, 107, 107, .12);
  color: var(--coral);
  margin-bottom: 18px;
}
.card__icon--mint { background: rgba(52, 199, 89, .12); color: var(--mint); }
.card__icon--sky { background: rgba(100, 210, 255, .12); color: var(--sky); }

.tag {
  display: inline-block;
  margin-left: 8px; padding: 3px 9px;
  border-radius: 999px;
  background: rgba(100, 210, 255, .14); color: var(--sky);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
}

/* Steps. Numbered because the content genuinely is a sequence. */
.steps { counter-reset: step; display: grid; gap: 16px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 24px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.step::before {
  counter-increment: step; content: counter(step);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface);
  color: var(--coral);
  font-weight: 800; font-size: 1.02rem;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--text-2); margin: 0; font-size: .98rem; }

/* ── Screenshot rail ────────────────────────────────────────────────── */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 258px);
  gap: 22px;
  overflow-x: auto;
  padding: 6px var(--gutter) 30px;
  margin-inline: calc(var(--gutter) * -1);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-hi) transparent;
}
.rail > * { scroll-snap-align: center; }
.rail figure { margin: 0; }

.rail figcaption {
  margin-top: 14px;
  font-size: .9rem; font-weight: 600;
  color: var(--text-2); text-align: center;
}

/* ── Feature rows (alternating) ─────────────────────────────────────── */

.showcase {
  display: grid; gap: clamp(32px, 6vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
}
.showcase + .showcase { margin-top: var(--step); }
.showcase--flip .showcase__media { order: -1; }
.showcase__media { max-width: 300px; margin-inline: auto; }



@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase--flip .showcase__media { order: 0; }
}

.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.checks li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  color: var(--text-2); font-size: .98rem;
}
.checks li::before {
  content: ""; width: 7px; height: 7px; margin-top: 10px;
  border-radius: 50%; background: var(--coral);
}

/* ── Quote / motivation band ────────────────────────────────────────── */

.band {
  background: var(--bg-elevated);
  border-block: 1px solid var(--line);
  text-align: center;
}
.band h2 { max-width: 18ch; margin-inline: auto; }
.band p { margin-inline: auto; margin-top: 20px; }

/* ── CTA ────────────────────────────────────────────────────────────── */

.cta-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-hi);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255, 107, 107, .2), transparent 58%),
    var(--bg-elevated);
  padding: clamp(38px, 6vw, 68px);
  text-align: center;
}
.cta-panel .stores { justify-content: center; margin-top: 30px; }
.cta-panel p { margin-inline: auto; }

/* ── FAQ / accordion ────────────────────────────────────────────────── */

.faq { display: grid; gap: 12px; max-width: 820px; }

details.qa {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 22px;
}
details.qa[open] { border-color: var(--line-hi); }

details.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 0;
  font-weight: 700; font-size: 1.04rem;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem; font-weight: 400; color: var(--text-3);
  line-height: 1;
  transition: transform .2s ease;
}
details.qa[open] summary::after { transform: rotate(45deg); color: var(--coral); }
details.qa .qa__body { padding-bottom: 22px; color: var(--text-2); }
details.qa .qa__body p { font-size: .98rem; }

/* ── Support categories ─────────────────────────────────────────────── */

.topics { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.topics li { color: var(--text-2); font-size: .96rem; padding-left: 16px; position: relative; }
.topics li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-3);
}

/* ── Legal / prose pages ────────────────────────────────────────────── */

.prose { max-width: 76ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  margin-top: 52px; margin-bottom: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 8px; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.06rem; margin-top: 26px; margin-bottom: 8px; }
.prose p, .prose li { color: var(--text-2); font-size: 1rem; }
.prose ul { padding-left: 20px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); font-weight: 700; }

.page-head {
  padding-block: clamp(44px, 6vw, 76px) clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.page-head p { margin-top: 16px; }

.callout {
  border: 1px solid var(--line-hi);
  border-left: 3px solid var(--coral);
  border-radius: var(--r);
  background: var(--bg-elevated);
  padding: 22px 24px;
  margin: 28px 0;
}
.callout p { color: var(--text-2); font-size: .98rem; }
.callout strong { color: var(--text); }

.toc {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 26px;
  margin-bottom: 40px;
}
.toc h2 { font-size: .95rem !important; margin: 0 0 12px !important; border: 0 !important; padding: 0 !important; }
.toc ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 30px; }
.toc li { margin-bottom: 6px; font-size: .93rem; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ── Footer ─────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 56px 34px;
  margin-top: var(--step);
}

.footer__grid {
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }

.footer h4 { margin-bottom: 14px; font-size: .95rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a { color: var(--text-2); font-size: .94rem; }
.footer ul a:hover { color: var(--text); }

.footer__brand p { color: var(--text-3); font-size: .94rem; margin-top: 14px; max-width: 30ch; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin-top: 46px; padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: .89rem;
}
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-2);
}
.footer__social a:hover { border-color: var(--coral); color: var(--coral); }

/* ==========================================================================
   Dayo — the mascot
   --------------------------------------------------------------------------
   Dayo is an indigo, fluffy character with an orange crest and a backpack,
   and the same chevron on his belly as the app icon. On this dark site his
   blue is the one cool colour among warm ones, so he gets a soft glow
   behind him instead of a card — he should feel like he's standing on the
   page, not pasted onto it.

   Poses are separate SVG files (assets/img/dayo/dayo-*.svg, generated by
   make_dayo.py). Swapping an expression is just swapping an <img> src.
   ========================================================================== */

.dayo { display: block; width: 100%; height: auto; aspect-ratio: 248 / 212; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* A speech bubble. The tail points down-right by default (towards Dayo);
   .bubble--left flips it for when he's on the left of the text. */
.bubble {
  position: relative;
  margin: 0;
  max-width: 230px;
  padding: 11px 15px;
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: 16px;
  color: var(--text);
  font-size: .9rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.bubble::after {
  content: "";
  position: absolute; right: 26px; bottom: -8px;
  width: 14px; height: 14px;
  background: var(--surface);
  border-right: 1px solid var(--line-hi);
  border-bottom: 1px solid var(--line-hi);
  transform: rotate(45deg);
  border-radius: 0 0 4px 0;
}
.bubble--left::after { right: auto; left: 26px; }

/* ── Hero mascot ────────────────────────────────────────────────────── */

.hero__dayo {
  position: absolute; z-index: 3;
  left: -104px; bottom: -8px;
  width: clamp(150px, 19vw, 210px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.hero__dayo .bubble { margin-left: 8px; }
.hero__dayo .bubble::after { right: auto; left: 34px; }

.dayo-btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
}
.dayo-btn img { width: 100%; height: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); }
.dayo-btn:hover img, .dayo-btn:focus-visible img { animation: bob 1.6s ease-in-out infinite; }
.dayo-btn:active img { transform: scale(.97); }

@media (max-width: 940px) {
  .hero__dayo { left: -4px; }
}
@media (max-width: 560px) {
  .hero__dayo {
    position: static; width: 190px; margin: 22px auto 0;
    align-items: center;
  }
  .hero__dayo .bubble { margin-left: 0; text-align: center; }
  .hero__dayo .bubble::after { left: 50%; right: auto; margin-left: -7px; }
}

/* ── "Meet Dayo" ────────────────────────────────────────────────────── */

.meet {
  display: grid; align-items: center;
  gap: clamp(30px, 6vw, 72px);
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
}
@media (max-width: 860px) { .meet { grid-template-columns: 1fr; } }

.meet__art {
  position: relative;
  display: grid; place-items: center;
  padding: 10px 0 0;
}
.meet__art::before {
  content: "";
  position: absolute; inset: 4% 0 0;
  background:
    radial-gradient(closest-side, rgba(80, 98, 200, .34), transparent 74%),
    radial-gradient(closest-side at 62% 70%, rgba(255, 142, 83, .13), transparent 70%);
  pointer-events: none;
}
.meet__art img {
  position: relative;
  width: min(108%, 470px);
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .5));
  animation: bob 5.5s ease-in-out infinite;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  padding: 8px 15px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip[aria-pressed="true"] {
  background: rgba(255, 107, 107, .14);
  border-color: rgba(255, 107, 107, .5);
  color: var(--coral);
}
.meet__line {
  margin-top: 18px; min-height: 3.2em;
  color: var(--text); font-weight: 600; font-size: 1.04rem;
}

/* ==========================================================================
   Heatmap
   --------------------------------------------------------------------------
   The colour scale is the app's: solid coral when the streak goal was met,
   three lighter steps below it, blue for a day a streak freeze protected,
   and a deliberately faint cell for "nothing scheduled" — which is not a
   failure, so it must not look like one.
   ========================================================================== */

.heat {
  --cell: 11px; --gap: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(18px, 3vw, 30px);
}

.heat__head {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.heat__title strong { font-size: 1.12rem; letter-spacing: -.02em; }
.heat__sub {
  margin-left: 10px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-3); font-size: .72rem; font-weight: 700;
}

.seg {
  display: inline-flex; padding: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg__btn {
  padding: 7px 18px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer;
}
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-pressed="true"] { background: var(--surface-hi); color: var(--text); }

.heat__toolbar {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 6px 14px;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.pill:hover { color: var(--text); border-color: var(--text-3); }
.pill[aria-pressed="true"] {
  background: rgba(255, 107, 107, .15);
  border-color: rgba(255, 107, 107, .5);
  color: var(--coral);
}

.heat__nav { display: flex; align-items: center; gap: 10px; }
.heat__period { min-width: 7.5em; text-align: center; font-size: .98rem; letter-spacing: -.01em; }
.heat__step {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line-hi); border-radius: 50%;
  background: transparent; color: var(--text);
  font: inherit; font-size: 1.15rem; line-height: 1;
  cursor: pointer;
}
.heat__step:hover:not(:disabled) { border-color: var(--coral); color: var(--coral); }
.heat__step:disabled { opacity: .3; cursor: default; }

/* Cells ------------------------------------------------------------- */

.cell {
  display: block; position: relative;
  width: var(--cell); height: var(--cell);
  padding: 0; border: 0;
  border-radius: 3.5px;
  background: rgba(255, 255, 255, .075);
  color: inherit; font: inherit;
}
.cell[data-level="1"] { background: rgba(255, 107, 107, .30); }
.cell[data-level="2"] { background: rgba(255, 107, 107, .55); }
.cell[data-level="3"] { background: rgba(255, 107, 107, .80); }
.cell[data-level="4"] { background: var(--coral); }
.cell[data-state="frozen"] { background: rgba(100, 210, 255, .72); }
.cell[data-state="none"] { background: rgba(255, 255, 255, .035); }
.cell[data-state="future"] { background: rgba(255, 255, 255, .03); }
.cell--blank { background: transparent; }

button.cell { cursor: pointer; }
button.cell:hover { outline: 2px solid rgba(255, 255, 255, .45); outline-offset: 1px; z-index: 1; }
.cell.is-selected { outline: 2px solid #fff; outline-offset: 1px; z-index: 2; }
.cell.is-today { box-shadow: 0 0 0 1.5px var(--bg-elevated), 0 0 0 3.5px var(--sky); }

/* Year ---------------------------------------------------------------- */

.yr {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  overflow-x: auto;
  padding: 8px 6px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-hi) transparent;
}
.yr__dow {
  position: sticky; left: 0; z-index: 3;
  display: grid; grid-template-rows: repeat(7, var(--cell)); gap: var(--gap);
  margin-top: 21px; padding-right: 8px;
  background: var(--bg-elevated);
  color: var(--text-3); font-size: .62rem; font-weight: 700;
  line-height: var(--cell); text-align: center;
}
.yr__month { flex: none; }
.yr__label {
  display: block; height: 15px; margin-bottom: 6px;
  color: var(--text-3); font-size: .72rem; font-weight: 700;
}
.yr__weeks {
  display: grid; gap: var(--gap);
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--cell));
  grid-auto-columns: var(--cell);
}

/* Month --------------------------------------------------------------- */

.mo {
  display: grid; gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  max-width: 520px; margin-inline: auto;
}
.mo__dow {
  text-align: center; padding-bottom: 2px;
  color: var(--text-3); font-size: .68rem; font-weight: 700;
}
.cell--lg {
  width: auto; height: auto; aspect-ratio: 1;
  border-radius: 9px;
}
.cell__n {
  position: absolute; top: 5px; left: 7px;
  color: rgba(255, 255, 255, .78); font-size: .7rem; font-weight: 700;
  pointer-events: none;
}
.cell[data-state="none"] .cell__n,
.cell[data-state="future"] .cell__n,
.cell[data-level="0"]:not([data-state="frozen"]) .cell__n { color: var(--text-3); }

/* Week ---------------------------------------------------------------- */

.wk {
  display: grid; gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  max-width: 580px; margin-inline: auto;
}
.wk__col { display: grid; gap: 7px; justify-items: center; }
.wk__col .cell--xl { width: 100%; }
.wk__dow { color: var(--text-3); font-size: .74rem; font-weight: 700; }
.cell--xl {
  height: 54px; border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
}
.wk__today { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.wk__today.is-on { background: var(--sky); }

/* Stats, legend, detail ---------------------------------------------- */

.heat__stats {
  display: grid; gap: 12px; margin-top: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.heat__stat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
}
.heat__stat strong { display: block; font-size: 1.55rem; letter-spacing: -.03em; line-height: 1.15; }
.heat__stat span { color: var(--text-3); font-size: .8rem; font-weight: 600; }
@media (max-width: 480px) {
  .heat__stats { gap: 8px; }
  .heat__stat { padding: 12px 12px; }
  .heat__stat strong { font-size: 1.25rem; }
}

.heat__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 7px;
  margin-top: 18px;
  color: var(--text-3); font-size: .78rem; font-weight: 600;
}
.cell--sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.heat__key { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }

.heat__detail {
  display: flex; flex-wrap: wrap; gap: 18px 24px;
  align-items: flex-end; justify-content: space-between;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
  min-height: 128px;
}
.heat__detail-text { flex: 1 1 260px; align-self: center; }
.heat__detail-text strong { display: block; margin-bottom: 4px; font-size: 1.04rem; letter-spacing: -.015em; }
.heat__detail-text span { display: block; color: var(--text-2); font-size: .96rem; white-space: pre-line; }

.heat__dayo { display: flex; align-items: flex-end; gap: 4px; margin-left: auto; }
.heat__dayo .bubble { margin-bottom: 46px; max-width: 210px; }
.heat__dayo .bubble::after { right: -7px; bottom: 16px; border-radius: 0 4px 0 0; border-bottom: 0; border-top: 1px solid var(--line-hi); transform: rotate(45deg); }
.heat__dayo img { width: 156px; height: auto; flex: none; }
@media (max-width: 640px) {
  .heat__dayo { margin-inline: auto; }
}

/* ==========================================================================
   Plans — free versus Pro
   ========================================================================== */

.tag--pro { background: rgba(255, 107, 107, .15); color: var(--coral); }
.tag--free { background: rgba(52, 199, 89, .14); color: var(--mint); }

.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.plan--pro {
  border-color: rgba(255, 107, 107, .38);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 107, 107, .14), transparent 60%),
    var(--bg-elevated);
}
.plan h3 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; margin-bottom: 6px; }
.plan__sub { color: var(--text-2); font-size: .98rem; margin-bottom: 22px; }
.plan .checks { margin-top: 0; }
.plan .checks li { color: var(--text); }
.plan .checks li strong { color: var(--text); }
.plan .checks--muted li { color: var(--text-2); }

.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
}
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .98rem; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: .82rem; color: var(--text-3); font-weight: 700; background: var(--bg-elevated); position: sticky; top: 0; }
.compare thead th.is-pro { color: var(--coral); }
.compare tbody th { font-weight: 600; color: var(--text); width: 42%; }
.compare tbody td { color: var(--text-2); }
.compare tbody td.is-pro { color: var(--text); background: rgba(255, 107, 107, .05); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--mint); font-weight: 800; }
.compare .no { color: var(--text-3); }
.compare small { display: block; margin-top: 3px; color: var(--text-3); font-size: .82rem; font-weight: 500; }

.earn { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.earn .card p { font-size: .95rem; }
.earn__big {
  display: block; margin-bottom: 6px;
  font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 404 */
.lost { text-align: center; padding-block: clamp(48px, 9vw, 110px); }
.lost img { width: min(300px, 70vw); margin: 0 auto 8px; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); animation: bob 5s ease-in-out infinite; }
.lost h1 { margin-bottom: 14px; }
.lost p { margin-inline: auto; }
.lost__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* Placeholder ring so a lazily-loaded Dayo doesn't pop in and shift things. */
img[width][height].dayo-img { height: auto; }

/* Reserve the widget's space before JavaScript builds it, so the page
   below doesn't jump when it appears. */
[data-heatmap]:not(.heat) { min-height: 560px; }

/* Headings break into even lines rather than leaving one word alone on the
   last line ("…when it earns / it."). Browsers without support ignore this. */
h1, h2, h3 { text-wrap: balance; }

/* Phones: fit all three comparison columns on screen. Hiding "Pro" behind a
   sideways scroll would mean most people never see what Pro adds. */
@media (max-width: 640px) {
  .compare { min-width: 0; font-size: .86rem; }
  .compare th, .compare td { padding: 12px 10px; }
  .compare tbody th { width: 38%; }
  .compare small { font-size: .74rem; }
}

/* The sticky weekday column must also cover the scroller's left padding,
   or a sliver of the cell scrolling underneath shows beside the letters. */
.yr__dow { margin-left: -6px; padding-left: 6px; }