/* FitSend — fitsend.app
   "Night Storm" web stylesheet, extending the iOS design system in
   ios/FitSend/DesignSystem/FitSendTheme.swift. The product renders dark-only;
   the site commits to the same single dark theme. A print stylesheet at the
   bottom re-inks the legal pages for paper.

   Form language comes from the FS mark: hollow parallel strokes with a forward
   slant. Display type is set hollow where it needs emphasis, labels and buttons
   carry the same slant, and sections are ruled with hairlines instead of boxed
   into cards. Accent colors are semantic, matching the transfer board in the
   hero: cyan is data in motion, green is written, violet is skipped, blue is
   replaced, amber is reported.

   Type: Chakra Petch (display — its angular cut terminals and forward italic
   echo the FS mark) with Barlow (body). Latin woff2 subsets are self-hosted
   in /assets/fonts/ under the SIL Open Font License; see LICENSE.txt there. */

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-700.woff2) format('woff2');
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-600italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-700italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlow-400.woff2) format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/barlow-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/barlow-600.woff2) format('woff2');
}

:root {
  /* Palette — exact FitSendTheme values */
  --canvas: #1b1e2b;
  --surface: #24283b;
  --raised: #2a2f45;
  --ink: #c0caf5;
  --ink-muted: #9aa5ce;
  --ink-faint: #7982a9;
  --brand: #7aa2f7;
  --violet: #bb9af7;
  --cyan: #7dcfff;
  --green: #9ece6a;
  --amber: #e0af68;
  --rust: #f7768e;
  --on-accent: #15161e;
  --hairline: rgba(59, 66, 97, 0.7);
  --deep: #161925;

  /* Type */
  --display: 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --body:
    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Code', Menlo, Consolas, monospace;

  /* The mark's forward slant, reused by labels, buttons, and the board. */
  --slant: -18deg;
  --radius: 14px;
  --measure: 68ch;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--brand);
  color: var(--on-accent);
}

a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(125, 207, 255, 0.35);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--cyan);
}

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

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.3rem);
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
h3 {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
}

img {
  max-width: 100%;
}

/* ---------- Shared chrome ---------- */

.shell {
  width: min(1160px, 100% - 3rem);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(27, 30, 43, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.75rem;
}

/* Brand lockup: the bare FS mark (no tile), wordmark in the mark's own
   forward italic. */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  margin-right: auto;
}

.brand-lockup img {
  height: 30px;
  width: auto;
}

.brand-lockup span {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

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

.site-nav .nav-cta {
  color: var(--on-accent);
  background: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 0.42rem 0.95rem;
  border-radius: 6px;
  transform: skewX(var(--slant));
  white-space: nowrap;
  flex-shrink: 0;
}

.site-nav .nav-cta span {
  display: inline-block;
  transform: skewX(calc(var(--slant) * -1));
}

.site-nav .nav-cta:hover {
  color: var(--on-accent);
  background: #fff;
}

/* Section label: the mark's two parallel strokes, then tracked mono. */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1rem;
}

.kicker::before {
  content: '';
  flex: none;
  width: 3px;
  height: 12px;
  margin-left: 3px;
  background: var(--brand);
  box-shadow: 6px 0 0 var(--violet);
  transform: skewX(var(--slant));
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem 1.75rem;
}

/* Buttons lean with the mark; the label is counter-skewed upright. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transform: skewX(var(--slant));
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.btn > span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transform: skewX(calc(var(--slant) * -1));
}

.btn:hover {
  border-color: var(--ink-faint);
  background: rgba(192, 202, 245, 0.05);
}

.btn .arrow {
  color: var(--cyan);
  transition: transform 0.15s ease;
}

.btn:hover .arrow {
  transform: translateX(3px);
}

/* Official App Store badge artwork — do not restyle beyond sizing. */
.store-badge {
  display: inline-flex;
}

.store-badge img {
  height: 54px;
  width: auto;
  display: block;
}

.store-badge:hover {
  opacity: 0.92;
}

