/* Mira — Field Notes, ported to the web and opened up for daylight.
   The factor hues come from Shared/Theme.swift; everything else (the tints,
   the block rhythm, the scale) is the site's own. See DESIGN.md.

   The site is light only. The app follows the system; a page you read once
   does not need to. */

:root {
  color-scheme: light;

  /* Paper */
  --canvas: #FCFBF9;
  --surface: #FFFFFF;
  --raised: #F7F4EF;
  --hairline: #E9E3DA;
  --hairline-soft: #F0EBE3;

  /* The full-bleed section blocks. Each is its hue let most of the way down
     to paper, so they read as one family at one weight. Every coloured block
     on the page uses a different one; the hero and the closing band are the
     matching bookends and use the four-hue wash instead. */
  --block-mint: #EDF6F3;
  --block-lilac: #F2F0FC;
  --block-sky: #ECF3FB;
  --block-butter: #FBF4E6;

  /* Kept as the mint block's old name. */
  --alt-ground: #EDF6F3;

  /* Ink */
  --ink: #1F1B18;
  --ink-2: #5B534B;
  --ink-3: #8E857A;

  /* The four hues. Three are the app's factors; sky is the site's, and it
     only ever carries the privacy material. */
  --violet: #5B46D9;
  --teal: #0E8C7E;
  --amber: #B87A12;
  --sky: #2C72C4;

  --violet-tint: #EFECFD;
  --teal-tint: #DFF2EE;
  --amber-tint: #FBF1DB;
  --sky-tint: #E9F1FC;

  --violet-ink: #3C2BA6;
  --teal-ink: #0A6B60;
  --amber-ink: #8A5A08;
  --sky-ink: #1F558F;

  /* Device hardware in the mockups. Not a design token. */
  --bezel: #17130F;

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --r-button: 999px;
  --r-card: 20px;
  --r-sheet: 28px;
  --r-block: 36px;

  /* Type scale — base 18px, with a wide gap between display and body so the
     page has a loud voice and a quiet one and not much in between. */
  --t-fine: 0.83rem;
  --t-cap: 0.94rem;
  --t-body: 1rem;
  --t-lead: clamp(1.15rem, 1.6vw, 1.3rem);
  --t-card: clamp(1.3rem, 2vw, 1.55rem);
  --t-h3: clamp(1.5rem, 2.6vw, 2rem);
  --t-h2: clamp(2.15rem, 5vw, 3.4rem);
  --t-display: clamp(2.6rem, 6.5vw, 4.65rem);

  /* The sticky header's height — the pinned phone parks below it. */
  --header-h: 5.6rem;

  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  --lift: 0 1px 2px rgba(31, 27, 24, .04), 0 14px 34px -14px rgba(31, 27, 24, .14);
  --lift-hi: 0 2px 6px rgba(31, 27, 24, .05), 0 32px 64px -22px rgba(31, 27, 24, .26);

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

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* The page is one sheet of washed paper from the masthead to the footer.
     Four hues drift down it at the edge of visibility, in the same order and
     at the same weight as the hero's; the colour blocks are opaque tints laid
     on top of it, and every paper section is simply this ground showing
     through. Nothing here repeats or tiles — the gradients are positioned as
     a percentage of the document, so they stretch with the page. */
  background-color: var(--canvas);
  background-image:
    radial-gradient(52rem 34rem at 88% 11%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 64%),
    radial-gradient(46rem 32rem at 4% 25%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 64%),
    radial-gradient(42rem 30rem at 92% 38%, color-mix(in srgb, var(--teal) 5%, transparent), transparent 64%),
    radial-gradient(48rem 34rem at 6% 52%, color-mix(in srgb, var(--amber) 6%, transparent), transparent 64%),
    radial-gradient(44rem 30rem at 94% 64%, color-mix(in srgb, var(--violet) 6%, transparent), transparent 64%),
    radial-gradient(44rem 32rem at 4% 78%, color-mix(in srgb, var(--sky) 6%, transparent), transparent 64%),
    radial-gradient(40rem 28rem at 52% 86%, color-mix(in srgb, var(--amber) 5%, transparent), transparent 66%),
    radial-gradient(46rem 32rem at 92% 94%, color-mix(in srgb, var(--violet) 6%, transparent), transparent 64%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.col { max-width: 50rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-button);
  padding: 0.55rem 1rem;
}

/* ── Header ─────────────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease), background-color 250ms var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  header { backdrop-filter: saturate(1.5) blur(14px); }
}
header.detached { border-bottom-color: var(--hairline); }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* The app icon itself, rounded the way iOS rounds it. It is full-bleed
   colour, so it carries no paper behind it — just the corner and a little
   lift, and a hairline of its own ink to keep the edge from vibrating. */
.appmark {
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.68rem;
  box-shadow: var(--lift), inset 0 0 0 1px rgba(31, 27, 24, .07);
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  font-size: var(--t-body);
  color: var(--ink-2);
}

/* The header CTA is absent until the hero has gone by, then it arrives. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--violet);
  color: #FFFFFF;
  border-radius: var(--r-button);
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  font-size: var(--t-body);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-0.35rem);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), background-color 180ms var(--ease);
}
header.detached .nav-cta { opacity: 1; transform: none; pointer-events: auto; }
.nav-cta:hover { background: var(--violet-ink); }
.nav-cta svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

/* Four washes at the edge of visibility, behind the entry. This is the one
   place the hues appear away from a dot. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 135%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(44rem 30rem at 80% 12%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 62%),
    radial-gradient(36rem 26rem at 98% 58%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 64%),
    radial-gradient(34rem 24rem at 56% 84%, color-mix(in srgb, var(--amber) 15%, transparent), transparent 66%),
    radial-gradient(30rem 22rem at 8% 26%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 66%);
}
.hero > * { position: relative; z-index: 1; }

.hero-layout { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) {
  .hero-layout { grid-template-columns: 1.04fr 0.96fr; }
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.023em;
  margin: 0 0 1.3rem;
  max-width: 15ch;
  text-wrap: balance;
}

.lede {
  font-size: var(--t-lead);
  color: var(--ink-2);
  max-width: 32rem;
  margin: 0 0 2.1rem;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.beta-note {
  font-size: var(--t-cap);
  color: var(--ink-2);
  margin: 1.2rem 0 0;
  max-width: 30rem;
}

/* ── The hero entry: one day, typeset ───────────────────── */

.entry-stack { position: relative; }

.entry {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
  box-shadow: var(--lift-hi);
  transform: rotate(-1.1deg);
}
/* The page underneath — one hairline edge, so it reads as a stack. */
.entry-stack::before {
  content: "";
  position: absolute;
  inset: 0.55rem -0.5rem -0.55rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  background: var(--raised);
  transform: rotate(1.4deg);
  z-index: -1;
}

.entry-date {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-weight: 600;
  margin: 0 0 1.2rem;
}

.entry ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.entry li {
  display: grid;
  grid-template-columns: 0.72rem max-content 1fr;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
}

/* Factor color appears only beside its own dot. */
.dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--factor, var(--ink-2));
  transform: translateY(0.1rem);
}

