/* Proppy's website: the home page and the legal pages.
   Fonts are Geist, Geist Mono, and Geist Pixel (SIL Open Font License, fonts/OFL.txt), served from here,
   as the site's Content-Security-Policy loads nothing from other sites. Motion is off when the device
   asks for reduced motion, and every page reads in full without the script. */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Pixel";
  src: url("fonts/GeistPixel-Circle.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f9f9f8;
  --panel: #f1f1ef;
  --panel-2: #e9e9e6;
  --ink: #1a1a1a;
  --ink-2: #484848;   /* 8.7:1 on --bg */
  --muted: #666664;   /* 5.4:1 on --bg, 5.0:1 on --panel */
  --line: #d6d6d2;    /* decorative dividers only */
  --line-ink: #1a1a1a;
  --brand: #0b5c78;   /* 7.4:1 with white */
  --brand-hover: #084a61;
  --deep: #07211f;
  --focus: #c2410c;
  --ok: #1e6b3a;
  --ok-bg: #e3f3e8;
  --warn: #8a4b00;
  --warn-bg: #fdf0dc;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 1.5vw, 24px);
  --radius: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0, 1);
  --header-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .dark :focus-visible { outline-color: #ffffff; }
::selection { background: #cfe5ee; color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--gutter); top: 12px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px;
  font-weight: 500; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.mono {
  font-family: var(--mono); font-weight: 500; font-size: 12.5px; line-height: 1.35;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }
.mono.plain-case, .mono .plain-case { text-transform: none; letter-spacing: 0.01em; }

/* ---------- Header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h); padding: 0 var(--gutter);
  pointer-events: none;
  transition: transform 0.5s var(--ease), color 0.3s ease;
}
.site-header > * { pointer-events: auto; }
.site-header.is-hidden { transform: translateY(-110%); }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-size: 27px; font-weight: 500; letter-spacing: -0.045em; line-height: 1;
  transition: color 0.3s ease;
}
.logo svg { width: 20px; height: 25px; flex: none; }
.logo circle { fill: currentColor; }
.site-header.on-dark .logo { color: #ffffff; }

.nav { display: flex; align-items: center; gap: 12px; }
.nav-links { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 16px; border-radius: 7px;
  background: var(--panel); color: var(--ink);
  font: 500 16px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.pill:hover { background: var(--panel-2); }
.site-header.on-dark .pill { background: #ffffff; }
.site-header.on-dark .pill:hover { background: #e7ecea; }
.pill.dark, .site-header.on-dark .pill.dark { background: var(--ink); color: #ffffff; }
.pill.dark:hover, .site-header.on-dark .pill.dark:hover { background: #333333; }
.nav-sep { width: 1px; height: 18px; background: currentColor; opacity: 0.45; transform: skewX(-20deg); }
.menu-button { display: none; }
.menu-button .when-open { display: none; }
.menu-open .menu-button .when-open { display: inline; }
.menu-open .menu-button .when-closed { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gutter) 24px;
  background: var(--bg); color: var(--ink);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu-links { list-style: none; margin: 0; padding: 0 0 24px; border-top: 1px solid var(--line); }
.menu-links li { border-bottom: 1px solid var(--line); }
.menu-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 10px 2px;
  font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 450;
  text-decoration: none;
}
/* A right-pointing chevron, drawn with borders, so each row reads as a link (no image for the policy to block). */
.menu-links a::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); margin-right: 4px;
}
.menu-legal { list-style: none; margin: 0; padding: 24px 0; display: grid; gap: 10px; }
.menu-legal a { text-decoration: none; }
.menu .button { margin-top: auto; align-self: center; }
.menu-open .site-header .logo { color: var(--ink); }
.menu-open .site-header .pill:not(.dark) { background: var(--panel); }
.menu-open body { overflow: hidden; }