/* ---------- Landing: hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--hairline);
}

/* The mark, oversized and barely there, bleeding off the right edge. */
.hero-ghost {
  position: absolute;
  top: clamp(1rem, 4vw, 3.5rem);
  right: -6vw;
  width: min(62vw, 820px);
  max-width: none;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
}

.hero-copy {
  position: relative;
  max-width: 52rem;
}

.hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.hero h1 {
  font-style: italic;
  font-size: clamp(2.1rem, 4.5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.45em;
}

/* Hollow display type, drawn the way the mark is drawn. The stroke is painted
   under a ground-colored fill so only its outer half shows; that hides the
   overlapping contours inside Chakra Petch's glyphs. */
.hollow {
  display: block;
  color: var(--hollow-fill, var(--canvas));
  -webkit-text-stroke: 3px var(--brand);
  paint-order: stroke fill;
}

.hero .hollow {
  margin-top: 0.4em;
  font-size: 0.6em;
  letter-spacing: 0;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .hollow {
    color: var(--brand);
  }
}

.hero-lede {
  max-width: 40rem;
  margin: 0 0 2rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-muted);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 2rem 0 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* App-inspired, synthetic previews. No private screenshots or image downloads. */
.hero-preview {
  margin: 0;
  min-width: 0;
  container-type: inline-size;
}

.preview-scene {
  position: relative;
  aspect-ratio: 0.84;
  isolation: isolate;
  margin-inline: 5%;
  font-size: 2.15cqi;
}

.preview-orbit {
  position: absolute;
  inset: 15% -5% 10%;
  border: 1px solid rgba(122, 162, 247, 0.16);
  border-radius: 50%;
  transform: rotate(-25deg);
  background: radial-gradient(ellipse, rgba(122, 162, 247, 0.1), transparent 68%);
}

.preview-orbit::after {
  content: '';
  position: absolute;
  inset: 10% -5%;
  border: 1px solid rgba(187, 154, 247, 0.1);
  border-radius: inherit;
  transform: rotate(45deg);
}

.preview-phone {
  --tilt: 0deg;
  position: absolute;
  width: 48%;
  padding: 0.5em;
  border: 1px solid rgba(192, 202, 245, 0.35);
  border-radius: 2.8em;
  background: #10121c;
  box-shadow:
    0 2em 4em rgba(9, 11, 20, 0.45),
    inset 0 0 0 2px #2d3145;
  transform: rotate(var(--tilt));
  animation: preview-arrive 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.preview-camera {
  position: absolute;
  top: 1.1em;
  left: 33%;
  width: 34%;
  height: 1.2em;
  border-radius: 2em;
  background: #0d0f18;
  z-index: 1;
}

.preview-screen {
  min-height: 36em;
  overflow: hidden;
  padding: 3.3em 1.15em 1em;
  border-radius: 2.3em;
  background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.4;
}

.preview-trends {
  --tilt: -13deg;
  top: 6%;
  left: 0;
  animation-delay: 0.08s;
}

.preview-sync {
  --tilt: 12deg;
  top: 17%;
  right: 0;
  animation-delay: 0.2s;
}

.preview-today {
  --tilt: -3deg;
  width: 53%;
  top: 12%;
  left: 23%;
  z-index: 2;
  animation-delay: 0.32s;
}

.preview-eyebrow,
.preview-label {
  display: block;
  font-size: 0.72em;
  color: var(--ink-muted);
}

.preview-eyebrow {
  margin-bottom: 0.4em;
  font-size: 0.6em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.preview-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6em;
  font-size: 2em;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.preview-title > span {
  color: var(--brand);
  font-size: 0.7em;
}

.preview-card {
  margin-bottom: 0.8em;
  padding: 1em;
  background: var(--surface);
  border: 1px solid rgba(192, 202, 245, 0.08);
  border-radius: 1.1em;
}

.preview-value {
  display: block;
  margin-top: 0.15em;
  font-size: 1.7em;
  letter-spacing: -0.04em;
}

.preview-value small {
  font-size: 0.55em;
  color: var(--ink-muted);
  font-weight: 500;
}

.preview-score-card {
  display: flex;
  align-items: center;
  gap: 1em;
}

.preview-score {
  display: grid;
  place-items: center;
  flex: none;
  width: 5.2em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--green) 84%, var(--raised) 0);
}

.preview-score strong {
  display: grid;
  place-items: center;
  width: 2.3em;
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: 50%;
  font-size: 2em;
}

.preview-chart {
  display: block;
  width: 100%;
  margin: 0.7em 0;
  overflow: visible;
}

.preview-grid {
  stroke: var(--hairline);
  stroke-width: 1;
}

.preview-line {
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
  animation: preview-draw 2s ease-out both;
}

.preview-heart {
  float: right;
  color: var(--rust);
}

.preview-heart-chart .preview-line {
  stroke: var(--rust);
}

.preview-sleep-stages {
  height: 1.7em;
  margin: 0.8em 0;
  border-radius: 0.4em;
  background: repeating-linear-gradient(
    90deg,
    var(--violet) 0 12%,
    #7b6bc2 12% 21%,
    var(--brand) 21% 28%,
    #575b98 28% 38%
  );
}

.preview-bars {
  height: 5em;
  display: flex;
  align-items: end;
  gap: 0.5em;
  margin: 1em 0;
}

.preview-bars i {
  flex: 1;
  height: 75%;
  border-radius: 0.3em 0.3em 0 0;
  background: var(--violet);
}

.preview-bars i:nth-child(2n) {
  height: 95%;
}
.preview-bars i:nth-child(3n) {
  height: 60%;
}

.preview-sync-card {
  text-align: center;
}

.preview-check {
  display: grid;
  place-items: center;
  margin: 0 auto 0.5em;
  width: 2em;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--green);
  border: 1px solid var(--green);
  font-size: 1.5em;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  padding: 0.85em 0.3em;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.85em;
}

