/* ==========================================================================
   BizPirates: styles.css

   Every page opens at night (navy) and the rest of it happens in daylight.
   The product is a routine that runs overnight and is waiting for you in
   the morning, so the brand is the sunrise. Colours come straight from the
   logo: navy #0E1A2B, paper #F4F1EA, amber #F2B632. No gradients, no glow.

   Contents
    1. Tokens
    2. Base
    3. Layout
    4. Type helpers
    5. Buttons and links
    6. Masthead
    7. Hero
    8. Video player
    9. Morning summary (Slack mock)
   10. Problem: the BD log
   11. Statement
   12. The morning run (timeline + plan switch)
   13. Imagine band
   14. Compare (table)
   15. What it won't do
   16. Plan strip (home)
   17. FAQ
   18. Closing call to action
   19. Footer
   20. Page heads (pricing, about)
   21. Plans (pricing)
   22. Extras
   23. Matrix
   24. Process
   25. About
   26. Contact
   27. Motion
   28. Dark mode
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Night: masthead, heroes, closing band, footer */
  --night: #0e1a2b;
  --night-2: #16253a;
  --night-3: #26374f;
  --on-night: #f4f1ea;
  --on-night-2: #b5bdc9;
  --on-night-3: #8b96a7;

  /* The one accent, taken from the sails in the logo */
  --sun: #f2b632;
  --sun-hover: #f6c655;
  --sun-ink: #0e1a2b;
  --sun-soft: #fbefd1;

  /* Daylight */
  --bg: #f4f1ea;
  --surface: #ffffff;
  --panel: #ebe7dd;
  --ink: #0e1a2b;
  --ink-hover: #26374f;
  --ink-2: #3a4558;
  --ink-3: #5f6a7c;
  --line: #ded9cd;
  --line-2: #cac4b5;

  /* Status */
  --go: #17804f;
  --go-soft: #e2f3e9;
  --late: #b93a22;
  --late-soft: #fbe9e4;

  /* The Slack mock is always a light UI */
  --card: #ffffff;
  --card-ink: #0e1a2b;
  --card-ink-2: #3a4558;
  --card-ink-3: #6b7587;
  --card-line: #e8e5dd;
  --card-panel: #f4f2ec;

  /* The mast in the little sail mark follows the text colour; the sails
     are amber unless they'd vanish into an amber background */
  --sail: var(--sun);

  --focus: #0e1a2b;

  --f-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Funnel Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-hero: clamp(2.3rem, 1.25rem + 3.5vw, 3.9rem);
  --t-h1: clamp(2.25rem, 1.35rem + 3.4vw, 3.9rem);
  --t-h2: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem);
  --t-body: 1.0625rem;

  --maxw: 76rem;
  --gutter: clamp(1rem, 0.45rem + 2.6vw, 2rem);
  --sp-section: clamp(4.25rem, 2.6rem + 6vw, 7.5rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light;
}


/* 2. Base ------------------------------------------------------------------ */

@view-transition { navigation: auto; }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords;
  scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body) / 1.62 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
strong { font-weight: 600; }

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

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

/* Anything sitting on night gets an amber ring instead of a navy one */
.mast, .hero, .pagehead, .cta, .foot, .vs__us, .tier--full { --focus: var(--sun); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  background: var(--sun);
  color: var(--sun-ink);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }


/* 3. Layout ---------------------------------------------------------------- */

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

.section { padding-block: var(--sp-section); }

.section--joined { padding-top: clamp(1.5rem, 0.75rem + 2.5vw, 3.5rem); }

.section--panel {
  background: var(--panel);
  border-block: 1px solid var(--line);
}

.split {
  display: grid;
  gap: 2.25rem 4rem;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split__head { position: sticky; top: 2rem; align-self: start; }
}

.sec-head { max-width: 46rem; }


/* 4. Type helpers ---------------------------------------------------------- */

