/* Shocase — marketing site
   Built from the Paperwork design system (claude.ai/design · Shocase Marketing v2).
   Warm paper, black ink, hairline rules. One muted navy reserved for selection. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --sc-paper:   #FAF9F6;
  --sc-surface: #FFFFFF;
  --sc-inset:   #F1EFEA;
  --sc-sidebar: #F5F3EE;
  --sc-overlay: rgba(25, 24, 21, 0.34);

  /* Ink */
  --sc-ink:   #191815;
  --sc-ink-2: #5C5952;
  --sc-ink-3: #8E8A81;

  /* Rules */
  --sc-rule:   #E5E1D9;
  --sc-rule-2: #D2CCC1;

  /* Selection — checked, focused, links. Never a button or a heading. */
  --sc-sel:      #2C4C7A;
  --sc-sel-soft: #EAEFF6;

  /* Status */
  --sc-live: #3F6B4F;
  --sc-work: #B07D2B;
  --sc-idle: #9B968D;
  --sc-warn: #8F3A2F;

  /* Type */
  --sc-display: 'Cabinet Grotesk', Georgia, serif;
  --sc-ui: 'General Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sc-mono: 'SFMono-Regular', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Radius */
  --sc-r-1: 4px;
  --sc-r-2: 6px;
  --sc-r-3: 10px;
  --sc-pill: 9999px;

  /* Elevation */
  --sc-lift: 0 1px 2px rgba(25, 24, 21, .05);
  --sc-pop:  0 18px 44px rgba(25, 24, 21, .16), 0 2px 6px rgba(25, 24, 21, .06);

  /* Motion */
  --sc-ease: cubic-bezier(.2, .7, .3, 1);
  --sc-fast: 120ms;
  --sc-base: 180ms;
}

[data-theme='dark'] {
  --sc-paper:   #1A1917;
  --sc-surface: #211F1C;
  --sc-inset:   #262421;
  --sc-sidebar: #161513;
  --sc-overlay: rgba(0, 0, 0, 0.58);

  --sc-ink:   #F2F0EA;
  --sc-ink-2: #A9A49A;
  --sc-ink-3: #7B766D;

  --sc-rule:   rgba(255, 255, 255, 0.10);
  --sc-rule-2: rgba(255, 255, 255, 0.20);

  --sc-sel:      #9BB8DD;
  --sc-sel-soft: rgba(155, 184, 221, 0.14);

  --sc-live: #7FA98A;
  --sc-work: #D2A257;
  --sc-idle: #837E75;
  --sc-warn: #D08579;

  --sc-lift: 0 1px 2px rgba(0, 0, 0, .5);
  --sc-pop:  0 24px 60px rgba(0, 0, 0, .66), 0 2px 6px rgba(0, 0, 0, .4);
}

[data-theme='light'] {
  --sc-live: #2E7D4F;
  --sc-work: #9A6410;
  --sc-idle: #6E6961;
  --sc-warn: #A33325;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--sc-paper); }
body {
  color: var(--sc-ink);
  font-family: var(--sc-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--sc-sel); text-decoration: none; }
a:hover { color: var(--sc-sel); text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--sc-sel-soft); }
img { max-width: 100%; }

.sc-logo-ink, .sc-logo-white { display: block; }
.sc-logo-white { display: none; }
[data-theme='dark'] .sc-logo-white { display: block; }
[data-theme='dark'] .sc-logo-ink { display: none; }

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

.container { max-width: 1010px; margin: 0 auto; padding-left: clamp(20px, 4.2vw, 32px); padding-right: clamp(20px, 4.2vw, 32px); }