.preview-row > span:last-child {
  color: var(--green);
}

.preview-sync-action {
  display: block;
  margin-top: 1.5em;
  padding: 0.75em;
  border-radius: 0.7em;
  background: var(--brand);
  color: var(--on-accent);
  text-align: center;
  font-weight: 600;
}

.preview-tabs {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  margin-top: 1.4em;
  padding-top: 1em;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 0.65em;
}

.preview-tabs b {
  color: var(--brand);
}

.preview-note {
  position: absolute;
  left: 10%;
  bottom: 3%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 1.3em;
  border: 1px solid var(--hairline);
  border-radius: 0.8em;
  background: var(--deep);
  box-shadow: 0 1em 2em rgba(9, 11, 20, 0.3);
  font-family: var(--mono);
  font-size: 0.85em;
  transform: rotate(-3deg);
}

.preview-note i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 1em rgba(158, 206, 106, 0.35);
}

.hero-preview figcaption {
  position: relative;
  margin-top: 1em;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.72rem;
}

@keyframes preview-arrive {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt));
  }
}

@keyframes preview-draw {
  from {
    stroke-dashoffset: 300;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.hero-facts li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hero-facts li::before {
  content: '';
  width: 3px;
  height: 11px;
  background: var(--green);
  transform: skewX(var(--slant));
}

/* ---------- Landing: transfer board ----------
   An illustration, not live data: five lanes show what FitSend does with a
   record at the gate. Blips run on `left` so each lane scales with its track;
   everything stills under Reduce Motion. */

.board {
  position: relative;
  margin: clamp(2.75rem, 6vw, 4.5rem) 0 0;
  background: var(--deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.board-head,
.lane {
  display: grid;
  grid-template-columns: minmax(9.5rem, 1.1fr) 4fr minmax(11rem, 1.3fr);
  align-items: center;
  column-gap: 1.5rem;
  padding-inline: 1.5rem;
}

.board-head {
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.board-route {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.board-route b {
  font-weight: 600;
  color: var(--brand);
}

.lanes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lane {
  padding-block: 1.05rem;
  border-bottom: 1px solid rgba(59, 66, 97, 0.4);
}

.lane:last-child {
  border-bottom: 0;
}

.lane-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}

.lane-name small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.lane-track {
  position: relative;
  height: 28px;
}

/* The line itself. */
.lane-track::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--hairline);
}

/* The gate: one slanted stroke per lane, stacking into the mark's rhythm. */
.lane-track::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 100%;
  margin-left: -2.5px;
  border-radius: 1px;
  background: var(--brand);
  transform: skewX(var(--slant));
}

.lane-track i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 5px;
  margin: -2.5px 0 0 -9px;
  border-radius: 1px;
  background: var(--cyan);
  transform: skewX(var(--slant));
  opacity: 0;
  animation: lane-pass 6s linear infinite;
}

.lane-track i:nth-child(2) {
  animation-delay: -2s;
}
.lane-track i:nth-child(3) {
  animation-delay: -4s;
}

.lane.is-skipped .lane-track i {
  animation-name: lane-stop-skipped;
}
.lane.is-unsupported .lane-track i {
  animation-name: lane-stop-unsupported;
}
.lane.is-replaced .lane-track i {
  background: var(--amber);
  animation-name: lane-pass-replaced;
}

/* Gap lane: the same empty hour on both sides of the gate. */
.lane-gap {
  position: absolute;
  top: 50%;
  width: 13%;
  height: 12px;
  margin-top: -6px;
  background: repeating-linear-gradient(
      108deg,
      transparent 0 4px,
      rgba(121, 130, 169, 0.55) 4px 5px
    )
    var(--deep);
}

.lane-gap.is-source {
  left: 20%;
}
.lane-gap.is-dest {
  left: 70%;
}

.lane.is-gap .lane-track i:nth-child(3) {
  animation-delay: -3.4s;
}
.lane.is-gap .lane-track i:nth-child(4) {
  animation-delay: -5.1s;
}

.lane-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--ink-muted);
}

