/* Flaris Replay — the landing page.
 *
 * One page, no framework, no build. The palette, the type scale and the
 * sheet rhythm are measured from the reference and rebuilt here in our own
 * code. The hero chart is ours: the same candles the terminal draws.
 */

/* ------------------------------------------------------------- the fonts -- */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-latin.woff2?v=544f43a") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-latin.woff2?v=544f43a") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */

:root {
  --page: #0a0a0a;
  --sheet: #1b1b1b;
  --card: #0f0f0f;
  --raised: #171717;
  --line: #2a2a2a;
  --line-soft: rgba(255, 255, 255, .08);
  --line-faint: rgba(255, 255, 255, .06);

  --ink: #fafafa;
  --body: rgba(250, 250, 250, .72);
  --muted: #bfc3cb;
  --label: rgba(250, 250, 250, .56);
  --faint: rgba(250, 250, 250, .5);

  --up: #089981;
  --down: #f23645;
  --blue: #2962ff;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-card: 16px;
  --r-media: 12px;
  --r-btn: 4px;

  --wrap: 1664px;
  --gutter: 32px;
}

/* ----------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 450;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--page); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

section[id] { scroll-margin-top: 96px; }

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: var(--page);
  font-size: 14px;
}
.skip:focus { top: 16px; }

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

/* ---------------------------------------------------------------- header -- */

/* The header floats over the first screen and asks for nothing: no bar, no
   rule, no blur. It is the page's own ink at the top of the page. It only
   takes a surface once it has something to sit on. */
.sitehead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .2s, border-color .2s;
}

.sitehead.stuck {
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line-soft);
}

.headin {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 80px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: fit-content;
}

.mark { display: inline-flex; flex: 0 0 auto; }

/* The mark is drawn from the sprite at the top of the document, so it is one
   path in the file and three places on the page. It takes the ink of whatever
   it stands on. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.mark svg,
.ctamark svg { display: block; fill: var(--ink); }

.brandname {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.navlinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.navlinks a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-btn);
  font-size: 15px;
  line-height: 22px;
  color: #e2e4ea;
  transition: color .15s, background-color .15s;
}

.navlinks a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .06);
}

/* The menu's own door. It is hidden while the header still shows the real
   one, and appears in the dropdown once that button is gone. */
.navdoor { display: none; }

.headactions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 15px;
  line-height: 20px;
  font-weight: 450;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.arw {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-white { background: var(--ink); color: var(--page); }
.btn-white:hover { background: #e8e8e8; }

.btn-glass { background: rgba(255, 255, 255, .08); color: var(--ink); }
.btn-glass:hover { background: rgba(255, 255, 255, .13); }

.btn-quiet { background: transparent; color: rgba(250, 250, 250, .9); }
.btn-quiet:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }

.btn-dark { background: var(--page); color: var(--ink); }
.btn-dark:hover { background: #222; }

.btn-block {
  display: flex;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  justify-content: space-between;
}

.burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--r-btn);
}

.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .2s, opacity .2s;
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero -- */

/* One surface, one offer. The chart is the room rather than a picture on the
   wall: it runs the full width of the sheet, dimmed, and the words stand in
   the calm left of it. The things the old hero said twice -- the second
   button, the overlay title, the clock, the crosshair -- are gone, because a
   person reads one promise and takes one step. */
.hero { padding: 0; }

/* The first screen is the page, not a card on it: the sheet runs to all four
   edges, the header floats over it, and the chart is the room the words stand
   in. Nothing is inset, nothing is rounded, and there is no frame to read as
   a box the product was placed inside. The sheet is the page's own black, so
   the candles keep their colour and are dimmed towards black rather than
   washed towards grey. */
.herosheet {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--page);
  isolation: isolate;
}

/* The pane is the sheet, so the canvas paints nothing behind its own marks:
   `draw()` clears rather than fills, and the candles sit straight on the
   black. It is dimmed by the veil, not by its own opacity -- a translucent
   canvas blends every candle into the surface under it, which is what made
   the market look washed out. It starts below the floating header and stops
   where the panel's foot begins, so no axis label is ever written over the
   header or the badges. */
#herocanvas {
  position: absolute;
  inset: 80px 0 96px;
  z-index: 0;
  width: 100%;
  pointer-events: none;
}

