/* Stockwell360 — the marketing page.
   Layout: an editorial single column with one wide hero, a live-looking order
   sheet as the hero's picture, and one dark band for the call to action.
   Tokens are the app's own (warm paper, signal orange, Archivo and IBM Plex),
   so the site and the product read as one thing. */

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f3efe9;
  --border: #e8e2d9;
  --fg: #1a1614;
  --fg-2: #57504a;
  --muted: #736a62;
  --accent: #c4440a;
  --accent-bright: #e2560f;
  --accent-tint: #fff0e7;
  --accent-edge: #f6d6c2;
  --ok: #4a6b1f;
  --ok-tint: #eff4e3;
  --warn: #8a5d06;
  --ink: #1a1614;           /* the dark band */
  --ink-fg: #f6f1ea;
  --ink-muted: #b9aea4;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(26, 22, 20, .05), 0 12px 32px -12px rgba(26, 22, 20, .18);
  --shadow-lift: 0 2px 4px rgba(26, 22, 20, .06), 0 28px 60px -20px rgba(26, 22, 20, .28);
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14110f;
    --surface: #1c1917;
    --surface-2: #231f1c;
    --border: #342e2a;
    --fg: #f0ebe5;
    --fg-2: #c4bab1;
    --muted: #9c938b;
    --accent: #ff7a3d;
    --accent-bright: #ff8a52;
    --accent-tint: #2e1c12;
    --accent-edge: #4a2a17;
    --ok: #9ccb63;
    --ok-tint: #1e2616;
    --warn: #e8b455;
    --ink: #0d0b0a;
    --ink-fg: #f6f1ea;
    --ink-muted: #a89d93;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* A section reached from the menu lands below the sticky header, not under it. */
section[id] { scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img, svg { max-width: 100%; }
/* `hidden` must win over any display a component sets. */
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.015em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--surface); padding: 8px 12px; border-radius: 8px; }

.eyebrow {
  font: 600 12.5px/1 var(--body);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow-muted { color: var(--muted); }
.accent { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--body);
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-lg { font-size: 16px; padding: 15px 24px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px -8px var(--accent); }
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--fg-2); }
.btn-light { background: var(--ink-fg); color: var(--ink); }
.btn-light:hover { transform: translateY(-1px); background: #fff; }
.btn-outline-light { background: transparent; color: var(--ink-fg); border-color: rgba(246, 241, 234, .28); font-family: var(--mono); font-weight: 500; }
.btn-outline-light:hover { border-color: var(--ink-fg); }
.link-quiet { text-decoration: none; color: var(--fg-2); font-weight: 500; font-size: 15px; }
.link-quiet:hover { color: var(--fg); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
  transition: border-color .2s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-row { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--display); font-stretch: 112%; letter-spacing: -.02em; }
.brand-small { font-size: 18px; }
.mark { width: 26px; height: 26px; flex: none; fill: var(--accent); }
.brand-small .mark { width: 22px; height: 22px; }
/* One word, two tones: the name, then 360 in the signal colour. */
.wordmark b { font-weight: 800; color: var(--accent); margin-left: .02em; }
.links { display: flex; gap: 26px; margin-left: 12px; }
.links a { text-decoration: none; color: var(--fg-2); font-size: 15px; font-weight: 500; }
.links a:hover { color: var(--fg); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
/* Phones and tablets: the section links move behind a menu button. */
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; place-items: center; }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn path { transition: transform .25s ease, opacity .2s ease; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .m1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .m2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .m3 { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu { border-top: 1px solid var(--border); background: var(--bg); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .25); }
.mobile-menu .wrap { display: grid; padding-top: 8px; padding-bottom: 18px; }
.mobile-menu a:not(.btn) { padding: 14px 2px; border-bottom: 1px solid var(--border); text-decoration: none; font: 600 17px/1.2 var(--body); color: var(--fg); }
.mobile-menu .btn { margin-top: 16px; }
/* Five links need about 1,100 px beside the logo and Book a demo. */
@media (max-width: 1100px) {
  .links { display: none; }
  .menu-btn { display: grid; }
  .nav-cta { gap: 10px; }
}
@media (min-width: 1101px) { .mobile-menu { display: none !important; } }
/* On a phone the header holds the logo and the menu; Book a demo is inside it. */
@media (max-width: 440px) { .nav-cta .btn-primary { display: none; } }
@media (max-width: 420px) { .nav-cta .link-quiet { display: none; } .nav-row { gap: 12px; } }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 88px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, var(--accent-tint), transparent 70%);
  z-index: -1; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero h1 {
  font-size: clamp(42px, 6.4vw, 82px);
  line-height: .98;
  font-weight: 850;
  font-stretch: 88%;
  letter-spacing: -.025em;
  /* Narrow, heavy and tight closes the gaps between words; give them back. */
  word-spacing: .1em;
}
.lede { margin-top: 26px; font-size: clamp(17px, 1.6vw, 19.5px); color: var(--fg-2); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-proof { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14.5px; }
.hero-proof li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: 8px; }

/* The order sheet */
.hero-visual { position: relative; }
.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transform: rotate(-1.2deg);
  animation: rise .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) rotate(-1.2deg); } }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.sheet-supplier { font: 750 19px/1.2 var(--display); }