.lane-status::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.is-written .lane-status::before {
  color: var(--green);
}
.is-skipped .lane-status::before {
  color: var(--violet);
}
.is-replaced .lane-status::before {
  color: var(--brand);
}
.is-gap .lane-status::before {
  color: var(--ink-faint);
  background: transparent;
  border: 1.5px solid currentColor;
}
.is-unsupported .lane-status::before {
  color: var(--amber);
}

.board-caption {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

@keyframes lane-pass {
  0% {
    left: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  48% {
    background: var(--cyan);
  }
  52% {
    background: var(--green);
  }
  94% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
    background: var(--green);
  }
}

@keyframes lane-pass-replaced {
  0% {
    left: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  48% {
    background: var(--amber);
  }
  52% {
    background: var(--brand);
  }
  94% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
    background: var(--brand);
  }
}

@keyframes lane-stop-skipped {
  0% {
    left: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  44% {
    background: var(--cyan);
  }
  48% {
    left: 48%;
    opacity: 1;
    background: var(--violet);
  }
  58%,
  100% {
    left: 48%;
    opacity: 0;
    background: var(--violet);
  }
}

@keyframes lane-stop-unsupported {
  0% {
    left: 0;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  44% {
    background: var(--cyan);
  }
  48% {
    left: 48%;
    opacity: 1;
    background: var(--amber);
  }
  58%,
  100% {
    left: 48%;
    opacity: 0;
    background: var(--amber);
  }
}

/* ---------- Landing: sections ---------- */

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section + .section {
  border-top: 1px solid var(--hairline);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-lede {
  max-width: 40rem;
  margin: 0;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* Rail layout: heading holds the left column while content scrolls past. */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.rail-head {
  position: sticky;
  top: 6rem;
}

.rail-head .section-lede {
  margin-top: 1rem;
}

/* Steps: hollow numerals on a shared rule. */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline);
}

.flow li {
  position: relative;
  padding-top: 1.6rem;
}

.flow li::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--brand);
}

.flow-n {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--canvas);
  -webkit-text-stroke: 2.5px var(--ink-faint);
  paint-order: stroke fill;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .flow-n {
    color: var(--ink-faint);
  }
}