/* Two washes, not a scrim. One runs down the screen so the header has a floor
   and the chart sinks into the page at the foot; one crosses it so the words
   have somewhere to stand. Both are the page's own black, so the chart is
   darkened without being greyed: a wash in the sheet's grey is what put a
   film over the colours. The top and the foot go to full black, which is what
   ends the first screen and starts the next one. */
.heroveil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, .85) 0%,
      rgba(10, 10, 10, .38) 9%,
      rgba(10, 10, 10, 0) 24%,
      rgba(10, 10, 10, 0) 56%,
      rgba(10, 10, 10, .45) 78%,
      var(--page) calc(100% - 96px)),
    linear-gradient(90deg,
      var(--page) 0%,
      rgba(10, 10, 10, .93) 34%,
      rgba(10, 10, 10, .78) 52%,
      rgba(10, 10, 10, .28) 74%,
      rgba(10, 10, 10, 0) 100%);
}

/* The words sit slightly below the middle of the room above the badge row:
   dead centre reads a touch high against a chart whose weight is at the
   bottom. The block is centred, so padding-top moves it down by half its
   value. Below 960px the chart takes the top of the sheet and this is
   replaced by the offset that clears it. */
.heroin {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 64px;
  min-width: 0;
}

.herotitle {
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1.02;
  font-weight: 450;
  letter-spacing: -.6px;
  max-width: 700px;
}

.mutedline { display: block; color: var(--label); }

.herocopy {
  margin-top: 24px;
  font-size: 15px;
  line-height: 22px;
  color: var(--body);
  max-width: 540px;
}

/* The button is the only action in the panel, so it does not need to be the
   full width of it: a wide white bar reads as a form, a button reads as a
   step. The trial line stands beside it, where it is read with the click. */
.heroact {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.herocta {
  height: 48px;
  padding: 0 22px;
  font-size: 16px;
}

.heronote {
  font-size: 12px;
  line-height: 18px;
  color: var(--label);
}

/* The trial is the offer, so the part that says it is free is the part that
   is legible. Everything else in the line stays a footnote. */
.heronote b,
.ctanote b { color: var(--ink); font-weight: 450; }

.herofoot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 36px;
}

.herobadges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  font-size: 13px;
  line-height: 18px;
  color: var(--body);
}

.herobadges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.herobadges svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

/* --------------------------------------------------------- the sections -- */

.band { padding: 120px 0 0; }

.band-sheet {
  padding: 150px 0 180px;
  background: var(--sheet);
}

.sectionhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1000px;
}

.eyebrow {
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 28px;
  font-weight: 450;
  color: var(--label);
}

.eyebrow-sm {
  margin-bottom: 14px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 450;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--label);
}

.h2 {
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.16;
  font-weight: 450;
  letter-spacing: -.5px;
  max-width: 960px;
}

.h2-sm {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.2;
}

.lede {
  margin-top: 20px;
  max-width: 620px;
  font-size: 16px;
  line-height: 24px;
  color: var(--body);
}

/* ------------------------------------------------------------- the cards -- */

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 72px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--sheet);
}

#terminal .card { min-height: 300px; }

.pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--page);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-dark { background: var(--page); color: var(--ink); }

.cardbody {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.card h3 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 450;
  letter-spacing: -.2px;
}

.card p {
  font-size: 14px;
  line-height: 21px;
  color: var(--body);
}

.cardlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--body);
  transition: color .15s, gap .15s;
}

.cardlink:hover { color: var(--ink); gap: 9px; }

.cardlink svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- measure -- */

.measuregrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 40px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--card);
}

.stage .backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: blur(6px);
  opacity: .55;
  transform: scale(1.35);
}

.stage .backdrop-a { object-position: 10% 12%; }
.stage .backdrop-b { object-position: 40% 92%; }

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%,
    transparent 0%,
    rgba(10, 10, 10, .8) 70%,
    rgba(10, 10, 10, 1) 100%);
}

.mock {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.mockhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.mocktitle { font-size: 13px; line-height: 18px; font-weight: 450; }

.mockkicker {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--label);
}