.sheet-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.cutoff { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-edge); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.cutoff b { font-family: var(--mono); font-weight: 500; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sheet-cols, .sheet-lines li { display: grid; grid-template-columns: minmax(0, 1fr) 62px 66px 62px; gap: 10px; align-items: center; }
.sheet-cols { padding: 10px 22px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.sheet-cols span:not(:first-child) { text-align: right; }
.sheet-lines { list-style: none; margin: 0; padding: 0; }
.sheet-lines li { padding: 13px 22px; border-top: 1px solid var(--border); font-size: 14px; opacity: 0; animation: line .5s ease forwards; }
.sheet-lines li:nth-child(1) { animation-delay: .35s; } .sheet-lines li:nth-child(2) { animation-delay: .45s; }
.sheet-lines li:nth-child(3) { animation-delay: .55s; } .sheet-lines li:nth-child(4) { animation-delay: .65s; }
.sheet-lines li:nth-child(5) { animation-delay: .75s; }
@keyframes line { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.sheet-lines .p { font-weight: 500; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sheet-lines .p i { font-style: normal; color: var(--muted); font-size: 12.5px; }
.sheet-lines .n { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--fg-2); }
.sheet-lines .q { text-align: right; font-family: var(--mono); font-size: 13px; }
.sheet-lines .q b { display: inline-block; min-width: 26px; padding: 3px 6px; border-radius: 6px; background: var(--accent-tint); color: var(--accent); font-weight: 500; text-align: center; }
.sheet-lines .q.muted { color: var(--muted); }
.sheet-lines .tag { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ok); background: var(--ok-tint); border-radius: 999px; padding: 2px 8px; }
.sheet-lines .hold .p { color: var(--muted); }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 14px; color: var(--fg-2); }
.sheet-foot b { color: var(--fg); font-family: var(--mono); font-weight: 500; }
.send { font-weight: 600; color: #fff; background: var(--accent); padding: 8px 14px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; }
.sheet-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); text-align: center; }

@media (max-width: 960px) {
  .hero { padding: 40px 0 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sheet { transform: none; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
}
@media (max-width: 480px) {
  .sheet-cols, .sheet-lines li { grid-template-columns: minmax(0, 1fr) 44px 52px 50px; gap: 6px; padding-left: 16px; padding-right: 16px; }
  .sheet-head, .sheet-foot { padding-left: 16px; padding-right: 16px; }
  .sheet-head { flex-direction: column; }
  .sheet-lines li { font-size: 13px; }
}

/* ---------- Before / after band ---------- */
.band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.contrast { display: grid; grid-template-columns: 1fr 1fr; }
.contrast > div { padding: 46px 0; }
.contrast > div:first-child { padding-right: 48px; border-right: 1px solid var(--border); }
.contrast > div:last-child { padding-left: 48px; }
.contrast .eyebrow { margin-bottom: 12px; }
.contrast-line { font: 600 clamp(20px, 2.1vw, 26px)/1.35 var(--display); font-stretch: 96%; letter-spacing: -.01em; }
.contrast > div:first-child .contrast-line { color: var(--muted); font-weight: 500; }
@media (max-width: 760px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast > div:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 32px; }
  .contrast > div:last-child { padding-left: 0; padding-top: 32px; }
  .contrast > div { padding: 32px 0; }
}

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section-alt { background: var(--surface-2); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.04; font-weight: 800; font-stretch: 90%; letter-spacing: -.02em; word-spacing: .06em; }
.section-lede { margin-top: 20px; color: var(--fg-2); font-size: 18px; max-width: 40em; }
@media (max-width: 760px) { .section { padding: 72px 0; } .section-head { margin-bottom: 40px; } }
@media (max-width: 560px) {
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
  .section h2 { font-size: 30px; }
  .section-lede { margin-top: 14px; font-size: 16px; }
}

/* How it works — three moments of a morning, joined by a track. */
.flow { position: relative; }
.flow-track { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px); }
.flow-dot {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 6px var(--accent-tint);
  animation: travel 7s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes travel { 0%, 8% { left: 0; } 38%, 46% { left: calc(50% - 6px); } 76%, 100% { left: calc(100% - 12px); } }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.flow-step { position: relative; display: flex; flex-direction: column; gap: 8px; }
.flow-n {
  align-self: flex-start; position: relative; z-index: 1;
  font: 700 13px/1 var(--mono); color: var(--accent); background: var(--bg);
  border: 2px solid var(--accent); border-radius: 999px; padding: 13px 14px; margin-bottom: 18px;
}
.flow-step h3 { font-size: 24px; font-weight: 800; font-stretch: 92%; line-height: 1.1; }
.flow-step > p { color: var(--fg-2); font-size: 16px; }
.flow-vis {
  margin-top: 14px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.flow-step:hover .flow-vis { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.flow-stamp { font: 500 12.5px/1 var(--mono); color: var(--muted); }
.flow-stamp.ok { color: var(--ok); }

/* 01 — the file */
.file { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--surface-2); animation: drop 7s ease infinite; }
.file svg { width: 40px; height: 40px; flex: none; padding: 8px; border-radius: 10px; background: var(--accent); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file b { display: block; font-size: 15px; }
.file span { font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
@keyframes drop { 0% { transform: translateY(-8px); opacity: 0; } 6%, 100% { transform: none; opacity: 1; } }

/* 02 — the order */
.mini-sheet { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini-sheet li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.mini-sheet b { font: 500 13px/1 var(--mono); color: var(--accent); background: var(--accent-tint); padding: 4px 7px; border-radius: 6px; }

/* 03 — the send */
.send-demo { position: relative; height: 54px; }
.send-btn, .send-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.send-btn { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px var(--accent); animation: press 7s ease infinite; }
.send-done { background: var(--ok-tint); color: var(--ok); opacity: 0; animation: done 7s ease infinite; }
@keyframes press { 0%, 80% { opacity: 1; transform: none; } 84% { transform: scale(.96); opacity: 1; } 88%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes done { 0%, 86% { opacity: 0; } 90%, 98% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 860px) {
  .flow { padding-left: 34px; }
  .flow-track { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--border) 0 8px, transparent 8px 14px); }
  .flow-dot { display: none; }
  .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .flow-n { margin-left: -46px; margin-bottom: 4px; padding: 9px 7px; font-size: 11px; }
  .flow-step { padding-top: 0; }
}

/* A small label — the *Add-on* tag. */
.pill { font: 600 11px/1 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-edge); border-radius: 999px; padding: 5px 9px; }

/* Live / Coming — the honest label on every stage, question and rung. */
.status { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-live { color: var(--ok); background: var(--ok-tint); }
.status-coming { color: var(--accent); background: var(--accent-tint); }

/* Reactive → proactive → predictive: one timeline, three steps up. */
.arc { position: relative; }
.arc-time {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px;
  font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  position: relative; padding-bottom: 14px;
}
.arc-time::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--border), color-mix(in srgb, var(--accent) 45%, var(--border)) 50%, var(--accent));
}
.arc-time span:nth-child(2) { color: var(--fg-2); }
.arc-time span:nth-child(3) { color: var(--accent); }
.arc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; }
.arc-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.arc-card:hover { box-shadow: var(--shadow-lift); }
/* Three steps up: each stage stands a little higher than the last. */
.arc-2 { margin-bottom: 26px; }
.arc-3 { margin-bottom: 52px; border-color: var(--accent-edge); background: linear-gradient(180deg, var(--accent-tint), var(--surface) 55%); }
.arc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.arc-stage { font: 600 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.arc-2 .arc-stage { color: var(--fg-2); }
.arc-3 .arc-stage { color: var(--accent); }
.arc-card h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 850; font-stretch: 90%; line-height: 1.05; letter-spacing: -.02em; word-spacing: .05em; }
.arc-vis { width: 100%; height: auto; display: block; overflow: visible; margin: 4px 0; }
.arc-vis .base { stroke: var(--border); stroke-width: 2; }
.arc-vis .b { fill: color-mix(in srgb, var(--fg) 18%, var(--surface)); }
.arc-vis .gone { fill: color-mix(in srgb, #d23a2a 12%, transparent); stroke: #c23a2a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.arc-vis .fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.arc-vis .ink { fill: none; stroke: var(--fg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.arc-vis .ahead { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 5 5; stroke-linecap: round; }
.arc-vis .now { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.arc-vis .cut, .arc-vis .today { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 4; }
.arc-vis .today { stroke: var(--muted); }
.arc-vis .band { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.arc-vis .fc { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; }
.arc-vis .pin { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.arc-vis .lbl, .arc-vis .lbl-acc, .arc-vis .lbl-bad { font: 600 11px/1 var(--body); fill: var(--fg-2); }
.arc-vis .lbl-acc { fill: var(--accent); }
.arc-vis .lbl-bad { fill: #c23a2a; letter-spacing: .04em; }
.arc-tags { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; }
.arc-tags li { font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); }
.arc-3 .arc-tags li { background: var(--surface); border: 1px solid var(--accent-edge); color: var(--accent); }
/* Draw the lines in when the section is reached — visible at rest regardless. */
@media (prefers-reduced-motion: no-preference) {
  .arc-vis .ink { stroke-dasharray: 400; animation: draw 1.6s ease both; }
  /* Dashed lines keep their dashes: they fade in after the solid line. */
  .arc-vis .ahead, .arc-vis .fc, .arc-vis .band { animation: fade .8s ease .9s both; }
}
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 960px) {
  .arc-time { display: none; }
  .arc-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .arc-2, .arc-3 { margin-bottom: 0; }
}

/* "Why this number" — a predicted line, in the hero sheet's style. */
.forecast { margin-top: 72px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.forecast-copy h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; font-stretch: 90%; line-height: 1.08; letter-spacing: -.02em; word-spacing: .06em; }
.forecast-copy p:not(.eyebrow) { margin-top: 16px; color: var(--fg-2); font-size: 17px; max-width: 30em; }
.forecast-visual { position: relative; }
/* The glow behind the card reaches past its column; never past the screen. */
#journey { overflow-x: clip; }
.forecast-visual::before {
  content: ""; position: absolute; inset: -12% -8% -12% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--accent-tint), transparent 72%);
}
.fcard {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lift);
  overflow: hidden; transform: rotate(1.1deg);
}
.fcard-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 24px 18px; border-bottom: 1px solid var(--border); }
.can { width: 64px; height: 96px; filter: drop-shadow(0 6px 10px rgba(26, 22, 20, .16)); }
.can-band { fill: var(--accent); }
.fcard-product { font: 750 21px/1.15 var(--display); }
.fcard-pack { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.fchip { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-edge); border-radius: 999px; padding: 5px 10px; }
.fchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.fcard-order { display: grid; justify-items: center; gap: 2px; padding: 10px 16px; border-radius: 14px; background: var(--accent); color: #fff; min-width: 84px; }
.fcard-order b { font: 850 40px/1 var(--display); font-stretch: 90%; }
.fcard-order span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.fchart { padding: 18px 24px 6px; background: var(--surface-2); }
.fbars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 7px; align-items: end; height: 96px; }
.fbars span { position: relative; height: var(--v); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--fg) 16%, transparent); transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.8,.2,1) both; }

