/* Unbothered — marketing site
   Light only for now. The palette, faces and wobble come straight from the app. */

@font-face { font-family: "Caprasimo"; src: url("../assets/fonts/Caprasimo-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Coming Soon"; src: url("../assets/fonts/ComingSoon-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Radio Canada Big"; src: url("../assets/fonts/RadioCanadaBig-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Radio Canada Big"; src: url("../assets/fonts/RadioCanadaBig-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Radio Canada Big"; src: url("../assets/fonts/RadioCanadaBig-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  /* Colour — the app's light palette */
  --paper: #EFF3F1;
  --ink: #1B2220;
  --ink-2: rgba(27, 34, 32, .62);
  --ink-3: rgba(27, 34, 32, .34);
  --hair: rgba(27, 34, 32, .16);
  --mint: #A8DDCB;
  --mint-wash: #C3E7D9;   /* the mint at full-screen size: one step lighter than the accent */

  /* Faces */
  --f-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --f-hand: "Coming Soon", "Comic Neue", ui-rounded, sans-serif;
  --f-sans: "Radio Canada Big", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Type scale — tuned at 1440, fluid down to 375 */
  --t-mega: clamp(3.25rem, 8.6vw, 8.25rem);       /* hero title, final CTA */
  --t-display: clamp(2.5rem, 5.4vw, 5.25rem);     /* section heads */
  --t-display-s: clamp(2rem, 3.6vw, 3.5rem);
  --t-statement: clamp(1.875rem, 3.5vw, 3.375rem);/* quiet lines, steps */
  --t-statement-s: clamp(1.375rem, 2vw, 1.875rem);
  --t-hand-l: clamp(1.75rem, 3.3vw, 3.125rem);    /* hero subline, the unblock line */
  --t-hand: clamp(1.375rem, 2.2vw, 2.125rem);
  --t-lead: clamp(1.125rem, 1.45vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;

  /* Space — a vertical rhythm keyed to the viewport */
  --gutter: clamp(1.25rem, 5.5vw, 5rem);
  --max: 1280px;
  --section: clamp(7rem, 22vh, 13rem);
  --beat: clamp(4rem, 12vh, 8rem);

  /* Phone: limited by both width and height so it always fits the viewport */
  --phone-w: clamp(220px, min(24vw, 34vh), 340px);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* The hero frame: a near-full-bleed panel. The nav sits in the top gap, with 44px of paper below it.
     (Plain px, not calc(): main.js reads these to draw the panel's shape.) */
  --nav-h: 44px;
  --frame-t: 88px;
  --frame-x: 44px;
  --frame-b: 44px;
  --frame-r: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--ink); color: var(--paper); border-radius: 999px; text-decoration: none; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.mega, .display, .display-s, .hero-copy__title {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: .98;
  text-wrap: balance;
}
.mega { font-size: var(--t-mega); }
.display { font-size: var(--t-display); line-height: 1.02; }
.display-s { font-size: var(--t-display-s); line-height: 1.05; }
.statement {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: var(--t-statement);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.statement-s { font-family: var(--f-sans); font-weight: 500; font-size: var(--t-statement-s); line-height: 1.2; letter-spacing: -.01em; }
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: 0; }
.meta { font-size: var(--t-small); color: var(--ink-2); }
.meta-s { font-size: .8125rem; color: var(--ink-2); }

/* ---------- Hand-drawn outlines ----------
   Outlines live on a pseudo-element with the wobble filter, so the content inside stays crisp. */
.pill-outline, .btn--outline, .phone__frame, .qr__code, .widget, .field {
  position: relative;
}
.pill-outline::before, .btn--outline::before, .widget::before, .field::before, .qr__code::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: inherit;
  filter: url(#wobble);
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding: 0 1.25rem;
  border-radius: 999px;
  font: 500 .9375rem/1 var(--f-sans);
  text-decoration: none;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.btn--sm { height: 2.375rem; padding: 0 1.05rem; font-size: .875rem; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { transform: translateY(-1px); }

/* Apple's official "Download on the App Store" badge (assets/badges), used as supplied: not recoloured or redrawn.
   Apple asks for at least 40px tall on screen and clear space around it. */
.store-badge { display: inline-block; line-height: 0; border-radius: 9px; transition: transform .3s var(--ease); }
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { width: auto; height: 3rem; }
.store-badge--lg img { height: 3.5rem; }

.pill-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 1rem/1 var(--f-sans);
}
button.pill-outline { border: 0; cursor: pointer; height: 3.5rem; padding: 0 2.25rem; }
.pill-ink { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--f-sans); font-weight: 500; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--nav-h); padding-inline: calc(var(--frame-x) + 4px);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
/* A clear blur rather than a paper bar, so the nav takes on whatever colour is behind it (paper, mint). */
/* Once pinned over content: a solid paper bar with a hairline along the bottom for contrast. */
.nav.is-scrolled { background: var(--paper); box-shadow: 0 1px 0 rgba(27, 34, 32, .2); }
.wordmark { font-family: var(--f-hand); font-size: 1.5rem; text-decoration: none; line-height: 1; }
.nav__links { display: flex; gap: 2.25rem; }
.nav__links a { font-size: .9375rem; text-decoration: none; color: var(--ink-2); transition: color .25s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { justify-self: end; height: 2rem; }
/* Over the dark info panel the pinned nav goes dark too. */
.nav.is-dark { background: #1B2220; box-shadow: 0 1px 0 rgba(227, 235, 231, .16); }
.nav.is-dark .nav__mark { color: #E3EBE7; }
.nav.is-dark .nav__links a { color: rgba(227, 235, 231, .64); }
.nav.is-dark .nav__links a:hover { color: #E3EBE7; }
.nav.is-dark .nav__cta { background: #E3EBE7; color: #1B2220; }

/* ---------- Phone ----------
   Everything inside is sized in cqw, so a screen scales as one drawing. */
.phone {
  container-type: inline-size;
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--phone-w) * .16);
}
.phone__screen {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--paper);
}
.phone__frame { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.phone__frame::before {
  content: ""; position: absolute; inset: 0;
  border: max(2.5px, .85cqw) solid var(--ink);
  border-radius: inherit;
  filter: url(#wobble);
}
.phone__island {
  position: absolute; top: 3.4cqw; left: 50%; translate: -50% 0;
  width: 30cqw; height: 8.6cqw; border-radius: 99px; background: var(--ink);
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 16cqw 7cqw 9cqw;
  font-size: 4.4cqw; line-height: 1.3;
  opacity: 0;
}
.screen.is-on { opacity: 1; }
.status {
  position: absolute; top: 5cqw; left: 10cqw; right: 9cqw;
  display: flex; justify-content: space-between; align-items: center;
  font: 600 4.3cqw/1 var(--f-sans);
}
.status__icons { width: 15cqw; height: 3.4cqw; background:
  radial-gradient(circle, var(--ink) 55%, transparent 60%) 0 50%/3.4cqw 3.4cqw no-repeat,
  linear-gradient(var(--ink), var(--ink)) 100% 50%/6.5cqw 3.2cqw no-repeat;
  border-radius: 1cqw;
}
.meta-s { font-size: inherit; }
.phone .meta-s { font-size: 3.5cqw; }

/* Home screen: the large Unbothered widget, a page of nothing else, the dock */
.screen--home { padding: 19cqw 6.5cqw 6cqw; background: #DFE7E3; }
.home-widget {
  width: 100%;
  aspect-ratio: 1 / 1.12;
  display: flex; flex-direction: column; align-items: center;
  padding: 7cqw 6cqw 8cqw;
  border-radius: 10cqw;
  background: var(--paper);
  box-shadow: 0 .5cqw 3cqw rgba(27, 34, 32, .08);
  text-align: center;
}
.home-widget__cat { width: 92%; margin-bottom: auto; }
.home-widget__name { margin-top: 2cqw; font: 400 8.6cqw/1.05 var(--f-display); }
.home-widget__time { margin-top: 1.6cqw; font-size: 4.8cqw; line-height: 1.2; color: var(--ink-2); }
.home-widget__caption { margin-top: 2.6cqw; font-size: 3.4cqw; font-weight: 500; color: var(--ink-2); }
.home-dots { display: flex; gap: 1.8cqw; margin: auto 0 4cqw; }
.home-dots span { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--ink-3); }
.home-dots .on { background: var(--ink); }
.home-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5cqw; width: 100%; padding: 4cqw; border-radius: 9cqw; background: rgba(27,34,32,.07); }
.app-icon {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1; border-radius: 23%;
  background: var(--c, #888);
  display: grid; place-items: center;
}
.app-icon svg { width: 54%; height: 54%; fill: var(--g, #fff); }
.app-icon[data-badge]::after {
  content: attr(data-badge);
  position: absolute; top: -12%; right: -12%;
  min-width: 38%; height: 38%; padding: 0 9%;
  display: grid; place-items: center;
  border-radius: 99px; background: #E5484D; color: #fff;
  font: 600 24cqw/1 var(--f-sans);
}

/* The widget cat asleep, with its z's where the app draws them (TimerWidget.swift). */
.sleepy { position: relative; container-type: inline-size; }
.sleepy .ink-art { width: 100%; }
.sleepy__z { position: absolute; line-height: 1; color: var(--ink); }
.sleepy__z:nth-of-type(1) { left: 62cqw; top: 30cqw; font-size: 7cqw; }
.sleepy__z:nth-of-type(2) { left: 68cqw; top: 22cqw; font-size: 9cqw; }
.sleepy__z:nth-of-type(3) { left: 75cqw; top: 11cqw; font-size: 12cqw; }

/* Timer: the active block */
.timer__name { font: 400 10cqw/1.05 var(--f-display); margin-top: 6cqw; text-align: center; }
.timer__until { color: var(--ink-2); margin-top: 2cqw; }
.timer__cat { width: 112%; margin-top: auto; }
.timer__count { font-size: 12cqw; line-height: 1; margin: 6cqw 0 auto; }
.timer__hold { width: 100%; height: 13cqw; font-size: 4.4cqw; }
.timer__hold::before { border-width: max(1.5px, .55cqw); }

/* The timer prototype (js/timer.js). The countdown and the summary share a spot and crossfade,
   as do Hold and Done; nothing goes blank, nothing slides. */
canvas.timer__cat { display: block; aspect-ratio: 734 / 624; color: var(--ink); }
.timer__below { display: grid; margin: 6cqw 0 auto; text-align: center; }
.timer__below > * { grid-area: 1 / 1; transition: opacity .5s ease-in-out; }
.timer__below .timer__count { margin: 0; }
.timer__summary { opacity: 0; }
.timer__present { font-size: 11cqw; line-height: 1.1; }
.timer__counted { margin-top: 1.5cqw; font-size: 4.2cqw; }
.timer__actions { display: grid; width: 100%; }
.timer__actions > * { grid-area: 1 / 1; transition: opacity .5s ease-in-out; }
button.timer__hold {
  position: relative; overflow: hidden;
  height: 13cqw; padding: 0;
  cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none;
}
.timer__hold::before { z-index: 1; }
.timer__fill { position: absolute; inset: 0; background: var(--mint); transform-origin: left; transform: scaleX(var(--p, 0)); }
.timer__label { position: relative; z-index: 2; }
.timer__done { height: 13cqw; border: 0; font-size: 4.4cqw; cursor: pointer; opacity: 0; pointer-events: none; }
.is-ending .timer__hold { pointer-events: none; }
.is-ended .timer__count, .is-ended .timer__hold { opacity: 0; }
.is-ended .timer__summary, .is-ended .timer__done { opacity: 1; }
.is-ended .timer__done { pointer-events: auto; }
.unblock__try { margin-top: 1.25rem; text-align: center; transition: opacity .5s ease-in-out; }
.unblock__phone:has(.is-ending) .unblock__try { opacity: 0; }   /* the nudge goes once they've done it */

/* Setup screens */
.setup__q { font-size: 7.6cqw; line-height: 1.15; text-align: left; align-self: stretch; margin-top: 6cqw; }
.field { align-self: stretch; margin-top: 8cqw; padding: 4.5cqw 5cqw; border-radius: 4cqw; font: 400 7cqw/1 var(--f-display); background: #fff; }
.field::before { border-width: max(1.5px, .55cqw); }
.caret { display: inline-block; width: .6cqw; height: 7cqw; margin-left: 1cqw; vertical-align: -1cqw; background: var(--ink); }
.chips { align-self: stretch; display: flex; flex-wrap: wrap; gap: 2.5cqw; margin-top: 5cqw; }
.chips span { padding: 2.2cqw 3.6cqw; border-radius: 99px; background: rgba(27,34,32,.06); font-size: 3.8cqw; }
.setup__next { align-self: stretch; height: 13cqw; margin-top: auto; font-size: 4.4cqw; }
.days { align-self: stretch; display: flex; justify-content: space-between; margin-top: 9cqw; }
.days span { width: 10.5cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 4cqw; box-shadow: inset 0 0 0 .5cqw var(--ink); }
.days .on { background: var(--mint); }
.times { align-self: stretch; display: grid; gap: 4cqw; margin-top: 10cqw; }
.times div { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 3cqw; border-bottom: .4cqw solid var(--hair); }
.times .hand { font-size: 8cqw; line-height: 1; }
.picker { align-self: stretch; margin-top: 8cqw; }
.picker li { display: flex; align-items: center; gap: 3.5cqw; padding: 3.6cqw 0; border-bottom: .4cqw solid var(--hair); font-weight: 500; }
.picker .meta-s { margin-left: auto; }
.check { width: 6cqw; height: 6cqw; border-radius: 50%; box-shadow: inset 0 0 0 .5cqw var(--ink); }
.check.on { background: var(--mint); }

/* Lock screen */
.screen--lock { padding-top: 17cqw; background: #DFE7E3; }
.lock__date { font-weight: 500; font-size: 4.6cqw; }
.lock__time { font: 400 25cqw/1 var(--f-hand); margin-top: 1cqw; }
.notif, .live { align-self: stretch; display: flex; align-items: center; gap: 3.5cqw; padding: 3.8cqw; border-radius: 6cqw; background: rgba(255,255,255,.72); }
.notif { margin-top: auto; }
.notif__app { flex: none; width: 9cqw; height: 9cqw; border-radius: 2.4cqw; background: var(--mint); box-shadow: inset 0 0 0 .45cqw var(--ink); }
.notif__title { font-weight: 600; font-size: 3.8cqw; line-height: 1.2; }
.notif__body { font-size: 3.6cqw; color: var(--ink-2); }
.live { margin-top: 3cqw; background: var(--paper); color: var(--ink); }
.live__cat { flex: none; width: 17cqw; }
.live__name { font: 400 4.8cqw/1.15 var(--f-display); }
.live__text { flex: 1; }
.live__count { font-size: 6.6cqw; line-height: 1; }

/* ---------- Ink art: the app's drawings are ink-only alpha, tinted here ---------- */
.ink-art {
  background: var(--ink);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ink-art--film { aspect-ratio: 734 / 624; }
/* The idle cat: frames stacked as layers; only the current one is visible. */
.ink-art.film { position: relative; background: none; }
.film__frame { position: absolute; inset: 0; visibility: hidden; }
.film__frame.is-on { visibility: visible; }
.ink-art--desk { aspect-ratio: 600 / 510; }

/* ---------- 1. Opening ----------
   The hero is a mint panel inset from the screen edges; the nav lives in the gap above it.
   Static (no JS, reduced motion): the hero panel, then the statement, then the phone and copy on paper.
   With motion: one pinned stage. The panel's clip-path shrinks it to a dot behind the statement,
   the dot shrinks to nothing, and the phone rises in on paper. */
.opening { padding: var(--frame-t) var(--frame-x) 0; }
.opening__stage { position: relative; display: flex; flex-direction: column; }
.opening__fill { display: contents; }

/* The clutter covers the whole first screen, frame included; only the screen edge clips it. */
.clutter {
  position: absolute; z-index: 3;
  top: calc(var(--frame-t) * -1); left: calc(var(--frame-x) * -1);
  width: 100vw; height: 100vh; height: 100svh;
  overflow: clip;
  pointer-events: none;
}
.clutter__icon { position: absolute; left: 0; top: 0; will-change: transform; }
.clutter__icon .app-icon {
  width: 100%; height: 100%;
  /* Deeper icons sit flatter; the front of a pile casts a softer, longer shadow. */
  box-shadow:
    0 1px 1.5px rgba(27, 34, 32, .12),
    0 calc(3px + 9px * var(--z)) calc(8px + 16px * var(--z)) rgba(27, 34, 32, calc(.07 + .07 * var(--z)));
}

.hero {
  order: 1;
  position: relative;
  min-height: calc(100svh - var(--frame-t) - var(--frame-b));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(2rem, 6vw, 7rem);
  padding: 2rem max(var(--gutter), (100% - var(--max)) / 2);
  background: var(--mint-wash);
  border-radius: var(--frame-r);
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy__title { font-size: calc(var(--t-mega) * .7); margin-left: -.04em; }   /* the big-type scale, 30% smaller */
.hero-copy__sub { font-size: var(--t-hand-l); line-height: 1.15; max-width: 15em; margin-top: clamp(1rem, 2.5vh, 1.75rem); text-wrap: pretty; }
.hero-copy__actions { display: flex; align-items: center; gap: 1.25rem; margin-top: clamp(2rem, 5vh, 3rem); }

/* "Free on iPhone": a market sale sticker. White starburst, wobbly ink edge, slapped on the phone's top-right corner at a tilt. */
.sticker {
  position: relative;
  display: inline-grid; place-items: center;
  width: 10.5rem; aspect-ratio: 164 / 108;
  rotate: 10deg;
  transition: rotate .4s var(--ease), scale .4s var(--ease);
}
.opening__phone .sticker { position: absolute; z-index: 2; top: -1.75rem; right: calc(clamp(0rem, 3vw, 3rem) - 3.25rem); }
.sticker:hover { rotate: 4deg; scale: 1.05; }
.sticker__burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sticker__burst polygon {
  fill: #fff;
  stroke: var(--ink); stroke-width: 2; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: url(#wobble);
}
.sticker__text { position: relative; display: grid; justify-items: center; line-height: 1; text-align: center; }
.sticker__big { font: 400 2rem/1 var(--f-display); letter-spacing: -.01em; }
.sticker__small { font-size: 1rem; margin-top: .1rem; }
.opening__phone { position: relative; z-index: 1; padding-right: clamp(0rem, 3vw, 3rem); }

.reveal__intro { order: 2; max-width: 11em; margin: var(--section) auto 0; text-align: center; font-size: var(--t-mega); line-height: 1; }
.reveal__intro--next { order: 3; margin-top: var(--beat); }

.motion .opening { height: 480vh; padding: 0; }
.motion .opening__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
.motion .opening__fill {
  display: block; position: absolute; inset: 0;
  background: var(--mint-wash);
  clip-path: inset(var(--frame-t) var(--frame-x) var(--frame-b) var(--frame-x) round var(--frame-r));
  will-change: clip-path;
}
.motion .clutter { inset: 0; width: auto; height: auto; }
.motion .hero {
  position: absolute; inset: var(--frame-t) var(--frame-x) var(--frame-b);
  min-height: 0; background: none; border-radius: 0; overflow: visible;
}
.motion .reveal__intro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  width: min(11em, calc(100vw - 2 * var(--gutter))); margin: 0;
  visibility: hidden;
}

/* ---------- 2. How it works ---------- */
.how { padding-block: var(--section); }
.steps {
  display: grid; grid-template-columns: minmax(0, 28rem) auto; justify-content: center; align-items: start;
  column-gap: clamp(3rem, 7vw, 7rem);
  padding-inline: var(--gutter);
}
.step { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.step .statement { margin-top: 1.25rem; }
.step p { margin-top: 1rem; font-size: var(--t-lead); color: var(--ink-2); max-width: 24em; }

/* Progress: four hand-drawn dots that fill in ink as you reach each step. Shown only in the held scene. */
.step-progress { display: none; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.step-progress__dot {
  position: relative;
  width: 14px; height: 14px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.step-progress__dot::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent;
  filter: url(#wobble-sm);
  transition: background-color .35s var(--ease);
}
.step-progress__dot.is-reached::before { background: var(--ink); animation: dot-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dot-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.step-progress__dot::after { content: ""; position: absolute; inset: -10px; }   /* a comfortable tap target */

/* With motion: one held stage; the copy for the current step crossfades in place beside the phone. */
.motion .how { height: 380vh; padding: 0; }
.motion .how__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding-top: var(--nav-h); }
.motion .steps { align-items: center; }
.motion .step-progress { display: flex; }
.motion .steps__copy { display: grid; }
.motion .step {
  grid-area: 1 / 1; min-height: 0; justify-content: flex-start;
  opacity: 0; visibility: hidden; translate: 0 .75rem;
  transition: opacity .45s var(--ease), translate .6s var(--ease), visibility 0s linear .45s;
}
.motion .step.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
/* Forward: the old step drifts up and the new one rises in. Back: the reverse. */
.motion [data-dir="back"] .step { translate: 0 -.75rem; }
.motion [data-dir="fwd"] .step.is-out { translate: 0 -.75rem; }
.motion [data-dir="back"] .step.is-out { translate: 0 .75rem; }
.motion [data-dir] .step.is-on { translate: 0 0; }
.motion .step .statement { margin-top: 0; }

.steps__phone { position: relative; }
/* The phone and its widgets stay together, held in the middle of the screen while the steps scroll past. */
.steps__device { position: sticky; top: calc(50vh - var(--phone-w) * 1.083); width: var(--phone-w); margin-inline: auto; }
.motion .steps__device { position: relative; top: auto; }
.steps__phone .screen { translate: 8% 0; transition: opacity .5s var(--ease), translate .65s var(--ease); }
/* Like iOS pushing the next screen: in from the right going forward, from the left going back. */
[data-dir="back"] .steps__phone .screen { translate: -8% 0; }
[data-dir="fwd"] .steps__phone .screen.is-out { translate: -8% 0; }
[data-dir="back"] .steps__phone .screen.is-out { translate: 8% 0; }
.steps__phone .screen.is-on { translate: 0 0; }
/* Step 4: the widgets drift in beside the Lock Screen, overlapping its edges. */
.steps__widget {
  position: absolute; z-index: 1;
  opacity: 0; translate: 0 1.5rem;
  transition: opacity .6s var(--ease), translate .8s var(--ease);
  box-shadow: 0 10px 30px rgba(27, 34, 32, .10);
}
.steps__widget.widget--small { left: -34%; top: 20%; }
.steps__widget.widget--medium { right: -52%; top: 40%; transition-delay: .12s; }   /* over the empty middle, clear of the Live Activity */
.steps__device.is-runs .steps__widget { opacity: 1; translate: 0 0; }

/* ---------- Widgets (How it works, step 4) ---------- */
.widget { display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem; border-radius: 26px; background: var(--paper); }
.widget--small { width: clamp(150px, 13vw, 180px); aspect-ratio: 1; }
.widget--small .ink-art { width: 62%; }
.widget--medium { width: clamp(300px, 26vw, 370px); aspect-ratio: 2.12; flex-direction: row; align-items: center; gap: 1rem; }
.widget--medium .sleepy { width: 46%; flex: none; }
.widget__name { font: 400 1.25rem/1.1 var(--f-display); }
.widget__time { font-size: 1.125rem; margin-top: .2rem; }
.widget__next { margin-top: .25rem; font-size: .875rem; color: var(--ink-2); }

/* ---------- 3. Unblock ---------- */
/* The way out: the working timer prototype, beside the line that sets it up. */
.unblock { padding-block: var(--section); }
.unblock__inner {
  display: grid; grid-template-columns: minmax(0, 26rem) auto; justify-content: center; align-items: center;
  column-gap: clamp(3rem, 6vw, 6rem);
  padding-inline: var(--gutter);
}
.unblock__title { font-size: var(--t-hand-l); line-height: 1.15; max-width: 12em; }
.unblock__phone .phone { --phone-w: clamp(240px, min(24vw, 36vh), 330px); }

/* ---------- The info panel (privacy, pricing, FAQ) ----------
   Same type and structure, re-inked: the page's colour tokens are redefined inside it, so every
   component keeps its hierarchy. Light text uses the app's own dark-mode ink. */
.info {
  --ink: #E3EBE7;
  --ink-2: rgba(227, 235, 231, .64);
  --ink-3: rgba(227, 235, 231, .38);
  --hair: rgba(227, 235, 231, .16);
  --info-inset: 0px;
  --info-round: 0px;
  position: relative;
  margin-top: var(--section);
  padding-bottom: var(--section);
  background: #1B2220;
  color: var(--ink);
  clip-path: inset(0 var(--info-inset) round var(--info-round));
}
.info .tag { color: #1B2220; }   /* mint stays mint; its label stays dark */
.info + .download { margin-top: 0; }
/* With motion it starts inset like the hero panel and widens to full bleed as it arrives. */
.motion .info { --info-inset: var(--frame-x); --info-round: var(--frame-r); }

/* ---------- 4 & 5. Split sections ---------- */
.privacy, .pricing { padding-top: var(--section); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.split__head { max-width: 8em; }
.split__body { padding-top: .75rem; }
.ruled li { padding: 1.6rem 0; border-top: 1px solid var(--hair); font-size: var(--t-lead); color: var(--ink-2); }
.ruled li:last-child { border-bottom: 1px solid var(--hair); }
.ruled strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: .25rem; }
.privacy .meta { margin-top: 1.5rem; }

.tier + .tier { margin-top: var(--beat); }
.tier > p { margin-top: .75rem; font-size: var(--t-lead); color: var(--ink-2); max-width: 28em; }
.includes { margin-top: 1rem; display: grid; gap: .4rem; font-size: var(--t-lead); color: var(--ink-2); }
.tag { display: inline-block; margin-left: .4rem; padding: .15rem .55rem; border-radius: 99px; background: var(--mint); color: var(--ink); font-size: .75rem; font-weight: 500; vertical-align: .15em; }
.plans { width: 100%; margin-top: 2.25rem; border-collapse: collapse; }
.plans th, .plans td { padding: 1.1rem 0; border-top: 1px solid var(--hair); text-align: left; font-weight: 400; }
.plans tr:last-child > * { border-bottom: 1px solid var(--hair); }
.plans th { font-size: 1.0625rem; font-weight: 500; }
.plans td.hand { text-align: right; font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.plans td.meta-s { padding-left: 1rem; }
.plans__fine { margin-top: 1rem; max-width: 36em; line-height: 1.5; }
.plans__fine a { color: inherit; text-underline-offset: 3px; }

.faq { padding-top: var(--section); }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0;
  font-size: var(--t-lead); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.75rem/1 var(--f-hand); transition: rotate .35s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 3rem 1.75rem 0; font-size: var(--t-lead); color: var(--ink-2); max-width: 34em; }
.faq__more { margin-top: 1.75rem; font-size: var(--t-lead); color: var(--ink-2); }
.faq__more a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- 6. Download ---------- */
.download { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: var(--section) var(--gutter); margin-top: var(--section); overflow: hidden; }
.download .clutter--return { inset: 0; top: 0; left: 0; width: auto; height: auto; z-index: 0; overflow: hidden; }
.creep { position: absolute; width: var(--s); height: var(--s); rotate: var(--r); will-change: transform; }
.creep--left { left: 0; }
.creep--right { right: 0; }
.creep--bottom { bottom: 0; }

/* The three keepers in the opening, framing the big statements. */
.keepers { display: none; }
.motion .keepers { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.keeper { position: absolute; width: clamp(56px, 5.4vw, 80px); aspect-ratio: 1; rotate: var(--r); will-change: transform; }   /* placed by main.js, just outside the type */
.keeper .app-icon { width: 100%; height: 100%; box-shadow: 0 1px 1.5px rgba(27, 34, 32, .12), 0 10px 24px rgba(27, 34, 32, .14); }
.creep .app-icon { width: 100%; height: 100%; box-shadow: 0 1px 1.5px rgba(27, 34, 32, .12), 0 8px 18px rgba(27, 34, 32, .1); }
.download__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.download .mega { max-width: 7.5em; }
.download__sub { font-size: var(--t-hand); margin-top: clamp(1rem, 2.5vh, 1.75rem); }
.download__actions { display: flex; align-items: center; gap: 2.5rem; margin-top: var(--beat); }
.qr { display: flex; align-items: center; gap: 1rem; text-align: left; }
.qr .meta-s { max-width: 9em; }
.qr__code {
  width: 88px; height: 88px; border-radius: 14px;
  padding: 14px;
  background: repeating-conic-gradient(var(--ink-3) 0 25%, transparent 0 50%) 0 0 / 12px 12px content-box, var(--paper);
}

/* ---------- 7. Footer ---------- */
.footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--hair); }
.footer__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; font-size: var(--t-small); }
.footer__line { color: var(--ink-2); }
.footer__links { display: flex; gap: 1.75rem; }
.footer__links a { text-decoration: none; color: var(--ink-2); }
.footer__links a:hover { color: var(--ink); }
.footer__by { justify-self: end; }

/* ---------- Legal pages (privacy.html, terms.html) ----------
   One readable column, the same type and paper as the site. */
.legal { max-width: 44rem; margin: 0 auto; padding: calc(var(--nav-h) + clamp(3rem, 10vh, 6rem)) var(--gutter) var(--section); }
.legal__title { font: 400 var(--t-display)/1 var(--f-display); letter-spacing: -.01em; }
.legal__meta { margin-top: 1rem; font-size: var(--t-small); color: var(--ink-2); }
.legal__lead { margin-top: 1.25rem; font-size: var(--t-lead); line-height: 1.55; }
.legal__lead strong { font-weight: 500; }
.legal__toc { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 2.5rem; padding: 1.25rem 0; border-block: 1px solid var(--hair); font-size: .9375rem; }
.legal__toc a { color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal section { padding-top: 3.5rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.legal h2 { font: 500 var(--t-statement-s)/1.2 var(--f-sans); letter-spacing: -.01em; }
.legal h3 { margin-top: 1.75rem; font-size: 1.0625rem; font-weight: 500; }
.legal p, .legal li { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.legal ul { padding-left: 1.25rem; list-style: disc; }
.legal li { margin-top: .5rem; }
.legal li strong, .legal p strong { color: var(--ink); font-weight: 500; }
.legal a { text-underline-offset: 3px; }
.legal code { font-size: .9em; padding: .1em .35em; border-radius: 6px; background: rgba(27, 34, 32, .06); }
.legal__link { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Placeholders that must be filled before launch: impossible to miss. */
mark.todo { background: #FFE58A; color: var(--ink); padding: 0 .25em; border-radius: 4px; }
.footer__marks { margin-top: 1.5rem; font-size: .75rem; color: var(--ink-3); }

/* ---------- Cookie banner and privacy choices (js/analytics.js) ----------
   Accept and Decline look the same on purpose: neither is the easy way out. */
.consent {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 70;
  width: min(22rem, calc(100vw - 2.5rem));
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 12px 40px rgba(27, 34, 32, .16);
}
.consent::before, .choices::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--ink); filter: url(#wobble); pointer-events: none;
}
.consent__title { font-size: 1.375rem; line-height: 1.1; }
.consent__body { margin-top: .5rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.consent__actions, .choices__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-top: 1rem; }
.consent__btn {
  height: 2.75rem; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 500 .9375rem/1 var(--f-sans); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.consent__btn:hover { background: var(--ink); color: var(--paper); }
.consent__more { display: block; margin: .75rem auto 0; border: 0; background: none; color: var(--ink-2); font: 400 .8125rem var(--f-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.choices {
  position: fixed; width: min(30rem, calc(100vw - 2.5rem));
  padding: 1.75rem; border: 0; border-radius: 26px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 20px 60px rgba(27, 34, 32, .2);
  overflow: visible;
}
.choices::backdrop { background: rgba(27, 34, 32, .35); }
.choices__title { font: 400 1.75rem/1.1 var(--f-display); }
.choices__note { margin-top: .5rem; font-size: .9375rem; color: var(--ink-2); }
.choices__row { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--hair); cursor: pointer; }
.choices__row:last-of-type { border-bottom: 1px solid var(--hair); }
.choices__row input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--ink); }
.choices__row span { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.choices__row strong { display: block; font-weight: 500; color: var(--ink); }
.choices__gpc { margin-top: .75rem; font-size: .8125rem; color: var(--ink-2); }
.footer__choices { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; }
.footer__choices:hover { color: var(--ink); }

/* ---------- Polish: entrances and transitions (all .motion only, so reduced motion gets none) ---------- */
/* Words that rise into place: each word clips its own box, with room for descenders. */
.word { display: inline-block; overflow: clip; padding-bottom: .18em; margin-bottom: -.18em; vertical-align: top; }
.word__in { display: inline-block; will-change: transform; }
/* Hidden starting states for scroll reveals, so nothing flashes before main.js takes over. */
.motion [data-reveal="up"], .motion [data-reveal="stagger"] > *, .motion [data-reveal="words"] { opacity: 0; visibility: hidden; }

/* Hero load-in: the copy and phone rise, the icons pop in one by one, the sticker gets slapped on last. */
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes icon-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes slap { 0% { opacity: 0; transform: scale(1.8) rotate(26deg); } 55% { opacity: 1; transform: scale(.94) rotate(-4deg); } 100% { transform: none; } }
.motion .hero-copy__title { animation: rise-in .9s var(--ease) .05s both; }
.motion .hero-copy__sub { animation: rise-in .9s var(--ease) .15s both; }
.motion .hero-copy__actions { animation: rise-in .9s var(--ease) .25s both; }
.motion .opening__phone .phone { animation: rise-in 1s var(--ease) .2s both; }
.motion .clutter__icon .app-icon { animation: icon-pop .55s cubic-bezier(.34, 1.56, .64, 1) var(--pop, 0s) both; }
.motion .opening__phone .sticker { animation: slap .75s cubic-bezier(.3, 1.3, .5, 1) 1.1s both; }

/* FAQ answers glide open instead of jumping (where the browser supports it; elsewhere they just open). */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* The cookie banner and privacy dialog ease in rather than pop. */
@keyframes ease-in-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
.consent { animation: ease-in-up .6s var(--ease) .5s both; }
.choices[open] { animation: ease-in-up .35s var(--ease); }
.choices[open]::backdrop { animation: fade-in .35s var(--ease); }

/* ---------- Narrow screens: a plain stacked baseline. The real tablet/mobile pass is phase 9. ---------- */
@media (max-width: 900px) {
  :root { --frame-t: 64px; --frame-x: 10px; --frame-b: 10px; --frame-r: 24px; }   /* a tighter gap under the nav on phones */
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .hero { grid-template-columns: 1fr; row-gap: 2rem; align-content: start; justify-items: center; padding-top: 2.5rem; }
  .hero-copy { justify-self: stretch; text-align: center; }
  .hero-copy__title { margin-left: 0; }
  .hero-copy__sub { margin-inline: auto; }
  .hero-copy__actions { justify-content: center; }
  .opening__phone .sticker { width: 8.5rem; right: -2.5rem; top: -1.5rem; }
  .opening__phone { padding-right: 0; --phone-w: clamp(200px, min(60vw, 36vh), 300px); }
  .unblock__inner { grid-template-columns: 1fr; row-gap: 2rem; justify-items: center; text-align: center; }
  .unblock__title { margin-inline: auto; }
  .unblock__phone .phone { --phone-w: clamp(220px, 64vw, 300px); }
  .creep { width: calc(var(--s) * .62); height: calc(var(--s) * .62); }   /* quieter on small screens */
  .keeper { width: 48px; }
  .steps { grid-template-columns: 1fr; justify-items: center; row-gap: 1.5rem; text-align: center; }
  .steps__phone { display: none; }
  .step { min-height: 0; padding-bottom: var(--beat); align-items: center; }
  .step p { margin-inline: auto; }
  .step-progress { justify-content: center; margin-bottom: 1.25rem; }
  /* Held on phones too: tabs and copy above a phone sized to fit one screen. */
  .motion .steps { align-content: center; }
  .motion .steps__phone { display: block; }
  .motion .step { padding-bottom: 0; }
  .motion .step p { font-size: 1rem; }
  .steps__device { --phone-w: clamp(170px, min(56vw, 27vh), 280px); }
  .steps__widget { display: none; }
  .split { grid-template-columns: 1fr; row-gap: 1rem; }
  .split__body { padding-top: 2rem; }
  .download__actions { flex-direction: column; gap: 2rem; }
  .qr { display: none; }
  .footer__row { grid-template-columns: 1fr; }
  .footer__by { justify-self: start; }
}

/* ---------- Reduced motion ----------
   main.js only adds .motion when motion is welcome, so the static layout above is the reduced one. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}


/* Short phones (iPhone SE and the like): a smaller phone so a whole step fits one screen. */
@media (max-width: 900px) and (max-height: 740px) {
  .steps__device { --phone-w: clamp(150px, 24vh, 240px); }
  .step-progress { margin-bottom: .75rem; }
  .motion .step p { font-size: .9375rem; }
  .motion .steps { row-gap: 1rem; }
}