.mockbig {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mockbig b {
  font-size: 32px;
  line-height: 36px;
  font-weight: 450;
  letter-spacing: -.02em;
  color: var(--up);
}

.mockbig span { font-size: 13px; line-height: 18px; color: var(--body); }
.mockbig em { font-style: normal; font-size: 11px; line-height: 16px; color: var(--label); }

.statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.stat {
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--card);
}

.stat b { display: block; font-size: 16px; line-height: 20px; font-weight: 450; }

.stat span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--label);
}

.mockrows {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.mockrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.mockrow span { font-size: 11px; line-height: 15px; color: var(--body); }
.mockrow b { font-size: 12px; line-height: 15px; font-weight: 450; text-align: right; }
.mockrow em { grid-column: 1 / -1; font-style: normal; font-size: 10px; line-height: 13px; color: var(--label); }

.mockrow .up { color: var(--up); }
.mockrow .down { color: var(--down); }

.mocknote {
  margin-top: 12px;
  font-size: 10px;
  line-height: 15px;
  color: var(--label);
}

.copyrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.copyrow:last-of-type { border-bottom: 0; }

.dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(250, 250, 250, .3);
}

.copyrow-master .dot { background: var(--up); }

.copyrow div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.copyrow b { font-size: 12px; line-height: 16px; font-weight: 450; }
.copyrow div span { font-size: 10px; line-height: 13px; color: var(--label); }

.tag {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(8, 153, 129, .14);
  color: var(--up);
  font-size: 9px;
  line-height: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-quiet { background: rgba(255, 255, 255, .06); color: var(--label); }

.featurebody {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.featurebody h3 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 450;
  letter-spacing: -.2px;
}

.featurebody p {
  max-width: 560px;
  font-size: 14px;
  line-height: 21px;
  color: var(--body);
}

/* ---------------------------------------------------------------- desks -- */

.deskband { padding: 120px 0 0; }

.desksheet {
  padding: 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--sheet);
}

.desksheet .cards3 { margin-top: 56px; }

.dcard { padding: 24px; }

.browser {
  display: flex;
  flex-direction: column;
  min-height: 196px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--card);
}

.browserbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: #141414;
}

.browserdots { display: flex; gap: 4px; }

.browserdots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.browserurl {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .04);
  font-size: 9px;
  line-height: 12px;
  color: var(--faint);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browserbody {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px 12px;
}

.brow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 11px;
  line-height: 15px;
}

.brow:last-child { border-bottom: 0; }
.brow span { color: var(--label); }
.brow b { font-weight: 450; color: var(--ink); }
.brow .up { color: var(--up); }
.brow .role { color: var(--body); }

.minicurve { width: 100%; height: 56px; margin-bottom: 6px; }
.curve-line { fill: none; stroke: var(--up); stroke-width: 1.5; }
.curve-fill { fill: rgba(8, 153, 129, .12); stroke: none; }

/* -------------------------------------------------------------- pricing -- */

.pricegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.plan {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-card);
}

.plan-light { background: var(--ink); color: var(--page); }
.plan-dark { background: var(--sheet); border-color: var(--line); }

.amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 24px;
  font-size: 56px;
  line-height: 1;
  font-weight: 450;
  letter-spacing: -.03em;
}

.amount .per {
  font-size: 15px;
  line-height: 20px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--label);
}

.plan-light .amount .per { color: rgba(10, 10, 10, .56); }

.amount-note {
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.planblurb {
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--body);
}

.plan-light .planblurb { color: rgba(10, 10, 10, .72); }

.planrule {
  height: 1px;
  margin: 26px 0 22px;
  background: var(--line-soft);
}

.plan-light .planrule { background: rgba(10, 10, 10, .12); }

.planlist {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.planlist li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 21px;
  color: var(--body);
}

.plan-light .planlist li { color: rgba(10, 10, 10, .8); }

.planlist svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plancta { margin-top: auto; }

.planend {
  margin-top: auto;
  font-size: 13px;
  line-height: 20px;
  color: var(--label);
}

/* The line between the list and the button: what the billing does, said once
   and quietly, so the button stays the last thing read. */
.planfine {
  margin-top: 18px;
  font-size: 12px;
  line-height: 18px;
  color: var(--label);
}

.plan-light .planfine { color: rgba(10, 10, 10, .56); }

.pricenote {
  max-width: 900px;
  margin-top: 28px;
  font-size: 12px;
  line-height: 18px;
  color: var(--label);
}