.f-feelings { --factor: var(--violet); }
.f-body     { --factor: var(--teal); }
.f-around   { --factor: var(--amber); }

/* Intensity, as opacity. Class-based, not inline styles — the CSP does not
   allow a style attribute. */
.lv-25 { opacity: .25; }
.lv-40 { opacity: .4; }
.lv-60 { opacity: .6; }
.lv-80 { opacity: .8; }
.lv-100 { opacity: 1; }

.entry .word { font-size: var(--t-body); min-width: 0; }

.entry .amount {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-cap);
  color: var(--ink-2);
  white-space: nowrap;
}

@media (max-width: 29rem) {
  .entry li { grid-template-columns: 0.72rem 1fr; }
  .entry .amount { grid-column: 2; }
}

.entry-context {
  display: grid;
  grid-template-columns: 0.72rem 1fr;
  align-items: baseline;
  gap: 0.8rem;
  margin: 1.3rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-cap);
  color: var(--ink-2);
}

.entry-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  margin: 1.2rem 0 0;
}

/* The page-load sequence: the day arrives a line at a time, and each dot
   inks in to its real intensity. Runs once, then holds. */
.js .entry-line {
  opacity: 0;
  animation: settle 620ms var(--ease) forwards;
}
.js .entry-line .dot { animation: ink 520ms var(--ease) backwards; }

