/* App overview pages (/apps/<app>/, kit/OVERVIEW.md). A page in the app's own colours, dark by default: a product
   page, not a guide. Each page brings only its tokens in its own <style>; everything else here is derived from them.

   The five a page always sets:
     --app --app-2 --app-3   the app's background, its second tone and its glow (dark to light on a dark page;
                             on a light page --app is the paper, --app-2 a second pale tone, --app-3 the glow)
     --app-ink               the ink: headings, the bar, strong text   --accent   the filled Play buttons
     .wm                     the wordmark, if the app has a typographic one

   The derived set. Each is mixed from the five above, and a page may override any of them in its own :root:
     --bg          page background              --bg-2       second background: the closing band, footer, demos
     --ink         headings and strong text     --body       body text            --muted   small print, captions
     --raise       card fill (Works on, Go deeper, the sign-up field)
     --line        hairline borders             --line-2     stronger borders, the ghost buttons
     --accent-text the accent as text: eyebrows, numbers, links (darken it on a light page if --accent fails AA)
     --on-accent   text on an --accent fill     --focus      the focus ring
     --hero-top    the hero's top wash          --hero-glow  the glow under the hero shot    --hero-base  the hero's ground
     --glow        the glow round frames and buttons            --shade      the frame's drop shadow
     --bezel       the frame's rim colour
     --now-ink --now-bg --now-line    the "now" badge       --test-ink --test-bg --test-line   the "in testing" badge
     --d1 --d2 --d3 --d4              the four colours of a .demo illustration

   Light pages: <html lang="en-GB" data-theme="light">. The light set below re-derives every token for pale paper
   and dark ink. --app-ink must pass AA (4.5:1) on --app and --app-2 in both themes; overview.test.mjs checks body,
   muted, buttons, badges, the focus ring and the bar on every page.

   Lexend is local, as in guide.css. The only script is the page's own (the video facade and the TestFlight sign-up):
   the reveals are CSS scroll timelines, and browsers without them (or with reduced motion) show everything at once. */

@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/lexend-300.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/lexend-500.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lexend-700.woff2") format("woff2"); }