/* ------------------------------------------------------------------ faq -- */

.faq {
  max-width: 1000px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 450;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
  opacity: .7;
  transition: transform .2s;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq p {
  max-width: 760px;
  padding: 0 0 24px;
  font-size: 15px;
  line-height: 24px;
  color: var(--body);
}

/* ------------------------------------------------------------------ cta -- */

.cta { padding: 120px 0 0; }

.ctainner {
  position: relative;
  padding-right: 180px;
}

.ctacopy { max-width: 900px; }

.ctalede {
  max-width: 520px;
  margin-top: 18px;
  font-size: 16px;
  line-height: 24px;
  color: var(--body);
}

.ctabtns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.btn-huge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 74px;
  padding: 0 24px;
  border-radius: var(--r-btn);
  font-size: 24px;
  line-height: 28px;
  font-weight: 450;
  transition: background-color .15s, transform .15s;
}

.btn-huge .arw { width: 20px; height: 20px; }
.btn-huge:hover { transform: translateY(-1px); }

.btn-huge-white { background: var(--ink); color: var(--page); }
.btn-huge-white:hover { background: #e8e8e8; }

.btn-huge-glass { background: rgba(255, 255, 255, .08); color: var(--ink); }
.btn-huge-glass:hover { background: rgba(255, 255, 255, .13); }

.ctanote {
  margin-top: 16px;
  font-size: 12px;
  line-height: 18px;
  color: var(--label);
}

.ctamark {
  position: absolute;
  top: 8px;
  right: 32px;
  opacity: .95;
}

/* --------------------------------------------------------------- footer -- */

.foot { padding: 0 0 40px; }

.footerimg {
  position: relative;
  height: 400px;
  margin-top: 120px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--card);
}

.footerimg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0) 62%,
    rgba(10, 10, 10, .5) 100%);
}

.footerimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 51%;
  opacity: 1;
}

.footin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px var(--gutter) 20px;
}

.footlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footlinks a {
  font-size: 13px;
  line-height: 20px;
  color: var(--body);
  transition: color .15s;
}

.footlinks a:hover { color: var(--ink); }

.footbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.footbar p {
  font-size: 12px;
  line-height: 18px;
  color: var(--label);
}

/* --------------------------------------------------------------- reveal -- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .desksheet { padding: 40px; }
  .card { padding: 20px; }
  .dcard { padding: 20px; }
}

@media (max-width: 1080px) {
  .herotitle { max-width: 560px; }
}

@media (max-width: 960px) {
  .headin { grid-template-columns: 1fr auto; height: 72px; gap: 12px; }

  .navlinks { display: none; }

  .navlinks.open {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 24px 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(10, 10, 10, .98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .navlinks.open a { height: 46px; padding: 0 8px; }

  /* Last row of the open menu, with a hairline above it so it does not read
     as one more section. The header's quiet button is gone by 560px, so
     from here down this is the only way in. */
  .navlinks.open .navdoor {
    display: inline-flex;
    height: 46px;
    margin-top: 8px;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .burger { display: inline-flex; }

  .sectionhead { max-width: 100%; }
  .eyebrow { font-size: 22px; line-height: 26px; }
}

