/* YIP — home page for YIP Note (tablets) and YIP PDF (Windows).
   The visitor picks a device at the top and the page tells that app's story. YIP Note: two
   tablets float in a dark room; then a pen highlights, circles and writes as you scroll, and a
   star ties a note to its line. YIP PDF: a court bundle is merged, numbered and stamped, and the
   YIP crocodile reads it. Night for the stage, paper and cream for the documents, highlighter
   yellow and red tape for the marks. */

@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-latin-standard-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-latin-standard-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-latin-standard-normal.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #090d16; /* the room the tablets float in */
  --night-2: #101624;
  --night-3: #182032;
  --mist: #e8ebf0; /* the desk under the documents */
  --paper: #ffffff;
  --ink: #f3f5f9;
  --ink-dim: #9ba5b7;
  --ink-paper: #16181d;
  --ink-paper-dim: #5a6170;
  --hl: #f6d55c; /* highlighter */
  --hl-paper: rgba(246, 213, 92, 0.62);
  --tape: #c2323a; /* red tape: the app's own colour */
  --tape-bright: #e5484f;
  --star: #f5b942;
  --pen-ink: #1d3f8f;
  --select: rgba(64, 132, 246, 0.24);
  --line: rgba(243, 245, 249, 0.12);
  --display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: max(16px, 5vw);
  --bar: 56px;
  --pdf: #b3262d; /* YIP PDF's red: fixed, whatever colour YIP Note's picker shows */
  --cream: #f8f3ed; /* the YIP crocodile's paper */
  --cream-2: #ece3d7;
  --ink-cream: #2a2420;
  --ink-cream-dim: #675c53;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--bar);
}
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--hl);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink-paper);
  border-radius: 10px;
}
.skip:focus {
  top: 12px;
}

/* ── Top bar ──────────────────────────────────────────────────────────────────────────── */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  background: rgba(9, 13, 22, 0);
  transition: background 300ms ease;
}
.bar.is-solid {
  background: rgba(9, 13, 22, 0.94);
  box-shadow: 0 1px 0 var(--line);
}
.bar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.15rem;
  text-decoration: none;
  min-height: 44px;
}
.bar-brand img {
  border-radius: 7px;
}
.bar-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.bar-links a {
  font-size: 0.9rem;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 12px 12px;
  min-height: 44px;
  transition: color 150ms ease;
}
.bar-links a:hover {
  color: var(--ink);
}
.bar-cta {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--night);
  transition: scale 120ms ease;
}
.bar-cta:active {
  scale: 0.96;
}
@media (max-width: 760px) {
  .bar-links {
    display: none;
  }
  .bar-cta {
    margin-left: auto;
  }
}

/* ── Download buttons ─────────────────────────────────────────────────────────────────── */

.get {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.get--center {
  justify-content: center;
}
.get-play,
.get-soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 22px 8px 18px;
  border-radius: 16px;
  text-decoration: none;
  line-height: 1.15;
  text-align: left;
}
.get-play {
  background: var(--paper);
  color: var(--ink-paper);
  box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.35);
  transition:
    scale 140ms ease,
    box-shadow 200ms ease;
}
.get-play:hover {
  box-shadow: 0 14px 40px -12px rgba(255, 255, 255, 0.5);
}
.get-play:active {
  scale: 0.97;
}
.get-play svg {
  width: 22px;
  height: 22px;
  fill: var(--tape);
}
.get small {
  display: block;
  font-size: 0.72rem;
  opacity: 0.7;
}
.get span > span,
.get-play > span,
.get-soon > span {
  font-size: 1.05rem;
  font-weight: 600;
}
.get-soon {
  border: 1px solid var(--line);
  color: var(--ink-dim);
}

/* ── Tablets (drawn in CSS; the screens are real screenshots) ─────────────────────────── */

