/* Peak ADI website. One stylesheet for every page. Colours and type follow Marketing/02-messaging-guide.md. */

:root {
  --night: #0B1310;
  --surface: #131C18;
  --surface-2: #1A2520;
  --line: rgba(240, 237, 229, .10);
  --brand: #0E5237;
  --green: #4FA476;
  --amber: #E8A93C;
  --cream: #F5F3EE;
  --text: #F0EDE5;
  --muted: #9CA399;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
  --radius: 20px;
  /* Motion: one easing for everything, durations between about 420 and 900ms. */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 420ms;
  --t-slow: 900ms;
  /* App colours used by the live demos (Theme.swift). */
  --ready: #4ADE80;
  --sage: 133, 168, 143;
  --tertiary: #8F978C;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* The soft green and amber glow behind everything, like the app's ambient background. */
body::before {
  content: ""; position: fixed; inset: -25vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 22% 18%, rgba(79, 164, 118, .17), transparent 70%),
    radial-gradient(34vmax 26vmax at 82% 38%, rgba(232, 169, 60, .075), transparent 70%),
    radial-gradient(40vmax 30vmax at 50% 95%, rgba(14, 82, 55, .22), transparent 70%);
  animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3vmax, 2.5vmax, 0) scale(1.06); } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--text); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--cream); color: var(--night); padding: .6rem 1rem; border-radius: 10px; }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
.display, h1, h2 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.08; margin: 0 0 .45em; text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 4.6vw + 1rem, 4.8rem); letter-spacing: -.025em; line-height: 1.04; }
h2 { font-size: clamp(2rem, 2.8vw + 1rem, 3.2rem); }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .35em; font-weight: 600; }
.dot { color: var(--amber); }
.lede { font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem); color: var(--muted); max-width: 34em; }
/* A quiet line above a heading: sentence case, normal tracking, like the app's section titles. */
.eyebrow { font-size: .95rem; color: var(--muted); margin-bottom: .8rem; font-weight: 500; }
.small { font-size: .9rem; color: var(--muted); }
.muted { color: var(--muted); }

/* Placeholders that must be replaced before launch. Visible on purpose, so none slip through. */
.todo { display: inline-block; font: 600 .75rem/1 var(--sans); color: var(--amber); border: 1px dashed var(--amber); border-radius: 999px; padding: .3em .6em; vertical-align: .15em; }
.placeholder { border: 1px dashed rgba(232, 169, 60, .55); border-radius: 12px; padding: 1rem 1.2rem; color: var(--amber); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); background: rgba(11, 19, 16, .72); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.brand:hover { color: var(--text); }
/* The app icon stands in for the Peak ADI mark, so it matches the app exactly. */
.mark { display: block; width: 30px; height: 30px; border-radius: 7px; flex: none; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
@media (max-width: 760px) { .site-nav .nav-link { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.3rem; border-radius: 999px; font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 0; cursor: pointer; transition: transform 120ms var(--ease), background-color 200ms; }
/* A quick pressed state on everything tappable. */
.btn:active, .badge:active, .pill:active, .link-btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: var(--cream); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: #136845; color: var(--cream); }
.btn-ghost { color: var(--text); border: 1px solid var(--line); background: rgba(240, 237, 229, .04); }
.btn-ghost:hover { background: rgba(240, 237, 229, .09); color: var(--text); }
.btn-small { min-height: 38px; padding: .45rem .95rem; font-size: .9rem; }
/* TODO: replace .badge with Apple's official "Download on the App Store" badge (developer.apple.com/app-store/marketing/guidelines). */
.badge { transition: transform 120ms var(--ease); display: inline-flex; flex-direction: column; justify-content: center; min-height: 52px; padding: .45rem 1.2rem; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .35); text-decoration: none; line-height: 1.1; }
.badge small { font-size: .68rem; letter-spacing: .02em; }
.badge span { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.badge:hover { color: #fff; border-color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 1.8rem 0 1rem; }

/* Sections */
section { padding: clamp(4rem, 8vw, 7.5rem) 0; }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.rule { border-top: 1px solid var(--line); }

/* Hero */
.hero { padding-top: clamp(3rem, 7vw, 6rem); }
.hero .wrap { display: grid; gap: 3rem; align-items: center; }
.hero-copy { max-width: 36rem; }
.hero-art { display: flex; justify-content: center; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.15fr .85fr; }
  .hero-art { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------------------------------------
   Cinematic hero. A looping golden-hour drive fills the first screen, under a see-through header. It opens like
   a film: letterbox bars part as the shot fades up from black, then the title comes in line by line. Over the
   clip sit the grade (a vignette, shade on the left for the words, a fade into the page) and a fine film grain.
   As the page scrolls on, the shot drifts and dims and the words fade as they fall behind (--hp, set by site.js, 0 to 1).
   Without JavaScript, or with reduced motion, the poster frame shows with everything already in place.
   --------------------------------------------------------------------------------------------------------- */
.hero-film {
  --header: 65px; --pb: clamp(4.5rem, 12vh, 8.5rem); --black: #050807;
  position: relative; isolation: isolate; padding: 0; overflow: clip;
  margin-top: calc(var(--header) * -1); background: var(--black);
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--black); }
.hero-frame, .hero-shift { position: absolute; inset: 0; }
.hero-shift { transform: translate3d(0, calc(var(--hp, 0) * 14vh), 0) scale(calc(1.02 + var(--hp, 0) * .08)); }
.hero-shift img, .hero-shift video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--focus, 62% 50%);
}
/* The clip's first frame is the poster, so the video can fade in over it without a visible change. */
.hero-shift video { opacity: 0; transition: opacity 1200ms var(--ease); }
.hero-film.is-rolling .hero-shift video { opacity: 1; }
/* Dims the shot as it scrolls away. */
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--night); opacity: calc(var(--hp, 0) * .75); }
/* The grade. */
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 64% 40%, rgba(5, 8, 7, 0) 52%, rgba(5, 8, 7, .5) 100%),
    linear-gradient(180deg, rgba(11, 19, 16, .66) 0%, rgba(11, 19, 16, .18) 14%, rgba(11, 19, 16, 0) 26%),
    linear-gradient(90deg, rgba(11, 19, 16, .88) 0%, rgba(11, 19, 16, .7) 26%, rgba(11, 19, 16, .3) 48%, rgba(11, 19, 16, 0) 66%),
    linear-gradient(180deg, rgba(11, 19, 16, 0) 60%, rgba(11, 19, 16, .5) 82%, var(--night) 100%);
}
.hero-grain {
  position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .1; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px;
  animation: grain 800ms steps(4) infinite;
}
.hero-film.is-still .hero-grain { animation-play-state: paused; }
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-5%, 3%, 0); }
  50% { transform: translate3d(4%, -6%, 0); } 75% { transform: translate3d(-3%, -2%, 0); } 100% { transform: translate3d(6%, 5%, 0); }
}
/* Letterbox bars. Resting state is open; the intro plays them from closed. */
.hero-bars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-bars::before, .hero-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 13vh; background: var(--black); transform: scaleY(0); }
.hero-bars::before { top: 0; transform-origin: top; }
.hero-bars::after { bottom: 0; transform-origin: bottom; }