:root {
  --app: #03495e; --app-2: #036a7e; --app-3: #45d49a; --app-ink: #f4f8f8; --accent: #45d49a;
  --bg: color-mix(in srgb, var(--app) 62%, #050408);
  --bg-2: var(--app);
  --ink: var(--app-ink);
  --raise: color-mix(in srgb, var(--app) 84%, #050408);
  --body: color-mix(in srgb, var(--ink) 84%, var(--app));
  --muted: color-mix(in srgb, var(--ink) 64%, var(--app));
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-2: color-mix(in srgb, var(--ink) 22%, transparent);
  --accent-text: var(--accent);
  --on-accent: #141118;
  --focus: var(--ink);
  --glow: color-mix(in srgb, var(--app-3) 40%, transparent);
  --hero-top: color-mix(in srgb, var(--app-2) 85%, transparent);
  --hero-glow: var(--glow);
  --hero-base: var(--app);
  --shade: rgba(0, 0, 0, .8);
  --bezel: var(--ink);
  --now-ink: #b9f0c9; --now-bg: rgba(80, 200, 120, .14); --now-line: rgba(120, 220, 150, .35);
  --test-ink: #bfe2fb; --test-bg: rgba(90, 170, 230, .14); --test-line: rgba(130, 190, 240, .35);
  --d1: var(--app-3); --d2: var(--accent); --d3: var(--app-2); --d4: var(--ink);
  --radius: 18px; --gutter: clamp(16px, 4vw, 48px); --wide: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
/* the light set: pale paper in the app's own colour, dark ink. A page sets data-theme="light" on <html> and gives
   --app a light paper, --app-2 a second pale tone, --app-3 a strong colour for the glows, --app-ink a dark ink. */
[data-theme="light"] {
  --bg: var(--app);
  --bg-2: color-mix(in srgb, var(--app-2) 45%, var(--app));
  --raise: color-mix(in srgb, #fff 55%, var(--app));
  --body: color-mix(in srgb, var(--ink) 90%, var(--app));
  --muted: color-mix(in srgb, var(--ink) 76%, var(--app));
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --line-2: color-mix(in srgb, var(--ink) 28%, transparent);
  --on-accent: #fff;
  --glow: color-mix(in srgb, var(--app-3) 30%, transparent);
  --hero-top: color-mix(in srgb, var(--app-2) 95%, transparent);
  --hero-base: var(--app);
  --shade: color-mix(in srgb, var(--ink) 30%, transparent);
  --bezel: #fff;
  --now-ink: #17592f; --now-bg: rgba(60, 160, 90, .13); --now-line: rgba(30, 120, 60, .38);
  --test-ink: #17496f; --test-bg: rgba(60, 140, 210, .13); --test-line: rgba(30, 100, 170, .38);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--body); font: 300 17px/1.7 "Lexend", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { padding: 0; list-style: none; }
a { color: var(--accent-text); text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.eyebrow { font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }

/* buttons: .o-btn is the hero's Play (one per page); .o-play is the same look in the bar and the closing band */
.o-btn, .o-play, .o-ghost {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 99px;
  font: 500 16px/1 "Lexend", system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.o-btn, .o-play { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px -10px var(--glow); }
.o-btn:hover, .o-play:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--accent); }
.o-ghost { color: var(--ink); border: 1px solid var(--line-2); }
.o-ghost:hover { background: var(--line); }
.o-btn svg, .o-play svg { width: 14px; height: 14px; flex: none; }

/* the bar: sticky, slim */
.o-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; padding-inline: var(--gutter); background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.o-crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.o-crumbs .brand { font-weight: 700; letter-spacing: -0.04em; font-size: 18px; color: var(--ink); text-decoration: none; }
.o-crumbs .sep { color: var(--line-2); }
.o-crumbs .here { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-top .o-play { height: 38px; padding: 0 18px; font-size: 14.5px; box-shadow: none; }

/* hero: the words, then the app, large */
.o-hero {
  position: relative; text-align: center; color: var(--ink); padding: clamp(36px, 5vw, 64px) var(--gutter) 0;
  background:
    radial-gradient(70% 55% at 50% 72%, var(--hero-glow), transparent 70%),
    radial-gradient(90% 70% at 50% -10%, var(--hero-top), transparent 70%),
    linear-gradient(180deg, var(--hero-base) 0%, var(--bg) 100%);
}
.o-hero h1 { font-weight: 700; font-size: clamp(40px, 8vw, 96px); line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.o-hero .eyebrow + h1 { margin-top: 18px; }
.o-hero .first { margin: 22px auto 0; max-width: 34ch; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.4; color: var(--ink); }
.o-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.o-hero .o-shot { margin: clamp(28px, 4vw, 48px) auto 0; max-width: 1120px; }

/* the frame: a screenshot in a slim bezel with a glow in the app's colours */
.frame { position: relative; padding: clamp(6px, .9vw, 12px); border-radius: calc(var(--radius) + 8px); background: linear-gradient(160deg, color-mix(in srgb, var(--bezel) 16%, transparent), color-mix(in srgb, var(--bezel) 4%, transparent)); border: 1px solid var(--line-2); box-shadow: 0 50px 100px -40px var(--shade), 0 0 90px -30px var(--glow); }
.frame img { width: 100%; border-radius: var(--radius); background: var(--app); }
.frame.fit img { aspect-ratio: 16 / 10; object-fit: contain; background: radial-gradient(circle at 50% 30%, var(--app-2), var(--app)); }

/* .demo: an illustration in place of a screenshot, for a feature row whose idea no real shot shows well at this
   size. An inline SVG (viewBox 0 0 800 500, the frame's 16:10) with role="img" and a real text alternative, drawn
   in the page's tokens: simple shapes, a few labels, no fake controls or window chrome (kit/OVERVIEW.md, Pictures).
   Classes inside the SVG: .f1-.f4 fill with --d1-4, .s1-.s4 stroke with them (.f0/.s0 with the ink), .mute a
   muted fill, .soft a pale fill, .lbl a label, .lbl-s a small one. */
.frame.demo svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius); background: radial-gradient(90% 90% at 50% 30%, color-mix(in srgb, var(--app-2) 55%, var(--bg-2)), var(--bg-2)); }
.demo .s0, .demo .s1, .demo .s2, .demo .s3, .demo .s4 { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.demo .f1 { fill: var(--d1); } .demo .f2 { fill: var(--d2); } .demo .f3 { fill: var(--d3); } .demo .f4 { fill: var(--d4); }
.demo .s1 { stroke: var(--d1); } .demo .s2 { stroke: var(--d2); } .demo .s3 { stroke: var(--d3); } .demo .s4 { stroke: var(--d4); }
.demo .f0 { fill: var(--ink); } .demo .s0 { stroke: var(--ink); } .demo .mute { fill: var(--muted); } .demo .soft { fill: var(--line); }
.demo .lbl { font: 500 26px "Lexend", system-ui, sans-serif; fill: var(--ink); }
.demo .lbl-s { font: 300 21px "Lexend", system-ui, sans-serif; fill: var(--body); }

/* sections */
.o-sec { max-width: var(--wide); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter) 0; }
.o-sec[hidden] { display: none; }
.o-sec > h2, .o-head h2 { font-weight: 700; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.045em; color: var(--ink); }
.o-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 64px); }
.o-sec > h2 + * { margin-top: clamp(24px, 3vw, 40px); }

/* features: big screenshots, alternating sides */
.features { display: grid; gap: clamp(64px, 9vw, 128px); }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature:nth-child(even) .feature-copy { order: 2; }
.feature .num { display: block; font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--accent-text); }
.feature h3 { margin-top: 12px; font-weight: 500; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); }
.feature p { margin-top: 14px; max-width: 38ch; font-size: 18px; }

/* features: a short, not complete list in two columns */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(24px, 5vw, 64px); }
.facts li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.5; }
.facts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

