:root{--fb-accent:#164f3c;--fb-accent-contrast:#ffffff;--fb-code-surface:rgba(20,30,50,.06);--fb-hover:rgba(20,30,50,.05);--fb-danger:#c0392b;--fb-font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--fb-ink:#172033;--fb-paper:#f5f7fb;--fb-muted:#667085;--fb-line:#dce2ed;--fb-surface:#ffffff;--fb-radius:16px;--fb-font-family:Inter, ui-sans-serif, system-ui, sans-serif;--fb-font-body:Inter, ui-sans-serif, system-ui, sans-serif;--fb-font-heading:Inter, ui-sans-serif, system-ui, sans-serif;--fb-text-xs:12px;--fb-text-sm:14px;--fb-text-md:16px;--fb-text-lg:20px;--fb-text-xl:25px;--fb-text-2xl:31px;--fb-text-3xl:39px;--fb-space-1:4px;--fb-space-2:8px;--fb-space-3:12px;--fb-space-4:16px;--fb-space-5:24px;--fb-space-6:32px;--fb-space-7:48px;--fb-space-8:64px;--fb-measure:68ch;--fb-focus:#164f3c;--fb-shadow-1:0 1px 3px color-mix(in srgb, #172033 10%, transparent);--fb-shadow-2:0 4px 12px color-mix(in srgb, #172033 14%, transparent);--fb-shadow-3:0 12px 32px color-mix(in srgb, #172033 20%, transparent);--accent:var(--fb-accent);--ink:var(--fb-ink);--paper:var(--fb-paper);--muted:var(--fb-muted);--line:var(--fb-line);--surface:var(--fb-surface);font-family:var(--fb-font-body)}h1,h2,h3,h4,h5,h6{font-family:var(--fb-font-heading)}:focus-visible{outline:2px solid var(--fb-focus);outline-offset:2px}html[data-fb-theme="calm"]{--fb-ink:#3d3a34;--fb-line:#d8d1c2;--fb-muted:#676153;--fb-paper:#f4f1ea;--fb-accent:#4f5c48;--fb-surface:#eae5d9;--fb-accent-contrast:#f4f1ea;--fb-accent-2:#c2703f;}html[data-fb-theme="dark"]{--fb-ink:#e8f0ec;--fb-line:#263531;--fb-muted:#9db0a8;--fb-paper:#0d1412;--fb-accent:#5fd6a4;--fb-surface:#16201d;--fb-accent-contrast:#06110d;--fb-accent-2:#d9f248;}html[data-fb-theme="cyber"]{--fb-ink:#b9ffe9;--fb-line:#2c1a5e;--fb-muted:#a596e8;--fb-paper:#05010f;--fb-accent:#00e5b0;--fb-surface:#12042c;--fb-accent-contrast:#05010f;--fb-accent-2:#ff2d95;}html[data-fb-theme="light"]{--fb-ink:#101a17;--fb-line:#d9e0dc;--fb-muted:#55635e;--fb-paper:#f6f7fb;--fb-accent:#164f3c;--fb-surface:#eff3ed;--fb-accent-contrast:#ffffff;--fb-accent-2:#d9f248;}@media (prefers-color-scheme:light){html:not([data-fb-theme]){--fb-ink:#101a17;--fb-line:#d9e0dc;--fb-muted:#55635e;--fb-paper:#f6f7fb;--fb-accent:#164f3c;--fb-surface:#eff3ed;--fb-accent-contrast:#ffffff;--fb-accent-2:#d9f248;}}@media (prefers-color-scheme:dark){html:not([data-fb-theme]){--fb-ink:#3d3a34;--fb-line:#d8d1c2;--fb-muted:#676153;--fb-paper:#f4f1ea;--fb-accent:#4f5c48;--fb-surface:#eae5d9;--fb-accent-contrast:#f4f1ea;--fb-accent-2:#c2703f;}}
.fb-block{grid-column:1/-1;flex-basis:100%}
.sc-nav-item{position:relative;display:inline-flex;align-items:center}.sc-nav-sub{position:absolute;left:0;top:100%;z-index:50;display:flex;flex-direction:column;min-width:max-content;gap:1px;padding:5px;margin-top:6px;background:var(--fb-paper,#fff);border:1px solid color-mix(in srgb, var(--fb-line,rgba(20,30,50,.18)) 55%, transparent);border-radius:calc(var(--fb-radius,12px) * .4);box-shadow:var(--fb-shadow-1,0 1px 3px rgb(15 23 42 / 10%)),var(--fb-shadow-2,0 4px 12px rgb(15 23 42 / 14%));visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity 140ms ease,transform 140ms ease,visibility 0s linear 140ms}.sc-nav-sub::before{content:"";position:absolute;left:0;right:0;top:-7px;height:7px}.sc-nav-sub .sc-nav-sub{top:18px;left:100%;margin:0 0 0 6px}.sc-nav-sub .sc-nav-sub::before{left:-7px;right:auto;top:-26px;bottom:0;width:7px;height:auto}.sc-nav .sc-nav-has-children>a{display:flex;align-items:center;gap:6px}.sc-nav .sc-nav-has-children>a::after{content:"";display:inline-block;flex:none;width:0;height:0;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;border-bottom-width:0;margin-top:1px;opacity:.6}.sc-nav-sub .sc-nav-has-children>a{justify-content:space-between}.sc-nav-sub .sc-nav-has-children>a::after{border:4px solid transparent;border-left-color:currentColor;border-right-width:0;margin:0 0 0 6px}.sc-nav-has-children:hover>.sc-nav-sub,.sc-nav-has-children:focus-within>.sc-nav-sub{visibility:visible;opacity:1;transform:translateY(0);transition:opacity 140ms ease,transform 140ms ease,visibility 0s}.sc-nav-sub>a,.sc-nav-sub .sc-nav-item>a{display:block;padding:7px 11px;border-radius:calc(var(--fb-radius,12px) * .28);transition:background-color 120ms ease,color 120ms ease}.sc-nav-sub>a:hover,.sc-nav-sub>a:focus-visible{background:var(--fb-hover,rgba(20,30,50,.06))}@media (prefers-reduced-motion:reduce){.sc-nav-sub{transform:none;transition:none}.sc-nav-has-children:hover>.sc-nav-sub,.sc-nav-has-children:focus-within>.sc-nav-sub{transform:none;transition:none}}.sc-page-index a[data-depth="1"]{margin-left:var(--fb-space-4,16px)}.sc-page-index a[data-depth="2"]{margin-left:var(--fb-space-6,32px)}.sc-page-index a[data-depth="3"]{margin-left:var(--fb-space-7,48px)}
/* styles/site.css */
:root {
  --ink: var(--fb-ink);
  --muted: var(--fb-muted);
  --line: var(--fb-line);
  --paper: var(--fb-paper);
  --white: var(--fb-paper);
  --green: var(--fb-accent);
  /* A second accent the palettes may set. Falls back to the one accent the
     platform theme knows about, so a site that only picks an accent still
     looks deliberate rather than half-coloured. */
  --lime: var(--fb-accent-2, var(--fb-accent));
  --soft: var(--fb-surface);
  /* An "ink band" paints the text colour as a background, so everything on it
     is the inverse of the page. Written as the paper token rather than white:
     on a dark palette --fb-ink is light, and white on light is the unreadable
     hero QA reported. */
  --on-ink: var(--fb-paper);
  /* 62% left this at about 2:1 against the band on the darker palettes, so it
     leans further toward the ground the band is drawn from. */
  --on-ink-muted: color-mix(in srgb, var(--fb-paper) 80%, var(--fb-ink));
  --on-ink-line: color-mix(in srgb, var(--fb-paper) 13%, transparent);
  --on-accent: var(--fb-accent-contrast);
  --radius: var(--fb-radius);
  --font: var(--fb-font-family);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
}

/* The template's own second accent. The palettes themselves now live in the
   manifest, where the platform can list them, map one to the system's dark
   preference, and check their contrast — none of which it could do while they
   were only a stylesheet rule. */
:root { --fb-accent-2: #d9f248; }

/* The picker. A <details> disclosure is something the browser already knows how to
   open, so a dropdown needs no script of its own; the platform closes it after
   a choice. */
.deal-theme { position: relative; justify-self: end; }
.deal-theme > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.75rem; color: var(--muted);
}
.deal-theme > summary::-webkit-details-marker { display: none; }
.deal-theme > summary::after { content: '▾'; font-size: 0.625rem; }
.deal-theme > summary:hover { color: var(--ink); }
.deal-theme-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  display: grid; gap: 2px; padding: 6px; min-width: 150px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.25);
}
.deal-theme-menu button {
  text-align: left; padding: 7px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; font-size: 0.8125rem; cursor: pointer;
}
.deal-theme-menu button:hover { background: var(--soft); }
/* Selected state reads the aria-pressed the platform maintains, so what is seen
   and what a screen reader is told cannot drift apart. */
.deal-theme-menu button[aria-pressed='true'] { color: var(--green); font-weight: 600; }
.deal-theme-menu button[aria-pressed='true']::after { content: ' ✓'; }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.deal-shell { min-height: 100vh; display: flex; flex-direction: column; }
.deal-header {
  position: sticky; top: 0; z-index: 20;
  /* Three tracks rather than space-between: the nav is centred against the
     page, not against whatever the brand and the control on the right happen
     to weigh, so it stays put when either changes width. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  height: 78px; padding: 0 clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
}
.deal-brand { justify-self: start; display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 750; letter-spacing: -.02em; }
.deal-brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--green); color: var(--on-accent); font-size: 0.875rem;
}
.deal-nav .sc-nav, .deal-nav { display: flex; gap: 28px; color: var(--muted); font-size: 0.8125rem; }
.deal-nav .sc-nav a { text-decoration: none; color: var(--muted); }
.deal-nav .sc-nav a:hover, .deal-nav a:hover { color: var(--ink); }
.deal-button {
  display: inline-block; vertical-align: middle; text-align: center;
  padding: 14px 20px; border-radius: 999px;
  background: var(--green); color: var(--on-accent);
  font-size: 0.8125rem; font-weight: 700; border: 0;
}
.deal-button > span { margin-left: 10px; }
.deal-button-ink { background: var(--ink); padding: 11px 17px; }
.deal-button-lime { background: var(--lime); color: var(--ink); }
.deal-text-link {
  border-bottom: 1px solid #aab3ad; padding: 9px 0;
  font-size: 0.8125rem; font-weight: 700;
}

.deal-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: auto; padding: 28px clamp(20px, 5vw, 72px) 36px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.75rem;
}

.deal-page { flex: 1; }
.deal-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: min(72vh, 640px);
  padding: 88px 20px 72px;
}
.deal-hero::before, .deal-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--green) 10%, transparent);
  pointer-events: none;
}
.deal-hero::before { width: 520px; height: 520px; top: 26px; }
.deal-hero::after { width: 720px; height: 720px; top: -76px; border-color: color-mix(in srgb, var(--green) 6%, transparent); }
.deal-hero > * { position: relative; z-index: 1; }
.deal-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--white) 70%, transparent);
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
  font-size: 0.625rem; font-weight: 700;
}
.deal-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #54b374; box-shadow: 0 0 0 3px #54b37421;
}
.deal-hero h1 {
  margin: 28px 0 22px; max-width: 14ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3rem, 7vw, 5.75rem); line-height: .94; letter-spacing: -.055em;
}
.deal-hero-copy {
  max-width: 620px; margin: 0; color: var(--muted);
  font-size: 1.0625rem; line-height: 1.65;
}
.deal-hero-copy strong { color: var(--ink); font-weight: 650; }
.deal-hero-actions {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 28px; margin-top: 34px;
}

.deal-briefing {
  display: grid; grid-template-columns: 1.05fr 1fr 1.05fr;
  width: min(1180px, 92vw); margin: 0 auto 96px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); overflow: hidden;
  box-shadow: 0 20px 60px #1928200f;
}
.deal-briefing article {
  display: flex; flex-direction: column; min-height: 260px;
  padding: 30px 32px; border-right: 1px solid var(--line);
}
.deal-briefing article:last-child { border-right: 0; }
.deal-section-number {
  color: var(--muted); letter-spacing: .14em; font-size: 0.625rem; font-weight: 800;
}
.deal-briefing h2 {
  margin: auto 0 10px; font-size: 1.375rem; letter-spacing: -.03em; font-weight: 600;
}
.deal-briefing p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.deal-briefing ul {
  list-style: none; margin: auto 0 0; padding: 0;
  display: grid; gap: 10px; color: var(--muted); font-size: 0.8125rem;
}
.deal-briefing li {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.deal-briefing li span { color: var(--ink); font-weight: 700; }
.deal-next-action { background: var(--green); color: var(--on-accent); }
/* On the accent surface, so they take the colour drawn for it. They used to
   be a fixed pale green, which on a light accent is pale on pale. */
.deal-next-action .deal-section-number,
.deal-next-action p { color: var(--on-accent); }
.deal-action-meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; color: var(--on-accent);
  text-transform: uppercase; letter-spacing: .08em; font-size: 0.6875rem;
}

.deal-band { padding: 110px clamp(20px, 5vw, 72px); }
.deal-band-ink { background: var(--ink); color: var(--on-ink); }
.deal-band-paper { background: var(--paper); }
.deal-band-soft { background: var(--soft); }
.deal-section-head {
  display: grid; grid-template-columns: 1.55fr .7fr; gap: clamp(24px, 6vw, 80px);
  align-items: end; max-width: 1180px; margin: 0 auto 50px;
}
.deal-kicker {
  color: var(--green); letter-spacing: .16em; font-size: 0.625rem; font-weight: 800;
}
/* An accent is chosen to read against the page, and the ink band is the page
   inverted — so a lime kicker on it is light on light the moment the palette
   goes dark. On the band, the band's own colours. */
.deal-band-ink .deal-kicker { color: var(--on-ink-muted); }
.deal-section-head h2,
.deal-closing h2 {
  margin: 14px 0 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.045em;
}
.deal-section-head > p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.65; }
.deal-band-ink .deal-section-head > p { color: var(--on-ink-muted); }

