/* ============================================================
   CallVue — marketing site styles  [variant/amber]
   Warm-gradient design, framed-column layout. No build step.
   ============================================================ */

:root {
  /* ---- Type: Geist (neutral grotesque, matches the design reference).
     Previous pairing was Clash Display + Satoshi via Fontshare; swap these two
     vars (and the <link> in index.html) to go back. ---- */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Heading treatment — reference runs weight 500 with very tight tracking. */
  --head-weight: 500;
  --head-track: -0.045em;

  /* ---- Brand palette ---- */
  --bg:          #ffffff;   /* page background */
  --bg-alt:      #f7f5f2;   /* soft warm card tint */
  --surface:     #f8f7f5;   /* inner fills inside white cards/panels */
  --paper:       #ffffff;
  --ink:         #1a1714;
  --ink-strong:  #0f0d0b;
  --ground:      #0f0d0b;   /* dark ground shared by the CTA band and the footer */
  --ink-dim:     #6b645d;
  --ink-mute:    #9a9189;
  --ink-faint:   #c4bcb3;

  --line:        #e9e6e1;
  --line-soft:   #f2f0ec;
  --line-strong: #d9d4cc;

  --frame-line:  rgba(26,23,20,.07);   /* column frame edges */
  --rule-edge:   rgba(26,23,20,.12);   /* hairlines bounding separator bands, now full-bleed */
  --hatch:       rgba(26,23,20,.08);   /* dense vertical hatch inside separator bands */

  --brand:       #e7684a;
  --brand-deep:  #d2502f;
  --brand-amber: #f5a623;
  --brand-soft:  #fff0e7;
  --brand-ink:   #b8431f;

  --good:        #1f7a4a;
  --warn:        #b15d12;
  --warn-soft:   #fbe9d1;

  --warm:        linear-gradient(135deg, #ffb673 0%, #f07a4f 48%, #d2502f 100%);
  --warm-deep:   linear-gradient(135deg, #d8612f 0%, #c24b25 45%, #a23a1c 100%);
  --warm-tint:   linear-gradient(180deg, #fff6ef 0%, #ffe9da 100%);

  --maxw: 1180px;
  --shadow-sm: 0 1px 2px rgba(26,23,20,.05);
  --shadow-md: 0 10px 30px -14px rgba(26,23,20,.18);
  --glow: 0 30px 80px -36px rgba(231,104,74,.5);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ============================================================
     DESIGN SYSTEM — every spacing / size / radius in this sheet
     resolves to one of the steps below. Nothing is improvised.
     Rhythm modelled on Relume's section scale (py-16/24/28).
     ============================================================ */

  /* ---- Type scale (9 steps) ---- */
  --t-micro: .66rem;   /* KPI labels, trends, table heads, tags, pills */
  --t-2xs:   .76rem;   /* eyebrows, panel titles, footer col headings */
  --t-xs:    .88rem;   /* secondary copy, footer links, small descriptions */
  --t-sm:    .95rem;   /* buttons, card descriptions */
  --t-base:  1.05rem;  /* body copy, FAQ, integration labels */
  --t-md:    1.18rem;  /* ledes, card + tab titles */
  --t-lg:    1.35rem;  /* plan names, prices-adjacent */
  --t-xl:    1.6rem;   /* KPI numbers */
  --t-3xl:   2.7rem;   /* stat numbers, pricing amounts */

  /* ---- Spacing scale (4px base) ---- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px;  --sp-12: 48px;  --sp-14: 56px; --sp-16: 64px;
  --sp-20: 80px;  --sp-24: 96px;

  /* ---- Radius scale (5 steps + full) ---- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-full: 999px;
  --radius:    var(--r-lg);   /* legacy aliases */
  --radius-lg: var(--r-xl);

  /* ---- Section rhythm (responsive, one source of truth) ---- */
  --section-y: var(--sp-16);   /* 64  — mobile */
  --gutter:    var(--sp-5);    /* 20  — mobile */
  --card-pad:    var(--sp-6);  /* 24 */
  --hatch-cells: 60;           /* divisions across a separator strip */
  --card-pad-lg: var(--sp-7);  /* 28 */
}

@media (min-width: 768px) {
  :root { --section-y: var(--sp-20); --gutter: var(--sp-7); --hatch-cells: 100; }
}
@media (min-width: 992px) {
  :root { --section-y: var(--sp-24); --gutter: var(--sp-10); --hatch-cells: 145; }
}
@media (min-width: 1180px) {
  :root { --hatch-cells: 157; }   /* ~7.5px cells at the 1180px column */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; position: relative;
  font-family: var(--font-body); color: var(--ink); background: var(--bg);
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: var(--head-weight);
  line-height: 1.08; letter-spacing: var(--head-track); margin: 0; color: var(--ink-strong);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Column frame — just two faint vertical edges, full height. */
.bg-frame {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--maxw), 100%); z-index: 0; pointer-events: none;
  border-inline: 1px solid var(--frame-line);
}

/* Section separator: dense vertical hatch band bounded by crisp top+bottom hairlines.
   Hairlines live on the element (always crisp); the hatch lives on ::before so it can
   fade softly at its edges without washing out the bounding lines. */
/* The header background and the footer both run edge to edge, so the separator
   hairlines do too. The element stays column-width because the hatch inside it is
   measured against the frame; only the two bounding lines escape, drawn on ::after
   at 100vw. Safe against a horizontal scrollbar because body sets overflow-x hidden. */
.rule {
  max-width: var(--maxw); margin: 0 auto; height: 76px;
  position: relative; z-index: 2;
}
.rule::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%); width: 100vw;
  border-top: 1px solid var(--rule-edge);
  border-bottom: 1px solid var(--rule-edge);
  pointer-events: none; z-index: 0;
}
.rule::before {
  content: ""; position: absolute; inset: 0 1px 0 0; pointer-events: none;
  /* The gap beside a frame border must equal the gap between hatch lines, or
     the first line sits a hair off the border and reads as a doubled edge.
     A fixed px period can never do that (the leftover has to go somewhere), so
     the cell is COUNT-based: the pattern divides the width exactly. The box
     stops at the left edge of the right-hand frame border, so the two borders
     act as the first and last lines of one even rhythm. */
  background-image: linear-gradient(90deg, var(--hatch) 0 1px, transparent 1px);
  background-size: calc(100% / var(--hatch-cells)) 100%;
  background-position: left center;
  background-repeat: repeat-x;
  /* No vertical mask: the hatch runs edge to edge so every line meets the
     top and bottom hairline instead of fading out short of them. */
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm);
  padding: .74em 1.3em; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn--lg { font-size: var(--t-base); padding: .9em 1.55em; }
.btn--block { display: flex; width: 100%; }

.btn--brand { background: var(--brand); color: #fff; box-shadow: 0 6px 16px -8px rgba(210,80,47,.7); }
.btn--brand:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(210,80,47,.8); }
.btn--nav { padding: .62em 1.1em; font-size: var(--t-xs); }

.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); }

.btn--invert { background: #fff; color: var(--brand-ink); }
.btn--invert:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.3); }
.btn--ghost-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-invert:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.btn__ico { display: inline-flex; }
.btn__ico svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.btn:hover .btn__ico svg { transform: translate(2px,-2px); }