.fbars .fbar-next { background: repeating-linear-gradient(135deg, var(--accent) 0 6px, var(--accent-bright) 6px 12px); box-shadow: 0 6px 16px -8px var(--accent); animation-delay: .45s; }
.fbar-next em { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 500 12.5px/1 var(--mono); font-style: normal; color: var(--accent); white-space: nowrap; }
@keyframes grow { from { transform: scaleY(.15); opacity: .3; } }
.faxis { display: flex; justify-content: space-between; padding: 8px 0 10px; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.freasons { list-style: none; margin: 0; padding: 8px 24px 12px; }
.freasons li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 118px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14.5px; opacity: 0; animation: line .5s ease forwards; }
.freasons li:first-child { border-top: 0; }
.freasons li:nth-child(1) { animation-delay: .55s; } .freasons li:nth-child(2) { animation-delay: .65s; }
.freasons li:nth-child(3) { animation-delay: .75s; } .freasons li:nth-child(4) { animation-delay: .85s; }
.fr-name { color: var(--fg-2); }
.fr-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fr-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: color-mix(in srgb, var(--fg) 34%, transparent); }
.freasons .lift .fr-bar i { background: var(--accent); }
.freasons .less .fr-bar i { background: var(--ok); }
.freasons b { text-align: right; font: 500 14px/1 var(--mono); white-space: nowrap; }
.freasons .lift b { color: var(--accent); }
.freasons .less b { color: var(--ok); }
.fcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 14px; color: var(--fg-2); }
.fcard-foot b { color: var(--fg); font-family: var(--mono); font-weight: 500; }
@media (max-width: 960px) {
  .forecast { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 56px; }
  .fcard { transform: none; }
  /* The glow stays inside the column, or a phone scrolls sideways. */
  .forecast-visual::before { inset: -8% 0; }
}
@media (max-width: 520px) {
  .fcard-head { grid-template-columns: 48px minmax(0, 1fr); padding: 18px 16px 14px; gap: 14px; }
  .can { width: 48px; height: 72px; }
  .fcard-order { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; padding: 8px 14px; }
  .fcard-order b { font-size: 28px; }
  .fchart, .freasons, .fcard-foot { padding-left: 16px; padding-right: 16px; }
  .freasons li { grid-template-columns: minmax(0, 1fr) auto; }
  .fr-bar { display: none; }
  .fcard-foot { flex-direction: column; align-items: flex-start; }
}

