/* ============================================================
   Quiet Automation

   Editorial split hero, gapless bento proof band, pinned horizontal
   automation gallery, velocity-driven capability marquee, a stacking
   pricing deck and a horizontal accordion process.

   Motion is GSAP ScrollTrigger, defined in /js/main.js. This file owns
   the resting state and the reduced-motion contract only.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* auto, not smooth: main.js does its own offset scrolling, and native
     smooth scrolling into a ScrollTrigger pin loses the pin position. */
  scroll-behavior: auto;
}

body {
  margin: 0;
  position: relative;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out);
}

/* Off-screen animation origins must never widen the document. */
main {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-head);
  margin: 0;
  text-wrap: balance;
}

h1 em, h2 em, h3 em { font-style: normal; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 var(--radius-input) 0;
}
.skip:focus { left: 0; }

/* The nav floats over the page, so anything the browser scrolls to on
   its own — a restored #hash, a focused target — has to keep clear of
   it. main.js applies the same offset to in-page clicks. */
section[id], [id]:target { scroll-margin-top: 6rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

/* ============================================================
   Ambient layers. Deep radial washes, never a flat block.
   ============================================================ */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, var(--color-accent-wash), transparent 60%),
    radial-gradient(45rem 35rem at 92% 8%, var(--color-accent-wash), transparent 55%);
  opacity: 0.85;
}

/* The brand field backs the entire document: fixed to the viewport,
   behind everything, never interactive. Decorative, so if WebGL is
   missing the script bails and the page is unchanged. */
.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-under);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.field.is-live { opacity: 1; }

/* A trace of grain over everything. Barely perceptible on its own, but
   it stops the large flat fields reading as flat vector colour. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-raised);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="day"] .grain { opacity: 0.022; }

.nav, main, .footer { position: relative; z-index: var(--z-base); }

/* ============================================================
   Navigation: floating glass pill
   ============================================================ */

.nav {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-sticky-nav);
  width: min(100% - 1.75rem, var(--wrap));
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 0.6rem 0.7rem 0.6rem 1.15rem;
  border-radius: var(--radius-pill);
  border: var(--rule-hair) solid transparent;
  background: transparent;
  transition:
    background var(--dur-long) var(--ease-out),
    border-color var(--dur-long) var(--ease-out),
    box-shadow var(--dur-long) var(--ease-out);
}

.nav.is-scrolled .nav-inner {
  background: color-mix(in oklab, var(--color-paper) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-color: var(--color-rule);
  box-shadow: var(--shadow-raised);
}

/* Reading progress, drawn along the bottom edge of the pill. */
.nav-progress {
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
.nav.is-scrolled .nav-progress { opacity: 1; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

/* The mark: the same dial and dot the favicon has always drawn. */
.brand-mark {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}
.brand-mark::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--color-accent-ink) 55%, transparent);
  transform: translateY(-50%);
}
.brand-mark::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-ink);
  transform: translateY(-50%);
}

.nav-side { display: flex; align-items: center; gap: var(--space-lg); }

.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-links a {
  position: relative;
  padding: 0.42rem 0.72rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 450;
  color: var(--color-ink-2);
  transition: color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav-links a.is-active { color: var(--color-ink); background: var(--color-paper-3); }

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

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-ink);
  cursor: pointer;
  transition:
    background var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}
.icon-btn:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.mode .moon { display: none; }
html[data-theme="night"] .mode .sun { display: none; }
html[data-theme="night"] .mode .moon { display: block; }

.nav-burger { display: none; }
.nav-burger span {
  display: block;
  width: 17px;
  height: 1.6px;
  margin: 2.2px 0;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(3.8px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-3.8px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.5rem;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklab, var(--color-paper) 94%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lifted);
}
.nav-mobile a {
  padding: 0.7rem 0.6rem;
  border-radius: var(--radius-input);
  font-size: var(--text-lg);
  font-weight: 450;
}
.nav-mobile a:hover { background: var(--color-paper-2); }
.nav-mobile .btn { margin-top: var(--space-sm); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 550;
  letter-spacing: -0.005em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur-short) var(--ease-out),
    background var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-lg { padding: 0.95rem 1.7rem; font-size: var(--text-md); }
.btn-block { width: 100%; }