@media (max-width: 900px) {
  .cards3 { grid-template-columns: 1fr; }
  .measuregrid { grid-template-columns: 1fr; }
  .pricegrid { grid-template-columns: 1fr; }
  .plan { min-height: 0; }
  .plancta { margin-top: 32px; }
  .planend { margin-top: 32px; }
  .ctabtns { grid-template-columns: 1fr; }
  .ctainner { padding-right: 32px; }
  .ctamark { display: none; }
  .footerimg { height: 320px; }
  .stage { min-height: 460px; }

  /* On a narrow screen the chart is a band across the top of the first
     screen, clear of the floating header, dissolving into the page. The words
     stand under it on black: a picture behind the copy would only make the
     copy harder to read. The band is dimmed towards black, not grey, so its
     two colours stay two colours. */
  .herosheet { grid-template-rows: 1fr auto; }

  #herocanvas { inset: 0 0 auto; height: 330px; }

  .heroveil {
    background: linear-gradient(180deg,
      var(--page) 0,
      var(--page) 62px,
      rgba(10, 10, 10, .62) 76px,
      rgba(10, 10, 10, .3) 120px,
      rgba(10, 10, 10, .3) 268px,
      rgba(10, 10, 10, .82) 300px,
      var(--page) 330px,
      var(--page) 100%);
  }

  .heroin {
    padding-top: 340px;
    justify-content: center;
  }

  .herofoot { padding-top: 26px; padding-bottom: 28px; }

  /* Two by two from here down: four badges in a row leave one stranded on
     the second line the moment the sheet narrows. */
  .herobadges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    flex: 1 1 auto;
    max-width: 360px;
    font-size: 12.5px;
  }

  /* The step cards are three short paragraphs stacked, not three columns that
     have to end on the same line: the 300px floor that lined them up across
     the row only leaves a hole once the row is gone. */
  #terminal .card { min-height: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .herotitle { font-size: clamp(29px, 8.2vw, 36px); letter-spacing: -.3px; }
  .herocopy { margin-top: 18px; font-size: 14px; line-height: 21px; }
  .heroact {
    flex-direction: column;
    align-items: stretch;
    /* The panel aligns its children to the left, so without this the column
       is only as wide as its longest line and the button -- which asks for
       100% of it -- shrinks with the note beside it. */
    align-self: stretch;
    gap: 12px;
    margin-top: 24px;
  }
  /* Full width of the column, but never a bar across the page: past about
     360px a white rectangle stops reading as a step and starts reading as
     a form. */
  .herocta { width: 100%; max-width: 360px; justify-content: space-between; }
  .herofoot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .herobadges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    flex: 0 0 auto;
    max-width: none;
    font-size: 12px;
  }

  /* The chart is the product, so on a phone it keeps a band of its own at the
     top of the screen rather than sitting behind the words. */
  #herocanvas { height: 300px; }

  .band-sheet { padding: 64px 0 72px; }
  .band { padding-top: 64px; }
  .deskband { padding-top: 64px; }
  .desksheet { padding: 20px; }
  .eyebrow { margin-bottom: 12px; font-size: 20px; line-height: 24px; }
  .h2 { font-size: 30px; }
  .h2-sm { font-size: 27px; }
  .lede { margin-top: 14px; font-size: 15px; line-height: 23px; }

  .cards3 { gap: 14px; margin-top: 32px; }
  .desksheet .cards3 { margin-top: 28px; }
  .card { gap: 14px; padding: 16px; }
  .card h3, .featurebody h3 { font-size: 21px; line-height: 26px; }
  .card p, .featurebody p { font-size: 13px; line-height: 20px; }

  .measuregrid { gap: 16px; margin-top: 32px; }
  .stage { min-height: 0; padding: 16px; }
  .mock { padding: 14px; }
  .mockbig b { font-size: 28px; line-height: 32px; }
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child { grid-column: 1 / -1; }

  .pricegrid { gap: 16px; margin-top: 32px; }
  .plan { padding: 24px; }
  .amount { font-size: 48px; }
  .amount-note { font-size: 32px; }
  .pricenote { margin-top: 20px; }

  .faq { margin-top: 28px; }
  .faq summary { gap: 16px; padding: 18px 0; font-size: 16px; line-height: 23px; }
  .faq p { padding-bottom: 20px; font-size: 14px; line-height: 22px; }

  .cta { padding-top: 64px; }
  .ctalede { margin-top: 14px; font-size: 15px; line-height: 23px; }
  .ctabtns { gap: 10px; margin-top: 24px; }
  .btn-huge { height: 60px; padding: 0 18px; font-size: 18px; line-height: 24px; }
  .btn-huge .arw { width: 18px; height: 18px; }

  .footerimg { height: 220px; margin-top: 64px; }
  .footin {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px var(--gutter) 16px;
  }
  .footbar { flex-direction: column; gap: 10px; padding-top: 16px; }
}

@media (max-width: 560px) {
  .headactions .btn-quiet { display: none; }
  .card { padding: 14px; }
  .dcard { padding: 14px; }
  .desksheet { padding: 16px; }
  .btn-huge { font-size: 17px; }
  .footlinks { gap: 8px 16px; }
}

/* Narrow phones: the wordmark and the two controls no longer share the row,
   so the mark carries the brand on its own and the button keeps its words. */
@media (max-width: 370px) {
  .brandname { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}