/* ===========================================================
   Nav
   =========================================================== */
/* The menu needs a floor, or it hovers over the hero with nothing marking where
   one ends and the other starts. The hairline is always on now, not just when
   scrolled, and it darkens to the heavier --line once the scrolled background
   comes in. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid var(--frame-line); }
.nav.is-scrolled { background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line); }
.nav__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--gutter); }
.nav__logo { height: 26px; width: auto; }
.nav__links { display: flex; gap: var(--sp-7); }
.nav__links a { font-size: var(--t-sm); font-weight: 500; color: var(--ink-dim); position: relative; transition: color .18s var(--ease); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: var(--brand); border-radius: var(--r-xs); transition: right .24s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { right: 0; }
.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
.nav__toggle { display: none; }

.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: var(--sp-3) var(--gutter) var(--sp-5); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.mobile-menu a { padding: var(--sp-3) var(--sp-1); font-weight: 500; color: var(--ink-dim); border-bottom: 1px solid var(--line-soft); }
.mobile-menu a:last-child { border: 0; margin-top: 8px; }

/* ===========================================================
   Layout helpers
   =========================================================== */
.section { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); position: relative; z-index: 2; }
.section__head { max-width: 720px; margin-bottom: var(--sp-12); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.section__lede { color: var(--ink-dim); font-size: var(--t-md); margin-top: 18px; max-width: 620px; }
.section__lede--center { margin-inline: auto; }

/* Pill labels (small amber-square tag, matching the reference) */
/* Plain typographic overline. Deliberately NOT a bordered pill with a coloured
   chip: that combination is a stock AI-landing-page tell. */
.eyebrow { display: block; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--sp-4); }
.eyebrow--on-dark { color: rgba(255,255,255,.72); }

.accent { color: var(--brand); }

/* Shared mockup panels */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.panel__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.panel__bar .dot:nth-child(1) { background: #f0a78f; }
.panel__title { margin-left: 8px; font-size: var(--t-2xs); font-weight: 600; color: var(--ink-mute); }
.panel__live { margin-left: auto; font-size: var(--t-micro); font-weight: 700; color: var(--brand); }

.card-menu { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink-mute); font-size: var(--t-xs); line-height: 1; letter-spacing: 1px; cursor: default; display: inline-grid; place-items: center; }
.panel__bar .card-menu { margin-left: auto; width: 28px; height: 24px; }

/* Glow behind hero mockup */
.glow-frame { position: relative; }

/* ===========================================================
   Hero (centered)
   =========================================================== */
.hero { max-width: 960px; margin: 0 auto; padding: 140px var(--gutter) var(--sp-14); text-align: center; position: relative; z-index: 2; }
.hero__pill { display: block; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 auto var(--sp-5); }
.hero__title { font-size: clamp(2.1rem, 4.2vw, 3.5rem); letter-spacing: -0.06em; }
.hero__lede { color: var(--ink-dim); font-size: var(--t-md); line-height: 1.55; margin: 24px auto 0; max-width: 600px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: 34px; }

.hero__art { margin-top: 60px; }
.hero__art .panel { max-width: 880px; margin: 0 auto; box-shadow: var(--shadow-md); }

.panel--dash .dash { padding: var(--sp-5); }
.dash__kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kpi { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: 3px; text-align: left; }
.kpi--accent { background: var(--warm-tint); border-color: #ffd9c2; }
.kpi__label { font-size: var(--t-micro); color: var(--ink-mute); font-weight: 600; }
.kpi__num { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; color: var(--ink-strong); letter-spacing: -.02em; }
.kpi__unit { font-size: var(--t-sm); }
.kpi__trend { font-size: var(--t-micro); font-weight: 700; color: var(--good); }
.dash__split { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-3); }
@media (max-width: 620px) { .dash__split { grid-template-columns: 1fr; } }

.gauge-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.gauge-card__label { font-size: var(--t-micro); color: var(--ink-mute); font-weight: 600; align-self: flex-start; }
.gauge { position: relative; width: 130px; height: 70px; margin-top: 6px; border-radius: 130px 130px 0 0; background: conic-gradient(from 270deg at 50% 100%, var(--brand) 0deg, var(--brand-amber) 85deg, var(--line) 85deg, var(--line) 180deg); -webkit-mask: radial-gradient(circle at 50% 100%, transparent 52px, #000 53px); mask: radial-gradient(circle at 50% 100%, transparent 52px, #000 53px); }
/* The value has to sit OUTSIDE .gauge: the radial mask that hollows the arc
   applies to descendants too, so a child span here renders invisible. Tuck it
   up into the hollow with a negative margin instead. */
.gauge__val { margin-top: -40px; font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--ink-strong); }
.gauge-card__sub { font-size: var(--t-micro); color: var(--ink-mute); }

/* Per-rep compliance bars. Shared by the hero dashboard (playbook compliance
   against each rep target) and the booking-rate feature card, which is why the
   fill percentage is passed in as --w rather than derived from the label. */
.repbars { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); justify-content: center; text-align: left; }
.repbars__head { font-size: var(--t-micro); color: var(--ink-mute); font-weight: 600; margin-bottom: var(--sp-1); }
.repbar { display: grid; grid-template-columns: 76px 1fr 58px; align-items: center; gap: var(--sp-3); }
.repbar__who { font-size: var(--t-2xs); color: var(--ink-dim); font-weight: 500; }
.repbar__track { height: 8px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.repbar__track i { display: block; height: 100%; width: var(--w); border-radius: var(--r-full); background: var(--warm); }
/* Reps under target read in the brand deep tone rather than a separate alarm red. */
.repbar--low .repbar__track i { background: var(--brand-deep); }
.repbar__val { font-size: var(--t-2xs); font-weight: 700; color: var(--ink-dim); text-align: right; font-variant-numeric: tabular-nums; }
.repbar__val em { font-style: normal; font-weight: 500; color: var(--ink-mute); }


/* ===========================================================
   Logos strip
   =========================================================== */
.strip { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-12) var(--gutter); position: relative; z-index: 2; }
.strip__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-12); align-items: center; }
.strip__claim {
  font-family: var(--font-display); font-weight: var(--head-weight);
  font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.3;
  letter-spacing: var(--head-track); color: var(--ink-strong);
  margin: 0; max-width: 26ch;
}
.strip__sub { font-size: var(--t-xs); color: var(--ink-mute); margin: var(--sp-4) 0 0; max-width: 42ch; }

/* Recording handoff diagram: phone system -> CallVue. */
.flow { display: flex; align-items: stretch; gap: var(--sp-2); }
.flow__node {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--shadow-sm);
}
.flow__node--brand { border-color: #f0d9cb; background: var(--brand-soft); }
.flow__ico {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-dim);
  display: grid; place-items: center; margin-bottom: var(--sp-3);
}
.flow__ico svg { width: 19px; height: 19px; }
.flow__ico--brand { background: #fff; }
.flow__ico--brand img { width: 21px; height: 21px; }
.flow__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs); color: var(--ink-strong); letter-spacing: -.01em; }
.flow__sub { font-size: var(--t-micro); color: var(--ink-mute); margin-top: 3px; line-height: 1.35; }