/* The primary action is the brand green, in both themes. */
.btn-solid {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn-solid:hover {
  background: var(--color-accent-2);
  box-shadow: var(--shadow-raised);
}

.btn-ghost { background: transparent; border-color: var(--color-rule); color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }

/* On the dark bands the green lifts so the label still reads. */
.section-deep .btn-solid,
.cta .btn-solid,
.audit .btn-solid,
.page-hero .btn-solid,
.hero .btn-solid {
  background: var(--color-accent-deep);
  color: #0E1310;
}
.section-deep .btn-solid:hover,
.cta .btn-solid:hover,
.audit .btn-solid:hover,
.page-hero .btn-solid:hover,
.hero .btn-solid:hover { background: #A8D2C5; }

.btn-onDeep { background: transparent; border-color: var(--color-deep-rule); color: var(--color-deep-ink); }
.btn-onDeep:hover { background: var(--color-deep-hover); border-color: var(--color-deep-muted); }

/* The hero sits on paper in day mode, so its secondary button follows
   the page rather than the deep band. */
html[data-theme="day"] .hero .btn-solid { background: var(--color-accent); color: var(--color-accent-ink); }
html[data-theme="day"] .hero .btn-solid:hover { background: var(--color-accent-2); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--color-accent);
  transition: gap var(--dur-short) var(--ease-out);
}
.link-arrow::after { content: "\2192"; }
.link-arrow:hover { gap: 0.65rem; }
.link-arrow.subtle { color: var(--color-muted); }

/* ============================================================
   Sections
   ============================================================ */

.section { padding-block: var(--space-section); }
.section-tight { padding-block: var(--space-section-tight); }
.section-quiet { background: var(--color-paper-2); }

.section-deep {
  background: var(--color-deep);
  color: var(--color-deep-ink);
  background-image: radial-gradient(50rem 30rem at 80% 0%, var(--color-deep-wash), transparent 65%);
}
.section-deep h2, .section-deep h3 { color: var(--color-deep-ink); }
.section-deep p { color: var(--color-deep-muted); }

.section-head { max-width: 62rem; margin-bottom: var(--space-3xl); }
.section-head h2 { font-size: var(--text-3xl); }
.section-head em { font-style: normal; color: var(--color-accent); }
.section-deep .section-head em,
.audit .section-head em,
.cta em { color: var(--color-accent-deep); }

.section-intro {
  margin-top: var(--space-lg);
  max-width: 46rem;
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.section-deep .label, .audit .label { color: var(--color-deep-muted); }

/* ============================================================
   Hero: editorial split. Statement left, the work running itself
   on the right, and a great deal of nothing in between.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(8rem, 15vh, 12rem);
  padding-bottom: var(--space-section-tight);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
}

.hero-copy { max-width: 40rem; }

.hero h1 {
  margin-top: var(--space-lg);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 500;
}
.hero h1 em { font-style: normal; color: var(--color-muted); }

.hero .lede {
  margin-top: var(--space-xl);
  max-width: 34rem;
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.hero .cta-row { margin-top: var(--space-xl); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-live);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-live) 22%, transparent);
}

/* Right column: the running ledger and the brief it produces, as two
   real planes in a perspective scene rather than flat cards. */
.hero-stack {
  position: relative;
  min-height: clamp(24rem, 46vw, 36rem);
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.hero-panel {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-card);
  box-shadow: var(--shadow-lifted);
}
.hero-panel:nth-child(1) { inset: 0 24% 42% 0; z-index: 2; }
.hero-panel:nth-child(2) { inset: 60% 0 0 32%; z-index: 1; }

/* ---------- The ledger ---------- */

.ledger { display: flex; flex-direction: column; height: 100%; }

.ledger-head,
.ledger-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: 0.9rem 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.ledger-head { border-bottom: var(--rule-hair) solid var(--color-rule); }
.ledger-foot {
  border-top: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  align-items: baseline;
}
.ledger-head .live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-accent); }
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.ledger-body { flex: 1 1 auto; overflow: hidden; }

.lrow {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3.1rem;
  padding: 0.35rem 1.2rem 0.35rem 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.lrow:last-child { border-bottom: none; }
.lrow .num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.lrow .task { font-size: var(--text-sm); line-height: 1.35; }
.lrow .task small { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-muted); }

.stamp {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.stamp.pop { animation: stampIn 320ms var(--ease-out) both; }
@keyframes stampIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pending { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-muted); }

.ledger-foot .val {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-figure);
  text-transform: none;
}

/* ---------- The brief panel behind it ---------- */

.mini-brief { padding: 1.1rem 1.2rem 1.3rem; }
.mini-brief-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.mini-brief h3 { margin-top: 0.7rem; font-size: var(--text-lg); }
.mini-brief p { margin-top: 0.3rem; font-size: var(--text-sm); color: var(--color-muted); }
.mini-brief .hrs {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-figure);
}

