/* FINDERS website. Shared by every market page (/watches/, and the ones to follow).
   Built from the app's own system (Design/Tokens.swift, DESIGN_SYSTEM.md): paper and
   vault, hairlines rather than boxes, Space Grotesk for content, mono for metadata,
   blue only where something opens. No screenshots: every artifact on the page is
   drawn in the app's type, so it stays sharp and can respond. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #1a1a1a;
  --meta: #6e6e6e;
  --faint: #a8a8a8;
  --fill: #f7f7f7;
  --accent: #005296;
  --accent-hover: #003a6b;
  --red: #a3261f;
  --rule: rgba(0, 0, 0, .11);

  --vault-bg: #0a0a0a;
  --vault-ghost: #1f1f1f;
  --vault-ink: #ffffff;
  --vault-body: #d8d8d8;
  --vault-meta: #8a8a8a;
  --vault-rule: rgba(255, 255, 255, .14);
  --vault-accent: #5c9fd6;

  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);

  --gutter: clamp(20px, 4vw, 48px);
  --wide: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Clip, not hide: a hiding body is a scroll box to Safari on iPhone, and the sticky
     pieces (the record, the folder) would scroll away inside it instead of holding. */
  overflow-x: clip;
}
::selection { background: var(--ink); color: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
button { font: inherit; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- The two voices ------------------------------------------------------ */

.wordmark { font: 700 19px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.wordmark b { color: var(--accent); }

.label {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--meta);
}
.label.ink { color: var(--ink); }

.head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}

.section-title { margin-top: 0; font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -.04em; max-width: 14em; }
.section-lede { margin-top: 24px; max-width: 600px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--ink-soft); }

/* ---- Motion: words rise out of their line, blocks slide up, all on one clock ---- */

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 55ms); }
.on .w > span, .w.on > span, [data-words].on .w > span { transform: none; }

.js [data-line] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-line].on { opacity: 1; transform: none; }
.js [data-in] { opacity: 0; transition: opacity 1s ease; transition-delay: var(--d, 0ms); }
.js [data-in].on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w > span { transform: none !important; transition: none !important; }
  .js [data-line], .js [data-in] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- 00 · Hero ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: clamp(20px, 3vh, 36px) var(--gutter) clamp(28px, 5vh, 50px);
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  overflow: hidden;
}
.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Beside the wordmark: the way to the app, small, in ink. Until it is in the App Store it
   says so and goes nowhere. */
.brand { display: flex; align-items: center; gap: 16px; }
.store { display: inline-flex; align-items: center; padding: 7px 11px 8px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 500 12px/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; transition: background .3s; }
.store[href]:hover { background: var(--accent); color: var(--paper); }
.store[aria-disabled="true"] { cursor: default; }
/* At the right of the header, the one blue control: the way to the mailing list. */
.join { display: inline-flex; align-items: center; padding: 7px 14px 8px; border-radius: 999px; background: var(--accent); color: #fff;
  font: 500 12px/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; transition: background .3s; }