.h2 {
  margin-top: 0;
  font: 800 var(--t-h2) / 1.06 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.sub {
  margin-top: 1.1rem;
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 32em;
  text-wrap: pretty;
}

/* Sails in the About page mark. A class, not a fill attribute, because
   presentation attributes can't read custom properties. */
.sail { fill: var(--sail); }

.prose { color: var(--ink-2); max-width: 36em; }
.prose p { text-wrap: pretty; }
.prose p + p { margin-top: 1.05em; }
.prose strong { color: var(--ink); }


/* 5. Buttons and links ----------------------------------------------------- */

.btn {
  --h: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--h);
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 0.9375rem / 1.1 var(--f-body);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.btn:active { transform: scale(0.97); }

.btn--sun { background: var(--sun); color: var(--sun-ink); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--line { border-color: var(--line-2); color: var(--ink); background: transparent; }

.btn--sm { --h: 2.25rem; padding-inline: 1rem; font-size: 0.875rem; }
.btn--lg { --h: 3.25rem; padding-inline: 1.6rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn__arrow { flex: none; transition: transform 0.18s var(--ease-out); }

@media (hover: hover) {
  .btn--sun:hover { background: var(--sun-hover); }
  .btn--ink:hover { background: var(--ink-hover); }
  .btn--line:hover { border-color: var(--ink); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color 0.15s ease;
}
@media (hover: hover) {
  .tlink:hover { text-decoration-color: currentColor; }
}


/* 6. Masthead -------------------------------------------------------------- */

.mast {
  position: relative;
  z-index: 10;
  background: var(--night);
  color: var(--on-night);
  border-bottom: 1px solid var(--night-2);
}

.mast__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 1.7rem; width: auto; }

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

.nav__link {
  display: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  color: var(--on-night-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav__link[aria-current="page"] { color: var(--on-night); }
@media (hover: hover) { .nav__link:hover { color: var(--on-night); } }

/* Narrowest phones keep just the logo and the button. Pricing joins at
   25rem, About at 30rem, How it works at 48rem. Everything is in the
   footer regardless. */
@media (min-width: 25rem) { .nav__link--pricing { display: inline-block; } }
@media (min-width: 30rem) { .nav__link--about { display: inline-block; } }
@media (min-width: 48rem) { .nav__link--how { display: inline-block; } }

.nav > .nav__cta { margin-left: 0.5rem; }

@media (max-width: 23.5rem) {
  .brand img { height: 1.45rem; }
  .nav__link { padding-inline: 0.5rem; }
}


/* 7. Hero ------------------------------------------------------------------ */

/* Two columns, as before: the promise on the left, the video on the right
   where the product card used to sit, rising out of the sun. Sized so the
   whole video fits next to the headline on a 1366x768 laptop. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  padding-top: clamp(2.25rem, 1rem + 3vw, 3.75rem);
}

.hero__grid {
  display: grid;
  gap: 2.25rem;
}

.hero__copy { padding-bottom: 0; }

.hero__title {
  font: 800 var(--t-hero) / 1.04 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.024em;
  text-wrap: balance;
  max-width: 16ch;
}
.hero__title .hl { color: var(--sun); }

.hero__sub {
  margin-top: 1.25rem;
  max-width: 33em;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--on-night-2);
  text-wrap: pretty;
}
.hero__sub strong { color: var(--on-night); font-weight: 600; }

.hero__cta { margin-top: 1.9rem; }

.hero__art {
  position: relative;
  padding-bottom: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}

/* The sun: a flat disc centred on the bottom edge of the hero, so only its
   top half shows, rising behind the video. Sized off the video column. */
.hero__sun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 122%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  transform: translate(-50%, 50%);
  pointer-events: none;
}

@media (min-width: 62rem) {
  .hero { --t-hero: clamp(2.4rem, 1rem + 2.5vw, 3.4rem); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 3.5rem;
    align-items: end;
  }
  .hero__copy { padding-bottom: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); }
}


/* 8. Video ----------------------------------------------------------------- */

.vsl {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #f1eee7;
  container-type: inline-size;
  box-shadow:
    0 0 0 1px rgba(14, 26, 43, 0.08),
    0 2px 4px rgba(14, 26, 43, 0.1),
    0 34px 60px -28px rgba(14, 26, 43, 0.6);
}
.vsl video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f1eee7;
}

/* The whole frame is the play button. The visible pill sits under the
   poster's own headline. */
.vsl__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vsl__play[hidden] { display: none; }

.vsl__pill {
  position: absolute;
  left: 6.25%;
  top: 61%;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.45rem, 1.4cqw, 0.9rem);
  padding: clamp(0.25rem, 0.8cqw, 0.5rem) clamp(0.8rem, 2.4cqw, 1.5rem) clamp(0.25rem, 0.8cqw, 0.5rem) clamp(0.25rem, 0.8cqw, 0.5rem);
  border-radius: 999px;
  background: var(--night);
  color: var(--on-night);
  font: 600 clamp(0.8125rem, 2.1cqw, 1.125rem) / 1.1 var(--f-body);
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(14, 26, 43, 0.6);
  transition: transform 0.2s var(--ease-out), background-color 0.2s ease;
}
.vsl__icon {
  width: clamp(2rem, 6.4cqw, 3.4rem);
  height: clamp(2rem, 6.4cqw, 3.4rem);
  border-radius: 50%;
  background: var(--sun);
  color: var(--sun-ink);
  display: grid;
  place-items: center;
}
.vsl__icon svg { width: 38%; height: 38%; margin-left: 8%; }
.vsl__time { font-weight: 400; color: var(--on-night-2); }

@media (hover: hover) {
  .vsl__play:hover .vsl__pill { transform: scale(1.04); background: var(--night-2); }
}
.vsl__play:active .vsl__pill { transform: scale(0.98); }
.vsl__play:focus-visible { outline: none; }
.vsl__play:focus-visible .vsl__pill { outline: 3px solid var(--sun); outline-offset: 3px; }

/* After the last frame: the button the video has just pointed to */
.vsl__end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 1rem;
  background: rgba(14, 26, 43, 0.9);
  color: var(--on-night);
  text-align: center;
}
.vsl__end[hidden] { display: none; }
.vsl__end-title {
  font: 800 clamp(1.2rem, 4.4cqw, 2rem) / 1.1 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.02em;
}
.vsl__again {
  padding: 0.4rem 0.6rem;
  border: 0;
  background: none;
  color: var(--on-night-2);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
@media (hover: hover) { .vsl__again:hover { color: var(--on-night); } }

@media (max-width: 36rem) {
  .vsl { border-radius: 12px; }
}


/* 9. Morning summary (Slack mock) ------------------------------------------ */

.digest {
  position: relative;
  width: 100%;
  max-width: 31rem;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.45;
  box-shadow:
    0 0 0 1px rgba(14, 26, 43, 0.08),
    0 2px 4px rgba(14, 26, 43, 0.08),
    0 30px 50px -28px rgba(14, 26, 43, 0.5);
  overflow: hidden;
}

.digest__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--card-line);
  background: var(--card-panel);
  font: 600 0.8125rem / 1 var(--f-body);
}
.digest__bar span { color: var(--card-ink-3); font-weight: 400; }