/* ============================================================
   Proof: gapless bento.
   12 columns. Row one is 7 + 5, row two is 5 + 7. Both rows total
   exactly 12, so the grid closes with no dead cell.
   ============================================================ */

.proof { padding-block: var(--space-section-tight); }

.proof-bento {
  perspective: 1400px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: var(--rule-hair);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-rule);
}

.proof-bento li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-xs);
  min-height: clamp(10rem, 16vw, 14rem);
  padding: clamp(1.4rem, 2.3vw, 2.3rem);
  background: var(--color-card);
  transition: background var(--dur-long) var(--ease-out);
}
.proof-bento li:hover { background: var(--color-paper-2); }

.proof-bento li:nth-child(1) { grid-column: span 7; }
.proof-bento li:nth-child(2) { grid-column: span 5; }
.proof-bento li:nth-child(3) { grid-column: span 5; }
.proof-bento li:nth-child(4) { grid-column: span 7; }

.proof-bento strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
}
.proof-bento span { font-size: var(--text-sm); color: var(--color-muted); max-width: 34ch; }

/* ============================================================
   The audit. The only interactive thing on the page that does
   real work, so it gets the darkest surface and the most air.
   ============================================================ */

.audit {
  padding-block: var(--space-section);
  color: var(--color-deep-ink);
  background: color-mix(in oklab, var(--color-deep) 94%, transparent);
  background-image:
    radial-gradient(45rem 30rem at 12% 0%, var(--color-deep-wash), transparent 60%),
    radial-gradient(42rem 28rem at 88% 100%, var(--color-deep-wash), transparent 60%);
}
.audit h2 { color: var(--color-deep-ink); }
.audit .section-head { max-width: 44rem; margin-inline: auto; margin-bottom: var(--space-xl); text-align: center; }
.audit .section-head h2 { font-size: clamp(1.9rem, 1.2rem + 2.1vw, 2.9rem); }
.audit .section-intro { margin-inline: auto; color: var(--color-deep-muted); }

.desk {
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border: var(--rule-hair) solid var(--color-deep-rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-lifted);
  overflow: hidden;
}

.desk-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: 0.9rem 1.2rem;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.desk-progress { display: flex; gap: 0.35rem; }
.pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-rule);
  transition: background var(--dur-long) var(--ease-out);
}
.pip.done { background: var(--color-accent); }

.desk-body {
  height: 22rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 1.4rem 1.2rem;
}