/* ---------- Components ---------- */
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 31px;
  padding: 0 15px;
  border-radius: var(--sc-r-2);
  font-family: var(--sc-ui);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--sc-fast) var(--sc-ease), border-color var(--sc-fast) var(--sc-ease);
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn-primary {
  border: 1px solid var(--sc-ink);
  background: var(--sc-ink);
  color: var(--sc-paper);
}
.btn-primary:hover { color: var(--sc-paper); }
.btn-secondary {
  border: 1px solid var(--sc-rule-2);
  background: var(--sc-surface);
  color: var(--sc-ink);
}
.btn-secondary:hover { color: var(--sc-ink); border-color: var(--sc-ink); opacity: 1; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14px; font-weight: 600; }

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sc-rule);
  border-radius: var(--sc-r-3);
  background: var(--sc-surface);
  box-shadow: var(--sc-lift);
  transition: border-color var(--sc-base) var(--sc-ease);
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.status-dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
  flex-shrink: 0;
}
.status-live { color: var(--sc-live); }
.status-work { color: var(--sc-work); }
.status-idle { color: var(--sc-idle); }
.status-warn { color: var(--sc-warn); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--sc-rule);
  background: var(--sc-paper);
}
.nav-inner {
  min-height: 61px;
  padding-top: 9px;
  padding-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.nav-left { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.nav-link { color: var(--sc-ink-2); font-size: 13.5px; font-weight: 500; }
.nav-link:hover { color: var(--sc-ink); text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--sc-rule);
  border-radius: var(--sc-r-2);
  background: var(--sc-surface);
  color: var(--sc-ink-2);
  cursor: pointer;
  transition: border-color var(--sc-fast) var(--sc-ease), color var(--sc-fast) var(--sc-ease);
}
.theme-toggle:hover { border-color: var(--sc-rule-2); color: var(--sc-ink); }
.theme-toggle .icon-sun { display: none; }
[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
.nav-logo { display: flex; align-items: center; }
/* The wordmark PNG's spark glyph sits above the text, so the visible
   "shocase" is ~5.7px below the image's geometric center at 27px tall. */
.nav-logo img { height: 27px; width: auto; transform: translateY(-5.5px); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(46px, 7.4vw, 78px); }
.hero h1 {
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: clamp(33px, 8.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.032em;
  margin: 20px 0 0;
  max-width: 880px;
  color: var(--sc-ink);
}
.hero-sub {
  font-size: clamp(15px, 3.6vw, 16.5px);
  line-height: 1.6;
  color: var(--sc-ink-2);
  margin: 22px 0 0;
  max-width: 520px;
  text-wrap: pretty;
}
.hero-rotator {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
  font-size: 20px;
  line-height: 30px;
  color: var(--sc-ink-2);
}
.hero-rotator .slot {
  display: inline-block;
  max-width: 100%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}
.hero-rotator .word {
  display: inline-block;
  line-height: 30px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--sc-sel);
}
.hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-note, .cta-note { font-size: 11.5px; color: var(--sc-ink-3); margin-top: 16px; }
.hero > .container > * { animation: sc-in 480ms var(--sc-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .hero > .container > * { animation: none; }
}

/* ---------- Sections ---------- */
.section { border-bottom: 1px solid var(--sc-rule); }
.section-inset { background: var(--sc-inset); }
.section-sidebar { background: var(--sc-sidebar); }

.kicker {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--sc-rule);
}
.section h2 {
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: clamp(26px, 6.2vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 24px 0 0;
  color: var(--sc-ink);
  text-wrap: pretty;
}

/* Before / after showcase */
.showcase { padding-top: clamp(34px, 5vw, 52px); padding-bottom: clamp(44px, 6.6vw, 68px); }
.showcase-card { padding: 0; overflow: hidden; }
.showcase-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--sc-rule);
  background: var(--sc-inset);
}
.showcase-file svg { color: var(--sc-ink-3); flex-shrink: 0; }
.showcase-file .name { font-size: 13px; font-weight: 500; color: var(--sc-ink); }
.showcase-file .when { margin-left: auto; font-size: 11.5px; color: var(--sc-ink-3); }
.showcase-body { padding: 24px 26px 26px; }
.strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 11px;
}
.strip-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sc-ink-3);
}
.strip-time {
  font-family: var(--sc-mono);
  font-size: 11.5px;
  color: var(--sc-ink-3);
  font-variant-numeric: tabular-nums;
}
.strip { display: flex; gap: 2px; height: 38px; }
.strip .seg { border-radius: var(--sc-r-1); background: var(--sc-rule-2); }
.strip .seg-keep {
  border: 1px solid var(--sc-sel);
  background: var(--sc-sel-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-ink);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
}
.strip .seg-main { justify-content: flex-start; padding: 0 12px; font-size: 11.5px; }
.strip .seg-rest { background: none; border: 1px dashed var(--sc-rule-2); }
.strip-note { font-size: 13px; color: var(--sc-ink-2); margin-top: 11px; line-height: 1.6; }
.strip-divider { height: 1px; background: var(--sc-rule); margin: 24px 0; }
.output-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.output-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--sc-r-1);
  border: 1px solid var(--sc-rule);
  background: var(--sc-surface);
  font-size: 12.5px;
  color: var(--sc-ink);
}
.output-chip .count {
  font-family: var(--sc-mono);
  font-size: 10.5px;
  color: var(--sc-ink-3);
}
.showcase-footnote { margin-top: 14px; font-size: 12.5px; color: var(--sc-ink-3); }

