/* Cogu's home page, "Take it back". One idea carries the page: dark is the screen, colour is life. It begins dark, with
   seven shapes shut in a phone; out on the page they wake up, and every scene after is a field of one of the app's own
   colours with its own composition. The shapes, colours and figures are the app's (packages/tokens, ui/day-cast.tsx). */

/* The faces: Apple's own on an iPhone, iPad or Mac (San Francisco, asked for by name and never sent: its licence keeps
   it to Apple's devices). Elsewhere Geist for the text and headings and Nunito for the headings and figures, both under the SIL Open
   Font License, kept beside the page (fonts/), Latin only, and fetched only where they are used. */
@font-face { font-family: 'Geist'; src: url('fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --night: #0b0b0d;
  /* The ground of the page: warm paper, with the app's colours on it */
  --warm: #ffffff;
  /* Apple's light greys: the second ground, the secondary text, the hairline */
  --grey: #f5f5f7;
  --dim: #6e6e73;
  --line: #d2d2d7;
  --ink: #1d1d1f;
  --paper: #f8f6ff;
  --lavender: #ab9ff2;
  --gold: #ffd13f;
  --green: #2ec08b;
  --blue: #4a87f2;
  --coral: #ff7243;
  --quiet: #a0a0ab;
  --ui: 'Geist', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --round: 'Nunito', var(--ui);
  --gutter: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 84px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Safari and every browser on an iPhone or iPad: Apple's own faces, as in the app */
@supports (font: -apple-system-body) {
  :root { --ui: -apple-system, 'SF Pro Text', 'Geist', sans-serif; --round: ui-rounded, 'SF Pro Rounded', 'Nunito', var(--ui); }
}
body { margin: 0; background: var(--warm); color: var(--ink); font: 400 17px/1.5 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
svg { display: block; }
.skip { position: absolute; left: -999px; top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--lavender); color: var(--ink); font-weight: 600; z-index: 20; }
.skip:focus { left: 8px; }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; overflow: hidden; }

/* Headings are set in the text face, as in the app; the round face is the accent: the marked word in a heading,
   the figures, the mark, and the two lines the page ends its thoughts on */
h1, h2 { font-family: var(--ui); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
/* Cogu set into a heading, as one of its letters */
.inline-cogu { display: inline-block; width: 0.9em; height: 0.9em; margin: 0 0.04em; vertical-align: -0.1em; }
.inline-cogu svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tilt, .held { font-family: var(--round); font-weight: 800; letter-spacing: -0.04em; }
.lead { max-width: 30ch; font-size: clamp(18px, 2vw, 23px); line-height: 1.4; text-wrap: pretty; }
.note { font-size: 14px; opacity: 0.7; }

/* The way to get Cogu. Before it is out: a status (a dot and words), never a button. Out: Apple's own badge, at the
   sizes Apple allows, or plain words if the badge file is not there. */
.get { display: inline-flex; align-items: center; }
.get--soon { gap: 10px; font-size: 17px; font-weight: 700; }
.get--soon i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: pulse 1.8s ease-in-out infinite; }
.get--small.get--soon { font-size: 14px; }
.get--big.get--soon { font-size: clamp(19px, 2.2vw, 24px); }
.get__badge { display: block; }
.get__badge img { display: block; height: 54px; width: auto; }
.get--small .get__badge img { height: 40px; }
.get--big .get__badge img { height: 64px; }
.get__words { display: inline-flex; align-items: center; min-height: 58px; padding: 0 30px; border-radius: 29px; background: var(--lavender); color: var(--ink); font-size: 18px; font-weight: 700; text-decoration: none; }
.get--small .get__words { min-height: 42px; padding: 0 20px; border-radius: 21px; font-size: 15px; }
@keyframes pulse { 50% { transform: scale(1.5); opacity: 0.5; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.actions--center { flex-direction: column; }
.more-link { font-weight: 600; text-decoration: none; opacity: 0.6; transition: opacity 0.2s; }
.more-link:hover { opacity: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.mark { display: inline-flex; align-items: center; gap: 8px; font: 800 24px/1 var(--round); letter-spacing: -0.03em; text-decoration: none; }
.face { transition: transform 0.5s var(--ease); }
[data-fig] svg, [data-cogu] svg, .friend svg, .kept__one svg, .crowd__one svg { width: 100%; height: 100%; overflow: visible; }
.breathes { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(0.97, 1.04); } }
@keyframes twinkle { 50% { transform: scale(1.3); } }

/* The bar: light, at the top, readable over every field of colour */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); padding: 12px max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); padding-top: max(12px, env(safe-area-inset-top)); background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); transition: box-shadow 0.3s; }
.nav.scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
.nav__links { display: flex; gap: clamp(14px, 2.4vw, 28px); margin-left: auto; }
.nav__links a { padding: 8px 2px; font-size: 15px; font-weight: 600; text-decoration: none; opacity: 0.65; transition: opacity 0.2s; }
.nav__links a:hover { opacity: 1; }
/* On a phone the bar holds two things: the links before Cogu is out, the badge once it is */
@media (max-width: 680px) { .nav .get--soon { display: none; } .nav__links { gap: 14px; } .nav__links a { white-space: nowrap; } .nav:has(.get__badge, .get__words) .nav__links { display: none; } .nav:has(.get__badge, .get__words) .get { margin-left: auto; } }