@media (max-width: 1080px) {
  .nav-links, .nav-sep { display: none; }
  .js .menu-button { display: inline-flex; }
}
@media (max-width: 480px) {
  .js .has-menu .pill.dark { display: none; }
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 16px 26px; border-radius: 8px;
  background: var(--brand); color: #ffffff;
  font: 500 17px/1.1 var(--sans); letter-spacing: -0.015em; text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.button:hover { background: var(--brand-hover); }
.button.light { background: #ffffff; color: var(--ink); }
.button.light:hover { background: #e7ecea; }
.button.quiet { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.button.quiet:hover { background: rgba(11, 92, 120, 0.08); }
.button.ghost { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75); }
.button.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.arrow { width: 18px; height: 12px; flex: none; transition: transform 0.35s var(--ease); }
.arrow circle { fill: currentColor; }
.button:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }
.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Home: hero ---------- */

.hero {
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  display: grid; grid-template-rows: 1fr auto; gap: 40px;
  padding: calc(var(--header-h) + 28px) var(--gutter) 44px;
}
.hero h1 {
  align-self: start;
  font-size: clamp(46px, 1.6rem + 5.4vw, 112px);
  line-height: 0.97; letter-spacing: -0.045em; font-weight: 400;
}
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: block; }
.nobr { white-space: nowrap; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 40px; }
.hero-foot .lead { max-width: 36ch; }
.lead { font-size: clamp(19px, 0.9rem + 0.45vw, 23px); font-weight: 500; line-height: 1.38; letter-spacing: -0.015em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Dark stages with a moving gradient ---------- */

.stage {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 var(--gutter); border-radius: var(--radius);
  background: var(--deep); color: #ffffff;
}
.stage + .stage { margin-top: clamp(12px, 1.5vw, 24px); }
/* A stage that opens out to the edges as it scrolls in. Without the script, or with reduced motion, it's clipped
   to the page's margins and stays so. Clipping, not margins, so its text never rewraps. */
.stage[data-grow] {
  margin: 0; border-radius: 0;
  clip-path: inset(0 var(--gutter) round var(--radius));
}
/* With the script, two page-coloured edges cover the margins, each with its two corners, and the script slides
   them away and shrinks the corners by transforms alone as the stage scrolls in. A clip-path changed on every
   frame made a phone repaint the whole stage as it scrolled, which flickered (TS.19). */
.stage.has-edges { clip-path: none; }
/* The edges reach 3px past the stage's top and bottom, over the page, so the stage's own edge never shows as a
   hairline beside them, where a phone's subpixel scroll draws the two a fraction apart. */
@supports (overflow: clip) {
  .stage.has-edges { overflow: visible; overflow-x: clip; }
}
.grow-edge {
  position: absolute; top: -3px; bottom: -3px; z-index: 1; width: var(--gutter);
  border-block: 3px solid var(--bg); background: var(--bg); pointer-events: none; will-change: transform;
}
.grow-edge.l { left: 0; }
.grow-edge.r { right: 0; }
/* A corner is the page's colour outside a quarter circle, reaching a pixel over the edge's side and 3px past
   the stage, so no seam shows. It shrinks toward the stage's corner. */
.grow-edge i {
  position: absolute; width: calc(var(--radius) + 1px); height: calc(var(--radius) + 3px);
  will-change: transform;
}
.grow-edge.l i { left: calc(100% - 1px); }
.grow-edge.r i { right: calc(100% - 1px); }
.grow-edge i:first-child { top: -3px; }
.grow-edge i:last-child { bottom: -3px; }
.grow-edge.l i:first-child {
  transform-origin: 1px 3px;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--radius) - 0.5px), var(--bg) calc(var(--radius) + 0.5px));
}
.grow-edge.l i:last-child {
  transform-origin: 1px calc(100% - 3px);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--radius) - 0.5px), var(--bg) calc(var(--radius) + 0.5px));
}
.grow-edge.r i:first-child {
  transform-origin: calc(100% - 1px) 3px;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--radius) - 0.5px), var(--bg) calc(var(--radius) + 0.5px));
}
.grow-edge.r i:last-child {
  transform-origin: calc(100% - 1px) calc(100% - 3px);
  background: radial-gradient(circle at 0 0, transparent calc(var(--radius) - 0.5px), var(--bg) calc(var(--radius) + 0.5px));
}
/* In a high-contrast mode the page and the stage are the same system colour, and the corners would stay light. */
@media (forced-colors: active) {
  .grow-edge { display: none; }
}
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%;
  will-change: transform;
}
.aurora .a1 { left: -30vmax; top: -25vmax; background: radial-gradient(closest-side, rgba(16, 104, 78, 0.95), rgba(16, 104, 78, 0) 72%); }
.aurora .a2 { right: -32vmax; top: 5vmax; background: radial-gradient(closest-side, rgba(11, 92, 120, 0.95), rgba(11, 92, 120, 0) 70%); }
.aurora .a3 { left: 10vmax; bottom: -45vmax; background: radial-gradient(closest-side, rgba(31, 94, 50, 0.85), rgba(31, 94, 50, 0) 70%); }
.aurora .a4 { right: 5vmax; bottom: -30vmax; width: 55vmax; height: 55vmax; background: radial-gradient(closest-side, rgba(5, 60, 58, 0.9), rgba(5, 60, 58, 0) 70%); }
.aurora::after {
  content: ""; position: absolute; inset: 0; opacity: 0.06;
  /* The grain: a small tile of noise, drawn once from an SVG noise filter, which a phone would otherwise run
     again for each tile of a stage it draws (TS.19). */
  background-image: url("grain.png");
}
.stage.blue { background: #16136b; }
.stage.blue .a1 { background: radial-gradient(closest-side, rgba(24, 58, 196, 0.95), rgba(24, 58, 196, 0) 72%); }
.stage.blue .a2 { background: radial-gradient(closest-side, rgba(9, 72, 214, 0.9), rgba(9, 72, 214, 0) 70%); }
.stage.blue .a3 { background: radial-gradient(closest-side, rgba(43, 26, 120, 0.95), rgba(43, 26, 120, 0) 70%); }
.stage.blue .a4 { background: radial-gradient(closest-side, rgba(14, 88, 170, 0.85), rgba(14, 88, 170, 0) 70%); }

@media (prefers-reduced-motion: no-preference) {
  .aurora .a1 { animation: drift-1 26s ease-in-out infinite alternate; }
  .aurora .a2 { animation: drift-2 31s ease-in-out infinite alternate; }
  .aurora .a3 { animation: drift-3 23s ease-in-out infinite alternate; }
  .aurora .a4 { animation: drift-2 37s ease-in-out infinite alternate-reverse; }
  .stage:not(.is-live) .aurora span, .motion-off .aurora span { animation-play-state: paused; }
}
@keyframes drift-1 { to { transform: translate3d(22vmax, 14vmax, 0) scale(1.18); } }
@keyframes drift-2 { to { transform: translate3d(-18vmax, 12vmax, 0) scale(0.86); } }
@keyframes drift-3 { to { transform: translate3d(14vmax, -20vmax, 0) scale(1.12); } }

/* ---------- Home: the problem ---------- */

.problem { padding: clamp(88px, 12vw, 180px) calc(var(--gutter) * 2) clamp(80px, 10vw, 150px); }
.split { display: grid; gap: 28px 40px; align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
}
.label { display: flex; align-items: center; gap: 12px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.reveal-wrap { position: relative; }
.say {
  font-size: clamp(24px, 0.8rem + 2.4vw, 48px); line-height: 1.24; letter-spacing: -0.03em;
}
.say + .say { margin-top: 0.8em; }
.say .w { transition: color 0.35s ease; }
.js .dark .say[data-words] .w { color: #9bbdb5; }          /* 3:1 or more on the stage's lightest part, as large text */
.js .dark .say[data-words] .w.lit { color: #ffffff; }
.say-dot {
  position: absolute; left: -34px; top: 0; width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; opacity: 0; transition: transform 0.35s var(--ease), opacity 0.3s ease;
}
.js .say-dot { opacity: 1; }
@media (max-width: 899px) { .say-dot { display: none; } }

.dots-figure { display: grid; place-items: center; margin: clamp(64px, 9vw, 130px) auto; }
.dots { width: min(230px, 52vw); aspect-ratio: 1; }
.kicker {
  max-width: 22ch; margin: 0 auto; text-align: center;
  font-size: clamp(32px, 1rem + 3.2vw, 62px); line-height: 1.08; letter-spacing: -0.04em;
}

/* ---------- Home: how it works ---------- */

.does { padding: clamp(88px, 11vw, 160px) var(--gutter) clamp(80px, 10vw, 140px); overflow: clip; }
.stack {
  position: relative; width: min(720px, 100%); height: clamp(400px, 46vw, 460px);
  margin: 0 auto clamp(64px, 8vw, 110px);
}
.card {
  position: absolute; border-radius: 16px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.06), 0 18px 48px -18px rgba(20, 20, 20, 0.22);
}
.card-invoice { left: 6%; top: 0; width: 54%; padding: 22px 22px 18px; z-index: 1; }
.card-invoice .paper-title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 14px; }
.paper-rows { display: grid; gap: 7px; font-size: 14px; }
.paper-rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #ededea; padding-bottom: 7px; }
.paper-rows div:last-child { border: 0; font-weight: 600; }
.card-tag {
  left: 0; top: 55%; z-index: 3; padding: 14px 18px; background: var(--panel);
  box-shadow: 0 10px 30px -16px rgba(20, 20, 20, 0.35);
}
.card-tile {
  left: 63%; top: 4%; z-index: 3; width: clamp(112px, 16vw, 150px); aspect-ratio: 1;
  display: grid; place-items: center; align-content: center; gap: 10px;
  text-align: center;
  background: var(--deep); color: #ffffff; overflow: hidden; isolation: isolate;
}
.card-tile::before {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: radial-gradient(circle at 30% 30%, #10684e, transparent 55%), radial-gradient(circle at 80% 75%, #0b5c78, transparent 55%);
}
.pixel { font-family: "Geist Pixel", var(--mono); font-size: clamp(40px, 5.4vw, 58px); line-height: 1; letter-spacing: 0.02em; }
.card-voucher { right: 3%; top: 46%; z-index: 2; width: 52%; padding: 20px 22px; }
.voucher-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.voucher-lines { display: grid; gap: 6px; font-size: 14px; }
.voucher-lines div { display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) {
  .stack { height: 560px; }
  .card-invoice { left: 0; width: 86%; padding: 18px; }
  .card-invoice .paper-title { font-size: 19px; }
  .card-tag { left: 3%; top: 46%; }
  .card-tile { left: auto; right: 0; top: 43%; width: 108px; }
  .card-voucher { right: 0; width: 88%; top: 65%; padding: 18px; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  font: 600 13px/1.1 var(--sans); letter-spacing: 0; white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; flex: none; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.plain { background: var(--panel); color: var(--ink); }

.statement { max-width: 980px; margin: 0 auto; }
.statement h2, .statement p {
  font-size: clamp(24px, 0.8rem + 2.4vw, 48px); line-height: 1.2; letter-spacing: -0.03em;
}
.statement p { margin-top: 0.6em; }
.statement .strong { font-weight: 650; letter-spacing: -0.04em; }
.statement .statement-link { margin-top: 36px; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }

.videos {
  display: grid; gap: 40px;
  max-width: 980px; margin: clamp(64px, 8vw, 110px) auto 0;
}
/* The introduction: the site's own file in a 16:9 frame, with nothing from other sites. */
.video-intro h3 {
  font-size: clamp(26px, 0.9rem + 1.8vw, 40px); line-height: 1.15; font-weight: 650; letter-spacing: -0.04em;
}
.video-note { margin: 12px 0 22px; color: var(--muted); }
.player {
  aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--ink);
}
.player video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.player video p { padding: 24px; color: #ffffff; }
.transcript { margin-top: 18px; border-bottom: 1px solid var(--line); }
.transcript summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0;
  cursor: pointer; font-weight: 600; letter-spacing: -0.01em; list-style: none;
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; transition: transform 0.2s ease; }
.transcript[open] summary::after { transform: rotate(45deg); }
.transcript-text { max-width: 64ch; padding: 6px 0 26px; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.transcript-text p + p { margin-top: 0.8em; }
/* What has changed since a video was made, kept apart from its words, which stay as the captions show them. */
.transcript-note { max-width: 64ch; margin: -12px 0 26px; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
/* The how-to's place until it's recorded: a small dotted panel beside its words, with nothing that looks playable. */

/* ---------- Home: try it yourself ---------- */

.try { padding: 0 var(--gutter) clamp(88px, 11vw, 160px); }
.rule { height: 1px; background: var(--line-ink); border: 0; margin: 0; transform-origin: left center; }
.try-grid { padding-top: clamp(40px, 5vw, 64px); }
.try-intro .lead { margin: 22px 0 30px; max-width: 30ch; color: var(--ink-2); }
@media (min-width: 900px) { .try-intro { position: sticky; top: calc(var(--header-h) + 24px); } }
.teardown-top { padding-top: clamp(40px, 5vw, 64px); }
.big-h2 { font-size: clamp(38px, 1rem + 4vw, 72px); line-height: 1; letter-spacing: -0.045em; }
.rows { position: relative; }
.rows-list { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 24px;
  padding: 22px 0 24px; border-bottom: 1px solid var(--line);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.row:first-child { padding-top: 0; }
.row h3 { font-size: clamp(22px, 1rem + 0.8vw, 30px); letter-spacing: -0.025em; line-height: 1.15; }
.row p { grid-column: 1; color: var(--ink-2); max-width: 44ch; transition: color 0.35s ease; }
.row .mono { grid-column: 2; grid-row: 1; align-self: center; }
.js .rows .row { color: var(--muted); }
.js .rows .row p { color: var(--muted); }
.js .rows .row.is-active { color: var(--ink); border-color: var(--line-ink); }
.js .rows .row.is-active p { color: var(--ink-2); }
.rows-dot {
  position: absolute; left: -30px; top: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.3s ease;
}
.js .rows-dot { opacity: 1; }
@media (max-width: 899px) { .rows-dot { display: none; } }

/* ---------- Home: your data ---------- */

.data { padding: clamp(88px, 11vw, 160px) calc(var(--gutter) * 2) clamp(64px, 7vw, 96px); }
.data .label { justify-content: center; }
.data-say {
  max-width: 17ch; margin: 28px auto clamp(72px, 9vw, 130px); text-align: center;
  font-size: clamp(38px, 1rem + 4.6vw, 90px); line-height: 1; letter-spacing: -0.05em;
}
.data-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 32px; }
@media (min-width: 700px) { .data-points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .data-points { grid-template-columns: repeat(4, 1fr); } }
.data-points li { border-top: 1px solid rgba(255, 255, 255, 0.4); padding-top: 18px; }
.data-points h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; font-weight: 500; }
.data-points p { color: #e1e6fb; }
.data-link { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 72px); }

/* ---------- Home: start ---------- */

.book { padding: clamp(72px, 9vw, 130px) clamp(20px, 4vw, 56px); }
.book-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .book-grid { grid-template-columns: 1.3fr 1fr; } }
.book h2 { font-size: clamp(52px, 1.4rem + 6.4vw, 128px); line-height: 0.95; letter-spacing: -0.055em; }
.book p { margin-top: 26px; max-width: 34ch; color: #e3efec; }
.book .cta-row { margin-top: 32px; }
.book .dots { width: min(280px, 56vw); margin: 0 auto; }
.book .mail { color: #ffffff; }

/* ---------- Footer ---------- */

.site-footer { padding: clamp(64px, 8vw, 110px) var(--gutter) var(--gutter); }
.footer-card {
  display: grid; gap: 48px 24px;
  padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--panel);
}
@media (min-width: 900px) {
  .footer-card { grid-template-columns: 1fr 1fr; min-height: 400px; grid-template-rows: 1fr auto; }
}
.footer-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.footer-brand .footer-word { color: var(--ink); font-size: clamp(64px, 11vw, 160px); line-height: 0.82; letter-spacing: -0.065em; font-weight: 500; }
.footer-brand p { max-width: 28ch; color: var(--ink-2); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 24px; align-content: start; }
.footer-cols p.mono { color: var(--muted); margin-bottom: 16px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-cols a { text-decoration: none; display: inline-block; padding: 3px 0; overflow-wrap: anywhere; }
.footer-cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-base {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  border-top: 1px solid #bcbcb8; padding-top: 20px;
}

/* ---------- Pricing ---------- */

.pill[aria-current="page"] { box-shadow: inset 0 0 0 1.5px currentColor; }
.menu-links a[aria-current="page"] { font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pricing-hero {
  display: grid; gap: 28px;
  padding: calc(var(--header-h) + clamp(32px, 6vw, 88px)) var(--gutter) clamp(56px, 7vw, 96px);
}
.pricing-hero h1 { font-size: clamp(46px, 1.6rem + 5.4vw, 112px); line-height: 0.97; letter-spacing: -0.045em; }
.pricing-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 40px; margin-top: clamp(16px, 4vw, 56px); }
.pricing-foot .lead { max-width: 40ch; }

/* Free beside Paid, which holds its three plans side by side; Enterprise spans below. */
.plans { display: grid; gap: 12px; padding: 0 var(--gutter); }
@media (min-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.plan {
  display: flex; flex-direction: column; gap: 32px;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--panel);
}
.plan-wide { grid-column: 1 / -1; }
.plan-intro { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 900px) {
  .plan-wide {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr;
    gap: 40px clamp(40px, 6vw, 96px);
  }
  .plan-wide .plan-intro { grid-area: 1 / 1; }
  .plan-wide .plan-list { grid-area: 1 / 2 / 3; }
  .plan-wide > .cta-row { grid-area: 2 / 1; align-self: end; }
}
.plan.stage { margin: 0; background: var(--deep); }
.plan-name { font-size: clamp(52px, 1rem + 4.4vw, 96px); line-height: 0.95; letter-spacing: -0.055em; margin-bottom: 20px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price .amount {
  font-size: clamp(56px, 1.2rem + 3.4vw, 84px); line-height: 0.9; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.price .per { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
/* Paid's three plans: rows on a phone, with the price on the right; columns from 700px. */
.bands { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-ink); }
.bands li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  padding: 16px 0 18px; border-bottom: 1px solid var(--line);
}
.bands h3 { grid-area: 1 / 1; font-size: clamp(22px, 1rem + 0.8vw, 30px); line-height: 1.2; letter-spacing: -0.03em; }
.bands .mcsts { grid-area: 2 / 1; color: var(--ink-2); }
.bands .price { grid-area: 1 / 2; flex-direction: column; align-items: flex-end; gap: 2px; }
.bands .price .amount { font-size: clamp(44px, 1rem + 2.4vw, 68px); }
.bands .year { grid-area: 2 / 2; justify-self: end; color: var(--ink-2); font-size: 15px; }
.yearly { margin-top: 16px; color: var(--ink-2); }
@media (min-width: 700px) {
  .bands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .bands li {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 20px 20px 24px; border-bottom: 0; border-left: 1px solid var(--line);
  }
  .bands li:first-child { padding-left: 0; border-left: 0; }
  .bands .price { align-items: flex-start; gap: 6px; margin-top: 8px; }
  .bands .mcsts { margin-top: auto; padding-top: 10px; font-weight: 500; color: var(--ink); }
}
.plan .terms { font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; max-width: 28ch; }
.plan .for { margin-top: 8px; color: var(--ink-2); }
.plan.dark .for { color: #e3efec; }
.limits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-ink); }
.limits li {
  padding: 14px 0 15px; border-bottom: 1px solid var(--line);
  font-size: clamp(22px, 1rem + 0.8vw, 30px); line-height: 1.2; letter-spacing: -0.03em;
}
.plan.dark .limits { border-color: rgba(255, 255, 255, 0.7); }
.plan.dark .limits li { border-color: rgba(255, 255, 255, 0.22); }
.highlights li { display: grid; gap: 8px; padding: 18px 0 20px; }
.highlights strong { font-weight: inherit; }
.highlights span { max-width: 34ch; font-size: 16px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); }
.plan.dark .highlights span { color: #e3efec; }
.includes-label { margin-bottom: 16px; }
.plan.dark .includes-label, .plan.dark .plan-intro > .mono { color: #e3efec; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.includes li { position: relative; padding-left: 20px; line-height: 1.45; }
.includes li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.plan > .cta-row { margin-top: auto; padding-top: 8px; }
.plans-note { padding: 18px var(--gutter) 0; color: var(--muted); font-size: 16px; }

.compare { padding: clamp(96px, 12vw, 170px) var(--gutter) 0; }
.compare-table { margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; }
.compare table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: clamp(15px, 0.8rem + 0.3vw, 18px); }
.compare .col-label { width: 34%; }
.compare th, .compare td {
  padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; vertical-align: top; line-height: 1.4; overflow-wrap: anywhere;
}
.compare thead th {
  padding-bottom: 18px; border-bottom-color: var(--line-ink);
  font-size: clamp(22px, 1rem + 1vw, 34px); font-weight: 400; letter-spacing: -0.035em;
}
.compare tbody th {
  padding-top: 19px; color: var(--ink-2);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
/* On a phone, the four columns scroll sideways inside the table's box, with what each row is kept in view. */
@media (max-width: 699px) {
  .compare table { min-width: 600px; }
  .compare .col-label { width: 28%; }
  .compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
}
.yes, .no { display: inline-flex; align-items: baseline; gap: 8px; }
.yes svg, .no svg { width: 14px; height: 14px; flex: none; transform: translateY(2px); }
.yes svg { color: var(--ok); }
.no { color: var(--muted); }

.questions { padding: clamp(96px, 12vw, 170px) var(--gutter); }
.faq { border-top: 1px solid var(--line-ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(21px, 1rem + 0.7vw, 28px); line-height: 1.2; letter-spacing: -0.025em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 60ch; padding: 0 0 26px; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.faq details ul { max-width: 60ch; margin: -12px 0 0; padding: 0 0 26px 1.2em; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.faq a { color: var(--brand); text-underline-offset: 3px; }

/* ---------- Motion (only with the script, only with motion) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Blocks fade up as they come into view. */
  .js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="2"] { transition-delay: 0.08s; }
  .js [data-reveal="3"] { transition-delay: 0.16s; }
  .js [data-reveal="4"] { transition-delay: 0.24s; }

  /* Headlines and statements slide up line by line from behind a mask. The script splits them into lines. */
  .ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .ln > span { display: block; transform: translate3d(0, 110%, 0); transition: transform 1.05s var(--ease); }
  .lines-in .ln > span { transform: none; }

  /* The cards rise into place one after another. Translate and scale, so they add to the scroll's parallax. */
  .js [data-rise] { opacity: 0; translate: 0 64px; scale: 0.96; transition: opacity 0.8s ease, translate 1.2s var(--ease), scale 1.2s var(--ease); }
  .js [data-rise].is-in { opacity: 1; translate: 0 0; scale: 1; }
  .js [data-rise="2"] { transition-delay: 0.12s; }
  .js [data-rise="3"] { transition-delay: 0.24s; }
  .js [data-rise="4"] { transition-delay: 0.36s; }

  /* Rules draw across from the left. */
  .js .rule[data-draw] { transform: scaleX(0); transition: transform 1.4s var(--ease); }
  .js .rule[data-draw].is-in { transform: none; }

  /* The headline rises in, then the rest of the hero. */
  .hero .line > span, .pricing-hero .line > span { animation: rise 1.1s var(--ease) both; }
  .hero .line:nth-child(2) > span, .pricing-hero .line:nth-child(2) > span { animation-delay: 0.08s; }
  .hero-foot { animation: fade 1.2s 0.35s ease both; }
  .card { will-change: transform; }

  /* The first visit's intro: dots gather into Proppy's mark, then the panel lifts away. */
  .has-intro::after {
    content: ""; position: fixed; inset: 0; z-index: 90; background: var(--deep); pointer-events: none;
    animation: lift 0.85s cubic-bezier(0.76, 0, 0.24, 1) 1.55s both;   /* lifts even if the script fails */
  }
  .has-intro.intro-ready::after { display: none; }
  .intro-curtain {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
    background: var(--deep); color: #ffffff; pointer-events: none;
    animation: lift 0.85s cubic-bezier(0.76, 0, 0.24, 1) 1.55s both;
  }
  .intro-curtain canvas { width: min(170px, 38vw); aspect-ratio: 1; }
  .intro-curtain .mono { position: absolute; top: 50%; translate: 0 -50%; color: #e3efec; }
  .intro-curtain .mono:first-of-type { left: clamp(20px, 8vw, 120px); }
  .intro-curtain .mono:last-of-type { right: clamp(20px, 8vw, 120px); }
  @media (max-width: 700px) { .intro-curtain .mono { display: none; } }
  .has-intro .hero .line > span { animation-delay: 1.8s; }
  .has-intro .hero .line:nth-child(2) > span { animation-delay: 1.88s; }
  .has-intro .hero-foot { animation-delay: 2.15s; }
  .has-intro .site-header { animation: fade 0.8s 2s ease both; }
}
@keyframes rise { from { transform: translate3d(0, 105%, 0); } }
@keyframes fade { from { opacity: 0; } }
@keyframes lift { to { transform: translate3d(0, -100%, 0); } }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); } /* clear of the header, which shows when scrolling up */

/* ---------- Legal pages ---------- */

.doc { max-width: 780px; margin: 0 auto; padding: calc(var(--header-h) + clamp(40px, 7vw, 96px)) var(--gutter) 0; }
.doc .eyebrow { color: var(--muted); margin-bottom: 22px; }
.doc h1 { font-size: clamp(42px, 1rem + 4.4vw, 80px); line-height: 1; letter-spacing: -0.05em; margin-bottom: 24px; }
.doc .sub, .doc .version { color: var(--ink-2); font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; }
.doc .version { margin-bottom: 28px; }
.doc .version p { margin: 0; }
.doc h2 {
  font-size: clamp(26px, 1rem + 1vw, 32px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 500;
  margin: 64px 0 16px; padding-top: 28px; border-top: 1px solid var(--line);
}
.doc p, .doc li { font-size: 18px; line-height: 1.65; color: #262626; }
.doc p { margin: 0 0 16px; }
.doc ul, .doc ol { padding-left: 24px; margin: 0 0 16px; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--muted); }
.doc a { color: var(--brand); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc a:hover { color: var(--brand-hover); }
.doc strong { font-weight: 600; }
.doc address { font-style: normal; }
.doc code { font-family: var(--mono); font-size: 0.86em; background: var(--panel); padding: 2px 6px; border-radius: 5px; }
.summary { margin-top: 44px; padding: 8px 28px 16px; border-radius: 20px; background: var(--panel); }
.summary h2 { border: 0; padding-top: 0; margin-top: 22px; }
nav.contents { margin: 28px 0 0; padding: 24px 28px; border-radius: 20px; border: 1px solid var(--line); }
nav.contents p { margin: 0 0 12px; color: var(--muted); font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
nav.contents ol { margin: 0; padding-left: 24px; columns: 2 220px; column-gap: 40px; }
nav.contents li { font-size: 17px; margin: 4px 0; break-inside: avoid; }
.table { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.5; }
th { background: var(--panel); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

/* ---------- A video's own page, for emails to link to (TS.18) ---------- */

.watch { max-width: 980px; margin: 0 auto; padding: calc(var(--header-h) + clamp(32px, 6vw, 80px)) var(--gutter) 0; }
.watch .eyebrow { color: var(--muted); margin-bottom: 18px; }
.watch h1 { max-width: 20ch; font-size: clamp(36px, 1rem + 3.6vw, 68px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 500; }
.watch .sub { max-width: 60ch; margin-top: 20px; color: var(--ink-2); font-size: clamp(18px, 0.9rem + 0.3vw, 20px); line-height: 1.5; letter-spacing: -0.01em; }
.watch .video-note { margin: clamp(28px, 4vw, 40px) 0 14px; }
/* An upright video keeps its shape, no wider than a phone, and no taller than most screens. */
.player.upright { aspect-ratio: 9 / 16; width: min(100%, 380px); }
.watch-next { margin-top: clamp(36px, 5vw, 56px); padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--panel); }
.watch-next h2 { font-size: clamp(26px, 0.9rem + 1.8vw, 40px); line-height: 1.15; font-weight: 650; letter-spacing: -0.04em; }
.watch-next p { max-width: 56ch; margin-top: 12px; color: var(--ink-2); font-size: 18px; line-height: 1.5; }
.watch-next .cta-row { margin-top: 24px; }

/* ---------- The tutorials, short videos on one page (TV.6) ---------- */

.tutorial-list ol {
  display: grid; gap: 6px; margin: clamp(28px, 4vw, 40px) 0 0; padding-left: 1.6em;
  list-style: decimal; color: var(--ink-2); font-size: 18px; line-height: 1.5;
}
.tutorial-list a { display: inline-block; padding: 4px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tutorial-list a:hover { text-decoration-thickness: 2px; }
/* Each tutorial's heading clears the fixed header when a link to it is followed. */
/* A link to the section that gathers what Proppy learns (TS.28). */
.learns-link { max-width: 60ch; margin-top: 20px; color: var(--ink-2); font-size: 18px; line-height: 1.5; }
.learns-link a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.learns-link a:hover { text-decoration-thickness: 2px; }
.tutorial, .learns { margin-top: clamp(48px, 7vw, 88px); scroll-margin-top: calc(var(--header-h) + 16px); }
.tutorial h2, .learns h2 { font-size: clamp(26px, 0.9rem + 1.8vw, 40px); line-height: 1.15; font-weight: 650; letter-spacing: -0.04em; }
.tutorial .video-note { margin: 12px 0 8px; }
.tutorial .what, .learns .what { max-width: 60ch; margin-bottom: 20px; color: var(--ink-2); font-size: 18px; line-height: 1.5; }
/* Each tutorial's written guide, under its transcript: how the feature works, and why. */
.guide {
  margin-top: 24px; padding: clamp(20px, 3.5vw, 36px); border-radius: 18px; background: var(--panel);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.guide h3 { margin-bottom: 14px; font-size: clamp(22px, 0.9rem + 0.8vw, 28px); line-height: 1.2; font-weight: 650; letter-spacing: -0.03em; }
.guide p, .guide li { max-width: 68ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.guide > * + * { margin-top: 14px; }
.guide ul, .guide ol { display: grid; gap: 8px; margin-bottom: 0; padding-left: 1.3em; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide strong { color: var(--ink); font-weight: 600; }

/* ---------- Printing ---------- */

@media print {
  .site-header, .menu, .skip, .aurora, .dots-figure, .stack, .grow-edge { display: none !important; }
  .stage { background: none !important; color: var(--ink) !important; margin: 0 !important; }
  .js [data-reveal], .js [data-rise] { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; }
  .ln > span, .js .rule[data-draw] { transform: none !important; }
  .intro-curtain, .has-intro::after { display: none !important; }
  .js .say .w { color: inherit !important; }
}

/* ---------- Reduced motion: nothing moves or fades ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* Pause motion, in the footer's last row, where the script adds it on pages that move. */
.motion-toggle {
  margin-left: auto; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.motion-toggle[aria-pressed="true"]::before { content: "\2713  "; }