.hero-inner {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--header) + 3rem) 0 var(--pb);
}
.hero-copy { max-width: 60rem; transform: translate3d(0, calc(var(--hp, 0) * 18vh), 0); opacity: calc(1 - var(--hp, 0) * 3); }
.hero-eyebrow { display: flex; align-items: center; gap: .8rem; color: rgba(240, 237, 229, .86); margin-bottom: 1.3rem; }
.hero-eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--amber); transform-origin: left; }
.hero-film h1 {
  font-size: clamp(2.5rem, 3.3vw + 1.35rem, 4.9rem); font-weight: 600; letter-spacing: -.034em; line-height: 1.02;
  margin: 0 0 .55em; text-shadow: 0 2px 40px rgba(5, 8, 7, .35);
}
.hero-film h1 .ln { display: block; }
.hero-film h1 .ln > span { display: block; text-wrap: balance; }
.hero-film .lede { color: rgba(240, 237, 229, .84); max-width: 30em; margin-bottom: 0; }
.hero-actions .cta-row { margin: 2rem 0 .9rem; }
.hero-actions .small { color: rgba(240, 237, 229, .72); margin: 0; }
.hero-film .btn-ghost { background: rgba(11, 19, 16, .34); border-color: rgba(240, 237, 229, .28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-film .btn-ghost:hover { background: rgba(11, 19, 16, .58); }

/* Pause and play, with a ring that fills as the loop plays. */
.hero-toggle {
  position: absolute; z-index: 3; right: 0; bottom: var(--pb);
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--text); background: rgba(11, 19, 16, .36); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color 200ms, transform 120ms var(--ease);
}
.hero-toggle[hidden] { display: none; }
.hero-toggle:hover { background: rgba(11, 19, 16, .62); }
.hero-toggle:active { transform: scale(.94); }
.hero-toggle::before { content: ""; width: 11px; height: 13px; background: linear-gradient(90deg, currentColor 0 3.5px, transparent 3.5px 7.5px, currentColor 7.5px); }
.hero-toggle.is-paused::before { width: 0; height: 0; margin-left: 4px; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.hero-toggle svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 1.25; overflow: visible; }
.hero-toggle .ring-track { stroke: rgba(240, 237, 229, .22); }
.hero-toggle .ring { stroke: var(--amber); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }

/* A quiet line at the bottom that says there's more below. */
.hero-cue { position: absolute; z-index: 2; left: 50%; bottom: 1.5rem; width: 1px; height: 3rem; overflow: hidden; background: rgba(240, 237, 229, .16); opacity: calc(1 - var(--hp, 0) * 6); }
.hero-cue::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: linear-gradient(transparent, var(--text)); animation: cue 2600ms cubic-bezier(.6, 0, .3, 1) 3200ms infinite both; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(230%); } }