.msg {
  max-width: 84%;
  padding: 0.75rem 1.05rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.55;
  animation: msgIn 320ms var(--ease-out) both;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.msg.ai { align-self: flex-start; background: var(--color-paper-2); border-bottom-left-radius: 6px; }
.msg.ai .who {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.msg.user {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-bottom-right-radius: 6px;
}
.msg.error {
  align-self: flex-start;
  border-radius: var(--radius-input);
  background: color-mix(in oklab, #C4573C 14%, transparent);
  color: #C4573C;
}
html[data-theme="night"] .msg.error { color: #E5AC9C; }

.typing {
  align-self: flex-start;
  display: flex;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-lg);
  border-bottom-left-radius: 6px;
  background: var(--color-paper-2);
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.brief {
  align-self: stretch;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  overflow: hidden;
  animation: msgIn 380ms var(--ease-out) both;
}
.brief-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1rem;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.brief-body { padding: 1.1rem 1rem; }
.brief-body h3 { font-size: var(--text-lg); }
.brief-body > p { margin-top: 0.4rem; margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

.opp {
  margin-bottom: 0.55rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
}
.opp-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.opp b { font-size: var(--text-sm); font-weight: 600; }
.opp .hrs { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-figure); white-space: nowrap; }
.opp p { margin-top: 0.2rem; font-size: var(--text-sm); color: var(--color-muted); }

.brief-open {
  margin-top: var(--space-sm);
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-input);
  background: var(--color-accent-wash);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.brief-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 1rem;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.2rem 1rem; }
.chip {
  padding: 0.42rem 0.85rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.chip:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-wash); }

.desk-input {
  display: flex;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.desk-input textarea {
  flex: 1;
  resize: none;
  min-height: 3rem;
  max-height: 8rem;
  padding: 0.75rem 1rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.desk-input textarea::placeholder { color: var(--color-muted); }
.desk-input textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
.send {
  flex: none;
  width: 3.1rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-input);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.send:hover:not(:disabled) { transform: translateY(-2px); background: var(--color-accent-2); }
.send:disabled { opacity: 0.45; cursor: not-allowed; }
.send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.audit-note {
  max-width: 46rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--color-deep-muted);
  text-align: center;
}
.audit-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Automations: pinned horizontal gallery.

   The section holds still and the work travels sideways across it,
   so scrolling reads as moving along a shelf rather than down a list.
   Below the breakpoint, and with no JS, it degrades to a plain grid.
   ============================================================ */

.section-work { position: relative; padding-block: var(--space-section-tight); }

.hscroll-viewport {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
}
.hscroll-head { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.hscroll-head .section-head { margin-bottom: 0; max-width: 46rem; }
.hscroll-head .section-head h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); }
.hscroll-head .section-intro { margin-top: var(--space-md); max-width: 40rem; font-size: var(--text-md); }

.hscroll-track {
  display: flex;
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
  padding-inline: max(2.5rem, calc((100vw - var(--wrap)) / 2));
  will-change: transform;
}
.hscroll-track .auto { flex: 0 0 clamp(18rem, 26vw, 22rem); max-width: 88vw; }
.hscroll-track .auto-desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-height: 900px) {
  .hscroll-track .auto-desc { -webkit-line-clamp: 4; }
}

@media (max-height: 880px) {
  .hscroll-head .section-head h2 { font-size: clamp(1.8rem, 1rem + 2vw, 2.6rem); }
  .hscroll-head .section-intro { display: none; }
}

/* Without the pin the row simply wraps and reads as a grid. */
html:not(.js) .hscroll-track,
.no-hscroll .hscroll-track { flex-wrap: wrap; padding-inline: 0; }
html:not(.js) .hscroll-viewport,
.no-hscroll .hscroll-viewport {
  min-height: 0;
  overflow: visible;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
html:not(.js) .hscroll-track .auto,
.no-hscroll .hscroll-track .auto { flex: 1 1 18rem; }

/* Each card is its own little stage, so a card rotating in depth does
   not drag its neighbours' vanishing points around with it. */
.hscroll-track { perspective: 1600px; }

.auto {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  transform-style: preserve-3d;
  transition:
    transform var(--dur-long) var(--ease-out),
    border-color var(--dur-long) var(--ease-out),
    box-shadow var(--dur-long) var(--ease-out);
}
.auto:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lifted); }

.auto-plate {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-input);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transition: transform var(--dur-long) var(--ease-out);
}
.auto:hover .auto-plate { transform: translateY(-3px) rotate(-4deg); }
.auto-plate svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.auto-kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.auto h3 { font-size: var(--text-xl); }
.auto-desc { flex: 1 1 auto; font-size: var(--text-sm); color: var(--color-muted); }
.auto .hrs {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-figure);
}
.auto .hrs small { display: block; margin-top: 0.2rem; color: var(--color-muted); font-size: 0.72rem; }

/* Cards and panels tilt toward the pointer in real 3D. */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ============================================================
   Capability marquee. The authored list stays real text so it is
   still read and indexed; the looping duplicate is aria-hidden.
   ============================================================ */

.capabilities {
  padding-block: var(--space-section-tight);
  border-block: var(--rule-hair) solid var(--color-rule);
  overflow: hidden;
}

.marquee { display: flex; width: max-content; will-change: transform; }
.marquee.is-driven .marquee-track { animation: none; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding-right: clamp(2rem, 4vw, 4rem);
  animation: marquee 40s linear infinite;
}
.capabilities:hover .marquee-track { animation-play-state: paused; }

.marquee-track li {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  white-space: nowrap;
}
.marquee-track li::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: clamp(2rem, 4vw, 4rem);
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ============================================================
   Pricing: the deck stacks.

   Each card sticks and the one behind it shrinks and dims as the
   next arrives, so the pricing reads as depth rather than as three
   cards that happen to sit in a row.
   ============================================================ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-lg);
  perspective: 1500px;
}
.plans[data-stack] {
  display: block;
  max-width: 52rem;
  margin-inline: auto;
  perspective: 1800px;
}
.plans[data-stack] .plan {
  position: sticky;
  top: clamp(7rem, 16vh, 11rem);
  margin-bottom: var(--space-xl);
  transform-origin: 50% 0%;
  box-shadow: var(--shadow-lifted);
}
.plans[data-stack] .plan:last-child { margin-bottom: 0; }
.plans[data-stack] .plan:nth-child(1) { z-index: 1; }
.plans[data-stack] .plan:nth-child(2) { z-index: 2; }
.plans[data-stack] .plan:nth-child(3) { z-index: 3; }
.plans[data-stack] .plan:nth-child(4) { z-index: 4; }
.plans[data-stack] .plan:nth-child(5) { z-index: 5; }