.flow__link { flex: 0 0 84px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-2); }
.flow__tag { font-size: var(--t-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); text-align: center; line-height: 1.2; }
.flow__wire { position: relative; display: block; width: 100%; height: 1px; background: var(--line-strong); }
.flow__wire::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border-left: 6px solid var(--line-strong);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
/* Kept for when this slot becomes a customer logo carousel. */
.strip__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-4) var(--sp-7); }
.strip__logos li { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--ink-faint); letter-spacing: -.01em; }
.strip__logos .dotsep { color: var(--line-strong); }

/* ===========================================================
   Full-bleed warm bands
   =========================================================== */
.band { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; overflow: hidden; }
/* The peach reads flat when it is evenly lit, so the band carries a light
   source rather than a pattern: a warm highlight falling in from the top right
   and a deep burnt falloff at the bottom left, stacked over the base gradient.
   Deliberately not a repeating texture; the page already has hatch rules, table
   hairlines and the column frame, and a fourth line pattern muddies all of them.
   This replaces a single fixed 520px glow, which did not scale with the band. */
.band--warm {
  color: #fff; box-shadow: var(--glow);
  background-image:
    radial-gradient(110% 130% at 88% -20%, rgba(255,190,120,.55), transparent 58%),
    radial-gradient(120% 110% at 6% 118%, rgba(92,26,8,.55), transparent 62%),
    var(--warm-deep);
}
/* Film grain over the gradient, overlay blend keeps it filmic on the warm tone.
   Lifted from .42 now that there is lighting underneath for it to sit on. */
.band--warm::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .6; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.band__inner { padding: var(--sp-16) var(--sp-14); position: relative; z-index: 1; }
.band__head { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-10); align-items: end; }
.band__head--center { display: block; text-align: center; max-width: 640px; margin: 0 auto; }
.band__title { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.band__desc { color: rgba(255,255,255,.85); font-size: var(--t-base); margin: 0; }

/* Impact panel. Sits on the warm band like the call-flow panel does, so the
   two full-bleed sections share one construction: white paper on warm ground. */
.impact-art { margin-top: var(--sp-10); text-align: left; }
.impact { padding: var(--sp-7) var(--sp-7) var(--sp-6); }
.impact__lead { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: var(--head-weight); letter-spacing: var(--head-track); color: var(--ink-strong); }
.impact__lead b { font-weight: 600; color: var(--brand-ink); }
.impact__sub { margin: var(--sp-3) 0 0; max-width: 620px; font-size: var(--t-sm); color: var(--ink-dim); }

/* Three cells on hairlines rather than boxes: the section already sits inside a
   panel, and nesting cards inside cards muddies the edges. */
.impact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.impact__cell { padding: var(--sp-5) var(--sp-6) var(--sp-2); border-left: 1px solid var(--line); }
.impact__cell:first-child { padding-left: 0; border-left: 0; }
.impact__label { display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.impact__num { display: block; margin-top: var(--sp-2); font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.impact__num em { font-style: normal; font-size: var(--t-sm); font-weight: 500; color: var(--ink-mute); }
.impact__note { display: block; margin-top: var(--sp-2); font-size: var(--t-micro); color: var(--ink-mute); }
.impact__foot { margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); font-size: var(--t-micro); color: var(--ink-mute); max-width: 720px; }

.band__tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-7); margin: 44px 0 0; }
.band__tab-rule { display: block; height: 2px; background: rgba(255,255,255,.28); margin-bottom: var(--sp-4); }
.band__tab--active .band__tab-rule { background: var(--brand-amber); }
.band__tab h3 { color: #fff; font-size: var(--t-md); margin-bottom: var(--sp-2); }
.band__tab p { color: rgba(255,255,255,.72); font-size: var(--t-xs); margin: 0; }

.band__art { margin-top: 40px; }
.band__art .panel { box-shadow: 0 30px 60px -22px rgba(0,0,0,.45); }
/* Call-flow Sankey, replacing the old bar chart in the warm band. Mirrors the
   in-app Call Flow report: inbound volume fanning into call types, the booking
   opportunities splitting on conversion, then converted calls by final outcome.
   Geometry is generated (see the node values baked into the paths); the tones
   below are the only thing this sheet controls. */
.sankey { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.sankey__svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.sk-head { fill: var(--ink-mute); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }
.sk-lbl  { fill: var(--ink); font-size: 11.5px; font-weight: 600; }
.sk-num  { fill: var(--ink-mute); font-weight: 500; }

.sk-node--brand { fill: var(--brand); }
.sk-node--good  { fill: var(--good); }
.sk-node--amber { fill: var(--brand-amber); }
.sk-node--deep  { fill: var(--brand-deep); }
.sk-node--mute  { fill: var(--ink-faint); }

/* Ribbons carry the destination tone so the eye follows a call to its outcome. */
.sk-flow        { fill-opacity: .2; }
.sk-flow--brand { fill: var(--brand); fill-opacity: .26; }
.sk-flow--good  { fill: var(--good); }
.sk-flow--amber { fill: var(--brand-amber); fill-opacity: .3; }
.sk-flow--deep  { fill: var(--brand-deep); }
.sk-flow--mute  { fill: var(--ink-faint); fill-opacity: .34; }

/* Below the panel width the 11.5px labels stop being readable, so the chart
   scrolls at a legible minimum rather than shrinking into illegibility. */
@media (max-width: 900px) {
  /* Fading the right edge is the only cue that the chart pans; without it the
     diagram just looks cropped. Decorative art, so nothing is lost to a11y. */
  .sankey {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }
  .sankey__svg { min-width: 760px; }
}


/* ===========================================================
   Cards (flat) — shared base
   =========================================================== */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card__head h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); }
.card__desc { color: var(--ink-dim); font-size: var(--t-sm); margin: 0 0 18px; }
.card--feat:hover, .card--mini:hover, .faq__item[open] { border-color: #f0d9cb; }

/* Smart features — lead card */
.features .feat-lead { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-10); display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-12); align-items: center; margin-bottom: var(--sp-5); }
.feat-lead__title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: var(--sp-4); }
.feat-lead__desc { color: var(--ink-dim); margin: 0 0 24px; max-width: 380px; }
.feat-lead__art .card { box-shadow: var(--shadow-md); }

/* Trajectory card, mirroring the in-app Impact report: a baseline figure, the
   current figure, and the movement between them. Replaces a line chart whose
   y-axis counted calls while the label promised a rate. */