.tablet {
  position: relative;
  border-radius: var(--r);
  padding: var(--bezel);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.16), transparent 22%) border-box,
    var(--frame);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 2px 0 -1px rgba(255, 255, 255, 0.08),
    0 50px 90px -40px rgba(0, 0, 0, 0.9);
}
.tablet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  border-radius: calc(var(--r) - var(--bezel) * 0.6);
  background: #e9ecf1;
}
.tablet::after {
  /* the glass: one soft sheen that slides as the tablet turns */
  content: '';
  position: absolute;
  inset: var(--bezel);
  border-radius: calc(var(--r) - var(--bezel) * 0.6);
  background: linear-gradient(
    115deg,
    transparent calc(30% + var(--sheen, 0%)),
    rgba(255, 255, 255, 0.13) calc(42% + var(--sheen, 0%)),
    transparent calc(54% + var(--sheen, 0%))
  );
  pointer-events: none;
}
.cam {
  position: absolute;
  left: 50%;
  top: calc(var(--bezel) * 0.5 - 2.5px);
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4a6a, #05070b 70%);
}
.tablet--android {
  --r: clamp(14px, 1.9vw, 26px);
  --bezel: clamp(6px, 0.85vw, 12px);
  --frame: linear-gradient(160deg, #262b35, #0b0d12 55%, #1e222b);
  aspect-ratio: 1600 / 1000;
}
.tablet--ipad {
  --r: clamp(16px, 2.2vw, 32px);
  --bezel: clamp(8px, 1.15vw, 16px);
  --frame: linear-gradient(160deg, #7c828c, #3a3e46 30%, #1b1d22 70%, #50555e);
  aspect-ratio: 1600 / 1112;
}
.tablet--ipad::before {
  /* a brushed-metal rim */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(210, 216, 226, 0.35);
  pointer-events: none;
}

/* ── 1. Hero ──────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 190vh;
  height: 190svh;
  --p: 0; /* scroll progress through the hero, 0–1 (set by home.js) */
  --mx: 0; /* pointer, -1–1 */
  --my: 0;
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--vh, 100svh);
  min-height: 560px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: calc(var(--bar) + clamp(16px, 5vh, 56px)) var(--gutter) 0;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 72%, rgba(194, 50, 58, 0.18), transparent 70%),
    radial-gradient(60% 50% at 70% 30%, rgba(70, 100, 170, 0.16), transparent 70%), var(--night);
}
.hero-copy {
  text-align: center;
  max-width: 820px;
  z-index: 2;
  opacity: calc(1 - var(--p) * 2.4);
  translate: 0 calc(var(--p) * -80px);
}
.hero-title {
  font-size: clamp(3rem, 1rem + 5.6vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.hero-line {
  text-wrap: balance;
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero-sub {
  margin: 14px auto 0;
  max-width: 34em;
  color: var(--ink-dim);
}
.hero .get {
  justify-content: center;
}
.hero-scroll {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  display: grid;
  justify-items: center;
  gap: 6px;
  opacity: calc(1 - var(--p) * 6);
}
.hero-scroll span {
  width: 1px;
  height: 28px;
  background: linear-gradient(var(--ink-dim), transparent);
  animation: drip 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes drip {
  0% {
    scale: 1 0;
  }
  50% {
    scale: 1 1;
  }
  100% {
    scale: 1 1;
    opacity: 0;
  }
}

.stage {
  position: relative;
  width: min(1180px, 100%);
  height: 100%;
  min-height: 300px;
  perspective: 1800px;
  perspective-origin: 50% 30%;
  margin-top: clamp(12px, 4vh, 40px);
  container-type: size;
}
.glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 70%;
  aspect-ratio: 2;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229, 72, 79, 0.25), transparent);
  filter: blur(30px);
}
.slot {
  position: absolute;
  margin: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.slot figcaption {
  margin-top: 26px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-dim);
  opacity: calc(1 - var(--p) * 3);
}
.slot--ipad {
  width: min(50cqw, 104cqh);
  right: max(3cqw, 50cqw - 70cqh);
  top: 0;
  transform: translate3d(
      calc(var(--p) * 26vw),
      calc(var(--p) * -12vh),
      calc(-140px - var(--p) * 300px)
    )
    rotateX(calc(9deg + var(--my) * -3deg)) rotateY(calc(-20deg + var(--mx) * 5deg)) rotateZ(2deg);
  opacity: calc(1 - var(--p) * 1.1);
}
.slot--android {
  width: min(60cqw, 122cqh);
  left: max(2cqw, 50cqw - 86cqh);
  top: 9cqh;
  transform: translate3d(calc(var(--p) * 22%), calc(var(--p) * -36cqh), calc(var(--p) * 260px))
    rotateX(calc(9deg - var(--p) * 9deg + var(--my) * -3deg))
    rotateY(calc(16deg - var(--p) * 16deg + var(--mx) * 5deg))
    rotateZ(calc(-2deg + var(--p) * 2deg));
}
.slot--ipad .tablet {
  --sheen: calc(var(--mx) * -12%);
}
.slot--android .tablet {
  --sheen: calc(var(--mx) * 12% + var(--p) * 30%);
}
.bob {
  animation: bob 7s ease-in-out infinite alternate;
}
.slot--ipad .bob {
  animation-duration: 8.5s;
  animation-delay: -3s;
}
@keyframes bob {
  from {
    translate: 0 -10px;
  }
  to {
    translate: 0 12px;
  }
}
.slot::after {
  /* the shadow on the floor, smaller when the tablet rises */
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -30px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
  filter: blur(6px);
  animation: shadow 7s ease-in-out infinite alternate;
  opacity: calc(1 - var(--p) * 2);
}
.slot--ipad::after {
  animation-duration: 8.5s;
  animation-delay: -3s;
}
@keyframes shadow {
  from {
    scale: 0.82;
  }
  to {
    scale: 1;
  }
}

/* the one orchestrated moment: the tablets rise into the room on arrival */
.is-arriving .slot--android .bob,
.is-arriving .slot--ipad .bob {
  opacity: 0;
}
.has-arrived .slot .tablet {
  animation: arrive 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.has-arrived .slot--ipad .tablet {
  animation-delay: 140ms;
}
@keyframes arrive {
  from {
    opacity: 0;
    translate: 0 90px;
    scale: 0.94;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (max-width: 699px), (orientation: portrait) and (max-width: 1100px) {
  .hero-sticky {
    grid-template-rows: auto 1fr;
  }
  .stage {
    perspective: 1100px;
  }
  .slot--ipad {
    width: min(82cqw, 100cqh);
    right: -8cqw;
    top: 4cqh;
  }
  .slot--android {
    width: min(98cqw, 130cqh);
    left: -4cqw;
    top: 36cqh;
  }
  .slot figcaption {
    display: none;
  }
  .get-play,
  .get-soon {
    padding: 8px 16px 8px 14px;
  }
}
@media (max-height: 640px) {
  .hero-sub {
    display: none;
  }
  .hero .get {
    margin-top: 16px;
  }
}

/* ── Chapters played by scrolling (2 and 3) ───────────────────────────────────────────── */

.chapter {
  position: relative;
  height: 360vh;
  --p: 0;
}
.chapter-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: var(--vh, 100svh);
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) 1.4fr;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: calc(var(--bar) + 16px) var(--gutter) 24px;
  overflow: hidden;
}
.chapter--mark .chapter-sticky {
  background: var(--mist);
  color: var(--ink-paper);
}
.chapter--link .chapter-sticky {
  background: linear-gradient(var(--night-2), var(--night));
}
.chapter-copy {
  align-self: center;
  max-width: 30rem;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.steps li {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 420ms ease,
    translate 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.steps li.is-on {
  opacity: 1;
  translate: 0 0;
}
.steps h3 {
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.steps p {
  margin-top: 14px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  color: var(--ink-dim);
  max-width: 26em;
}
.chapter--mark .steps p,
.chapter--mark .try-hint {
  color: var(--ink-paper-dim);
}
.try-hint {
  margin-top: 26px;
  font-size: 0.9rem;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity 400ms ease;
}
.is-done .try-hint {
  opacity: 1;
}

/* the page that gets marked */
.paper-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.paper {
  position: relative;
  width: min(700px, 100%);
  padding: clamp(24px, 4vw, 52px) clamp(22px, 4.5vw, 60px) clamp(22px, 3vw, 36px);
  padding-right: clamp(22px, 15vw, 230px);
  background: var(--paper);
  color: var(--ink-paper);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(20, 24, 33, 0.08),
    0 30px 60px -30px rgba(20, 24, 33, 0.35);
  font-family: var(--display);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  line-height: 1.75;
}
.paper-head {
  font-family: var(--body);
  font-size: 0.75rem;
  color: var(--ink-paper-dim);
  margin-bottom: 18px;
}
.paper h4 {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.paper p + p {
  margin-top: 10px;
}
.paper b {
  font-weight: 600;
  margin-right: 4px;
}
.paper .s {
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 2px;
  background: linear-gradient(var(--hl-paper), var(--hl-paper)) no-repeat 0 60% / 0% 78%;
  transition: background-size 380ms cubic-bezier(0.3, 0.7, 0.2, 1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.paper .s.is-hl {
  background-size: 100% 78%;
}
.paper-fine {
  margin-top: 22px !important;
  font-family: var(--body);
  font-size: 0.7rem;
  color: var(--ink-paper-dim);
}
.ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.ink-hl i {
  position: absolute;
  background: var(--hl-paper);
  mix-blend-mode: multiply;
  border-radius: 3px 5px 4px 3px;
  transform-origin: left center;
  scale: 0 1;
}
.ink-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ink-circle {
  fill: none;
  stroke: var(--tape);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.ink-hand path {
  fill: none;
  stroke: var(--pen-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pen {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
  --lift: 0;
  --cap: var(--hl);
}
.pen-body {
  position: absolute;
  width: 30px;
  height: 195px;
  left: -15px;
  bottom: 0;
  transform-origin: 50% 100%;
  rotate: 32deg;
  translate: 0 calc(var(--lift) * -14px);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  transition: translate 160ms ease;
}
.pen-tip {
  fill: var(--cap);
  transition: fill 240ms ease;
}
.pen-band,
.pen-cap {
  fill: var(--cap);
  transition: fill 240ms ease;
}
.pen-shadow {
  position: absolute;
  width: 26px;
  height: 160px;
  left: 4px;
  bottom: -6px;
  border-radius: 13px;
  background: rgba(20, 24, 33, 0.18);
  filter: blur(calc(4px + var(--lift) * 5px));
  transform-origin: 50% 100%;
  rotate: 48deg;
  translate: calc(var(--lift) * 20px) calc(var(--lift) * 6px);
  opacity: calc(0.9 - var(--lift) * 0.4);
  transition: translate 160ms ease;
}

/* the desk: a page, a notes board and the thread between them */
.desk {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  height: min(72vh, 600px);
  padding: 14px;
  border-radius: 22px;
  background: #e3e7ee;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.8);
  color: var(--ink-paper);
}
.desk-page,
.desk-board {
  position: relative;
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
}
.desk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  font-size: 0.8rem;
  border-bottom: 1px solid #e5e8ee;
  color: var(--ink-paper-dim);
}
.desk-bar span:first-child {
  font-weight: 600;
  color: var(--ink-paper);
}
.desk-pg b {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-paper);
}
.desk-scroll {
  position: absolute;
  inset: 40px 0 0;
  overflow: hidden;
}
.desk-inner {
  padding: 22px 28px 22px 34px;
  font-family: var(--display);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.12rem);
  line-height: 1.7;
  will-change: transform;
}
.desk-inner h4 {
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.desk-inner p + p {
  margin-top: 10px;
}
.desk-line {
  border-radius: 2px;
  transition: background-color 300ms ease;
}
.desk-line.is-flash {
  background-color: var(--hl-paper);
}
.desk-sel {
  position: absolute;
  background: var(--select);
  border-radius: 2px;
  pointer-events: none;
}
.desk-star {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -14px 0 0 -9px;
  scale: 0;
  pointer-events: none;
}
.desk-star svg {
  width: 100%;
  height: 100%;
  fill: var(--star);
  stroke: #9c6a12;
  stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.desk-board {
  padding: 18px 16px;
  background-color: #fbfbfd;
  background-image: radial-gradient(#cdd3de 1px, transparent 1.2px);
  background-size: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.desk-board-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-paper-dim);
}
.note {
  font-family: var(--body);
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff6c7;
  box-shadow: 0 2px 6px rgba(20, 24, 33, 0.1);
  max-width: 92%;
}
.note--b {
  align-self: flex-end;
  background: #e3f1ff;
}
.note-slot {
  height: 108px;
  flex: none;
}
.note--card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  background: var(--paper);
  border-left: 3px solid var(--tape);
  font-family: var(--display);
  font-size: 0.9rem;
  box-shadow: 0 12px 26px -10px rgba(20, 24, 33, 0.4);
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform;
}
.note-cite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid #d9dde5;
  border-radius: 999px;
  background: #f5f6f9;
  color: var(--tape);
  font: 600 0.78rem var(--body);
  cursor: pointer;
  transition:
    scale 120ms ease,
    background 150ms ease;
}
.note-cite::before {
  /* a bigger tap area than the chip itself */
  content: '';
  position: absolute;
  inset: -8px;
}
.note-cite {
  position: relative;
}
.note-cite:active,
.note-cite.is-pressed {
  scale: 0.94;
  background: #fde8e9;
}
.note-cite svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.thread path {
  fill: none;
  stroke: var(--tape);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
}
.tap {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(194, 50, 58, 0.25);
  border: 2px solid rgba(194, 50, 58, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

@media (max-width: 860px) {
  .chapter {
    height: 330vh;
  }
  .chapter-sticky {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 18px;
    padding-top: calc(var(--bar) + 12px);
  }
  .chapter-copy {
    max-width: none;
  }
  .steps h3 {
    font-size: clamp(1.35rem, 1rem + 2.4vw, 2.2rem);
  }
  .steps p {
    margin-top: 6px;
    font-size: 0.95rem;
  }
  .chapter-copy {
    min-height: 0;
  }
  .try-hint {
    margin-top: 10px;
  }
  .paper-wrap {
    align-self: start;
  }
  .paper {
    padding: 18px 20px 76px;
    font-size: 1rem;
    line-height: 1.6;
  }
  .paper-head,
  .paper-extra,
  .paper-fine {
    display: none;
  }
  .desk {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    max-height: 640px;
    padding: 10px;
    gap: 10px;
  }
  .desk-board {
    padding: 12px;
    gap: 10px;
  }
  .note--b {
    display: none;
  }
  .desk-board {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .desk-board-title {
    width: 100%;
  }
  .note--typed {
    max-width: 100%;
    font-size: 0.78rem;
    padding: 7px 10px;
  }
  .note--b {
    align-self: auto;
  }
  .note-slot {
    width: 100%;
    height: 96px;
  }
}
@media (max-width: 860px) and (max-height: 720px) {
  .steps p {
    display: none;
  }
}
@media (max-width: 860px) and (max-height: 640px) {
  .desk-inner h4,
  .desk-board-title,
  .desk-board .note--typed {
    display: none;
  }
  .desk-inner {
    padding-top: 14px;
  }
}

/* ── 4. Tour ──────────────────────────────────────────────────────────────────────────── */

.tour {
  padding: clamp(80px, 14vh, 160px) var(--gutter) 40px;
  background: var(--night);
}
.tour-title {
  font-size: clamp(2.2rem, 1.2rem + 4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  max-width: 14em;
  margin: 0 auto clamp(40px, 8vh, 90px);
}
.tour-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(28px, 5vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
}
.tour-device {
  order: 2;
  position: sticky;
  top: calc(50vh - min(20vw, 260px));
  align-self: start;
}
.screens {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r) - var(--bezel) * 0.6);
  overflow: hidden;
}
.screens img {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: 1.03;
  transition:
    opacity 600ms ease,
    scale 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.screens img.is-on {
  opacity: 1;
  scale: 1;
}
.tour-step {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.32;
  transition: opacity 400ms ease;
}
.tour-step.is-on {
  opacity: 1;
}
.tour-step h3 {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.tour-step p {
  margin-top: 14px;
  color: var(--ink-dim);
  max-width: 28em;
}
@media (max-width: 860px) {
  .tour-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tour-device {
    order: 0;
    top: calc(var(--bar) + 10px);
    z-index: 1;
    padding-bottom: 14px;
    background: linear-gradient(var(--night) 85%, transparent);
  }
  .tour-step {
    min-height: 62vh;
    justify-content: flex-start;
    padding-top: 6vh;
  }
}

/* ── 5–7. Privacy, who, download ──────────────────────────────────────────────────────── */

.privacy {
  padding: clamp(90px, 16vh, 180px) var(--gutter);
  background: var(--mist);
  color: var(--ink-paper);
  text-align: center;
}
.privacy h2 {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 11em;
  margin: 0 auto;
}
.privacy-lede {
  margin: 22px auto 0;
  max-width: 34em;
  color: var(--ink-paper-dim);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
}
.facts {
  list-style: none;
  margin: clamp(48px, 8vh, 80px) auto 0;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #cfd4dd;
  border-block: 1px solid #cfd4dd;
  text-align: left;
}
.facts li {
  background: var(--mist);
  padding: 26px 22px 28px 0;
}
.facts li + li {
  padding-left: 22px;
}
.facts strong {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
}
.facts span {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--ink-paper-dim);
}
@media (max-width: 860px) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }
  .facts li,
  .facts li + li {
    padding: 22px 16px 24px 0;
  }
  .facts li:nth-child(even) {
    padding-left: 16px;
  }
}
@media (max-width: 480px) {
  .facts {
    grid-template-columns: 1fr;
  }
  .facts li:nth-child(even) {
    padding-left: 0;
  }
}

.who {
  padding: clamp(70px, 12vh, 130px) var(--gutter);
  text-align: center;
  background: var(--night);
}
.who p {
  max-width: 22em;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.download {
  padding: clamp(40px, 8vh, 80px) var(--gutter) clamp(90px, 14vh, 150px);
  text-align: center;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(194, 50, 58, 0.16), transparent 70%), var(--night);
}
.download-devices {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 2vw, 24px);
  max-width: 760px;
  margin: 0 auto clamp(36px, 6vh, 60px);
}
.download-devices .tablet--ipad {
  width: 46%;
}
.download-devices .tablet--android {
  width: 54%;
}
.download h2 {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.download-sub {
  margin-top: 16px;
  color: var(--ink-dim);
}
.download-price {
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--hl);
}

/* ── 8. Questions ─────────────────────────────────────────────────────────────────────── */

.faq {
  padding: clamp(70px, 12vh, 120px) var(--gutter);
  background: var(--night-2);
}
.faq h2,
.latest h2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  letter-spacing: -0.025em;
}
.faq h2 {
  max-width: 780px;
  margin: 0 auto 26px;
}
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  font-size: 1.08rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--ink-dim);
  border-bottom: 2px solid var(--ink-dim);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 220ms ease;
}
.faq details[open] summary::after {
  rotate: 225deg;
  translate: 0 3px;
}
.faq details p {
  padding: 0 0 20px;
  color: var(--ink-dim);
  max-width: 40em;
}

/* ── 9. Latest articles ───────────────────────────────────────────────────────────────── */

.latest {
  padding: clamp(70px, 12vh, 120px) var(--gutter);
  background: var(--night);
}
.latest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto 28px;
}
.latest-head a {
  font-weight: 600;
  text-decoration: none;
  color: var(--hl);
  padding: 10px 0;
}
.latest-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.latest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--night-3);
  transition:
    translate 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 260ms ease;
}
.latest-card:hover {
  translate: 0 -4px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
}
/* the article's picture is shown whole, never cropped */
.latest-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #0d1424;
}
.latest-card .body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.latest-meta {
  font-size: 0.8rem;
  color: var(--ink-dim);
}
.latest-card h3 {
  font-size: 1.3rem;
  line-height: 1.2;
}
.latest-card h3 a {
  text-decoration: none;
}
.latest-card h3 a::after {
  /* the whole card is the link */
  content: '';
  position: absolute;
  inset: 0;
}
.latest-card p.sum {
  color: var(--ink-dim);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-card .new {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tape);
  color: #fff;
}
@media (max-width: 900px) {
  .latest-list {
    grid-template-columns: 1fr;
  }
}

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

.foot {
  padding: 48px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.foot-brand img {
  border-radius: 7px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 20px 0;
}
.foot-links a {
  text-decoration: none;
  padding: 10px 0;
}
.foot-links a:hover {
  color: var(--ink);
}
.foot-fine {
  font-size: 0.78rem;
  max-width: 60em;
}

/* ── Reduced motion: everything readable at once, nothing moves on its own ────────────── */

.rm .hero {
  height: auto;
}
.rm .hero-sticky {
  position: relative;
  height: auto;
  min-height: 0;
  padding-bottom: 60px;
}
.rm .stage {
  height: 52vw;
  max-height: 620px;
}
.rm .bob,
.rm .slot::after,
.rm .hero-scroll span {
  animation: none;
}
.rm .hero-scroll {
  display: none;
}
.rm .chapter {
  height: auto;
}
.rm .chapter-sticky {
  position: relative;
  height: auto;
  padding-block: 80px;
}
.rm .steps {
  gap: 26px;
}
.rm .steps li {
  grid-area: auto;
  opacity: 1;
  translate: none;
}
.rm .steps h3 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}
.rm .try-hint {
  opacity: 1;
}
.rm .desk {
  height: 560px;
}
.rm .pen {
  display: none;
}
.rm *,
.rm *::before,
.rm *::after {
  transition-duration: 0ms !important;
}

/* ── Your turn: write on the page ─────────────────────────────────────────────────────── */

.draw-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.paper.is-drawing .draw-layer {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.draw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 30px -14px rgba(20, 24, 33, 0.45);
  opacity: 0;
  translate: 0 10px;
  pointer-events: none;
  transition:
    opacity 300ms ease,
    translate 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.is-done .draw-tools {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.draw-tools button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-paper);
  font: 600 0.88rem var(--body);
  cursor: pointer;
  transition: scale 120ms ease;
}
.draw-tools button:active {
  scale: 0.94;
}
.draw-tools .dt-mode[aria-pressed='true'] {
  background: var(--ink-paper);
  color: #fff;
}
.dt-colours {
  display: inline-flex;
  gap: 6px;
  padding: 0 6px;
}
.draw-tools .dt-ink {
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.draw-tools .dt-ink[aria-checked='true'] {
  outline: 2px solid var(--ink-paper);
  outline-offset: 2px;
}
.paper-wrap {
  flex-direction: column;
}
@media (max-width: 860px) {
  .draw-tools {
    margin-top: 8px;
  }
  .draw-tools button {
    min-height: 36px;
    padding: 0 10px;
  }
}

/* ── Tour: dots under the tablet; tap the tablet for the next screen ──────────────────── */

.screens {
  cursor: pointer;
}
.tour-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
}
.tour-dots button {
  width: 44px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.tour-dots button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  translate: -50% -50%;
  border-radius: 999px;
  background: rgba(243, 245, 249, 0.3);
  transition:
    width 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 300ms ease;
}
.tour-dots button[aria-current='true']::before {
  width: 26px;
  background: var(--ink);
}
.tour-step {
  cursor: pointer;
}
.tour-step:hover {
  opacity: 0.75;
}
.tour-step.is-on:hover {
  opacity: 1;
}

/* the hero tablets follow a finger or the mouse when dragged */
.stage {
  touch-action: pan-y;
  cursor: grab;
}
.stage.is-dragging {
  cursor: grabbing;
}

/* ── Your app, your colour ────────────────────────────────────────────────────────────── */

.colours {
  padding: clamp(70px, 12vh, 130px) var(--gutter);
  text-align: center;
  background:
    radial-gradient(
      60% 70% at 50% 100%,
      color-mix(in srgb, var(--tape) 22%, transparent),
      transparent 70%
    ),
    var(--night);
  transition: background 500ms ease;
}
.colours h2 {
  font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.colours-sub {
  max-width: 34em;
  margin: 16px auto 0;
  color: var(--ink-dim);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 34px auto 0;
}
.swatches button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: 500 0.95rem var(--body);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background 200ms ease,
    scale 120ms ease;
}
.swatches button::before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.swatches button:active {
  scale: 0.95;
}
.swatches button[aria-checked='true'] {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
}
.get-play svg,
.ink-circle,
.thread path {
  transition:
    fill 400ms ease,
    stroke 400ms ease;
}

/* Search the blog from the home page (an ordinary form: it works without scripts) */
.latest-search {
  display: flex;
  gap: 10px;
  max-width: 1180px;
  margin: -12px auto 26px;
}
.latest-search label {
  position: relative;
  flex: 1;
}
.latest-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
  fill: none;
  stroke: var(--ink-dim);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.latest-search input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px 0 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--night-2);
  color: var(--ink);
  font: 400 16px var(--body);
}
.latest-search input::placeholder {
  color: var(--ink-dim);
}
.latest-search input:focus {
  outline: 2px solid var(--hl);
  outline-offset: 1px;
}
.latest-search button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--hl);
  color: var(--night);
  font: 700 16px var(--body);
  cursor: pointer;
}
@media (max-width: 560px) {
  .latest-search button {
    padding: 0 16px;
  }
}