/* Analytics: the questions, one at a time, each with a sample chart. */
.carousel-head { margin-bottom: 40px; }
.carousel-head .section-head { margin-bottom: 0; }
/* Arrows either side of the bars, under the card. */
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.arrow {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }

/* A sliding track, moved a whole slide at a time by the arrows, the bars, a
   swipe or the arrow keys — not native scroll-snapping, which stops between
   slides when a smooth scroll and the snap disagree. */
.carousel { position: relative; overflow: hidden; border-radius: 22px; }
.track {
  display: flex; gap: 20px; align-items: flex-start;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), height .35s ease;
  touch-action: pan-y; /* vertical scrolling stays the page's; horizontal is ours */
}
.track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.track.dragging { transition: none; }
.slide {
  flex: 0 0 100%; min-width: 0;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 40px;
}
.slide-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.slide-copy h3 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 850; font-stretch: 90%; line-height: 1.04; letter-spacing: -.02em; word-spacing: .06em; }
.slide-copy p { color: var(--fg-2); font-size: 17px; max-width: 26em; }

.dots { display: flex; justify-content: center; gap: 8px; }
.dot-btn { width: 26px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.dot-btn:hover { background: var(--muted); }
.dot-btn[aria-current="true"] { width: 52px; background: var(--accent); }
/* The bars are small targets; give a finger more to land on. */
.dot-btn { position: relative; }
.dot-btn::after { content: ""; position: absolute; inset: -12px -2px; }

/* A chart card inside a slide */
.chart { margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; min-width: 0; }
.chart-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--fg-2); font-weight: 500; margin-bottom: 18px; }
.sample { font: 600 10.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; flex: none; }
.chart-foot { margin-top: 16px; font-size: 14px; color: var(--fg-2); }
.chart-foot b { color: var(--fg); font-family: var(--mono); font-weight: 500; }
.k { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* 1 — the ring */
.donut-wrap { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; }
.donut { width: 180px; height: 180px; }
.donut circle { fill: none; stroke-width: 24; transform: rotate(-90deg); transform-origin: 80px 80px; }
.ring-track { stroke: var(--surface-2); }
.seg { stroke-dasharray: var(--len) 100; stroke-dashoffset: var(--off); }
.s1 { stroke: var(--accent); } .k.s1 { background: var(--accent); }
.s2 { stroke: color-mix(in srgb, var(--accent) 55%, var(--bg)); } .k.s2 { background: color-mix(in srgb, var(--accent) 55%, var(--bg)); }
.s3 { stroke: color-mix(in srgb, var(--fg) 45%, var(--bg)); } .k.s3 { background: color-mix(in srgb, var(--fg) 45%, var(--bg)); }
.s4 { stroke: color-mix(in srgb, var(--fg) 22%, var(--bg)); } .k.s4 { background: color-mix(in srgb, var(--fg) 22%, var(--bg)); }
.donut .stale { stroke: url(#hatch); stroke-width: 24; }
.hatch-bg { fill: var(--accent); } .hatch-fg { fill: var(--fg); opacity: .55; }
.k.stale { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, color-mix(in srgb, var(--fg) 60%, var(--accent)) 3px 6px); }
.donut-big { font: 800 26px/1 var(--display); fill: var(--fg); text-anchor: middle; }
.donut-small { font: 500 11px/1 var(--body); fill: var(--muted); text-anchor: middle; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.legend b { margin-left: auto; font: 500 14px/1 var(--mono); color: var(--fg); }
.legend-stale { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--border); }
.legend-stale b { color: var(--accent); }

/* 2 — ranked dead stock */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: r; }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr) 76px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-items: center; }
.rank-name { font-size: 14.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name i { font-style: normal; color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.rank-days { grid-column: 2; grid-row: 1; text-align: right; font: 500 12px/1 var(--mono); color: var(--muted); }
.rank-bar { grid-column: 1; grid-row: 2; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rank-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); }
.rank b { grid-column: 2; grid-row: 2; text-align: right; font: 500 14px/1 var(--mono); }

/* 3 and 6 — line charts */
.line-chart { width: 100%; height: auto; display: block; overflow: visible; }
.line-chart .grid line { stroke: var(--border); stroke-dasharray: 3 4; }
.line-chart .axis { stroke: color-mix(in srgb, var(--fg) 30%, transparent); }
.line-chart .tick { font: 500 10.5px/1 var(--mono); fill: var(--muted); }
.line-chart .stroke { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .area { fill: color-mix(in srgb, var(--fg) 7%, transparent); }
.line-chart .empty-zone { fill: color-mix(in srgb, #d23a2a 14%, transparent); stroke: color-mix(in srgb, #d23a2a 40%, transparent); stroke-dasharray: 4 3; }
.line-chart .zone-label { font: 600 11px/1 var(--body); fill: #c23a2a; text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.line-chart .band { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.line-chart .forecast-line { stroke: var(--accent); stroke-dasharray: 6 5; }
.line-chart .event { stroke: var(--accent); stroke-dasharray: 2 4; }
.line-chart .event-label, .line-chart .forecast-tick { font: 600 10.5px/1 var(--body); fill: var(--accent); }
.line-chart .dot { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
.line-chart .dot-label { font: 600 12px/1 var(--mono); fill: var(--accent); }

/* 4 — two stores */
.pairs { display: grid; gap: 18px; }
.pair-legend { display: flex; gap: 18px; font-size: 13px; color: var(--fg-2); }
.pair-legend span { display: inline-flex; align-items: center; gap: 8px; }
.k.a { background: var(--accent); } .k.b { background: color-mix(in srgb, var(--fg) 35%, var(--bg)); }
.pair-name { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.pair-name i { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12.5px; margin-left: 6px; }
.pair-bars { display: grid; gap: 6px; }
.pair-bars span { position: relative; height: 26px; width: var(--w); border-radius: 7px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; }
.pair-bars .a { background: var(--accent); color: #fff; }
.pair-bars .b { background: color-mix(in srgb, var(--fg) 35%, var(--bg)); color: var(--bg); }
.pair-bars b { font: 600 13px/1 var(--mono); }

/* 5 — two quotes */
.quotes { display: grid; gap: 16px; }
.quote { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 14px; align-items: center; }
.quote-who { font-size: 14.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.quote-who em { font-style: normal; font: 600 10.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); background: var(--ok-tint); border-radius: 999px; padding: 4px 8px; }
.quote-bar { grid-column: 1; height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.quote-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: color-mix(in srgb, var(--fg) 35%, var(--bg)); }
.quote-best .quote-bar i { background: var(--ok); }
.quote b { grid-column: 2; grid-row: 1 / span 2; font: 600 22px/1 var(--mono); }
.quote-best b { color: var(--ok); }
.saving { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; }
.saving div { background: var(--surface); padding: 12px 14px; display: grid; gap: 6px; }
.saving span { font-size: 12px; color: var(--muted); }
.saving b { font: 600 16px/1.1 var(--mono); }
.saving-total { background: var(--accent-tint) !important; }
.saving-total b { color: var(--accent); }

@media (max-width: 960px) {
  .slide { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
}
@media (max-width: 640px) {
  .carousel-head { margin-bottom: 22px; }
  .carousel-nav { margin-top: 14px; gap: 14px; }
  .arrow { width: 46px; height: 46px; }
  /* A slide and its controls on one phone screen. */
  .slide { gap: 16px; }
  .slide-copy { gap: 10px; }
  .slide-copy h3 { font-size: 25px; }
  .slide-copy p { font-size: 15px; }
  .chart-cap { margin-bottom: 12px; font-size: 12.5px; }
  .chart-foot { margin-top: 10px; font-size: 13px; }
  .donut-wrap { grid-template-columns: 116px minmax(0, 1fr); justify-items: stretch; gap: 14px; }
  .donut { width: 116px; height: 116px; }
  .legend { gap: 7px; }
  .legend li { font-size: 13px; gap: 7px; }
  .legend b { font-size: 12.5px; }
  .legend-stale { margin-top: 2px; padding-top: 8px; }
  .rank { gap: 9px; }
  .rank-name { font-size: 13.5px; }
  .pairs { gap: 12px; }
  .pair-name { margin-bottom: 6px; font-size: 13px; }
  .pair-bars span { height: 22px; }
  .quotes { gap: 12px; }
  .quote-who { font-size: 13.5px; }
  .quote b { font-size: 18px; }
  .saving { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .saving div { padding: 9px 10px; gap: 4px; }
  .saving span { font-size: 11px; }
  .saving b { font-size: 13.5px; }
  .slide { padding: 16px; border-radius: 18px; position: relative; gap: 12px; }
  .chart { padding: 12px; }
  /* Fit with the browser's own bars on screen: the tag rides in the corner,
     and the charts run slimmer. */
  .slide-copy { gap: 6px; }
  .slide-copy .status { position: absolute; top: 16px; right: 16px; }
  .slide-copy h3 { font-size: 22px; padding-right: 92px; }
  .slide-copy p { font-size: 14px; line-height: 1.45; }
  .chart-cap { margin-bottom: 8px; }
  .chart-foot { margin-top: 8px; }
  .rank { gap: 7px; }
  .rank li { row-gap: 4px; }
  .pairs { gap: 8px; }
  .pair-legend { font-size: 12px; }
  .pair-name { margin-bottom: 4px; }
  .pair-bars { gap: 4px; }
  .pair-bars span { height: 18px; }
  .pair-bars b { font-size: 11.5px; }
  .quotes { gap: 8px; }
  .saving { margin-top: 10px; }
  .carousel-nav { margin-top: 10px; }
  .arrow { width: 44px; height: 44px; }
  .chart-cap { flex-direction: column; gap: 6px; }
  /* The charts are drawn 420 wide and shown at about 280: larger type in their units. */
  .line-chart .tick { font-size: 16px; }
  .line-chart .zone-label, .line-chart .event-label, .line-chart .forecast-tick { font-size: 15px; }
  .line-chart .dot-label { font-size: 17px; }
}

/* The autonomy ladder — on the dark ground */
.ladder-section { background: var(--ink); color: var(--ink-fg); }
.ladder-section .section-lede { color: var(--ink-muted); }
.ladder-section .eyebrow { color: var(--accent-bright); }
.ladder-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.ladder-grid .section-head { margin-bottom: 0; }
.guardrails { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.guardrails li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--ink-fg); }
.guardrails li::before { content: "✓"; color: var(--accent-bright); font-weight: 700; }
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 12px; }
.rung { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 14px; border: 1px solid rgba(246, 241, 234, .14); background: rgba(246, 241, 234, .04); }
.rung-on { background: rgba(246, 241, 234, .08); border-color: rgba(246, 241, 234, .22); }
.rung:nth-child(3) { margin-left: 18px; } .rung:nth-child(4) { margin-left: 36px; }
.rung-level { font: 500 12.5px/1 var(--mono); color: var(--ink-muted); }
.rung h3 { font-size: 19px; font-weight: 750; }
.rung p { color: var(--ink-muted); font-size: 14.5px; margin-top: 4px; }
.ladder-section .status-live { color: #b8dc8a; background: rgba(156, 203, 99, .14); }
.ladder-section .status-coming { color: var(--accent-bright); background: rgba(226, 86, 15, .16); }
@media (max-width: 960px) {
  .ladder-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rung:nth-child(3), .rung:nth-child(4) { margin-left: 0; }
}
@media (max-width: 520px) {
  .rung { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .rung-level { grid-column: 1 / -1; }
}

/* ---------- ROI ---------- */
.roi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; }
.roi-inputs { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px; display: grid; gap: 28px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; min-width: 0; }
legend { font: 750 17px/1 var(--display); margin-bottom: 16px; padding: 0; display: flex; align-items: baseline; gap: 10px; }
.legend-note { font: 500 12.5px/1 var(--body); color: var(--accent); }
.field { display: grid; gap: 7px; font-size: 14px; color: var(--fg-2); min-width: 0; }
.field input {
  width: 100%; min-width: 0;
  font: 500 17px/1 var(--mono); color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.money, .pct { position: relative; display: block; }
.money::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 500 17px/1 var(--mono); color: var(--muted); pointer-events: none; }
.money input { padding-left: 26px; }
.per-hour::after { content: "/h"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 14px/1 var(--mono); color: var(--muted); pointer-events: none; }
.pct::after { content: "%"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 17px/1 var(--mono); color: var(--muted); pointer-events: none; }
.assumptions { grid-template-columns: 1fr; padding-top: 24px; border-top: 1px dashed var(--border); }
.slider { display: grid; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.slider > span { display: flex; justify-content: space-between; gap: 12px; }
.slider output { font: 500 14.5px/1 var(--mono); color: var(--fg); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--border) var(--fill, 50%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.roi-results { position: sticky; top: 92px; background: var(--ink); color: var(--ink-fg); border-radius: 18px; padding: 32px; display: grid; gap: 26px; box-shadow: var(--shadow-lift); }
.result-label { font: 600 12.5px/1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--accent-bright); }
.result-big { font: 850 clamp(46px, 6vw, 72px)/1 var(--display); font-stretch: 92%; letter-spacing: -.03em; margin-top: 12px; font-variant-numeric: tabular-nums; }
.result-sub { margin-top: 10px; color: var(--ink-muted); font-size: 14.5px; }
.result-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(246, 241, 234, .12); border-radius: 12px; overflow: hidden; }
.result-grid > div { background: var(--ink); padding: 16px 16px 14px; }
.result-grid dt { font-size: 12.5px; color: var(--ink-muted); }
.result-grid dd { margin: 6px 0 4px; font: 600 24px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.result-grid p { font-size: 12.5px; color: var(--ink-muted); }
.result-cash { grid-column: 1 / -1; }
.roi-math { font-size: 13.5px; color: var(--ink-muted); border-top: 1px solid rgba(246, 241, 234, .12); padding-top: 18px; }
.roi-math summary { cursor: pointer; color: var(--ink-fg); font-weight: 500; }
.roi-math ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.roi-math b { color: var(--ink-fg); font-weight: 600; }
.roi-sticky { display: none; }
@media (max-width: 960px) {
  .roi { grid-template-columns: minmax(0, 1fr); }
  .roi-results { position: static; scroll-margin-top: 90px; }
  /* Pinned to the bottom of the screen while the inputs are in view. */
  .roi-sticky {
    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5;
    display: flex; align-items: center; gap: 12px; margin: 4px -6px -6px; padding: 12px 16px;
    border-radius: 14px; background: var(--ink); color: var(--ink-fg); text-decoration: none;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
  }
  .roi-sticky span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-bright); }
  .roi-sticky b { font: 850 26px/1 var(--display); font-variant-numeric: tabular-nums; }
  .roi-sticky .roi-sticky-more { margin-left: auto; color: var(--ink-muted); text-transform: none; letter-spacing: 0; font-size: 13px; }
}
@media (max-width: 520px) { fieldset { grid-template-columns: minmax(0, 1fr); } .roi-inputs, .roi-results { padding: 22px; } }

/* ---------- Trust ---------- */
.trust { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.trust .section-head { margin-bottom: 0; }
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.trust-grid li {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 24px;
  display: grid; gap: 8px; align-content: start;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.trust-grid li:hover { transform: translateY(-2px); border-color: var(--accent-edge); box-shadow: var(--shadow); }
.ti {
  width: 40px; height: 40px; padding: 9px; border-radius: 12px; margin-bottom: 6px;
  background: var(--accent-tint); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.trust-grid h3 { font-size: 18px; font-weight: 750; line-height: 1.2; }
.trust-grid p { color: var(--fg-2); font-size: 15px; }
@media (max-width: 900px) { .trust { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CTA ---------- */
.cta { background: var(--ink); color: var(--ink-fg); padding: 110px 0; position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -10%; bottom: -60%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(226, 86, 15, .35), transparent 70%); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; max-width: 860px; }
.cta h2 { font-size: clamp(38px, 5.5vw, 70px); line-height: 1; font-weight: 850; font-stretch: 88%; letter-spacing: -.025em; word-spacing: .1em; }
.cta p { margin-top: 22px; font-size: 19px; color: var(--ink-muted); max-width: 32em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (max-width: 760px) { .cta { padding: 80px 0; } }

/* ---------- Footer ---------- */
.footer { padding: 36px 0 44px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.footer a { color: var(--fg-2); text-decoration: none; }
.footer a:hover { color: var(--fg); }
.footer .brand { color: var(--fg); }

/* ---------- What it does: a showcase ----------
   A short list of capabilities on the left; the one selected drawn large on
   the right. */
.showcase { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 36px; align-items: stretch; }

/* --- The list -------------------------------------------------------------- */
.cap-list { display: flex; flex-direction: column; gap: 6px; }
.cap {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start;
  text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 16px 18px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cap:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.cap[aria-selected="true"] { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.cap[aria-selected="true"]::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--accent);
}
.cap-n { font: 500 13px/1.6 var(--mono); color: var(--muted); }
.cap[aria-selected="true"] .cap-n { color: var(--accent); }
.cap-text { display: grid; gap: 4px; }
.cap-text b { font: 750 18px/1.25 var(--display); }
.cap-text .pill { margin-left: 6px; vertical-align: 2px; }
.cap-text > span { font-size: 14.5px; color: var(--fg-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
.cap[aria-selected="true"] .cap-text > span { max-height: 3em; opacity: 1; }

/* --- The stage --------------------------------------------------------------- */
.stage-panel {
  position: relative; min-height: 460px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.stage-panel::before {
  content: ""; position: absolute; inset: auto -20% -40% auto; width: 70%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, var(--accent-tint), transparent 70%);
}
.panel { position: relative; height: 100%; display: grid; place-items: center; padding: 40px; animation: panel-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.vis { width: 100%; max-width: 560px; }
.vis-cap { font-size: 13px; color: var(--fg-2); font-weight: 500; margin-bottom: 18px; }
.vis-note { margin-top: 22px; font-size: 14.5px; color: var(--fg-2); }
.vis-note b { color: var(--fg); }
.hl { color: var(--accent); font-weight: 600; }

/* 1 — windows blending into one quantity */
.vis-blend { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, .8fr); align-items: end; gap: 16px; }
.vis-blend .vis-cap { grid-column: 1 / -1; margin-bottom: 4px; }
.windows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; height: 200px; align-items: end; }
.win { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 6px; }
.win i { align-self: end; width: 100%; height: var(--h); border-radius: 8px 8px 3px 3px;
  background: color-mix(in srgb, var(--accent) calc(var(--wt) * 22%), var(--surface-2)); transform-origin: bottom; animation: grow .6s cubic-bezier(.2,.8,.2,1) both; }
.win:nth-child(2) i { animation-delay: .05s; } .win:nth-child(3) i { animation-delay: .1s; }
.win:nth-child(4) i { animation-delay: .15s; } .win:nth-child(5) i { animation-delay: .2s; }
.win-val { font: 500 13px/1 var(--mono); }
.win-lbl { font: 600 12px/1 var(--mono); }
.win-wt { font: 500 11px/1 var(--mono); color: var(--muted); }
.blend-arrow svg { width: 70px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 90px; }
.blend-out { display: grid; gap: 10px; }
.blend-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--fg-2); }
.blend-out b { font: 500 15px/1 var(--mono); color: var(--fg); white-space: nowrap; }
.blend-out .blend-order { background: var(--accent); color: #fff; }
.blend-out .blend-order b { color: #fff; font: 850 28px/1 var(--display); }

/* 2 — rounding, a minimum, a deal */
.vis-cases { display: grid; gap: 20px; }
.round, .minimum, .deal { background: var(--surface-2); border-radius: 14px; padding: 18px 20px; }
.bottles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-bottom: 14px; }
.bottles span { height: 44px; border-radius: 7px 7px 3px 3px; background: var(--fg); opacity: .78; animation: line .4s ease both; }
.bottles span.extra { background: var(--accent); opacity: .9; }
.round p, .minimum p, .deal p { font-size: 14.5px; color: var(--fg-2); }
.round b, .minimum b { color: var(--fg); font-family: var(--mono); font-weight: 500; }
.round .to { color: var(--muted); margin: 0 6px; }
.min-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-2); margin-bottom: 10px; }
.min-bar { position: relative; display: flex; height: 14px; border-radius: 999px; background: var(--surface); overflow: visible; }
.min-bar i { display: block; height: 100%; width: var(--w); }
.min-have { background: color-mix(in srgb, var(--fg) 40%, var(--surface)); border-radius: 999px 0 0 999px; }
.min-top { background: repeating-linear-gradient(135deg, var(--accent) 0 5px, var(--accent-bright) 5px 10px); border-radius: 0 999px 999px 0; }
.min-line { position: absolute; left: var(--at); top: -6px; bottom: -6px; width: 2px; background: var(--fg); transform: translateX(-1px); }
.minimum p { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.deal { display: flex; align-items: center; gap: 14px; }
.deal-tag { font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); background: var(--ok-tint); padding: 7px 10px; border-radius: 999px; }

/* 3 — the shelf-life cap */
.shelf-track { position: relative; height: 120px; }
.shelf-would, .shelf-got { position: absolute; left: 0; height: 40px; width: var(--w); border-radius: 10px; display: flex; align-items: center; padding: 0 14px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.shelf-would { top: 8px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 10%, transparent) 0 8px, transparent 8px 16px); border: 1.5px dashed color-mix(in srgb, var(--fg) 30%, transparent); color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.shelf-got { top: 66px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); color: #fff; transform-origin: left; animation: grow-x .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow-x { from { transform: scaleX(.1); } }
.shelf-cap { position: absolute; left: var(--at); top: -10px; bottom: -6px; width: 2px; background: var(--fg); }
.shelf-cap span { position: absolute; top: -18px; left: 8px; font: 600 12px/1 var(--body); white-space: nowrap; color: var(--fg); }
.shelf-cap::after { content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); }
.shelf-scale { position: relative; height: 14px; margin-top: 12px; font: 500 11.5px/1 var(--mono); color: var(--muted); }
.shelf-scale span { position: absolute; left: var(--at); transform: translateX(-50%); white-space: nowrap; }
.shelf-scale span:first-child { transform: none; } .shelf-scale span:last-child { transform: translateX(-100%); }

/* 4 — a week of cutoffs */
.week { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .7fr); gap: 8px; }
.day { min-height: 190px; border-radius: 14px; background: var(--surface-2); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.day b { font: 700 13px/1 var(--display); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.day.today { background: var(--accent-tint); outline: 2px solid var(--accent); outline-offset: -2px; }
.day.today b { color: var(--accent); }
.chip { display: grid; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 8px 9px; border-radius: 9px; background: var(--surface); border-left: 3px solid var(--muted); }
.chip em { font-style: normal; font: 500 11.5px/1 var(--mono); color: var(--accent); }
.c-sg { border-left-color: var(--accent); }
.c-beer { border-left-color: #c8962a; }
.c-wine { border-left-color: #8a3a52; }
.c-bt { border-left-color: #3a6a8a; }
.digest { margin-top: 16px; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--ink-fg); font-size: 14px; }
.digest b { color: var(--ink-fg); }
.digest-dot { margin-top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 0 var(--accent-bright); animation: pulse 2s infinite; flex: none; }

/* 5 — the email the rep receives */
.mail { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transform: rotate(-.8deg); }
.mail-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: grid; gap: 6px; font-size: 13.5px; }
.mail-head span { display: inline-block; width: 64px; color: var(--muted); font-size: 12px; }
.mail-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.mail-lines td { padding: 11px 20px; border-bottom: 1px solid var(--border); }
.mail-lines td:last-child { text-align: right; font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.mail-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.sent { color: var(--ok); font-weight: 600; }

/* 6 — the owner's switches */
.store-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); margin-bottom: 18px; }
.store-tabs span { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; color: var(--muted); }
.store-tabs .on { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.toggles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.toggles li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); font-size: 15px; font-weight: 500; }
.tg { position: relative; width: 44px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 22%, var(--surface)); flex: none; }
.tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s ease; }
.tg-on { background: var(--accent); }
.tg-on::after { transform: translateX(18px); }
.approve { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; border: 1.5px dashed var(--accent-edge); background: var(--accent-tint); font-size: 14px; }
.approve div { display: flex; gap: 8px; }
.btn-mini { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--accent); color: #fff; }
.btn-mini.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent-edge); }

/* 7 — the bottle */
.bottle-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: center; }
.bottle { width: 120px; height: 300px; filter: drop-shadow(0 14px 20px rgba(26, 22, 20, .18)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.bottle .cap-top { fill: var(--accent); }
.bottle .label { fill: var(--accent); }
.b-name { font: 800 26px/1.15 var(--display); font-stretch: 92%; }
.b-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.b-chips span { font: 500 14px/1 var(--mono); padding: 10px 13px; border-radius: 10px; background: var(--surface-2); }
.b-check { margin-top: 18px; font-size: 14px; color: var(--ok); font-weight: 600; }

.showcase-nav { display: none; }
/* This section sits on the tinted band, where the usual bar colour vanishes. */
.showcase-nav .dot-btn:not([aria-current="true"]) { background: color-mix(in srgb, var(--muted) 45%, transparent); }
/* Seven bars and two arrows across a 360 px phone: the arrows keep their size. */
.carousel-nav .arrow { flex: none; }
.showcase-nav .dots { gap: 6px; }
.showcase-nav .dot-btn { width: 20px; }
.showcase-nav .dot-btn[aria-current="true"] { width: 40px; }
@media (max-width: 380px) {
  .carousel-nav { gap: 10px; }
  .carousel-nav .dots { gap: 5px; }
  .carousel-nav .dot-btn { width: 18px; }
  .carousel-nav .dot-btn[aria-current="true"] { width: 34px; }
}

/* --- Narrow screens: one feature at a time, like the questions carousel ------
   The selected item stands as the heading with "01 / 07"; arrows and seven
   bars under the picture step through, and a swipe on the picture does too. */
@media (max-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cap:not([aria-selected="true"]) { display: none; }
  .cap, .cap[aria-selected="true"] { cursor: default; padding: 0 2px; background: none; border-color: transparent; box-shadow: none; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .cap:hover { background: none; }
  .cap[aria-selected="true"]::before { display: none; }
  .cap-n { white-space: nowrap; padding-top: 3px; }
  .cap-n::after { content: " / 07"; color: var(--muted); }
  .cap-text b { font-size: 20px; }
  .cap-text > span, .cap[aria-selected="true"] .cap-text > span { max-height: none; opacity: 1; transition: none; }
  .showcase-nav { display: flex; margin-top: 4px; }
  .stage-panel { touch-action: pan-y; }
  .stage-panel { min-height: 0; }
  .panel { padding: 24px 18px; }
}
@media (max-width: 560px) {
  .panel { padding: 18px 16px; }
  .showcase { gap: 12px; }
  .vis-blend { grid-template-columns: minmax(0, 1fr); }
  .blend-arrow { display: none; }
  .windows { height: 160px; }
  .week { grid-template-columns: minmax(0, 1fr); }
  .day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .day b { width: 42px; }
  .day:last-child { display: none; }
  .bottle-card { grid-template-columns: 80px minmax(0, 1fr); gap: 18px; }
  .bottle { width: 80px; height: 200px; }
  .b-name { font-size: 21px; }
  .mail-head span { width: 56px; }
  .shelf-would, .shelf-got { font-size: 12px; padding: 0 10px; }
  /* Each feature with its arrows on a phone screen, browser bars and all:
     the title alone above the picture, and the pictures drawn tighter. */
  .cap-text > span, .cap[aria-selected="true"] .cap-text > span { display: none; }
  .cap-text b { font-size: 19px; }
  .panel { padding: 16px 14px; }
  .windows { height: 130px; }
  .blend-out { gap: 6px; }
  .blend-out div { padding: 8px 12px; }
  .blend-out .blend-order b { font-size: 24px; }
  .vis-cases { gap: 10px; }
  .round, .minimum, .deal { padding: 12px 14px; }
  .digest { margin-top: 10px; padding: 10px 12px; font-size: 13px; }
  .mail-head { padding: 10px 14px; gap: 4px; font-size: 12.5px; }
  .mail-lines { font-size: 13px; }
  .mail-lines td { padding: 7px 14px; }
  .mail-foot { padding: 8px 14px; font-size: 12px; }
  .store-tabs { margin-bottom: 12px; }
  .toggles li { padding: 10px 14px; font-size: 14px; }
  .approve { margin-top: 12px; padding: 10px 14px; font-size: 13px; }
}