.join:hover { background: var(--accent-hover); color: #fff; }
/* Until the app is out, the store button only leads to the list too; a narrow phone keeps one. */
@media (max-width: 420px) { .store[aria-disabled="true"] { display: none; } }
@media (max-width: 600px) { .brand { gap: 12px; } }
.nav { display: flex; align-items: baseline; gap: 10px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.nav span { color: var(--faint); }
.nav a { color: var(--meta); padding-bottom: 4px; background: linear-gradient(var(--ink), var(--ink)) no-repeat left bottom / 0 1px; transition: color .3s, background-size .4s var(--ease); }
.nav a:hover { color: var(--ink); background-size: 100% 1px; }
.nav-small { display: none; position: relative; z-index: 2; margin-top: 16px; }
@media (max-width: 760px) { .top .nav { display: none; } .nav-small { display: flex; } }

/* The register on the app's first screen, set large as the whole first screen's ground.
   It starts below the header and is seen whole at the top, where each record is filed. */
.ledger {
  position: absolute; z-index: 0;
  top: clamp(64px, 9vh, 92px); bottom: 0; left: var(--gutter); right: var(--gutter);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
  pointer-events: none;
}
/* Paper lifts behind the title so it reads over the register, as a scrim over film. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.84) 16%, rgba(255,255,255,0) 44%);
}
.ledger li {
  flex: none;
  display: grid; grid-template-columns: clamp(64px, 8vw, 110px) 1fr auto; gap: 0 24px; align-items: baseline;
  padding: clamp(12px, 1.8vh, 18px) 0;
  border-bottom: 1px solid var(--rule);
  transition: opacity .8s var(--ease);
}
.ledger li.leaving { position: absolute; left: 0; right: 0; }

/* Filing: the top record snaps into its line, a piece of it shoots along the row, and
   goes up into its collection's drawer, seen from above. A layer of its own. */
.filing { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.filing i { position: absolute; display: block; }
.filing .slit { height: 2px; margin-top: -1px; border-radius: 2px; transform-origin: 50% 50%; background: var(--accent); }
.filing .piece { width: 22px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent); }
.filing .beam { width: 2px; border-radius: 2px; transform-origin: 50% 100%; background: var(--accent); }
.filing .drawer { width: 40px; height: 22px; }
.filing .drawer b { position: absolute; display: block; }
.filing .drawer .tag { left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap;
  font: 400 8px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--meta); }
.filing .drawer .edge { left: -6px; right: -6px; top: 0; height: 1px; background: var(--ink); }
.filing .drawer .well { left: 3px; right: 3px; top: 1px; height: 18px; overflow: hidden; }
.filing .drawer .box { inset: 0; border: 1px solid var(--ink); border-top: 0; background:
  linear-gradient(90deg, transparent 22%, var(--rule) 22%, var(--rule) calc(22% + 1px), transparent 0) ,
  linear-gradient(90deg, transparent 40%, var(--rule) 40%, var(--rule) calc(40% + 1px), transparent 0),
  linear-gradient(90deg, transparent 58%, var(--rule) 58%, var(--rule) calc(58% + 1px), transparent 0), var(--paper);
  transform: translateY(-100%); transition: border-color .2s; }
.filing .drawer .slip { left: calc(76% - 1px); top: 4px; bottom: 2px; width: 2px; background: var(--accent); transform-origin: 50% 100%; transform: scaleY(0); }
.filing .drawer.hit .box { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .filing { display: none; } }
.ledger .no { font: 400 clamp(13px, 1.2vw, 16px)/1 var(--mono); color: var(--accent); }
.ledger .ti { font: 500 clamp(20px, 2.4vw, 34px)/1.1 var(--sans); letter-spacing: -.025em; color: #c4c4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger .de { font: 400 10px/1 var(--mono); letter-spacing: .14em; color: var(--faint); white-space: nowrap; }
.ledger li:last-child .ti { color: #9a9a9a; }
.js .ledger:not(.live) li { display: none; }
@media (max-width: 760px) {
  .ledger li { grid-template-columns: 52px 1fr; }
  .ledger .de { grid-column: 2; margin-top: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: .1em; }
}

/* The title arrives last: the register writes alone, then the headline is swept in from
   the left edge and the line below follows. Low and left, as a cover. */
.hero-copy { position: relative; z-index: 1; width: 100%; margin-top: auto; padding-bottom: clamp(4px, 1.5vh, 16px); }
.slide { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.js [data-slide] { transform: translateX(-104%); transition: transform 1.15s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
.js [data-slide].on { transform: none; }
/* Each on one line: the script sets the largest size that fits the width (data-fit is the cap). */
.hero h1 { font-size: 48px; line-height: 1.05; letter-spacing: -.04em; white-space: nowrap; text-align: left; }
.hero-lede { margin-top: clamp(10px, 1.6vh, 16px); font-size: 16px; line-height: 1.5; color: var(--ink-soft); white-space: nowrap; text-align: left; max-width: 46em; }
@media (prefers-reduced-motion: reduce) { .js [data-slide] { transform: none !important; transition: none !important; } }
.hero-actions { margin-top: clamp(24px, 3.6vh, 36px); display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* The way in: solid ink, the reference's white button turned for paper. */
.cta {
  display: inline-block;
  padding: 10px 16px 11px;
  background: var(--ink); color: var(--paper);
  font: 500 17px/1 var(--sans); letter-spacing: -.01em;
  transition: background .3s;
}
.cta:hover { background: var(--accent); }
.cta .w { padding-bottom: .15em; margin-bottom: -.15em; }

/* A phone's first screen: the register behind, the title and the way in at its centre. */
@media (max-width: 600px) {
  .hero { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
  .ledger li { padding: 10px 0; }
  .ledger .ti { font-size: 20px; }
  .hero h1 { font-size: clamp(26px, 7.4vw, 30px) !important; white-space: normal; }
  .hero-lede { font-size: 14px !important; white-space: normal; max-width: 22rem; }
  .hero-lede.short { font-size: 15px !important; }
  .hero::after { background: linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 26%, rgba(255,255,255,0) 56%); }
}

/* ---- 01 · The record: held in place while its features take the stage --- */

.record { padding-top: clamp(40px, 6vw, 80px); }
/* The track is tall; the stage inside it sticks. Scrolling the track steps the features. */
.pin { position: relative; height: 560svh; }
.pin-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 6vh, 64px); }
.pin-head { flex: none; }
.record-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: center; }

/* The app itself, on an iPhone 17 Pro: the Submariner's page from FINDERS Dev, two
   screenshots joined into one. As each feature takes the stage the page scrolls to its row
   and lights it, as the app's own rows read in blue where paper stands behind them. */
.device { justify-self: center; display: flex; flex-direction: column; align-items: center; }
.phone {
  --w: min(330px, calc(72svh * .46));
  position: relative; width: var(--w); margin: 0;
  padding: calc(var(--w) * .028);
  border-radius: calc(var(--w) * .157);
  background: #0c0c0d;
  box-shadow: inset 0 0 0 calc(var(--w) * .006) #55555a, inset 0 0 0 calc(var(--w) * .013) #1b1b1d, 0 40px 80px -36px rgba(0, 0, 0, .4);
}
/* The buttons on its sides: action and volume on the left, the side button on the right. */
.phone::before, .phone::after { content: ""; position: absolute; width: calc(var(--w) * .011); border-radius: 2px; background: #2e2e31; }
.phone::before { left: calc(var(--w) * -.009); top: 27%; height: 9%; box-shadow: 0 calc(var(--w) * .25) 0 #2e2e31, 0 calc(var(--w) * -.15) 0 #2e2e31; }
.phone::after { right: calc(var(--w) * -.009); top: 29%; height: 13%; }
.phone-screen { position: relative; aspect-ratio: 1206 / 2622; border-radius: calc(var(--w) * .13); overflow: hidden; background: #fff; isolation: isolate; }
.phone-page { position: absolute; left: 0; top: 0; width: 100%; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.phone-page img { display: block; width: 100%; height: auto; }
/* A lit row: the app's blue behind it, a rule at its edge, the rest of the page veiled. */
.phone-row {
  position: absolute; left: 2.6%; right: 2.6%; top: var(--top); height: var(--h);
  background: rgba(0, 82, 150, .07);
  box-shadow: inset calc(var(--w) * .008) 0 0 var(--accent), 0 0 0 100vmax rgba(255, 255, 255, .36);
  opacity: 0; transition: opacity .7s cubic-bezier(.4, 0, .2, 1); pointer-events: none;
}
.phone-row.lit { opacity: 1; }
/* Once the page has scrolled off its photograph, the status bar sits on paper. */
.phone-bar { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; opacity: 0; transition: opacity .5s; }
.phone-bar.on { opacity: 1; }
.opens { margin-top: 22px; display: flex; gap: 12px; align-items: baseline; justify-content: center; max-width: calc(var(--w, 330px) * 1.4); font-size: 13px; color: var(--ink-soft); min-height: 20px; text-align: center; }
.opens .label { flex: none; }

/* The stage: one feature at a time. The next rises into place; then it turns blue. */
.stage { position: relative; }
.ticks { display: flex; align-items: center; gap: 6px; margin-bottom: 28px; }
.ticks i { position: relative; width: 32px; height: 2px; background: var(--rule); overflow: hidden; }
.ticks i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
.features { list-style: none; margin: 0; padding: 0; display: grid; }
/* Every feature sits in the same place; the script sets each one's opacity and rise from
   the scroll position itself, so the motion follows the reader's hand. */
.features li { grid-area: 1 / 1; opacity: 0; will-change: transform, opacity; }
.features li[aria-hidden="true"] { pointer-events: none; }
.features h3 { margin-top: 12px; font: 500 clamp(32px, 3.6vw, 52px)/1.02 var(--sans); letter-spacing: -.04em; color: var(--ink); transition: color .9s cubic-bezier(.4, 0, .2, 1); }
.features li.lit h3 { color: var(--accent); }
.features p { margin-top: 18px; max-width: 540px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.features p.why, .duo .why { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--meta); font-size: 16px; line-height: 1.55; max-width: 540px; }

@media (max-width: 860px) {
  .pin-stage { justify-content: flex-start; padding-top: 16px; gap: 16px; }
  .record-grid { grid-template-columns: 1fr; gap: 28px; }
  .phone { --w: min(220px, calc(44svh * .46)); }
  .opens { display: none; }
  .ticks { margin-bottom: 16px; }
  .features h3 { font-size: 30px; }
  .features p { font-size: 15px; margin-top: 12px; }
}

/* ---- 02 · Make it yours: two pieces of the app, moving ------------------- */

.yours { padding: clamp(80px, 10vw, 140px) 0; background: var(--fill); }
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.duo + .duo { margin-top: clamp(72px, 9vw, 120px); }
.duo.flip .duo-copy { order: 2; }
.duo-copy .section-title { margin-top: 0; font-size: clamp(34px, 4.4vw, 60px); }
.duo-copy .section-lede { font-size: 17px; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo.flip .duo-copy { order: 0; } }

.art { position: relative; background: var(--paper); border: 1px solid var(--rule); padding: clamp(20px, 2.6vw, 32px); min-height: 460px; overflow: hidden; }
.art.build { padding-bottom: clamp(48px, 5vw, 60px); min-height: 740px; }
@media (max-width: 600px) { .art.build { min-height: 640px; } .build .plate { aspect-ratio: 16 / 10; } }
.art * { transition: opacity .5s var(--ease), transform .6s var(--ease), background .4s, color .4s, border-color .4s; }

/* Collections: + is pressed, a name is typed, its rows are asked for one by one, the new
   collection lands in the bar and a thing in it shows those rows. Then the next one. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.chip-c { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(0,0,0,.16); border-radius: 999px; font: 500 12px/1 var(--sans); white-space: nowrap; }
.chip-c b { font: 400 10px/1 var(--mono); color: var(--meta); }
.chip-c.plus { width: 32px; justify-content: center; padding: 8px 0; font: 400 15px/1 var(--sans); }
.build.s1:not(.s5) .chip-c.plus { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-c.added { border-color: var(--ink); background: var(--ink); color: var(--paper); animation: pop .8s cubic-bezier(.2, .8, .2, 1); }
.chip-c.added b { color: #bbb; }
.chip-c.settled { background: none; color: var(--ink); border-color: rgba(0,0,0,.16); }
.chip-c.settled b { color: var(--meta); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

.sheet { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink); opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1) !important; }
.build.s1 .sheet { opacity: 1; transform: none; }
.build.s5 .sheet { opacity: 0; transform: translateY(-12px); }
.sheet-name { margin-top: 8px; min-height: 1.2em; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font: 600 clamp(26px, 2.6vw, 34px)/1.1 var(--sans); letter-spacing: -.035em; }
.caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sheet-sub { margin-top: 18px; }
.sheet-rows { list-style: none; margin: 8px 0 0; padding: 0; min-height: 180px; }
.sheet-rows li { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; opacity: 0; transform: translateY(10px); transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1) !important; }
.sheet-rows li.in { opacity: 1; transform: none; }
.sheet-rows li .label { font-size: 9px; color: var(--accent); }
.sheet-rows li.renamed .label { color: var(--ink); }

/* The item, as its page opens in the app: the picture on the FINDERS background, then its
   collection, its name and its rows. */
.mini { position: absolute; left: clamp(20px, 2.6vw, 32px); right: clamp(20px, 2.6vw, 32px); top: 108px; opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1) !important; }
.build.s5 .mini { opacity: 1; transform: none; transition-delay: .2s !important; }

/* The picture: the item drawn in hairline ink on a flat plate, above the catalogue line
   along the foot. The drawings fill their parts with the plate's grey, so keep the two alike. */
.plate { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #f3f4f6; }
.plate img { position: absolute; left: 22%; top: 16%; width: 56%; height: 58%; object-fit: contain;
  opacity: 0; transform: translateY(8px); transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform 1.2s cubic-bezier(.2, .8, .2, 1) !important; }
.build.s5 .plate img { opacity: 1; transform: none; transition-delay: .2s !important; }
/* The catalogue line along the foot: hairline, archive number, wordmark. FIND is the only blue. */
.plate-foot { position: absolute; left: 7%; right: 7%; bottom: 6%; padding-top: 6px; border-top: 1px solid rgba(0,0,0,.18); display: flex; justify-content: space-between; align-items: baseline; font: 400 8px/1 var(--mono); letter-spacing: .14em; color: #6f747b; }
.plate-wm { font: 700 9px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.plate-wm b { color: var(--accent); }

.mini-label { margin-top: 16px; }
.mini-title { margin-top: 6px; font: 600 clamp(22px, 2.2vw, 28px)/1.05 var(--sans); letter-spacing: -.035em; }
.mini dl { margin: 14px 0 0; }
.mini dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.mini dt { font: 400 9px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--meta); white-space: nowrap; }
.mini dd { margin: 0; font-size: 14px; text-align: right; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini dd.blue { color: var(--accent); }
/* Each value is written in, left to right, one after another once the item has settled. */
.mini dd span { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 0s linear 1s !important; }
.build.s5 .mini dd span { clip-path: inset(0 0 0 0); transition: clip-path .45s cubic-bezier(.45, 0, .25, 1) !important; transition-delay: calc(.5s + var(--i) * .15s) !important; }

/* Which collection of the set is playing. */
.cycle { position: absolute; left: clamp(20px, 2.6vw, 32px); bottom: clamp(16px, 2vw, 24px); display: flex; gap: 6px; }
.cycle i { width: 22px; height: 2px; background: var(--rule); }
.cycle i.on { background: var(--accent); }

/* Adding documents: a paper in the finder, a sweep, what it says lifted out to be confirmed, then filed. */
.finder { position: relative; padding: 22px; }
.corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--ink); }
.corner.tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.corner.tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.corner.bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.corner.br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.scan.s1 .corner { border-color: var(--accent); }
.paper {
  background: #fbf9f4; border: 1px solid var(--rule);
  padding: 18px 20px; font-family: Georgia, "Times New Roman", serif; color: #2a2620;
  opacity: 0; transform: translateY(20px) rotate(-1.5deg);
}
.scan.s1 .paper { opacity: 1; transform: rotate(-1.5deg); }
.scan.s2 .paper { transform: none; }
.p-issuer { text-align: center; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: #6b4a2b; }
.p-lines { text-align: center; font-size: 10px; font-style: italic; color: #6f665a; padding-bottom: 10px; border-bottom: 1px solid rgba(42,38,32,.3); }
.p-head { margin-top: 12px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; }
.p-head span:first-child { font-weight: 700; }
.p-body { margin-top: 12px; font-size: 13px; line-height: 1.6; }
.p-total { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(42,38,32,.25); display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.hit { padding: 0 2px; border-radius: 2px; box-shadow: 0 0 0 1px transparent; }
.scan.s3 .hit { background: rgba(0, 82, 150, .12); box-shadow: 0 0 0 1px rgba(0, 82, 150, .5); }
.sweep { position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: var(--accent); box-shadow: 0 0 18px 4px rgba(0, 82, 150, .25); opacity: 0; }
.scan.s2 .sweep { opacity: 1; animation: sweep .7s var(--ease) forwards; }
.scan.s3 .sweep { opacity: 0; }
@keyframes sweep { from { top: 22px; } to { top: calc(100% - 24px); } }

.found { list-style: none; margin: 18px 0 0; padding: 0; }
.found li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; opacity: 0; transform: translateY(10px); }
.found li:last-child { border-bottom: 1px solid var(--rule); }
.found .mono { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; }
.found b { font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 6px 8px; border: 1px solid rgba(0, 82, 150, .4); border-radius: 4px; }
.scan.s3 .found li { opacity: 1; transform: none; }
.scan.s3 .found .f2 { transition-delay: .12s; } .scan.s3 .found .f3 { transition-delay: .24s; } .scan.s3 .found .f4 { transition-delay: .36s; }
.scan.s4 .found .f1 b, .scan.s5 .found .f2 b, .scan.s6 .found .f3 b, .scan.s7 .found .f4 b { background: var(--accent); color: #fff; border-color: var(--accent); }
.scan.s4 .found .f1 b, .scan.s5 .found .f2 b, .scan.s6 .found .f3 b, .scan.s7 .found .f4 b { font-size: 0; }
.scan.s4 .found .f1 b::before, .scan.s5 .found .f2 b::before, .scan.s6 .found .f3 b::before, .scan.s7 .found .f4 b::before { content: "✓ Confirmed"; font-size: 10px; }
.filed { margin-top: 16px; color: var(--accent); opacity: 0; }
.scan.s8 .filed { opacity: 1; }
.scan.s8 .paper { transform: translateY(-6px) scale(.97); }

@media (max-width: 600px) { .art { min-height: 420px; } .found li { grid-template-columns: 80px 1fr auto; font-size: 14px; } }

/* The two ways paper comes in, one after the other in the same frame: a receipt scanned,
   then a dealer's page pasted. The bars at the foot say which is playing. */
.art.scenes { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding-bottom: clamp(48px, 5vw, 60px); }
.scene { grid-area: 1 / 1; min-width: 0; opacity: 0; pointer-events: none; }
.scene.on { opacity: 1; }

/* A dealer's page: the link types itself, the page opens, a sweep reads it, and its
   specification is lifted out to be confirmed. The price is on the page and never read. */
.url { margin: 8px 0 0; min-height: 46px; padding: 13px 14px; border: 1px solid var(--rule); border-radius: 6px; font: 400 13px/1.4 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link.s1 .url { border-color: var(--accent); }
.link.s2 .url .caret { display: none; }
.webpage { position: relative; margin-top: 14px; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; opacity: 0; transform: translateY(16px); }
.link.s2 .webpage { opacity: 1; transform: none; }
.pg-bar { display: flex; align-items: center; gap: 5px; margin: 0; padding: 8px 10px; background: var(--fill); border-bottom: 1px solid var(--rule); font: 400 10px/1 var(--mono); color: var(--meta); }
.pg-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .14); }
.pg-bar span { margin-left: 8px; }
.pg-body { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; padding: 16px; }
.pg-body img { width: 100%; display: block; }
.pg-house { margin: 0; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.pg-title { margin: 6px 0 0; font: 500 16px/1.25 var(--sans); }
.pg-spec { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 10px 0 0; font-size: 13px; }
.pg-spec dt { color: var(--meta); }
.pg-spec dd { margin: 0; }
.price em { margin-left: 8px; font: 400 9px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); opacity: 0; }
.link .sweep { left: 0; right: 0; top: 0; }
.link.s3 .sweep { opacity: 1; animation: sweep .7s var(--ease) forwards; }
.link.s4 .sweep { opacity: 0; }
.link.s4 .hit { background: rgba(0, 82, 150, .12); box-shadow: 0 0 0 1px rgba(0, 82, 150, .5); }
.link.s4 .price span { color: var(--faint); }
.link.s4 .price em { opacity: 1; }
.link .found { margin-top: 14px; }
.link.s4 .found li { opacity: 1; transform: none; }
.link.s4 .found .f2 { transition-delay: .12s; } .link.s4 .found .f3 { transition-delay: .24s; } .link.s4 .found .f4 { transition-delay: .36s; }
.link.s5 .found .f1 b, .link.s6 .found .f2 b, .link.s7 .found .f3 b, .link.s8 .found .f4 b { background: var(--accent); color: #fff; border-color: var(--accent); font-size: 0; }
.link.s5 .found .f1 b::before, .link.s6 .found .f2 b::before, .link.s7 .found .f3 b::before, .link.s8 .found .f4 b::before { content: "✓ Confirmed"; font-size: 10px; }
.link.s9 .filed { opacity: 1; }
.link.s9 .webpage { transform: translateY(-4px) scale(.98); }
@media (max-width: 600px) { .pg-body { grid-template-columns: 64px 1fr; gap: 12px; } .url { font-size: 12px; } }

@media (prefers-reduced-motion: reduce) { .art * { transition: none !important; animation: none !important; } }

/* ---- 03 · Export --------------------------------------------------------- */

.export { padding: clamp(80px, 10vw, 140px) 0; }
.export-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
/* Who it is for, across the width: each card holds the files from the pack that reader
   needs, fanned as they would lie on a desk, then who and what. Four across, two on a phone. */
.uses { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.uses li { padding: 20px 20px 22px; background: var(--fill); border-radius: 6px; }
.uses .label { display: block; margin-top: 18px; color: var(--accent); }
.uses p { margin: 8px 0 0; font-size: 16px; line-height: 1.4; }
.use-stack { position: relative; height: 128px; }
.doc { position: absolute; left: 50%; bottom: 0; z-index: var(--z); box-sizing: border-box; width: 70px; aspect-ratio: 210 / 297; padding: 8px 7px; display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 8px 18px rgba(0,0,0,.07);
  transform: translateX(calc(-50% + var(--o) * 1px)) rotate(var(--r)); transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.doc b { font: 400 6px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; white-space: nowrap; }
.doc i { display: block; height: 2px; background: #e4e4e4; }
.doc i:nth-of-type(2) { width: 80%; } .doc i:nth-of-type(4) { width: 64%; } .doc i:nth-of-type(5) { width: 72%; }
.doc u { margin-top: auto; align-self: flex-end; width: 40%; height: 4px; background: var(--ink); text-decoration: none; }
.doc.valuation u { width: auto; height: auto; background: none; font: 400 7px/1 var(--mono); color: var(--accent); }
.doc.service u, .doc.invoice u { background: #cfcfcf; }
.doc.record { border-top: 3px solid var(--accent); }
.doc.record b { color: var(--accent); }
.doc.photo { width: 74px; aspect-ratio: 1; padding: 6px; background: #fff; }
.doc.photo img { width: 100%; height: 100%; object-fit: contain; background: #f3f4f6; }
.uses li:hover .doc { transform: translateX(calc(-50% + var(--o) * 1.6px)) rotate(calc(var(--r) * 1.5)); }
@media (max-width: 860px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .uses li { padding: 14px 14px 16px; }
  .uses .label { margin-top: 14px; font-size: 9px; }
  .uses p { font-size: 14px; }
  .use-stack { height: 96px; }
  .doc { width: 54px; padding: 6px 5px; gap: 3px; }
  .doc b { font-size: 5px; }
  .doc.photo { width: 58px; padding: 4px; }
}

/* How it leaves, in three rows: what is said on the left, what is seen on the right,
   drawn at one height. The app's export button, the folder it makes under it, where it goes. */
.how { list-style: none; margin: 36px 0 0; padding: 0; max-width: 560px; }
.how li { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; min-height: 72px; padding: 12px 0; border-top: 1px solid var(--rule); }
.how li:last-child { border-bottom: 1px solid var(--rule); }
.how .label { color: var(--accent); }
.how p { margin: 0; font-size: 16px; line-height: 1.45; }
.how-art { display: flex; align-items: center; justify-content: flex-end; height: 44px; }
.how-share { position: relative; margin: 0 5px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--accent); color: #fff; }
.how-share svg { width: 20px; height: 20px; }
.how-zip { display: flex; justify-content: center; width: 50px; }
.how-zip i { position: relative; width: 34px; height: 26px; background: var(--accent); border-radius: 2px 4px 4px 4px; }
.how-zip i::before { content: ""; position: absolute; left: 0; top: -5px; width: 13px; height: 6px; background: var(--accent-hover); border-radius: 3px 3px 0 0; }
.how-to em { font: 400 9px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); }
.how-to { gap: 16px; }
.how-to > span { display: grid; justify-items: center; gap: 5px; color: var(--ink); }
.how-to svg { width: 22px; height: 22px; }
/* A phone keeps each step to one line: smaller marks, the destinations without their names. */
@media (max-width: 600px) {
  .how { margin-top: 28px; }
  .how li { grid-template-columns: 26px 1fr auto; gap: 10px; min-height: 60px; padding: 8px 0; }
  .how p { font-size: 15px; }
  .how-art { height: 36px; }
  .how-share { width: 34px; height: 34px; border-radius: 8px; margin: 0; }
  .how-share svg { width: 17px; height: 17px; }
  .how-zip { width: 34px; }
  .how-zip i { width: 28px; height: 21px; }
  .how-zip i::before { width: 11px; height: 5px; top: -4px; }
  .how-to { gap: 12px; }
  .how-to em { display: none; }
  .how-to svg { width: 20px; height: 20px; }
}

.spec { list-style: none; padding: 0; margin: 0; }
.spec li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.spec li:last-child { border-bottom: 1px solid var(--rule); }
.spec .label { flex: none; white-space: nowrap; }
.spec .v { text-align: right; color: var(--ink-soft); }

/* The folder: the export as a thing you open. It is held on screen while the reader
   scrolls, and the scroll lifts each file out from behind the front in turn, as the
   recipient will find them; once all are out it holds a moment, then the page moves on. */
.folder-track.held::after { content: ""; display: block; height: 60vh; }
/* Held, the stage is the whole screen, so nothing round the folder moves while the files come out. */
.folder-track.held { margin-top: clamp(28px, 4vw, 56px); }
.folder-track.held .folder-stage { position: sticky; top: 0; height: 100svh; margin-top: 0; justify-content: center; box-sizing: border-box; }
.folder-track.held.pinned .folder-stage { position: relative; top: 0; will-change: transform; }
.export-grid { align-items: end; }
.folder-stage { --k: 1; margin-top: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; align-items: center; }
/* Once every file is out, the invitation, in blue, on one line, in the room the files leave above. */
.folder-line { align-self: stretch; margin: 0 0 calc(320px * var(--k)); font: 600 clamp(20px, 5.9vw, 56px)/1 var(--sans); letter-spacing: -.04em; white-space: nowrap; color: var(--accent);
  opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.folder-track.done .folder-line { opacity: 1; transform: none; }
.folder { position: relative; width: calc(380px * var(--k)); height: calc(250px * var(--k)); perspective: 1400px; }
.f-back {
  position: absolute; inset: 0;
  background: var(--accent-hover); border-radius: 0 calc(10px * var(--k)) calc(6px * var(--k)) calc(6px * var(--k));
}
.f-tab {
  position: absolute; left: 0; top: calc(-26px * var(--k)); height: calc(28px * var(--k)); padding: 0 calc(14px * var(--k));
  display: flex; align-items: center;
  background: var(--accent-hover); border-radius: calc(8px * var(--k)) calc(8px * var(--k)) 0 0;
  font: 400 calc(9px * var(--k) + 1px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.fsheet {
  position: absolute; left: 50%; bottom: calc(64px * var(--k)); z-index: 2; margin: 0;
  width: calc(118px * var(--k)); padding: calc(6px * var(--k)) calc(6px * var(--k)) calc(7px * var(--k));
  background: var(--paper); border: 1px solid rgba(0,0,0,.12);
  transform: translateX(-50%) translateY(calc(var(--i) * -4px * var(--k))) rotate(calc(var(--r) * .12));
  transform-origin: 50% 100%;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), box-shadow .9s;
  transition-delay: calc((9 - var(--i)) * 25ms);
}
.fsheet img { width: 100%; display: block; }
.fsheet.photo img { aspect-ratio: 1; object-fit: cover; }
.fsheet.page img, .fsheet.lead img { aspect-ratio: 210 / 297; object-fit: cover; object-position: top; }
.fsheet.page { width: calc(112px * var(--k)); }
.fsheet.lead { width: calc(156px * var(--k)); z-index: 3; }
.fsheet figcaption { margin-top: calc(6px * var(--k)); font: 500 calc(9px * var(--k) + 2px)/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsheet.lead figcaption { color: var(--ink); }
/* The papers fan to the right, under the record's edge, so their names sit on the side left showing. */
.fsheet.page figcaption { text-align: right; }
.f-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74%; z-index: 4;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: calc(16px * var(--k)) calc(18px * var(--k));
  background: var(--accent); border-top: 1px solid rgba(255,255,255,.28);
  border-radius: calc(4px * var(--k)) calc(4px * var(--k)) calc(6px * var(--k)) calc(6px * var(--k));
  transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.f-front .label { font-size: calc(9px * var(--k) + 1.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.72); }
.f-front .label.ink { color: #fff; }
/* The wordmark, white on the blue, top left of the front as on the app's cover. */
.f-front .wordmark { position: absolute; left: calc(18px * var(--k)); top: calc(16px * var(--k)); font-size: calc(14px * var(--k) + 3px); color: #fff; }
.f-front .wordmark b { color: #fff; }

.fsheet.out {
  transform: translate(calc(-50% + var(--x) * 1px * var(--k)), calc(var(--y) * 1px * var(--k))) rotate(var(--r));
  box-shadow: 0 calc(14px * var(--k)) calc(30px * var(--k)) rgba(0,0,0,.08);
  transition-delay: 0s;
}
.folder.open .f-front { transform: rotateX(-24deg); }

/* On a wide screen the folder sits at the left and the files lie out to its right, the
   record first, the papers above and the photographs below. A phone keeps the fan. */
@media (min-width: 861px) {
  .folder-stage { align-items: flex-start; padding-bottom: calc(40px * var(--k)); }
  .folder-line { margin-bottom: calc(250px * var(--k)); }
  .fsheet.out {
    transform: translate(calc(-50% + var(--dx) * 1px * var(--k)), calc(var(--dy) * 1px * var(--k))) rotate(var(--dr));
  }
}
@media (min-width: 861px) and (max-width: 1239px) { .folder-stage { --k: .85; } }
@media (min-width: 861px) and (max-width: 1059px) { .folder-stage { --k: .7; } }
@media (max-width: 860px) { .folder-stage { --k: .78; } }
/* A phone holds the whole screen, so the folder is set larger and low, and the files rise
   out of it into three rows of three filling the room above, the record top centre. */
@media (max-width: 600px) {
  .folder-stage { --k: .6; }
  .folder-line { margin-bottom: 416px; white-space: normal; text-wrap: balance; line-height: 1.05; }
  .fsheet.out { transform: translate(calc(-50% + var(--mx) * 1px), calc(var(--my) * 1px)) rotate(var(--mr)); }
}
@media (prefers-reduced-motion: reduce) { .fsheet, .f-front { transition: none !important; } }

@media (min-width: 861px) { .export-grid .how { margin-top: 0; } }
@media (max-width: 860px) { .export-grid { grid-template-columns: 1fr; } }

/* ---- 04 · The vault ------------------------------------------------------ */

.vault { background: var(--vault-bg); color: var(--vault-ink); padding: clamp(80px, 11vw, 140px) 0 clamp(48px, 6vw, 72px); overflow: hidden; }
.vault .label { color: var(--vault-meta); }
.vault .head { border-color: var(--vault-ink); }
.vault .head .label:first-child { color: var(--vault-ink); }
.vault .ghost { font: 400 clamp(96px, 15vw, 210px)/.8 var(--mono); letter-spacing: -.04em; color: var(--vault-ghost); margin: 0 0 0 -.06em; user-select: none; }
.vault h2 { margin-top: -.42em; position: relative; font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -.04em; max-width: 13em; }
.vault .lede { margin-top: 28px; max-width: 620px; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--vault-body); }
.nots { list-style: none; padding: 0; margin: clamp(56px, 7vw, 88px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.nots li { padding: 20px 24px clamp(48px, 6vw, 72px) 0; border-top: 1px solid var(--vault-rule); }
.nots li + li { padding-left: 24px; border-left: 1px solid var(--vault-rule); }
.nots strong { display: block; font: 600 20px/1.15 var(--sans); letter-spacing: -.02em; }
.nots span { display: block; margin-top: 8px; color: var(--vault-meta); font-size: 15px; line-height: 1.45; }
/* The closing line under a rule the width of the four above, whose dividers run down to it. */
.vault .is {
  margin-top: 0; padding: clamp(28px, 3.6vw, 44px) 24px 0;
  border-top: 1px solid var(--vault-rule);
  text-align: center; font: 600 20px/1.3 var(--sans); letter-spacing: -.02em; color: var(--vault-ink);
}
@media (max-width: 860px) { .nots { grid-template-columns: 1fr 1fr; } .nots li { padding-bottom: 28px; } .nots li + li { padding-left: 0; border-left: 0; } }
@media (max-width: 480px) {
  .nots { grid-template-columns: 1fr; }
  .vault .is { padding: 22px 0 0; text-align: left; font-size: 18px; }
}

/* ---- 05 · Sign up -------------------------------------------------------- */

.closing { padding: clamp(80px, 11vw, 140px) 0; }
.closing .wrap { max-width: 720px; }
/* One field and its button, under a plain line. */
.signup h2 { margin-top: 14px; font: 600 clamp(28px, 3.6vw, 40px)/1.08 var(--sans); letter-spacing: -.035em; }
.signup .field { display: flex; gap: 8px; margin-top: 28px; }
.signup input[type=email] {
  flex: 1; min-width: 0; height: 54px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); outline: none;
  font: 400 16px/1 var(--sans); letter-spacing: -.01em; color: var(--ink);
  transition: border-color .2s;
}
.signup input::placeholder { color: var(--faint); }
.signup input:focus { border-color: var(--ink); }
.signup .btn { width: auto; flex: none; }
.signup .trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.signup .fine { margin-top: 14px; font-size: 14px; color: var(--meta); }
@media (max-width: 480px) { .signup .field { flex-direction: column; } .signup input[type=email] { flex: none; } .signup .btn { width: 100%; } }

.btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: #fff;
  font: 500 16px/1 var(--sans); letter-spacing: -.01em;
  transition: background .3s;
}
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn:disabled { opacity: .6; cursor: default; }
.btn[aria-disabled="true"] { background: var(--ink); cursor: default; }
.closing p.note { margin-top: 12px; }
.closing p.note:empty { display: none; }
.closing p.note.ok { color: var(--accent); }
.closing p.note.error { color: var(--red); }
.closing .after { margin-top: 16px; }

/* ---- Foot ---------------------------------------------------------------- */

footer { border-top: 1px solid var(--rule); padding: 28px 0 40px; }
footer .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; }
footer p { font-size: 12px; line-height: 1.5; color: var(--meta); max-width: 760px; }