/* Riff landing page. Quiet and app-derived, but warm: system type, white
   space, the demo calendars' blue/green/orange threaded through as accents,
   and the app's red on the one loud control. Light and dark follow the
   visitor's scheme, like the app follows the phone's, until the appearance
   toggle picks one: it pins color-scheme, and light-dark() resolves every
   color from that one property. */

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #000000);
  --fg: light-dark(#1d1d1f, #f5f5f7);
  --muted: light-dark(#6e6e73, #98989d);
  --line: light-dark(#e5e5ea, #2c2c2e);
  --card: light-dark(#f5f5f7, #1c1c1e);
  /* the CTA: the app's red — deepened for AA contrast on white text, and in
     dark bright enough to pop on black while keeping that AA */
  --red: light-dark(#c2343a, #cf3a40);
  --blue: #0a84ff;
  --green: #30a14e;
  --orange: #f28c1b;
  --tint-blue: light-dark(rgb(10 132 255 / 0.10), rgb(10 132 255 / 0.16));
  --tint-green: light-dark(rgb(48 161 78 / 0.10), rgb(48 161 78 / 0.16));
  --tint-orange: light-dark(rgb(242 140 27 / 0.10), rgb(242 140 27 / 0.16));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 { letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 650; margin-bottom: 0.75rem; }
p + p { margin-top: 0.8em; }
a { color: inherit; }

/* ---- shared shells */

.hero, main, footer { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
section > p, .limits { max-width: 44rem; }

.fineprint { font-size: 0.875rem; color: var(--muted); margin-top: 0.9rem; }

/* ---- the display toggles: appearance and week start. The script reveals
   them (without it they could do nothing) and mirrors the state into
   aria-pressed, which doubles as the selected style's hook. */

.prefs {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.prefs[hidden] { display: none; }
/* the label leans toward its own buttons, not the neighboring group */
.pref-set { display: flex; align-items: center; gap: 0.5rem; }
.pref {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.pref button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
}
.pref button + button { border-left: 1px solid var(--line); }
.pref button[aria-pressed="true"] {
  background: var(--card);
  color: var(--fg);
}
.caption, figcaption {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.9rem;
  text-align: center;
  text-wrap: balance;
}

/* ---- the hero */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
  align-items: center;
}
@media (min-width: 800px) {
  .hero { grid-template-columns: 1.2fr 1fr; padding-top: 5rem; padding-bottom: 5rem; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.eyebrow img { border-radius: 7px; }

.lede { font-size: 1.1875rem; margin-top: 1.1rem; max-width: 34em; }

.cta-row { margin-top: 1.8rem; }
.cta {
  display: inline-block;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.18);
}

/* ---- phone bezels: a plain rounded shell, no trademark hardware. The hero's
   sits on a soft wash of the three calendar colors. */

.phone {
  /* fixed radii: a percentage radius resolves per-axis on these tall
     rectangles and draws stretched, elliptical corners. The hairline is a
     ring shadow, not a border — a border sits inside the clip and its corner
     anti-aliasing doubles up against the clipped image's. */
  border-radius: 3rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 22px 60px rgb(0 0 0 / 0.16);
  background: #000;
}
.phone.small { border-radius: 2.4rem; }
.phone video, .phone img { display: block; width: 100%; height: auto; }

.hero-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(42% 46% at 30% 26%, var(--tint-blue), transparent 70%),
    radial-gradient(46% 42% at 74% 48%, var(--tint-orange), transparent 70%),
    radial-gradient(44% 44% at 42% 78%, var(--tint-green), transparent 70%);
}
.hero-media .phone { width: min(320px, 78vw); }

/* ---- the split sections */

.phone.small { width: min(260px, 74vw, 100%); }
.split-media { display: flex; flex-direction: column; align-items: center; }
figcaption { max-width: 17rem; }

.section-lede { color: var(--muted); max-width: 40rem; }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: center;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1.2fr 1fr; }
  /* Alternate: media to the left, copy to the right — source order stays
     copy-first, so a single-column phone still reads copy then video. */
  .split.reverse { grid-template-columns: 1fr 1.2fr; }
  .split.reverse .split-media { order: -1; }
}

/* ---- calendar dots, the privacy card, limits, closing, footer */

.cals {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1rem;
}
.dot { width: 0.7em; height: 0.7em; border-radius: 50%; display: inline-block; }
.dot + .dot { margin-left: 0.6rem; }
.dot.blue { background: var(--blue); }
.dot.green { background: var(--green); }
.dot.orange { background: var(--orange); }

/* the App Store label, given its own card */
.privacy-card {
  background: var(--card);
  border-radius: 1.4rem;
  padding: 2rem 2.2rem;
  max-width: 46rem;
}
.privacy-card p { max-width: none; }

.limits { list-style: none; }
.limits li {
  padding: 0.8rem 0 0.8rem 1.4rem;
  position: relative;
}
.limits li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}
.limits li + li { border-top: 1px solid var(--line); }

.closing { text-align: center; }
.closing > p { max-width: none; }  /* the section-wide 44rem cap would pin the centered text left */
.closing .cta-row { margin-top: 1.2rem; }

footer {
  border-top: 1px solid var(--line);
  padding-top: 2.2rem;
  padding-bottom: 3.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
footer .fineprint { margin-top: 0.4rem; }