/* Scoped under .js so they out-specify the `animation` shorthand above,
   which would otherwise reset the delay to zero. */
.js .d0 { animation-delay: 260ms; }
.js .d1 { animation-delay: 390ms; }
.js .d2 { animation-delay: 520ms; }
.js .d3 { animation-delay: 650ms; }
.js .d4 { animation-delay: 780ms; }
.js .d5 { animation-delay: 910ms; }
.js .d0 .dot { animation-delay: 420ms; }
.js .d1 .dot { animation-delay: 550ms; }
.js .d2 .dot { animation-delay: 680ms; }
.js .d3 .dot { animation-delay: 810ms; }
.js .d4 .dot { animation-delay: 940ms; }

@keyframes settle {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes ink {
  from { opacity: 0; transform: translateY(0.1rem) scale(.4); }
}

/* The intensity ramp — the app's own ornament, used once here. */
.ramp {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.4rem 0 0;
  padding-inline: 0.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-cap);
  color: var(--ink-2);
}
.ramp .dots { display: flex; gap: 0.34rem; }
.ramp .dot { transform: none; }

/* ── Buttons ────────────────────────────────────────────── */

.app-store {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--r-button);
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  font-size: var(--t-body);
  box-shadow: var(--lift);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.app-store:hover { transform: translateY(-2px); box-shadow: var(--lift-hi); }
.app-store:active { transform: scale(0.985); }
.app-store svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.app-store .stack { display: grid; line-height: 1.15; text-align: left; }
.app-store .small { font-size: var(--t-fine); opacity: .74; }

/* Desktop visitors can't install from a desktop — give them the phone. */
.qr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-cap);
  color: var(--ink-2);
  font-family: var(--serif);
  font-style: italic;
}
.qr img {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: #FFFFFF;
  padding: 4px;
}
.qr span { max-width: 8.5rem; line-height: 1.35; }
@media (max-width: 40rem) { .qr { display: none; } }

/* ── Section rhythm ─────────────────────────────────────
   Sections are blocks of color, not rules on a single ground. Adjacent
   blocks differ, so no divider is needed between them. */

section { padding-block: clamp(3.5rem, 8vw, 6rem); }

/* Paper and a colour block, alternating all the way down — and no two
   coloured blocks share a hue, so a section is placeable by its ground
   alone. Sky carries the privacy material, as it does everywhere else. */
/* Colour spots on the bare-paper sections. The document ground alone leaves
   long white stretches between the colour blocks, so each paper section also
   carries a couple of soft ombré spots inside it, in the same hues and at the
   same weight as everything else. They are masked in at the top and out at
   the bottom so a spot grows out of the ground instead of drawing an edge
   across it. No `overflow: hidden` here — the tour's pinned phone is sticky,
   and a clipping ancestor would kill it — so the pseudo-element is inset to
   the section's own box. */
.wash { position: relative; }
.wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11rem, #000 calc(100% - 11rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 11rem, #000 calc(100% - 11rem), transparent);
}
.wash > * { position: relative; z-index: 1; }

/* The tour is four screens tall — it needs the most colour on the page, or the
   pinned phone reads as floating on nothing for a very long scroll. Nine spots
   spread the whole way down, alternating along the edges with lighter ones
   through the middle so the column the phone travels down is never bare.

   Only two hues here, and light. Four hues at strength average out to
   grey-beige, and paper that reads as beige is no longer the quiet half of the
   alternation — the tint blocks stop being the colour beats. The paper
   sections carry a tinge; the blocks carry the colour. */
