/* ortake.com. Paper, ink and one order's record. Depth comes from materials
   (a raised record card, screenshots set on a stage). Motion happens once and
   then holds still: the hero arrives, its screenshot settles flat as it
   scrolls up, the record plays out its day, and sections settle in as they
   are reached. Orange is the brand's, and it marks the thing that went wrong. */

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

:root {
  color-scheme: light;
  --paper: #f6f5f1;
  --paper-2: #edebe4;
  --card: #fffefb;
  --text: #16181d;
  --text-2: #4a4f5a;
  --text-3: #6b707b;
  --rule: #dcdad3;
  --rule-soft: #e7e5de;
  --ink: #16213a;
  --ink-hover: #24324f;
  --on-ink: #ffffff;
  --accent: #e8590c;
  --accent-text: #b8460a; /* the brand orange, dark enough for small text on paper */
  --accent-wash: rgb(232 89 12 / .07);
  --code: #f0eee8;
  --frame: rgb(22 33 58 / .09);
  --shadow-card: 0 0 0 1px var(--frame), 0 1px 2px rgb(22 33 58 / .05), 0 18px 40px -20px rgb(22 33 58 / .22);
  --shadow-shot: 0 0 0 1px var(--frame), 0 10px 24px -14px rgb(22 33 58 / .2), 0 34px 70px -34px rgb(22 33 58 / .38);
  --c-confirmed: #4a5466;
  --c-transit: #3a6fd8;
  --c-partial: #c7890a;
  --c-review: #8a8f99;
  --c-done: #2f8a4f;
  --navy: #16213a;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --wrap: 1120px;
  interpolate-size: allow-keywords;
}
/* Dark follows the system unless the visitor picked a theme (data-theme on <html>). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111214; --paper-2: #18191c; --card: #1b1c20; --text: #ecebe7; --text-2: #b0b2b8; --text-3: #8c9099;
  --rule: #2b2d32; --rule-soft: #24262a; --ink: #ecebe7; --ink-hover: #ffffff; --on-ink: #111214;
  --accent: #f26b1d; --accent-text: #ff8a4a; --accent-wash: rgb(255 138 74 / .08); --code: #25272b; --frame: rgb(255 255 255 / .08);
  --shadow-card: 0 0 0 1px var(--frame), 0 18px 40px -20px rgb(0 0 0 / .7);
  --shadow-shot: 0 0 0 1px var(--frame), 0 34px 70px -34px rgb(0 0 0 / .8);
  --c-confirmed: #b0b2b8; --c-transit: #6b9bff; --c-partial: #e0a52a; --c-review: #8c9099; --c-done: #4fbf77;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111214; --paper-2: #18191c; --card: #1b1c20; --text: #ecebe7; --text-2: #b0b2b8; --text-3: #8c9099;
    --rule: #2b2d32; --rule-soft: #24262a; --ink: #ecebe7; --ink-hover: #ffffff; --on-ink: #111214;
    --accent: #f26b1d; --accent-text: #ff8a4a; --accent-wash: rgb(255 138 74 / .08); --code: #25272b; --frame: rgb(255 255 255 / .08);
    --shadow-card: 0 0 0 1px var(--frame), 0 18px 40px -20px rgb(0 0 0 / .7);
    --shadow-shot: 0 0 0 1px var(--frame), 0 34px 70px -34px rgb(0 0 0 / .8);
    --c-confirmed: #b0b2b8; --c-transit: #6b9bff; --c-partial: #e0a52a; --c-review: #8c9099; --c-done: #4fbf77;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--text); font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mono, time, code { font-family: var(--mono); font-size: .86em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgb(232 89 12 / .2); }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 30; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--on-ink); }
.skip:focus { left: 12px; }
.on-dark { display: none !important; }
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none !important; }
  :root:not([data-theme="light"]) .on-dark { display: block !important; }
}

/* ------------------------------------------------------------------ controls */
.btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 1px 2px rgb(22 33 58 / .18); transition: background-color .15s, transform .12s var(--ease-out); }
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: translateY(1px); }
.btn--lg { height: 48px; padding: 0 22px; font-size: 16px; }
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--rule); transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }
.arr { display: inline-block; transition: transform .2s var(--ease-out); }
a:hover > .arr { transform: translateX(3px); }
.themebtn { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; transition: color .15s, background-color .15s; }
.themebtn:hover { color: var(--text); background: var(--paper-2); }
.themebtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .themebtn { display: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ------------------------------------------------------------------ header */
/* Sticks to the top; the hairline appears once the page has moved under it. */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.bar.is-stuck { border-bottom-color: var(--rule); }
.top { display: flex; align-items: center; gap: 36px; height: 68px; }
.logo img { height: 22px; width: auto; }
.top__links { display: flex; gap: 28px; margin-right: auto; font-size: 15px; }
.top__links a, .top__demo { color: var(--text-2); text-decoration: none; transition: color .15s; }
.top__links a { padding-bottom: 2px; background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: color .15s, background-size .3s var(--ease-out); }
.top__links a:hover { background-size: 100% 1px; }
.top__links a:hover, .top__demo:hover { color: var(--text); }
.top__end { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 15px; }

/* ------------------------------------------------------------------ hero */
/* One big line, then the whole overview, tipped back until it scrolls up. */
.hero { display: flex; flex-direction: column; align-items: center; padding: 104px 0 0; text-align: center; }
.hero h1 { font-size: clamp(42px, 7.2vw, 84px); line-height: 1; letter-spacing: -.05em; }
.hero h1 > span { display: block; }
.hero__lede { margin-top: 30px; max-width: 36em; font-size: 20px; line-height: 1.55; color: var(--text-2); }
.hero .actions { justify-content: center; margin-top: 36px; }
.hero__shot { width: 100%; margin: 80px 0 0; perspective: 1800px; perspective-origin: 50% 0; }
/* site.js sets --flat from 0 to 1 as it scrolls; without it the screenshot is simply flat. */
.hero__tilt { position: relative; padding: 8px; border-radius: 22px; background: color-mix(in srgb, var(--card) 50%, var(--paper-2)); box-shadow: var(--shadow-shot); transform-origin: 50% 0; transform: rotateX(calc((1 - var(--flat, 1)) * 24deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg)) scale(calc(.9 + var(--flat, 1) * .1 + var(--lift, 0) * .011)); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
/* Under the cursor it leans toward the pointer and lifts, like album art held up to the light. */
.hero__tilt.is-held { transition: transform .12s linear, box-shadow .5s var(--ease-out); box-shadow: var(--shadow-shot), 0 40px 80px -40px rgb(22 33 58 / .28); }
.hero__tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .12), transparent 60%); opacity: 0; transition: opacity .5s var(--ease-out); }
.hero__tilt.is-held::after { opacity: 1; }
.hero__tilt img { border-radius: 14px; box-shadow: 0 0 0 1px var(--frame); }