.flow h3 {
  margin-bottom: 0.4rem;
}

.flow p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-muted);
}

.section-note {
  max-width: 46rem;
  margin: 2.5rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

/* Ruled lists: principles, privacy points. Rows, not cards. */
.ruled {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.ruled > li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline);
}

.ruled > li::before {
  content: '';
  width: 4px;
  height: 1.05rem;
  margin: 0.2rem 0 0 4px;
  border-radius: 1px;
  background: var(--tone, var(--brand));
  transform: skewX(var(--slant));
}

.ruled h3 {
  margin-bottom: 0.35rem;
}

.ruled p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--ink-muted);
}

.tone-brand {
  --tone: var(--brand);
}
.tone-rust {
  --tone: var(--rust);
}
.tone-violet {
  --tone: var(--violet);
}
.tone-cyan {
  --tone: var(--cyan);
}
.tone-amber {
  --tone: var(--amber);
}
.tone-green {
  --tone: var(--green);
}
.tone-faint {
  --tone: var(--ink-faint);
}

/* What syncs: a spec sheet. */
.spec-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.spec-types li {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--ink);
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: rgba(36, 40, 59, 0.6);
}

.footnote {
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 46rem;
}

.rail .footnote {
  margin: 1.5rem 0 0;
}

/* Privacy: a full-bleed band, the one place the page changes ground. */
.band {
  --hollow-fill: var(--deep);
  background: var(--deep);
  border-block: 1px solid var(--hairline);
}

.band + .section {
  border-top: 0;
}

.band .rail-head .btn {
  margin-top: 2rem;
}

.band h2 .hollow {
  -webkit-text-stroke-width: 2.5px;
}

/* Plans */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.plan {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.plan + .plan {
  border-left: 1px solid var(--hairline);
}

.plan-pro {
  background: var(--surface);
}

.plan-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.plan-name h3 {
  margin: 0;
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

.plan-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.plan-pro .plan-tag {
  color: var(--violet);
}

.plan-pitch {
  margin: 0 0 1.4rem;
  color: var(--ink-muted);
  font-size: 0.96rem;
}

.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.plan-list li {
  display: flex;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(59, 66, 97, 0.4);
  font-size: 0.95rem;
  color: var(--ink);
}

.plan-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.plan-list li::before {
  content: '';
  flex: none;
  width: 3px;
  height: 11px;
  margin: 0.45em 0 0 3px;
  background: var(--brand);
  transform: skewX(var(--slant));
}

.plan-pro .plan-list li::before {
  background: var(--violet);
}

.plans-note {
  margin-top: 1.5rem;
}

/* FAQ */
.faq {
  max-width: 46rem;
  border-top: 1px solid var(--hairline);
}

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

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
}

.faq summary:hover {
  color: #fff;
}

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

/* Plus that closes to a minus: two strokes, one rotates flat. */
.faq summary::after {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 0.3em;
  background:
    linear-gradient(var(--brand), var(--brand)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 1.5px 100% no-repeat;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  background:
    linear-gradient(var(--brand), var(--brand)) center / 100% 1.5px no-repeat,
    linear-gradient(transparent, transparent);
  transform: rotate(180deg);
}

.faq details p,
.faq details ol {
  margin: 0 0 1.25rem;
  max-width: 40rem;
  color: var(--ink-muted);
  font-size: 0.97rem;
}

.faq details ol {
  padding-left: 1.25rem;
}

/* Closing call */
.closing {
  position: relative;
  overflow: hidden;
}

.closing h2 {
  font-size: clamp(2.2rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.4em;
}

.closing p {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: var(--ink-muted);
  font-size: 1.08rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--deep);
  padding: 3rem 0 2.25rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-brand {
  margin-bottom: 0.9rem;
}

.footer-tagline {
  max-width: 34ch;
}

.footer-cols h3 {
  font-size: 0.72rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}

.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.footer-cols a {
  color: var(--ink-muted);
  text-decoration: none;
}

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

.smallprint {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.site-footer .smallprint {
  max-width: 62rem;
}

.footer-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.25rem;
}

/* ---------- Document pages (privacy, terms, support…) ---------- */

.doc {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 4rem;
}

.doc h1 {
  font-style: italic;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.doc-updated {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: -0.25rem 0 2rem;
}

.doc-summary {
  margin: 2rem 0 2.5rem;
}

.doc-summary ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 0.55rem;
}

.doc-summary li {
  color: var(--ink);
}

.doc-summary .contact-line {
  margin: 0 0 0.5rem;
}

.doc-summary p:last-child {
  margin-bottom: 0;
}

.doc section {
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--hairline);
}

.doc h2 {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.doc h3 {
  margin-top: 1.6rem;
}

.doc p,
.doc li {
  color: var(--ink-muted);
}

.doc li {
  margin-bottom: 0.4rem;
}

.doc li::marker {
  color: var(--ink-faint);
}

.doc strong {
  color: var(--ink);
}

.doc .kicker {
  margin-bottom: 0.75rem;
}

.doc .faq summary {
  font-size: 1rem;
}

.table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.doc th {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-faint);
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}

.doc td {
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-muted);
  vertical-align: top;
}

.doc td:first-child {
  color: var(--ink);
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.2rem;
  width: 2.2rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--canvas);
  -webkit-text-stroke: 2px var(--brand);
  paint-order: stroke fill;
}