/* Logos strip */
.logos {
  padding-top: clamp(24px, 4vw, 30px);
  padding-bottom: clamp(24px, 4vw, 30px);
  display: flex;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
}
.logos-list {
  display: flex;
  align-items: center;
  gap: 14px 30px;
  margin-left: auto;
  flex-wrap: wrap;
}
.logos-list span {
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--sc-ink-3);
}

/* Problem */
.problem { padding-top: clamp(48px, 7.2vw, 76px); padding-bottom: clamp(50px, 7.4vw, 78px); }
.problem h2 { max-width: 760px; }
.problem-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 32px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--sc-rule);
}
.problem-stat .num {
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: clamp(22px, 5vw, 27px);
  letter-spacing: -0.02em;
}
.problem-stat .desc {
  font-size: 13px;
  color: var(--sc-ink-2);
  margin-top: 6px;
  line-height: 1.55;
}

/* Outputs */
.outputs { padding-top: clamp(48px, 7.4vw, 78px); padding-bottom: clamp(54px, 8vw, 84px); }
.outputs h2 { margin-bottom: 38px; }
.outputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.output-card { padding: 26px 26px 0; height: 100%; }
.output-card h3 {
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--sc-ink);
}
.check-list { display: flex; flex-direction: column; gap: 11px; padding-bottom: 26px; }
.check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--sc-ink-2);
  line-height: 1.55;
}
.check-item svg { flex-shrink: 0; margin-top: 3px; color: var(--sc-ink); }
.check-item .ts { color: var(--sc-sel); font-family: var(--sc-mono); font-size: 11px; }