/* The record: SO-73019's day on a raised card, a rail down the times. */
.record { width: 100%; margin: 0; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.record__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 22px 16px; border-bottom: 1px solid var(--rule-soft); font-size: 13px; color: var(--text-3); }
.record__id { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); }
.record__id span { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--text-3); }
.record__clock { white-space: nowrap; font-size: 12.5px; }
.record__clock b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.record__log { margin: 0; padding: 10px 0 12px; list-style: none; }
/* Each entry reads as a status with its source, then one short detail. */
.record__log li { --rail: calc(22px + 3.1rem + 11px); position: relative; display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; column-gap: 22px; align-items: baseline; padding: 9px 22px; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.record__log li::before { content: ""; position: absolute; z-index: 1; left: calc(var(--rail) - 3.5px); top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--text-3); }
.record__log li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: calc(var(--rail) - .5px); top: 26px; bottom: -17px; width: 1px; background: var(--rule); }
.record__log time { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.record__log li > b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.record__log .src { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.record__log p { grid-column: 2 / 4; margin-top: 1px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.record__log .is-bad { background: var(--accent-wash); }
.record__log .is-bad b, .record__log .is-bad time, .record__log .is-bad p { color: var(--accent-text); }
.record__log .is-bad::before { background: var(--accent); box-shadow: none; }
.record__log .is-issue::before { background: var(--text); box-shadow: none; }
/* The point of the story, once the day has played. */
.record__foot { display: flex; align-items: baseline; gap: 12px; padding: 16px 22px 18px; border-top: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--paper) 55%, var(--card)); font-size: 13.5px; line-height: 1.4; color: var(--text-2); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.record__foot b { flex: none; font-size: 28px; font-weight: 600; letter-spacing: -.035em; color: var(--text); font-variant-numeric: tabular-nums; }
/* site.js plays the day once: each entry lands at its time and the clock follows. */
.record.is-playing li:not(.is-in) { opacity: 0; transform: translateY(6px); }
.record__log li::after { transition: opacity .5s var(--ease-out); }
.record.is-playing li:has(+ li:not(.is-in))::after { opacity: 0; }
.record.is-playing:not(.is-done) .record__foot { opacity: 0; transform: translateY(4px); }

/* ------------------------------------------------------------------ stage */
/* Screenshots stand on a tinted stage and run off its bottom edge. */
.stage { margin: 0; min-width: 0; }
.stage__frame { position: relative; aspect-ratio: 16 / 9; padding: clamp(16px, 4.4vw, 56px) clamp(16px, 4.4vw, 56px) 0; border-radius: 18px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule-soft); overflow: hidden; }
.stage__frame img { width: 100%; border-radius: 10px 10px 0 0; box-shadow: var(--shadow-shot); }
.stage--sm .stage__frame { padding: clamp(14px, 2.6vw, 30px) clamp(14px, 2.6vw, 30px) 0; border-radius: 14px; }
.stage--sm .stage__frame img { border-radius: 8px 8px 0 0; }
.stage figcaption { margin-top: 14px; max-width: 46em; font-size: 14px; color: var(--text-3); }
.stage__frame img { transition: translate 1.1s var(--ease-out) .12s, transform .5s var(--ease-out); }
.stage:hover .stage__frame img { transform: translateY(-6px); }

/* ------------------------------------------------------------------ sections */
.sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; padding-top: 216px; }
.sec__head h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.06; letter-spacing: -.035em; }
.sec__head p { margin-top: 16px; max-width: 30em; font-size: 17px; color: var(--text-2); }
.sec__head p + p { margin-top: 20px; }
/* Where the section's content runs full width, its heading and intro sit side by side. */
.sec__head--row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: last baseline; }
.sec__head--row p { margin-top: 0; }
.sec > dl, .sec > .faq { grid-column: 2; min-width: 0; }
.sec__aside { grid-column: 2; grid-row: 1; align-self: end; font-size: 17px; color: var(--text-2); }
.story { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; padding-top: 192px; }
.story h2 > span { display: block; }
.story .sec__head p { max-width: 24em; }
.sec__aside a { color: var(--text); text-decoration-color: var(--rule); transition: text-decoration-color .2s; }
.sec__aside a:hover { text-decoration-color: currentColor; }