.card__note { margin-left: auto; font-size: var(--t-micro); color: var(--ink-mute); font-weight: 500; }
.traj { display: flex; flex-direction: column; gap: var(--sp-1); }
.traj__row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: var(--sp-3); padding-top: var(--sp-3); }
.traj__row + .traj__row, .traj__sub + .traj__row { border-top: 1px solid var(--line-soft); }
.traj__label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.traj__move { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.traj__move b { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; color: var(--ink-mute); letter-spacing: -.02em; }
.traj__move .traj__now { color: var(--ink-strong); }
.traj__arrow { width: 15px; height: 15px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.traj__delta { font-size: var(--t-2xs); font-weight: 700; color: var(--good); white-space: nowrap; font-variant-numeric: tabular-nums; }
.traj__sub { margin: 2px 0 var(--sp-3); font-size: var(--t-micro); color: var(--ink-mute); }
.traj__sub:last-child { margin-bottom: 0; }

/* Booking-rate feature card: a headline count over the same per-rep bars the
   hero uses, so the two graphics read as the same product surface. */
.viz--rate { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.rate__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.rate__top span { font-size: var(--t-micro); color: var(--ink-mute); font-weight: 600; }
.rate__top b { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; color: var(--ink-strong); letter-spacing: -.02em; }
.rate__top b em { font-style: normal; font-size: var(--t-micro); font-weight: 500; color: var(--ink-mute); }

.lc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; }

/* Smart features — two-card row */
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }

/* Feature cards are flex columns so the chart can absorb the leftover height,
   which lines its baseline up with the taller card beside it. */
.card--feat { display: flex; flex-direction: column; }
.card--feat .viz { flex: 1 1 auto; }
.viz--coach { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Coaching-topic cards, matching the in-app active-topic panel: whose topic it
   is, whether it is moving, the behavior itself, and how long it has been open.
   Topics are per-rep, so nothing here aggregates across the team. */
.mc-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.mc-card--up { border-left-color: var(--good); }
.mc-card .mc-tag { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: var(--sp-1); }
.mc-card .mc-tag--rep { color: var(--ink-dim); }
.mc-chip { font-style: normal; letter-spacing: .02em; text-transform: none; font-size: var(--t-micro); font-weight: 600; padding: 1px var(--sp-2); border-radius: var(--r-full); background: var(--line-soft); color: var(--ink-dim); }
.mc-chip--up { background: #e4f0e9; color: var(--good); }
.mc-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--ink-strong); letter-spacing: -.01em; }
.mc-meta { display: block; margin-top: var(--sp-1); font-size: var(--t-micro); color: var(--ink-mute); }

/* Smart features — compact row */
.grid--mini { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.card--mini { padding: var(--card-pad); }
.feature__ico { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--warm-tint); color: var(--brand-deep); margin-bottom: var(--sp-4); }
.feature__ico svg { width: 22px; height: 22px; }
.feature__title { font-size: var(--t-md); margin-bottom: var(--sp-2); }
.feature__desc { color: var(--ink-dim); font-size: var(--t-xs); margin: 0; }

/* ===========================================================
   Call-list spotlight
   =========================================================== */
.spot { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-14); align-items: center; }
.spot__title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: var(--sp-4); }
.spot__desc { color: var(--ink-dim); font-size: var(--t-base); margin: 0 0 22px; }
.spot__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.spot__list li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; font-size: var(--t-sm); }
.tick { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; padding: 3px; background: var(--brand-soft); border-radius: 50%; }
.spot__art .card { padding: 0; overflow: hidden; box-shadow: var(--shadow-md); }
.spot__art .card__head { padding: var(--sp-4) var(--sp-4); margin: 0; border-bottom: 1px solid var(--line-soft); }
.trow { display: grid; grid-template-columns: 1.4fr 1fr .9fr .9fr; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); font-size: var(--t-xs); }
.trow:last-child { border-bottom: 0; }
.trow--head { font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); background: var(--surface); }
.trow__c { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.ava { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--t-micro); font-weight: 700; display: grid; place-items: center; font-style: normal; }
.ta-r { text-align: right; }
.pill { font-size: var(--t-micro); font-weight: 700; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-full); font-style: normal; }
.pill--win { background: var(--brand-soft); color: var(--brand-ink); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }

/* ===========================================================
   Built for teams (size cards)
   =========================================================== */
/* ===========================================================
   Inbound — AI answering agent (transcript mockup)
   =========================================================== */
/* Mirrored spotlight so this section doesn't repeat the copy-left layout
   used by the call-list section above it. */
.spot--flip .spot__copy { order: 2; }
.spot--flip .spot__art  { order: 1; }

.inbound .spot__art .card { padding: 0; overflow: hidden; box-shadow: var(--shadow-md); }
.inbound .spot__art .card__head { padding: var(--sp-4); margin: 0; border-bottom: 1px solid var(--line-soft); }

.turns { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.turn { max-width: 88%; }
.turn--ai { align-self: flex-start; }
.turn:not(.turn--ai) { align-self: flex-end; text-align: right; }
.turn__who {
  display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-1);
}
.turn--ai .turn__who { color: var(--brand-ink); }
.turn p {
  margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.turn--ai p { background: var(--brand-soft); border-color: #f7dbcd; }

.turns__foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.turns__note { font-size: var(--t-micro); color: var(--ink-mute); }

/* Behavior-to-booking-lift table. Same hairline construction as the ladder
   below, so the two sections read as one family. Numbers are tabular so the
   percent and lift columns stay on a common vertical rhythm. */
.lift-table { border-top: 1px solid var(--line); }
.lift-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, .78fr));
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.lift-row--head {
  padding: var(--sp-3) 0;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute);
}
.lift-row:last-child { border-bottom: 0; }
.lift-name { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.lift-val {
  text-align: right; font-size: var(--t-base); font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.lift-val--dim { color: var(--ink-dim); font-weight: 500; }
/* Sample size rides with its percentage rather than getting its own column. */
.lift-val i { font-style: normal; font-size: var(--t-micro); font-weight: 500; color: var(--ink-mute); }
.lift-delta {
  text-align: right; font-size: var(--t-base); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lift-delta--up   { color: var(--good); }
.lift-delta--down { color: var(--brand-deep); }
.lift-note { margin: var(--sp-6) 0 0; max-width: 620px; font-size: var(--t-xs); color: var(--ink-mute); }


/* Numbered ruled ladder — Relume Layout 611 pattern: hairline rows +
   display numerals. Replaces a 3-up card grid and reuses the hairline motif. */
.ladder { border-top: 1px solid var(--line); }
.ladder__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.45fr);
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
}
.ladder__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-3xl); line-height: .9; letter-spacing: -.03em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.ladder__row:last-child { border-bottom: 0; }
.ladder__title { font-size: var(--t-md); margin: 0; padding-top: var(--sp-1); }
.ladder__desc { color: var(--ink-dim); font-size: var(--t-base); margin: 0; padding-top: var(--sp-1); }

/* Three-column variant. The section sits under the lift table, which is also
   hairline rows, so the dividers turn vertical and the numerals cap each column
   instead of leading each row. Falls back to the stacked ladder under 860px. */
.ladder--cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
.ladder--cols .ladder__row {
  display: block;
  padding: 0 var(--sp-8);
  border-bottom: 0;
  border-left: 1px solid var(--line);
}
.ladder--cols .ladder__row:first-child { padding-left: 0; border-left: 0; }
.ladder--cols .ladder__row:last-child { padding-right: 0; }
.ladder--cols .ladder__num { display: block; margin-bottom: var(--sp-5); }
.ladder--cols .ladder__title { padding-top: 0; margin-bottom: var(--sp-3); }
.ladder--cols .ladder__desc { padding-top: 0; }