.deal-solution-grid {
  display: grid; grid-template-columns: .85fr 1.4fr; gap: clamp(28px, 5vw, 70px);
  align-items: center; max-width: 1180px; margin: 0 auto;
}
.deal-solution-points { display: grid; }
.deal-solution-points article {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px;
  padding: 25px 0; border-top: 1px solid var(--on-ink-line);
}
.deal-solution-points article:last-child { border-bottom: 1px solid var(--on-ink-line); }
.deal-solution-points article > span {
  /* These numerals live on the ink band, so they take the band's own muted
     colour. The accent is picked to read against the page, and the band is the
     page inverted. */
  color: var(--on-ink-muted); padding-top: 5px; font-size: 0.625rem; font-weight: 800;
}
.deal-solution-points h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; }
/* On the ink band, so the band's own muted rather than a grey picked once for
   one palette. The last literal in this file, and the last thing that stayed
   the same colour while everything around it changed. */
.deal-solution-points p { margin: 0; color: var(--on-ink-muted); font-size: 0.8125rem; line-height: 1.6; }
.deal-product-window {
  background: var(--soft); color: var(--ink);
  border: 1px solid var(--on-ink-line); border-radius: 15px;
  min-height: 420px; padding: 10px;
  transform: rotate(1deg);
  box-shadow: 0 30px 80px #00000055;
}
.deal-window-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px 10px 0 0; background: var(--soft);
  font-size: 0.6875rem; color: var(--muted);
}
.deal-window-top i {
  width: 8px; height: 8px; border-radius: 50%; background: #c5d0c7;
}
.deal-window-body { padding: 22px 18px 28px; }
.deal-window-body > span {
  display: block; margin-bottom: 8px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); font-size: 0.625rem; font-weight: 800;
}
.deal-window-body h3 {
  margin: 0 0 18px; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -.04em; line-height: 1.05;
}
.deal-metric-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 14px;
}
.deal-metric-strip div {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--paper);
}
/* Inside the mock UI, which sits on the page rather than on the band. A grey
   chosen once for one palette is grey on every other one. */