/* How it works: each point beside the thing it describes. */
.how { grid-column: 1 / -1; display: grid; gap: 144px; margin: 96px 0 0; padding: 0; list-style: none; counter-reset: h; }
.how > li { counter-increment: h; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 72px; align-items: start; }
.how__text { padding-top: 16px; background: linear-gradient(var(--text) 0 0) 0 0 / 100% 1px no-repeat; }
.how__text::before { content: counter(h); display: block; margin-bottom: 22px; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.how__text h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.how__text p { margin-top: 10px; font-size: 16px; color: var(--text-2); }

/* The ledger: what each source said, and the milestone it became. */
.ledger { margin: 0; min-width: 0; }
.ledger table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); font-size: 14.5px; }
.ledger th { padding: 15px 20px 11px; border-bottom: 1px solid var(--rule-soft); text-align: left; font-size: 13px; font-weight: 500; color: var(--text-3); }
.ledger td { padding: 13px 20px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; transition: background-color .15s; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.ledger tbody tr:last-child td:last-child { border-bottom-right-radius: 16px; }
.ledger tbody tr:hover td { background: color-mix(in srgb, var(--paper) 60%, var(--card)); }
.ledger td:first-child { width: 22%; white-space: nowrap; color: var(--text-2); }
.ledger th:last-child, .ledger td:last-child { position: relative; width: 33%; padding-left: 46px; }
.ledger td:last-child::before { content: "→"; position: absolute; left: 18px; top: 13px; color: var(--text-3); }
.ledger code { padding: 3px 7px; border-radius: 6px; background: var(--code); font-size: 12.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Specimens: one real demo record each, set like a card from the product. */
.spec { margin: 0; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; font-size: 15px; }
.spec__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.spec__head code { margin-right: 6px; font-size: 12.5px; color: var(--text); }
.spec__head .ms { font-size: 13px; }
.spec__body { padding: 20px 20px 22px; }
.spec__src { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.spec__msg { margin-top: 10px; }
.spec__msg code { padding: 5px 9px; border-radius: 7px; background: var(--code); font-size: 14.5px; color: var(--text); }
.spec__note { margin-top: 12px; font-size: 14px; color: var(--text-3); }
.spec__facts { margin: 0; padding: 6px 20px 8px; }
.spec__facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.spec__facts > div:last-child { border-bottom: 0; }
.spec__facts dt { font-size: 13.5px; color: var(--text-3); }
.spec__facts dd { margin: 0; font-size: 14.5px; }
.spec__facts code { font-size: 12.5px; }
.spec__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 20px; border-top: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--paper) 55%, var(--card)); font-size: 14px; color: var(--text-2); }
.spec__foot .ms { font-size: 13.5px; }
.spec__foot code { font-size: 12.5px; color: var(--text); }