/* ══ Two apps on one page ═════════════════════════════════════════════════════════════════
   html[data-device] (set by home-device.js before the page is drawn, then by the chooser)
   decides which hero words, which stage and which story are shown. Without scripts the hero
   shows YIP Note and both stories are shown one after the other. */

html[data-device='windows'] [data-for='tablet'],
html[data-device='windows'] [data-flow='tablet'],
html:not([data-device='windows']) [data-for='windows'],
html[data-device='ipad'] [data-flow='windows'],
html[data-device='android'] [data-flow='windows'] {
  display: none !important;
}
.hero [data-for] {
  animation: swap-in 640ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero .hero-sub[data-for] {
  animation-delay: 60ms;
}
.hero .get[data-for] {
  animation-delay: 120ms;
}
[data-flow] {
  animation: flow-in 700ms ease both;
}
@keyframes swap-in {
  from {
    opacity: 0;
    translate: 0 14px;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
@keyframes flow-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Brand: one family, two apps ─────────────────────────────────────────────────────── */

.bar-icons {
  display: inline-flex;
  gap: 4px;
  flex: none;
}
.bar-icons img {
  border-radius: 8px;
}
.bar-word {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bar-by {
  font-family: var(--body);
  font-size: 0.78rem;
  color: var(--ink-dim);
  padding-left: 10px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.bar-links a[data-go] {
  position: relative;
}
html:not([data-device='windows']) .bar-links a[data-go='tablet'],
html[data-device='windows'] .bar-links a[data-go='windows'] {
  color: var(--ink);
}
html:not([data-device='windows']) .bar-links a[data-go='tablet']::after,
html[data-device='windows'] .bar-links a[data-go='windows']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--hl);
}
@media (max-width: 420px) {
  .bar {
    gap: 12px;
  }
  .bar-by {
    font-size: 0.7rem;
    padding-left: 8px;
  }
  .bar-cta {
    padding: 10px 14px;
  }
}

/* ── The device chooser ──────────────────────────────────────────────────────────────── */

.chooser {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 4.2vh, 44px);
}
.chooser-q {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.chooser-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 60px -30px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.chooser-tabs button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 62px;
  padding: 8px 20px 8px 14px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 300ms ease,
    background 200ms ease,
    scale 140ms ease;
}
.chooser-tabs button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.chooser-tabs button:active {
  scale: 0.96;
}
.chooser-tabs button[aria-selected='true'] {
  color: var(--night);
  background: transparent;
}
.chooser-tabs button:focus-visible {
  outline-offset: 2px;
  border-radius: 18px;
}
.chooser-tabs svg {
  flex: none;
  width: 34px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chooser-tabs .ic-screen {
  fill: currentColor;
  stroke: none;
  opacity: 0.16;
}
.chooser-tabs span {
  min-width: 0;
}
.chooser-tabs b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.chooser-tabs small {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  opacity: 0.78;
}
/* the white thumb glides to the chosen device (placed by home.js) */
.chooser-thumb {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #e9edf3);
  box-shadow:
    0 10px 28px -10px rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(9, 13, 22, 0.08);
  opacity: 0;
}
.chooser-tabs.is-ready .chooser-thumb {
  opacity: 1;
  transition:
    translate 560ms cubic-bezier(0.3, 1.25, 0.4, 1),
    width 560ms cubic-bezier(0.3, 1.25, 0.4, 1);
}
@media (max-width: 600px) {
  .chooser {
    gap: 8px;
  }
  .chooser-tabs {
    width: 100%;
    max-width: 420px;
    padding: 5px;
    border-radius: 20px;
  }
  .chooser-tabs button {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 74px;
    padding: 8px 4px;
    text-align: center;
  }
  .chooser-tabs b {
    font-size: 0.86rem;
  }
  .chooser-tabs small {
    font-size: 0.7rem;
  }
  .chooser-tabs svg {
    width: 30px;
    height: 22px;
  }
  .chooser-thumb {
    top: 5px;
    bottom: 5px;
  }
}

/* ── Hero: the buttons follow the device ─────────────────────────────────────────────── */

html[data-device='ipad'] .get--hero .get-soon {
  order: -1;
  color: var(--ink);
  border-color: rgba(243, 245, 249, 0.4);
  background: rgba(255, 255, 255, 0.06);
}
html[data-device='ipad'] .slot--ipad figcaption,
html[data-device='android'] .slot--android figcaption {
  color: var(--ink);
}
.get-store svg {
  fill: none;
  stroke: var(--pdf);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.get-more {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 22px;
  border: 1px solid rgba(243, 245, 249, 0.22);
  border-radius: 16px;
  text-decoration: none;
  line-height: 1.15;
  text-align: left;
  transition:
    background 200ms ease,
    border-color 200ms ease;
}
.get-more:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(243, 245, 249, 0.4);
}
.get-more > span {
  font-size: 1.05rem;
  font-weight: 600;
}
.get-more small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-dim);
}

/* the two stages share one place; the chosen one is shown */
.stage[data-stage] {
  grid-area: 2 / 1;
  transition:
    opacity 700ms ease,
    scale 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}
html[data-device='windows'] .stage[data-stage='tablet'],
html:not([data-device='windows']) .stage[data-stage='windows'] {
  opacity: 0;
  scale: 0.94;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 450ms ease,
    scale 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s 700ms;
}

/* wide screens: the words on the left, the devices large on the right */
@media (min-width: 960px) and (min-aspect-ratio: 5/4) {
  .hero-sticky {
    grid-template-columns: minmax(380px, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(24px, 3vw, 56px);
    padding-top: var(--bar);
    padding-bottom: 32px;
  }
  .hero-copy {
    grid-area: 1 / 1;
    justify-self: end;
    width: min(540px, 100%);
    text-align: left;
  }
  .chooser {
    justify-items: start;
  }
  .chooser-tabs {
    width: 100%;
  }
  .chooser-tabs button {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 96px;
    padding: 14px 14px 12px;
  }
  .hero-sub {
    margin-left: 0;
  }
  .hero .get {
    justify-content: flex-start;
  }
  .stage,
  .stage[data-stage] {
    grid-area: 1 / 2;
    height: min(76vh, 700px);
    margin-top: 0;
  }
  .hero-scroll {
    left: var(--gutter);
    translate: none;
    justify-items: start;
  }
  .chooser-tabs b {
    white-space: normal;
  }
  .slot--ipad {
    width: min(54cqw, 100cqh);
    right: 0;
    top: 8cqh;
  }
  .slot--android {
    width: min(70cqw, 116cqh);
    left: 0;
    top: 26cqh;
  }
  .slot--android {
    transform: translate3d(calc(var(--p) * -12vw), calc(var(--p) * -22cqh), calc(var(--p) * 260px))
      rotateX(calc(9deg - var(--p) * 9deg + var(--my) * -3deg))
      rotateY(calc(16deg - var(--p) * 16deg + var(--mx) * 5deg))
      rotateZ(calc(-2deg + var(--p) * 2deg));
  }
  .stage--pc .pc-slot {
    transform: translate3d(calc(var(--p) * -20vw), calc(var(--p) * -5cqh), calc(var(--p) * 300px))
      rotateX(calc(14deg - var(--p) * 14deg + var(--my) * -3deg)) rotateY(calc(var(--mx) * 6deg));
    width: min(94cqw, 140cqh);
    margin-left: calc(min(94cqw, 140cqh) / -2);
    top: 10cqh;
  }
  .stage--pc .pc-croc {
    width: min(32cqw, 46cqh);
    right: -1cqw;
    bottom: 4cqh;
  }
}

@media (min-width: 960px) and (max-width: 1199px) and (min-aspect-ratio: 5/4) {
  .slot--android {
    transform: translate3d(calc(var(--p) * -12vw), calc(var(--p) * -12cqh), calc(var(--p) * 260px))
      rotateX(calc(9deg - var(--p) * 9deg + var(--my) * -3deg))
      rotateY(calc(16deg - var(--p) * 16deg + var(--mx) * 5deg))
      rotateZ(calc(-2deg + var(--p) * 2deg));
  }
  .chooser-tabs button {
    padding: 12px 10px 10px;
  }
  .chooser-tabs b {
    font-size: 0.9rem;
  }
}

/* ── A laptop, drawn in CSS (the screen is a real screenshot) ─────────────────────────── */

.laptop {
  position: relative;
  --bezel: clamp(7px, 0.9vw, 13px);
}
.laptop-lid {
  position: relative;
  padding: calc(var(--bezel) * 0.72);
  padding-top: var(--bezel);
  border-radius: clamp(10px, 1.2vw, 18px) clamp(10px, 1.2vw, 18px) 3px 3px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.15), transparent 24%) border-box,
    linear-gradient(160deg, #2b303a, #0c0e13 55%, #1f232b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5);
}
.laptop-lid .screens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.laptop-lid > img,
.laptop-lid > picture img,
.laptop-lid .screens {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  border-radius: 3px;
  background: #f3f3f5;
}
.laptop-lid::after {
  content: '';
  position: absolute;
  inset: var(--bezel) calc(var(--bezel) * 0.72) calc(var(--bezel) * 0.72);
  border-radius: 3px;
  background: linear-gradient(
    115deg,
    transparent calc(34% + var(--sheen, 0%)),
    rgba(255, 255, 255, 0.1) calc(44% + var(--sheen, 0%)),
    transparent calc(54% + var(--sheen, 0%))
  );
  pointer-events: none;
}
.laptop-lid .cam {
  top: calc(var(--bezel) * 0.5 - 2.5px);
}
.laptop-base {
  position: relative;
  height: clamp(8px, 1.15vw, 16px);
  margin: 0 -7.5%;
  border-radius: 1px 1px 40% 40% / 1px 1px 100% 100%;
  background: linear-gradient(#d5d9e0, #9da3ad 40%, #5d626b 85%, #3b3f46);
  box-shadow: 0 34px 50px -22px rgba(0, 0, 0, 0.9);
}
.laptop-base::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 15%;
  height: 42%;
  translate: -50% 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(#7a808a, #a9aeb7);
}

/* the hero's laptop, with the crocodile reading along */
.stage--pc {
  perspective: 2000px;
  perspective-origin: 50% 20%;
}
.glow--pc {
  background: radial-gradient(closest-side, rgba(179, 38, 45, 0.3), transparent);
}
.pc-slot {
  position: absolute;
  margin: 0;
  left: 50%;
  top: 2cqh;
  width: min(74cqw, 136cqh);
  margin-left: calc(min(74cqw, 136cqh) / -2);
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(0, calc(var(--p) * -24cqh), calc(var(--p) * 240px))
    rotateX(calc(14deg - var(--p) * 14deg + var(--my) * -3deg)) rotateY(calc(var(--mx) * 6deg));
}
.pc-slot .laptop {
  --sheen: calc(var(--mx) * 12% + var(--p) * 30%);
}
.pc-slot .bob,
.pc-croc .bob {
  animation-duration: 8s;
}
.pc-croc {
  position: absolute;
  margin: 0;
  width: min(27cqw, 50cqh);
  right: max(0cqw, 50cqw - 84cqh);
  bottom: 2cqh;
  transform: translate3d(calc(var(--p) * 16vw + var(--mx) * -8px), calc(var(--p) * 14cqh), 0)
    rotate(calc(4deg + var(--p) * 8deg));
  opacity: calc(1 - var(--p) * 1.8);
}
.pc-croc .bob {
  animation-delay: -2.5s;
  animation-duration: 6.5s;
}
.pc-croc img {
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: var(--cream);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 36px 70px -28px rgba(0, 0, 0, 0.95);
}
.is-arriving .pc-slot .bob,
.is-arriving .pc-croc .bob {
  opacity: 0;
}
.has-arrived .pc-slot .laptop {
  animation: arrive 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.has-arrived .pc-croc img {
  animation: arrive 1300ms 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (max-width: 699px), (orientation: portrait) and (max-width: 1100px) {
  /* in a tall layout the devices sit low; scrolling lifts them into the middle */
  .slot--android {
    transform: translate3d(calc(var(--p) * 10%), calc(var(--p) * -38vh), calc(var(--p) * 260px))
      rotateX(calc(9deg - var(--p) * 9deg + var(--my) * -3deg))
      rotateY(calc(16deg - var(--p) * 16deg + var(--mx) * 5deg))
      rotateZ(calc(-2deg + var(--p) * 2deg));
  }
  .pc-slot {
    transform: translate3d(0, calc(var(--p) * -34vh), calc(var(--p) * 200px))
      rotateX(calc(14deg - var(--p) * 14deg + var(--my) * -3deg)) rotateY(calc(var(--mx) * 6deg));
  }
  .pc-croc {
    transform: translate3d(calc(var(--p) * 10vw), calc(var(--p) * -30vh), 0)
      rotate(calc(4deg + var(--p) * 6deg));
  }
}
@media (max-width: 600px) {
  .hero-sub {
    display: none;
  }
  .hero .get {
    margin-top: 20px;
  }
  .get-more {
    min-height: 56px;
    padding: 8px 16px;
  }
  .get-more small {
    display: none;
  }
  .stage--pc .pc-croc {
    width: 36cqw;
    right: 3cqw;
  }
}
@media (max-width: 699px), (orientation: portrait) and (max-width: 1100px) {
  .pc-slot {
    width: min(104cqw, 150cqh);
    margin-left: calc(min(104cqw, 150cqh) / -2);
    top: 8cqh;
  }
  /* clear of the "Scroll" hint in the middle at the bottom */
  .pc-croc {
    width: min(42cqw, 56cqh);
    right: 2cqw;
    bottom: 64px;
  }
}

/* ── YIP PDF story: shared ───────────────────────────────────────────────────────────── */

.kicker {
  margin-bottom: 18px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pdf);
}
.kicker--center {
  text-align: center;
}
.pchap {
  height: 430vh;
}
.pchap--bundle .chapter-sticky {
  background: radial-gradient(70% 70% at 72% 45%, #fffdf9, transparent 70%), var(--cream);
  color: var(--ink-cream);
}
.pchap--bundle .steps p {
  color: var(--ink-cream-dim);
}
.pchap--ocr .chapter-sticky {
  background:
    radial-gradient(55% 55% at 72% 52%, rgba(179, 38, 45, 0.2), transparent 70%),
    linear-gradient(var(--night), #0c0f17);
}
.pchap--ocr .kicker,
.download .kicker {
  color: #f2959a;
}

/* ── P1: the YIP PDF window ──────────────────────────────────────────────────────────── */

.win-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.win {
  position: relative;
  width: min(860px, 100%);
  aspect-ratio: 16 / 10.6;
  display: grid;
  grid-template-rows: 34px 40px minmax(0, 1fr);
  border-radius: 12px;
  overflow: hidden;
  background: #f4f4f6;
  color: #1d1d22;
  font-family: var(--body);
  box-shadow:
    0 0 0 1px rgba(60, 40, 20, 0.12),
    0 14px 30px -18px rgba(60, 35, 15, 0.35),
    0 60px 110px -50px rgba(60, 35, 15, 0.55);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  background: #e9e9ee;
  font-size: 0.74rem;
}
.win-bar img {
  border-radius: 4px;
}
.win-title {
  align-self: flex-end;
  padding: 6px 16px 7px;
  border-radius: 8px 8px 0 0;
  background: #ffffff;
  font-weight: 500;
}
.win-ctl {
  display: flex;
  align-self: stretch;
  margin-left: auto;
}
.win-ctl i {
  position: relative;
  width: 42px;
}
.win-ctl i::before,
.win-ctl i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.win-ctl i:nth-child(1)::before {
  width: 10px;
  height: 1px;
  background: #444;
}
.win-ctl i:nth-child(2)::before {
  width: 8px;
  height: 8px;
  border: 1px solid #444;
}
.win-ctl i:nth-child(3)::before,
.win-ctl i:nth-child(3)::after {
  width: 12px;
  height: 1px;
  background: #444;
  rotate: 45deg;
}
.win-ctl i:nth-child(3)::after {
  rotate: -45deg;
}
.win-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid #e4e4e9;
  font-size: 0.72rem;
  white-space: nowrap;
}
.win-tools span {
  padding: 5px 9px;
  border-radius: 7px;
  color: #3b3b44;
}
.win-tools .is-on {
  background: #1d1d22;
  color: #ffffff;
}
.win-tools .win-tool-pn {
  margin-left: 6px;
  color: var(--pdf);
  transition: background 300ms ease;
}
.win-tools .win-tool-pn.is-active {
  background: #f9e1e2;
}
.win-body {
  display: grid;
  grid-template-columns: 29% minmax(0, 1fr);
  min-height: 0;
}
.win-side {
  padding: 12px 8px;
  overflow: hidden;
  background: #fafafb;
  border-right: 1px solid #e4e4e9;
  font-size: 0.72rem;
}
.win-side-title {
  padding: 0 8px 8px;
  font-weight: 600;
  color: #6b6b75;
}
.bm {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bm li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: 0;
  translate: -12px 0;
  transition:
    opacity 300ms ease,
    translate 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 300ms ease,
    color 300ms ease;
}
.bm li.is-on {
  opacity: 1;
  translate: 0 0;
}
.bm li.is-current {
  background: #f9e1e2;
  color: var(--pdf);
}
.bm span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm b {
  font-weight: 500;
  color: #8a8a94;
  font-variant-numeric: tabular-nums;
}
.win-main {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #e8e8ed;
  container-type: size;
}
.drop {
  position: absolute;
  inset: 7cqh 7cqw;
  display: grid;
  place-items: center;
  border: 2px dashed #c3c3cc;
  border-radius: 14px;
  color: #6f6f7a;
  font-size: 0.82rem;
}
.sheet {
  position: relative;
  width: min(84cqw, 61cqh);
  aspect-ratio: 1 / 1.414;
  padding: 9% 9% 0;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 10px 30px -12px rgba(0, 0, 0, 0.25);
  font-family: var(--display);
  font-size: calc(min(84cqw, 61cqh) * 0.04);
  line-height: 1.5;
  opacity: 0;
  will-change: transform;
}
.sheet-court {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sheet-case {
  margin-top: 0.3em;
  text-align: center;
}
.sheet-parties {
  margin-top: 1em;
  text-align: center;
  line-height: 1.55;
}
.sheet-parties em {
  color: #666;
}
.sheet-h {
  margin: 1.1em 0 0.9em;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.sheet .ln {
  display: block;
  height: 0.5em;
  margin: 0.72em 0;
  border-radius: 2px;
  background: #e2e2e8;
}
.sheet .ln--s {
  width: 62%;
}
.sheet-old {
  position: absolute;
  top: 3.4%;
  right: 6%;
  padding: 0 0.2em;
  font-family: var(--body);
  color: #555;
  transition:
    opacity 400ms ease,
    color 300ms ease;
}
.sheet-old::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 52%;
  height: 1.5px;
  background: var(--pdf);
  scale: 0 1;
  transform-origin: left;
  transition: scale 300ms ease;
}
.sheet-old.is-struck::after {
  scale: 1 1;
}
.sheet-old.is-struck {
  color: var(--pdf);
}
.sheet-old.is-gone {
  opacity: 0;
}
.pnum {
  position: absolute;
  left: 50%;
  bottom: 3.6%;
  margin-left: -1em;
  width: 2em;
  text-align: center;
  font-family: var(--body);
  font-weight: 600;
  color: #1d1d22;
  scale: 0;
}
.impress {
  position: absolute;
  right: 7%;
  bottom: 12%;
  width: 46%;
  rotate: -8deg;
  fill: none;
  stroke: var(--pdf);
  opacity: 0;
  mix-blend-mode: multiply;
  overflow: visible;
}
.impress rect {
  stroke-width: 3;
}
.impress rect + rect {
  stroke-width: 1.4;
}
.impress path {
  stroke-width: 2;
  stroke-linecap: round;
}
.impress text {
  fill: var(--pdf);
  stroke: none;
  font: 800 25px var(--body);
  letter-spacing: 3px;
}
.impress .impress-sub {
  font: 600 9px var(--body);
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* the loose documents that fly in and become one bundle */
.docs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.doc {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8% 9%;
  border-radius: 2px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 18px 36px -16px rgba(50, 30, 10, 0.4);
  font-family: var(--display);
  will-change: transform;
}
.doc b {
  display: block;
  margin-bottom: 1.2em;
  font-size: clamp(0.7rem, 0.5rem + 0.5vw, 1rem);
  font-weight: 600;
}
.doc i {
  display: block;
  height: 0.5em;
  margin: 0.8em 0;
  border-radius: 2px;
  background: #e5e5ea;
}
.doc i:nth-of-type(2) {
  width: 78%;
}
.doc--photo {
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.5), transparent 40%),
    linear-gradient(#f5efe2, #eadfca);
}
/* the page-number panel and the page strip */
.strip {
  --u: min(1cqh, 0.9cqw);
  position: absolute;
  left: 50%;
  bottom: calc(3 * var(--u));
  display: flex;
  gap: calc(1.3 * var(--u));
  padding: calc(1.4 * var(--u));
  border-radius: calc(1.8 * var(--u));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.35);
  translate: calc(-50% + var(--sx, 0px)) calc((1 - var(--in, 0)) * 160%);
}
.strip span {
  position: relative;
  width: calc(5.6 * var(--u));
  height: calc(7.6 * var(--u));
  border-radius: 2px;
  background:
    repeating-linear-gradient(
        #ffffff 0 calc(1.1 * var(--u)),
        #e6e6eb calc(1.1 * var(--u)) calc(1.5 * var(--u))
      )
      content-box,
    #ffffff;
  padding: calc(1 * var(--u)) calc(0.8 * var(--u));
  box-shadow: 0 0 0 1px #dcdce3;
}
.strip .t1 {
  box-shadow:
    0 0 0 1px #dcdce3,
    inset 0 3px 0 var(--pdf);
}
.strip .t2 {
  box-shadow:
    0 0 0 1px #dcdce3,
    inset 0 3px 0 #2f6bc4;
}
.strip b {
  position: absolute;
  left: 50%;
  bottom: -calc(1.1 * var(--u));
  min-width: calc(2.6 * var(--u));
  height: calc(2.6 * var(--u));
  translate: -50% 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #1d1d22;
  color: #ffffff;
  font-size: calc(1.5 * var(--u));
  font-weight: 700;
  scale: 0;
  transition: scale 360ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.strip .is-on b {
  scale: 1;
}
.pn {
  position: absolute;
  right: 2.6cqh;
  top: 2.6cqh;
  bottom: 2.6cqh;
  width: 44%;
  display: flex;
  flex-direction: column;
  gap: 1.8cqh;
  padding: 2.6cqh;
  border-radius: 1.8cqh;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    -14px 0 40px -20px rgba(0, 0, 0, 0.35);
  font-size: 2.5cqh;
  translate: calc((1 - var(--in, 0)) * 118%) 0;
}
.pn-head {
  font-weight: 700;
  font-size: 1.1em;
}
.pn-part {
  display: grid;
  gap: 1.2cqh;
  padding: 1.8cqh;
  border-radius: 1.4cqh;
  box-shadow: 0 0 0 1px #e3e3e9;
}
.pn-part--1 {
  box-shadow:
    inset 3px 0 0 var(--pdf),
    0 0 0 1px #e3e3e9;
}
.pn-part--2 {
  box-shadow:
    inset 3px 0 0 #2f6bc4,
    0 0 0 1px #e3e3e9;
}
.pn-name {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
}
.pn-name i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 2px;
  background: var(--pdf);
}
.pn-part--2 .pn-name i {
  background: #2f6bc4;
}
.pn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2cqh;
}
.pn-f small {
  display: block;
  font-size: 0.72em;
  color: #6b6b75;
}
.pn-f b {
  display: block;
  min-height: 1.9em;
  margin-top: 0.25em;
  padding: 0.3em 0.5em;
  border-radius: 0.4em;
  box-shadow: inset 0 0 0 1px #d6d6de;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pn-f b.is-typing {
  box-shadow: inset 0 0 0 2px #2f6bc4;
}
.pn-go {
  margin-top: auto;
  padding: 0.7em 1em;
  border-radius: 0.6em;
  background: var(--pdf);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  transition: scale 140ms ease;
}
.pn-go.is-pressed {
  scale: 0.94;
}
.win.is-narrow .pn {
  left: 2.6cqh;
  top: auto;
  width: auto;
  height: 52%;
  gap: 1.2cqh;
  padding: 2cqh;
  font-size: 2.1cqh;
  translate: 0 calc((1 - var(--in, 0)) * 118%);
}
.win.is-narrow .pn-head,
.win.is-narrow .pn-part > .pn-f,
.win.is-narrow .strip {
  display: none;
}
/* the rubber stamp */
.rstamp {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 93%;
  filter: drop-shadow(0 18px 18px rgba(50, 25, 5, 0.35));
  will-change: transform;
}
.rstamp svg {
  display: block;
  width: 100%;
  height: 100%;
}
.rstamp-rubber {
  fill: #7d1d22;
}
.win-croc {
  position: absolute;
  left: -2%;
  bottom: -7%;
  z-index: 5;
  width: clamp(130px, 22%, 220px);
  height: auto;
  border-radius: 16px;
  background: var(--cream);
  box-shadow:
    0 0 0 1px rgba(60, 40, 20, 0.1),
    0 24px 50px -20px rgba(60, 35, 15, 0.55);
  rotate: -6deg;
  scale: 0;
  transition: scale 600ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.win-croc.is-on {
  scale: 1;
}
@media (max-width: 860px) {
  .win-wrap {
    align-self: start;
  }
  .win {
    aspect-ratio: 1;
  }
}
@media (max-width: 560px) {
  .win {
    aspect-ratio: 4 / 5.4;
    grid-template-rows: 30px 34px minmax(0, 1fr);
    border-radius: 10px;
  }
  .win-body {
    grid-template-columns: 31% minmax(0, 1fr);
  }
  .win-side {
    padding: 8px 4px;
    font-size: 0.64rem;
  }
  .win-side-title {
    padding: 0 6px 6px;
  }
  .bm li {
    padding: 5px 6px;
  }
  .win-tools {
    font-size: 0.64rem;
  }
  .win-tools span:nth-child(n + 2):not(.win-tool-pn) {
    display: none;
  }
  .win-ctl i {
    width: 30px;
  }
  .drop {
    font-size: 0.7rem;
    text-align: center;
    padding: 8px;
  }
  .win-croc {
    left: auto;
    right: -2%;
    bottom: -6%;
    width: 120px;
  }
}

/* ── P2: OCR with the crocodile, redaction, compression ──────────────────────────────── */

.lab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(16px, 2.6vw, 36px);
  width: min(1000px, 100%);
  justify-self: center;
}
.croc-card {
  display: grid;
  padding: clamp(12px, 1.4vw, 18px);
  border-radius: clamp(20px, 2.2vw, 28px);
  background: var(--cream);
  color: var(--ink-cream);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 50px 100px -40px rgba(0, 0, 0, 0.95);
}
.croc-frames {
  position: relative;
  aspect-ratio: 548 / 292;
  border-radius: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  background: #f7f2ec;
}
.croc-frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 280ms ease;
}
.croc-frames img.is-on {
  opacity: 1;
}
.meter {
  grid-area: 2 / 1;
  padding: 16px 6px 4px;
  text-align: center;
  transition:
    opacity 400ms ease,
    translate 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.meter--size,
.lab.is-size .meter--ocr {
  opacity: 0;
  translate: 0 10px;
}
.lab.is-size .meter--size {
  opacity: 1;
  translate: 0 0;
}
.meter-msg {
  font-size: 0.86rem;
  color: var(--ink-cream-dim);
}
.meter-big {
  margin-top: 4px;
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.meter-big b {
  font-weight: 500;
}
.meter-bar {
  position: relative;
  display: block;
  max-width: 320px;
  height: 6px;
  margin: 14px auto 10px;
  border-radius: 6px;
  background: var(--cream-2);
}
.meter-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--pdf);
  transition: background 300ms ease;
}
.meter-limit {
  position: absolute;
  left: 20%;
  top: -7px;
  bottom: -7px;
  border-left: 2px dashed var(--ink-cream);
  font-style: normal;
}
.meter-limit {
  font-size: 0;
}
.meter-small {
  font-size: 0.8rem;
  color: var(--ink-cream-dim);
}
.meter-ok {
  font-weight: 600;
  opacity: 0;
  transition: opacity 300ms ease;
}
.lab.is-fit .meter-ok {
  opacity: 1;
}
.lab.is-fit .meter-bar--size i {
  background: #1f7a4a;
}
.lab.is-fit .meter-ok {
  color: #1f6e43;
}
.lab.is-fit .meter-ok::before {
  content: '✓ ';
}
.scan {
  position: relative;
  aspect-ratio: 1 / 1.25;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  color: #18181d;
  font-family: var(--display);
  font-size: clamp(0.72rem, 0.4rem + 0.6vw, 1.05rem);
  line-height: 1.6;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95);
}
.scan-page {
  position: absolute;
  inset: 0;
  padding: 10% 9% 12%;
}
.scan-page p + p {
  margin-top: 0.75em;
}
.scan-h {
  margin-bottom: 1.2em;
  text-align: center;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* the same scanned paper under both layers: OCR changes nothing you see except the words,
   which can now be found and copied */
.scan-page {
  background:
    radial-gradient(rgba(70, 60, 40, 0.1) 1px, transparent 1.4px) 0 0 / 4px 4px,
    radial-gradient(rgba(70, 60, 40, 0.08) 1px, transparent 1.6px) 1px 2px / 7px 5px,
    linear-gradient(100deg, #e9e5da, #f1eee6 40%, #e2ddd0);
}
.scan-page--raw {
  color: #45423b;
  filter: blur(0.75px) contrast(0.92);
}
.scan-page--raw p {
  rotate: -0.7deg;
}
.scan-page--text {
  clip-path: inset(0 0 calc((1 - var(--ocr, 0)) * 100%) 0);
}
.scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ocr, 0) * 100%);
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--pdf) 20%, var(--pdf) 80%, transparent);
  box-shadow: 0 0 22px 6px rgba(179, 38, 45, 0.35);
  opacity: var(--beam, 0);
}
.find-hit {
  border-radius: 2px;
  transition: background 300ms ease;
}
.find-hit.is-on {
  background: #f7c64f;
}
.redact {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.redact i {
  position: absolute;
  border-radius: 2px;
  background: #101014;
  transform-origin: left center;
  scale: 0 1;
}
.chip {
  position: absolute;
  left: 50%;
  bottom: 9%;
  padding: 7px 14px;
  border-radius: 999px;
  background: #1d1d22;
  color: #ffffff;
  font: 600 0.78rem var(--body);
  white-space: nowrap;
  opacity: 0;
  translate: -50% 10px;
  transition:
    opacity 300ms ease,
    translate 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chip.is-on {
  opacity: 1;
  translate: -50% 0;
}
.scan .fine {
  position: absolute;
  left: 9%;
  bottom: 3%;
  font-family: var(--body);
  font-size: 0.62rem;
  color: #6a6a72;
}
@media (max-width: 860px) {
  .lab {
    grid-template-columns: 1fr;
    align-self: start;
    gap: 14px;
  }
  .croc-card {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 10px;
  }
  .meter {
    grid-area: 1 / 2;
    padding: 0;
  }
  .meter-big {
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  }
  .meter-msg,
  .meter-small {
    font-size: 0.72rem;
  }
  .meter-bar {
    margin: 8px auto 6px;
  }
  .scan {
    aspect-ratio: auto;
    height: min(42vh, 480px);
  }
}
@media (max-width: 560px) {
  .scan-page {
    padding: 7% 7%;
  }
  .scan-page p:last-of-type {
    display: none;
  }
  .chip {
    font-size: 0.7rem;
    bottom: 10%;
  }
}

/* ── P3: tour on the laptop ──────────────────────────────────────────────────────────── */

.tour--pdf .tour-grid {
  grid-template-columns: 1fr 1.6fr;
}
.tour--pdf .tour-device {
  top: calc(50vh - min(18vw, 240px));
}
.tour--pdf .laptop {
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .tour--pdf .tour-grid {
    grid-template-columns: 1fr;
  }
  .tour--pdf .laptop {
    width: 84%;
  }
}

/* ── P4: privacy and who ─────────────────────────────────────────────────────────────── */

.privacy--pdf {
  background: var(--cream);
  color: var(--ink-cream);
}
.privacy--pdf .privacy-lede,
.privacy--pdf .facts span {
  color: var(--ink-cream-dim);
}
.privacy--pdf .facts {
  background: #dcd1c3;
  border-color: #dcd1c3;
}
.privacy--pdf .facts li {
  background: var(--cream);
}
.who--pdf {
  display: grid;
  justify-items: center;
  gap: 22px;
}
.who--pdf img {
  width: min(380px, 78%);
  height: auto;
  border-radius: 22px;
  background: var(--cream);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.who-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(243, 245, 249, 0.25);
  text-decoration: none;
  font-weight: 600;
  transition: background 200ms ease;
}
.who-link:hover {
  background: rgba(255, 255, 255, 0.07);
}
.who-link::after,
.dl-more a::after {
  content: '→';
  margin-left: 8px;
  transition: translate 200ms ease;
}
.who-link:hover::after,
.dl-more a:hover::after {
  translate: 3px 0;
}

/* ── Download: both apps ─────────────────────────────────────────────────────────────── */

.download h2 {
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.2rem);
}
.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 1180px;
  margin: clamp(36px, 6vh, 64px) auto 0;
  text-align: left;
}
.dl-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 40px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    border-color 400ms ease,
    box-shadow 400ms ease;
}
html:not([data-device='windows']) .dl-card--note,
html[data-device='windows'] .dl-card--pdf {
  border-color: rgba(243, 245, 249, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 50px 90px -50px rgba(0, 0, 0, 0.95);
}
html[data-device='windows'] .dl-card--pdf {
  order: -1;
}
.dl-card .download-devices {
  width: 100%;
  height: clamp(140px, 17vw, 220px);
  margin: 0 0 clamp(22px, 3vw, 34px);
}
.download-devices--pc .laptop-base {
  margin-bottom: 4px;
}
.download-devices--pc .laptop {
  width: min(88%, 380px);
}
.dl-name {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dl-name img {
  flex: none;
  border-radius: 10px;
}
.dl-name h3 {
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.dl-for {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--ink-dim);
}
.dl-card .download-sub {
  margin-top: 18px;
}
.dl-card .get {
  margin-top: 22px;
}
.dl-card .download-price,
.dl-more {
  margin-top: auto;
  padding-top: 20px;
}
.dl-more a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 600;
  text-decoration: none;
  color: var(--hl);
}
@media (max-width: 860px) {
  .dl-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Room for the newsletter box (filled by subscribe.js) ─────────────────────────────── */

.latest-subscribe {
  max-width: 1180px;
  margin: 32px auto 0;
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.foot-subscribe {
  flex: 1 1 340px;
  max-width: 520px;
}
.latest-subscribe:empty,
.foot-subscribe:empty {
  display: none;
}

/* ── Reduced motion: the YIP PDF story shown finished ────────────────────────────────── */

.rm .pchap {
  height: auto;
}
.rm .chooser-thumb,
.rm .chooser-tabs.is-ready .chooser-thumb {
  transition: none;
}
.rm [data-for],
.rm [data-flow],
.rm .has-arrived .pc-slot .laptop,
.rm .has-arrived .pc-croc img {
  animation: none;
}
.rm .lab .scan {
  aspect-ratio: 1 / 1.2;
  height: auto;
}