.deal-metric-strip small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 0.5625rem; }
.deal-metric-strip b { font-size: 1.125rem; letter-spacing: -.03em; }
.deal-chart-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--paper);
}
.deal-chart-card > span { font-size: 0.625rem; font-weight: 700; }
.deal-chart-bars {
  display: flex; align-items: end; gap: 12px; height: 100px;
  margin-top: 14px; padding: 0 8px; border-bottom: 1px solid var(--line);
}
.deal-chart-bars i {
  flex: 1; border-radius: 3px 3px 0 0; background: #c3d8ce;
}
.deal-chart-bars i:nth-child(1) { height: 28%; }
.deal-chart-bars i:nth-child(2) { height: 38%; }
.deal-chart-bars i:nth-child(3) { height: 48%; }
.deal-chart-bars i:nth-child(4) { height: 62%; }
.deal-chart-bars i:nth-child(5) { height: 74%; }
.deal-chart-bars i:nth-child(6) { height: 88%; background: var(--green); }

.deal-roi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; max-width: 1180px; margin: 0 auto;
}
.deal-roi-grid article {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; background: var(--white); min-height: 180px;
}
.deal-roi-grid small {
  display: block; margin-bottom: 28px;
  color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: 0.625rem; font-weight: 700;
}
.deal-roi-grid b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 3.25rem); letter-spacing: -.05em; line-height: 1;
}
.deal-roi-grid p { margin: 12px 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

.deal-pricing {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px;
  max-width: 980px; margin: 0 auto;
}
.deal-pricing-card, .deal-pricing-includes {
  border: 1px solid var(--line); border-radius: 18px; background: var(--white); padding: 32px;
}
.deal-pricing-card .deal-kicker { margin-bottom: 18px; }
.deal-pricing-card h3 {
  margin: 0 0 8px; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.04em;
}
.deal-pricing-lede {
  margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55;
}
.deal-pricing-note {
  margin: 0; color: var(--muted); font-size: 0.8125rem;
}
.deal-pricing-cta { margin: 28px 0 0; }
.deal-price {
  display: flex; align-items: baseline; gap: 8px; margin: 28px 0 8px;
  font-family: var(--display); font-size: clamp(2.625rem, 5vw, 4rem); letter-spacing: -.05em;
}
.deal-price span { font-family: var(--font); font-size: 0.875rem; color: var(--muted); }
.deal-pricing-includes ul {
  list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px;
}
.deal-pricing-includes li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  color: var(--muted); font-size: 0.875rem; line-height: 1.45;
}
.deal-pricing-includes li::before {
  content: "✓"; color: var(--green); font-weight: 700;
}