.wash-tour::before {
  background:
    radial-gradient(40rem 26rem at 1% 5%,  color-mix(in srgb, var(--teal) 8%, transparent), transparent 64%),
    radial-gradient(30rem 20rem at 62% 13%, color-mix(in srgb, var(--violet) 5%, transparent), transparent 66%),
    radial-gradient(36rem 24rem at 99% 23%, color-mix(in srgb, var(--violet) 8%, transparent), transparent 64%),
    radial-gradient(32rem 22rem at 28% 34%, color-mix(in srgb, var(--teal) 5%, transparent), transparent 66%),
    radial-gradient(34rem 24rem at 2% 46%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 64%),
    radial-gradient(30rem 22rem at 97% 57%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 66%),
    radial-gradient(32rem 22rem at 42% 70%, color-mix(in srgb, var(--violet) 5%, transparent), transparent 66%),
    radial-gradient(36rem 26rem at 1% 80%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 64%),
    radial-gradient(34rem 24rem at 98% 93%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 64%);
}

.wash-reviews::before {
  background:
    radial-gradient(34rem 24rem at 4% 18%, color-mix(in srgb, var(--violet) 8%, transparent), transparent 64%),
    radial-gradient(32rem 22rem at 96% 80%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 66%);
}
.wash-faq::before {
  background:
    radial-gradient(34rem 24rem at 97% 12%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 64%),
    radial-gradient(32rem 22rem at 2% 74%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 66%);
}

.block-mint   { background: var(--block-mint); }
.block-lilac  { background: var(--block-lilac); }
.block-sky    { background: var(--block-sky); }
.block-butter { background: var(--block-butter); }
.alt { background: var(--alt-ground); }

/* Kept for the prose pages, which don't alternate. */
.on-lilac  { background: var(--violet-tint); }
.on-mint   { background: var(--teal-tint); }
.on-butter { background: var(--amber-tint); }
.on-sky    { background: var(--sky-tint); }
.on-white  { background: var(--surface); }

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 1rem;
  max-width: 19ch;
  text-wrap: balance;
}

h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-lead);
  margin: 0 0 0.5rem;
}

p { max-width: var(--measure); }

.quiet { font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.section-lede { font-size: var(--t-lead); color: var(--ink-2); max-width: 38rem; }

/* ── The three deciding features ────────────────────────
   Bigger than a strip: these are the reasons people install it, so they get
   card weight, a heading-sized line each, and room to breathe. */

.strip { padding-block: clamp(3rem, 6.5vw, 4.5rem); }
.strip-grid {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 54rem) {
  .strip-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.strip p {
  margin: 0;
  max-width: none;
  display: grid;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  box-shadow: var(--lift);
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.5;
}
.strip b {
  font-family: var(--serif);
  font-size: var(--t-card);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.strip svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.strip .s-lock { color: var(--sky); }
.strip .s-eye { color: var(--violet); }
.strip .s-watch { color: var(--teal); }

/* ── Device frames ──────────────────────────────────────── */

.phone {
  --w: 17.5rem;
  width: var(--w);
  padding: 0.55rem;
  background: var(--bezel);
  border-radius: 2.7rem;
  box-shadow: var(--lift-hi), inset 0 0 0 1px rgba(255, 255, 255, .1);
  margin-inline: auto;
}
.phone img, .phone .screen { border-radius: 2.2rem; display: block; width: 100%; }

.watch {
  --w: 13rem;
  width: var(--w);
  padding: 0.5rem;
  background: var(--bezel);
  border-radius: 2.5rem;
  box-shadow: var(--lift-hi), inset 0 0 0 1px rgba(255, 255, 255, .1);
  margin-inline: auto;
  position: relative;
}
.watch img { border-radius: 2.1rem; }
/* The digital crown, so the frame reads as a watch and not a small phone. */
.watch::after {
  content: "";
  position: absolute;
  right: -0.22rem;
  top: 30%;
  width: 0.28rem;
  height: 1.5rem;
  border-radius: 0.14rem;
  background: var(--bezel);
  filter: brightness(1.9);
}

/* ── The pinned tour ────────────────────────────────────── */

.demo { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 4rem); }
.demo-grid { display: grid; gap: 2.5rem; }

@media (min-width: 62rem) {
  .demo-grid {
    grid-template-columns: 1fr minmax(auto, 21rem);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  /* A figure sharing the two-column grid sits with its copy, not above it. */
  .demo-grid > figure { align-self: center; }
  .demo-stage {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* The screens live in one stack and cross-fade between them. */
.screens { position: relative; }
.screens .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
.screens .slide.on { opacity: 1; }
.screens .slide:first-child { position: relative; }

.steps { display: grid; }
.step {
  padding-block: clamp(1.1rem, 3.5vh, 2.25rem);
  display: grid;
  align-content: center;
}
@media (min-width: 62rem) { .step { min-height: 60vh; } }

/* The icon chip carries the factor color for the screen it introduces. */
.chip {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  background: var(--chip-bg, var(--violet-tint));
  color: var(--chip-fg, var(--violet-ink));
}
.chip svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c-feelings { --chip-bg: var(--violet-tint); --chip-fg: var(--violet-ink); }
.c-body     { --chip-bg: var(--teal-tint);   --chip-fg: var(--teal-ink); }
.c-around   { --chip-bg: var(--amber-tint);  --chip-fg: var(--amber-ink); }
.c-sky      { --chip-bg: var(--sky-tint);    --chip-fg: var(--sky-ink); }

.step-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.9rem;
  max-width: 17ch;
  text-wrap: balance;
}
.step p { color: var(--ink-2); margin: 0 0 0.95rem; }
.step p:last-child { margin-bottom: 0; }

/* On a narrow screen there is nothing to pin: each step carries its own
   screenshot and the stack is a plain sequence. */
.step-shot { margin: 0 0 1.8rem; }
@media (min-width: 62rem) { .step-shot { display: none; } }
@media (max-width: 61.99rem) { .demo-stage { display: none; } }

/* ── The scale, drawn live ──────────────────────────────── */

/* Graphic on the left, the words on the right. */
.scale-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
  .scale-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}
.scale-copy h2 { margin-top: 0; }
.scale-copy p { color: var(--ink-2); margin: 0 0 1.1rem; }
.scale-copy .quiet { margin-bottom: 0; }

.figure-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-block);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: var(--lift);
}
.figure-card svg { width: 100%; height: auto; overflow: visible; }
.axis-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-cap);
  color: var(--ink-2);
  margin: 1rem 0 0;
}