@media (max-width: 900px) {
  .plans[data-stack] .plan { position: static; box-shadow: var(--shadow-raised); }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  transition: transform var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out);
}
.plan:hover { box-shadow: var(--shadow-lifted); }
.plan-featured { border-color: var(--color-accent); }

.plan-tag {
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 550;
}
.plan h3 { margin-top: var(--space-md); font-size: var(--text-xl); }

.plan-price {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
}
.plan-unit { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; }
.plan-monthly { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-figure); }
.plan-blurb { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

.check { display: flex; flex-direction: column; gap: 0.55rem; margin-top: var(--space-lg); }
.check li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 5px;
  border-left: 1.8px solid var(--color-accent);
  border-bottom: 1.8px solid var(--color-accent);
  transform: rotate(-45deg);
}

.plan .btn { margin-top: auto; }
.plan .check { margin-bottom: var(--space-lg); }
.plan-foot { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }

.plans-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: 52rem;
  margin: var(--space-3xl) auto 0;
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.plans-foot p { max-width: 38rem; font-size: var(--text-sm); color: var(--color-muted); }

/* ============================================================
   Process: horizontal accordion. Three vertical slices that widen
   on hover or keyboard focus. Stacks below the breakpoint, where
   hovering is not a thing that happens.
   ============================================================ */

.steps {
  display: flex;
  gap: var(--rule-hair);
  border: var(--rule-hair) solid var(--color-deep-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-deep-rule);
  min-height: clamp(16rem, 23vw, 20rem);
}

/* Four tracks: index, an elastic spacer, title, body. At rest the
   spacer owns all the slack and the body is zero-height, so the title
   sits on the floor of the slice with no dead air under it. On open
   the slack transfers to the body: the title rises and the copy grows
   into the space it vacated. */
.steps li {
  position: relative;
  flex: 1 1 0;
  display: grid;
  grid-template-rows: auto 1fr auto 0fr;
  padding: clamp(1.4rem, 2.5vw, 2.4rem);
  background: var(--color-deep);
  cursor: default;
  transition:
    flex-grow 700ms var(--ease-out),
    grid-template-rows 700ms var(--ease-out),
    background 700ms var(--ease-out);
}
.steps li .step-index { grid-row: 1; }
.steps li h3 { grid-row: 3; }
.steps li .step-body { grid-row: 4; min-height: 0; overflow: hidden; }

.steps li:hover, .steps li:focus-within {
  flex-grow: 2.6;
  grid-template-rows: auto 0fr auto 1fr;
  background: var(--color-deep-2);
}

.steps li .step-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-deep);
}
.steps li h3 { font-size: var(--text-xl); color: var(--color-deep-ink); }
.steps li .step-body {
  max-width: 34ch;
  opacity: 0;
  transition: opacity 450ms var(--ease-out), margin-top 700ms var(--ease-out);
}
.steps li:hover .step-body, .steps li:focus-within .step-body { opacity: 1; margin-top: var(--space-md); }
.steps li p { font-size: var(--text-sm); color: var(--color-deep-muted); }
.steps li .dur {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 0.24rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-deep-hair);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-deep-muted);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.faq-grid h2 { font-size: clamp(1.9rem, 1.2rem + 2.1vw, 2.9rem); }
.faq-grid em { font-style: normal; color: var(--color-accent); }

.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 450;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.8px solid var(--color-muted);
  border-bottom: 1.8px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-short) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { max-width: 60ch; color: var(--color-muted); }
.faq details p:last-of-type { padding-bottom: var(--space-lg); }
.faq details p + p { margin-top: var(--space-sm); }
.faq details a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.faq-note { margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }

/* ============================================================
   Closing CTA. Deliberately translucent: the field's last beat
   reforms whole behind exactly this section.
   ============================================================ */

.cta {
  padding-block: var(--space-section);
  color: var(--color-deep-ink);
  background: color-mix(in oklab, var(--color-deep) 88%, transparent);
  background-image:
    radial-gradient(45rem 30rem at 15% 100%, var(--color-deep-wash), transparent 60%),
    radial-gradient(40rem 28rem at 88% 0%, var(--color-deep-wash), transparent 60%);
}
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.cta h2 { font-size: var(--text-3xl); color: var(--color-deep-ink); }
.cta-inner > div > p { margin-top: var(--space-lg); max-width: 44rem; color: var(--color-deep-muted); }
.cta .cta-row { margin-top: var(--space-xl); }