/* ===========================================================
   Pricing
   =========================================================== */
.bill-toggle { display: inline-flex; gap: 4px; margin: 28px auto 0; padding: var(--sp-1); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-full); }
.bill-toggle__btn { font-family: var(--font-body); font-weight: 600; font-size: var(--t-xs); color: var(--ink-dim); background: transparent; border: 0; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-full); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); display: inline-flex; align-items: center; gap: var(--sp-2); }
.bill-toggle__btn.is-active { background: var(--paper); color: var(--ink-strong); box-shadow: var(--shadow-sm); }
.bill-toggle__save { font-size: var(--t-micro); font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); padding: 2px var(--sp-2); border-radius: var(--r-full); }

.grid--pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: var(--card-pad-lg); }
.plan--feat { outline: 2px solid var(--brand); outline-offset: -2px; box-shadow: var(--shadow-md); position: relative; }
.plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: var(--t-micro); font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); white-space: nowrap; }
.plan__name { font-size: var(--t-lg); }
.plan__from { font-size: var(--t-xs); color: var(--ink-mute); font-weight: 500; margin-right: 6px; align-self: center; }
.plan__tiers { font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--sp-4); }
.plan__price { font-family: var(--font-display); font-weight: 600; margin: 12px 0 4px; letter-spacing: -.03em; display: flex; align-items: baseline; }
.plan__cur { font-size: var(--t-lg); }
.plan__amt { font-size: var(--t-3xl); }
.plan__per { font-size: var(--t-xs); color: var(--ink-mute); font-weight: 500; margin-left: 3px; }
.plan__for { color: var(--ink-dim); font-size: var(--t-xs); margin: 0 0 20px; }
.plan__feats { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); flex: 1; }
.plan__feats li { font-size: var(--t-xs); padding-left: 24px; position: relative; }
.plan__feats li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
/* Footnote under a tier line, on the hairline motif. Used where a plan has an
   option that belongs in a conversation rather than on the card. */
.plan__note {
  font-size: var(--t-2xs); color: var(--ink-dim); line-height: 1.5;
  margin: 0 0 var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
}
/* The calculator that answers the question a card raises. Sits ABOVE the
   CTA on purpose: nothing below the button means every card's Book a demo
   still lands on the same line, whether or not the card carries a link. */
.plan__tool { text-align: center; margin: 0 0 var(--sp-4); }
.plan__tool a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-strong);
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.plan__tool a > span {
  padding-bottom: var(--sp-1); border-bottom: 2px solid var(--brand);
  transition: border-color .18s var(--ease);
}
.plan__tool a:hover { color: var(--brand-ink); gap: var(--sp-3); }
.plan__tool a:hover > span { border-bottom-color: var(--brand-deep); }
.plan__tool svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--brand); transition: transform .2s var(--ease); }
.plan__tool a:hover svg { transform: translateX(3px); }

/* ===========================================================
   Testimonial
   =========================================================== */
/* The ledger's last row keeps its sp-8 padding but loses its hairline, so the
   section padding gives that back to keep bottom whitespace equal to the top. */
.quote-sec { text-align: center; padding-bottom: calc(var(--section-y) - var(--sp-8)); }
/* The whole team, seat by seat. Same hairline rail construction as the
   integrations deflist so the two ledgers read as one family, but the rail
   carries the seat and the body is a quote. */
.voices { border-top: 1px solid var(--line); text-align: left; }
.voice {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
}
.voice:last-child { border-bottom: 0; }
/* Brand-ink like the integrations statuses and mc-tags: the section's one
   spot of colour since the stars left with the old centerpiece. */
.voice__seat {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-ink); padding-top: var(--sp-2);
}
/* One body can hold two entries (the owners share a seat); the wide gap is
   between people, the narrow one inside each person's quote/toggle/name stack. */
.voice__body { display: flex; flex-direction: column; gap: var(--sp-8); }
.voice__entry { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.voice__quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-md); line-height: 1.5; letter-spacing: -.015em;
  color: var(--ink-strong); margin: 0; max-width: 62ch;
}
.voice__quote p { margin: 0; }
/* The excerpt is the hook; the toggle swaps in the complete testimonial in its
   place, so the full note reads start to finish rather than as an appendix. */
.voice__fulltext { display: none; }
.voice__entry.is-open .voice__short { display: none; }
.voice__entry.is-open .voice__fulltext { display: block; }
/* Quiet text toggle riding inline at the end of the visible quote, so the
   attribution stays snug under the text. The arrow is currentColor and thin,
   deliberately no louder than the words next to it. */
.voice__more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-mute);
  white-space: nowrap; transition: color .2s var(--ease);
}
.voice__more:hover { color: var(--ink); }
/* Points right when there is more to read, up when the note can collapse. */
.voice__chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .22s var(--ease); flex-shrink: 0;
}
.voice__more[aria-expanded="true"] .voice__chev { transform: rotate(-135deg); }
/* Face plus name travel as one group, the same object Mark's old centerpiece
   attribution was: photo left, name over role. */
.voice__by { margin: 0; display: flex; align-items: center; gap: var(--sp-3); }
/* The headshots have white studio backgrounds and the page is white, so
   without a ring the circle has no edge and the head appears to float. The
   hairline is the same one the tables and the ledgers use. */
.voice__face {
  width: var(--sp-12); height: var(--sp-12); flex: none; border-radius: var(--r-full);
  object-fit: cover; background: var(--bg-alt);
  box-shadow: 0 0 0 1px var(--line);
}
.voice__id { display: flex; flex-direction: column; gap: 2px; }
.voice__name { font-weight: 700; font-size: var(--t-sm); color: var(--ink); }
.voice__role { color: var(--ink-mute); font-size: var(--t-xs); }

/* ===========================================================
   Integrations grid
   =========================================================== */
/* Grouped description list — Relume Description List 2 pattern:
   ruled term / definition rows. Replaces six interchangeable logo cells. */
.deflist { border-top: 1px solid var(--line); }
.deflist__row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--line);
}
.deflist__term {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-md); color: var(--ink-strong); letter-spacing: -.02em; margin: 0;
}
.deflist__def { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
/* Status + names on one line so "Connected" and "On request" read as a set.
   Plain uppercase labels rather than chips, matching the overline treatment. */
.deflist__group { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.deflist__status {
  flex: none; min-width: 104px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.deflist__status--live { color: var(--brand-ink); }
.deflist__names {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-base); color: var(--ink); letter-spacing: -.01em;
}
.deflist__names i { color: var(--ink-faint); font-style: normal; margin: 0 var(--sp-1); }
.deflist__note { color: var(--ink-dim); font-size: var(--t-xs); max-width: 60ch; margin-top: var(--sp-1); }
.integ__more { color: var(--ink-mute); font-size: var(--t-xs); margin: var(--sp-6) 0 0; max-width: 60ch; }

/* ===========================================================
   FAQ
   =========================================================== */
.faq__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--sp-5); box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); color: var(--ink-strong); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { width: 11px; height: 11px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform .22s var(--ease); flex-shrink: 0; margin-right: 4px; }
.faq__item[open] .faq__chev { transform: rotate(-135deg); }
.faq__item p { margin: 0; padding: 0 0 var(--sp-5); color: var(--ink-dim); font-size: var(--t-sm); max-width: 640px; }

