/* Ostrel: the product. Built from the app's own palette and rules (near-black
   ground, hairline rules, square edges) with a flair of its own: the wide
   wordmark, and drawn panels in the app's language in place of screenshots.
   One family, Libre Franklin, set light. Deliberately dark in every OS
   theme, the way the app itself is. Lines are plain hairlines: nothing that
   is not a control may look like one.
   Colour follows the app's rule: it only ever means attention. Amber is
   behind or worth a look, red is broken, and the only other colour is a
   platform's small identity square.
   Text and buttons stay bright (the user, 2026-10-13: mid greys looked low
   key and merged with the ground). Hierarchy comes from size and weight
   first; the ink steps sit close to white, and the main button is white,
   not grey. */

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/libre-franklin-latin.woff2') format('woff2');
}

/* Horrac's own face, only for the Horrac lockup at the top left. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
}

@view-transition { navigation: auto; }

:root {
  --ground: #0e100f;
  --well: #090b0a;
  --card: #0b0d0c;
  --panel: #131615;
  --raise: #171b1a;
  --rule: #272c2b;
  --rule-2: #3c4441;
  --track: #1c201f;
  --edge: #7d8883; /* outline buttons: bright enough to read as a control */
  --ink: #f2f6f4;
  --ink-2: #e3eae6;
  --ink-3: #c6d0cb;
  --ink-4: #aab5b0;
  --amber: #c79a4a;
  --red: #c85f45;
  --sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Only for real code (OAuth scope names). Never for labels. */
  --code: ui-monospace, 'SFMono-Regular', Consolas, Menlo, monospace;

  /* Type: the app's own (renderer/styles/globals.css), scaled up about
     1.2x for the web. One family, Libre Franklin. Titles and numbers are
     light (300) with the app's -0.022em; card headings 400. Labels are the
     app's .gk-lab (600, capitals, 0.19em), buttons its .gk-btn (capitals,
     0.14em), navigation its .gk-sw (capitals, 0.08em), and the name OSTREL
     its .gk-plate (500, 0.19em). The Ostrel panels on horrac.com repeat
     these values (the --g- tokens in horrac.css). */
  --fs-close: clamp(44px, 6.4vw, 100px);   /* the closing line of a page */
  --fs-display: clamp(40px, 5.6vw, 84px);/* page h1, the wordmark */
  --fs-h2: clamp(32px, 3.8vw, 56px);     /* section h2, big numbers */
  --fs-h3: 22px;                         /* card and block headings */
  --fs-lede: clamp(17px, 1.4vw, 20px);   /* the paragraph under a heading */
  --fs-body: 16px;
  --fs-small: 14px;                      /* labels (500) and asides */
  --fs-tiny: 13px;                       /* captions, fine print */
  --fs-label: 12px;                      /* .gk-lab, .gk-btn, .gk-plate */
  --fs-nav: 13px;                        /* .gk-sw */
  --fs-badge: 11px;                      /* chips, stamps, small caps tags */
  --fs-micro: 11px;                      /* sentence text inside the app recreations */
  --fs-figure: clamp(84px, 12vw, 190px); /* the big counted figures */
  --sec-pad: clamp(96px, 13vh, 160px);   /* a section's top and bottom */
  /* The bar's height and side margin are horrac.com's, so the Horrac
     lockup and the account button sit exactly where they do there. */
  --head-h: 68px;
  --gutter: clamp(18px, 4vw, 56px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 24px); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--ground); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--ground); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 48px); margin-inline: auto; }

/* ---- Labels and type ---- */
.lab, th, .field-row label, .use h3, .prose .updated {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.lab--amber { color: var(--amber); }
.display {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h2 { margin: 0; font-weight: 300; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.h3, .use h2, .prose h2 { margin: 0; font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }
.lede { margin: 0; font-size: var(--fs-lede); font-weight: 300; color: var(--ink-2); max-width: 54ch; line-height: 1.55; }
.muted { color: var(--ink-3); }
/* The name OSTREL, wherever it is written: the header's wordmark style
   (bold 600, tracked capitals), at 0.86em so the capitals sit at the
   height of the words around them. The big standalone wordmarks use 500,
   where size alone reads bold. Scripts wrap the word the same way. */
.gword { font-weight: 600; font-size: 0.86em; letter-spacing: 0.19em; text-transform: uppercase; margin-right: -0.19em; }
/* In a big light heading the capitals already read bold at 500, like the
   standalone wordmark; 600 at that size looks heavier than the title. */
.display .gword, .h2 .gword, .hero__claim .gword, .close .display .gword { font-weight: 500; }

/* Where the text around it is already capitals (buttons, labels, nav,
   chips, window captions, menu items), OSTREL keeps that text's size. */
.btn .gword, .lab .gword, th .gword, .nav .gword, .chip .gword, .me__item .gword, .me__who .gword, .use h3 .gword, .field-row label .gword { font-size: 1em; }
/* Numbers line up in columns wherever they appear. */
.num, .plan__price b, .plan__credits b, .ring b { font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 46px; padding: 0 22px;
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--edge);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out);
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: scale(0.98); }
.btn--solid { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn--solid:hover { background: #ffffff; border-color: #ffffff; }
.btn--danger { color: var(--red); border-color: rgba(200, 95, 69, 0.55); }
.btn--danger:hover { border-color: var(--red); background: rgba(200, 95, 69, 0.1); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn--sm { height: 36px; padding: 0 14px; }
.btn--lg { height: 52px; padding: 0 30px; }

/* ---- Header ---- */
/* A frosted bar (2026-10-13). The first version leaned on glass cues (a
   sheen, boosted colour, a floating shadow) and the user found it read as an
   imitation of Apple's: "subtle yet loud". So the glass is quiet, a
   plain blur with only a hint of see-through, and the confidence comes
   from one crisp, bright hairline once the page moves. */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--head-h);
  background-color: rgba(14, 16, 15, 0.74);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.head.is-scrolled { border-bottom-color: rgba(242, 246, 244, 0.16); background-color: rgba(14, 16, 15, 0.8); }
.head__in { height: 100%; display: flex; align-items: center; gap: 22px; padding: 0 var(--gutter); }
/* Top left: Horrac, the company, as on horrac.com (its mark and word, in
   its own face), then a hairline, then Ostrel. */
.house { position: relative; display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.lockup { display: inline-flex; align-items: center; gap: 0.24em; font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
.lockup > img { width: 0.96em; height: 0.96em; flex: none; }
.lockup__word { display: inline-block; padding-bottom: 0.06em; }
.house .lockup { font-size: 27px; }
.house::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ink-3); transform: scaleX(0); transform-origin: right center; transition: transform 260ms var(--ease-out); }
@media (hover: hover) { .house:hover::after { transform: scaleX(1); transform-origin: left center; } }
.head__sep { width: 1px; height: 24px; background: var(--rule-2); flex: none; }
.nav__get { display: none; }
.brand { position: relative; display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
/* The same drawn underline as the horrac link beside it. */
.brand::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ink-3); transform: scaleX(0); transform-origin: right center; transition: transform 260ms var(--ease-out); }
@media (hover: hover) { .brand:hover::after { transform: scaleX(1); transform-origin: left center; } }
.brand__icon { width: 30px; height: 30px; border-radius: 26%; border: 1px solid var(--ink-3); background: #000; display: grid; place-items: center; view-transition-name: ostrel-icon-small; }
.brand__icon img { width: 65%; height: auto; }
.brand__word { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.19em; margin-right: -0.19em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: var(--fs-nav); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: 10px 12px;
  text-decoration-thickness: 1px; text-underline-offset: 7px;
  transition: color 160ms ease;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--ink); }
.nav a[aria-current='page'] { text-decoration-line: underline; }
.head__actions { display: flex; align-items: center; gap: 12px; }
.head__actions .btn--sm { height: 40px; }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--rule-2); background: transparent; align-items: center; justify-content: center; }
.menu-btn span { display: block; width: 16px; height: 1px; background: var(--ink); position: relative; transition: transform 240ms var(--ease-out), background-color 240ms ease; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1px; background: var(--ink); transition: transform 240ms var(--ease-out); }
.menu-btn span::before { transform: translateY(-5px); }
.menu-btn span::after { transform: translateY(5px); }
.head.is-open .menu-btn span { background: transparent; }
.head.is-open .menu-btn span::before { transform: rotate(45deg); }
.head.is-open .menu-btn span::after { transform: rotate(-45deg); }