.trace {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.grid-line { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 5; }
.area { fill: var(--violet); opacity: .09; }

.js .drawable .trace { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .drawable.seen .trace { animation: draw 1700ms var(--ease) forwards; }
.js .drawable .area { opacity: 0; }
.js .drawable.seen .area { animation: wash 900ms var(--ease) 700ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wash { to { opacity: .09; } }

.ramp-figure { display: grid; gap: 0.8rem; margin-top: 2.2rem; }
.ramp-figure .bar { display: flex; gap: 0.55rem; align-items: flex-end; }
.ramp-figure .bar span {
  flex: 1;
  height: 3rem;
  border-radius: 10px;
  background: var(--teal);
  transform-origin: bottom;
}
.js .drawable .bar span { transform: scaleY(.12); }
.js .drawable.seen .bar span { animation: grow 620ms var(--ease) forwards; }
.js .drawable.seen .bar .b0 { animation-delay: 0ms; }
.js .drawable.seen .bar .b1 { animation-delay: 90ms; }
.js .drawable.seen .bar .b2 { animation-delay: 180ms; }
.js .drawable.seen .bar .b3 { animation-delay: 270ms; }
.js .drawable.seen .bar .b4 { animation-delay: 360ms; }
@keyframes grow { to { transform: none; } }
.ramp-figure .words {
  display: flex;
  justify-content: space-between;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-cap);
  color: var(--ink-2);
  max-width: none;
  margin: 0;
}

/* ── Privacy ────────────────────────────────────────────── */

.leaves { margin: 2.5rem 0 0; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .leaves { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.leaves > div {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 1.7rem;
}
.leaves dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-card);
  line-height: 1.15;
  margin-bottom: 0.7rem;
}
.leaves dd { margin: 0; color: var(--ink-2); }
.privacy-more { margin-top: 1.9rem; }

/* ── Reviews ────────────────────────────────────────────── */

.reviews { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .reviews { grid-template-columns: 1fr 1fr; } }
.review {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 1.9rem;
  margin: 0;
}
.review blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-card);
  line-height: 1.42;
  letter-spacing: -0.008em;
}
.review blockquote p { max-width: none; margin: 0; }
.review figcaption {
  margin-top: 1.2rem;
  font-size: var(--t-cap);
  color: var(--ink-2);
}