/* video facade */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--app); color: #fff; font: inherit; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt .glyph { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); transition: transform .25s var(--ease); }
.yt:hover .glyph { transform: scale(1.08); }
.yt .glyph svg { width: 28px; height: 28px; margin-left: 4px; }
.yt .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; text-align: left; font-weight: 500; font-size: 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
#video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.alt { margin-top: 12px; font-size: 14.5px; color: var(--muted); }

/* works on: three tiles with an icon */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.works li { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--radius); background: linear-gradient(180deg, var(--raise), color-mix(in srgb, var(--raise) 40%, var(--bg))); border: 1px solid var(--line); }
.works > li > svg { width: 30px; height: 30px; color: var(--accent-text); }
.works b { font-weight: 500; font-size: 20px; color: var(--ink); }
.works li > span:not(.badge) { color: var(--muted); font-size: 15.5px; }
.works .shots { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.works .shots img { border-radius: 10px; border: 1px solid var(--line-2); background: var(--app); }
.works .shots .wide { flex: 1 1 0; min-width: 0; }
.works .shots .tall { flex: none; height: 150px; width: auto; }
.badge { display: inline-block; justify-self: start; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line-2); white-space: nowrap; }
.badge.now { color: var(--now-ink); background: var(--now-bg); border-color: var(--now-line); }
.badge.testing { color: var(--test-ink); background: var(--test-bg); border-color: var(--test-line); }

/* the TestFlight sign-up, in the iPad card (.o-signup): the homepage's Formspree form, compact. A label line, the
   email field with its button, a status line the script fills, and the privacy line. Without JS the browser posts it
   and Formspree shows its own page. */