.msg {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem 1rem 1.1rem;
}

.msg__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9px;
  background: var(--night);
  color: var(--on-night);
  display: grid;
  place-items: center;
}
.msg__avatar svg { width: 0.95rem; height: 1.2rem; }

.msg__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.msg__meta strong { font-weight: 700; }
.msg__time { font-size: 0.75rem; color: var(--card-ink-3); }
.msg__text { margin-top: 0.2rem; color: var(--card-ink-2); }

.leads {
  margin-top: 0.8rem;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  overflow: hidden;
}

.lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--card-line);
}
.lead:first-child { border-top: 0; }

.lead__co { font-weight: 700; color: var(--card-ink); }
.lead__role { color: var(--card-ink-2); }
.lead__meta {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--card-ink-3);
}
.lead__meta b { font-weight: 500; color: var(--card-ink-2); }

.lead__status {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem 0.3rem 0.45rem;
  border-radius: 999px;
  background: var(--go-soft);
  color: var(--go);
  font: 600 0.75rem / 1 var(--f-body);
}
.lead__status svg { width: 0.8rem; height: 0.8rem; }

.msg__foot {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--card-ink-3);
}
.msg__foot svg { width: 0.9rem; height: 0.9rem; flex: none; color: var(--go); }

@media (max-width: 26rem) {
  .msg { grid-template-columns: minmax(0, 1fr); }
  .msg__avatar { display: none; }
  .lead__status span { display: none; }
  .lead__status { padding: 0.35rem; }
}