/* How it works */
.steps { padding-top: clamp(48px, 7.4vw, 78px); padding-bottom: clamp(52px, 7.8vw, 82px); }
.steps h2 { max-width: 680px; margin-bottom: 38px; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 28px;
}
.step { padding: 20px 0 24px; border-top: 1px solid var(--sc-rule); }
.step .num { font-family: var(--sc-mono); font-size: 11px; color: var(--sc-ink-3); }
.step .title {
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  margin-top: 10px;
}
.step .desc {
  font-size: 13px;
  color: var(--sc-ink-2);
  margin-top: 7px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Features */
.features { padding-top: clamp(48px, 7.4vw, 78px); padding-bottom: clamp(52px, 7.8vw, 82px); }
.features h2 { max-width: 640px; margin-bottom: 38px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px 40px;
}
.feature .title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.feature .desc {
  font-size: 13px;
  color: var(--sc-ink-2);
  margin-top: 6px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Trust */
.trust { padding-top: clamp(48px, 7.4vw, 78px); padding-bottom: clamp(52px, 7.8vw, 82px); }
.trust h2 { margin: 22px 0 38px; max-width: 680px; }
.trust-rows { border-top: 1px solid var(--sc-rule); }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 40px;
  padding: 15px 0;
  border-bottom: 1px solid var(--sc-rule);
}
.trust-row h3 {
  flex: 0 0 min(300px, 100%);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--sc-ink);
}
.trust-row p {
  flex: 1 1 260px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sc-ink-2);
  margin: 0;
  text-wrap: pretty;
}
.trust-badges {
  display: flex;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sc-rule);
  font-size: 12.5px;
  color: var(--sc-ink-2);
}
.trust-badge { display: inline-flex; align-items: center; gap: 8px; }
.trust-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc-live);
  flex-shrink: 0;
}
.trust-badges .more { margin-left: auto; font-size: 12px; }
.trust-quote {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 56px;
  align-items: flex-end;
  margin-top: 42px;
}
.trust-quote blockquote {
  flex: 1 1 320px;
  margin: 0;
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: clamp(20px, 4.4vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.trust-quote .attrib { flex: 0 1 268px; padding-top: 14px; border-top: 1px solid var(--sc-rule-2); }
.trust-quote .who { font-size: 13px; font-weight: 500; color: var(--sc-ink); }
.trust-quote .org { font-size: 11.5px; color: var(--sc-ink-3); margin-top: 3px; }

/* Teams */
.teams { padding-top: clamp(48px, 7.4vw, 78px); padding-bottom: clamp(52px, 7.8vw, 82px); }
.teams h2 { margin-bottom: 34px; max-width: 700px; }
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 48px;
}
.team { padding: 18px 0; border-top: 1px solid var(--sc-rule); }
.team .title { font-size: 14.5px; font-weight: 600; }
.team .desc { font-size: 13px; color: var(--sc-ink-2); margin-top: 5px; line-height: 1.6; }

/* FAQ */
.faq { padding-top: clamp(48px, 7.4vw, 78px); padding-bottom: clamp(52px, 7.8vw, 82px); }
.faq h2 { margin-bottom: 34px; max-width: 640px; }
.faq-rows { border-top: 1px solid var(--sc-rule); }
.faq-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 40px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sc-rule);
}
.faq-row h3 {
  flex: 0 0 min(300px, 100%);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--sc-ink);
}
.faq-row p {
  flex: 1 1 260px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sc-ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Dark footer with CTA ---------- */
.footer {
  position: relative;
  overflow: hidden;
  background: #191815;
  border-top: 1px solid var(--sc-rule);
}
.footer-mark {
  position: absolute;
  right: -104px;
  bottom: -92px;
  height: 600px;
  width: auto;
  max-width: none;
  opacity: 0.13;
  pointer-events: none;
}
.footer > .container { position: relative; }
.cta { padding-top: clamp(64px, 11vw, 124px); }
.cta h2 {
  font-family: var(--sc-display);
  font-weight: 600;
  font-size: clamp(34px, 8.6vw, 106px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 940px;
  color: #F2F0EA;
  text-wrap: pretty;
}
.cta-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  height: 50px;
  border-radius: var(--sc-r-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: opacity var(--sc-fast) var(--sc-ease), border-color var(--sc-fast) var(--sc-ease);
}
.btn-cta:hover { text-decoration: none; }
.btn-cta-primary {
  padding: 0 26px;
  border: 1px solid #F2F0EA;
  background: #F2F0EA;
  color: #191815;
}
.btn-cta-primary:hover { opacity: 0.88; color: #191815; }
.btn-cta-ghost {
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #F2F0EA;
}
.btn-cta-ghost:hover { border-color: #F2F0EA; color: #F2F0EA; }
.cta-note { font-size: 12px; color: #7B766D; margin-top: 20px; }
.cta-note a { color: #9BB8DD; }

.footer-grid {
  margin-top: clamp(64px, 9vw, 104px);
  padding-top: clamp(40px, 6vw, 52px);
  padding-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 36px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer .eyebrow { color: #7B766D; }
.footer-brand img { height: 29px; width: auto; }
.footer-brand .tagline {
  font-size: 12.5px;
  line-height: 1.6;
  color: #A9A49A;
  max-width: 220px;
  margin: 14px 0 0;
  text-wrap: pretty;
}
.footer-col .links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12.5px;
  margin-top: 14px;
}
.footer-col .links a { color: #A9A49A; }
.footer-col .links a:hover { color: #F2F0EA; text-decoration: none; }
.footer-legal {
  padding: 18px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 11.5px;
  color: #7B766D;
}
.footer-legal .links { display: flex; gap: 20px; }
.footer-legal a { color: #7B766D; }
.footer-legal a:hover { color: #F2F0EA; text-decoration: none; }

/* ---------- Mobile design (Shocase Marketing v2 - Mobile) ---------- */
/* Helpers: .m-only elements exist only below the breakpoint, .d-only above it. */
.m-only { display: none; }
.acc-head { display: contents; }
.chev { display: none; }
.btn-cta-ghost .arrow { display: none; }
.mobile-menu { display: none; }

@media (max-width: 640px) {
  .d-only { display: none !important; }
  .m-only { display: revert; }

  body { padding-bottom: 104px; }

  /* Nav */
  .nav-inner { min-height: 54px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
  .nav-links { display: none; }
  .nav-logo img { height: 24px; transform: translateY(-5px); }
  .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sc-ink);
    cursor: pointer;
  }
  .nav.menu-open .mobile-menu {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--sc-rule);
    padding: 4px 20px 14px;
    animation: sc-in 180ms var(--sc-ease);
  }
  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--sc-ink);
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--sc-rule);
  }
  .mobile-menu a:hover { text-decoration: none; }
  .mobile-menu a.signin { color: var(--sc-ink-2); border-bottom: 0; }

  /* Hero */
  .hero { padding-top: 30px; padding-bottom: 26px; }
  .hero h1 { font-size: 34px; line-height: 0.99; letter-spacing: -0.035em; margin: 0; }
  .hero-sub { font-size: 14.5px; line-height: 1.55; margin-top: 16px; }
  .hero-rotator { font-size: 14.5px; line-height: 1.5; margin-top: 18px; }
  .hero-rotator .slot { height: 22px; line-height: 22px; }
  .hero-rotator .word { line-height: 22px; }
  .hero-see {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    min-height: 44px;
    color: var(--sc-sel);
    font-size: 14px;
    font-weight: 600;
  }
  .hero-see:hover { text-decoration: none; }

  /* Section rhythm */
  .section h2 { font-size: 23px; line-height: 1.1; margin: 12px 0 0; }
  .kicker { padding-bottom: 0; border-bottom: 0; }
  .showcase { padding-top: 0; padding-bottom: 30px; }
  .problem { padding-top: 26px; padding-bottom: 28px; }
  .outputs, .steps, .trust, .faq { padding-top: 28px; padding-bottom: 30px; }
  .outputs h2, .trust h2, .faq h2 { margin-bottom: 18px; }
  .steps h2 { margin-bottom: 16px; }
  #features, #teams { display: none; }

  /* Proof card tabs */
  .showcase-file { padding: 12px 14px; }
  .showcase-body { padding: 18px 14px 16px; }
  .proof-tabs {
    display: flex;
    gap: 4px;
    margin: 14px 14px 0;
    padding: 4px;
    border-radius: var(--sc-r-2);
    background: var(--sc-inset);
  }
  .proof-tab {
    flex: 1;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--sc-ui);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sc-ink-3);
    transition: background var(--sc-fast) var(--sc-ease), color var(--sc-fast) var(--sc-ease);
  }
  .proof-tab .t { font-family: var(--sc-mono); font-size: 11px; opacity: .7; margin-left: 7px; }
  #proof-card.is-before #tab-before,
  #proof-card.is-after #tab-after {
    border-color: var(--sc-rule);
    background: var(--sc-surface);
    color: var(--sc-ink);
  }
  #proof-card.is-before .proof-after { display: none; }
  #proof-card.is-after .proof-before { display: none; }
  .proof-before, .proof-after { animation: sc-fade 160ms var(--sc-ease); }
  .strip { height: 40px; }
  .proof-before .seg-keep { font-size: 0; }
  .proof-legend div {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--sc-ink-2);
  }
  .proof-legend div + div { margin-top: 7px; }
  .sw { width: 14px; height: 9px; border-radius: 2px; flex-shrink: 0; }
  .sw-grey { background: var(--sc-rule-2); }
  .sw-keep { border: 1px solid var(--sc-sel); background: var(--sc-sel-soft); }
  .proof-after .seg-main { flex: 5 !important; }
  .proof-after .seg-rest { flex: 5 !important; }
  .output-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 0 14px;
    scrollbar-width: none;
  }
  .output-chips::-webkit-scrollbar { display: none; }
  .output-chip { flex-shrink: 0; height: 32px; white-space: nowrap; }
  .output-chip .count { display: none; }
  .proof-caption { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--sc-ink-2); }
  .showcase-footnote { margin-top: 12px; font-size: 12px; }

  /* Problem stats as rows */
  .problem-stats { display: block; margin-top: 18px; padding-top: 0; border-top: 0; }
  .problem-stat {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 13px 0;
    border-top: 1px solid var(--sc-rule);
  }
  .problem-stat:last-child { border-bottom: 1px solid var(--sc-rule); }
  .problem-stat .num { flex: 0 0 76px; font-size: 19px; }
  .problem-stat .desc { margin-top: 0; font-size: 12.5px; }

  /* Output cards */
  .outputs-grid { grid-template-columns: 1fr; gap: 12px; }
  .output-card { padding: 16px 16px 18px; }
  .output-card h3 { font-size: 17px; margin-bottom: 12px; }
  .check-list { gap: 9px; padding-bottom: 0; }

  /* Steps as numbered rows */
  .steps-grid { display: block; }
  .step {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--sc-rule);
  }
  .step:last-child { border-bottom: 1px solid var(--sc-rule); }
  .step .num { grid-row: 1 / 3; padding-top: 3px; }
  .step .title { font-family: var(--sc-ui); font-size: 14.5px; letter-spacing: -0.01em; margin-top: 0; }
  .step .desc { margin-top: 4px; font-size: 12.5px; }

  /* Logos scroll strip */
  .logos-m { padding: 20px 0 22px; border-top: 1px solid var(--sc-rule); border-bottom: 1px solid var(--sc-rule); }
  .logos-m .eyebrow { padding: 0 20px; }
  .logos-scroll {
    display: flex;
    gap: 26px;
    margin-top: 12px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .logos-scroll::-webkit-scrollbar { display: none; }
  .logos-scroll span {
    font-family: var(--sc-display);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.015em;
    color: var(--sc-ink-3);
    white-space: nowrap;
  }

  /* Trust + FAQ accordions */
  .trust-rows, .faq-rows { border-top: 0; }
  .trust-row, .faq-row { display: block; padding: 0; border-bottom: 0; }
  .acc-head {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--sc-rule);
    color: var(--sc-ink);
    font-family: var(--sc-ui);
    text-align: left;
    cursor: pointer;
  }
  .trust-row:last-child .acc-head, .faq-row:last-child .acc-head { border-bottom: 1px solid var(--sc-rule); }
  .acc-head h3 { margin: 0; flex: none; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .chev {
    display: block;
    flex-shrink: 0;
    color: var(--sc-ink-3);
    transition: transform 140ms var(--sc-ease);
  }
  .acc-row.open .chev { transform: rotate(180deg); }
  .acc-row p { display: none; margin: 0; padding: 0 0 14px; font-size: 13px; }
  .acc-row.open p { display: block; animation: sc-in 160ms var(--sc-ease); }

  /* Trust badges + quote */
  .trust-badges {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    margin: 16px -20px 0;
    padding: 16px 20px 0;
    border-bottom: 0;
    scrollbar-width: none;
  }
  .trust-badges::-webkit-scrollbar { display: none; }
  .trust-badge { white-space: nowrap; }
  .trust-badge::before { width: 7px; height: 7px; }
  .trust-quote { display: block; margin-top: 22px; }
  .trust-quote blockquote {
    font-size: 19px;
    padding-top: 18px;
    border-top: 1px solid var(--sc-rule-2);
  }
  .trust-quote .attrib { margin-top: 12px; padding-top: 0; border-top: 0; }
  .trust-quote .who { font-size: 12.5px; }

  /* Dark footer */
  .cta { padding-top: 38px; }
  .cta h2 { font-size: 32px; line-height: 0.98; letter-spacing: -0.04em; }
  .cta-ctas { margin-top: 20px; }
  .btn-cta-ghost {
    height: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    gap: 8px;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .btn-cta-ghost:hover { border: 0; }
  .btn-cta-ghost .arrow { display: inline; }
  .cta-note { margin-top: 6px; font-size: 11.5px; }
  .footer-mark { right: -64px; bottom: -48px; height: 300px; }
  .footer-grid {
    margin-top: 26px;
    padding-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
  }
  .footer-legal { padding: 16px 0 28px; }

  /* Sticky bottom CTA */
  .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--sc-paper);
    border-top: 1px solid var(--sc-rule);
    padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 18px));
  }
  .sticky-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--sc-r-2);
    background: var(--sc-ink);
    color: var(--sc-paper);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .sticky-btn:hover { color: var(--sc-paper); text-decoration: none; }
  .sticky-cta .note { margin-top: 8px; text-align: center; font-size: 11px; color: var(--sc-ink-3); }
}