.works li { grid-template-columns: minmax(0, 1fr); }
.works li > * { min-width: 0; }
.o-signup { display: grid; gap: 8px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.o-signup label { font-weight: 500; font-size: 15.5px; color: var(--ink); }
.o-field { display: flex; gap: 6px; padding: 5px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.o-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.o-field input { flex: 1; width: 100%; min-width: 0; min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: 300 16px "Lexend", system-ui, sans-serif; }
.o-field input::placeholder { color: var(--muted); opacity: 1; }
.o-field input:focus { outline: none; }
.o-field button { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 500 15px/1 "Lexend", system-ui, sans-serif; cursor: pointer; }
.o-field button:hover { box-shadow: 0 8px 22px -10px var(--accent); }
.o-field button:disabled { opacity: .6; cursor: progress; }
.o-signup .o-note { min-height: 1.4em; font-size: 14px; line-height: 1.4; color: var(--body); }
.o-signup .o-note:empty { min-height: 0; }
.o-signup .o-note[data-state="error"] { color: var(--ink); font-weight: 500; }
.o-signup .o-note[data-state="error"]::before { content: "! "; color: var(--accent-text); }
.o-signup .o-small { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.o-signup .o-small a { color: inherit; }

/* go deeper: links as cards */
.deeper { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.deeper > li > a { display: grid; gap: 6px; height: 100%; padding: 24px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--raise); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); }
.deeper > li > a:hover { border-color: var(--accent); transform: translateY(-2px); }
.deeper b { font-weight: 500; font-size: 19px; color: var(--ink); }
.deeper b::after { content: " →"; color: var(--accent-text); }
.deeper span { color: var(--muted); font-size: 15.5px; }

/* the hero's play badge: shown by the page's script only when a video id is set */
.o-badge[hidden] { display: none; }
.o-badge { position: absolute; right: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 40px); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent), 0 10px 30px -8px rgba(0, 0, 0, .6); transition: transform .25s var(--ease); }
.o-badge:hover { transform: scale(1.08); }
.o-badge svg { width: 20px; height: 20px; margin-left: 3px; }

/* the closing band */
.o-end { margin-top: clamp(72px, 10vw, 140px); padding: clamp(64px, 9vw, 120px) var(--gutter); text-align: center; color: var(--ink); background: radial-gradient(60% 120% at 50% 100%, var(--glow), transparent 70%), linear-gradient(180deg, var(--bg), var(--bg-2)); border-top: 1px solid var(--line); }
.o-end h2 { font-weight: 700; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.045em; }
.o-end p { margin-top: 12px; color: var(--body); }

/* footer */
.o-foot { background: var(--bg-2); border-top: 1px solid var(--line); }
.o-foot-in { max-width: var(--wide); margin: 0 auto; padding: 32px var(--gutter) 48px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 72%, var(--bg-2)); }
.o-foot a { color: inherit; }

@media (max-width: 900px) {
  /* three cards in two columns leave an orphan: go to one column here */
  .works, .deeper { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .feature, .feature:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature:nth-child(even) .feature-copy { order: 0; }
  .works, .facts { grid-template-columns: minmax(0, 1fr); }
  .o-badge { width: 46px; height: 46px; }
  .eyebrow { letter-spacing: .12em; }
  .o-cta-row > * { flex: 1 1 100%; justify-content: center; }
  /* in the hero, the guide is a plain link so the screenshot shows sooner */
  .o-hero .o-cta-row { gap: 4px; margin-top: 22px; }
  .o-hero .o-ghost { height: 36px; padding: 0; border: 0; color: var(--accent-text); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
  .o-hero .o-ghost:hover { background: none; }
  .o-hero .o-shot { margin-top: 24px; }
  .o-sec { padding-top: 44px; }
  .o-head { margin-bottom: 28px; }
  .features { gap: 48px; }
  .o-end { margin-top: 56px; padding-block: 56px; }
  .frame { padding: 5px; border-radius: 16px; }
  .frame img { border-radius: 11px; }
  /* the frame is a phone's width here: labels in a .demo grow so they stay readable */
  .demo .lbl { font-size: 31px; } .demo .lbl-s { font-size: 25px; }
}

/* reveals: rise into place as they scroll in; the hero's frame tilts back to flat */
@keyframes o-rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes o-flat { from { transform: perspective(1800px) rotateX(14deg) scale(.94); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: o-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .o-hero .o-shot { transform-origin: 50% 0; animation: o-flat linear both; animation-timeline: view(); animation-range: cover 0% cover 45%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}