/* 10. Problem: the BD log --------------------------------------------------- */

.log {
  margin-top: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem 0.4rem;
  max-width: 36rem;
}

.log__cap {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font: 600 0.9375rem / 1.3 var(--f-body);
  color: var(--ink);
}

.log li {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.log li:last-child { border-bottom: 0; }

.log time {
  font: 400 0.8125rem / 1.6 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.log .is-late {
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
  background: var(--late-soft);
  color: var(--late);
  font-weight: 600;
}
.log .is-late time { color: var(--late); }

.log .is-meh { color: var(--ink-3); }


/* 11. Statement ------------------------------------------------------------ */

.statement__big {
  margin-top: 0;
  font: 800 clamp(1.75rem, 1.1rem + 2.6vw, 3.2rem) / 1.1 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.022em;
  max-width: 24ch;
  text-wrap: balance;
}
.statement__big .dim { color: var(--ink-3); }

.statement__body {
  margin-top: 2.25rem;
  display: grid;
  gap: 1.1rem 3rem;
  max-width: 62rem;
  color: var(--ink-2);
}
.statement__body p { text-wrap: pretty; }

@media (min-width: 48rem) {
  .statement__body { grid-template-columns: 1fr 1fr; }
}


/* 12. The morning run ------------------------------------------------------ */

.run {
  display: grid;
  gap: 2.75rem;
}

@media (min-width: 60rem) {
  .run { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
  .run__side { position: sticky; top: 2rem; align-self: start; }
}

.seg-wrap { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

.seg__legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-top: 2rem;
  font: 600 0.9375rem / 1.3 var(--f-body);
  color: var(--ink);
}

.seg {
  clear: both;
  display: inline-flex;
  margin-top: 0.7rem;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  min-inline-size: 0;
}
.seg label { position: relative; display: block; }
.seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg span {
  display: block;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--ink-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .seg input:not(:checked):hover + span { color: var(--ink); }
}

.run__price {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}
.run__amount {
  font: 800 2rem / 1 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.02em;
}
.run__once { color: var(--ink-2); font-size: 0.9375rem; }
.run__side .tlink { margin-top: 1.1rem; }

/* Plan-dependent text. Pitch shows by default, so a browser without :has()
   still gets a correct, complete page. */
[data-for="spot"], [data-for="find"], [data-for="self"] { display: none; }

.run:has(#plan-spot:checked) [data-for="pitch"],
.run:has(#plan-find:checked) [data-for="pitch"] { display: none; }

/* `revert` hands display back to the browser default: block for p and h3,
   inline for span. One rule instead of one per element type. */
.run:has(#plan-spot:checked) :is([data-for="spot"], [data-for="self"]),
.run:has(#plan-find:checked) :is([data-for="find"], [data-for="self"]) { display: revert; }

.step {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-2);
  transition: opacity 0.25s ease;
}
.step:last-child { border-bottom: 1px solid var(--line-2); }

@media (min-width: 36rem) {
  .step { grid-template-columns: 6rem minmax(0, 1fr); gap: 1.5rem; }
}

.step__time {
  padding-top: 0.25rem;
  font: 400 0.8125rem / 1.4 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.step__title {
  font: 700 1.25rem / 1.25 var(--f-display);
  font-stretch: 102%;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.step__body { margin-top: 0.4rem; color: var(--ink-2); text-wrap: pretty; }

/* Steps the chosen plan doesn't include: faded, with a plain-English note */
.step__off {
  display: none;
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.run:has(#plan-spot:checked) .step[data-tier="find"],
.run:has(#plan-spot:checked) .step[data-tier="pitch"],
.run:has(#plan-find:checked) .step[data-tier="pitch"] { opacity: 0.4; }

.run:has(#plan-spot:checked) .step[data-tier="find"] .step__off,
.run:has(#plan-spot:checked) .step[data-tier="pitch"] .step__off,
.run:has(#plan-find:checked) .step[data-tier="pitch"] .step__off { display: block; }


/* 13. Imagine band --------------------------------------------------------- */

.imagine {
  --sail: var(--sun-ink);
  background: var(--sun);
  color: var(--sun-ink);
  padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
}

.imagine__big {
  margin-top: 1.4rem;
  font: 800 clamp(2.5rem, 1.2rem + 5.4vw, 6rem) / 0.98 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.035em;
  max-width: 20ch;
  text-wrap: balance;
}

.imagine__aside {
  margin-top: 1rem;
  font: 600 1.25rem / 1.2 var(--f-body);
}

.imagine__grid {
  margin-top: 2.75rem;
  display: grid;
  gap: 2.5rem 4rem;
  align-items: start;
}
@media (min-width: 56rem) {
  .imagine__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .imagine__grid .digest { justify-self: end; }
}

.imagine__body {
  font-size: 1.1875rem;
  line-height: 1.55;
  max-width: 30em;
}
.imagine__body p { text-wrap: pretty; }
.imagine__body p + p { margin-top: 1.1em; }


/* 14. Compare ------------------------------------------------------------ */

/* A real comparison table: one row per question, our column in night. */
.vs-wrap {
  margin-top: 3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.vs { width: 100%; border-collapse: collapse; }
.vs th, .vs td {
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.vs thead th {
  border-top: 0;
  padding-block: 1.3rem;
  font: 800 1.125rem / 1.25 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.01em;
}
.vs tbody th { width: 22%; font-weight: 500; color: var(--ink-2); }
.vs td { width: 26%; font-weight: 600; color: var(--ink); }
.vs .vs__us { background: var(--night); color: var(--on-night); border-top-color: var(--night-3); }

/* Phones: each question becomes a small block, answers labelled */
@media (max-width: 47.99rem) {
  /* Column names move into each answer's label, so the header row goes */
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs tr { border-top: 1px solid var(--line); }
  .vs tr:first-child { border-top: 0; }
  .vs tbody th { width: auto; padding: 1.1rem 1.1rem 0.5rem; border: 0; color: var(--ink); font-weight: 700; }
  .vs td { width: auto; }
  .vs td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.6rem 1.1rem;
    border: 0;
  }
  .vs td::before { content: attr(data-label); font-weight: 400; color: var(--ink-2); }
  .vs td.vs__us { margin-top: 0.4rem; padding-block: 0.8rem; }
  .vs td.vs__us::before { color: var(--on-night-2); }
}


/* 15. What it won't do ----------------------------------------------------- */

.wont { display: grid; }

.wont li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-2);
}

.wont__x {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.wont__x svg { width: 0.65rem; height: 0.65rem; }

.wont h3 {
  font: 700 1.1875rem / 1.3 var(--f-display);
  font-stretch: 102%;
  letter-spacing: -0.01em;
}
.wont p { margin-top: 0.35rem; color: var(--ink-2); text-wrap: pretty; }

@media (min-width: 40rem) {
  .wont { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}


/* 16. Plan strip (home) ---------------------------------------------------- */

.tiers {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
@media (hover: hover) {
  .tier:hover { border-color: var(--ink-3); }
  .tier:hover .btn__arrow { transform: translateX(3px); }
}

.tier__name {
  font: 800 1.25rem / 1.2 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.01em;
}
.tier__price {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.55rem;
}
.tier__amount {
  font: 800 2.4rem / 1 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.03em;
}
.tier__once { font-size: 0.9375rem; color: var(--ink-2); }
.tier__line {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  text-wrap: pretty;
}
.tier__go {
  margin-top: auto;
  padding-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

.tier--full {
  background: var(--night);
  border-color: var(--night);
  color: var(--on-night);
}
.tier--full .tier__once { color: var(--on-night-2); }
.tier--full .tier__line { color: var(--on-night-2); border-top-color: var(--night-3); }
@media (hover: hover) {
  .tier--full:hover { border-color: var(--sun); }
}

.badge {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--sun);
  color: var(--sun-ink);
  font: 600 0.8125rem / 1 var(--f-body);
}

.tiers__foot {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.tiers__foot .tlink { color: var(--ink); }


/* 17. FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--line-2); }

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

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.3rem;
  cursor: pointer;
  list-style: none;
  font: 700 1.125rem / 1.35 var(--f-display);
  font-stretch: 102%;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: 4px; }

.faq__icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.05rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: transform 0.22s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease;
}
.faq__icon svg { width: 0.7rem; height: 0.7rem; }
.faq details[open] .faq__icon {
  transform: rotate(45deg);
  background: var(--sun);
  border-color: var(--sun);
  color: var(--sun-ink);
}

.faq__a {
  padding-bottom: 1.5rem;
  padding-right: 2.5rem;
  color: var(--ink-2);
  max-width: 44em;
}
.faq__a p + p { margin-top: 0.8em; }

/* Kept as separate rules: a browser that doesn't know ::details-content
   drops just these two, not the styles above. */
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.26s var(--ease-out), content-visibility 0.26s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }


/* 18. Closing call to action ----------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--on-night);
  padding-block: clamp(5rem, 3rem + 7vw, 9rem);
}

.cta__in { position: relative; z-index: 1; }

.cta__title {
  font: 800 clamp(2.2rem, 1.25rem + 4vw, 4.25rem) / 1.02 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.028em;
  max-width: 15ch;
  text-wrap: balance;
}
.cta__sub {
  margin-top: 1.4rem;
  max-width: 32em;
  color: var(--on-night-2);
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.cta__row {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.75rem;
}
.cta__mail { color: var(--on-night-2); }
.cta__mail a {
  color: var(--on-night);
  font-weight: 600;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

.cta__sun {
  position: absolute;
  right: clamp(-16rem, -30vw, -6rem);
  bottom: -13rem;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: var(--sun);
  pointer-events: none;
}
@media (max-width: 47.99rem) {
  .cta__sun { width: 14rem; height: 14rem; right: -5rem; bottom: -9rem; }
}


/* 19. Footer --------------------------------------------------------------- */

.foot {
  background: var(--night);
  color: var(--on-night-2);
  border-top: 1px solid var(--night-2);
  padding-block: 3.25rem 2rem;
  font-size: 0.9375rem;
}

.foot__top { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .foot__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.foot .brand img { height: 1.6rem; }
.foot__tag { margin-top: 1rem; max-width: 26em; }

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
}
.foot__nav a { text-decoration: none; transition: color 0.15s ease; }
@media (hover: hover) { .foot__nav a:hover { color: var(--on-night); } }

.foot__legal {
  margin-top: 2.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--night-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--on-night-3);
}


/* 20. Page heads (pricing, about) ------------------------------------------ */

.pagehead {
  background: var(--night);
  color: var(--on-night);
  padding-block: clamp(3.25rem, 2rem + 4.5vw, 6.25rem);
}

.pagehead__title {
  margin-top: 0;
  font: 800 var(--t-h1) / 1.04 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.026em;
  max-width: 17ch;
  text-wrap: balance;
}
.pagehead__lede {
  margin-top: 1.4rem;
  max-width: 34em;
  color: var(--on-night-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* On pricing, the plan cards rise out of the night band */
.pagehead--plans { padding-bottom: clamp(9rem, 7rem + 6vw, 12rem); }
.plans-lift { margin-top: calc(-1 * clamp(6.5rem, 5rem + 5vw, 9rem)); position: relative; }


/* 21. Plans (pricing) ------------------------------------------------------ */

.plans { display: grid; gap: 1.25rem; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  scroll-margin-top: 1.5rem;
}

.plan__name {
  font: 800 1.625rem / 1 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.02em;
}
.plan__for {
  margin-top: 0.7rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.plan__price {
  margin-top: 1.6rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6rem;
}
.plan__amount {
  font: 800 3rem / 1 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.035em;
}
.plan__once { color: var(--ink-2); font-size: 0.9375rem; }

.plan > .btn { margin-top: 1.4rem; }

.plan__plus {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.plan__list { margin-top: 0.9rem; display: grid; gap: 0.75rem; align-content: start; }
.plan__list li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.plan__list svg { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--go); }

.plan--full { border: 2px solid var(--sun); padding: calc(1.75rem - 1px); }
/* The badge sits beside the plan name in the flow, never on top of it */
.plan__titlerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.plan__titlerow .badge { position: static; }

@media (min-width: 60rem) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  @supports (grid-template-rows: subgrid) {
    .plans { grid-template-rows: auto auto auto auto 1fr; }
    .plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  }
}

.plans__foot {
  margin-top: 1.4rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-align: center;
  text-wrap: balance;
}


/* 22. Extras --------------------------------------------------------------- */

.extras { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 40rem) {
  .extras { grid-template-columns: 1fr 1fr; }
  .extras__why { grid-column: 1 / -1; }
}

.extra {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
}
.extra h3 {
  font: 700 1.1875rem / 1.3 var(--f-display);
  font-stretch: 102%;
  letter-spacing: -0.01em;
}
.extra__when { margin-top: 0.3rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.extra p:not(.extra__when) { margin-top: 0.6rem; color: var(--ink-2); font-size: 0.9375rem; }

.extras__why {
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-md);
  background: var(--sun-soft);
  color: var(--ink);
  text-wrap: pretty;
}


/* 23. Matrix --------------------------------------------------------------- */

/* position: relative keeps the absolutely positioned sr-only labels in
   the cells inside this scroller. Without it they escape the overflow clip
   and widen the whole page on phones. */
.matrix-scroll {
  position: relative;
  margin-top: 2.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.matrix {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.matrix th, .matrix td {
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.matrix td { text-align: center; width: 18%; color: var(--ink-2); }

.matrix thead th {
  border-top: 0;
  padding-block: 1.2rem;
  font: 800 1.0625rem / 1.2 var(--f-display);
  font-stretch: 104%;
  text-align: center;
}
.matrix thead th:first-child { text-align: left; }
.matrix thead small {
  display: block;
  margin-top: 0.3rem;
  font: 400 0.8125rem / 1 var(--f-body);
  color: var(--ink-2);
}

.matrix tbody th { font-weight: 500; color: var(--ink); }

.matrix th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

.matrix__group th {
  padding-block: 0.65rem;
  background: var(--panel);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}

.matrix .col-full { background: color-mix(in srgb, var(--sun-soft) 70%, transparent); }

.matrix__price td {
  font: 800 1.125rem / 1 var(--f-display);
  font-stretch: 104%;
  color: var(--ink);
}

/* Phones: all three plans visible at once instead of a sideways scroll.
   The scroller stays as a safety net for the narrowest screens. */
@media (max-width: 39.99rem) {
  .matrix { min-width: 0; font-size: 0.8125rem; }
  .matrix th, .matrix td { padding: 0.7rem 0.45rem; }
  .matrix th[scope="row"] { width: 40%; padding-left: 0.85rem; position: static; }
  .matrix td { width: 20%; }
  .matrix thead th { font-size: 0.9375rem; padding-block: 1rem; }
  .matrix thead small { font-size: 0.6875rem; }
  .matrix__group th { padding-left: 0.85rem; }
  .matrix__price td { font-size: 0.875rem; }
  .matrix th:last-child, .matrix td:last-child { padding-right: 0.85rem; }
}

.yes { display: inline-grid; place-items: center; color: var(--go); }
.yes svg { width: 1.15rem; height: 1.15rem; }
.no {
  display: inline-block;
  width: 0.7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--line-2);
  vertical-align: middle;
}


/* 24. Process -------------------------------------------------------------- */

.process {
  margin-top: 3rem;
  display: grid;
  gap: 1.75rem 1.5rem;
}
@media (min-width: 40rem) { .process { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .process { grid-template-columns: repeat(4, 1fr); } }

.process li {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}
.process h3 {
  font: 800 1.25rem / 1.25 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.012em;
}
.process__when { margin-top: 0.3rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.process p:not(.process__when) { margin-top: 0.5rem; color: var(--ink-2); text-wrap: pretty; }


/* 25. About ---------------------------------------------------------------- */

.prose--lg { font-size: 1.1875rem; line-height: 1.65; max-width: 30em; }

.pull,
.prose .pull {
  margin-block: 2.75rem;
  font: 800 clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem) / 1.3 var(--f-display);
  font-stretch: 104%;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.ways {
  margin-top: 2.75rem;
  display: grid;
  gap: 2rem 3rem;
}
@media (min-width: 44rem) { .ways { grid-template-columns: 1fr 1fr; } }

.way {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
}
.way h3 {
  font: 700 1.1875rem / 1.3 var(--f-display);
  font-stretch: 102%;
  letter-spacing: -0.01em;
}
.way p { margin-top: 0.45rem; color: var(--ink-2); text-wrap: pretty; }

.namecard {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .namecard { grid-template-columns: auto minmax(0, 1fr); gap: 4rem; }
}
.namecard__mark {
  width: clamp(5.5rem, 4rem + 6vw, 8.5rem);
  height: auto;
  color: var(--ink);
}


/* 26. Contact -------------------------------------------------------------- */

.contact { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}

.ccard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.ccard__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.ccard__row:first-child { border-top: 0; }
@media (hover: hover) { a.ccard__row:hover { background: var(--panel); } }
.ccard__k { color: var(--ink-2); }
.ccard__v { font-weight: 600; overflow-wrap: anywhere; }

.callsteps { margin-top: 2.25rem; }
.callsteps h3 {
  font: 700 1.125rem / 1.3 var(--f-display);
  font-stretch: 102%;
}
.callsteps ol { margin-top: 0.9rem; display: grid; gap: 0.8rem; }
.callsteps li {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.6rem;
  color: var(--ink-2);
}
.callsteps__no {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font: 600 0.75rem / 1 var(--f-body);
}

.cal {
  min-height: 42rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.cal iframe { display: block; width: 100%; height: 42rem; border: 0; }
.cal__fallback { padding: 2rem; }
.cal__fallback p { color: var(--ink-2); margin-bottom: 1rem; }


/* 27. Motion --------------------------------------------------------------- */

/* The Slack mock fills in when it arrives, the way the real one does.
   CSS only, so if animations never run the rows are simply there. */
@media (prefers-reduced-motion: no-preference) {
  .lead {
    animation: lead-in 0.42s var(--ease-out) both;
    animation-delay: calc(0.25s + var(--i, 0) * 0.11s);
  }
  .lead__status {
    animation: status-in 0.3s var(--ease-out) both;
    animation-delay: calc(0.6s + var(--i, 0) * 0.11s);
  }
  .msg__foot {
    animation: lead-in 0.42s var(--ease-out) both;
    animation-delay: 0.9s;
  }
}

@keyframes lead-in {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes status-in {
  from { opacity: 0; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  @view-transition { navigation: none; }
}


/* 28. Dark mode ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a131e;
    --surface: #111e2d;
    --panel: #0d1826;
    --ink: #f0ede5;
    --ink-hover: #ffffff;
    --ink-2: #b8c0cc;
    --ink-3: #8993a3;
    --line: #1e2d3f;
    --line-2: #2c3d52;

    --sun-soft: #2c2412;

    --go: #52c48d;
    --go-soft: #12301f;
    --late: #f08a70;
    --late-soft: #34170f;

    --card: #122031;
    --card-ink: #f0ede5;
    --card-ink-2: #b8c0cc;
    --card-ink-3: #8993a3;
    --card-line: #20314a;
    --card-panel: #0f1c2b;

    --focus: #f2b632;

    color-scheme: dark;
  }

  /* Ink buttons flip to light, so their text has to flip too */
  .btn--ink { color: var(--night); }
  .seg input:checked + span { color: var(--night); }
  .callsteps__no { color: var(--night); }

  .tier--full { border-color: var(--night-3); background: var(--night-2); }
  .vs .vs__us { background: var(--night-2); }
  .vsl, .digest { box-shadow: 0 0 0 1px var(--card-line), 0 34px 60px -28px rgba(0, 0, 0, 0.7); }
}