.cta-card {
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border: var(--rule-hair) solid var(--color-deep-rule);
  border-radius: var(--radius-lg);
  background: var(--color-deep-hair);
}
.panel-title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-deep-ink); }
.cta-card .check li { color: var(--color-deep-muted); }
.cta-card .check li::before { border-color: var(--color-accent-deep); }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  padding-block: var(--space-3xl) var(--space-xl);
  background: var(--color-paper-2);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.footer-tagline { margin-top: var(--space-sm); max-width: 32ch; color: var(--color-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: flex-start; }
.footer-links a { font-size: var(--text-sm); color: var(--color-muted); }
.footer-links a:hover { color: var(--color-ink); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-xl);
}
.footer-bottom p { font-size: var(--text-xs); color: var(--color-muted); }
.footer-note { max-width: 60ch; }

/* ============================================================
   Inner pages: privacy, terms
   ============================================================ */

.page-hero {
  padding-top: clamp(9rem, 15vh, 12rem);
  padding-bottom: var(--space-section-tight);
  background: var(--color-deep);
  color: var(--color-deep-ink);
  background-image: radial-gradient(50rem 32rem at 78% 0%, var(--color-deep-wash), transparent 62%);
}
.page-hero h1 { font-size: var(--text-3xl); max-width: 20ch; }
.page-hero .label { color: var(--color-deep-muted); }
.page-updated { margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-deep-muted); }

.prose { max-width: var(--wrap-narrow); }
.prose h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  font-size: var(--text-xl);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-ink-2); }
.prose p { margin-bottom: var(--space-md); }
.prose ul { margin: 0 0 var(--space-md) 1.3rem; list-style: disc; }
.prose ul ul { margin-top: var(--space-xs); margin-bottom: 0; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; color: var(--color-ink); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}
.prose th, .prose td {
  border: var(--rule-hair) solid var(--color-rule);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  color: var(--color-ink-2);
}
.prose th { font-weight: 600; background: var(--color-paper-2); color: var(--color-ink); }

/* ============================================================
   Motion contract

   GSAP owns the entrance. These are the resting states it animates
   FROM, applied only when JavaScript is running, so a no-JS visitor
   sees a complete page rather than a blank one.
   ============================================================ */

html.js .reveal { opacity: 0; will-change: transform, opacity; }
html.js .reveal.is-in { opacity: 1; }

/* Headings wipe up from behind their own edge. Applied as a clip
   rather than by splitting the text into lines, so nested markup —
   the accent em — survives intact. */
html.js .wipe { clip-path: inset(102% 0 0 0); will-change: clip-path, transform; }
html.js .wipe.is-in { clip-path: inset(0% 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  html.js .wipe { clip-path: none !important; }
  .grain, .field { display: none; }
  .hero-panel, .auto, .plan, .tilt { transform: none !important; }
  .marquee-track { animation: none; }
  .steps li { grid-template-rows: auto 0fr auto auto; }
  .steps li .step-body { opacity: 1; margin-top: var(--space-md); }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .hero-stack { min-height: clamp(20rem, 58vw, 28rem); }
  .cta-inner, .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-mobile { display: flex; }
  .nav-mobile[hidden] { display: none; }

  .proof-bento li:nth-child(n) { grid-column: span 6; }

  /* No hover on a phone, so every slice is simply open. */
  .steps { flex-direction: column; min-height: 0; }
  .steps li { flex: none; grid-template-rows: auto 0fr auto auto; }
  .steps li .step-body { opacity: 1; max-width: none; margin-top: var(--space-md); }
}

/* On a phone the two panels carry the same text in a column a third of
   the width. Absolute placement can only clip it, so they go back into
   normal flow and keep their depth from the scroll swing alone. */
@media (max-width: 760px) {
  .hero-stack {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .hero-panel { position: static; }
  .hero-panel:nth-child(1) { margin-right: 8%; }
  .hero-panel:nth-child(2) { margin-left: 12%; }
}

@media (max-width: 620px) {
  .nav-actions .btn { display: none; }
  .proof-bento li:nth-child(n) { grid-column: span 12; }
  .plans-foot { flex-direction: column; align-items: flex-start; }
  .desk-body { height: 18rem; }
  .msg { max-width: 92%; }
}