@supports not (-webkit-text-stroke: 1px #000) {
  .steps > li::before {
    color: var(--brand);
  }
}

.callout {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  background: var(--surface);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.callout.is-positive {
  border-left-color: var(--green);
}

.contact-line {
  font-family: var(--mono);
  font-size: 0.95rem;
}

/* ---------- Motion ----------
   All of it is optional. site.js sets `js` and, unless Reduce Motion is on,
   `has-motion` on <html> before first paint; without them the page is complete
   and still. Three layers: a load sequence in the hero, one-time reveals as
   sections scroll in (selector list mirrored in site.js), and small hover
   responses. The slanted wipe and the growing ticks reuse the mark's stroke. */

:root {
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Header: clear over the hero, solid once the page moves. */
.js .site-header {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.js .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.scroll-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--violet));
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

.site-nav .nav-section {
  position: relative;
}

.site-nav .nav-section::after {
  content: '';
  position: absolute;
  inset: auto 0 -7px;
  height: 2px;
  background: var(--brand);
  transform: skewX(var(--slant)) scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease);
}

.site-nav .nav-section[aria-current='true'] {
  color: var(--ink);
}

.site-nav .nav-section[aria-current='true']::after {
  transform: skewX(var(--slant)) scaleX(1);
}

/* Load sequence. */
.has-motion .hero .kicker,
.has-motion .hero-lede,
.has-motion .hero-actions,
.has-motion .hero-facts,
.has-motion .board,
.has-motion .board-caption {
  animation: rise 0.8s var(--ease) both;
}

.has-motion .hero h1,
.has-motion .hero .hollow,
.has-motion .closing h2.is-in {
  animation: wipe 1s var(--ease) both;
}

.has-motion .hero h1 {
  animation-delay: 0.08s;
}
.has-motion .hero .hollow {
  animation-delay: 0.5s;
}
.has-motion .hero-lede {
  animation-delay: 0.55s;
}
.has-motion .hero-actions {
  animation-delay: 0.68s;
}
.has-motion .hero-facts {
  animation-delay: 0.8s;
}
.has-motion .board,
.has-motion .board-caption {
  animation-delay: 0.7s;
}