/* ── FAQ ────────────────────────────────────────────────── */

.faq { margin-top: 2.2rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.75rem 1.25rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: var(--t-card);
  line-height: 1.25;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.75rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1.75px solid var(--ink-3);
  border-bottom: 1.75px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 250ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { overflow: hidden; }
.faq .answer p { color: var(--ink-2); margin: 0 0 1.3rem; }
.js .faq details[open] .answer { animation: open 320ms var(--ease); }
@keyframes open {
  from { opacity: 0; transform: translateY(-0.35rem); }
}

/* ── Closing band ───────────────────────────────────────── */

/* The last block is the first block: paper, with the hero's four washes. */
.band {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.band::before {
  content: "";
  position: absolute;
  inset: -25% -10%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 24%, #000 44%);
  mask-image: linear-gradient(to bottom, transparent 24%, #000 44%);
  background:
    radial-gradient(40rem 26rem at 20% 14%, color-mix(in srgb, var(--violet) 15%, transparent), transparent 64%),
    radial-gradient(34rem 24rem at 4% 72%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 66%),
    radial-gradient(32rem 22rem at 52% 96%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 66%),
    radial-gradient(34rem 24rem at 92% 28%, color-mix(in srgb, var(--sky) 13%, transparent), transparent 66%);
}
.band > .wrap { position: relative; z-index: 1; }
.band h2 {
  margin-inline: auto;
  font-size: var(--t-display);
  line-height: 1.03;
  letter-spacing: -0.022em;
  max-width: 15ch;
}
.band > .wrap > p { margin: 0 auto 2.2rem; color: var(--ink-2); font-size: var(--t-lead); }
.band .cta-row { justify-content: center; }

/* ── Reveals ────────────────────────────────────────────── */

/* Used on the things worth arriving — device frames, the drawn figure, the
   two review cards. Not on every section. */
.js .reveal { opacity: 0; transition: opacity 700ms var(--ease), transform 700ms var(--ease); transform: translateY(0.9rem); }
.js .reveal.seen { opacity: 1; transform: none; }
.js .reveal.r1 { transition-delay: 110ms; }

/* ── Prose pages (privacy, support) ─────────────────────── */

.prose { padding-block: clamp(2.5rem, 6vw, 3.5rem) 1rem; }
.prose h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); margin-bottom: 0.6rem; max-width: 20ch; }
.prose h2 { margin-top: 3rem; font-size: var(--t-h3); max-width: 34ch; }
.prose h3 { margin-top: 2rem; }
.prose p, .prose li { color: var(--ink-2); max-width: var(--measure); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { padding-left: 1.1rem; max-width: var(--measure); }
.prose li { margin-bottom: 0.5rem; }
.prose .updated {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  margin-bottom: 2rem;
}
.prose blockquote {
  margin: 1.6rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--sky-tint);
  border-radius: var(--r-card);
  font-family: var(--serif);
  font-style: italic;
  color: var(--sky-ink);
}
.prose blockquote p { margin: 0; color: inherit; }
.prose blockquote p + .stacked { margin-top: 0.6rem; }

/* ── Footer ─────────────────────────────────────────────── */

footer {
  /* No paper of its own — the page's wash runs out under the footer too, and
     only the hairline says where the page stopped. */
  border-top: 1px solid var(--hairline);
  padding-block: 2.5rem 3.25rem;
  color: var(--ink-2);
  font-size: var(--t-cap);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}
footer nav { display: flex; flex-wrap: wrap; gap: 1.35rem; }

/* ── Reduced motion: the static page is the whole page ──── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .js .entry-line,
  .js .reveal { opacity: 1; transform: none; }
  .js .drawable .trace { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .drawable .area { opacity: .09; }
  .js .drawable .bar span { transform: none; }
  .entry { transform: none; }
  .entry-stack::before { display: none; }
}