/* ---- 1. The promise: warm paper, the app's own screen rising from the bottom edge, and one soft shape of colour
   low in the corner behind it ---- */
.hero { --pw: min(72vw, 310px); padding-top: clamp(20px, 3vw, 44px); background: var(--warm); }
.hero__grid { display: grid; width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.hero__words { position: relative; z-index: 4; display: grid; justify-items: center; text-align: center; }
.hero .actions { justify-content: center; }
.hero h1 { display: grid; gap: 0.04em; }
.less { font-size: clamp(40px, 6vw, 88px); }
.more { font-size: clamp(40px, 6vw, 88px); white-space: nowrap; }
.hero .lead { margin-top: 20px; max-width: 34ch; opacity: 0.74; }
.hero__scene { position: relative; height: calc(var(--pw) * 1.36); margin-top: 40px; }
.hero__scene > * { transition: translate 0.5s var(--ease); }
.sun { position: absolute; left: calc(50% - var(--pw) * 0.72); bottom: calc(var(--pw) * -0.8); width: calc(var(--pw) * 1.5); aspect-ratio: 1; border-radius: 50%; background: var(--gold); animation: dawn 1.4s var(--ease) both; }
@keyframes dawn { from { transform: translateY(30%) scale(0.9); } }
.hero .phone--hero { position: absolute; left: 50%; top: 0; width: var(--pw); margin-left: calc(var(--pw) / -2); aspect-ratio: auto; padding: calc(var(--pw) * 0.03) calc(var(--pw) * 0.03) 0; border-radius: calc(var(--pw) * 0.165) calc(var(--pw) * 0.165) 0 0; z-index: 2; rotate: -3deg; transform-origin: 50% 100%; animation: arrive 1.1s var(--ease) both 0.15s; }
.hero .phone--hero::before { top: calc(var(--pw) * 0.062); height: calc(var(--pw) * 0.085); }
.shot { display: block; width: 100%; height: auto; border-radius: calc(var(--pw) * 0.137) calc(var(--pw) * 0.137) 0 0; }
@keyframes arrive { from { transform: translateY(14%); opacity: 0; } }
.hero__behind { position: absolute; left: calc(50% + var(--pw) * 0.44); top: calc(var(--pw) * 0.28); width: calc(var(--pw) * 0.2); aspect-ratio: 1; z-index: 1; rotate: 16deg; animation: peek 0.9s var(--spring) both 0.7s; }
.hero__over { position: absolute; left: calc(50% - var(--pw) * 0.8); top: calc(var(--pw) * 0.84); width: calc(var(--pw) * 0.4); aspect-ratio: 1; z-index: 3; rotate: 0deg; animation: peek 0.9s var(--spring) both 0.9s; }
@keyframes peek { from { scale: 0; } }
.hero__over svg, .hero__behind svg { animation: breathe 4s ease-in-out infinite; transform-origin: 50% 90%; }
/* The moving things behind the phone */
.hero__lines { position: absolute; left: calc(50% - var(--pw) * 1.05); top: calc(var(--pw) * -0.1); width: calc(var(--pw) * 2.1); height: calc(var(--pw) * 2.1); z-index: 1; overflow: visible; pointer-events: none; }
.ribbon { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.8s var(--ease) 0.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* A spark keeps its place and only glows (it is placed by its own transform, so a moving one would jump) */
.spark { animation: glow 4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 0.45; } }
/* Round the deck in Our mission: a ring that turns slowly, and two sparks */
.deck-side { position: relative; }
.deck__air { position: absolute; inset: -48px 0 0 0; z-index: 0; overflow: visible; pointer-events: none; }
.deck__air .ring { transform-box: fill-box; transform-origin: center; animation: turn 60s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.deck, .deck__bar { position: relative; z-index: 1; }
@media (min-width: 900px) { .deck__air { inset: -56px -40px 0 -40px; } }
@media (prefers-reduced-motion: reduce) { .ribbon { animation: none; stroke-dashoffset: 0; } .spark, .deck__air .ring { animation: none; } }
.trust { position: relative; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(18px, 3vw, 40px); margin: 0; padding: 16px var(--gutter); background: var(--grey); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); list-style: none; font-size: 14px; font-weight: 600; }
.trust li { display: flex; align-items: center; gap: 8px; opacity: 0.72; }
.trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* On a wide screen: the same, larger, with more of the phone's screen in view */
@media (min-width: 900px) {
  .hero { --pw: clamp(280px, 25vw, 350px); padding-top: clamp(28px, 4vw, 56px); }
  .hero__scene { height: calc(var(--pw) * 1.3); margin-top: 44px; }
  .sun { left: calc(50% - var(--pw) * 0.95); bottom: calc(var(--pw) * -1.15); width: calc(var(--pw) * 1.9); }
  .hero__behind { left: calc(50% + var(--pw) * 0.7); top: calc(var(--pw) * 0.3); width: calc(var(--pw) * 0.2); }
}

/* The phone, and the app's screens drawn in it */
.phone { position: relative; width: min(280px, 70vw); aspect-ratio: 300 / 620; padding: 9px; border-radius: 17% / 8.2%; background: #050506; box-shadow: 0 0 0 1.5px #3a3a42, 0 40px 70px -30px rgba(0, 0, 0, 0.75); }
.phone::before { content: ''; position: absolute; top: 3.2%; left: 50%; width: 28%; height: 3.8%; margin-left: -14%; border-radius: 99px; background: #050506; z-index: 3; }
.screen { display: grid; height: 100%; overflow: hidden; border-radius: 15.5% / 7.4%; background: #000; color: #fff; font-size: 13px; line-height: 1.3; }
.screen > * { grid-area: 1 / 1; }
.appcard { border-radius: 26px; background: #1f1f23; color: #fff; }
.label { color: var(--quiet); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.flag { padding: 4px 9px; border-radius: 99px; background: #2e2e35; color: var(--lavender); font-size: 10px; font-weight: 700; white-space: nowrap; }
.figure { margin-top: 8px; color: var(--quiet); font: 600 15px/1 var(--round); }
.figure b { margin-right: 1px; color: #fff; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.figure--xl { font-size: 20px; }
.figure--xl b { font-size: clamp(44px, 5.4vw, 64px); }
.track { height: 26px; margin-top: 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.track--tall { height: 38px; border-radius: 19px; }
.fill { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding: 0 10px; border-radius: inherit; color: var(--ink); font-weight: 800; }
.fill em { font-style: normal; line-height: 1; }
.fill--green { width: 62%; background: #5dbe90; }
.fill--pink { width: 100%; background: #f08fa9; }
.off { padding: 14px; }
.off__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: #1f1f23; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.chip--quiet { color: var(--quiet); letter-spacing: 0; }

/* ---- 2. The stories: four fields of colour, side by side ---- */
.stories { background: var(--warm); padding: clamp(64px, 9vw, 130px) 0 clamp(64px, 9vw, 120px); overflow: visible; }
.stories__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.stories__intro h2 { max-width: 14ch; font-size: clamp(34px, 4.6vw, 64px); text-wrap: balance; }
.count { white-space: nowrap; font: 700 15px/1 var(--round); opacity: 0.55; font-variant-numeric: tabular-nums; }
.count b { font-weight: 800; }
.progress { height: 4px; margin-top: 18px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
.progress i { display: block; width: 25%; height: 100%; border-radius: 2px; background: var(--ink); transition: translate 0.5s var(--ease); }
.stories__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(22px, 3vw, 36px); }
.tabs { display: flex; gap: 8px; }
.tabs button { min-height: 44px; padding: 0 18px; border-radius: 22px; background: rgba(0, 0, 0, 0.05); color: var(--ink); font-size: 15px; font-weight: 700; transition: background 0.25s, color 0.25s, transform 0.25s var(--spring); }
.tabs button:hover { transform: scale(1.06); }
.tabs button[aria-selected='true'] { background: var(--ink); color: #fff; }
.arrows { display: none; gap: 8px; }
.arrow { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 20px; transition: transform 0.25s var(--spring), opacity 0.2s; }
.arrow:hover { transform: scale(1.1); }
.arrow:disabled { opacity: 0.18; cursor: default; transform: none; }
@media (min-width: 760px) { .arrows { display: flex; } }
.track-x { --side: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); display: flex; gap: clamp(12px, 2vw, 24px); margin-top: 22px; padding: 6px var(--side) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--side); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.track-x::-webkit-scrollbar { display: none; }
.track-x:focus-visible { outline-offset: -3px; }
.story { position: relative; flex: none; display: grid; grid-template-rows: auto 1fr; gap: 28px; width: min(1040px, 84vw); min-height: clamp(560px, 66vh, 660px); padding: clamp(26px, 4vw, 56px); border-radius: clamp(34px, 4.4vw, 56px); color: var(--ink); overflow: hidden; scroll-snap-align: center; transition: scale 0.5s var(--ease), opacity 0.5s; }
.story:not(.current) { scale: 0.965; }
.story:not(.current) > * { opacity: 0.5; transition: opacity 0.5s; }
.story > * { transition: opacity 0.5s; }
.story--ask { background: var(--lavender); }
.story--block { background: var(--gold); }
.story--focus { background: var(--green); }
.story--see { background: #ff8a5b; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; grid-template-rows: none; align-items: center; gap: 40px; } }
@media (max-width: 899px) { .rule--limit { width: 80%; } .story__art--rules .story__sitter { left: -2%; bottom: 0; width: 72px; } }
.story h2 { font-size: clamp(40px, 5.4vw, 80px); }
.story .lead { margin-top: 20px; max-width: 26ch; font-size: clamp(17px, 1.7vw, 21px); }
.fine { margin-top: 14px; font-size: 14px; font-weight: 600; opacity: 0.7; }
.tilt { display: inline-block; padding: 0.02em 0.16em 0.1em; border-radius: 0.3em; background: var(--ink); color: var(--lavender); rotate: -5deg; transform-origin: 0 100%; }
.held { display: inline-block; padding: 0 0.14em 0.08em; border-radius: 0.16em; background: var(--ink); color: var(--gold); }
.story__art { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; }
.story__sitter { position: absolute; z-index: 2; width: clamp(56px, 6vw, 84px); aspect-ratio: 1; }
.story__sitter svg { animation: breathe 4.6s ease-in-out infinite; transform-origin: 50% 90%; }

/* Ask */
.kept { margin-top: 22px; }
.kept p { display: flex; align-items: baseline; gap: 6px; font-size: 17px; font-weight: 600; }
.kept b { font: 800 56px/1 var(--round); letter-spacing: -0.03em; }
.kept p span { font: 800 26px/1 var(--round); margin-right: 6px; }
.kept__row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 48px; margin-top: 8px; }
.kept__one { width: 48px; height: 48px; animation: pop 0.6s var(--spring) both; }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }
.story__art--phone .phone { width: min(252px, 62vw); rotate: 3deg; }
.friend { position: absolute; top: -2%; left: 50%; width: min(104px, 26vw); aspect-ratio: 1; margin-left: max(-210px, -46vw); rotate: -12deg; }
.friend.cheer { animation: cheer 0.7s var(--ease); }
@keyframes cheer { 35% { transform: translateY(-26px) scale(1.08) rotate(8deg); } }
.demo__stop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 20px 20px; text-align: center; }
.demo__stop.again { animation: rise 0.45s var(--ease); }
.demo__stop img { border-radius: 14px; margin-bottom: 8px; }
.demo__stop h3 { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.demo__stop p { color: var(--quiet); }
.demo__keep, .demo__open { align-self: stretch; height: 46px; border-radius: 23px; font-size: 15px; font-weight: 700; transition: transform 0.2s var(--spring); }
.demo__keep { margin-top: 20px; background: var(--lavender); color: #000; }
.demo__keep:active, .demo__open:active { transform: scale(0.95); }
.demo__app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #1b1b1f; text-align: center; animation: rise 0.35s var(--ease); }
.demo__name { color: var(--quiet); font-weight: 600; }
.demo__time { color: var(--quiet); font-size: 15px; }
.demo__time span { color: #fff; font: 800 50px/1 var(--round); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.demo__after { margin-top: 10px; color: #6a6a73; font-size: 12px; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(0.98); } }

/* Block: the rules' cards as on Rules */
.story__art--rules { flex-direction: column; align-items: stretch; gap: 0; padding: 24px 0 8px; }
.rule { padding: clamp(18px, 2.2vw, 26px); border-radius: clamp(26px, 3vw, 36px); box-shadow: 0 30px 50px -30px rgba(20, 18, 28, 0.6); }
.rule--wide { rotate: -2.5deg; }
.rule--limit { width: 66%; margin: -14px 0 0 auto; rotate: 3deg; }
.rule__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rule h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.rule__head p { color: var(--quiet); font-size: 16px; }
.rule .rule__days { color: #fff; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: #111113; font-size: 13px; font-weight: 700; white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #6a6a73; transition: background 0.3s; }
.status--on i { background: var(--green); }
.dayline { position: relative; height: 36px; margin-top: clamp(30px, 5vw, 64px); border-radius: 18px; background: rgba(255, 255, 255, 0.08); }
.dayline .moon { position: absolute; top: 50%; left: 13px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; box-shadow: inset 4px -2px 0 0 #6a6a73; }
.dayline .moon--end { left: auto; right: 13px; }
.dayline .tick { position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #6a6a73; }
.dayline .tick--big { width: 9px; height: 9px; margin: -4.5px; }
.dayline .window { position: absolute; top: 0; bottom: 0; min-width: 44px; border-radius: 18px; background: var(--coral); }
.dayline .now { position: absolute; top: 4px; bottom: 4px; left: 56%; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 3px #1f1f23; }
.left { margin-top: 18px; color: var(--quiet); font: 600 17px/1 var(--round); }
.left b { color: #fff; font-size: clamp(40px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.03em; }
.left span { font-family: var(--ui); font-weight: 400; }
.story__art--rules .story__sitter { left: 3%; bottom: 4%; rotate: -10deg; }

/* Focus: the timer's card, minutes over seconds */
.story__art--clock { gap: clamp(6px, 1.6vw, 22px); padding: clamp(22px, 3vw, 40px) clamp(12px, 2vw, 26px); border-radius: clamp(30px, 3.6vw, 44px); background: #1f1f23; }
.clockbox { display: grid; justify-items: center; }
.clock { display: grid; color: var(--lavender); font: 900 clamp(104px, 13.5vw, 196px) / 0.8 var(--round); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-align: center; transition: color 0.4s; }
.clock span { display: block; }
.running .clock { color: #fff; }
.clock__note { margin-top: 14px; color: var(--quiet); font-size: 16px; }
.round { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #2e2e35; color: var(--lavender); font-size: 26px; line-height: 1; transition: transform 0.2s var(--spring); }
.round:hover { transform: scale(1.1); }
.round:active { transform: scale(0.9); }
.start { display: inline-flex; align-items: center; min-height: 54px; margin-top: 24px; padding: 0 26px; border-radius: 27px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; transition: transform 0.25s var(--spring); }
.start:hover { transform: scale(1.05); }
.start:active { transform: scale(0.95); }
.story__sitter--clock { right: -5%; top: -9%; rotate: 12deg; }

/* See: Today's cards */
.story__art--today { flex-direction: column; align-items: stretch; gap: 12px; }
.off--big { padding: clamp(18px, 2.2vw, 26px); border-radius: clamp(26px, 3vw, 36px); rotate: -2deg; box-shadow: 0 30px 50px -30px rgba(20, 18, 28, 0.6); }
.off--big .label, .mini .label { font-size: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; rotate: 1.5deg; }
.mini { padding: 16px; border-radius: 26px; box-shadow: 0 30px 50px -30px rgba(20, 18, 28, 0.6); }
.story__sitter--see { right: 6%; bottom: -30%; rotate: 10deg; }
.story__art--today { padding-bottom: clamp(40px, 6vw, 70px); }
@keyframes bob { 50% { transform: translateY(-6%); } }

/* ---- 3. Why: paper, each thought on its own shape ---- */
/* How it starts: three steps, small */
.how { padding: clamp(64px, 8vw, 110px) 0; background: var(--grey); }
.how h2 { font-size: clamp(30px, 4vw, 48px); text-align: center; }
.steps { display: grid; gap: 36px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
/* Each step: a white tile with one small picture, its name under it; the tiles come up as the page scrolls */
.steps li { translate: 0 var(--lift, 0px); opacity: var(--show, 1); }
.step__tile { display: grid; place-items: center; aspect-ratio: 1; max-height: 340px; width: 100%; border-radius: 28px; background: #fff; overflow: hidden; }
.steps h3 { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 600 22px/1.2 var(--ui); letter-spacing: -0.02em; }
.steps h3 b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 14px/1 var(--ui); }
.steps p { margin-top: 6px; max-width: 30ch; color: var(--dim); }
/* Held in place while the tiles take their turns (set by the script on a roomy screen) */
.how.pinned { overflow: visible; height: calc(100svh + 150vh); padding: 0; }
.how.pinned .wrap { position: sticky; top: 64px; display: grid; align-content: center; min-height: calc(100svh - 64px); padding-block: 24px; }
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 62%; }
.apps i { position: relative; aspect-ratio: 1; border-radius: 26%; background: var(--c); opacity: 0.35; }
.apps i.picked { opacity: 1; }
.apps i.picked::after { content: ''; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain; }
.when { display: grid; justify-items: center; gap: 18px; }
.when__time { padding: 14px 22px; border-radius: 99px; background: var(--coral); color: var(--ink); font: 800 clamp(20px, 2.2vw, 28px) / 1 var(--round); letter-spacing: -0.02em; rotate: -4deg; }
.when__days { display: flex; gap: 6px; }
.when__days i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grey); font: 600 12px/1 var(--ui); font-style: normal; color: var(--dim); }
.when__days i:nth-child(-n+5) { background: var(--ink); color: #fff; }
.step__cogu { width: 46%; aspect-ratio: 1; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
}

/* A few answers: quiet, on the paper */
.faq { padding: clamp(72px, 10vw, 130px) 0; background: var(--warm); }
.faq__in { display: grid; gap: clamp(24px, 4vw, 40px); }
.faq h2 { font-size: clamp(34px, 4.4vw, 56px); }
.faq__list { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.faq details { border-top: 1px solid rgba(0, 0, 0, 0.12); interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary { position: relative; display: block; padding: 22px 44px 22px 0; font: 700 clamp(18px, 1.7vw, 21px) / 1.3 var(--ui); letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 15px; height: 1.5px; margin-top: -1px; background: currentColor; opacity: 0.6; transition: rotate 0.3s var(--ease), opacity 0.3s; }
.faq summary::after { rotate: 90deg; }
.faq details[open] summary::after { rotate: 0deg; opacity: 0; }
.faq summary:hover::before, .faq summary:hover::after { opacity: 1; }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; border-radius: 10px; }
.faq details p { padding: 0 44px 24px 0; max-width: 56ch; opacity: 0.72; }
@media (min-width: 900px) { .faq__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
@media (prefers-reduced-motion: reduce) { .faq details::details-content, .faq summary::before, .faq summary::after { transition: none; } }

.mission { background: var(--paper); color: var(--ink); padding: clamp(80px, 12vw, 170px) 0; }
.mission h2 { font-size: clamp(40px, 6.4vw, 92px); max-width: 13ch; }
.mission h2 span { display: block; }
.flip { margin-top: 0.12em; color: #6e5fd6; transform: rotate(180deg); transition: transform 1.2s var(--spring); }
.flip.upright { transform: none; }
.thoughts { display: grid; gap: clamp(18px, 3vw, 34px); margin-top: clamp(56px, 8vw, 110px); }
.thought { width: fit-content; max-width: min(640px, 100%); padding: clamp(22px, 3vw, 36px) clamp(26px, 4vw, 52px); background: var(--bg); color: var(--fg); font-size: clamp(19px, 2.3vw, 27px); font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; text-wrap: pretty; rotate: var(--turn); }
.thought:nth-child(even) { justify-self: end; }
.thought--pill { border-radius: 999px; padding-inline: clamp(34px, 6vw, 80px); }
.thought--block { border-radius: clamp(28px, 4vw, 52px); }
.thought--round { display: grid; place-items: center; width: clamp(240px, 34vw, 380px); aspect-ratio: 1; border-radius: 50%; font-family: var(--round); font-size: clamp(24px, 3.4vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; text-align: center; justify-self: center; }
.thought.thought--round:nth-child(even), .thought.thought--round { justify-self: center; }
/* The thoughts as a deck (set by the script; without it they stand in a column as above): one card on top, the rest
   behind it, and a tap deals the next */
.mission.has-deck { padding: clamp(72px, 10vw, 130px) 0; }
.deck { position: relative; display: block; height: 320px; margin-top: clamp(40px, 6vw, 64px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.deck .thought, .deck .thought.thought--round { position: absolute; inset: 0 0 auto 0; display: grid; align-items: center; justify-self: auto; width: 100%; max-width: none; height: calc(100% - 44px); aspect-ratio: auto; align-content: start; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 96px; border-radius: clamp(26px, 3vw, 36px); font: 500 clamp(18px, 1.7vw, 22px) / 1.36 var(--ui); letter-spacing: -0.01em; text-align: left; opacity: 1; translate: 0 calc(var(--pos) * 15px); scale: calc(1 - var(--pos) * 0.05); rotate: calc(var(--pos) * var(--lean, 1.5deg)); z-index: calc(10 - var(--pos)); transform: none; transform-origin: 50% 100%; transition: translate 0.55s var(--ease), scale 0.55s var(--ease), rotate 0.55s var(--ease), opacity 0.4s; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.deck .thought:nth-child(even) { --lean: -1.5deg; }
.deck .thought[data-far] { opacity: 0; }
.deck .thought[data-under] { color: transparent; }
/* The last card is the closing line, larger; each card carries one small shape, and the last one Cogu */
.deck .thought--last { font: 700 clamp(26px, 2.8vw, 38px) / 1.05 var(--ui); letter-spacing: -0.03em; }
/* One marked phrase on each card: a marker band behind it, or a drawn line under it */
.hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--hl) 55%, transparent) 58% 94%, transparent 94%); padding: 0 0.08em; margin: 0 -0.08em; border-radius: 3px; }
.ul { text-decoration: underline wavy var(--hl); text-decoration-thickness: 2.5px; text-underline-offset: 0.22em; text-decoration-skip-ink: none; }
.thought__fig { display: none; }
.deck .thought .thought__fig--b { right: 92px; bottom: 24px; width: 24px; height: 24px; animation-delay: -2.4s; animation-duration: 6.5s; }
.deck .thought__fig { position: absolute; right: 22px; bottom: 20px; display: block; width: 60px; height: 60px; transition: opacity 0.3s, scale 0.6s var(--spring); animation: drift 5s ease-in-out infinite; }
.deck .thought--last .thought__fig { width: 76px; height: 76px; }
.deck .thought[data-under] .thought__fig { opacity: 0; scale: 0.4; }
@keyframes drift { 50% { transform: translateY(-7px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .deck .thought__fig { animation: none; } }
.deck .thought.leaving { translate: 0 -34px; rotate: -5deg; opacity: 0; z-index: 11; }
.deck__bar { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.deck__next { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; }
.deck__next:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.deck__count { font: 700 15px/1 var(--round); opacity: 0.55; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .mission.has-deck .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .mission.has-deck h2 { grid-column: 1; grid-row: 1; font-size: clamp(40px, 5vw, 76px); }
  .mission.has-deck .purpose { grid-column: 1; grid-row: 2; margin-top: clamp(28px, 3vw, 44px); font-size: clamp(26px, 2.6vw, 38px); }
  .mission.has-deck .deck-side { grid-column: 2; grid-row: 1; }
  .deck { margin-top: 0; }
}
/* Held in place while the page scrolls through it: one stretch of scroll for each card */
.mission.pinned { overflow: visible; height: calc(100svh + var(--cards, 5) * 38vh); padding: 0; }
.mission.pinned .wrap { position: sticky; top: 64px; min-height: calc(100svh - 64px); align-content: center; padding-block: 24px; }
@media (max-width: 899px) { .mission.pinned .wrap { display: grid; } .mission.pinned .purpose { margin-top: 28px; } }
@media (prefers-reduced-motion: reduce) { .deck .thought { transition: none; } }
.purpose { margin-top: clamp(48px, 7vw, 96px); font: 800 clamp(34px, 5vw, 72px) / 0.98 var(--round); letter-spacing: -0.05em; text-wrap: balance; }

/* ---- 4. Out: blue, everyone here ---- */

.end { background: var(--grey); color: var(--ink); padding: clamp(72px, 10vw, 130px) 0 0; text-align: center; }
.end h2 { font-size: clamp(36px, 5.2vw, 72px); text-wrap: balance; }
.appicon { border-radius: 22.5%; box-shadow: 0 14px 30px -14px rgba(20, 18, 28, 0.6); }
.end .lead { max-width: 36ch; margin: 22px auto 0; opacity: 0.74; }
.private { margin-top: 26px; font-size: 15px; font-weight: 600; opacity: 0.85; }
.crowd { display: flex; justify-content: center; align-items: flex-end; margin: clamp(40px, 6vw, 80px) auto calc(clamp(56px, 9.5vw, 136px) * -0.3); padding: 0 4vw; }
/* A few plain shapes, each its own size, and Cogu among them, larger */
.crowd__one { flex: none; width: calc(clamp(52px, 9vw, 128px) * var(--s, 1)); margin: 0 clamp(2px, 1vw, 16px) calc(clamp(52px, 9vw, 128px) * 0.3 * (1 - var(--s, 1))) var(--gap, 0); rotate: calc((var(--n) - 2) * 6deg); }
.crowd__cogu { z-index: 2; rotate: 0deg; translate: 0 -6%; }
@keyframes bob { 50% { transform: translateY(-6%); } }

.foot { padding: 26px 0 max(26px, env(safe-area-inset-bottom)); background: var(--grey); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.mark--foot { font-size: 20px; color: var(--quiet); }
/* The name, as its drawn logo */
/* The face beside the name keeps its own size and is never cut by its box */
.mark__face { flex: none; display: block; width: 32px; height: 32px; margin: -3px -2px -3px -3px; }
.mark--foot .mark__face { width: 26px; height: 26px; }
.mark__word { display: block; width: auto; height: 19px; }
.mark--foot .mark__word { height: 15px; }
.foot nav { display: flex; gap: 22px; }
.foot a { color: var(--dim); font-size: 15px; text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* What comes in as the page scrolls */
.reveal { opacity: 0; translate: 0 30px; transition: opacity 0.7s var(--ease) var(--d, 0ms), translate 0.9s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; translate: none; }
@media (scripting: none) { .reveal { opacity: 1; translate: none; } .flip { transform: none; } }

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