/* The opening. Timings overlap, so it reads as one move: bars part, shot fades up, header, title, the rest. */
.hero-frame { animation: film-in 2800ms cubic-bezier(.25, .1, .15, 1) 100ms both; }
.hero-bars::before, .hero-bars::after { animation: bars-open 1900ms cubic-bezier(.7, 0, .2, 1) 600ms both; }
body:has(.hero-film) .site-header { animation: fade 1400ms var(--ease) 1500ms both; }
.hero-eyebrow { animation: fade-up 1000ms var(--ease) 1150ms both; }
.hero-eyebrow::before { animation: rule-in 1200ms var(--ease) 1150ms both; }
.hero-film h1 .ln > span { animation: line-in 1400ms cubic-bezier(.2, .75, .15, 1) both; animation-delay: calc(1300ms + var(--l, 0) * 150ms); }
.hero-film .lede { animation: fade-up 1100ms var(--ease) 1950ms both; }
.hero-actions { animation: fade-up 1100ms var(--ease) 2150ms both; }
.hero-toggle, .hero-cue { animation: fade 1400ms var(--ease) 2600ms both; }
@keyframes film-in { from { opacity: 0; transform: scale(1.12); } }
@keyframes bars-open { from { transform: scaleY(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rule-in { from { transform: scaleX(0); } }
@keyframes line-in {
  from { opacity: 0; transform: translateY(.6em); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(-.3em -.3em -.3em -.3em); }
}

@media (max-width: 899px) {
  /* Phones and small tablets: title over the sky at the top, actions at the bottom, the car in between. */
  .hero-film { --pb: max(1.75rem, calc(env(safe-area-inset-bottom) + 1rem)); }
  .hero-inner { padding-top: calc(var(--header) + clamp(1.75rem, 6svh, 4rem)); }
  .hero-copy { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
  .hero-shift img, .hero-shift video { object-position: var(--focus-m, 70% 50%); }
  .hero-media::after {
    background:
      radial-gradient(140% 90% at 50% 55%, rgba(5, 8, 7, 0) 50%, rgba(5, 8, 7, .45) 100%),
      linear-gradient(180deg, rgba(11, 19, 16, .9) 0%, rgba(11, 19, 16, .78) 24%, rgba(11, 19, 16, .4) 42%, rgba(11, 19, 16, 0) 56%,
        rgba(11, 19, 16, 0) 64%, rgba(11, 19, 16, .55) 80%, rgba(11, 19, 16, .92) 94%, var(--night) 100%);
  }
  .hero-bars::before, .hero-bars::after { height: 8vh; }
  .hero-eyebrow { margin-bottom: 1rem; }
  .hero-actions .cta-row { margin-top: 0; }
  .hero-actions .small { padding-right: 3.75rem; }
  .hero-cue { display: none; }
}
/* Phones get the portrait crop of the clip, already centred on the road. */
@media (max-width: 760px) { .hero-shift img, .hero-shift video { object-position: 50% 50%; } }
@media (max-width: 520px) { .hero-film .lede { font-size: 1.05rem; } }

/* The header is see-through while it's over the film (site.js adds .is-clear). */
.site-header { transition: background-color 600ms var(--ease), border-color 600ms var(--ease), -webkit-backdrop-filter 600ms, backdrop-filter 600ms; }
.site-header.is-clear { background: rgba(11, 19, 16, 0); border-bottom-color: transparent; -webkit-backdrop-filter: saturate(100%) blur(0); backdrop-filter: saturate(100%) blur(0); }
.site-header.is-clear .nav-link { color: rgba(240, 237, 229, .86); }
.site-header.is-clear .nav-link:hover { color: var(--text); }

/* Today, at a glance: the live Today screen with notes on the three things the headline promises. */
.glance { padding-top: clamp(3rem, 6vw, 5.5rem); }
.glance-head { margin-inline: auto; text-align: center; }
.glance-stage {
  --pw: min(clamp(300px, 27vw, 350px), 100vw - 3rem); --gap: clamp(2rem, 4.5vw, 4.5rem);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
}
.glance-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; width: min(100%, 28rem); }
.glance-note { position: relative; padding-left: 1.4rem; }
.glance-note h3 { font-size: 1.1rem; margin-bottom: .3em; }
.glance-note p { color: var(--muted); margin: 0; font-size: 1rem; line-height: 1.55; }
.glance-note::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
@media (min-width: 900px) {
  .glance-stage { gap: 0; }
  .glance-notes { width: auto; }
  .glance-note { position: absolute; top: calc(var(--y) * 1%); margin-top: -.85rem; padding: 0; width: min(17rem, calc(50% - var(--pw) / 2 - var(--gap))); }
  .glance-note.is-left { right: calc(50% + var(--pw) / 2 + var(--gap)); text-align: right; }
  .glance-note.is-right { left: calc(50% + var(--pw) / 2 + var(--gap)); }
  /* A hairline from the note to the card it describes, ending in a small amber point on the card's edge. */
  .glance-note::before {
    top: .85rem; left: auto; width: calc(var(--gap) + 1.25rem); height: 1px; border-radius: 0;
    background: linear-gradient(90deg, rgba(232, 169, 60, .12), rgba(232, 169, 60, .85));
  }
  .glance-note.is-left::before { left: calc(100% + .75rem); transform-origin: right; }
  .glance-note.is-right::before { right: calc(100% + .75rem); transform-origin: left; background: linear-gradient(270deg, rgba(232, 169, 60, .12), rgba(232, 169, 60, .85)); }
  .glance-note::after {
    content: ""; position: absolute; top: calc(.85rem - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
    box-shadow: 0 0 0 4px rgba(232, 169, 60, .18), 0 0 16px rgba(232, 169, 60, .75);
  }
  .glance-note.is-left::after { left: calc(100% + .75rem + var(--gap) + 1.25rem - 3.5px); }
  .glance-note.is-right::after { right: calc(100% + .75rem + var(--gap) + 1.25rem - 3.5px); }
  /* The notes arrive after the phone: line first, then the point, then the words. */
  html.js .glance-note[data-reveal] { transform: none; transition: opacity 900ms var(--ease); transition-delay: calc(900ms + var(--i, 0) * 260ms); }
  html.js .glance-note[data-reveal]::before { transform: scaleX(0); transition: transform 1000ms var(--ease); transition-delay: calc(700ms + var(--i, 0) * 260ms); }
  html.js .glance-note[data-reveal]::after { opacity: 0; transform: scale(.3); transition: opacity 500ms var(--ease), transform 700ms var(--ease); transition-delay: calc(1500ms + var(--i, 0) * 260ms); }
  html.js .glance-note.is-in::before, html.js .glance-note.is-in::after { opacity: 1; transform: none; }
}

/* Phone mockup built around a real screenshot */
.phone {
  --w: clamp(230px, 24vw, 320px);
  position: relative; width: var(--w); max-width: 100%; flex: none;
  padding: calc(var(--w) * .034); border-radius: calc(var(--w) * .165);
  background: linear-gradient(150deg, #39423d, #161c19 40%, #0d1210);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 40px 80px -24px rgba(0, 0, 0, .75), 0 0 140px -30px rgba(79, 164, 118, .38);
}
.phone img { width: 100%; border-radius: calc(var(--w) * .135); background: var(--night); }
.phone::after { /* Dynamic Island */
  content: ""; position: absolute; left: 50%; top: calc(var(--w) * .058); transform: translateX(-50%);
  width: 30%; height: calc(var(--w) * .085); border-radius: 999px; background: #000;
}
.phone-lg { --w: clamp(250px, 27vw, 350px); }
.phones { position: relative; display: flex; justify-content: center; }
.phones .phone-back { position: absolute; transform: translate(34%, 7%) scale(.86); transform-origin: top; opacity: .9; z-index: -1; filter: brightness(.8); }
@media (max-width: 899px) { .phones .phone-back { display: none; } }

/* Reveal: content settles in once as it reaches the viewport (site.js adds .is-in). Only hidden when scripted. */
html.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js .phone[data-reveal] { transform: translateY(32px) scale(.985); transition-duration: 900ms, 1100ms; }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Feature rows (text + screenshot) */
.feature { display: grid; gap: 2.5rem; align-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature-art { display: flex; justify-content: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .feature-flip .feature-art { order: -1; }
  .feature .phones { margin-right: 18%; }
}
.feature-copy { max-width: 32rem; }
.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.ticks li { position: relative; padding-left: 1.4rem; margin-bottom: .75rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.aside { margin-top: 1.4rem; font-size: .95rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: 1rem; }

/* Diary */
.diary .wrap { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .diary .wrap { grid-template-columns: .8fr 1.2fr; gap: 5rem; } }
.cards { display: grid; gap: 1rem; margin-top: 1.6rem; }
.card { background: rgba(19, 28, 24, .82); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--muted); }

/* Since 12 May: echoes the app's amber test callout */
.callout { display: grid; gap: .3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 3rem); position: relative; overflow: hidden; }
.callout::before { content: ""; position: absolute; left: clamp(1rem, 2.2vw, 1.8rem); top: clamp(1.6rem, 4vw, 3rem); bottom: clamp(1.6rem, 4vw, 3rem); width: 3px; border-radius: 3px; background: var(--amber); }
.callout > * { margin-left: clamp(1rem, 2.4vw, 2rem); max-width: 44rem; }
.callout p { color: var(--muted); }

/* Pricing */
.plans { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { background: rgba(19, 28, 24, .85); border: 1px solid var(--line); border-radius: 24px; padding: 2rem; display: flex; flex-direction: column; }
.plan-pro { border-color: rgba(79, 164, 118, .5); box-shadow: 0 0 80px -30px rgba(79, 164, 118, .45); }
.plan h3 { font-size: 1rem; color: var(--muted); font-weight: 500; }
.plan-price { font: 700 clamp(2.6rem, 3.6vw, 3.3rem)/1 var(--display); letter-spacing: -.02em; margin: .3rem 0 .2rem; }
.plan-price small { font: 400 1rem var(--sans); color: var(--muted); }
.plan .ticks { margin-top: 1.2rem; }
.plan .small { margin-top: auto; padding-top: 1rem; }
.founding { margin-top: 1.4rem; padding: 1.1rem 1.4rem; border-radius: 16px; border: 1px solid rgba(232, 169, 60, .35); background: rgba(232, 169, 60, .06); }
.founding p { margin: 0; }

/* FAQ */
.faq { max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; font-weight: 600; font-size: 1.08rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--sans); color: var(--muted); }
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 1.2rem; color: var(--muted); max-width: 42rem; }
.faq details > div p:last-child { margin-bottom: 0; }


/* Waitlist over a still from the hero's drive: it fades up out of the page and back down into the footer. */
.waitlist-film { position: relative; isolation: isolate; overflow: clip; padding: clamp(6rem, 13vw, 11rem) 0; }
.waitlist-media { position: absolute; inset: 0; z-index: -1; }
.waitlist-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; opacity: .9; }
.waitlist-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 55% 55%, rgba(11, 19, 16, 0) 35%, rgba(11, 19, 16, .6) 100%),
    linear-gradient(180deg, var(--night) 0%, rgba(11, 19, 16, .45) 26%, rgba(11, 19, 16, .2) 60%, rgba(11, 19, 16, .35) 84%, var(--night) 100%);
}
.waitlist-film .signup { background: rgba(19, 28, 24, .74); border-color: rgba(240, 237, 229, .12); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }

/* Waitlist form */
.signup { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(1.6rem, 5vw, 3.5rem); display: grid; gap: 2rem; }
@media (min-width: 900px) { .signup { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field label { font-weight: 600; font-size: .95rem; }
input[type="email"] { width: 100%; min-height: 50px; padding: .7rem 1rem; border-radius: 14px; border: 1px solid rgba(240, 237, 229, .22); background: var(--night); color: var(--text); font: inherit; }
input[type="email"]::placeholder { color: #7F877D; }
input[type="email"]:focus-visible { border-color: var(--amber); }
.check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; accent-color: var(--green); flex: none; }
.signup .btn { margin-top: .6rem; width: 100%; }
@media (min-width: 560px) { .signup .btn { width: auto; } }
/* The launch-news form's states. .hp is a field only bots fill in. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup .btn[disabled] { opacity: .6; cursor: progress; }
.form-status { color: var(--amber); margin: 1rem 0 0; }
.signup-done { align-self: center; outline: none; animation: done-in var(--t-fast) var(--ease) both; }
.signup-done h3 { font: 600 clamp(1.5rem, 1.2vw + 1rem, 1.9rem)/1.15 var(--display); letter-spacing: -.015em; margin-bottom: .4rem; }
.signup-done p { margin: 0; }
@keyframes done-in { from { opacity: 0; transform: translateY(8px); } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; margin-top: 2rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Inner pages: support, press, privacy, terms */
.page { padding: clamp(3rem, 7vw, 5.5rem) 0 2rem; }
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.1rem); letter-spacing: -.015em; margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose p, .prose li { color: #D9D6CE; }
.prose ul { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--amber); }
.prose code { font: .9em ui-monospace, "SF Mono", Menlo, monospace; background: var(--surface-2); padding: .1em .4em; border-radius: 6px; }
.page > .wrap > h2 { margin-top: 3.5rem; }
.help { max-width: 48rem; margin-top: 2rem; }
.contact-card { margin: 2rem 0 1rem; max-width: 44rem; }
.contact-card .big { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }

/* Press */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 1.6rem; margin: 1.4rem 0 2rem; max-width: 44rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: .15rem; } .facts dd { margin-bottom: .7rem; } }
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.2rem; margin: 1.6rem 0 2rem; }
.downloads a { display: grid; gap: .55rem; text-decoration: none; color: var(--text); font-size: .9rem; }
.downloads img { border-radius: 16px; border: 1px solid var(--line); aspect-ratio: 660 / 1434; object-fit: cover; }
.downloads .icon img { aspect-ratio: 1; border-radius: 22%; }
.downloads a:hover { color: var(--green); }

