/* ---------------------------------------------------------------------------
   The home page
   ---------------------------------------------------------------------------
   Mockup D, "We make your job different", built for real. The sheet is ruled
   into one 1180px column: each section a band between two horizontal rules,
   its content between two vertical ones. Every colour is a name from
   `shared.css`, so the page comes out in both themes.

   The four checks in the hero are the demo workspace's, drawn in HTML the way
   the app draws a run — its Live box, then its results — so the boxes can
   arrive whole and the reasons can be written into them, and so every row
   that disagrees says why in words. They carry no row buttons: the page is
   about the reason, not the tool. The frames further down are the site's real
   product captures.

   The page's only two gradients are the stage those screens stand on —
   `.stage-grad`, grainy orange to purple — under the hero and in "Find the
   difference". Everything else is flat.
   --------------------------------------------------------------------------- */

/* --- the ruled sheet ------------------------------------------------------- */

.home main > section {
  border-bottom: 1px solid var(--line-soft);
}

.home main > section:first-child {
  border-bottom: 0;
}

.ruled {
  border-inline: 1px solid var(--line-soft);
  padding-block: clamp(72px, 9vw, 128px);
}

/* A section that ends on a full-bleed piece of its own (a frame, the facts)
   carries no padding under it. */
.ruled.no-foot {
  padding-bottom: 0;
}

.home h2 {
  max-width: 680px;
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1.12;
}

.home h2 mark {
  padding: 0;
}

.sec-lede {
  max-width: 620px;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
}

/* A headline on the left and its paragraph on the right, bottoms aligned. */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 64px;
}

.split h2 {
  flex: 1 1 440px;
  max-width: 620px;
}

.split p {
  flex: 0 1 440px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
}

.eyebrow .dot.ok {
  background: var(--ok);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home .btn-lg {
  height: 48px;
  padding: 0 22px;
}

/* --- the stage: the one gradient ------------------------------------------- */

/* Grainy orange to purple, the same in both themes: it is a stage the real
   screens stand on, not part of the page's palette. The grain is an SVG noise
   laid over it in `overlay`, inline in the markup so it costs no request. */
.stage-grad {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 80% at 12% 8%, #ffb36b 0%, rgba(255, 179, 107, 0) 62%),
    radial-gradient(55% 75% at 52% 65%, #e5413b 0%, rgba(229, 65, 59, 0) 66%),
    radial-gradient(65% 95% at 96% 18%, #8b5cf0 0%, rgba(139, 92, 240, 0) 62%),
    linear-gradient(115deg, #ff8a3d 0%, #d23a4c 52%, #7d52e3 100%);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}

/* Each capture comes in both themes; the page shows the one it is wearing. */
img.shot-dark,
:root[data-theme='dark'] img.shot-light {
  display: none;
}

:root[data-theme='dark'] img.shot-dark {
  display: block;
}

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

.hero {
  background: var(--panel);
}

.hero > .wrap {
  padding-top: clamp(56px, 8vw, 112px);
  padding-bottom: 40px;
}

.hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 64px;
}

.hero-say {
  flex: 1 1 480px;
  min-width: 0;
}

.hero h1 {
  font-size: clamp(46px, 5.6vw, 76px);
}

.hero .cta {
  margin-top: 32px;
}

.hero-lede {
  flex: 0 1 500px;
  margin-top: 30px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-body);
}

.hero-lede b {
  font-weight: 500;
  color: var(--text);
}

/* --- the show: a real check, run ------------------------------------------- */

.show {
  margin-top: 56px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--card);
  overflow: hidden;
}

.show-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 6px;
  padding: 6px;
}

.show-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: 8px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-body);
  text-align: center;
  cursor: pointer;
}

.show-tabs button span {
  font-size: 16px;
}

.show-tabs button small {
  font-size: 13px;
  color: var(--text-soft);
}

.show-tabs button[aria-selected='true'] {
  background: var(--panel);
  color: var(--text);
  box-shadow:
    0 1px 3px rgba(10, 10, 10, 0.08),
    0 0 0 1px rgba(10, 10, 10, 0.04);
}

.show-tabs button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.show-card {
  margin: 4px 10px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
}

.show-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.show-head b {
  font-size: 15px;
  font-weight: 500;
}

.show-note {
  font-size: 13px;
  color: var(--text-soft);
}

.show-run {
  margin-left: auto;
}

.show-run .glyph {
  width: 13px;
  height: 13px;
}

/* The stage grows to hold the taller of its two boxes, so neither is ever cut:
   both sit in one grid cell, and the cell is as tall as the bigger one. */
.show-layers {
  position: relative;
  z-index: 1;
  display: grid;
  padding: 18px clamp(12px, 3vw, 28px) clamp(18px, 3vw, 28px);
}

.show-live,
.show-result {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* When the Live box is the taller of the two, the results sit in the middle
   of the stage rather than leaving it empty underneath. */
.show-result {
  justify-content: center;
}

.chip {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #ffffff;
  font-size: 12.5px;
}

.chip.warm {
  background: #fff1ea;
  color: #a8401a;
}

/* --- the app's own boxes, drawn: the Live tab and the results table --- */

.app-card {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 24px 50px -20px rgba(40, 8, 30, 0.55);
}

.live-card {
  max-width: 700px;
  padding: 14px;
}

.live-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.live-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel);
}

/* The dashed thread from one step to the next. */
.live-list li + li::before {
  content: '';
  position: absolute;
  left: 27px;
  top: -11px;
  height: 10px;
  border-left: 1.5px dashed var(--line);
}

.lv-mark {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: #22c55e;
}

.lv-mark::after {
  content: '';
  position: absolute;
  left: 9.5px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lv-body b {
  font-size: 14px;
  font-weight: 500;
}

.lv-body small {
  font-size: 13px;
  color: var(--text-soft);
}

.live-list time {
  flex: none;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.result-card {
  max-width: 980px;
  overflow: hidden;
}

.rc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.rc-head b {
  font-size: 14px;
  font-weight: 500;
}

.rc-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
}

.rc-counts > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.rc-counts i,
.st::before {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
}

.rc-counts i.bad,
.st.bad::before {
  background: var(--err);
}

.rc-counts i.miss,
.st.miss::before {
  background: var(--warn-dot);
}

.rc-scroll {
  overflow-x: auto;
}

.rc-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.rc-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
  white-space: nowrap;
}

.rc-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-body);
  white-space: nowrap;
}

.rc-table tr:last-child td {
  border-bottom: 0;
}

.rc-table .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rc-table .neg {
  color: var(--err);
}

.rc-table tr.out td {
  background: color-mix(in srgb, var(--spot) 4%, var(--panel));
}

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

.st::before {
  content: '';
}

/* The point of the table: what went wrong, in a sentence, on the row it went
   wrong on. Where the investigation ran, it wrote its conclusion here. */
.rc-table th.why {
  width: 38%;
}

.rc-table td.why {
  white-space: normal;
}

.rc-table td.why span {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--spot) 11%, var(--panel));
  color: var(--accent);
  font-weight: 500;
  line-height: 1.4;
}

.rc-table td.why.none {
  color: var(--text-dim);
}

/* --- the run ----------------------------------------------------------------
   Without the script, or before it plays, the stage shows the finished run:
   the results, every row and every reason. `.is-playing` runs it. The Live box
   comes up whole and its steps arrive in it, one by one; it goes; the results
   box comes up whole and its rows arrive; the reasons are written in last.
   `--n` (steps) and `--r` (rows) are set on the stage by `home.js` for the
   picked check, so the timing fits it. Removing and re-adding the class is how
   "Run it again" and a tab replay it. */
.show-stage {
  --step: 0.42s;
  --t-live-out: calc(1s + var(--n, 6) * var(--step));
  --t-result: calc(var(--t-live-out) + 0.25s);
  --t-why: calc(var(--t-result) + 0.55s + var(--r, 6) * 0.14s);
}

.show-stage:not(.is-playing) .show-live {
  visibility: hidden;
}

.show-stage.is-playing .show-live {
  animation:
    box-in 0.35s ease-out both,
    box-out 0.3s ease-in var(--t-live-out) forwards;
}

.show-stage.is-playing .live-list li {
  animation: item-in 0.35s ease-out calc(0.45s + var(--i) * var(--step)) both;
}

.show-stage.is-playing .lv-mark {
  animation: mark-done 0.25s ease-out calc(0.7s + var(--i) * var(--step)) both;
}

.show-stage.is-playing .show-result {
  animation: box-in 0.4s ease-out var(--t-result) both;
}

.show-stage.is-playing .rc-table tbody tr {
  animation: item-in 0.3s ease-out calc(var(--t-result) + 0.45s + var(--i) * 0.14s) both;
}

.show-stage.is-playing .rc-table tr.out td {
  animation: row-mark 0.4s ease-out calc(var(--t-why) + var(--k) * 0.5s) both;
}

.show-stage.is-playing .rc-table td.why span {
  animation: why-in 0.6s ease-out calc(var(--t-why) + var(--k) * 0.5s) both;
}

@keyframes box-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes box-out {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

@keyframes item-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes mark-done {
  from { background: var(--line); transform: scale(0.8); }
  to { background: #22c55e; transform: none; }
}

@keyframes row-mark {
  from { background: var(--panel); }
}

@keyframes why-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

.show-sum {
  padding: 10px 16px 4px;
  font-size: 14px;
  text-align: center;
}

.show-foot {
  padding: 0 16px 18px;
  font-size: 13px;
  color: var(--text-soft);
  text-align: center;
}

/* --- how you check your numbers today --------------------------------------- */

.today {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 16px;
  margin-top: 48px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: 20px;
  background: var(--card);
  overflow: hidden;
}

.card h3 {
  font-size: 19px;
}

.card > p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}

.today-end {
  max-width: 780px;
  margin-top: 48px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.stage {
  margin-top: 16px;
  flex: 1;
}

/* The script: a terminal, dark in both themes. */
.term {
  border-radius: 12px;
  background: #111312;
  color: #d4d4d0;
  font: 12.5px/1.8 var(--mono);
  overflow: hidden;
}

:root[data-theme='dark'] .term {
  box-shadow: inset 0 0 0 1px #262b29;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid #232524;
  color: #8f8f8b;
  font-size: 11.5px;
}

.term-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3c3b;
}

.term-bar span {
  margin-left: 8px;
}

.term-body {
  position: relative;
  min-height: 236px;
  padding: 14px 16px;
  overflow-x: auto;
}

.ln {
  white-space: nowrap;
}

.pr {
  color: #8f8f8b;
}

.t-ok {
  color: #6fcf97;
}

.t-err {
  color: #ff8f7a;
}

.cur {
  display: inline-block;
  width: 8px;
  height: 15px;
  vertical-align: -3px;
  background: #d4d4d0;
  animation: blink 1s steps(1) infinite;
}

.term-note {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #3b1714;
  color: #ff9b8a;
  font: 12px var(--sans);
}

/* The cron job. */
.log {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-size: 13px;
  overflow: hidden;
}

.log-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-soft);
  font: 11.5px var(--mono);
}

.log-bar .ico {
  width: 13px;
  height: 13px;
}

.log-cmd {
  min-height: 22px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  font: 12.5px var(--mono);
  white-space: nowrap;
  overflow-x: auto;
}

.log-cmd .hl {
  padding: 0 2px;
  border-radius: 3px;
  background: #ffe2d4;
  color: #a8401a;
}

.log-row {
  display: flex;
  justify-content: space-between;
  margin: 0 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--seg);
}

.log-row b {
  color: var(--err);
  font-weight: 500;
}

.log-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-soft);
  font-size: 12.5px;
}

.log-foot .mute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.log-foot .ico {
  width: 13px;
  height: 13px;
}

/* The spreadsheet. */
.xl {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-size: 12.5px;
  overflow: hidden;
}

.xl-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #1d6f42;
  color: #ffffff;
  font-weight: 500;
}

.xl-bar .ico {
  width: 13px;
  height: 13px;
}

.xl-fx {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  font: 12px var(--mono);
}

.xl-fx i {
  color: var(--text-dim);
}

.xl-fx span {
  white-space: nowrap;
}

.xl-scroll {
  overflow-x: auto;
}

.xl table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.xl th,
.xl td {
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  text-align: right;
  color: var(--text-body);
}

.xl th {
  background: var(--card);
  color: var(--text-soft);
  font-weight: 500;
}

.xl th .ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -1px;
  color: #1d6f42;
}

.xl td:first-child,
.xl th:first-child {
  width: 28px;
  padding: 6px 8px;
  background: var(--side);
  color: var(--text-dim);
  text-align: center;
  font-weight: 400;
}

.xl .l {
  text-align: left;
}

.xl .na {
  color: var(--err);
}

.xl .mark-y {
  background: #fff6c2;
  color: #0a0a0a;
}

.anim.s3 .xl .zero td {
  color: var(--line);
  transition: color 0.3s ease;
}

/* The phone call. */
.chat {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

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

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--seg);
  font-size: 10.5px;
  font-weight: 600;
}

.chat-head b {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.chat-head small {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
}

.chat-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 262px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.4;
}

.msg {
  max-width: 80%;
  padding: 8px 12px;
}

.msg small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.7;
}

.msg.me {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: var(--btn);
  color: var(--btn-text);
}

.msg.me small {
  text-align: right;
}

.msg.them {
  border-radius: 14px 14px 14px 4px;
  background: var(--seg);
}

.slot2 {
  display: grid;
  align-self: flex-start;
  max-width: 80%;
}

.slot2 > * {
  grid-area: 1 / 1;
  max-width: none;
}

.typing {
  align-self: start;
  justify-self: start;
  display: inline-flex;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--seg);
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: bounce 1.2s infinite;
}

.typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.typing i:nth-child(3) {
  animation-delay: 0.3s;
}

.open-pill {
  align-self: center;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn-dot) 16%, var(--panel));
  color: var(--warn);
  font-size: 12.5px;
}

.open-pill .ico {
  width: 13px;
  height: 13px;
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes bounce {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(-4px); }
}

/* Motion: a card plays its story while it is on screen. Without the script,
   or with reduced motion, every card shows its last frame — the markup is the
   end state, and `.anim` is what winds it back. */
.card:not(.anim) [data-hide] { display: none; }
.anim.snap,
.anim.snap * { transition: none !important; }
.anim .stage { transition: opacity 0.4s ease; }
.anim.fading .stage { opacity: 0; }
.anim [data-s] { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease var(--d, 0ms), transform 0.4s ease var(--d, 0ms); }
.anim [data-s][data-fx='pop'] { transform: scale(0.6); transition-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
.anim [data-s][data-fx='left'] { transform: translateX(-14px); }
.anim [data-s][data-fx='type'] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 0.7s steps(26, end) var(--d, 0ms); }
.anim.s1 [data-s='1'],
.anim.s2 [data-s='2'],
.anim.s3 [data-s='3'],
.anim.s4 [data-s='4'],
.anim.s5 [data-s='5'],
.anim.s6 [data-s='6'],
.anim.s7 [data-s='7'],
.anim.s8 [data-s='8'] { opacity: 1; transform: none; }
.anim.s1 [data-s='1'][data-fx='type'],
.anim.s2 [data-s='2'][data-fx='type'],
.anim.s3 [data-s='3'][data-fx='type'],
.anim.s4 [data-s='4'][data-fx='type'],
.anim.s5 [data-s='5'][data-fx='type'],
.anim.s6 [data-s='6'][data-fx='type'],
.anim.s7 [data-s='7'][data-fx='type'],
.anim.s8 [data-s='8'][data-fx='type'] { clip-path: inset(0 0 0 0); }
.anim [data-hide] { transition: opacity 0.3s ease; }
.anim.s3 [data-hide='3'],
.anim.s6 [data-hide='6'] { opacity: 0; }
.anim .log-cmd .hl { background: transparent; color: inherit; transition: background-color 0.3s ease, color 0.3s ease; }
.anim.s2 .log-cmd .hl { background: #ffe2d4; color: #a8401a; }
.card:not(.anim) .xl .zero td { color: var(--line); }

/* --- between your systems --------------------------------------------------- */

.pick {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.pick-board {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--card);
}

.pick-say {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  font-size: 14px;
  color: var(--text-soft);
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
}

.sysb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}

.sysb[aria-pressed='true'] {
  border: 1.5px solid var(--text);
  padding: 11.5px;
  box-shadow: 0 6px 16px -10px rgba(10, 10, 10, 0.4);
}

.sysb:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.sysk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--k-tile);
  color: var(--k-ink);
  font-size: 13px;
  font-weight: 600;
}

.k0 { --k-tile: #e8effc; --k-ink: #2c4fa8; }
.k1 { --k-tile: #efe8fb; --k-ink: #5a3fb0; }
.k2 { --k-tile: #e4f4ea; --k-ink: #1d6b45; }
.k3 { --k-tile: #fbefd9; --k-ink: #8a5a00; }
.k4 { --k-tile: #ffe9df; --k-ink: #a8401a; }
.k5 { --k-tile: #efebe4; --k-ink: #4f4840; }

:root[data-theme='dark'] .sysk {
  background: color-mix(in srgb, var(--k-ink) 34%, var(--panel));
  color: color-mix(in srgb, var(--k-tile) 85%, #ffffff);
}

.sysn {
  flex: 1;
  min-width: 0;
}

.sysn b {
  display: block;
  font-size: 15px;
  font-weight: 400;
}

.sysn small {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
}

.sysc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: transparent;
  font-size: 12px;
}

.sysb[aria-pressed='true'] .sysc {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--btn-text);
}

.pick-chain {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--panel);
  font-size: 14px;
  color: var(--text-body);
  white-space: pre-wrap;
}

.pick-answer {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 24px 60px -40px rgba(10, 10, 10, 0.3);
}

.pick-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.chipo {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.pick-chips .sep {
  color: var(--text-dim);
}

.multi,
.pill-warm {
  margin-left: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff1ea;
  color: #a8401a;
  font-size: 13px;
}

.pick-q {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

#pick-more {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
}

#pick-more[hidden] {
  display: none;
}

.pick-wrong p {
  font-size: 13px;
  color: var(--text-soft);
}

.pick-wrong ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.pick-wrong li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
}

.pick-wrong li::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 2px;
  background: var(--spot);
}

.pick-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--text-soft);
}

.pick-note {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* --- frames: a real screen on a stage or on grey ---------------------------- */

.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px 64px;
  max-width: 980px;
  margin-top: 36px;
}

.two b,
.points b {
  display: block;
  font-size: 17px;
  font-weight: 500;
}

.two p {
  max-width: 380px;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-soft);
}

.frame {
  position: relative;
  margin: 40px 0 0;
  border-radius: 22px;
  overflow: hidden;
}

.frame.plain {
  border: 1px solid var(--line-soft);
  background: var(--card);
}

.frame-shots {
  position: relative;
  z-index: 1;
  height: clamp(220px, 32vw, 460px);
  padding: clamp(16px, 3vw, 36px) clamp(16px, 3vw, 36px) 0;
  overflow: hidden;
}

.frame-shots img {
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 24px 50px -20px rgba(40, 8, 30, 0.55);
}

.frame.plain .frame-shots img {
  box-shadow: 0 24px 50px -28px rgba(10, 10, 10, 0.4);
}

/* Two screens side by side, the second a little lower and over the first. */
.frame-shots.pair {
  display: flex;
  height: clamp(180px, 23vw, 320px);
}

.pair > span {
  flex: 1 1 0;
  min-width: 0;
}

.pair .shot-a {
  position: relative;
  z-index: 1;
}

.pair .shot-b {
  margin: 18px 0 0 -10px;
}

.frame figcaption {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 22px clamp(16px, 3vw, 36px) 26px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

.frame figcaption span {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-soft);
}

.frame.stage-grad figcaption {
  color: #ffffff;
}

.frame.stage-grad figcaption span {
  color: rgba(255, 255, 255, 0.88);
}

/* A shade at the foot of the stage so the white caption always reads. */
.frame.stage-grad::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(58, 12, 38, 0), rgba(58, 12, 38, 0.5));
  pointer-events: none;
}

/* --- checks: three systems at once ------------------------------------------ */

.three {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  margin-top: 48px;
  padding: 28px;
  border-radius: 20px;
  background: var(--card);
}

.three-say {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.three-say .pill-warm {
  align-self: flex-start;
  margin-left: 0;
}

.three h3 {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.three-say p {
  max-width: 440px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}

.three-table {
  flex: 1.4 1 440px;
  min-width: 0;
  border-radius: 14px;
  background: var(--panel);
  font-size: 13px;
  overflow-x: auto;
}

.three-table .tr {
  display: grid;
  grid-template-columns: 0.75fr 0.9fr 0.9fr 0.95fr 1.25fr 1.4fr;
  gap: 8px;
  min-width: 560px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.three-table .tr:last-child {
  border-bottom: 0;
}

.three-table .th {
  color: var(--text);
  font-weight: 600;
}

.three-table .out {
  background: color-mix(in srgb, var(--spot) 5%, var(--panel));
}

.three-table .bad {
  color: var(--accent);
}

.three-table .v {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.three-table .v i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

.three-table .v.bad i {
  background: var(--spot);
}

.three-table .why {
  color: var(--accent);
  font-weight: 500;
}

.three-table .none {
  color: var(--text-dim);
}

/* --- workflows: what it does ------------------------------------------------ */

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 8px 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.points li {
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}

.points p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* --- the morning ------------------------------------------------------------ */

.mornings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 16px;
  margin-top: 48px;
}

.morning {
  padding: 28px;
  border-radius: 20px;
}

.morning.before {
  background: var(--card);
}

.morning.after {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 60px -36px rgba(10, 10, 10, 0.25);
}

.morning > b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}

.morning.before > b {
  color: var(--text-soft);
}

.morning .sq {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--brand);
}

.morning ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.morning li {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 16px;
}

.morning.before li {
  border-top-color: var(--line);
  color: var(--text-body);
}

.morning time {
  flex: 0 0 52px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.morning li.why time,
.morning li.why em {
  color: var(--accent);
  font-style: normal;
}

.morning li.fix time {
  color: var(--ok);
}

/* --- where it runs ---------------------------------------------------------- */

.runs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin-top: 40px;
}

.run {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  border-radius: 20px;
  background: var(--card);
}

.run > .ico {
  width: 26px;
  height: 26px;
  stroke-width: 1.75;
}

.run h3 {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.run p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}

.run .btn {
  align-self: flex-start;
  margin-top: 10px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-top: 40px;
  border-top: 1px solid var(--line-soft);
}

.facts > div {
  padding: 36px 24px 40px 0;
}

.facts b {
  display: block;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.facts p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
}

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

.price {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.price-bars {
  flex: 1.4 1 460px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--card);
}

.price-say {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-soft);
}

.bars,
.bar-ticks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.bars {
  align-items: end;
  margin-top: 20px;
}

.bars > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* A bar: solid ink, laid in tiles by `home.js` — the mosaic, flat at every size. */
.pbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  height: 140px;
  border-radius: 8px 8px 0 0;
  background: var(--text);
  overflow: hidden;
}

.pbar.tiled {
  background: transparent;
}

.pbar i {
  background: var(--text);
}

.pbar i:nth-child(3n + 2) {
  background: color-mix(in srgb, var(--text) 86%, var(--bg));
}

.pbar i:nth-child(5n + 1) {
  background: color-mix(in srgb, var(--text) 76%, var(--bg));
}

.bar-ticks {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-soft);
  text-align: center;
}

.bar-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-soft);
}

.price-card {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
}

.price-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-top b {
  font-size: 17px;
  font-weight: 500;
}

.price-top span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
}

.price-big {
  font-size: 15px;
  color: var(--text-soft);
}

.price-big b {
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -0.05em;
  color: var(--text);
}

.price-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.price-card li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-card li .ico {
  width: 15px;
  height: 15px;
  stroke-width: 2.25;
  color: var(--ok);
}

.price-card .btn {
  margin-top: auto;
}

.price-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* --- founder and questions: a label on the left, the body on the right ------- */

.side {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
}

.side-label {
  flex: 0 1 220px;
  font-size: 16px;
  color: var(--text-dim);
}

h2.side-label {
  font-size: clamp(34px, 3.6vw, 46px);
  color: var(--text);
}

.side-body {
  flex: 1 1 520px;
  min-width: 0;
}

.quote {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.who .avatar {
  width: 44px;
  height: 44px;
  background: var(--btn);
  color: var(--btn-text);
  font-size: 14px;
  font-weight: 500;
}

.who b {
  display: block;
  font-weight: 500;
}

.who small {
  display: block;
  font-size: 14px;
  color: var(--text-soft);
}

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

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

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
}

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

.faq summary .ico {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

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

.faq details p {
  max-width: 640px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* --- the close -------------------------------------------------------------- */

.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--card);
}

.closing > div:first-child {
  flex: 1 1 420px;
  min-width: 0;
}

.closing h2 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.closing p {
  max-width: 460px;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-body);
}

.home footer.site {
  margin-top: 0;
  border-top: 0;
}

/* --- the demo, always within reach ----------------------------------------- */

.demo-pill {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 10px 30px -10px rgba(10, 10, 10, 0.25);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.demo-pill > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--btn);
  color: var(--btn-text);
}

.demo-pill .ico {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Hidden while the hero's own two buttons are on screen; `home.js` says when. */
.demo-pill.is-away {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* --- small screens ---------------------------------------------------------- */

@media (max-width: 640px) {
  .ruled {
    padding-block: 64px;
  }

  .ruled.no-foot {
    padding-bottom: 0;
  }

  .show-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .show-note {
    display: none;
  }

  .show-card {
    margin: 4px 6px 6px;
  }

  .card,
  .three,
  .morning,
  .run,
  .price-bars,
  .price-card {
    padding: 20px;
  }

  .term-note {
    position: static;
    display: inline-block;
    margin-top: 10px;
  }

  .pick-q {
    font-size: 22px;
  }

  .price-card ul {
    grid-template-columns: 1fr;
  }

  .bars,
  .bar-ticks {
    gap: 6px;
  }

  .facts > div {
    padding: 24px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .demo-pill {
    right: 12px;
    bottom: 12px;
    padding-right: 14px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .show-stage .show-live {
    visibility: hidden;
  }
}