.deal-plan-progress { justify-self: end; min-width: 200px; }
.deal-plan-progress strong { display: block; font-size: 1.75rem; letter-spacing: -.04em; }
.deal-plan-progress > span { color: var(--on-ink-muted); font-size: 0.6875rem; }
.deal-plan-bar { height: 3px; margin-top: 15px; background: #394842; }
.deal-plan-bar i { display: block; height: 100%; width: 33%; background: var(--lime); }
.deal-plan-table {
  max-width: 1180px; margin: 0 auto; border-top: 1px solid var(--on-ink-line);
}
.deal-plan-row {
  display: grid; grid-template-columns: 2fr 1fr .7fr .6fr; gap: 16px;
  align-items: center; padding: 20px 12px;
  border-bottom: 1px solid var(--on-ink-line); font-size: 0.8125rem;
}
.deal-plan-header {
  color: var(--on-ink-muted); text-transform: uppercase; letter-spacing: .13em;
  font-size: 0.625rem; padding-top: 12px; padding-bottom: 12px;
}
.deal-status {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--on-ink-line); color: var(--on-ink-muted); font-size: 0.6875rem; font-weight: 700;
}
.deal-status-done { background: color-mix(in srgb, var(--lime) 18%, transparent); color: var(--lime); border-color: transparent; }
.deal-status-next { background: var(--lime); color: var(--ink); border-color: transparent; }
.deal-plan-hint {
  max-width: 1180px; margin: 22px auto 0; color: var(--on-ink-muted); font-size: 0.8125rem;
}