/* ===========================================================
   CTA band + footer
   =========================================================== */
.cta-band { background: var(--ground); background-image: radial-gradient(70% 120% at 50% -10%, rgba(231,104,74,.5), transparent 60%); color: #fff; position: relative; z-index: 2; overflow: hidden; }
/* The CTA and the footer are one continuous dark ground. They share a colour
   token AND this grain: overlay on a near-black base still swings the pixels by
   about eight levels, so grain on one side only leaves a visible seam even when
   the two colours match exactly. */
.cta-band::before, .footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  /* Anchored to the viewport, not to each element, so the noise tile does not
     restart its phase at the boundary. Two separately-tiled fields meeting mid
     pattern reads as a line even when both are the same colour. iOS Safari
     ignores fixed attachment and falls back to per-element tiling, which is the
     behaviour we had before, so this degrades to no worse than the old seam. */
  background-attachment: fixed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.cta-band__inner { max-width: 720px; margin: 0 auto; padding: var(--section-y) var(--gutter); text-align: center; position: relative; z-index: 1; }
.cta-band__mark { display: inline-grid; place-items: center; width: 62px; height: 62px; margin-bottom: var(--sp-5); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xl); }
.cta-band__mark img { width: 34px; height: 34px; }
.cta-band__title { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.cta-band__lede { color: rgba(255,255,255,.72); font-size: var(--t-md); margin: 18px auto 30px; max-width: 520px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }

/* margin-top:-1px is not a nudge, it is a seam fix. The CTA is content-sized, so
   its bottom lands on a fractional pixel (527.92 at 1440), and the browser
   antialiases that edge against the white body underneath, leaving a pale hairline
   between two blocks that are otherwise the same colour. Overlapping by a pixel
   puts the footer over that edge. Verified: identical flat colours still seam
   without this, and stop the moment it is applied. */
.footer { background: var(--ground); color: rgba(255,255,255,.7); position: relative; z-index: 2; margin-top: -1px; }
.footer__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: var(--sp-16) var(--gutter) var(--sp-10); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); }
.footer__logo { height: 26px; margin-bottom: var(--sp-4); }
.footer__tag { font-size: var(--t-sm); max-width: 320px; margin: 0 0 14px; line-height: 1.5; }
.footer__made { font-size: var(--t-xs); color: rgba(255,255,255,.5); margin: 0; }
.footer__made a { color: var(--brand-amber); font-weight: 600; }
.footer__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-7); }
.footer__col h4 { font-family: var(--font-body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 14px; }
.footer__col a { display: block; font-size: var(--t-xs); padding: var(--sp-2) 0; color: rgba(255,255,255,.72); transition: color .15s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__base { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5) var(--gutter); border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--t-xs); color: rgba(255,255,255,.45); }

/* ===========================================================
   Reveal animations
   =========================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--reveal-delay, 0) * 90ms); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ----------------------------------------------------------------
   Scroll-LINKED motion (the "weight"). Where the browser supports
   native CSS scroll-driven animations, the entrance SLIDE is scrubbed
   to the scroll position (content eases up as you scroll, off the main
   thread — scrolling stays 100% native).

   Deliberately TRANSFORM-ONLY: opacity stays owned by the JS reveal
   (.is-visible) above, so content is ALWAYS guaranteed to become
   visible. If a browser ever supports the syntax but doesn't advance
   the timeline, the worst case is "no slide", never "invisible".
   NB: set animation-* via longhands AFTER animation-timeline — the
   `animation` shorthand would reset the timeline.
   ---------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      transition: opacity .7s var(--ease);   /* opacity still fades in via JS .is-visible */
      animation-name: reveal-scrub;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    /* Mild cascade for items flagged with a stagger index. */
    .reveal[data-reveal-delay="1"] { animation-range: entry 7%  entry 100%; }
    .reveal[data-reveal-delay="2"] { animation-range: entry 14% entry 100%; }
    .reveal[data-reveal-delay="3"] { animation-range: entry 20% entry 100%; }
    @keyframes reveal-scrub {
      from { transform: translateY(46px); }
      to   { transform: translateY(0); }
    }

  }
}

/* ===========================================================
   Cost comparison (savings.html)

   Built from the same constructions as the home page: a hero, one
   titled .panel holding the whole instrument, regions divided by
   hairlines rather than nested cards (cards inside cards muddy the
   edges), and the result carried by a full-bleed warm band.

   Authored mobile-first, min-width to widen, rather than the
   desktop-first collapse the sections above use. This is the one
   page whose primary reader is on a phone. Its responsive rules
   stay in this block so it reads as one self-contained unit.
   =========================================================== */
.calc [hidden], .calc-answer [hidden] { display: none !important; }

/* The hero carries no CTA row: the instrument below it is the CTA,
   so the page should reach it in one screen rather than two. */
.hero--calc { padding-bottom: var(--sp-10); }

/* ---- The panel ---- */
.calc { padding-top: 0; }
.panel--calc { box-shadow: var(--shadow-md); }

/* ---- Inputs: one full-width row across the top ---- */
.calc__inputs { padding: var(--sp-6) var(--card-pad-lg) var(--sp-5); }
.calc__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }

.field__label {
  display: block; font-size: var(--t-2xs); font-weight: 600;
  color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.field__wrap {
  display: flex; align-items: center; gap: var(--sp-1);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0 var(--sp-4);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.field__wrap:hover { border-color: var(--line-strong); }
.field__wrap:focus-within { background: var(--paper); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* The per-job fee is the number the page exists to surface, so its field
   is tinted to draw the eye and to match its segment in the bar below. */
.field--hot .field__wrap { background: var(--warm-tint); border-color: #ffd9c2; }
.field--hot .field__wrap:focus-within { background: var(--paper); }
.field--hot .field__prefix { color: var(--brand-ink); }

/* Display face at --t-lg: readable across a desk, and over the 16px floor
   below which iOS zooms the viewport on focus. */
.field__input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: transparent; padding: var(--sp-3) 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg);
  letter-spacing: -.02em; color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.field__input:focus { outline: none; }
.field__input::placeholder { color: var(--ink-faint); font-weight: 500; }
.field__prefix, .field__suffix {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg);
  color: var(--ink-mute); flex-shrink: 0;
}
.field__suffix { font-size: var(--t-sm); }
.field__hint { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.45; margin: var(--sp-2) 0 0; max-width: 46ch; }
.field__warn {
  font-size: var(--t-xs); color: var(--warn); background: var(--warn-soft);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); line-height: 1.45;
  margin: var(--sp-4) 0 0;
}

.calc__meta { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.calc__meta-note { font-size: var(--t-xs); color: var(--ink-mute); margin: 0; max-width: 60ch; line-height: 1.45; }
.calc__adv > summary {
  display: inline-flex; align-items: center; gap: var(--sp-2); list-style: none; cursor: pointer;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim);
}
.calc__adv > summary::-webkit-details-marker { display: none; }
.calc__adv[open] > summary { color: var(--ink); }
/* The shared chevron hinges off .faq__item[open]; give it the same hinge here. */
.calc__adv[open] > summary .faq__chev { transform: rotate(-135deg); }
.field--adv { max-width: 260px; margin-top: var(--sp-4); }

/* ---- Empty state ---- */
.calc__empty {
  font-size: var(--t-md); color: var(--ink-mute); text-align: center; margin: 0;
  border-top: 1px solid var(--line-soft); padding: var(--sp-16) var(--card-pad);
}

/* ---- The comparison bar ---- */
.cbar { border-top: 1px solid var(--line-soft); padding: var(--sp-6) var(--card-pad-lg); }
.cbar__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.cbar__who { font-size: var(--t-2xs); font-weight: 600; color: var(--ink-dim); grid-column: 1 / -1; }
.cbar__track {
  display: flex; height: 22px; border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
}
.cbar__seg {
  display: block; width: var(--w, 0%); height: 100%;
  transition: width .35s var(--ease);
}
.cbar__seg--base { background: var(--line-strong); }
.cbar__seg--job  { background: var(--warm); }
.cbar__seg--ours { background: var(--ground); }
.cbar__val {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-md);
  color: var(--ink-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cbar__key { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.cbar__keyitem { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-micro); font-weight: 600; color: var(--ink-mute); }
.cbar__keyitem::before { content: ""; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cbar__keyitem--base::before { background: var(--line-strong); }
.cbar__keyitem--job::before  { background: var(--warm); }
.cbar__keyitem--ours::before { background: var(--ground); }

/* ---- The two cost columns, on hairlines ---- */
.calc__cols { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.calc__col { padding: var(--sp-6) var(--card-pad-lg); border-top: 1px solid var(--line); }
.calc__col:first-child { border-top: 0; }
.calc__colhead {
  font-family: var(--font-body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--sp-3);
}
.res__lines { margin: 0; }
.res__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft);
}
.res__line dt { font-size: var(--t-sm); color: var(--ink-dim); margin: 0; }
.res__line dd {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-md);
  color: var(--ink-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The per-job line is the one prospects forget, so it carries the brand tone
   and matches its segment in the bar above. */
.res__line--accent dt, .res__line--accent dd { color: var(--brand-ink); }
.res__line--accent dt { font-weight: 600; }
.res__line--zero dd { color: var(--good); font-size: var(--t-sm); }
.res__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-dim); margin: var(--sp-4) 0 0;
}
.res__total b {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl);
  color: var(--ink-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.res__why { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.5; margin: var(--sp-4) 0 0; }
.res__why--flag {
  color: var(--warn); background: var(--warn-soft);
  border-radius: var(--r-sm); padding: var(--sp-3); margin-top: var(--sp-3);
}

/* ---- The answer band ---- */
.calc-answer { margin-top: var(--section-y); }
.calc-answer__head { grid-template-columns: 1fr; gap: var(--sp-8); align-items: start; }
.calc-answer__label {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin: 0;
}
.calc-answer__annual {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.8rem, 7vw, 4.4rem);
  letter-spacing: -.05em; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; margin: var(--sp-3) 0 0;
}
.calc-answer__sub { font-size: var(--t-md); color: rgba(255,255,255,.8); margin: var(--sp-2) 0 0; }
.calc-answer__monthly {
  font-size: var(--t-sm); color: rgba(255,255,255,.72); margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.22); max-width: 30ch;
}
/* Break-even sits at body size on the band, deliberately not fine print. */
.calc-answer__breakeven {
  font-size: var(--t-base); line-height: 1.55; color: #fff; margin: 0;
  padding-left: var(--sp-5); border-left: 2px solid rgba(255,255,255,.4); max-width: 46ch;
}
.calc-answer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
/* Own line, height always reserved, so confirming a copy never shifts the
   buttons under the reader's thumb. */
.calc-answer__copynote { flex: 1 0 100%; min-height: 1.3em; font-size: var(--t-xs); font-weight: 600; color: #fff; margin: 0; }
.calc-answer__fine { font-size: var(--t-xs); color: rgba(255,255,255,.5); line-height: 1.5; margin: var(--sp-5) 0 0; }
/* When the arithmetic comes out against us the band drops to the neutral
   dark ground rather than celebrating a number that is not a saving. */
.calc-answer.is-negative { background-image: none; background: var(--ground); box-shadow: none; }
.calc-answer.is-negative .calc-answer__label { color: rgba(255,255,255,.55); }

/* ---- Booking impact: tier and basis controls ---------------------
   The tier is CHOSEN, not sized by volume the way the Inbound plan is:
   Team's minute and simulator-session allowances are not published
   here yet, so the page claims nothing about what a tier contains. */
.calc__controls {
  display: flex; flex-direction: column; gap: var(--sp-5);
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line-soft);
}
.control__label {
  display: block; font-size: var(--t-2xs); font-weight: 600; color: var(--ink-mute);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sp-2);
}
.segmented {
  display: inline-flex; flex-wrap: wrap; gap: var(--sp-1);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-1);
}
.segmented__opt { position: relative; }
.segmented__opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented__opt span {
  display: block; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.segmented__opt span i { font-style: normal; font-weight: 500; color: var(--ink-mute); margin-left: var(--sp-1); }
.segmented__opt input:hover + span { color: var(--ink); }
.segmented__opt input:checked + span { background: var(--paper); color: var(--ink-strong); box-shadow: var(--shadow-sm); }
.segmented__opt input:checked + span i { color: var(--brand-ink); }
.segmented__opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
#margin-field { max-width: 200px; margin: 0; }

/* ---- Booking-rate bar with the break-even notch ---- */
.ratebar-wrap { padding-top: var(--sp-6); }
.ratebar__head {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--sp-3);
}
.ratebar__track { position: relative; height: 26px; border-radius: var(--r-sm); background: var(--surface); }
.ratebar__fill {
  display: block; width: var(--w, 0%); height: 100%;
  border-radius: var(--r-sm); background: var(--warm); transition: width .35s var(--ease);
}
/* The notch usually lands a hair to the right of the fill edge, and that
   near-overlap IS the argument. Drawn as a hard rule with a paper halo so
   it stays legible sitting on top of the fill rather than beside it. */