/* The preview's chip and caption wait for the phones they annotate. */
.has-motion .preview-note,
.has-motion .hero-preview figcaption {
  animation: rise 0.7s var(--ease) 1.3s both;
}

.has-motion .hero-ghost {
  animation: ghost-in 1.8s ease-out both;
}

/* The board assembles itself: lines draw out, then each gate stroke drops in. */
.has-motion .lane-track::before {
  transform-origin: 0 50%;
  animation: draw-x 0.9s var(--ease) both;
  animation-delay: calc(0.9s + var(--lane, 0) * 0.09s);
}

.has-motion .lane-track::after {
  transform-origin: 50% 0;
  animation: gate-in 0.5s var(--ease) both;
  animation-delay: calc(1.3s + var(--lane, 0) * 0.09s);
}

.lane:nth-child(2) {
  --lane: 1;
}
.lane:nth-child(3) {
  --lane: 2;
}
.lane:nth-child(4) {
  --lane: 3;
}
.lane:nth-child(5) {
  --lane: 4;
}

/* Scroll reveals. */
.has-motion
  :is(
    .section-head,
    .rail-head,
    .flow > li,
    .ruled > li,
    .plans,
    .section-note,
    .footnote,
    .faq details,
    .closing p,
    .closing .store-badge
  ) {
  transition:
    opacity 0.7s var(--ease) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease) var(--reveal-delay, 0ms);
}

.has-motion
  :is(
    .section-head,
    .rail-head,
    .flow > li,
    .ruled > li,
    .plans,
    .section-note,
    .footnote,
    .faq details,
    .closing p,
    .closing .store-badge
  ):not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}

.has-motion .closing h2:not(.is-in) {
  opacity: 0;
}

/* Ticks and step rules grow in after their row lands. */
.has-motion .ruled > li::before {
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease) calc(var(--reveal-delay, 0ms) + 0.2s);
}

.has-motion .ruled > li:not(.is-in)::before {
  transform: skewX(var(--slant)) scaleY(0);
}

.has-motion .flow li::before {
  transition: width 0.6s var(--ease) calc(var(--reveal-delay, 0ms) + 0.2s);
}