.deal-closing {
  text-align: center; padding: 120px 20px 100px; background: var(--ink); color: var(--on-ink);
}
.deal-closing .deal-kicker { color: var(--on-ink-muted); }
.deal-closing h2 { max-width: 12ch; margin-left: auto; margin-right: auto; }
.deal-closing > p {
  max-width: 520px; margin: 18px auto 0; color: #b7c7bf; font-size: 1rem; line-height: 1.6;
}
.deal-closing-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 36px;
}
.deal-closing-actions .deal-text-link {
  color: var(--on-ink); border-color: var(--on-ink-muted);
}
.deal-closing-meta {
  margin-top: 48px; color: var(--on-ink-muted); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase;
}

.deal-materials-intro {
  max-width: 760px; margin: 0 auto 48px; text-align: center;
}
.deal-materials-intro h1 {
  margin: 18px 0 14px; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.625rem, 6vw, 4.5rem); letter-spacing: -.05em; line-height: .98;
}
.deal-materials-intro p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.deal-doc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 1180px; margin: 0 auto;
}
.deal-doc-grid article {
  border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  padding: 26px; min-height: 210px; display: flex; flex-direction: column;
}
.deal-doc-grid small {
  color: var(--green); letter-spacing: .12em; text-transform: uppercase;
  font-size: 0.625rem; font-weight: 800;
}
.deal-doc-grid h2 {
  margin: 28px 0 10px; font-size: 1.375rem; letter-spacing: -.03em; font-weight: 600;
}
.deal-doc-grid p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55; flex: 1; }
.deal-doc-grid a { margin-top: 22px; font-size: 0.8125rem; font-weight: 700; color: var(--green); }