/* ---- Hero: the app icon and wordmark as one small line, then the line in
   two tones (grey for the chore, white for the payoff), one sentence on
   what Ostrel does, and one button. ---- */
.hero { padding: calc(var(--head-h) + clamp(72px, 12vh, 120px)) 0 clamp(96px, 14vh, 130px); }
.hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__brand { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 clamp(26px, 4vh, 34px); }
.hero-icon {
  width: 46px; aspect-ratio: 1;
  display: grid; place-items: center;
  background: #000;
  border: 1.5px solid var(--ink);
  border-radius: 26%;
  view-transition-name: gecko-icon;
  opacity: 0; transform: scale(0.9);
  animation: pop 900ms 0.1s var(--ease-out) forwards;
  box-shadow: 0 0 0 5px rgba(242, 246, 244, 0.03), 0 20px 50px rgba(0, 0, 0, 0.6);
}
.hero-icon img { width: 65%; height: auto; }
@keyframes pop { to { opacity: 1; transform: none; } }
.wordmark {
  display: flex; justify-content: center; gap: 0.19em;
  margin: 0; font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1;
}
.wordmark span { display: inline-block; opacity: 0; transform: translateY(0.45em); animation: rise 900ms var(--ease-out) forwards; }
.wordmark span:nth-child(1) { animation-delay: 0.3s; }
.wordmark span:nth-child(2) { animation-delay: 0.38s; }
.wordmark span:nth-child(3) { animation-delay: 0.46s; }
.wordmark span:nth-child(4) { animation-delay: 0.54s; }
.wordmark span:nth-child(5) { animation-delay: 0.62s; }
.wordmark span:nth-child(6) { animation-delay: 0.7s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero__claim {
  margin: 0;
  font-weight: 400; font-size: clamp(42px, 5.8vw, 84px); line-height: 1.04; letter-spacing: -0.022em;
  text-wrap: balance;
  opacity: 0; animation: rise 900ms 0.45s var(--ease-out) forwards;
}
.hero__claim > span { display: block; }
.hero__claim .dim { color: var(--ink); font-weight: 200; }
.hero__sub { margin: 30px auto 0; max-width: 36em; font-size: var(--fs-lede); font-weight: 300; line-height: 1.6; color: var(--ink-2); opacity: 0; animation: rise 900ms 0.6s var(--ease-out) forwards; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; opacity: 0; animation: rise 900ms 0.7s var(--ease-out) forwards; }
.hero__fine { margin: 20px 0 0; font-size: var(--fs-tiny); color: var(--ink-4); opacity: 0; animation: rise 900ms 0.78s var(--ease-out) forwards; }

/* ---- Small parts of the drawn panels (home cards and feature panels).
   They are pictures of the app, so nothing in them looks clickable. ---- */
.lab--xs { font-size: 10px; color: var(--ink-4); }
.lab--xs.lab--amber { color: var(--amber); }
.big-verdict { margin: 0; font-weight: 300; font-size: 38px; line-height: 1; letter-spacing: -0.02em; }
.big-verdict--sm { font-size: 34px; }
.seg { display: flex; gap: 5px; margin: 0; }
.seg i { width: 32px; height: 4px; background: var(--rule-2); }
.seg i.on { background: var(--ink); }
.seg--sm i { width: 28px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { margin: 0; border: 1px solid var(--rule); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile b { font-size: 9.5px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-4); }
.tile > span { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile--amber { border-color: var(--amber); }
.tile--amber > span { color: var(--amber); }
.tile--ok b { color: var(--ink); }
.tile--warn b { color: var(--amber); }
.tile--ground { background: var(--ground); padding: 12px 14px; gap: 6px; }
.tile > .tile__list, .tile > .tile__note { white-space: normal; }
.tile > .tile__list { font-size: var(--fs-tiny); line-height: 1.6; color: var(--ink-2); }
.tile > .tile__note { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.cut { display: flex; gap: 3px; height: 30px; margin: 0; }
.cut i { flex: 1; background: var(--track); }
.cut i.cut__on { flex: 3; border: 1.5px solid var(--ink); background: #2a302e; }
.cut--sm { height: 28px; }
.cut__times { display: flex; justify-content: space-between; margin: 0; font-size: var(--fs-badge); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.cut__times b { font-weight: 400; color: var(--ink); }

/* ---- The busywork (home): a full-width line, then three cards, each a
   drawn panel over its job. ---- */
.busy__head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vh, 56px); }
.busy__title { margin: 0; font-weight: 400; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.3; letter-spacing: -0.015em; text-wrap: pretty; }
.busy__title .dim { color: var(--ink); font-weight: 200; }
.busy__title .gword { font-weight: 500; }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.job { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--card); }
.job__pic { height: 236px; padding: 24px; background: var(--well); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.job__pic p { margin: 0; }
.job__pic .job__gap { padding-top: 6px; }
.job__body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.job .h3 { line-height: 1.3; }
.job__body > p:last-child { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.pic-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-badge); color: var(--ink-4); }
.boom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.boom__name { font-size: 15px; }
.boom__x { font-size: 36px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.why { border-top: 1px solid var(--rule); padding-top: 12px; font-size: var(--fs-tiny); line-height: 1.5; color: var(--ink-2); }
.why .lab { color: var(--ink); margin-right: 12px; }
.busy__more { margin: clamp(40px, 6vh, 56px) 0 0; font-size: var(--fs-small); color: var(--ink-4); }
.busy__more .ul-link { margin-left: 8px; }
/* ---- Home's signature: the verdict (2026-10-30, docs/plans/site-guessing-to-knowing.md).
   The advice every creator hears, struck through where the creator's own
   posts don't back it; two lines survive, the heading turns, and the
   evidence lands below. Where scroll timelines run and motion is allowed,
   the stage pins under the bar and plays as the reader scrolls: about 2.5
   screens on a desktop, 1.6 on a phone. Everywhere else (and under reduced
   motion) it shows the finished verdict, still. Struck lines sit in a dim
   grey on purpose: they are the advice being set aside, not text to read. */
.verdict { --struck: #6f7975; --kept: #fff; border-top: 1px solid var(--rule); }
.verdict__stage { padding: clamp(80px, 12vh, 140px) 0 clamp(96px, 13vh, 160px); }
.verdict__in { display: grid; gap: clamp(40px, 6vh, 64px); }
.verdict__heads { display: grid; }
.verdict__h { grid-area: 1 / 1; align-self: end; margin: 0; font-weight: 400; font-size: clamp(36px, 5vw, 76px); line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; }
.verdict__h .dim { display: block; font-weight: 200; }
.verdict__h .gword { font-weight: 500; }
.verdict__h--noise { visibility: hidden; }
.advice { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15em 0.9em; font-size: clamp(22px, 2.6vw, 40px); font-weight: 200; line-height: 1.5; letter-spacing: -0.015em; color: var(--struck); }
/* The strike is a background line, so a line that wraps is struck on both rows. */
.advice s { text-decoration: none; background: linear-gradient(var(--edge), var(--edge)) 0 60% / 100% 1px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* A kept line brightens to a heavier weight; its hidden copy at that weight
   holds the width, so the lines around it never shift. */
.advice__ok { display: inline-grid; color: var(--kept); font-weight: 400; }
.advice__ok::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 400; }
.finds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.find { margin: 0; padding: 24px 32px 0 0; display: grid; gap: 10px; align-content: start; }
.find .lab { color: var(--ink); }
.find > span:last-child { font-size: 20px; font-weight: 300; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 600px) {
  .advice__wide { display: none; }
  .finds { grid-template-columns: minmax(0, 1fr); }
  .find { padding: 16px 0; }
  .find + .find { border-top: 1px solid var(--rule); }
  .find > span:last-child { font-size: 16px; }
}
@supports (animation-timeline: view()) {
  @media (min-height: 560px) {
    .move .verdict { height: 250vh; view-timeline: --verdict block; view-timeline-inset: var(--head-h) 0; }
    .move .verdict__stage { position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h)); height: calc(100svh - var(--head-h)); padding: 0; display: grid; align-content: center; }
    .move .verdict__in { gap: clamp(24px, 4.5vh, 56px); }
    .move .verdict__h { font-size: clamp(32px, min(5vw, 8vh), 76px); }
    .move .advice { font-size: clamp(20px, min(2.6vw, 4.2vh), 40px); }
    .move .verdict__h--noise { visibility: visible; animation: v-out linear both; animation-timeline: --verdict; animation-range: contain 72% contain 79%; }
    .move .verdict__h--found { animation: v-in linear both; animation-timeline: --verdict; animation-range: contain 76% contain 84%; }
    .move .advice li { animation: v-arrive linear both; animation-timeline: --verdict; }
    .move .advice s { animation: v-strike linear both; animation-timeline: --verdict; }
    .move .advice__ok > span { animation: v-keep linear both; animation-timeline: --verdict; animation-range: contain 73% contain 81%; }
    .move .find { animation: v-find linear both; animation-timeline: --verdict; animation-range: contain 82% contain 91%; }
    .move .find + .find { animation-range: contain 85% contain 94%; }
    .move .advice li:nth-child(1) { animation-range: contain 2% contain 8%; }
    .move .advice li:nth-child(2) { animation-range: contain 3.7% contain 9.7%; }
    .move .advice li:nth-child(3) { animation-range: contain 5.4% contain 11.4%; }
    .move .advice li:nth-child(4) { animation-range: contain 7.1% contain 13.1%; }
    .move .advice li:nth-child(5) { animation-range: contain 8.9% contain 14.9%; }
    .move .advice li:nth-child(6) { animation-range: contain 10.6% contain 16.6%; }
    .move .advice li:nth-child(7) { animation-range: contain 12.3% contain 18.3%; }
    .move .advice li:nth-child(8) { animation-range: contain 14% contain 20%; }
    .move .advice li:nth-child(9) { animation-range: contain 15.7% contain 21.7%; }
    .move .advice li:nth-child(10) { animation-range: contain 17.4% contain 23.4%; }
    .move .advice li:nth-child(11) { animation-range: contain 19.1% contain 25.1%; }
    .move .advice li:nth-child(12) { animation-range: contain 20.9% contain 26.9%; }
    .move .advice li:nth-child(13) { animation-range: contain 22.6% contain 28.6%; }
    .move .advice li:nth-child(14) { animation-range: contain 24.3% contain 30.3%; }
    .move .advice li:nth-child(15) { animation-range: contain 26% contain 32%; }
    .move .advice li:nth-child(1) s { animation-range: contain 34% contain 36.8%; }
    .move .advice li:nth-child(2) s { animation-range: contain 36.8% contain 39.5%; }
    .move .advice li:nth-child(3) s { animation-range: contain 39.5% contain 42.3%; }
    .move .advice li:nth-child(5) s { animation-range: contain 42.3% contain 45.1%; }
    .move .advice li:nth-child(6) s { animation-range: contain 45.1% contain 47.8%; }
    .move .advice li:nth-child(7) s { animation-range: contain 47.8% contain 50.6%; }
    .move .advice li:nth-child(8) s { animation-range: contain 50.6% contain 53.4%; }
    .move .advice li:nth-child(9) s { animation-range: contain 53.4% contain 56.2%; }
    .move .advice li:nth-child(10) s { animation-range: contain 56.2% contain 58.9%; }
    .move .advice li:nth-child(11) s { animation-range: contain 58.9% contain 61.7%; }
    .move .advice li:nth-child(13) s { animation-range: contain 61.7% contain 64.5%; }
    .move .advice li:nth-child(14) s { animation-range: contain 64.5% contain 67.2%; }
    .move .advice li:nth-child(15) s { animation-range: contain 67.2% contain 70%; }
    @media (max-width: 600px) {
      .move .verdict { height: 160vh; }
      .move .advice li:nth-child(1) { animation-range: contain 2% contain 8%; }
      .move .advice li:nth-child(2) { animation-range: contain 4.7% contain 10.7%; }
      .move .advice li:nth-child(4) { animation-range: contain 7.3% contain 13.3%; }
      .move .advice li:nth-child(5) { animation-range: contain 10% contain 16%; }
      .move .advice li:nth-child(6) { animation-range: contain 12.7% contain 18.7%; }
      .move .advice li:nth-child(7) { animation-range: contain 15.3% contain 21.3%; }
      .move .advice li:nth-child(9) { animation-range: contain 18% contain 24%; }
      .move .advice li:nth-child(12) { animation-range: contain 20.7% contain 26.7%; }
      .move .advice li:nth-child(14) { animation-range: contain 23.3% contain 29.3%; }
      .move .advice li:nth-child(15) { animation-range: contain 26% contain 32%; }
      .move .advice li:nth-child(1) s { animation-range: contain 34% contain 38.5%; }
      .move .advice li:nth-child(2) s { animation-range: contain 38.5% contain 43%; }
      .move .advice li:nth-child(5) s { animation-range: contain 43% contain 47.5%; }
      .move .advice li:nth-child(6) s { animation-range: contain 47.5% contain 52%; }
      .move .advice li:nth-child(7) s { animation-range: contain 52% contain 56.5%; }
      .move .advice li:nth-child(9) s { animation-range: contain 56.5% contain 61%; }
      .move .advice li:nth-child(14) s { animation-range: contain 61% contain 65.5%; }
      .move .advice li:nth-child(15) s { animation-range: contain 65.5% contain 70%; }
    }
  }
}
@keyframes v-arrive { from { translate: 0 0.5em; opacity: 0; } }
@keyframes v-strike { from { background-size: 0% 1px; color: var(--ink-3); } }
@keyframes v-keep { from { color: var(--ink-3); font-weight: 200; } }
@keyframes v-out { to { translate: 0 -0.35em; opacity: 0; } }
@keyframes v-in { from { translate: 0 0.35em; opacity: 0; } }
@keyframes v-find { from { translate: 0 24px; opacity: 0; } }

/* ---- Home's three cards: the creator's before and after, each over a drawn panel. ---- */
.section.section--cards { border-top: 0; padding-top: 0; }
.job__note { font-size: var(--fs-tiny); color: var(--ink-3); }
.meas { display: grid; gap: 12px; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.meas p { display: flex; justify-content: space-between; gap: 12px; }
.meas span { color: var(--ink-3); }
.meas b { font-weight: 400; }
.meas .meas__amber { color: var(--amber); }
.meas .meas__sep { border-top: 1px solid var(--rule); padding-top: 12px; }

/* ---- Features: the five steps drawn as one loop (2026-10-30). On a desktop
   the bar of steps is the loop's header: each box sits under its own step,
   on the bar's own five columns, with small arrows in the gaps, and the
   return runs down from Post, back underneath and up into See (the one
   bright line), round "Every post teaches the next." The bar already names
   each column, so the boxes carry only their line. On a phone, a list with
   the return line up its left side. The arrows show flow inside a picture;
   nothing in it is a control. ---- */
.glance__more.loopwrap { display: block; }
.loop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto 96px; column-gap: 28px; margin: 28px 0 0; color: var(--ink-4); }
.loop__step { margin: 0; min-height: 96px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.loop__step .lab { display: none; font-size: var(--fs-badge); color: var(--ink-4); }
.loop__line { font-size: 18px; font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.loop__see { grid-column: 1; grid-row: 1; }
.loop__why { grid-column: 2; grid-row: 1; }
.loop__plan { grid-column: 3; grid-row: 1; }
.loop__check { grid-column: 4; grid-row: 1; }
.loop__post { grid-column: 5; grid-row: 1; }
/* Each arrow sits in the gap before its box: the cell is the next box's,
   pulled left into the 28px gap. */
.loop__arw { position: relative; grid-row: 1; align-self: center; justify-self: start; width: 16px; height: 1.5px; margin-left: -22px; background: currentColor; }
.loop__arw::after { content: ''; position: absolute; top: 50%; right: -2px; width: 0; height: 0; border: 4px solid transparent; border-right-width: 0; border-left: 6px solid currentColor; translate: 0 -50%; }
.loop__arw--a { grid-column: 2; }
.loop__arw--b { grid-column: 3; }
.loop__arw--c { grid-column: 4; }
.loop__arw--d { grid-column: 5; }
/* The return: from the middle of Post's foot, down, back along, up into See's. */
.loop__arw--e { grid-column: 1 / -1; grid-row: 2; align-self: stretch; justify-self: stretch; width: auto; height: auto; margin: 8px calc((100% - 112px) / 10) 0; background: none; border: 1.5px solid var(--ink); border-top: 0; color: var(--ink); }
.loop__arw--e::after { top: -1px; right: auto; left: -1px; translate: calc(-50% + 0.75px) 0; border: 4px solid transparent; border-top-width: 0; border-bottom: 6px solid currentColor; }
.loop__mid { grid-column: 1 / -1; grid-row: 2; align-self: center; margin: 0; padding-top: 4px; text-align: center; font-size: 26px; font-weight: 300; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.loop__note { margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; gap: 28px; }
.loop__note .lab { flex: none; color: var(--ink); }
.loop__note > span:last-child { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) {
  .loop { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; max-width: 420px; margin-bottom: 64px; padding-left: 42px; }
  .loop > * { grid-column: auto; grid-row: auto; }
  .loop__step { height: 76px; min-height: 0; padding: 12px 18px; }
  .loop__step .lab { display: block; font-size: 10px; }
  .loop__line { font-size: 16px; }
  .loop__arw--a, .loop__arw--b, .loop__arw--c, .loop__arw--d { justify-self: center; align-self: auto; width: 1.5px; height: 28px; margin: 0; }
  .loop__arw--a::after, .loop__arw--b::after, .loop__arw--c::after, .loop__arw--d::after { top: auto; right: auto; left: 50%; bottom: -2px; translate: -50% 0; border: 4px solid transparent; border-bottom-width: 0; border-top: 6px solid currentColor; }
  /* The return: from Post up the left side and back into See. */
  .loop__arw--e { position: absolute; left: 12px; top: 38px; bottom: 38px; width: 30px; margin: 0; border: 1.5px solid currentColor; border-right: 0; }
  .loop__arw--e::after { top: -1px; left: auto; right: -2px; translate: 0 -50%; border: 4px solid transparent; border-right-width: 0; border-left: 6px solid currentColor; }
  .loop__mid { position: absolute; left: 0; top: calc(100% + 28px); padding: 0; text-align: left; font-size: 22px; }
  .loop__note { flex-direction: column; gap: 10px; }
}
/* A text link: capitals over a hairline that lights on hover. */
.ul-link { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--rule-2); transition: border-color 160ms var(--ease-out); }
.ul-link:hover { border-color: var(--ink); }
.ul-link .gword { font-size: 1em; }

/* ---- Home's two promises: the line beside a log of what Ostrel did. ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 72px); align-items: center; }
.split__text { display: grid; gap: 22px; }
.split__title { margin: 0; font-weight: 300; font-size: clamp(38px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; }
.split__title .gword { font-weight: 500; }
.split__body { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.65; color: var(--ink-2); }
.logbox { border: 1px solid var(--rule); background: var(--well); }
.logbox p { margin: 0; }
.logbox__head { padding: 16px 24px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; }
.logbox__head .lab { font-size: var(--fs-badge); color: var(--ink-4); }
.log { padding: 18px 24px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; align-items: baseline; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.log:last-child { border-bottom: 0; }
.log time { font-size: var(--fs-small); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.log--faint { color: var(--ink-4); }
.log--bright { color: var(--ink); }
.foot__brand .foot__note { margin-top: 10px; font-size: var(--fs-tiny); color: var(--ink-4); }

/* ---- Features: the page head, the five steps at a glance, then a section
   for each. The bar of steps stays under the header while you read; all
   five lines are white until the first section arrives, then only the one
   you are reading (gecko.js). The descriptions under the bar scroll away
   beneath it, so nothing on the page jumps. ---- */
.fhead { padding: calc(var(--head-h) + clamp(64px, 10vh, 100px)) 0 clamp(40px, 6vh, 56px); }
.fhead .display { max-width: 15ch; }
.fhead .lede { margin-top: 26px; max-width: 34em; }
.fhead .lab { margin-bottom: 26px; }
.glance { position: sticky; top: var(--head-h); z-index: 20; background: transparent; transition: box-shadow 220ms ease; }
/* Clear at rest so the glass behind the head shows through it; solid once it
   sticks, to cover what scrolls beneath. */
.glance.is-stuck { box-shadow: 0 1px 0 var(--rule); background: var(--ground); }
.glance__in, .glance__more { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; }
.glance__step { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 14px; border-top: 2px solid var(--rule-2); color: var(--ink-4); text-decoration: none; transition: border-color 220ms var(--ease-out), color 220ms ease; }
.glance__step.is-on { border-top-color: var(--ink); color: var(--ink); }
@media (hover: hover) { .glance__step:hover { color: var(--ink); } }
.glance__num { font-size: 26px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.glance__name { color: inherit; }
.glance__more { position: relative; padding: 4px 0 clamp(56px, 8vh, 80px); }
.glance__line { margin: 0 0 12px; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--ink-2); }
.feat { border-top: 1px solid var(--rule); padding: clamp(80px, 11vh, 110px) 0; scroll-margin-top: 64px; }
.feat__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: center; }
.feat__text { border-left: 1px solid var(--rule-2); padding-left: clamp(24px, 3vw, 36px); display: grid; gap: 18px; }
.feat__title { margin: 0; font-weight: 300; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.feat__title .gword { font-weight: 500; }
.feat__body { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.feat-head { display: grid; gap: 18px; margin-bottom: 48px; }
/* One list marker on these pages: a small amber square. */
.bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; color: var(--ink-2); }
.bul li { position: relative; padding-left: 19px; }
.bul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--amber); }
.fpanel { border: 1px solid var(--rule); background: var(--well); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fpanel p { margin: 0; }
.fpanel__top { display: flex; justify-content: space-between; gap: 16px; }
.fpanel__foot { border-top: 1px solid var(--rule); padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; }
.fpanel__lead { font-size: 20px; font-weight: 300; line-height: 1.4; }
.fpanel__idea { font-size: 18px; font-weight: 300; line-height: 1.45; }
.fpanel__cap { font-size: 12px; color: var(--ink-4); }
.fpanel .tile b { font-size: 10px; }
.fpanel .tiles--4 .tile > span { font-size: 24px; }
.dials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dial { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dial svg { width: 100%; max-width: 110px; }
.dial__track, .dial__fill { fill: none; stroke-width: 5; }
.dial__track { stroke: var(--rule); }
.dial__fill { stroke: var(--ink); }
.dial__fill--amber { stroke: var(--amber); }
.dial text { fill: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 20px; }
.trend { width: 100%; height: 70px; }
.trend path { vector-effect: non-scaling-stroke; }
.trend__line { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.trend__usual { fill: none; stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 4 4; }
.trend__mark { stroke: var(--amber); stroke-width: 1; }
.verdict-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; border-top: 1px solid var(--rule); padding-top: 18px; }
.verdict-row__l { display: flex; flex-direction: column; gap: 10px; }
.ask { align-self: flex-end; max-width: 78%; border: 1px solid var(--rule); padding: 10px 14px; font-size: var(--fs-tiny); color: var(--ink-2); }
.pin { display: flex; gap: 16px; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 16px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
.pin time { flex: none; font-size: var(--fs-tiny); color: var(--amber); font-variant-numeric: tabular-nums; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal__d { text-align: center; font-size: 9px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-4); }
.cal__d--best { color: var(--ink); }
.cal__c { height: 92px; border: 1px solid var(--track); padding: 6px; min-width: 0; }
.cal__c--best { border-color: var(--amber); background: #14130f; }
.cal__sq { display: flex; gap: 4px; }
.cal .pf-sq { width: 7px; height: 7px; }
.cal__t { display: block; padding-top: 4px; font-size: 10px; line-height: 1.3; color: var(--ink-2); overflow-wrap: anywhere; }
.cal__c--best .cal__t { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--ink-4); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .pf-sq { width: 7px; height: 7px; }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.pcol { padding: 24px 24px 0; display: grid; gap: 16px; align-content: start; }
.pcol:first-child { padding-left: 0; }
.pcol:last-child { padding-right: 0; }
.pcol + .pcol { border-left: 1px solid var(--track); }
.pcol__name { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 400; }
.pcol .bul { font-size: var(--fs-small); }

/* ---- Section scaffolding ---- */
.section { padding: var(--sec-pad) 0; border-top: 1px solid var(--rule); }
.section--flush { border-top: 0; }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 60px; align-items: end; margin-bottom: clamp(48px, 7vh, 80px); }
.section__head .lab { grid-column: 1 / -1; }

/* A platform's identity: the app's own muted colour square, the one
   deliberate colour besides the warnings (ContentCalendar.tsx). */
.pf-sq { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--ink-4); }
.pf-sq--yt { background: #cf6b56; }
.pf-sq--ig { background: #c9698f; }
.pf-sq--tt { background: #5fb8bd; }
.pf-sq--tw { background: #9575c9; }

/* ---- Trust ---- */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: var(--fs-small); }
.facts li svg { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.facts li strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 2px; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: var(--fs-small); }
/* A two-column list that wraps instead of scrolling on a phone. */
.table--fluid { min-width: 0; }
/* On a phone the row labels stay put while the plan columns scroll. */
@media (max-width: 720px) {
  .table--compare th:first-child, .table--compare td:first-child { position: sticky; left: 0; z-index: 1; background: var(--ground); box-shadow: 1px 0 0 var(--rule); min-width: 150px; }
  .table--compare th:first-child { background: var(--well); }
}
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--well); }
td { color: var(--ink-2); }
td:first-child { color: var(--ink); }
tr:last-child td { border-bottom: 0; }
td code, p code, li code { font-family: var(--code); font-size: 0.86em; background: var(--track); padding: 2px 6px; color: var(--ink); }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-size: var(--fs-lede); font-weight: 400; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { flex: 1; }
.faq summary i { position: relative; width: 14px; height: 14px; flex: none; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--ink); transition: transform 260ms var(--ease-out); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq summary:hover { color: #ffffff; }
.faq .answer { padding: 0 0 24px; color: var(--ink-2); font-weight: 300; max-width: 70ch; }
.faq .answer p { margin: 0 0 12px; }
.faq .answer p:last-child { margin: 0; }
.faq .answer a { text-underline-offset: 3px; }
/* A label, a heading and a list of questions each get room of their own. */
.wrap--narrow > .lab + .h2 { margin-top: 16px; }
.wrap--narrow > .h2 + .faq { margin-top: clamp(32px, 5vh, 48px); }
.lab + .faq { margin-top: 20px; }
.wrap--narrow.stack { gap: clamp(48px, 7vh, 72px); }

/* ---- Big close ---- */
.close { text-align: center; padding: clamp(120px, 18vh, 200px) 0; border-top: 1px solid var(--rule); position: relative; overflow: hidden; isolation: isolate; }
.close .display { font-size: var(--fs-close); }
.close .lede { margin: 20px auto 0; }
.close .btn { margin-top: 40px; }

/* ---- Footer ---- */
.foot { border-top: 1px solid var(--rule); padding: 64px 0 40px; background: var(--well); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot__brand p { color: var(--ink-3); font-size: var(--fs-small); margin: 18px 0 0; max-width: 34ch; }
.foot h4 { margin: 0 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { text-decoration: none; color: var(--ink-2); font-size: var(--fs-small); transition: color 160ms ease; }
.foot ul a:hover { color: var(--ink); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: var(--fs-tiny); color: var(--ink-4); }
.foot__base a { color: var(--ink-3); }

/* ---- Inner page header ---- */
.pagehead { padding: calc(var(--head-h) + clamp(64px, 10vh, 120px)) 0 clamp(48px, 7vh, 80px); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; isolation: isolate; }
.pagehead .lab { margin-bottom: 22px; }
.pagehead .lede { margin-top: 24px; }

/* ---- Legal / reading layout ---- */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; padding: 72px 0 120px; }
.toc { position: sticky; top: calc(var(--head-h) + 32px); align-self: start; max-height: calc(100vh - var(--head-h) - 64px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.toc ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 0 6px 14px; border-left: 1px solid var(--rule); color: var(--ink-3); text-decoration: none; font-size: var(--fs-small); line-height: 1.4; transition: color 160ms ease, border-color 160ms ease; }
.toc a:hover { color: var(--ink); }
.toc a.is-on { color: var(--ink); border-left-color: var(--ink); }
.toc__lab { margin-top: 32px !important; }
.prose { max-width: 72ch; font-size: var(--fs-body); font-weight: 300; color: var(--ink-2); }
.prose h2 { color: var(--ink); margin: 56px 0 14px; padding-top: 20px; border-top: 1px solid var(--rule); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-weight: 500; font-size: var(--fs-body); color: var(--ink); margin: 28px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose .table-wrap { margin: 0 0 20px; }
.card-list { display: grid; gap: 12px; margin: 0 0 24px; }
.card-list .card { border: 1px solid var(--rule); padding: 18px 20px; background: var(--well); }
.card-list .card h3 { margin: 0 0 6px; font-size: var(--fs-body); font-weight: 500; }
.card-list .card p:last-child { margin: 0; }
.callout { border: 1px solid var(--rule); border-left: 2px solid var(--amber); padding: 16px 20px; margin: 0 0 20px; background: var(--well); }

/* ---- Data-use platform blocks ---- */
.use { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 48px 0; border-top: 1px solid var(--rule); }
.use:first-of-type { border-top: 0; }
.use h3 { margin: 22px 0 10px; }
.use h3:first-child { margin-top: 0; }
.use p { margin: 0 0 12px; color: var(--ink-2); font-weight: 300; }
.scopes { display: grid; gap: 10px; margin: 0 0 8px; }
.scope { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2fr); gap: 20px; padding: 14px 16px; border: 1px solid var(--rule); background: var(--well); }
.scope b { font-size: var(--fs-small); font-weight: 500; color: var(--ink); align-self: start; }
.scope > span { color: var(--ink-2); font-size: var(--fs-small); font-weight: 300; }

/* ---- Account ---- */
.acct { padding: calc(var(--head-h) + 56px) 0 120px; min-height: 100svh; }
.acct__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.panel { border: 1px solid var(--rule); background: var(--well); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.panel__body { padding: 22px; display: grid; gap: 18px; }
.field-row { display: grid; gap: 8px; }
.input {
  height: 48px; width: 100%; padding: 0 14px;
  background: var(--ground); border: 1px solid var(--rule-2); color: var(--ink);
  font: inherit; font-size: var(--fs-body);
  transition: border-color 160ms ease;
}
.input:focus { outline: none; border-color: var(--ink); }
.input--code { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: 0.5em; text-align: center; padding-left: 0.5em; }
.note { margin: 0; font-size: var(--fs-tiny); color: var(--ink-3); }
.note a { color: var(--ink-2); }
.error { margin: 0; font-size: var(--fs-small); color: var(--red); min-height: 1.4em; }
.ok { margin: 0; font-size: var(--fs-small); color: var(--ink-2); min-height: 1.4em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; }
.row__main { display: grid; gap: 3px; min-width: 0; }
.row__main strong { font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.row__main > span { font-size: var(--fs-tiny); color: var(--ink-3); }
.row__main > span.warn { color: var(--amber); }
.chip { font-size: var(--fs-badge); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.chip--amber { color: var(--amber); border-color: rgba(199, 154, 74, 0.5); }
.chip--red { color: var(--red); border-color: rgba(200, 95, 69, 0.5); }
.skel { background: linear-gradient(90deg, var(--track) 0%, #242928 50%, var(--track) 100%); background-size: 200% 100%; animation: shine 1.4s linear infinite; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.stack { display: grid; gap: 24px; }
[hidden] { display: none !important; }
.acct__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid var(--rule); }
.acct__email { font-size: var(--fs-h2); overflow-wrap: anywhere; margin-top: 14px; }
.acct__head .lede { margin-top: 12px; }
.acct__done { max-width: 640px; padding-top: 40px; }
.acct__out { display: grid; justify-items: end; gap: 8px; }
.acct__out .error:empty { display: none; }
.acct h1[tabindex]:focus { outline: none; }
/* boot.js marks the page before it paints; without it (JavaScript off) the
   loading placeholder would sit there for ever, so the notice shows alone. */
html:not(.move):not(.still) #view-loading { display: none; }
.hero__cta--left { justify-content: flex-start; opacity: 1; animation: none; margin-top: 12px; }
.done-mark { width: 64px; height: 64px; color: var(--ink); }
.done-mark svg { width: 100%; height: 100%; }
.done-mark circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 900ms var(--ease-out) forwards; }
.done-mark__tick { stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw 600ms 600ms var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.panel__msg { padding: 0 22px; }
.panel__msg:empty { display: none; }
.panel__msg:not(:empty) { padding-bottom: 16px; }
.row--plain { border-top: 0; padding: 0; }
.skel--title { height: 64px; width: 70%; }
.skel--line { height: 16px; width: 90%; }
.skel--short { width: 55%; }
.skel--block { height: 72px; }
.meter__fill--live { transform: none; width: calc(var(--v, 0) * 1%); transition: width 900ms var(--ease-out), background-color 300ms ease; }
.meter__fill--live.warn { background: var(--amber); }
.meter__fill--live.full { background: var(--red); }
.choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 22px; border-top: 1px solid var(--rule); }
.choice.is-wanted { background: rgba(242, 246, 244, 0.04); box-shadow: inset 2px 0 0 var(--ink); }
.choice__name { display: flex; align-items: baseline; gap: 10px; }
.choice__name strong { font-weight: 400; color: var(--ink); }
.choice__name > span, .choice p { font-size: var(--fs-tiny); color: var(--ink-3); margin: 0; }
.confirm { border-top: 1px solid var(--rule); padding: 18px 22px; display: grid; gap: 12px; background: rgba(200, 95, 69, 0.05); }

/* ---- Pricing: a centred head with the yearly switch, three plan cards
   (price, credits, a drawn week of posting, what it suits), then credits,
   the side-by-side table and the billing questions. ---- */
.chead { padding: calc(var(--head-h) + clamp(64px, 10vh, 100px)) 0 clamp(40px, 6vh, 56px); }
.chead__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.chead .display { font-weight: 400; }
.chead .display .dim { color: var(--ink); font-weight: 200; }
.chead .lede { max-width: 34em; }
/* Clear air between the glass behind the head and the billing switch. */
.chead .billing-switch { margin-top: 42px; }
.billing-switch { display: flex; gap: 32px; margin-top: 14px; }
.billing-switch button { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; font-size: var(--fs-small); color: var(--ink-4); cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.billing-switch button[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) { .billing-switch button[aria-pressed='false']:hover { color: var(--ink-2); } }
/* The yearly offer is the headline, so it wears the one accent. */
.deal-tag { display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #120d04; background: var(--amber); white-space: nowrap; }
.plans-sec { padding: 0 0 clamp(80px, 11vh, 110px); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--card); }
.plan p { margin: 0; }
.plan--pick { background: var(--panel); border-color: var(--rule-2); }
.plan--pick::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--ink); }
.plan__top { padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--rule); }
.plan__name { display: flex; justify-content: space-between; align-items: center; min-height: 24px; }
.plan__name .lab { color: var(--ink); }
.plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan__price b { font-size: 56px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
/* "$400/year": the unit sits against the number. */
.plan__price b + span { margin-left: -6px; font-size: var(--fs-small); color: var(--ink-3); }
.plan__was { font-size: 22px; font-weight: 300; color: var(--ink-4); text-decoration-thickness: 1px; }
.plan__deal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px; font-size: var(--fs-tiny); color: var(--ink-2); }
.plan__mid { padding: 24px 30px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--rule); container-type: inline-size; }
/* "1,900 credits/week" reads as one phrase, always well below the 56px
   price (the user, 2026-10-13): about half its size, scaled to the card so
   it never wraps. Number regular, unit thin, like the headlines. */
.plan__credits { margin: 0; white-space: nowrap; line-height: 1.1; letter-spacing: -0.02em; font-size: clamp(20px, 2vw, 28px); font-size: min(8.6cqi, 28px); }
.plan__credits b { font-weight: 400; font-variant-numeric: tabular-nums; }
.plan__credits span { font-weight: 200; }
.wk, .wkd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wk i { height: 22px; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; gap: 3px; }
.wk i.p { border-color: var(--rule-2); background: var(--raise); }
.wk b { width: 5px; height: 5px; background: var(--ink); }
.wkd { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-4); text-align: center; }
.plan__end { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.plan__pitch { font-size: var(--fs-body); font-weight: 300; line-height: 1.5; }
.plan__end .bul { font-size: var(--fs-small); gap: 10px; }
.plan__end .btn { margin-top: auto; width: 100%; }
.plans__note { margin: 22px 0 0; font-size: var(--fs-tiny); line-height: 1.6; color: var(--ink-4); }
.trial { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 28px; border: 1px solid var(--rule); border-left: 2px solid var(--amber); }
.trial p { flex: 1 1 480px; margin: 0; font-weight: 300; color: var(--ink-2); }
.trial strong { color: var(--ink); font-weight: 400; }
/* Credits: the app's meter, then what uses credits beside what never does. */
.credits__meter { padding: 24px 28px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 24px; }
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .track { stroke: var(--track); }
.ring .fill { stroke: var(--ink); stroke-dasharray: 346; stroke-dashoffset: 346; transition: stroke-dashoffset 1600ms var(--ease-out); }
.credits__meter p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.credits__meter b { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.credits__meter p > span:not(.lab) { font-size: var(--fs-small); color: var(--ink-4); }
.credits__meter .lab { flex-basis: 100%; }
.credits__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.credits__cols > div { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.credits__cols > div + div { border-left: 1px solid var(--rule); }
.credits__cols .bul { font-size: var(--fs-small); gap: 10px; }
.bul--ink li::before { background: var(--ink); }
.lab--xs.lab--ink { color: var(--ink); }
.credits__note { margin: 0; padding: 18px 28px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.6; color: var(--ink-4); }
.table-wrap--bare { border: 0; }
.table--compare th { background: transparent; font-size: 11px; color: var(--ink-4); border-bottom: 1px solid var(--rule); }
.table--compare th:first-child { width: 34%; }
.table--compare td { border-bottom: 1px solid var(--track); padding: 15px 18px; }
.table--compare .col { background: var(--panel); }
.table--compare .no { color: var(--ink-4); }
.table--compare .plan__was { font-size: 0.82em; margin-right: 6px; }
/* Questions: the topic on the left, the answers on the right. */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.qa__side { display: grid; gap: 16px; justify-items: start; }
.qa__side p { margin: 0; }
.qa__more { font-size: var(--fs-small); color: var(--ink-4); }
.qa__title { margin: 0; font-weight: 300; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.qa-grp { padding: clamp(56px, 8vh, 72px) 0; }
.qa-grp + .qa-grp { border-top-color: var(--track); }
.ul-link--plain { text-transform: none; letter-spacing: 0; font-weight: inherit; font-size: inherit; }
/* Support's bar has four topics. */
.glance--4 .glance__in, .glance--4 + .glance__more { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Get: the invite, what you need, and your first ten minutes. ---- */
.hero--get { padding-bottom: clamp(72px, 10vh, 100px); }
.hero__fine--link { margin-top: 10px; }
.hero__fine .ul-link { margin-left: 8px; font-size: 11px; }
.reqs-sec { padding: 0 0 clamp(80px, 11vh, 110px); }
.reqs { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.reqs > div { padding: 26px 24px 0; }
.reqs > div:first-child { padding-left: 0; }
.reqs > div + div { border-left: 1px solid var(--track); }
.reqs p { margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-4); }
.reqs .reqs__t { margin: 0; font-size: 18px; color: var(--ink); }
.code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.code span { height: 46px; border: 1px solid var(--rule-2); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 300; }
.code .code__on { border-color: var(--ink); }
.job__pic--rows { gap: 0; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--track); font-size: var(--fs-small); }
.prow > span:first-child { display: flex; align-items: center; gap: 10px; }
.pull { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; font-size: 12px; color: var(--ink-4); }
.pull i { display: block; height: 3px; background: var(--track); position: relative; }
.pull b { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; background: var(--ink); transform-origin: left; }
.job__pic--row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 22px; }
.goal { width: 128px; flex: none; }
.goal text { fill: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 20px; }
.goal__t { display: flex; flex-direction: column; gap: 8px; }
.goal__t b { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.goal__t > span:last-child { font-size: 12px; color: var(--ink-4); }
.close__btns { margin: 40px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.close .close__btns .btn { margin-top: 0; }

/* ---- The drawn panels play once as they arrive (their card's reveal adds
   .in), then rest: bars fill, lines draw, rows land. Only under .move, so
   people who ask for less motion see them finished. ---- */
.move .seg i.on, .move .pull b { transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-out); }
.move .in .seg i.on, .move .in .pull b { transform: none; }
.move .in .seg i:nth-child(1) { transition-delay: 300ms; }
.move .in .seg i:nth-child(2) { transition-delay: 380ms; }
.move .in .seg i:nth-child(3) { transition-delay: 460ms; }
.move .in .seg i:nth-child(4) { transition-delay: 540ms; }
.move .in .pull b { transition-duration: 1600ms; transition-delay: 500ms; }
.move .trend__line { clip-path: inset(-4px 100% -4px 0); transition: clip-path 1400ms var(--ease-out) 350ms; }
.move .in .trend__line { clip-path: inset(-4px 0 -4px 0); }
.move .dial__fill { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms var(--ease-out) 300ms; }
.move .in .dial__fill { stroke-dashoffset: 0; }
.move .cut__on { opacity: 0; transform: scaleX(0.3); transition: opacity 400ms ease 400ms, transform 700ms var(--ease-out) 400ms; }
.move .in .cut__on { opacity: 1; transform: none; }
.move .tile, .move .log, .move .cal__c > span, .move .code span, .move .prow, .move .wk i.p { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.move .in .tile, .move .in .log, .move .in .cal__c > span, .move .in .code span, .move .in .prow, .move .in .wk i.p { opacity: 1; transform: none; }
.move .in .tile:nth-child(1), .move .in .log:nth-child(2), .move .in .prow:nth-child(1), .move .in .code span:nth-child(1), .move .in .wk i:nth-child(1) { transition-delay: 300ms; }
.move .in .tile:nth-child(2), .move .in .log:nth-child(3), .move .in .prow:nth-child(2), .move .in .code span:nth-child(2), .move .in .wk i:nth-child(2) { transition-delay: 420ms; }
.move .in .tile:nth-child(3), .move .in .log:nth-child(4), .move .in .prow:nth-child(3), .move .in .code span:nth-child(3), .move .in .wk i:nth-child(3) { transition-delay: 540ms; }
.move .in .tile:nth-child(4), .move .in .log:nth-child(5), .move .in .code span:nth-child(4), .move .in .wk i:nth-child(4) { transition-delay: 660ms; }
.move .in .code span:nth-child(5), .move .in .wk i:nth-child(5) { transition-delay: 780ms; }
.move .in .code span:nth-child(6), .move .in .wk i:nth-child(6) { transition-delay: 900ms; }
.move .in .wk i:nth-child(7) { transition-delay: 1020ms; }
.move .in .cal__c:nth-child(n + 8) > span { transition-delay: 500ms; }
.move .in .cal__c--best > span { transition-delay: 800ms; }

/* ---- Reveal on scroll (gecko.js) ---- */
.move [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.move [data-reveal].in { opacity: 1; transform: none; }
[data-delay='1'] { --delay: 90ms; }
[data-delay='2'] { --delay: 180ms; }
[data-delay='3'] { --delay: 270ms; }

/* ---- Motion tied to the scroll (2026-10-13) ----
   The old Gecko site felt smooth because things moved with the reader: its
   showcase lay flat as it arrived. Here the drawn panels rise and grow into
   place, a little low and small at the bottom of the screen and at rest a
   third of the way up. Flat on purpose: a 3D tilt (rotate x) on the Pricing
   credits panel, whose ring is a rotated SVG, froze Chrome's drawing for
   seconds at a time on the live site (2026-10-13). Each page's opening
   lines lag and recede slightly as they scroll away (Home's only: Pricing's
   head holds the billing switch, and Features' lede would slide over the step
   bar, which is clear at rest so the glass shows through it),
   always at full brightness. No fade: the user found grey text and buttons
   merge with the background (2026-10-13), a faded button reads as disabled,
   and grey is the two-tone headings' colour. The browser runs these on the
   compositor (no script), so they track the scroll exactly. Browsers without
   scroll timelines simply show everything at rest. */
@supports (animation-timeline: view()) {
  .move .job__pic, .move .split > .logbox, .move .fpanel { transform-origin: 50% 100%; animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  .move .hero__in { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}
@keyframes settle { from { translate: 0 32px; scale: 0.96; } to { translate: 0 0; scale: 1; } }
@keyframes drift { to { translate: 0 64px; scale: 0.97; } }

/* ---- Scenes behind the page heads (2026-10-14) ----
   A macro shot of a display under smoked cover glass, across the full width
   of the page: close enough to see every square pixel, tilted, drifting, and
   fading into the glass's dark toward its bottom edge. It shows Ostrel's own
   screens, drawn from the app's design: Home the Overview (its dials sweep up
   on arrival), Pricing every section in one long row, Features one video's
   way from Conception to Monitor. Drawn by assets/scenes.js (built from
   site/src with npm run site:scenes); on Features the pane runs on through
   the step bar, whose height the script sets. The page reads fully without
   it; the canvas comes in once its first frame is drawn, as the camera pulls
   focus. */
.hero, .chead, .fhead { position: relative; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease-out); }
.scene.is-on { opacity: 1; }
/* Browsers that cannot run the scene (scenes.js) show a still of it instead. */
.scene.is-still { opacity: 1; background: no-repeat 0 0 / 100% 100%; }
.scene.is-still[data-scene='home'] { background-image: url('/assets/scene-still-home-wide.jpg'); }
.scene.is-still[data-scene='pricing'] { background-image: url('/assets/scene-still-pricing-wide.jpg'); }
.scene.is-still[data-scene='features'] { background-image: url('/assets/scene-still-features-wide.jpg'); }
@media (max-width: 700px) {
  .scene.is-still[data-scene='home'] { background-image: url('/assets/scene-still-home-phone.jpg'); }
  .scene.is-still[data-scene='pricing'] { background-image: url('/assets/scene-still-pricing-phone.jpg'); }
  .scene.is-still[data-scene='features'] { background-image: url('/assets/scene-still-features-phone.jpg'); }
}
.scene canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 1080px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --head-h: 60px; }
  .house .lockup { font-size: 24px; }
}
@media (max-width: 360px) {
  .house .lockup__word { display: none; }
}
@media (max-width: 600px) {
  .head__in { gap: 14px; }
  .brand__word, .head__get { display: none; }
  .nav .nav__get { display: block; color: var(--ink); }
}
@media (max-width: 900px) {
  .nav { display: none; position: fixed; top: var(--head-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--ground); border-bottom: 1px solid var(--rule); padding: 8px 0 16px; }
  .head.is-open .nav { display: flex; }
  .nav a { padding: 14px 24px; }
  .menu-btn { display: inline-flex; }
  .head__actions { gap: 10px; }
  .section__head { grid-template-columns: minmax(0, 1fr); }
  .trust { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 40px; }
  .toc { position: static; max-height: none; }
  .use { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .scope { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .acct__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .brand { gap: 10px; }
  .head__actions .btn--solid { padding: 0 14px; }
}

@media (min-width: 901px) {
  /* Once stuck, the bar of steps slims by 20px and the same 20px goes under
     it as margin, so the page below never moves. */
  .glance { transition: box-shadow 220ms ease, margin-bottom 220ms var(--ease-out); }
  .glance__step { transition: border-color 220ms var(--ease-out), color 220ms ease, padding 220ms var(--ease-out), gap 220ms var(--ease-out); }
  .glance__num { transition: font-size 220ms var(--ease-out); }
  .glance.is-stuck { margin-bottom: 20px; }
  .glance.is-stuck .glance__step { padding: 12px 0 10px; gap: 6px; }
  .glance.is-stuck .glance__num { font-size: 18px; }
}
@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .pcol, .pcol:first-child, .pcol:last-child { padding: 24px 0; }
  .pcol + .pcol { border-left: 0; }
  .pcol:nth-child(n + 3) { border-top: 1px solid var(--track); }
}
@media (max-width: 900px) {
  .jobs { grid-template-columns: minmax(0, 1fr); }
  .job__pic { height: auto; min-height: 210px; }
  .split, .feat__in { grid-template-columns: minmax(0, 1fr); }
  .feat__text { order: -1; border-left: 0; padding-left: 0; }
  .glance__in { gap: 0 10px; }
  .glance__step { padding: 12px 0 10px; gap: 6px; }
  .glance__num { font-size: 18px; }
  .glance__name { font-size: 10px; letter-spacing: 0.12em; }
  .glance__more { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 24px; }
  .feat { scroll-margin-top: 48px; }
  .plans, .qa { grid-template-columns: minmax(0, 1fr); }
  .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reqs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .reqs > div:nth-child(n + 3) { margin-top: 26px; }
  .glance--4 + .glance__more { display: none; }
}
@media (max-width: 600px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .pcol:nth-child(n + 2) { border-top: 1px solid var(--track); }
  .tiles--4, .dials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dials { gap: 18px 14px; }
  .fpanel__top { flex-direction: column; gap: 6px; }
  .cal__t { display: none; }
  .cal__c { height: 52px; padding: 5px; }
  .log { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 18px; }
  .logbox__head { padding: 14px 18px; }
  .boom__x { font-size: 30px; }
  .tiles .tile { padding: 8px 10px; }
  .tiles .tile > span { font-size: 18px; }
  .busy__more .ul-link { display: inline-block; margin: 10px 0 0; }
  .reqs { grid-template-columns: minmax(0, 1fr); }
  .reqs > div, .reqs > div:first-child { padding: 22px 0 0; border-left: 0; margin-top: 0; }
  .reqs > div:nth-child(n + 2) { margin-top: 22px; border-top: 1px solid var(--track); }
  .credits__cols { grid-template-columns: minmax(0, 1fr); }
  .credits__cols > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .plan__top, .plan__mid, .plan__end { padding-left: 22px; padding-right: 22px; }
  .code span { height: 40px; font-size: 18px; }
  .glance--4 .glance__name { font-size: 9px; letter-spacing: 0.06em; }
}

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

/* ---- The profile menu (account-menu.js), in Ostrel's skin: the same square
   tile as the app icon and a hairline panel. ---- */
.me { position: relative; }
/* The account button is one of the bar's controls: square-edged, 40px,
   the same as the buttons beside it and as horrac.com's account button. */
.me__btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--ink); border: 1px solid var(--rule-2); border-radius: 0; font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.me__btn:hover, .me__btn[aria-expanded='true'] { border-color: var(--ink); background: var(--panel); }
.me__btn:empty::before { content: ''; width: 10px; height: 10px; border: 1px solid var(--ink-3); border-radius: 50%; }
.me__menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: 70; width: 290px; padding: 6px; background: var(--panel); border: 1px solid var(--rule-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; animation: me-in 180ms var(--ease-out); }
@keyframes me-in { from { opacity: 0; transform: translateY(-4px); } }
.me__who { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.me__avatar { width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 1px solid var(--rule-2); border-radius: 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.02em; }
.me__who strong { display: block; font-weight: 500; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__who div > span { display: block; margin-top: 4px; font-size: var(--fs-badge); font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--amber); }
.me__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; background: none; color: var(--ink-2); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; text-align: left; text-decoration: none; cursor: pointer; }
.me__item svg { width: 16px; height: 16px; flex: none; color: var(--ink-4); }
.me__item:hover, .me__item:focus-visible { background: var(--raise); color: var(--ink); outline: none; }
.me__item--danger, .me__item--danger svg { color: var(--red); }
.me__item--danger:hover, .me__item--danger:focus-visible { background: rgba(200, 95, 69, 0.1); color: var(--red); }
.me__sep { height: 1px; margin: 6px 4px; background: var(--rule); }
@media (max-width: 520px) { .me__menu { position: fixed; left: 16px; right: 16px; top: calc(var(--head-h) + 8px); width: auto; } }
.me__who .me__email { margin-top: 2px; font-size: var(--fs-tiny); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }