/* Sweatpea landing page
   Hand-built, no framework. The signature is the page's menu bar:
   it heats up as you scroll and the pea changes its face. */

/* Self-hosted so the page makes no third-party requests. All three are
   variable fonts; the latin subset covers the page's copy. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  --paper: #F3F0E4;
  --paper-2: #E9EBD9;
  --card: #FCFAF2;
  --ink: #172312;
  --ink-2: #2E3B28;
  --muted: #53604A;
  --line: #C8CEB7;
  --pea: #92D15C;
  --pea-deep: #4F7B2F;
  --lime: #D8F27A;
  --sweat: #7FD3F2;
  --sweat-deep: #2C93B8;
  /* The focus ring, measured: 5.07:1 on paper, 4.66:1 on lime, 5.54:1 on card.
     Dark surfaces switch to --sweat below, which clears 3:1 on night. */
  --focus: #1E6E86;
  --coral: #E8664A;
  /* The coral for text: 5.2:1 on paper and 5.6:1 on card, where --coral is a fill colour only. */
  --coral-ink: #B23A22;
  --night: #101A0D;
  --night-2: #1A2915;
  --heat: 0.12;
  --radius: 26px;
  --max: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* A little overshoot, for a pea changing its mind. */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.25, 1.4, .5, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .45;
  background-image: radial-gradient(rgba(23, 35, 18, .12) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* On the ink-dark surfaces the teal ring would disappear; lime keeps 3:1 or better. */
.ticker :focus-visible,
.final :focus-visible,
.footer :focus-visible,
.plan--pro :focus-visible,
.share-card :focus-visible { outline-color: var(--lime); }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 300;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

.container { width: min(var(--max), 100% - 48px); margin-inline: auto; position: relative; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pea);
  border: 1.5px solid var(--ink);
}
.eyebrow--light { color: rgba(243, 240, 228, .66); }
.eyebrow--light::before { background: var(--lime); border-color: var(--lime); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.96875rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:active { transform: translate(0, 0); }
.btn--primary { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--pea); }
.btn--primary:hover { box-shadow: 6px 6px 0 var(--pea); }
.btn--ghost { box-shadow: 4px 4px 0 var(--line); background: rgba(252, 250, 242, .55); }
.btn--ghost:hover { box-shadow: 6px 6px 0 var(--line); background: var(--card); }
.btn--light { background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.btn--light:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn--lime { background: var(--lime); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn--lime:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn--big { min-height: 58px; padding: 17px 30px; font-size: 1.09375rem; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 240, 228, .86);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -.04em;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__pea { width: 26px; height: 26px; transition: transform .3s var(--ease); }
.brand:hover .brand__pea { transform: rotate(-12deg) scale(1.12); }
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 8px;
}
.nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s, color .2s;
}
.nav a:hover { color: var(--ink); border-color: var(--ink); }
/* ---------- Narrow-screen menu ----------
   The section links used to vanish below 760px with nothing in their place. A disclosure
   keeps the same destinations reachable, with no script required. */
.nav-menu { display: none; position: relative; }
.nav-menu__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.nav-menu__toggle::-webkit-details-marker { display: none; }
.nav-menu__toggle::after { content: "▾"; margin-left: 7px; font-size: .72em; }
.nav-menu[open] .nav-menu__toggle { background: var(--ink); color: var(--paper); }
.nav-menu[open] .nav-menu__toggle::after { content: "▴"; }
.nav-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 184px;
  padding: 7px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 6px 6px 0 var(--ink);
}
.nav-menu__panel a {
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-menu__panel a:hover { background: var(--paper-2); }
.topbar__status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cpu-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(252, 250, 242, .7);
  font-size: 0.75rem;
}
.cpu-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pea);
  box-shadow: 0 0 0 3px rgba(146, 209, 92, .22);
  animation: pulse 2.4s ease-in-out infinite;
}
.cpu-chip__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .08em;
  color: var(--muted);
}
.topbar__pea { width: 28px; height: 28px; transform-origin: 50% 100%; translate: 0 0; }
.topbar__pea.is-hopping { animation: pea-hop .74s cubic-bezier(.3, .78, .4, 1); }
.topbar__cta {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.topbar__cta:hover { background: var(--pea-deep); transform: translateY(-1px); }
.heatline { height: 3px; background: transparent; }
.heatline span {
  display: block;
  width: 12%;
  height: 100%;
  background: linear-gradient(90deg, var(--pea), var(--coral));
  transition: width .2s linear;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 6.5vw, 86px) 0 clamp(34px, 5vw, 58px);
  isolation: isolate;
}
.hero__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(23, 35, 18, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 35, 18, .045) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 72%);
}
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 780px;
  height: 780px;
  right: -180px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 209, 92, .34), rgba(127, 211, 242, .12) 42%, transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(26px, 5vw, 58px);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
h1, h2 {
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-weight: 750;
  letter-spacing: -.052em;
}
h1 {
  margin: 16px 0 22px;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: .92;
  isolation: isolate;
}
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.06em;
  right: -.06em;
  bottom: .02em;
  height: .34em;
  border-radius: 4px;
  background: var(--lime);
  transform: rotate(-1.4deg);
}
.lede {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1.5vw, 1.28125rem);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 22px;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__meta li { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pea-deep);
}

/* Hero pea */
.hero__stage {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1.04;
  display: grid;
  place-items: center;
  --mx: 0;
  --my: 0;
}
.heat-halo {
  position: absolute;
  z-index: 0;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(146, 209, 92, .5), transparent 58%),
    radial-gradient(circle at 68% 66%, rgba(232, 102, 74, .44), transparent 55%);
  filter: blur(34px);
  opacity: calc(.28 + var(--heat) * .7);
  transform: translateY(-2%);
  animation: halo-breathe 6.5s ease-in-out infinite;
  will-change: scale;
}
.pea-stack {
  position: relative;
  z-index: 2;
  width: 88%;
  aspect-ratio: 1;
  transform: translate3d(calc(var(--mx) * 16px), calc(var(--my) * 13px), 0);
  transition: transform .25s var(--ease);
}
/* The whole stage lands before you have time to read the headline. */
.js .hero__stage { animation: pea-arrive 1.05s var(--spring) .12s both; }
.pea-img {
  --lift: 20px;
  --spin: 10deg;
  --shadow: drop-shadow(0 26px 22px rgba(23, 35, 18, .16));
  --blur: 5px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  /* scale, rotate and translate are their own properties, so the idle bob below (transform) can keep
     running while a face merges into the next. */
  scale: .8;
  rotate: calc(var(--spin) * -1);
  translate: 0 var(--lift);
  filter: var(--shadow);
  animation: bob 6.5s ease-in-out infinite;
  will-change: opacity, scale, rotate, translate, filter;
}
/* One pea, not two: the old expression squashes and clears in under half a second while the next
   springs up in the same spot, so each change reads as this pea turning into the next one. */
.pea-img.is-active { animation: face-in .85s cubic-bezier(.34, 1.56, .64, 1) both, bob 6.5s ease-in-out infinite; }
.pea-img.is-leaving { animation: face-out .52s cubic-bezier(.4, 0, .7, .2) both, bob 6.5s ease-in-out infinite; }

.hero__stage.is-shifting .heat-halo { animation: halo-pop .82s var(--ease); }
.pea-stack.is-shifting { animation: pea-squash .64s cubic-bezier(.2, .8, .3, 1); }

.drops, .steam {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.drops { opacity: calc(var(--heat) * 1.4); }
.drops span {
  position: absolute;
  width: 14px;
  height: 18px;
  border-radius: 50% 50% 52% 52% / 66% 66% 34% 34%;
  background: linear-gradient(140deg, #C9F1FF, var(--sweat));
  border: 1.5px solid var(--ink);
  animation: drop 3.1s linear infinite;
}
.drops span:nth-child(1) { left: 14%; top: 32%; animation-delay: .1s; }
.drops span:nth-child(2) { left: 80%; top: 26%; animation-delay: .8s; width: 11px; height: 15px; }
.drops span:nth-child(3) { left: 69%; top: 43%; animation-delay: 1.5s; }
.drops span:nth-child(4) { left: 24%; top: 26%; animation-delay: 2.1s; width: 10px; height: 14px; }
.drops span:nth-child(5) { left: 88%; top: 49%; animation-delay: 2.7s; width: 9px; height: 13px; }
.steam { opacity: calc((var(--heat) - .58) * 3.2); }
.steam span {
  position: absolute;
  top: 9%;
  width: 18px;
  height: 62px;
  border-left: 3px solid rgba(23, 35, 18, .28);
  border-radius: 50%;
  animation: steam 3.4s ease-in-out infinite;
}
.steam span:nth-child(1) { right: 20%; animation-delay: .1s; }
.steam span:nth-child(2) { right: 12%; height: 74px; animation-delay: .8s; }
.steam span:nth-child(3) { right: 28%; height: 50px; animation-delay: 1.6s; }

.orbit-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  white-space: nowrap;
  animation: float 7s ease-in-out infinite;
}
.orbit-chip b { font-weight: 700; }
.orbit-chip__dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--tile);
  border: 1px solid var(--ink);
}
.orbit-chip--chrome { top: 9%; left: -1%; }
.orbit-chip--docker { top: 35%; right: -3%; animation-delay: 1.2s; }
.orbit-chip--macos { bottom: 25%; left: 0; animation-delay: 2s; }
.orbit-chip--me { bottom: 12%; right: 2%; animation-delay: .6s; }

.hero__readout {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(82%, 380px);
  padding: 10px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 15px;
  background: rgba(252, 250, 242, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 4px 4px 0 var(--ink);
}
.pea-line {
  margin: 0 0 5px;
  font-size: 0.84375rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 1.3em;
}
.pea-line.is-swapping { animation: line-in .5s var(--ease); }
.readout-state.is-swapping { animation: state-pop .55s var(--spring); }
.readout-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.75rem;
}
.readout-label {
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.readout-row strong { font-size: 0.8125rem; }
.readout-state {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(26px, 4vw, 44px);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue__line {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, var(--ink), transparent);
  animation: cue 2s ease-in-out infinite;
}

/* ---------- Ticker ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--night);
  color: var(--lime);
  padding: 13px 0;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track,
.ticker.is-paused .ticker__track { animation-play-state: paused; }
/* The ticker is decorative, but movement this persistent still needs an off switch. */
.ticker__pause {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--lime);
  border-radius: 999px;
  background: var(--night);
  color: var(--lime);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  transform: translateY(-50%);
  transition: opacity .2s, background .2s;
}
.ticker__pause:hover, .ticker__pause:focus-visible { opacity: 1; background: var(--night-2); }
.ticker__group { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__group span {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ticker__group span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pea);
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(72px, 9vw, 126px) 0; scroll-margin-top: 80px; }
.section--demo { padding-top: clamp(64px, 7vw, 100px); }
.section--blame { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--receipts { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--privacy { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--pro { overflow: hidden; }
.section-head { max-width: 790px; margin-bottom: clamp(34px, 4.5vw, 58px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { margin-inline: auto; }
h2 {
  margin: 13px 0 18px;
  font-size: clamp(2.25rem, 4.8vw, 4.05rem);
  line-height: .95;
}
.section-lede {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(1.03125rem, 1.35vw, 1.15625rem);
  line-height: 1.55;
}
.tick-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.tick-list li {
  position: relative;
  padding-left: 28px;
  margin: 11px 0;
  color: var(--ink-2);
  font-size: 0.96875rem;
}
.tick-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pea);
  border: 1.5px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}
.tick-list code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78125rem;
  background: rgba(23, 35, 18, .08);
  padding: 2px 5px;
  border-radius: 4px;
}
.tick-list--light li { color: rgba(243, 240, 228, .82); }
.tick-list--light li::before { background: var(--lime); border-color: var(--lime); }

/* ---------- Demo ---------- */
.demo-wrap { max-width: 1100px; margin: 0 auto; }
.desktop {
  border: 2px solid var(--ink);
  border-radius: 26px;
  overflow: hidden;
  background: #DDE3D2;
  box-shadow: 10px 10px 0 var(--ink);
}
.menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1.5px solid var(--ink);
  background: rgba(250, 248, 240, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.75rem;
}
.menubar__left, .menubar__right { display: flex; align-items: center; gap: 14px; }
.menubar__apple { font-size: 0.875rem; color: var(--pea-deep); }
.menubar__item { color: var(--muted); }
.menubar__cpu { font-size: 0.75rem; color: var(--muted); }
.menubar__clock { font-size: 0.75rem; color: var(--muted); }
.menubar__pea { width: 24px; height: 24px; }
.desktop__body {
  position: relative;
  min-height: 580px;
  padding: 28px;
  background:
    radial-gradient(circle at 14% 12%, rgba(210, 229, 190, .95), transparent 44%),
    radial-gradient(circle at 86% 82%, rgba(188, 221, 226, .9), transparent 46%),
    linear-gradient(135deg, #E9ECDE 0%, #DCE5D2 55%, #D5E1D8 100%);
}
.desktop__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 35, 18, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 35, 18, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 40% 40%, #000 0, transparent 75%);
  pointer-events: none;
}
.wallpaper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fake-window {
  position: absolute;
  border: 1.5px solid rgba(23, 35, 18, .35);
  border-radius: 12px;
  background: rgba(252, 250, 242, .38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(23, 35, 18, .12);
}
.fake-window--one { top: 9%; left: 5%; width: 330px; height: 190px; padding: 10px 12px; }
.fake-window__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: rgba(23, 35, 18, .28);
}
.fake-window__lines { margin-top: 18px; display: grid; gap: 9px; }
.fake-window__lines span { display: block; height: 7px; border-radius: 4px; background: rgba(23, 35, 18, .13); }
.fake-window__lines span:nth-child(1) { width: 62%; background: rgba(79, 123, 47, .28); }
.fake-window__lines span:nth-child(2) { width: 88%; }
.fake-window__lines span:nth-child(3) { width: 74%; }
.fake-window__lines span:nth-child(4) { width: 46%; }
.fake-window--two {
  bottom: 9%;
  left: 12%;
  width: 290px;
  padding: 14px;
  background: rgba(16, 26, 13, .86);
  color: var(--lime);
  border-color: var(--ink);
}
.fake-window__terminal { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; line-height: 1.7; }
.fake-window__dim { color: rgba(243, 240, 228, .55); }
.popover {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 3;
  width: min(400px, calc(100% - 52px));
  padding: 18px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 6px 6px 0 rgba(23, 35, 18, .86);
}
.popover__top { display: flex; align-items: flex-start; gap: 12px; }
.popover__pea {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .2s var(--ease);
}
.popover__pea img { width: 72px; height: 72px; }
.popover__pea:hover { transform: rotate(-5deg) scale(1.05); }
.popover__pea.is-poked { animation: wobble .55s ease-in-out; }
.popover__copy { min-width: 0; padding-top: 4px; }
.popover__state {
  margin: 0 0 3px;
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.popover__line {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.28;
  min-height: 2.4em;
}
.load-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px 0 14px;
  font-size: 0.75rem;
  color: var(--muted);
}
.load-row b { font-size: 0.8125rem; color: var(--ink); }
.meter {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(23, 35, 18, .1);
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pea), var(--coral));
  transition: width .35s var(--ease);
}
.habit-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(23, 35, 18, .06);
  font-size: 0.75rem;
  color: var(--muted);
}
.habit-strip b { font-size: 0.75rem; color: var(--ink); }
.habit-strip__chev { margin-left: auto; color: var(--muted); }
.vitals-strip {
  display: grid;
  gap: 5px;
  margin: 0 0 14px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(23, 35, 18, .06);
}
.vitals-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}
.vitals-row .mono { flex: 0 0 46px; }
.vitals-row b {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}
.meter--thin { height: 5px; }
.culprits__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.culprit {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 3px 9px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px dashed var(--line);
}
.app-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: var(--tile, var(--pea));
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}
.app-icon--big { width: 34px; height: 34px; border-radius: 10px; font-size: 0.8125rem; }
.culprit__info { min-width: 0; }
.culprit__name { display: block; font-size: 0.78125rem; font-weight: 700; line-height: 1.3; }
.culprit__note { display: block; margin-top: 1px; font-size: 0.75rem; line-height: 1.3; color: var(--muted); }
.culprit__pct { font-size: 0.75rem; padding-top: 2px; }
.bar {
  grid-column: 1 / -1;
  height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(23, 35, 18, .09);
  overflow: hidden;
}
.bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--tile, var(--pea-deep));
  transition: width .4s var(--ease);
}
.culprits-empty {
  margin: 8px 0;
  padding: 16px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: rgba(243, 240, 228, .5);
}
.culprits-empty span { font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.culprits-empty p { margin: 4px 0 0; font-size: 0.8125rem; font-weight: 600; }
.popover__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mini-btn {
  padding: 7px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}
.mini-btn:hover { background: rgba(23, 35, 18, .06); transform: translateY(-1px); }
.mini-btn--solid { background: var(--ink); color: var(--paper); }
.mini-btn--solid:hover { background: var(--pea-deep); color: var(--paper); }
.popover__footer {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
}
.rest-bubble {
  position: absolute;
  z-index: 4;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--pea);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}
.demo-console {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 2px solid var(--ink);
  background: var(--card);
}
.demo-console label { flex: 0 0 auto; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.demo-console output { flex: 0 0 44px; font-size: 0.75rem; text-align: right; }
input[type="range"] {
  flex: 1;
  min-width: 60px;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pea) 0%, var(--coral) 100%);
  cursor: ew-resize;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 2px 2px 0 var(--ink);
}
.poke-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.poke-btn:hover { background: var(--pea); transform: translateY(-1px); }
.demo-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.demo-notes b { color: var(--ink); margin-right: 5px; }

/* ---------- Blame ---------- */
.blame-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 58px); align-items: center; }
.blame-card {
  padding: 24px;
  border: 2px solid var(--ink);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
}
.blame-card__quote {
  margin: 2px 0 18px;
  min-height: 2.1em;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.3125rem, 2.2vw, 1.6875rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.blame-list { border-top: 1px solid var(--line); }
.blame-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 2px 10px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  transition: opacity .35s, transform .35s;
}
.blame-row.is-quitting { opacity: .4; transform: translateX(6px); }
.blame-row__info { min-width: 0; }
.blame-row__name { display: block; font-size: 0.84375rem; font-weight: 700; }
.blame-row__note { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.3; }
.blame-row__pct { font-size: 0.75rem; padding-top: 2px; }
.quit-btn {
  padding: 4px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.quit-btn:hover { background: var(--ink); color: var(--paper); }
.blame-row .bar { margin-top: 5px; }
.blame-card__footer {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- Faces ---------- */
.faces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.face-card {
  position: relative;
  padding: 16px 13px 15px;
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 18%, #fff, transparent 62%), var(--card);
  text-align: center;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.face-card:hover { transform: translateY(-5px) rotate(-.8deg); box-shadow: 5px 5px 0 var(--ink); }
.face-card__art { aspect-ratio: 1; display: grid; place-items: center; }
.face-card__art img {
  width: 82%;
  filter: drop-shadow(0 10px 10px rgba(23, 35, 18, .12));
  transition: transform .3s var(--ease);
}
.face-card:hover .face-card__art img { transform: scale(1.07) rotate(2deg); }
.face-card__state {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.face-card p { margin: 4px 0 0; font-size: 0.78125rem; font-weight: 600; line-height: 1.25; }
.faces-note { max-width: 68ch; margin: 28px 0 0; color: var(--muted); font-size: 0.875rem; }

/* ---------- Rest ---------- */
.section--rest { background: var(--night); color: var(--paper); overflow: hidden; }
.section--rest::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  left: -200px;
  top: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 209, 92, .12), transparent 68%);
  pointer-events: none;
}
.section--rest h2 { color: var(--paper); }
.section--rest .section-lede { color: rgba(243, 240, 228, .72); }
.rest-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(34px, 5vw, 60px); align-items: center; }
.rest-card {
  width: 100%;
  max-width: 520px;
  justify-self: center;
  padding: 18px;
  border: 2px solid var(--ink);
  border-radius: 28px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--pea);
}
.rest-card__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rest-card__body { display: flex; flex-direction: column; align-items: center; padding: 20px 0 12px; }
.rest-ring {
  width: 232px;
  max-width: 78%;
  aspect-ratio: 1;
  padding: 9px;
  border-radius: 50%;
  background: conic-gradient(var(--pea) calc(var(--p) * 1%), rgba(23, 35, 18, .12) 0);
  transition: background .3s linear;
}
.rest-ring__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.rest-ring__inner img { width: 108px; height: 108px; }
.rest-ring__timer { font-size: 0.75rem; letter-spacing: .06em; }
.rest-line {
  min-height: 2.5em;
  margin: 14px 0 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-align: center;
}
.rest-demo-note { margin: 6px 0 0; font-size: 0.75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rest-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.typing-test {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.typing-test span { display: block; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.typing-test input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.875rem;
}
.typing-test input::placeholder { color: #8A947D; }

/* ---------- Receipts ---------- */
.receipts-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(34px, 5vw, 60px); align-items: center; }
.receipts-aside {
  margin: 22px 0 0;
  padding-left: 13px;
  border-left: 3px solid var(--pea);
  color: var(--muted);
  font-size: 0.875rem;
  max-width: 50ch;
}
.share-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 10px 6px;
  min-height: 540px;
}
.share-card {
  position: relative;
  z-index: 2;
  width: min(390px, 100%);
  padding: 22px;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--night);
  color: var(--paper);
  box-shadow: 12px 12px 0 var(--pea), 0 24px 60px rgba(23, 35, 18, .18);
  transform: rotate(-3deg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.share-card:hover { transform: rotate(0) translateY(-6px); box-shadow: 14px 14px 0 var(--pea), 0 30px 70px rgba(23, 35, 18, .22); }
.share-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(243, 240, 228, .18);
  color: var(--lime);
  font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.share-card__hero { margin: 26px 0 14px; }
.share-card__number {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 4rem;
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.06em;
}
.share-card__label { margin: 6px 0 0; font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sweat); }
.share-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
  padding: 14px 0;
  border-top: 1px solid rgba(243, 240, 228, .16);
  border-bottom: 1px solid rgba(243, 240, 228, .16);
}
.share-card__stats b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 2rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.04em;
}
.share-card__stats b span { font-size: 1rem; color: rgba(243, 240, 228, .55); }
.share-card__stats span { display: block; margin-top: 4px; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 240, 228, .55); }
.share-card__culprit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(243, 240, 228, .06);
}
.share-card__culprit > div { flex: 1; min-width: 0; }
.share-card__culprit div span { display: block; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 240, 228, .5); }
.share-card__culprit div b { display: block; font-size: 0.875rem; }
.share-card__culprit > span:last-child { font-size: 0.75rem; color: var(--lime); }
.share-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--lime); font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; }
.share-card__foot img { width: 22px; height: 22px; border-radius: 6px; }
.share-scene .btn { position: relative; z-index: 2; margin-top: 26px; }
.confetti-layer { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.confetti-piece {
  position: absolute;
  top: 16%;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  animation: confetti 1.7s cubic-bezier(.15, .65, .3, 1) forwards;
}

/* ---------- Pro ---------- */
.plans { display: grid; grid-template-columns: 1fr 1.06fr; gap: 22px; max-width: 980px; margin: 0 auto; align-items: stretch; }
.plan {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 2px solid var(--ink);
  border-radius: 28px;
  background: var(--card);
}
.plan--pro { background: var(--night); color: var(--paper); box-shadow: 10px 10px 0 var(--pea); }
.plan__badge {
  display: inline-block;
  padding: 5px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 0.75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
}
.plan__badge--pro { background: var(--lime); border-color: var(--lime); }
.plan__price {
  margin: 14px 0 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.75rem, 5vw, 3.625rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.055em;
}
.plan__price span { font-family: "Instrument Sans", sans-serif; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan--pro .plan__price span { color: rgba(243, 240, 228, .6); }
.plan__blurb { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
.plan--pro .plan__blurb { color: rgba(243, 240, 228, .7); }
.plan__list { list-style: none; margin: 20px 0 26px; padding: 0; }
.plan__list li {
  position: relative;
  padding-left: 26px;
  margin: 9px 0;
  font-size: 0.90625rem;
  color: var(--ink-2);
}
.plan__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pea);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
}
.plan__list--pro li { color: rgba(243, 240, 228, .84); }
.plan__list--pro li::before { background: var(--lime); border-color: var(--lime); }
.plan__cta { width: 100%; margin-top: auto; }
.plan__fine { margin: 10px 0 0; text-align: center; font-size: 0.8125rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(243, 240, 228, .72); }
.plan__terms { margin: 8px 0 0; text-align: center; font-size: 0.75rem; color: rgba(243, 240, 228, .72); }
.plan__terms a { color: var(--lime); text-underline-offset: 2px; }
.pricing-note { max-width: 720px; margin: 30px auto 0; text-align: center; color: var(--muted); font-size: 0.84375rem; }
.pricing-note a { color: var(--ink); text-underline-offset: 2px; }

/* ---------- Privacy ---------- */
.privacy-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(34px, 5vw, 60px); align-items: center; }
.privacy-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.privacy-chips span {
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.privacy-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 22px 20px 44px;
  border: 2px solid var(--ink);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 6px 6px 0 var(--ink);
}
.privacy-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.privacy-node img { width: 64px; height: 64px; }
.privacy-node b { font-size: 0.875rem; line-height: 1.2; }
.privacy-node span { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.privacy-node__lock {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--sweat);
  font-size: 1.875rem;
  line-height: 1;
}
.privacy-link { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; }
.privacy-link__line { width: 100%; border-top: 2px dashed var(--ink); opacity: .45; }
.privacy-link span { font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; }
.privacy-cross {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.privacy-cross span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--coral-ink);
  text-decoration: line-through;
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(34px, 5vw, 60px); align-items: start; }
.faq-list { border-top: 1.5px solid var(--ink); }
.faq-list details { border-bottom: 1.5px solid var(--ink); scroll-margin-top: 90px; }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 0;
  cursor: pointer;
  list-style: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  color: var(--pea-deep);
  transition: transform .2s;
}
.faq-list details[open] summary::after { content: "–"; transform: rotate(180deg); }
.faq-list details p { margin: 0; padding: 0 0 18px; max-width: 62ch; color: var(--muted); font-size: 0.90625rem; }

/* ---------- Final ---------- */
.final {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 10vw, 130px) 0;
  background: var(--night);
  color: var(--paper);
  text-align: center;
}
.final::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 209, 92, .16), transparent 66%);
  pointer-events: none;
}
.final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.final__pea img {
  width: 160px;
  margin-bottom: 10px;
  filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .3));
  animation: bob 5.5s ease-in-out infinite;
}
.final .eyebrow { justify-content: center; }
.final h2 { margin: 13px 0 14px; color: var(--paper); font-size: clamp(2.7rem, 5.6vw, 5rem); }
.final p { margin: 0 0 26px; color: rgba(243, 240, 228, .72); font-size: 1.0625rem; }
.final__meta { margin: 16px 0 0 !important; font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 240, 228, .5) !important; }

/* ---------- Footer ---------- */
.footer { background: var(--night); color: var(--paper); border-top: 1px solid rgba(243, 240, 228, .14); padding: 38px 0 24px; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.brand--footer { color: var(--paper); }
.footer__line { margin: 0; color: rgba(243, 240, 228, .55); font-size: 0.8125rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(243, 240, 228, .62);
  text-decoration: none;
  transition: color .2s;
}
.footer__nav a:hover { color: var(--lime); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(243, 240, 228, .12);
  font-size: 0.75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(243, 240, 228, .62);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(243, 240, 228, .72);
  text-decoration: none;
  transition: color .2s;
}
.footer__legal a:hover { color: var(--lime); }

/* ---------- Companion pea ---------- */
/* Once the hero scrolls away, the same pea keeps you company down the page and changes face
   with the heat. It starts exactly where the hero pea left so the handover reads as one pea. */
.companion {
  position: fixed;
  z-index: 90;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  translate: 0 26px;
  pointer-events: none;
  transition: opacity .45s var(--ease), translate .6s var(--spring);
}
.companion.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.companion__pea {
  position: relative;
  width: clamp(58px, 6vw, 76px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 92%;
  -webkit-tap-highlight-color: transparent;
}
.companion__pea::before {
  content: "";
  position: absolute;
  inset: -26%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, rgba(146, 209, 92, .5), transparent 62%),
              radial-gradient(circle at 66% 68%, rgba(232, 102, 74, .38), transparent 58%);
  filter: blur(12px);
  opacity: calc(.35 + var(--heat) * .6);
  animation: halo-breathe 6.5s ease-in-out infinite;
}
.companion__img {
  --lift: 14px;
  --spin: 10deg;
  --shadow: drop-shadow(0 10px 10px rgba(23, 35, 18, .18));
  --blur: 4px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  scale: .8;
  rotate: calc(var(--spin) * -1);
  translate: 0 var(--lift);
  filter: var(--shadow);
  animation: bob 6.5s ease-in-out infinite;
  will-change: opacity, scale, rotate, translate, filter;
}
.companion__img.is-active { animation: face-in .8s cubic-bezier(.34, 1.56, .64, 1) both, bob 6.5s ease-in-out infinite; }
.companion__img.is-leaving { animation: face-out .5s cubic-bezier(.4, 0, .7, .2) both, bob 6.5s ease-in-out infinite; }
.companion__pea.is-poked { animation: pea-squash .5s cubic-bezier(.2, .8, .3, 1); }
.companion__bubble {
  position: relative;
  max-width: 250px;
  padding: 9px 13px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 14px 14px 4px 14px;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0;
  translate: 10px 0;
  transition: opacity .3s var(--ease), translate .38s var(--spring);
}
.companion__bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 9px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}
.companion__bubble.is-showing { opacity: 1; translate: 0 0; }
.companion__bubble p {
  margin: 0;
  font-size: 0.78125rem;
  font-weight: 600;
  line-height: 1.3;
}
.companion__state {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 22px;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border: 1.5px solid var(--lime);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--lime);
  font-size: 0.8125rem;
  font-weight: 550;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.hero__copy .reveal:nth-child(1) { transition-delay: .04s; }