@media (max-width: 960px) {
  /* The header is a grid, so flex-wrap and a bare order could not stack it:
     order only moved the nav into the right-hand track, which pushed the
     theme control into the centre one. Restate the tracks instead. */
  .deal-header {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'brand theme' 'nav nav';
    row-gap: 12px; gap: 16px;
    height: auto; padding: 16px clamp(16px, 4vw, 28px);
  }
  .deal-brand { grid-area: brand; }
  .deal-theme { grid-area: theme; }
  /* Wraps rather than scrolls. Setting overflow-x to auto also clips on the
     other axis, because an unset overflow-y then computes to auto too — so a
     submenu hanging below the nav was cut off entirely at this width. */
  .deal-nav { grid-area: nav; width: 100%; flex-wrap: wrap; }
  .deal-briefing,
  .deal-solution-grid,
  .deal-section-head,
  .deal-roi-grid,
  .deal-pricing,
  .deal-doc-grid { grid-template-columns: 1fr; }
  .deal-briefing article { border-right: 0; border-bottom: 1px solid var(--line); }
  .deal-briefing article:last-child { border-bottom: 0; }
  .deal-plan-row { grid-template-columns: 1.4fr 1fr; gap: 8px 16px; }
  .deal-plan-row > :nth-child(3),
  .deal-plan-row > :nth-child(4) { grid-column: span 1; }
  .deal-plan-header { display: none; }
  .deal-product-window { transform: none; }
}

@media (max-width: 640px) {
  .deal-metric-strip { grid-template-columns: 1fr; }
  .deal-hero h1 { max-width: none; }
  .deal-plan-row { grid-template-columns: 1fr; }
}