.ratebar__notch {
  position: absolute; top: -3px; bottom: -3px; left: var(--at, 0%);
  width: 2px; background: var(--ink-strong); box-shadow: 0 0 0 2px var(--paper);
  transition: left .35s var(--ease);
}
.ratebar__marks { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5); }
.ratebar__mark { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-mute); }
.ratebar__mark b {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 600;
  color: var(--ink-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ratebar__mark::before { content: ""; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ratebar__mark--now::before { background: var(--warm); }
.ratebar__mark--be::before { background: var(--ink-strong); }

/* ---- Sensitivity table ---- */
.sens { border-top: 1px solid var(--line); padding: var(--sp-6) var(--card-pad-lg); }
.sens__head { margin-bottom: var(--sp-4); }
.sens__caveat { font-size: var(--t-xs); color: var(--ink-mute); margin: var(--sp-2) 0 0; max-width: 60ch; line-height: 1.45; }
.sens__table { border-top: 1px solid var(--line); }
.sens__row {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft); align-items: baseline;
}
.sens__row--head { display: none; }
.sens__pts {
  grid-column: 1 / -1; font-family: var(--font-display); font-size: var(--t-md);
  font-weight: 600; color: var(--ink-strong); letter-spacing: -.02em;
}
.sens__val { font-size: var(--t-sm); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.sens__val--year { font-weight: 600; color: var(--ink-strong); }
/* A lift that still does not cover the plan is stated, not hidden. */
.sens__row--under .sens__val { color: var(--warn); }
/* Stacked, so each figure carries its own label rather than relying on a
   header row that cannot fit five columns on a phone. */
.sens__val::before {
  display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px;
}
.sens__row .sens__val:nth-child(2)::before { content: "More jobs"; }
.sens__row .sens__val:nth-child(3)::before { content: "A month"; }
.sens__row .sens__val:nth-child(4)::before { content: "Net"; }
.sens__row .sens__val:nth-child(5)::before { content: "Net a year"; }

/* Entry point into the comparison from the pricing section. The rule sits on
   the text span, not the anchor: underlining the flex row would carry the line
   under the arrow and through the gap beside it. */


@media (min-width: 620px) {
  .calc__row { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
  .cbar__row { grid-template-columns: 170px 1fr auto; }
  .cbar__who { grid-column: auto; }
}

@media (min-width: 920px) {
  .calc__inputs { padding: var(--sp-7) var(--card-pad-lg) var(--sp-6); }
  .calc__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calc__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Controls sit on one line: plan, basis, and the margin field the basis
     reveals. align-items:end keeps their inputs on a shared baseline. */
  .calc__controls { flex-direction: row; align-items: flex-end; gap: var(--sp-8); flex-wrap: wrap; }
  /* Five columns and the header row returns; the per-cell labels go away. */
  .sens__row { grid-template-columns: 132px repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
  .sens__row--head {
    display: grid; padding: var(--sp-3) 0;
    font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-mute);
  }
  .sens__pts { grid-column: auto; }
  .sens__val { text-align: right; }
  .sens__val::before { display: none; }
  .calc__meta { flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); }
  .calc__meta-note { text-align: right; max-width: 44ch; }
  .calc__adv { flex-shrink: 0; }
  .cbar { padding: var(--sp-7) var(--card-pad-lg); }
  .cbar__row { grid-template-columns: 200px 1fr 110px; margin-bottom: var(--sp-5); }
  .cbar__val { text-align: right; }
  /* Two columns split by a single vertical hairline, no nested boxes. */
  .calc__cols { grid-template-columns: 1fr 1fr; }
  .calc__col { border-top: 0; border-left: 1px solid var(--line); }
  .calc__col:first-child { border-left: 0; }
  .calc-answer__head { grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 920px) {
  .nav__inner, .mobile-menu { padding-inline: 24px; }
  .nav__links { display: none; }
  .nav__actions .btn--nav { display: none; }
  .nav__toggle { display: inline-flex; flex-direction: column; gap: 5px; justify-content: center; width: 42px; height: 38px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; }
  .nav__toggle span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 0 auto; border-radius: var(--r-xs); }
  .mobile-menu.is-open { display: flex; }

  /* horizontal gutter now comes from --gutter (responsive) — no override needed */
  .band__inner { padding: var(--sp-12) var(--sp-8); }
  .band__head, .features .feat-lead, .feat-row, .spot, .strip__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .spot--flip .spot__copy { order: 1; }
  .spot--flip .spot__art { order: 2; }
  .band__tabs, .grid--mini, .grid--pricing { grid-template-columns: 1fr 1fr; }
  /* Once the grid stacks, the bundle goes last: it pitches "both products",
     so both products have to scroll past first. Full-width here, and the
     order carries into the single column below 560px. */
  .grid--pricing .plan--feat { order: 3; grid-column: 1 / -1; }
  .footer__inner { grid-template-columns: 1fr; gap: var(--sp-8); }

  /* Lift table: behavior name takes its own line, the three numbers sit under
     it as a labelled trio so nothing has to fit four columns on a phone. */
  .lift-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
  .lift-row--head { display: none; }
  .lift-name { grid-column: 1 / -1; }
  .lift-val, .lift-delta { text-align: left; font-size: var(--t-sm); }
  .lift-val::before, .lift-delta::before {
    display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px;
  }
  .lift-val::before { content: "Met"; }
  .lift-val--dim::before { content: "Missed"; }
  .lift-delta::before { content: "Lift"; }

  /* Stacked again, so the last row trails 32px of padding with no hairline under
     it. Pull the section padding back by the same amount to even up top and
     bottom whitespace; in column mode the rows have no vertical padding to fix. */
  .sizes { padding-bottom: calc(var(--section-y) - var(--sp-8)); }
  /* Columns collapse back to the stacked ladder, hairlines and all. */
  .ladder--cols { display: block; border-top: 1px solid var(--line); }
  .ladder--cols .ladder__row { padding: var(--sp-8) 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .ladder--cols .ladder__row:first-child { padding-left: 0; }
  .ladder--cols .ladder__row:last-child { border-bottom: 0; }
  .ladder--cols .ladder__num { margin-bottom: var(--sp-3); }

  /* Ladder: numeral spans both rows, title + description stack beside it. */
  .ladder__row { grid-template-columns: 60px minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); }
  .ladder__num { grid-row: 1 / span 2; font-size: var(--t-xl); }
  .ladder__desc { grid-column: 2; padding-top: 0; }
  /* Description list: term above definition. */
  .deflist__row { grid-template-columns: 1fr; gap: var(--sp-3); }
  /* Voices ledger: seat label above the quote, same collapse as the deflist. */
  .voice { grid-template-columns: 1fr; gap: var(--sp-3); }
  .voice__seat { padding-top: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* .section vertical rhythm + gutter both come from tokens */
  .hero { padding: 116px var(--gutter) var(--sp-8); }
  .hero__art { margin-top: var(--sp-12); }
  .dash__kpis { grid-template-columns: 1fr; }
  /* Trajectory: the label needs a full line here or "Booking rate" wraps mid-phrase. */
  .traj__row { grid-template-columns: 1fr auto; }
  .traj__label { grid-column: 1 / -1; margin-bottom: 2px; }
  .band__inner { padding: var(--sp-8) var(--sp-5); }
  .band__tabs, .grid--mini, .grid--pricing { grid-template-columns: 1fr; }
  /* Cells stack, so the dividers go horizontal and the first cell keeps its indent. */
  .impact__grid { grid-template-columns: 1fr; }
  .impact__cell { padding: var(--sp-4) 0; border-left: 0; border-top: 1px solid var(--line); }
  .impact__cell:first-child { border-top: 0; padding-top: var(--sp-4); }
  .impact { padding: var(--sp-5); }
  .features .feat-lead { padding: var(--card-pad); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__base { flex-direction: column; }
  .hero__cta, .cta-band__actions { flex-direction: column; }
  .hero__cta .btn, .cta-band__actions .btn { width: 100%; }
  .trow { grid-template-columns: 1.3fr .8fr .9fr; }
  .trow span:nth-child(3) { display: none; }
  .rule { height: 56px; }
}