.hero__copy .reveal:nth-child(2) { transition-delay: .1s; }
.hero__copy .reveal:nth-child(3) { transition-delay: .16s; }
.hero__copy .reveal:nth-child(4) { transition-delay: .22s; }
.hero__copy .reveal:nth-child(5) { transition-delay: .28s; }

/* ---------- Motion ---------- */
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  33% { transform: translateY(-7px) rotate(-1.1deg); }
  66% { transform: translateY(-3px) rotate(.7deg); }
}
/* The hero stage arrives with a hop that settles, then hands over to the idle bob. */
/* The hand-off: the two faces sit on the same spot, so there is never a second pea on screen.
   The old one shrinks and clears quickly; the new one springs up through a brief blur. */
@keyframes face-in {
  0% {
    opacity: 0;
    scale: .88;
    rotate: calc(var(--spin) * -.4);
    translate: 0 calc(var(--lift) * .55);
    filter: var(--shadow) blur(var(--blur));
  }
  55% { opacity: .62; filter: var(--shadow) blur(2px); }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    filter: var(--shadow) blur(0);
  }
}
@keyframes face-out {
  0% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    filter: var(--shadow) blur(0);
  }
  40% { opacity: .5; filter: var(--shadow) blur(2px); }
  100% {
    opacity: 0;
    scale: .92;
    rotate: calc(var(--spin) * .4);
    translate: 0 calc(var(--lift) * .3);
    filter: var(--shadow) blur(var(--blur));
  }
}
@keyframes pea-arrive {
  0% { scale: .62; rotate: -9deg; }
  70% { scale: 1.03; rotate: 1.5deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes pea-squash {
  0% { scale: 1 1; }
  26% { scale: 1.055 .93; }
  55% { scale: .97 1.035; }
  78% { scale: 1.012 .99; }
  100% { scale: 1 1; }
}
@keyframes halo-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.06; }
}
@keyframes halo-pop {
  0% { scale: 1; }
  30% { scale: 1.18; }
  100% { scale: 1; }
}
@keyframes pea-hop {
  0% { translate: 0 0; scale: 1 1; }
  18% { translate: 0 2px; scale: 1.09 .9; }
  44% { translate: 0 -10px; scale: .95 1.07; }
  66% { translate: 0 1px; scale: 1.06 .94; }
  82% { translate: 0 -2px; scale: .99 1.01; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes line-in {
  0% { opacity: 0; translate: 0 9px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes state-pop {
  0% { scale: .78; opacity: .25; }
  60% { scale: 1.09; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(146, 209, 92, .2); }
  50% { box-shadow: 0 0 0 6px rgba(146, 209, 92, .06); }
}
@keyframes drop {
  0% { transform: translateY(-8px) scale(.7); opacity: 0; }
  16% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(210px) scale(1); opacity: 0; }
}
@keyframes steam {
  0% { transform: translateY(16px) scaleY(.7); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(-26px) scaleY(1.15); opacity: 0; }
}
@keyframes cue {
  0%, 100% { transform: scaleY(.5); opacity: .4; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-8deg) scale(1.08); }
  55% { transform: rotate(6deg) scale(1.04); }
  80% { transform: rotate(-3deg) scale(1.02); }
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .nav { gap: 15px; }
  .hero__grid { gap: 30px; }
  .orbit-chip--chrome { left: 1%; }
  .orbit-chip--docker { right: -1%; }
}
@media (max-width: 900px) {
  .hero__grid, .blame-grid, .rest-grid, .receipts-grid, .privacy-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 720px; }
  .hero__stage { max-width: 500px; }
  .plans { grid-template-columns: 1fr; max-width: 620px; }
  .blame-card, .privacy-map { max-width: 620px; }
  .section-head { max-width: 680px; }
  .faces-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .topbar__inner { gap: 12px; }
  .nav { display: none; }
  .nav-menu { display: block; }
  .cpu-chip { display: none; }
  .desktop { box-shadow: 7px 7px 0 var(--ink); }
  .desktop__body { min-height: 0; padding: 18px; }
  .wallpaper { display: none; }
  .popover { position: relative; top: auto; right: auto; width: 100%; box-shadow: 4px 4px 0 rgba(23, 35, 18, .86); }
  .menubar__item { display: none; }
  .menubar__clock { display: none; }
  .demo-console { flex-wrap: wrap; }
  .demo-console label { width: 100%; }
  .demo-console input[type="range"] { flex: 1 1 55%; }
  .demo-notes { grid-template-columns: 1fr; gap: 7px; }
  .faces-grid { grid-template-columns: repeat(2, 1fr); }
  .rest-bubble { position: relative; bottom: auto; left: auto; transform: none; margin: 12px auto 0; max-width: 100%; }
  .share-scene { min-height: 0; padding-inline: 0; }
  .privacy-map { grid-template-columns: 1fr; padding-bottom: 46px; }
  .privacy-link { flex-direction: row; justify-content: center; min-width: 0; padding: 4px 0; }
  .privacy-link__line { width: 50px; flex: 0 0 auto; }
  .privacy-node img { width: 52px; height: 52px; }
  .footer__nav { margin-left: 0; width: 100%; }
  .footer__bottom { flex-direction: column; }
  /* The pea keeps you company on phones too, without its bubble. The toast moves above it. */
  .companion__bubble { display: none; }
  .companion__pea { width: 54px; }
  .companion { right: 14px; bottom: 14px; }
  .toast { bottom: 84px; }
}
@media (max-width: 560px) {
  .container { width: min(var(--max), 100% - 36px); }
  h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .hero__actions .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .final__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .hero__meta { gap: 7px 12px; }
  .hero__stage { max-width: 360px; }
  .orbit-chip--macos, .orbit-chip--me { display: none; }
  .orbit-chip { font-size: 0.75rem; }
  .hero__readout { width: 92%; }
  .topbar__pea { display: none; }
  .topbar__cta { padding: 8px 11px; font-size: 0.75rem; }
  .brand { font-size: 1.125rem; }
  .menubar { padding: 0 10px; gap: 8px; }
  .menubar__left { gap: 8px; }
  .desktop__body { padding: 10px; }
  .popover { padding: 14px; }
  .popover__pea img { width: 58px; height: 58px; }
  .popover__line { font-size: 0.84375rem; }
  .culprit__note { display: none; }
  .demo-console { gap: 8px; padding: 10px; }
  .demo-console input[type="range"] { flex: 1 1 100%; }
  .poke-btn { width: 100%; }
  .blame-card { padding: 18px; box-shadow: 5px 5px 0 var(--ink); }
  .blame-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .quit-btn { grid-column: 3; }
  .blame-row__pct { grid-column: 3; grid-row: 1; }
  .quit-btn { grid-row: 2; justify-self: end; }
  .faces-grid { gap: 10px; }
  .face-card { padding: 12px 9px; border-radius: 16px; }
  .face-card p { font-size: 0.75rem; }
  .rest-card { padding: 14px; box-shadow: 6px 6px 0 var(--pea); }
  .rest-ring { width: 200px; }
  .share-card { padding: 18px; box-shadow: 7px 7px 0 var(--pea); transform: rotate(-2deg); }
  .share-card__number { font-size: 3.375rem; }
  .plan { padding: 20px; }
  .privacy-map { padding: 16px 14px 46px; }
  .final__pea img { width: 124px; }
}
@media (max-width: 380px) {
  /* Keep all three topbar controls on one line: tighten, never wrap the primary action. */
  .topbar__inner { gap: 8px; }
  .brand { gap: 6px; font-size: 1rem; }
  .brand__pea { width: 22px; height: 22px; }
  .nav-menu__toggle { padding: 8px 10px; }
  .topbar__cta { padding: 8px 9px; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; width: 100%; }
  .ticker__pause { display: none; }
  .ticker__group:nth-child(2) { display: none; }
  .ticker__group { flex-wrap: wrap; justify-content: center; }
  .drops, .steam { display: none; }

  /* The pea still moves through the four states, but as a plain cross-fade: no hop, no squash,
     no drift. Apple's own substitution for Reduce Motion. */
  .pea-img.is-active,
  .companion__img.is-active {
    animation: face-fade-in .8s linear both !important;
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    filter: var(--shadow);
  }
  .pea-img.is-leaving,
  .companion__img.is-leaving {
    animation: face-fade-out .6s linear both !important;
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    filter: var(--shadow);
  }
  @keyframes face-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes face-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

/* ---------- Input and preference adaptations ---------- */
/* Fingers get the platform's 44px target, without changing the look for a mouse. */
@media (pointer: coarse) {
  .topbar__cta,
  .nav-menu__toggle,
  .ticker__pause,
  .mini-btn,
  .quit-btn,
  .poke-btn,
  .footer__nav a,
  .footer__legal a {
    min-height: 44px;
  }
  .ticker__pause { width: 44px; height: 44px; }
  .nav-menu__panel a { min-height: 44px; display: flex; align-items: center; }
  .demo-console input[type="range"] { height: 44px; }
  .demo-console input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .demo-console input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
}

/* Increased contrast: keep the palette, darken what carries text and strengthen the edges. */
@media (prefers-contrast: more) {
  :root {
    --muted: #3A4633;
    --line: #8B977C;
    --ink-2: #1D2918;
  }
  .footer__line,
  .footer__nav a,
  .footer__bottom,
  .footer__legal a { color: rgba(243, 240, 228, .9); }
  .final p { color: rgba(243, 240, 228, .9); }
  .plan__fine,
  .plan__terms,
  .plan__list--pro li { color: rgba(243, 240, 228, .95); }
  .btn, .plan, .popover, .face-card, .rest-card, .share-card, .privacy-map { border-width: 2.5px; }
}

/* Windows High Contrast / forced colours: backgrounds are stripped, so redraw the edges. */
@media (forced-colors: active) {
  .btn,
  .plan,
  .popover,
  .face-card,
  .rest-card,
  .share-card,
  .privacy-map,
  .nav-menu__panel,
  .nav-menu__toggle,
  .ticker__pause { border: 2px solid ButtonText; }
  .meter span,
  .bar span,
  .heatline span { background: Highlight; }
  .ticker__pause span { color: ButtonText; }
}

/* ---------- Launch pass: download-first hero, Vitals, Product Hunt ---------- */

.hero__fine {
  margin: 14px 0 0;
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ph-hello {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
.ph-hello[hidden] { display: none; }

.blame-grid--flip > .blame-copy { order: 2; }
.vitals-card__meters { display: grid; gap: 10px; margin: 0 0 4px; }
.vitals-card .vitals-row { font-size: 0.8125rem; }
.vitals-card .vitals-row .mono { flex-basis: 62px; }
.vitals-card .vitals-row b { font-size: 0.8125rem; }
.vitals-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.vitals-card__pro {
  padding: 2px 8px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.6875rem;
}
.vitals-card__changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vitals-card__changes > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  font-size: 0.84375rem;
}
.vitals-card__changes .mono { font-size: 0.8125rem; color: var(--muted); }

.privacy-node__second { margin-top: 16px; }

.real-shot { margin: clamp(30px, 4vw, 48px) auto 0; max-width: 520px; text-align: center; }
.real-shot img { width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); }
.real-shot figcaption { margin-top: 14px; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.companion.is-hushed { opacity: 0; translate: 0 26px; pointer-events: none; }

@media (max-width: 900px) {
  .blame-grid--flip > .blame-copy { order: 0; }
}
@media (max-width: 560px) {
  .vitals-card { padding: 18px; box-shadow: 5px 5px 0 var(--ink); }
  .vitals-card__changes { grid-template-columns: 1fr; }
  .vitals-card__changes > span { flex-direction: row; justify-content: space-between; }
}