/* ---------------------------------------------------------------------------------------------------------
   Live demos: real app screens built in HTML inside the phone frame. Everything inside is sized in em from
   the phone's width, so the screen scales as one piece and stays legible from 330px up.
   --------------------------------------------------------------------------------------------------------- */
.demo { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.phone-live { --w: min(clamp(330px, 26vw, 344px), 100vw - 3rem); }
.screen {
  position: relative; aspect-ratio: 660 / 1434; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--w) * .135); background: var(--night); color: var(--text);
  font: 400 calc(var(--w) * .045)/1.3 var(--sans); text-align: left;
}
.screen p { margin: 0; }
:where(.screen) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.screen :focus-visible { outline-offset: 1px; }
.status { position: absolute; top: 0; left: 0; right: 0; height: 3.3em; display: flex; align-items: center; justify-content: space-between; padding: 0 1.75em 0 2em; font-weight: 600; font-size: .95em; z-index: 3; }
.batt { width: 1.55em; height: .72em; border-radius: .24em; background: var(--text); box-shadow: .12em 0 0 -.02em var(--night), .2em 0 0 -.04em rgba(240, 237, 229, .5); }
.scroll { position: absolute; inset: 3.3em 0 0; overflow-y: auto; padding: 0 .9em 3em; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(transparent, var(--night)); pointer-events: none; z-index: 2; }
.app-card { background: var(--surface); border-radius: 1.1em; }
.avatar { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--c); color: var(--cream); font-size: .85em; font-weight: 600; flex: none; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6em; padding: 0 1em; border-radius: 99em; background: #2A3530; font-weight: 500 !important; font-size: .9em !important; transition: transform 120ms var(--ease), background-color 200ms; }
.pill:hover { background: #33403a; }
.pill-brand { background: var(--brand); color: var(--cream) !important; }
.pill-brand:hover { background: #136845; }
.pm-seg { display: flex; padding: .2em; border-radius: .75em; background: #18211d; font-size: .85em; color: var(--muted); }
.pm-seg span { flex: 1; text-align: center; padding: .45em .6em; border-radius: .6em; }
.pm-seg .on { background: #323F37; color: var(--text); font-weight: 600; }
.pm-seg em { font-style: normal; color: var(--muted); font-weight: 500; }

/* Hint and reset below each demo. Only shown when the demo is interactive. */
.demo-foot { margin: 0; font-size: .95rem; color: var(--muted); display: flex; gap: .8rem; align-items: baseline; min-height: 1.6em; }
html:not(.js) .demo-foot { display: none; }
.link-btn { font: inherit; font-weight: 600; color: var(--green); background: none; border: 0; padding: .3em .2em; cursor: pointer; transition: transform 120ms var(--ease); }
.link-btn:hover { color: var(--text); }

/* 1. Readiness card (ReadinessCard.swift) */
.rd-nav { display: flex; justify-content: space-between; align-items: center; margin: .2em 0 .6em; }
.circ { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: #1B2620; }
.circ-back::before { content: ""; width: .6em; height: .6em; border: solid var(--text); border-width: 0 0 .15em .15em; transform: translateX(.12em) rotate(45deg); }
.circ-more { display: flex; justify-content: center; gap: .2em; }
.circ-more i { width: .26em; height: .26em; border-radius: 50%; background: var(--text); }
.rd-name { display: grid; text-align: center; font-weight: 600; line-height: 1.25; }
.rd-name span { color: var(--muted); font-size: .78em; font-weight: 400; }
.rd-card { padding: 1em 1em .4em; }
.rd-top { display: flex; justify-content: space-between; align-items: flex-start; }
.rd-score { display: flex; align-items: baseline; gap: .15em; }
.rd-num { display: inline-block; font: 700 3.3em/1 var(--display); letter-spacing: -.03em; transition: color 600ms var(--ease); }
.rd-card.is-ready .rd-num { color: var(--ready); }
.rd-num.is-new { animation: rise 600ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(.28em); } }
.rd-of { font-weight: 600; color: var(--tertiary); font-size: 1.05em; }
.rd-label { margin-top: .15em !important; }
.rd-syl { display: grid; text-align: right; }
.rd-pct { font-weight: 600; font-size: 1.05em; font-variant-numeric: tabular-nums; }
.rd-syl span + span { font-size: .8em; color: var(--tertiary); }
.rd-next { color: var(--muted); font-size: .86em; line-height: 1.35; margin: .6em 0 .35em !important; }
.rd-mock { color: var(--muted); font-size: .78em; margin-bottom: .45em !important; }
.rd-mock b { color: var(--ready); font-weight: 500; }
.rd-groups { list-style: none; margin: 0; padding: 0; }
.rd-head { display: grid !important; grid-template-columns: 1fr auto; gap: .5em .6em; width: 100%; padding: .6em 0 !important; text-align: left; }
.rd-title { font-weight: 600; line-height: 1.25; }
.rd-up { color: var(--ready); font-size: .78em; font-weight: 600; margin-left: .45em; animation: rise 500ms var(--ease); }
.rd-meta { display: flex; align-items: center; gap: .6em; height: 1.25em; }
.rd-opt { font-size: .8em; color: var(--tertiary); }
.rd-tick { display: none; width: .38em; height: .72em; margin: -.2em .1em 0; border: solid var(--muted); border-width: 0 .14em .14em 0; transform: rotate(45deg); }
.rd-group.is-done .rd-tick { display: block; animation: rise 500ms var(--ease); }
.rd-chev { width: .5em; height: .5em; margin-top: -.25em; border: solid var(--tertiary); border-width: 0 .13em .13em 0; transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.rd-head[aria-expanded="true"] .rd-chev { transform: translateY(.25em) rotate(225deg); }
/* One continuous line per group, sage at 60% while filling and solid once done. */
.bar { grid-column: 1 / -1; height: .28em; border-radius: 9em; background: rgba(240, 237, 229, .11); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: rgba(var(--sage), .6); transition: width 600ms var(--ease), background-color 600ms var(--ease); }
.rd-group.is-done .bar i { background: rgb(var(--sage)); }
html.js .rd-card:not(.is-filled) .bar i { width: 0; }
.rd-card.is-filling .bar i { transition-duration: 1100ms; transition-delay: calc(var(--i, 0) * 120ms); }
/* Skills open under their group (0fr to 1fr, so the height animates without measuring). */
.rd-skills { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t-fast) var(--ease), visibility 0s var(--t-fast); }
.rd-skills.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.rd-skills ul { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 .8em; }
.rd-skills li:last-child { padding-bottom: .2em; }
.rd-skill { display: flex !important; align-items: center; gap: .8em; width: 100%; padding: .34em 0 !important; text-align: left; border-radius: .5em; }
.rd-skill > span:first-child { flex: 1; display: grid; gap: .05em; }
.rd-skill small { font-size: .78em; color: var(--tertiary); }
.rd-skill small.is-there { color: var(--muted); }
.rd-skill small b { color: var(--ready); font-weight: 400; margin-left: .35em; }
.rd-skill small i { font-style: normal; margin-left: .35em; }
.rd-skill:hover .dots { opacity: .85; }
.dots { display: flex; gap: .3em; }
.dots i { width: .5em; height: .5em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(143, 151, 140, .7); transition: background-color 300ms var(--ease), box-shadow 300ms; }
.dots i.on { background: rgba(var(--sage), var(--a)); box-shadow: none; }

/* 2. Payments (PaymentsScreen.swift): a sheet over the dark page */
.sheet { top: 3.6em; background: #101815; border-radius: 1.6em 1.6em 0 0; padding-top: .2em; }
.pm-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 3em; font-weight: 600; }
.pm-done { justify-self: end; color: var(--green); background: #1E2A24; border-radius: 99em; padding: .5em .9em; }
.pm-owed-l { color: var(--muted); font-size: .85em; margin: .4em .2em 0 !important; }
.pm-owed { font: 700 3.1em/1.1 var(--display); letter-spacing: -.02em; margin: 0 .07em !important; font-variant-numeric: tabular-nums; }
.pm-sum { color: var(--muted); font-size: .9em; margin: 0 .2em .9em !important; }
.pm-tiles { display: grid; grid-template-columns: 1fr 1fr; padding: .75em 0; margin-bottom: .8em; }
.pm-tiles p { display: grid; padding: 0 .9em; font-size: .78em; white-space: nowrap; color: var(--muted); }
.pm-tiles p + p { box-shadow: inset 1px 0 rgba(240, 237, 229, .1); }
.pm-tiles strong { font-size: 1.3em; font-weight: 600; margin: .1em 0 .05em; font-variant-numeric: tabular-nums; }
.pm-tiles .pm-in { color: var(--ready); }
.sheet .pm-seg { margin-bottom: .8em; }
.pm-card { margin-bottom: .7em; overflow: hidden; }
.pm-who { display: flex; align-items: center; gap: .8em; padding: .85em 1em; }
.pm-who p { flex: 1; display: grid; }
.pm-who p span { font-size: .8em; color: var(--muted); }
.pm-who > strong { font-weight: 600; }
.pm-row { display: flex; align-items: center; gap: .8em; padding: .55em 1em; box-shadow: inset 0 1px rgba(240, 237, 229, .07); }
.pm-row p { flex: 1; display: grid; font-size: .92em; }
.pm-row p span { font-size: .85em; color: var(--muted); }
.pm-amt { color: var(--muted); font-size: .92em; }
.pm-check { position: relative; width: 1.65em; height: 1.65em; border-radius: 50%; box-shadow: inset 0 0 0 .1em var(--green); transition: transform 120ms var(--ease); }
.pm-check::after, .seal::after { content: ""; position: absolute; left: 36%; top: 22%; width: .3em; height: .6em; border: solid var(--green); border-width: 0 .12em .12em 0; transform: rotate(45deg); }
.pm-check:active { transform: scale(.9); }
.pm-btns { display: flex; gap: .55em; padding: .35em 1em 1em; }
.pm-btns .pill { flex: 1; padding: 0 .5em; }
/* Paid rows and cards fade, slide a touch, then close up. */
.is-leaving { opacity: 0; transform: translateX(8%); margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  transition: opacity 300ms var(--ease), transform var(--t-fast) var(--ease), height 520ms var(--ease) 120ms, margin 520ms var(--ease) 120ms, padding 520ms var(--ease) 120ms; overflow: hidden; }
.pm-empty { display: grid; justify-items: center; text-align: center; gap: .3em; padding: 1.6em 1.2em; animation: rise 600ms var(--ease); }
.pm-empty[hidden] { display: none; }
.pm-empty > span:last-child { color: var(--muted); font-size: .85em; }
.seal { position: relative; width: 2.4em; height: 2.4em; border-radius: 50%; box-shadow: inset 0 0 0 .12em rgb(var(--sage)); margin-bottom: .3em; }
.seal::after { left: 38%; top: 22%; width: .5em; height: 1em; border-color: rgb(var(--sage)); border-width: 0 .14em .14em 0; }
.pm-menu { position: absolute; z-index: 4; width: 12em; padding: .3em 0; border-radius: .9em; background: #26302B; box-shadow: 0 .8em 2.4em rgba(0, 0, 0, .55); transform-origin: var(--ox, right) var(--oy, top); animation: pop 240ms var(--ease); }
.pm-menu p { font-size: .75em; color: var(--muted); padding: .5em 1.2em .3em; }
.pm-menu button { display: block; width: 100%; text-align: left; padding: .65em 1em !important; box-shadow: inset 0 1px rgba(240, 237, 229, .07); }
.pm-menu button:hover, .pm-menu button:focus-visible { background: rgba(240, 237, 229, .06); }
@keyframes pop { from { opacity: 0; transform: scale(.92); } }
.scrim { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .5); animation: fade 300ms var(--ease); }
@keyframes fade { from { opacity: 0; } }
.pm-remind { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: .6em 1em 2em; background: #17211C; border-radius: 1.6em 1.6em 0 0; animation: sheet-up 480ms var(--ease); }
.pm-remind::before { content: ""; display: block; width: 2.6em; height: .3em; margin: 0 auto .6em; border-radius: 9em; background: rgba(240, 237, 229, .25); }
@keyframes sheet-up { from { transform: translateY(100%); } }
.pm-remind-top { display: flex; justify-content: space-between; align-items: center; }
.pm-remind .link-btn { font-size: .95em; }
.pm-to { color: var(--muted); font-size: .8em; margin-bottom: .8em !important; }
.bubble { background: #22302A; border-radius: 1.1em 1.1em 1.1em .3em; padding: .75em .9em; font-size: .9em; line-height: 1.4; }
.chips { display: flex; gap: .5em; margin: .9em 0 .6em; }
.pm-note { color: var(--tertiary); font-size: .78em; min-height: 2.2em; }

/* 3. Diary week view (DiaryScreen.swift) */
.dy { --hour: 3.2em; }
.dy-title { font: 700 1.6em/1.15 var(--display); letter-spacing: -.015em; margin-top: .6em !important; }
.dy-sub { color: var(--muted); font-size: .85em; margin: .15em 0 .8em !important; }
.dy-week { display: flex; justify-content: space-between; align-items: center; padding: .7em 1em; font-size: .92em; margin-bottom: .9em; }
.chev-l, .chev-r { width: .45em; height: .45em; border: solid var(--muted); border-width: 0 0 .13em .13em; transform: rotate(45deg); }
.chev-r { transform: rotate(-135deg); }
.dy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.dy-head strong { font-weight: 600; font-size: .95em; }
.dy-seg { font-size: .78em; }
.dy-grid { background: #111916; border-radius: .9em; padding-bottom: .5em; }
.dy-days, .dy-main { display: grid; grid-template-columns: 2.4em 1fr; }
.dy-days { grid-template-columns: 2.4em repeat(5, 1fr); text-align: center; font-size: .75em; color: var(--muted); padding: .5em 0 .4em; }
.dy-days b { display: block; font-size: 1.3em; font-weight: 600; color: var(--text); }
.dy-days .today, .dy-days .today b { color: var(--green); }
.dy-hours { position: relative; }
.dy-hours span { display: block; height: calc(var(--hour) / .66); font-size: .66em; color: var(--tertiary); text-align: center; transform: translateY(-.55em); font-variant-numeric: tabular-nums; }
.dy-hours span:first-child { transform: none; }
.dy-body { position: relative; height: calc(var(--hour) * 8); margin-right: .3em;
  background:
    linear-gradient(90deg, transparent 60%, rgba(79, 164, 118, .07) 60%, rgba(79, 164, 118, .07) 80%, transparent 80%),
    repeating-linear-gradient(180deg, rgba(240, 237, 229, .07) 0 1px, transparent 1px var(--hour)); }
.dy-block {
  position: absolute; left: calc(var(--day) * 20% + 2px); width: calc(20% - 4px);
  top: calc(var(--start) / 60 * var(--hour) + 1px); height: calc(var(--dur) / 60 * var(--hour) - 2px);
  display: flex !important; flex-direction: column; align-items: flex-start; gap: .05em; padding: .3em .35em !important;
  border-radius: .45em; background: var(--c) !important; color: var(--cream) !important; text-align: left;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: top var(--t-fast) var(--ease), left var(--t-fast) var(--ease), transform 200ms var(--ease), box-shadow 200ms;
}
.dy-block b { font-size: .8em; font-weight: 700; }
.dy-block span { font-size: .68em; opacity: .9; font-variant-numeric: tabular-nums; }
.dy-block em { font-style: normal; font-size: .68em; font-weight: 600; color: var(--amber); }
.dy-block.is-mock { box-shadow: inset 0 0 0 .1em var(--amber); }
.dy-block:hover { filter: brightness(1.08); }
.dy-block.is-drag { z-index: 3; cursor: grabbing; transform: scale(1.05); box-shadow: 0 .7em 1.6em rgba(0, 0, 0, .5); transition-duration: 120ms, 120ms, 200ms, 200ms; }
/* The floating time label while dragging; amber when it would clash. */
.dy-block .dy-tag { position: absolute; left: 50%; bottom: calc(100% + .35em); transform: translateX(-50%); white-space: nowrap; padding: .25em .55em; border-radius: 99em; background: var(--cream); color: var(--night); font-size: .72em; font-weight: 600; opacity: 1; }
.dy-block.is-clash .dy-tag { background: var(--amber); }
.dy-block.is-shake { animation: shake 360ms var(--ease); }
@keyframes shake { 20% { translate: -.2em 0; } 45% { translate: .2em 0; } 70% { translate: -.1em 0; } }
.toast { position: absolute; z-index: 4; left: .8em; right: .8em; bottom: 1.1em; display: flex; align-items: center; gap: .7em; min-height: 3.2em; padding: 0 .4em 0 1.1em; border-radius: 1.1em; background: #1E2924; box-shadow: 0 .6em 1.8em rgba(0, 0, 0, .5); font-weight: 500; font-size: .92em; animation: toast-in 420ms var(--ease); }
.toast[hidden] { display: none; }
.toast span { flex: 1; font-variant-numeric: tabular-nums; }
.toast button { color: var(--green) !important; font-weight: 600 !important; min-width: 3.6em; min-height: 2.8em; }
.toast .warn { flex: none; width: 0; height: 0; border: solid transparent; border-width: 0 .5em .85em; border-bottom-color: #FBBF24; }
@keyframes toast-in { from { opacity: 0; transform: translateY(1em); } }

/* Links into the demos land below the sticky header. */
#today, .demo { scroll-margin-top: 88px; }

/* Today, the hero (TodayScreen.swift). A little larger than the demo phones, like the screenshot it replaced. */
.phone-lg.phone-live { --w: min(clamp(300px, 27vw, 350px), 100vw - 3rem); }
.td { background: radial-gradient(130% 42% at 15% 0%, rgba(79, 164, 118, .2), transparent 72%), var(--night); }
.td .scroll { padding-bottom: 5.2em; }
.td-top { display: flex; justify-content: space-between; align-items: center; margin: .7em .15em .9em; }
.td-hi { font: 700 1.85em/1.1 var(--display); letter-spacing: -.02em; }
.td-add { width: 2.5em; height: 2.5em; border-radius: 50%; flex: none;
  background: linear-gradient(var(--cream), var(--cream)) center / .95em .13em no-repeat, linear-gradient(var(--cream), var(--cream)) center / .13em .95em no-repeat, var(--brand); }
.td a { color: var(--text); text-decoration: none; transition: background-color 200ms, transform 120ms var(--ease); }
.td a:hover { background: var(--surface-2); }
.td a:active { transform: scale(.98); }
.td-test { position: relative; display: flex; align-items: center; gap: .8em; padding: .8em 1em .8em 1.75em; }
.td-test::before { content: ""; position: absolute; left: 1em; top: .8em; bottom: .8em; width: .17em; border-radius: 1em; background: var(--amber); }
.td-test > span:first-child, .td-owed > span:first-child { flex: 1; display: grid; line-height: 1.3; }
.td-test strong { font-weight: 600; }
.td-test [data-t-detail], [data-t-from] { color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.td-chev { width: .5em; height: .5em; border: solid var(--tertiary); border-width: .13em .13em 0 0; transform: rotate(45deg); }
.td-head { display: flex; justify-content: space-between; align-items: baseline; margin: 1.2em .15em .55em !important; }
.td-head strong { font-weight: 600; }
.td-head span { color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.td-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.td-list li { display: flex; gap: 1em; padding: .8em 1em; }
.td-time { display: grid; align-content: start; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.td-time span, .td-who > span { color: var(--muted); font-size: .8em; font-weight: 400; }
.td-who { display: grid; line-height: 1.35; }
.td-who strong { font-weight: 600; }
.td-who .td-pc { color: var(--tertiary); font-size: .75em; margin-top: .2em; }
.td-done { position: relative; display: inline-block; width: .9em; height: .9em; margin-left: .15em; vertical-align: -.1em; border-radius: 50%; background: var(--ready); }
.td-done::after { content: ""; position: absolute; left: .32em; top: .15em; width: .2em; height: .42em; border: solid var(--night); border-width: 0 .11em .11em 0; transform: rotate(45deg); }
.td-owed { display: flex; align-items: center; gap: .8em; padding: .9em 1em; margin-top: 1.1em; overflow: hidden; }
.td-owed[hidden] { display: none; }
.td-owed strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.td-review { color: var(--green); font-weight: 500; }
.td-owed.is-back { animation: rise 600ms var(--ease); }
.td-week { display: flex; justify-content: space-between; align-items: flex-end; gap: .8em; padding: 1em; }
.td-week p { display: grid; }
.td-week strong { font: 700 2em/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.td-week span { color: var(--muted); font-size: .78em; }
.td-week .td-rcv { text-align: right; }
.td-week .td-rcv strong { font: 600 1.15em/1.3 var(--sans); color: var(--ready); letter-spacing: 0; }
.td-tabs { position: absolute; z-index: 3; left: .8em; right: .8em; bottom: .9em; display: flex; padding: .3em; border-radius: 99em;
  background: rgba(38, 46, 42, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: .72em; font-weight: 600; }
.td-tabs span { flex: 1; text-align: center; padding: .95em 0; border-radius: 99em; color: var(--muted); }
.td-tabs .on { background: rgba(255, 255, 255, .1); color: var(--text); }
/* The lessons settle in one after another as the phone arrives. */
html.js .phone.is-in .td-list li { animation: rise 700ms var(--ease) both; animation-delay: calc(550ms + var(--n) * 90ms); }
/* A soft green glow on whatever changed because of another demo. */
.is-changed { animation: changed 1600ms var(--ease); }
@keyframes changed { 18% { background-color: #1D2F26; box-shadow: 0 0 0 .14em rgba(79, 164, 118, .7); } }

/* "Today" chip: says what changed on the Today screen and takes the visitor to it. */
.today-chip {
  position: fixed; z-index: 6; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem; padding: .55rem .55rem .55rem 1.1rem; border-radius: 999px; white-space: nowrap;
  color: var(--text); text-decoration: none; font-size: .95rem; background: rgba(26, 37, 32, .9); border: 1px solid rgba(79, 164, 118, .4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .75);
  animation: chip-in 480ms var(--ease); transition: opacity 300ms var(--ease), transform 300ms var(--ease), background-color 200ms;
}
.today-chip[hidden] { display: none; }
.today-chip:hover { color: var(--text); background: rgba(33, 48, 41, .96); }
.today-chip b { font-weight: 600; color: var(--green); }
.today-chip i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); }
.today-chip i::before { content: ""; width: .45rem; height: .45rem; margin-top: .2rem; border: solid var(--cream); border-width: .13rem 0 0 .13rem; transform: rotate(45deg); }
.today-chip.is-out { opacity: 0; transform: translate(-50%, .7rem); }
@keyframes chip-in { from { opacity: 0; transform: translate(-50%, 1rem); } }

/* 4. Lock screen (BiometricLockScreen.swift). Without JavaScript only the unlocked Pupils list shows. */
.lk-app { position: absolute; inset: 0; }
.lk-app img { width: 100%; height: 100%; object-fit: cover; }
.lk { display: none; }
html.js .lk {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3.3em 1.5em 1.6em; background: var(--night);
  transition: opacity 500ms var(--ease), transform 700ms var(--ease), visibility 0s;
}
html.js .lk-app { transition: opacity 600ms var(--ease) 80ms, transform 800ms var(--ease) 80ms; }
html.js [data-demo="lock"]:not(.is-open) .lk-app { opacity: 0; transform: scale(.92); }
html.js [data-demo="lock"].is-open .lk { opacity: 0; transform: scale(1.08); visibility: hidden; transition-delay: 0s, 0s, 700ms; }
.lk-brand { margin-top: auto; display: grid; justify-items: center; }
.phone .lk-icon { width: 4.6em; height: 4.6em; border-radius: 22.5%; box-shadow: 0 .8em 2.4em -.6em rgba(79, 164, 118, .45); }
.lk-name { font: 700 2em/1.1 var(--display); letter-spacing: -.02em; margin-top: .75em !important; }
.lk-tag { color: var(--muted); font-size: .92em; margin-top: .2em !important; }
.lk-auth { margin: auto 0; width: 100%; display: grid; justify-items: center; gap: .9em; }
.faceid { display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lk-glyph { width: 2.5em; height: 2.5em; color: var(--muted); stroke-width: 1.5; }
.lk-title { font-weight: 600; font-size: 1.05em; }
.lk-unlock { position: relative; display: flex !important; align-items: center; justify-content: center; gap: .5em; width: 100%; min-height: 3.2em;
  border-radius: .9em; background: var(--brand) !important; color: var(--cream) !important; font-weight: 600 !important; transition: transform 120ms var(--ease), background-color 200ms; }
.lk-unlock:hover { background: #136845 !important; }
.lk-unlock:active, .lk-pass:active { transform: scale(.97); }
.lk-unlock .faceid { width: 1.15em; height: 1.15em; stroke-width: 3.2; }
.lk-unlock.is-busy > * { visibility: hidden; }
.lk-unlock.is-busy::after { content: ""; position: absolute; width: 1.2em; height: 1.2em; border-radius: 50%; border: .14em solid rgba(245, 243, 238, .3); border-top-color: var(--cream); animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.lk-pass { color: var(--muted) !important; font-weight: 500 !important; padding: .4em .8em !important; transition: transform 120ms var(--ease); }
.lk-pass:hover { color: var(--text) !important; }
/* The system's Face ID panel. The glyph breathes while it looks, then turns into a tick. */
.lk-hud {
  position: absolute; z-index: 5; left: 50%; top: 50%; width: 8.6em; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; align-content: center; gap: .7em; border-radius: 1.5em;
  background: rgba(44, 50, 47, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 1em 3em rgba(0, 0, 0, .5);
  animation: hud-in 260ms var(--ease); transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.lk-hud[hidden] { display: none; }
@keyframes hud-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
.lk-hud.is-out { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
.lk-hud .faceid { width: 3.6em; height: 3.6em; color: var(--text); overflow: visible; }
.lk-hud-label { font-size: .8em; color: var(--muted); }
.fi-corners, .fi-face { transform-origin: 24px 24px; transition: opacity 220ms var(--ease), transform 400ms var(--ease); }
.fi-check { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; stroke-width: 2.6; }
.lk-hud.is-scan .fi-corners { animation: breathe 1000ms ease-in-out; }
.lk-hud.is-scan .fi-face { animation: glance 1000ms ease-in-out; }
@keyframes breathe { 50% { transform: scale(.9); } }
@keyframes glance { 30% { transform: translateX(-2px); opacity: .55; } 70% { transform: translateX(2px); opacity: .55; } }
.lk-hud.is-ok .fi-face { opacity: 0; transform: scale(.8); }
.lk-hud.is-ok .fi-corners { opacity: 0; transform: scale(1.12); }
.lk-hud.is-ok .fi-check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 480ms var(--ease) 120ms, opacity 1ms 120ms; }
/* Passcode: six dots fill in turn. */
.lk-dots { display: none; gap: .6em; }
.lk-hud.is-pass { width: 12em; aspect-ratio: auto; padding: 1.5em 1em; }
.lk-hud.is-pass .faceid { display: none; }
.lk-hud.is-pass .lk-dots { display: flex; }
.lk-hud.is-pass .lk-hud-label { order: -1; color: var(--text); font-size: .85em; font-weight: 600; }
.lk-dots i { width: .6em; height: .6em; border-radius: 50%; box-shadow: inset 0 0 0 .08em var(--text); transition: background-color 120ms; }
.lk-dots i.on { background: var(--text); }

/* Headline full stops land a moment after their heading appears. */
h1 .dot, h2 .dot { position: relative; }
html.js .is-in:is(h1, h2) .dot, html.js .is-in :is(h1, h2) .dot { animation: dot-land 800ms var(--ease) 420ms both; }
@keyframes dot-land { from { opacity: 0; top: -.55em; } 55% { opacity: 1; } 75% { top: .05em; } to { top: 0; } }

/* FAQ answers open and close smoothly where the browser supports animating to auto height. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-fast) var(--ease), content-visibility var(--t-fast) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ?demo=done opens the demos in their end state with no motion, for screenshots. */
html.is-instant *, html.is-instant *::before, html.is-instant *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}