/* Milestone marks, in the dashboard's colors. */
.ms { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; white-space: nowrap; }
.ms::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c-confirmed); }
.ms--transit::before { background: var(--c-transit); }
.ms--partial::before, .ms--open::before { background: var(--c-partial); }
.ms--done::before { background: var(--c-done); }
.ms--review::before { background: none; box-shadow: inset 0 0 0 1.5px var(--c-review); }
.ms--quiet::before { background: var(--c-review); }
.ms--failed { color: var(--accent-text); }
.ms--failed::before { background: var(--accent); }

/* Product shots. */
.shots { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 72px 32px; margin-top: 88px; }
.shot--wide { grid-column: 1 / -1; }

/* Security: a spec sheet. The mono line is the fact; the sentence says what it means. */
.specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 88px 0 0; padding: 1px 0 0; list-style: none; background: linear-gradient(var(--text) 0 0) 0 0 / 100% 1px no-repeat; }
.specs li { padding: 22px 24px 28px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.specs li:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.specs code { display: block; margin-bottom: 20px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.specs h3 { font-size: 15px; font-weight: 600; }
.specs p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.specs__more { display: flex; align-items: flex-end; font-size: 15px; }

/* The pilot: four weeks as a schedule bar, then what happens after. */
.plan { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .9fr); gap: 6px; margin: 88px 0 0; padding: 0; list-style: none; }
.plan li { display: flex; flex-direction: column; min-height: 148px; padding: 16px 18px 18px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--frame); }
.plan span { margin-bottom: auto; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.plan b { margin-top: 20px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.plan p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.plan--w3 { grid-column: span 2; background: var(--navy) !important; color: #f4f2ec; box-shadow: none !important; }
.plan--w3 span { color: rgb(244 242 236 / .6); }
.plan--w3 p { color: rgb(244 242 236 / .75); }
.plan--after { margin-left: 10px; background: none !important; box-shadow: none !important; border: 1px dashed var(--rule); }

/* Common questions: answers ease open where the browser can animate it. */
.faq { border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 19px 0; font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 18px; line-height: 1; color: var(--text-3); transition: transform .3s var(--ease-out), color .15s; }
.faq summary:hover::after { color: var(--text); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 22px 0; color: var(--text-2); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .32s var(--ease-out), content-visibility .32s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* Closing: the one navy panel. */
.end { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: end; margin-top: 216px; padding: clamp(36px, 6vw, 76px); border-radius: 22px; background: var(--navy); color: #f4f2ec; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.end h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -.04em; }
.end p { max-width: 30em; font-size: 18px; line-height: 1.55; color: rgb(244 242 236 / .72); }
.end .actions { margin-top: 28px; }
.end .btn { background: #f6f5f1; color: var(--navy); box-shadow: none; }
.end .btn:hover { background: #ffffff; }
.end .link { color: #f4f2ec; text-decoration-color: rgb(244 242 236 / .3); }
.end .link:hover { text-decoration-color: #f4f2ec; }
.end :focus-visible { outline-color: #f4f2ec; }

/* ------------------------------------------------------------------ footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 96px; padding: 28px 0 48px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--text-3); }
.foot img { height: 18px; width: auto; }
.foot p { margin-right: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { color: var(--text-2); text-decoration: none; transition: color .15s; }
.foot a:hover { color: var(--text); }

/* ------------------------------------------------------------------ motion */
/* Everything here happens once and then holds still. With reduced motion none
   of it runs, and without site.js nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  /* The hero arrives: the headline a line at a time, then the rest, then the screenshot from further down. */
  .hero h1 > span, .hero__lede, .hero .actions { animation: rise .9s var(--ease-out) both; }
  .hero h1 > span + span { animation-delay: .09s; }
  .hero__lede { animation-delay: .2s; }
  .hero .actions { animation-delay: .28s; }
  .hero__shot { animation: rise-far 1.3s var(--ease-out) .34s both; }

  /* Sections settle in as they are reached (site.js adds .reveals, then .is-in). */
  .reveals [data-reveal] { transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); }
  .reveals [data-reveal]:not(.is-in) { opacity: 0; translate: 0 22px; }
  /* Lists arrive one item after another; site.js numbers them with --i. */
  .reveals [data-stagger] > * { transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 80ms), translate .7s var(--ease-out) calc(var(--i, 0) * 80ms); }
  .reveals [data-stagger]:not(.is-in) > * { opacity: 0; translate: 0 16px; }
  /* Ink rules draw across before what sits under them. */
  .reveals .specs { transition: background-size 1s var(--ease-out); }
  .reveals .how__text { transition: opacity .7s var(--ease-out), translate .7s var(--ease-out), background-size 1s var(--ease-out); }
  .reveals .how > li:not(.is-in) .how__text, .reveals .specs:not(.is-in) { background-size: 0 1px; }
  /* The ledger: each message arrives, then the milestone it became. */
  .reveals .ledger td:last-child { transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 80ms + .4s), translate .6s var(--ease-out) calc(var(--i, 0) * 80ms + .4s), background-color .15s; }
  .reveals .ledger tbody:not(.is-in) td:last-child { opacity: 0; translate: -10px 0; }
  /* A product shot rises onto its stage after the stage appears. */
  .reveals .stage:not(.is-in) .stage__frame img { translate: 0 48px; }
}
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
@keyframes rise-far { from { opacity: 0; translate: 0 72px; } }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 1000px) {
  .hero__shot { margin-top: 64px; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story .sec__head { margin-bottom: 48px; }
  .record { max-width: 560px; }
}
@media (max-width: 900px) {
  .sec, .end { grid-template-columns: minmax(0, 1fr); }
  .sec > dl, .sec > .faq, .sec__aside { grid-column: 1; grid-row: auto; }
  .sec { padding-top: 144px; }
  .sec__head { margin-bottom: 48px; }
  .sec__head--row { grid-template-columns: minmax(0, 1fr); }
  .sec__head--row p { margin-top: 16px; padding-bottom: 0; }
  .sec__aside { margin-bottom: 0; }
  .story { padding-top: 136px; }
  .how { gap: 96px; margin-top: 16px; }
  .how > li { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .how__text::before { margin-bottom: 12px; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  .specs li:nth-child(4n + 1) { padding-left: 24px; border-left: 1px solid var(--rule); }
  .specs li:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .plan { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .plan--after { grid-column: span 2; margin: 4px 0 0; min-height: 0; }
  .shots { margin-top: 56px; }
  .end { margin-top: 160px; }
  .end__body { margin-top: 20px; }
}
@media (max-width: 760px) {
  .top__links { display: none; }
  .shots { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .top { height: 60px; gap: 16px; }
  .top__end { gap: 12px; }
  .hero { padding-top: 56px; }
  .hero__lede, .end p { font-size: 17px; }
  .hero__lede { margin-top: 22px; }
  .hero .actions { margin-top: 28px; }
  .hero__shot { margin-top: 48px; perspective: 900px; }
  .hero__tilt { padding: 4px; border-radius: 14px; }
  .hero__tilt img { border-radius: 10px; }
  .record__head { padding-inline: 18px; }
  .record__log li { --rail: calc(18px + 3.1rem + 9px); padding-inline: 18px; column-gap: 18px; }
  .stage__frame { border-radius: 12px; }
  .record__log li { grid-template-columns: 3.1rem minmax(0, 1fr) auto; }
  .record__foot b { font-size: 24px; }
  .specs li { padding: 18px 16px 22px; }
  .specs code { margin-bottom: 14px; font-size: 15px; }
  .plan li { min-height: 0; }
  .plan b { margin-top: 14px; }
  .faq details p { padding-right: 0; }
  /* The ledger becomes one entry per message. */
  .ledger table { display: block; }
  .ledger thead { display: none; }
  .ledger tbody { display: block; }
  .ledger tr { display: grid; row-gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); }
  .ledger tbody tr:last-child { border-bottom: 0; }
  .ledger td, .ledger td:first-child, .ledger td:nth-child(2) { width: auto; padding: 0; border: 0; background: none !important; }
  .ledger td:first-child { font-size: 13px; color: var(--text-3); }
  .ledger td:last-child { width: auto; padding-left: 22px; }
  .ledger td:last-child::before { left: 0; top: 0; }
}
@media (max-width: 480px) {
  .record__id span { display: none; }
}
@media (max-width: 400px) {
  .top__demo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}