.has-motion .flow li:not(.is-in)::before {
  width: 0;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* A slanted edge sweeps left to right; bounds overshoot the box so strokes and
   descenders are never clipped once it lands. */
@keyframes wipe {
  from {
    clip-path: polygon(-15% -15%, -15% -15%, -30% 130%, -30% 130%);
  }
  to {
    clip-path: polygon(-15% -15%, 135% -15%, 120% 130%, -30% 130%);
  }
}

@keyframes ghost-in {
  from {
    opacity: 0;
  }
}

@keyframes draw-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes gate-in {
  from {
    transform: skewX(var(--slant)) scaleY(0);
  }
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hover responses. */
  .lane {
    transition: background-color 0.2s ease;
  }
  .lane:hover {
    background: rgba(122, 162, 247, 0.05);
  }
  .lane-status {
    transition: color 0.2s ease;
  }
  .lane:hover .lane-status {
    color: var(--ink);
  }
  .ruled h3 {
    transition: color 0.2s ease;
  }
  .ruled > li:hover h3 {
    color: #fff;
  }
  .spec-types li {
    transition: border-color 0.2s ease;
  }
  .spec-types li:hover {
    border-color: var(--tone, var(--brand));
  }
  .store-badge {
    transition: transform 0.2s var(--ease);
  }
  .store-badge:hover {
    transform: translateY(-2px);
  }
  .faq details[open] > :not(summary) {
    animation: faq-in 0.3s var(--ease) both;
  }

  /* The ghost mark drifts slower than the page, where scroll timelines exist. */
  @supports (animation-timeline: scroll()) {
    .hero-ghost {
      animation: ghost-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .has-motion .hero-ghost {
      animation:
        ghost-in 1.8s ease-out both,
        ghost-drift linear both;
      animation-timeline: auto, scroll(root);
      animation-range:
        normal,
        0 100vh;
    }
  }
}

@keyframes ghost-drift {
  to {
    transform: translateY(16vh);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .rail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
  .rail-head {
    position: static;
  }
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.25rem;
    border-top: 0;
  }
  .flow li {
    border-top: 1px solid var(--hairline);
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
  .site-nav .nav-section {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero-stage {
    display: block;
  }
  .hero-preview {
    display: none;
  }
  .hero h1 {
    font-size: clamp(2.55rem, 7vw, 5rem);
  }
  .board-head,
  .lane {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    padding-inline: 1.1rem;
  }
  .board-head > span:not(.board-route) {
    display: none;
  }
  .board-route {
    grid-column: 1 / -1;
  }
  .lane {
    row-gap: 0.55rem;
  }
  .lane-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .lane-status {
    justify-self: end;
    text-align: right;
    font-size: 0.82rem;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan + .plan {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .shell {
    width: min(1160px, 100% - 2.5rem);
  }
  .site-header .shell,
  .site-nav {
    gap: 0.75rem;
  }
  .site-header .brand-lockup {
    gap: 0.5rem;
  }
  .site-header .brand-lockup img {
    height: 26px;
  }
  .site-header .brand-lockup span {
    font-size: 1.2rem;
  }
  .site-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transform: none;
  }
  .site-nav .nav-cta span {
    transform: none;
  }
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .flow li {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }
  .flow-n {
    grid-row: 1 / span 2;
    font-size: 2.6rem;
  }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-ghost {
    width: 110vw;
    right: -38vw;
    top: 0.5rem;
    opacity: 0.055;
  }
  .hollow {
    -webkit-text-stroke-width: 2.4px;
  }
  .lane-name small {
    display: none;
  }
}

@media (max-width: 400px) {
  .site-nav .nav-support {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .btn .arrow,
  .faq summary::after,
  .js .site-header,
  .site-nav .nav-section::after {
    transition: none;
  }
  .preview-phone,
  .preview-line {
    animation: none;
  }
  /* Park each blip where its lane's outcome reads at a glance. */
  .lane-track i {
    animation: none;
    opacity: 1;
    left: 24%;
  }
  .lane-track i:nth-child(2) {
    left: 66%;
    background: var(--green);
  }
  .lane-track i:nth-child(3) {
    left: 88%;
    background: var(--green);
  }
  .lane.is-replaced .lane-track i:nth-child(n + 2) {
    background: var(--brand);
  }
  .lane.is-skipped .lane-track i,
  .lane.is-unsupported .lane-track i {
    left: 44%;
  }
  .lane.is-skipped .lane-track i:nth-child(n + 2),
  .lane.is-unsupported .lane-track i:nth-child(n + 2),
  .lane.is-gap .lane-track i:nth-child(n + 3) {
    display: none;
  }
  .lane.is-gap .lane-track i {
    left: 8%;
  }
  .lane.is-gap .lane-track i:nth-child(2) {
    left: 58%;
  }
}

/* ---------- Print (legal pages on paper) ---------- */

@media print {
  .has-motion *,
  .has-motion *::before {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  body {
    background: #fff;
    color: #111;
    font-size: 11pt;
  }
  .site-header,
  .site-footer,
  .btn {
    display: none;
  }
  h1,
  h2,
  h3,
  .doc td:first-child,
  .doc strong,
  .doc-summary li {
    color: #000;
  }
  .doc p,
  .doc li,
  .doc td {
    color: #222;
  }
  .kicker,
  .doc-updated,
  .doc th {
    color: #555;
  }
  .kicker::before {
    background: #555;
    box-shadow: 6px 0 0 #555;
  }
  a {
    color: #000;
  }
  .card,
  .callout {
    border-color: #ccc;
    background: #fff;
  }
  .doc section,
  .doc td,
  .doc th,
  .faq,
  .faq details {
    border-color: #ccc;
  }
  .steps > li::before {
    color: #333;
    -webkit-text-stroke: 0 transparent;
  }
}