/* ==========================================================================
   Cobber marketing homepage (landing#index)
   Ported from docs/design/homepage prototype <style> block.
   Loaded ONLY by app/views/layouts/landing.html.erb — never on the dashboard.
   Everything is scoped under .cob so component CSS can't leak into the app.

   Colour mapping: the prototype authored its CSS/inline styles against short
   names (--navy, --tan, --mint, …). Rather than rewrite hundreds of references
   (and to keep a single source of truth), we re-expose those names as scoped
   aliases that point at the canonical @theme tokens. No colour hex is
   duplicated here — navy/tan/warm/ink/rule resolve to the existing app tokens;
   only the genuinely-new marketing tokens (acc-soft, pastels, focus accents)
   were added to @theme in app/assets/tailwind/application.css.
   ========================================================================== */

.cob {
  /* structural — reuse existing app tokens */
  --navy: var(--color-primary);
  --navy-deep: var(--color-primary-hover);
  --tan: var(--color-accent);
  --tan-deep: var(--color-accent-hover);
  --tan-light: var(--color-accent-light);
  --warm: var(--color-bg-warm);
  --paper: var(--color-bg-white);
  --ink: var(--color-text);
  --ink-mute: var(--color-text-muted);
  --ink-light: var(--color-text-light);
  --rule: var(--color-border);
  --rule-strong: var(--color-border-dark);

  /* Body font for the marketing page only — Inter instead of the Source Sans 3
     default (scoped here so the dashboard is unaffected; remove to revert). */
  --font-body: "Inter", system-ui, sans-serif;

  /* marketing-only tokens added to @theme */
  --acc-soft: var(--color-acc-soft);
  --mint: var(--color-mint);         --mint-deep: var(--color-mint-deep);
  --lavender: var(--color-lavender); --lavender-deep: var(--color-lavender-deep);
  --butter: var(--color-butter);     --butter-deep: var(--color-butter-deep);
  --coral: var(--color-coral);       --coral-deep: var(--color-coral-deep);
  --sky: var(--color-sky);           --sky-deep: var(--color-sky-deep);
  --rose: var(--color-rose);         --rose-deep: var(--color-rose-deep);
}

/* Body font for the marketing layout only (this file isn't loaded elsewhere),
   so we replace the global Inter default with the design-system body font. */
body { font-family: var(--font-body); }

/* ---- base scope ---- */
.cob {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cob .display { font-family: var(--font-display); letter-spacing: -0.025em; }
.cob .num { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; }
.cob .eyebrow {
  font-family: var(--font-display); color: var(--tan-deep);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px;
}

/* ===== homepage shared ===== */
.cob.hp, .hp { background: var(--warm); }
.cob .hp-eyebrow {
  font-family: var(--font-display); color: var(--tan-deep); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px;
}

/* ===== blend scope (refined base + restrained accents) ===== */
.blend { --acc: var(--color-primary); --acc-soft: var(--color-acc-soft); --slate: var(--color-text); }
.blend .logo svg, .blend .logo b { color: var(--slate); }
.blend .tx-navy { color: var(--slate); }
.cob .btn-acc { background: var(--acc); color: #fff; box-shadow: 0 12px 26px -12px rgba(20,40,70,0.45); }
.cob .btn-acc:hover { background: var(--tan-deep); }
.cob .blend-mark { position: relative; white-space: nowrap; z-index: 0; padding: 0 10px; color: #fff; }
.cob .blend-mark::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9%; bottom: 7%; z-index: -1;
  background: var(--acc); border-radius: 13px; transform: rotate(-1.6deg);
}
.blend .newpill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--acc); color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.04em;
}

/* ---- nav ---- */
.cob .nav {
  position: sticky; top: 0; z-index: 40; height: 68px; display: flex; align-items: center;
  justify-content: center; padding: 0 56px; border-bottom: 1px solid rgba(30,58,95,0.08);
  background: transparent;
}
/* Blur lives on a pseudo-element, not .nav itself — backdrop-filter on .nav would make it
   a containing block for the position:fixed mobile drawer, collapsing the drawer to nav height. */
.cob .nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(252,251,248,0.9); backdrop-filter: blur(8px);
}
.cob .nav-inner {
  width: 100%; max-width: 1296px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.cob .nav-left { display: flex; align-items: center; gap: 40px; }
.cob .logo { display: flex; align-items: center; gap: 3px; }
.cob .logo svg { width: 28px; height: 28px; color: var(--ink); }
.cob .logo b {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--ink); letter-spacing: -0.03em;
}
.cob .navlinks { display: flex; align-items: center; gap: 4px; }
.cob .navlink {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px;
  border-radius: 8px; font-weight: 500; font-size: 15px; color: var(--navy); cursor: pointer;
  border: 0; background: transparent; font-family: var(--font-body);
}
.cob .navlink:hover { background: rgba(30,58,95,0.06); }
.cob .navlink:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cob .navlink .car { width: 14px; height: 14px; opacity: 0.6; transition: transform .15s; }
.cob .nav-right { display: flex; align-items: center; gap: 16px; }

/* ---- buttons ---- */
.cob .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px;
  padding: 0 20px; border-radius: 10px; font-family: var(--font-display);
  font-weight: 600; font-size: 15px; cursor: pointer; border: 0; white-space: nowrap;
  text-decoration: none; transition: background .15s, border-color .15s, filter .15s, box-shadow .15s;
}
.cob .btn-navy { background: var(--navy); color: #fff; }
.cob .btn-navy:hover { background: var(--tan-deep); }
.cob .btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--rule-strong); }
.cob .btn-ghost:hover { border-color: var(--navy); }
.cob .btn-text {
  background: transparent; color: var(--navy); font-weight: 500; height: 42px;
  display: inline-flex; align-items: center; font-size: 15px; text-decoration: none;
  border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.cob .btn svg { width: 18px; height: 18px; }
.cob .btn:focus-visible, .cob .btn-text:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- inline mega menu (compact card variant) ---- */
.cob .has-menu { position: relative; }
.cob .mega {
  position: absolute; top: 60px; left: 0; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease; z-index: 50;
}
.cob .has-menu:hover .mega, .cob .mega.open { opacity: 1; visibility: visible; transform: translateY(0); }
.cob .has-menu:hover .navlink .car, .cob .navlink.is-open .car { transform: rotate(180deg); }
.cob .mega-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(20,40,70,0.28), 0 6px 16px rgba(20,40,70,0.06); padding: 18px;
}
.cob .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.cob .mega-item { display: flex; gap: 12px; padding: 11px; border-radius: 11px; cursor: pointer; text-decoration: none; }
.cob .mega-item:hover { background: var(--warm); }
.cob .mega-ico {
  width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.cob .mega-ico svg { width: 20px; height: 20px; }
.cob .mega-item h5 {
  margin: 1px 0 2px; font-family: var(--font-display);
  font-weight: 600; font-size: 14px; color: var(--navy); white-space: nowrap;
}
.cob .mega-item p { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-mute); max-width: 230px; }
.cob .mega-rail {
  width: 280px; background: var(--navy); border-radius: 12px; padding: 18px; color: #fff;
  display: flex; flex-direction: column;
}

/* ---- full-width mega menu ---- */
.cob .fullmenu {
  position: absolute; left: 0; right: 0; top: 68px; z-index: 30;
  background: #fff; border-top: 1px solid rgba(30,58,95,0.06);
  border-bottom: 1px solid var(--rule); box-shadow: 0 30px 60px -24px rgba(20,40,70,0.22);
}
.cob .fullmenu-inner { max-width: 1296px; margin: 0 auto; padding: 30px 44px 34px; }
.cob .mcol-h {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tan-deep); margin: 0 0 6px; padding: 0 11px;
}
.cob .mrow { display: flex; gap: 12px; padding: 9px 11px; border-radius: 11px; cursor: pointer; align-items: flex-start; text-decoration: none; }
.cob .mrow:hover { background: var(--warm); }
.cob .mrow .mi {
  width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.cob .mrow .mi svg { width: 19px; height: 19px; }
.cob .mrow h5 {
  margin: 1px 0 2px; font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; color: var(--navy); white-space: nowrap;
}
.cob .mrow p { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ink-mute); }
.cob .menu-foot {
  border-top: 1px solid var(--rule); background: var(--warm);
  padding: 13px 44px; display: flex; align-items: center; justify-content: space-between;
}

/* ---- case study callout in the mega-menus + mobile drawer ---- */
/* Full-bleed background{ display: block; padding: 0; text-decoration: none; transition: background .14s ease; }
/* live (hover/focus-triggered) full-width menu used inside the real nav */
.cob .feat-group { display: inline-flex; align-items: center; height: 68px; }
.cob .fullmenu.live {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.cob .feat-group:hover .fullmenu.live,
.cob .fullmenu.live:hover,
.cob .fullmenu.live.open { opacity: 1; visibility: visible; transform: translateY(0); }
.cob .feat-group:hover .navlink .car,
.cob .feat-group .navlink.is-open .car { transform: rotate(90deg) scaleX(-1); }
.cob .feat-group:hover .navlink,
.cob .feat-group .navlink.is-open { background: rgba(30,58,95,0.06); }

/* ---- product cards (shared) ---- */
.cob .pcard {
  background: #fff; border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 22px 50px -20px rgba(20,40,70,0.30), 0 4px 12px rgba(20,40,70,0.05);
}
.cob .chip-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500; white-space: nowrap;
}
.cob .rule { border-top: 1px solid var(--rule); }
.cob .ibadge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cob .stack-chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 8px;
  background: transparent; border: 1px solid var(--rule-strong); font-family: var(--font-display);
  font-weight: 500; font-size: 13px; color: var(--ink-mute); white-space: nowrap;
}

/* ---- pastel surface helpers ---- */
.cob .bg-mint { background: var(--mint); } .cob .bg-lavender { background: var(--lavender); } .cob .bg-butter { background: var(--butter); }
.cob .bg-coral { background: var(--coral); } .cob .bg-sky { background: var(--sky); } .cob .bg-rose { background: var(--rose); }
.cob .tx-mint { color: var(--mint-deep); } .cob .tx-lav { color: var(--lavender-deep); } .cob .tx-butter { color: var(--butter-deep); }
.cob .tx-coral { color: var(--coral-deep); } .cob .tx-sky { color: var(--sky-deep); } .cob .tx-rose { color: var(--rose-deep); }
.cob .tx-navy { color: var(--ink); } .cob .tx-tan { color: var(--tan-deep); } .cob .tx-mute { color: var(--ink-mute); } .cob .tx-light { color: var(--ink-light); }

/* ---- NEW pill (menus + cards) ---- */
.cob .newpill {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  padding: 2px 7px; border-radius: 999px; line-height: 1; text-indent: 0.07em;
  background: var(--tan-deep); color: #fff; font-family: var(--font-display);
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em; white-space: nowrap;
}
.cob .hierarchy-line { stroke: #C8CFD8; stroke-width: 1.2; fill: none; }

/* ---- AI badge (quiet, understated) ---- */
.cob .ai-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: rgba(30,58,95,0.08); color: var(--navy);
  font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.02em;
}
.cob .ai-badge svg { width: 11px; height: 11px; }

/* ---- page container (responsive replacement for the prototype's fixed 1440px frame) ---- */
.cob .hp-container { max-width: 1296px; margin: 0 auto; padding-left: 56px; padding-right: 56px; }
@media (max-width: 1023px) { .cob .hp-container { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 767px) { .cob .hp-container { padding-left: 24px; padding-right: 24px; } }

/* ---- demo form ---- */
.cob .hp-label { display:block; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.cob .hp-input {
  width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: 10px; padding: 11px 13px;
  transition: border-color .14s, box-shadow .14s;
}
.cob .hp-input::placeholder { color: var(--ink-light); }
.cob .hp-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,0.14); }
.cob textarea.hp-input { resize: vertical; min-height: 92px; }

/* ==========================================================================
   Mobile drawer (hamburger nav) — hidden on desktop
   ========================================================================== */
.cob .hp-burger { display:none; align-items:center; justify-content:center; width:42px; height:42px; border:0; background:transparent; color:var(--navy); border-radius:8px; cursor:pointer; }
.cob .hp-burger:hover { background:rgba(30,58,95,0.06); }
.cob .hp-burger:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.cob .hp-drawer-backdrop { position:fixed; inset:0; background:rgba(20,40,70,0.42); z-index:60; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; }
.cob .hp-drawer { position:fixed; top:0; right:0; bottom:0; width:min(360px,86vw); background:var(--paper); z-index:70; transform:translateX(100%); visibility:hidden; transition:transform .24s ease, visibility .24s; display:flex; flex-direction:column; box-shadow:-20px 0 60px -20px rgba(20,40,70,0.4); overflow-y:auto; }
.cob.hp-drawer-open .hp-drawer, .nav.hp-drawer-open .hp-drawer { transform:translateX(0); visibility:visible; }
.cob.hp-drawer-open .hp-drawer-backdrop, .nav.hp-drawer-open .hp-drawer-backdrop { opacity:1; visibility:visible; }
.cob .hp-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--rule); }
.cob .hp-drawer-close { border:0; background:transparent; color:var(--ink-mute); cursor:pointer; padding:6px; border-radius:8px; }
.cob .hp-drawer-close:hover { background:var(--warm); }
.cob .hp-drawer-body { padding:14px 16px 28px; display:flex; flex-direction:column; gap:2px; }
.cob .hp-acc-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; background:transparent; border:0; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--navy); padding:12px 10px; border-radius:9px; }
.cob .hp-acc-trigger:hover { background:var(--warm); }
.cob .hp-acc-car { transition:transform .18s; opacity:.6; }
.cob .hp-acc.open .hp-acc-car { transform:rotate(180deg); }
.cob .hp-acc-panel { display:none; padding:2px 0 8px; }
.cob .hp-acc.open .hp-acc-panel { display:block; }
.cob .hp-acc-group { font-family:var(--font-display); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--tan-deep); padding:10px 10px 4px; }
.cob .hp-drawer-item { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; text-decoration:none; color:var(--navy); font-family:var(--font-display); font-weight:600; font-size:14px; }
.cob .hp-drawer-item:hover { background:var(--warm); }
.cob .hp-drawer-item .mi { width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.cob .hp-drawer-item .mi svg { width:17px; height:17px; }
.cob .hp-drawer-link { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--navy); text-decoration:none; padding:12px 10px; border-radius:9px; }
.cob .hp-drawer-link:hover { background:var(--warm); }
.cob .hp-drawer-cta { margin-top:14px; width:100%; height:48px; }

/* ---- prospects: full-width table with the call drawer floating over its right side ----
   Table and drawer share one grid cell so the cell auto-sizes to the taller (drawer);
   the table renders full-width behind, the drawer overlays the right columns. */
.cob .hp-prospects-grid { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; }
.cob .hp-prospects-grid > .hp-prospects-table,
.cob .hp-prospects-grid > .hp-prospects-drawer { grid-area:1 / 1; }
.cob .hp-prospects-drawer { justify-self:end; width:420px; z-index:5; }

/* ==========================================================================
   Responsive — tablet (≤1023) and mobile (≤767). Prototype is desktop 1440.
   Many overrides use !important to beat the ported inline styles.
   ========================================================================== */
@media (max-width: 1023px) {
  /* nav → hamburger */
  .cob .navlinks { display:none; }
  .cob .nav-right .hp-desk { display:none; }
  .cob .hp-burger { display:inline-flex; }
  .cob .nav { padding-left:32px; padding-right:32px; }

  /* fluid gutters */
  .cob.hp > section, .cob.hp > footer { padding-left:32px !important; padding-right:32px !important; }

  /* hero */
  .cob .hp-h1 { font-size:58px !important; }

  /* hero collage → stacked column */
  .cob .hp-collage { position:static !important; height:auto !important; width:100% !important; display:flex; flex-direction:column; align-items:center; gap:24px; margin-top:30px; }
  .cob .hp-collage > div { position:static !important; transform:none !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; }
  .cob .hp-collage > div[aria-hidden] { display:none; }
  .cob .hp-collage-dash { width:100% !important; max-width:600px; }
  .cob .hp-collage-dash > .pcard { width:100% !important; }
  .cob .hp-collage-task, .cob .hp-collage-workflow { display:none; }

  /* platform grid 3 → 2 */
  .cob .hp-plat-grid { grid-template-columns:repeat(2,1fr) !important; }

  /* prospects: stack table above a full-width drawer; drop lower-priority columns */
  .cob .hp-prospects-grid { display:flex !important; flex-direction:column; gap:18px; }
  .cob .hp-prospects-grid > .hp-prospects-table,
  .cob .hp-prospects-grid > .hp-prospects-drawer { grid-area:auto; min-width:0; width:100%; }
  .cob .hp-prospects-drawer { width:100% !important; justify-self:auto; }
  .cob .hp-col-lowpri { display:none; }

  /* federated: stack tier-chain / arrow / scoped view; arrow points down */
  .cob .hp-fed-grid { grid-template-columns:1fr !important; gap:18px !important; }
  /* let the columns shrink — the scoped-view card's width:400px otherwise forces the
     1fr track to 400px (auto min), overflowing the viewport. min-width:0 + its own
     max-width:100% lets it size down to the column. */
  .cob .hp-fed-grid > div { min-width:0; }
  .cob .hp-fed-arrow svg { transform:rotate(90deg); }
  .cob .hp-fed-arrow span { writing-mode:horizontal-tb !important; transform:none !important; }
  .cob .hp-fed-elect { grid-template-columns:1fr !important; gap:22px !important; }

  /* demo: stack pitch above the form card */
  .cob .hp-demo-grid { grid-template-columns:1fr !important; gap:32px !important; }
}

/* solutions: email + SMS collage — the SMS tile overlaps the email tile's
   bottom-right corner (desktop). Shorter than stacking them with a gap. */
.cob.hp-solutions .hp-sol-mock-stack { display:flex; flex-direction:column; align-items:flex-start; }
.cob.hp-solutions .hp-sol-mock-over { margin-top:-112px; margin-left:auto; margin-right:-24px; position:relative; z-index:1; }

@media (max-width: 767px) {
  .cob .nav { padding-left:20px; padding-right:20px; }
  .cob.hp > section, .cob.hp > footer { padding-left:24px !important; padding-right:24px !important; }

  /* founders letter — shrink the oversized quote and tighten the card padding
     so it isn't wrapping every few words on a phone */
  .cob .hp-founders { padding-top:60px !important; }
  .cob .hp-founders-card { padding:30px 22px !important; }
  .cob .hp-founders-quote { font-size:18px !important; line-height:1.42 !important; }

  /* hero */
  .cob .hp-h1 { font-size:43px !important; }
  .cob .hp-hero { padding-top:36px !important; }
  .cob .hp-hero-cta { flex-direction:column; width:100%; }
  .cob .hp-hero-cta .btn { width:100%; }

  /* collage → dashboard only */
  .cob .hp-collage-people, .cob .hp-collage-donation { display:none; }

  /* dashboard internals reflow — the faux-UI rows are built for 740px wide */
  .cob .hp-collage-dash .dash-stat-row { flex-wrap:wrap; }
  .cob .hp-collage-dash .dash-stat-row > div { flex:1 1 calc(50% - 6px) !important; min-width:0; }
  .cob .hp-collage-dash .dash-split { grid-template-columns:1fr !important; gap:16px !important; }

  /* platform grid → 1 */
  .cob .hp-plat-grid { grid-template-columns:1fr !important; }

  /* workflows loop → keep the circular diagram, drop the floating mock cards
     and scale the fixed-460px loop down to fit the viewport */
  .cob .hp-loop-mini { display:none; }
  .cob .hp-loop-wrap { height:380px !important; overflow-x:hidden; }
  .cob .hp-loop { transform:translateX(-50%) scale(0.66) !important; transform-origin:top center; }

  /* prospects table → horizontal scroll */
  .cob .hp-prospects-table { overflow-x:auto !important; }
  .cob .hp-prospects-table table { min-width:560px; }

  /* federated stat tiles → 1 col */
  .cob .hp-fed-stats { grid-template-columns:1fr !important; }

  /* demo fields → single column */
  .cob .hp-demo-fields > div { grid-template-columns:1fr !important; }
  .cob .hp-demo-form { padding:30px 26px !important; }

  /* section h2 sizes ease down a touch */
  .cob .hp h2.display { font-size:30px !important; }

  /* ---- solutions pages: stack the 2-col layouts and let the fixed-width
     product mocks fill the column instead of overflowing the viewport ---- */
  .cob.hp-solutions .hp-sol-hero,
  .cob.hp-solutions .hp-sol-band { grid-template-columns:1fr !important; gap:30px !important; }
  /* let the 1fr tracks shrink below the mocks' intrinsic width (min-width:auto
     would otherwise expand the track and overflow the viewport) */
  .cob.hp-solutions .hp-sol-hero > div,
  .cob.hp-solutions .hp-sol-band > div { min-width:0; }
  /* side padding on the strip/band wrappers (they're <div>, not <section>) */
  .cob.hp-solutions .hp-sol-band-outer,
  .cob.hp-solutions .hp-sol-strip-outer { padding-left:24px !important; padding-right:24px !important; }
  /* product mocks are authored at a fixed px width — fill the column on mobile */
  .cob.hp-solutions .hp-sol-hero-mocks .pcard,
  .cob.hp-solutions .hp-sol-band-mock .pcard { width:100% !important; max-width:440px; }
  /* hero collage (two absolutely-positioned cards) → simple stacked flow */
  .cob.hp-solutions .hp-sol-hero-mocks { position:static; height:auto !important; display:flex; flex-direction:column; gap:18px; align-items:center; }
  .cob.hp-solutions .hp-sol-hero-mocks > div { position:static !important; transform:none !important; width:100%; max-width:440px; }
  /* keep the blurb above its mock when a band flips the order on desktop */
  .cob.hp-solutions .hp-sol-band > div:first-child { order:1 !important; }
  .cob.hp-solutions .hp-sol-band-mock { order:2 !important; }
  .cob.hp-solutions .hp-sol-hero h1 { font-size:36px !important; }
  /* stack the two hero CTAs so they don't overflow narrow phones */
  .cob.hp-solutions .hp-sol-hero-cta { flex-direction:column; align-items:stretch; }
  .cob.hp-solutions .hp-sol-hero-cta .btn { width:100%; justify-content:center; }
  /* email + SMS collage → plain stacked cards on mobile (no overlap) */
  .cob.hp-solutions .hp-sol-mock-stack { align-items:stretch; width:100%; }
  .cob.hp-solutions .hp-sol-mock-base,
  .cob.hp-solutions .hp-sol-mock-over { width:100%; margin:0; position:static; }
  .cob.hp-solutions .hp-sol-mock-over { margin-top:16px; }
}

/* narrow phones — scale the loop down further so its labels still fit */
@media (max-width: 480px) {
  .cob .hp-loop-wrap { height:320px !important; }
  .cob .hp-loop { transform:translateX(-50%) scale(0.54) !important; }
}

/* ---- hover polish ---- */
.cob .hp-plat-grid > div { transition: transform .16s ease, box-shadow .16s ease; }
.cob .hp-plat-grid > div:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -22px rgba(20,40,70,0.28); }
.cob .hp-prospects-table tbody tr { transition: background .12s ease; }
.cob .hp-prospects-table tbody tr:hover { background: rgba(30,58,95,0.025); }

/* ---- login modal (org subdomain → dashboard) ---- */
.cob .hp-login-modal { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,40,70,0.5); opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; }
.cob .hp-login-modal.open { opacity:1; visibility:visible; }
.cob .hp-login-card { position:relative; width:min(440px,100%); background:var(--paper); border-radius:18px; padding:34px 34px 30px;
  box-shadow:0 40px 90px -30px rgba(20,40,70,0.55); transform:translateY(8px) scale(0.98); transition:transform .2s ease; }
.cob .hp-login-modal.open .hp-login-card { transform:translateY(0) scale(1); }
.cob .hp-login-close { position:absolute; top:16px; right:16px; border:0; background:transparent; color:var(--ink-mute); cursor:pointer; padding:6px; border-radius:8px; line-height:0; }
.cob .hp-login-close:hover { background:var(--warm); }
.cob .hp-login-field { display:flex; align-items:center; background:#fff; border:1px solid var(--rule-strong); border-radius:10px; overflow:hidden;
  transition:border-color .14s, box-shadow .14s; }
.cob .hp-login-field:focus-within { border-color:var(--navy); box-shadow:0 0 0 3px rgba(30,58,95,0.14); }
.cob .hp-login-field.error { border-color:var(--color-error); box-shadow:0 0 0 3px rgba(220,38,38,0.12); }
.cob .hp-login-input { flex:1; min-width:0; border:0; outline:none; background:transparent; padding:12px 4px 12px 13px;
  font-family:var(--font-body); font-size:15px; color:var(--ink); }
.cob .hp-login-input::placeholder { color:var(--ink-light); }
.cob .hp-login-suffix { padding:12px 14px 12px 0; font-size:14px; color:var(--ink-mute); white-space:nowrap; font-family:var(--font-body); }
.cob .hp-login-error { margin:8px 0 0; font-size:12.5px; color:var(--color-error); font-weight:500; }

/* Respect reduced-motion: disable transitions/animation for users who opt out */
@media (prefers-reduced-motion: reduce) {
  .cob .mega, .cob .fullmenu.live, .cob .navlink .car, .cob .btn,
  .cob .hp-drawer, .cob .hp-drawer-backdrop, .cob .hp-acc-car,
  .cob .hp-login-modal, .cob .hp-login-card,
  .cob .hp-plat-grid > div, .cob .hp-prospects-table tbody tr { transition: none; }
  .cob .hp-plat-grid > div:hover { transform: none; }
}

/* ==========================================================================
   Case studies — the /case-studies/:slug page and the homepage customer-story
   widget. Same colour aliases as everything else in this file (--navy, --tan,
   --warm, --rule ...), which resolve to the @theme tokens in
   app/assets/tailwind/application.css. No hex duplication.
   ========================================================================== */

/* ---- click-to-play video facade (shared: homepage widget + all variants) ---- */
.cob .cs-video { width: 100%; }
.cob .cs-video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--navy-deep); border: 1px solid var(--rule);
  box-shadow: 0 30px 62px -26px rgba(20,40,70,0.46), 0 4px 12px rgba(20,40,70,0.06);
}
.cob .cs-video-dark .cs-video-frame { border-color: rgba(255,255,255,0.16); }
.cob .cs-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cob .cs-video-poster { position: absolute; inset: 0; }
.cob .cs-video-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cob .cs-video-play {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 20px 22px;
  display: flex; align-items: flex-end; cursor: pointer; text-align: left;
  background: linear-gradient(to top, rgba(21,42,69,0.92) 0%, rgba(21,42,69,0.55) 22%, rgba(21,42,69,0.06) 62%);
  font-family: var(--font-body);
}
.cob .cs-video-play-dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 999px; background: var(--tan); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.55);
  transition: transform .16s ease, background .16s ease;
}
.cob .cs-video-play-dot svg { width: 30px; height: 30px; display: block; }
.cob .cs-video-play:hover .cs-video-play-dot { transform: translate(-50%,-50%) scale(1.06); background: var(--tan-deep); }
.cob .cs-video-play:focus-visible { outline: 3px solid var(--tan-light); outline-offset: -3px; }
.cob .cs-video-play[disabled] { cursor: default; }
.cob .cs-video-play[disabled] .cs-video-play-dot { background: rgba(255,255,255,0.24); box-shadow: none; }
.cob .cs-video-play-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cob .cs-video-play-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; letter-spacing: -0.01em;
}
.cob .cs-video-play-meta { font-size: 12.5px; color: rgba(255,255,255,0.72); }
.cob .cs-video-pending {
  position: absolute; top: 14px; right: 14px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.16); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; pointer-events: none;
}

/* ---- page scaffolding ---- */
.cob .cs-section { padding: 72px 56px; }
.cob .cs-section-tight { padding: 40px 56px; }
.cob .cs-section-warm { background: var(--warm); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cob .cs-narrow { max-width: 780px; margin: 0 auto; }
.cob .cs-centre { text-align: center; }
.cob .cs-split {
  max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.cob .cs-eyebrow {
  font-family: var(--font-display); color: var(--tan-deep); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px;
}
.cob .cs-eyebrow-tight { margin-bottom: 12px; }
.cob .cs-h2 {
  font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.028em;
  color: var(--ink); margin: 0;
}
.cob .cs-lede { font-size: 16.5px; line-height: 1.58; color: var(--ink-mute); margin: 14px 0 0; text-wrap: pretty; }

/* ---- title block ---- */
.cob .cs-title-centre { text-align: center; max-width: 720px; margin: 0 auto; }
.cob .cs-title-left { max-width: 620px; }
.cob .cs-title-h1 {
  font-weight: 700; font-size: 52px; line-height: 1.0; letter-spacing: -0.038em;
  color: var(--ink); margin: 16px 0 0;
}
.cob .cs-title-agency { font-size: 15px; line-height: 1.5; color: var(--ink-mute); margin: 14px 0 0; font-weight: 500; }
.cob .cs-title-deck { font-size: 17px; line-height: 1.5; color: var(--ink); opacity: 0.82; margin: 10px 0 0; text-wrap: pretty; }
.cob .cs-title-centre .cs-title-agency,
.cob .cs-title-centre .cs-title-deck { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---- attributed pull-quote ---- */
.cob .cs-quote { margin: 26px 0 0; padding: 0; position: relative; }
.cob .cs-quote-mark { display: block; color: var(--tan); margin-bottom: 10px; }
.cob .cs-quote-mark svg { width: 26px; height: 26px; display: block; }
.cob .cs-quote-text {
  margin: 0; padding: 0; border: 0; color: var(--ink); font-weight: 600;
  letter-spacing: -0.018em; text-wrap: pretty;
}
.cob .cs-quote-hero .cs-quote-text { font-size: 30px; line-height: 1.26; }
.cob .cs-quote-section .cs-quote-text { font-size: 21px; line-height: 1.42; }
.cob .cs-quote-inline .cs-quote-text { font-size: 16.5px; line-height: 1.5; font-weight: 500; }
.cob .cs-quote-inline { border-left: 3px solid var(--tan); padding-left: 18px; margin-top: 22px; }
.cob .cs-quote-inline .cs-quote-mark { display: none; }
.cob .cs-quote-by {
  display: flex; align-items: center; gap: 11px; margin-top: 18px;
  font-size: 14px; color: var(--ink-mute);
}
.cob .cs-quote-by b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.cob .cs-quote-role { display: block; font-size: 13px; color: var(--ink-mute); }
/* Attribution without the avatar — used everywhere between the bookends, so
   the disc does not repeat beside all nine quotes on the page. */
.cob .cs-quote-by-plain { display: block; font-size: 13.5px; line-height: 1.4; }
.cob .cs-quote-by-plain b { display: inline; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.cob .cs-quote-by-plain .cs-quote-role { display: inline; font-size: 13.5px; }
.cob .cs-quote-sep { margin: 0 7px; color: var(--ink-light); }
.cob .cs-quote-inline .cs-quote-by-plain { margin-top: 12px; }

.cob .cs-quote-photo { object-fit: cover; background: var(--rule); padding: 0; }
.cob .cs-byline-photo { object-fit: cover; background: var(--rule); padding: 0; }
.cob .cs-quote-avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em;
}
.cob .cs-quote-dark .cs-quote-text { color: #fff; }
.cob .cs-quote-dark .cs-quote-mark { color: var(--tan-light); }
.cob .cs-quote-dark .cs-quote-by { color: rgba(255,255,255,0.72); }
.cob .cs-quote-dark .cs-quote-by b { color: #fff; }
.cob .cs-quote-dark .cs-quote-role { color: rgba(255,255,255,0.72); }
.cob .cs-quote-dark .cs-quote-avatar { background: rgba(255,255,255,0.16); }

/* ---- mock figure ---- */
.cob .cs-mock { margin: 0; display: flex; flex-direction: column; align-items: center; }
.cob .cs-mock-frame { display: flex; justify-content: center; }
.cob .cs-mock-caption {
  margin: 18px 0 0; max-width: 400px; text-align: center; font-size: 14px; line-height: 1.5;
  color: var(--ink); font-weight: 500; text-wrap: pretty;
}
.cob .cs-mock-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-light); text-align: center; }

/* ---- hosting panel (pairs with the support-hours quote; no invented screen) ---- */
.cob .cs-hosting {
  display: flex; flex-direction: column; gap: 2px; background: #fff;
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  box-shadow: 0 22px 50px -20px rgba(20,40,70,0.30);
}
.cob .cs-hosting-item { display: flex; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--rule); }
.cob .cs-hosting-item:first-child { border-top: 0; }
.cob .cs-hosting-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--sky); color: var(--sky-deep);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cob .cs-hosting-icon svg { width: 17px; height: 17px; display: block; }
.cob .cs-hosting-item b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.cob .cs-hosting-item span span { display: block; }
.cob .cs-hosting-item div span { font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); margin-top: 3px; display: block; }

/* Intro to the evidence bands. Same white ground and same 1080px column as the
   first band, so the background does not break under the subhead and the
   heading lines up with the band headings below. The band supplies the gap. */
.cob .cs-specifics-intro {
  background: #fff; border-top: 1px solid var(--rule); padding: 62px 56px 0;
}
.cob .cs-specifics-intro-inner { max-width: 1080px; margin: 0 auto; }
/* The after-state closes the white run that the specifics opened. */
.cob .cs-section-white { background: #fff; border-top: 1px solid var(--rule); }
.cob .cs-specifics-intro .cs-lede { max-width: 560px; }

/* ---- narrative sections: three treatments under review ---- */

/* 2 — rail: heading and kicker left, prose and quote right */
.cob .cs-story-rail {
  max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 0.62fr 1.38fr;
  gap: 56px; align-items: start;
}
.cob .cs-story-rail-head { position: sticky; top: 104px; }
.cob .cs-story-rail-head .cs-eyebrow { margin-bottom: 10px; }
.cob .cs-story-rail-head .cs-h2 { font-size: 27px; }
.cob .cs-story-rail-body { min-width: 0; }
.cob .cs-lede-lead { margin-top: 0; font-size: 17.5px; }

/* 3 — quote-forward: the quote opens, our prose follows as context */
.cob .cs-story-forward-head { display: flex; flex-direction: column; gap: 9px; }
.cob .cs-story-forward-h2 {
  font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.024em;
  color: var(--ink); margin: 0;
}
.cob .cs-story-forward .cs-quote { margin-top: 22px; }
.cob .cs-story-forward .cs-quote-hero .cs-quote-text { font-size: 26px; line-height: 1.32; }
.cob .cs-story-forward-body { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }

/* ---- evidence band (mirrors solutions/_feature_band) ---- */
.cob .cs-band-outer { padding: 62px 56px; }
.cob .cs-band {
  max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.cob .cs-band-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; margin-bottom: 14px;
}
.cob .cs-band-chip svg { width: 14px; height: 14px; display: block; }
.cob .cs-band-heading {
  font-weight: 700; font-size: 27px; line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 11px;
}
.cob .cs-band-body { font-size: 15px; line-height: 1.55; color: var(--ink-mute); margin: 0; max-width: 440px; }
.cob .cs-band-mock { display: flex; justify-content: center; }

/* ---- inline CTA band (CTA one; CTA two is the reused landing/demo form) ---- */
.cob .cs-cta { background: var(--acc-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 46px 56px; }
.cob .cs-cta-inner {
  max-width: 1080px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cob .cs-cta-heading { font-weight: 700; font-size: 26px; line-height: 1.12; letter-spacing: -0.026em; color: var(--ink); margin: 0; }
.cob .cs-cta-body { font-size: 15px; line-height: 1.5; color: var(--ink-mute); margin: 9px 0 0; max-width: 480px; }
.cob .cs-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- product pills (page header + homepage customer-story section) ---- */
.cob .cs-pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 0; }
.cob .cs-title-centre + .cs-pills, .cob .cs-hero-top .cs-pills { justify-content: center; }
.cob .cs-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px;
  border-radius: 999px; background: var(--warm); border: 1px solid var(--rule-strong);
  color: var(--navy); font-family: var(--font-display); font-weight: 500; font-size: 13.5px;
}
.cob .cs-pill-icon {
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.cob .cs-pill-icon svg { width: 12px; height: 12px; display: block; }
/* Five pills will not fit one row in a narrow column at full size. Sized with
   real slack rather than to exactly fit — at 1280 the column is ~30px tighter
   than at 1440, and shaving to the pixel means it wraps on the smaller one. */
.cob .cs-pills-compact { gap: 6px; }
.cob .cs-pills-compact .cs-pill { height: 30px; padding: 0 10px; font-size: 12px; gap: 5px; }
.cob .cs-pills-compact .cs-pill-icon { width: 17px; height: 17px; border-radius: 5px; }
.cob .cs-pills-compact .cs-pill-icon svg { width: 10px; height: 10px; }
.cob .cs-pills-dark .cs-pill { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); color: #fff; }

/* ---- byline (headers 2 and 4): attribution as credit, not caveat ---- */
.cob .cs-byline { display: flex; align-items: center; gap: 11px; margin: 20px 0 0; }
.cob .cs-byline-centre { justify-content: center; }
.cob .cs-byline-avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em;
}
.cob .cs-byline-text { font-size: 14.5px; line-height: 1.45; color: var(--ink-mute); text-wrap: pretty; }
.cob .cs-byline-text b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.cob .cs-byline-note { color: var(--ink-light); }

/* ---- credit rail (headers 3 and 4): the facts as a labelled strip ----
   Three fact columns on the first row, then the pills on their own row below a
   hairline — five pills will not fit alongside three facts at any width. */
.cob .cs-credits {
  margin: 26px auto 0; max-width: 940px; display: grid;
  grid-template-columns: repeat(3, minmax(0, auto)); justify-content: center;
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  padding: 18px 0;
}
.cob .cs-credits-item { padding: 0 28px; border-left: 1px solid var(--rule); text-align: left; }
.cob .cs-credits-item:first-child { border-left: 0; padding-left: 0; }
.cob .cs-credits dt {
  font-family: var(--font-display); font-weight: 700; font-size: 10px; color: var(--tan-deep);
  text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 7px;
}
.cob .cs-credits dd { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--ink); font-weight: 500; }
.cob .cs-credits-pills {
  grid-column: 1 / -1; border-left: 0; padding: 15px 0 0; margin-top: 15px;
  border-top: 1px solid var(--rule); display: flex; align-items: center;
  justify-content: center; gap: 16px; flex-wrap: wrap;
}
.cob .cs-credits-pills dt { margin-bottom: 0; flex-shrink: 0; }
.cob .cs-credits-pills .cs-pills { margin: 0; gap: 7px; }
.cob .cs-credits-pills .cs-pill { height: 32px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.cob .cs-credits-pills .cs-pill-icon { width: 19px; height: 19px; border-radius: 5px; }
.cob .cs-credits-pills .cs-pill-icon svg { width: 10px; height: 10px; }

/* ---- header 4 (wildcard): the quote leads, the org name is the kicker ---- */
.cob .cs-hero-quoteled { text-align: center; }
.cob .cs-hero-kicker { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cob .cs-kicker-h1 {
  font-weight: 700; font-size: 27px; line-height: 1.1; letter-spacing: -0.026em;
  color: var(--ink); margin: 0;
}
.cob .cs-lead-quote {
  max-width: 940px; margin: 26px auto 0; padding: 0; border: 0;
  font-weight: 600; font-size: 40px; line-height: 1.16; letter-spacing: -0.028em;
  color: var(--ink); text-wrap: pretty;
}
.cob .cs-lead-video { max-width: 860px; margin: 34px auto 0; }
.cob .cs-hero-quoteled .cs-credits { margin-top: 34px; }

/* ---- header 5 (remix): name-led, video forward ----
   The wildcard's vertical read and prominent video, but the organisation name
   stays the dominant type and the quote sits second to it. */
.cob .cs-hero-nameled { text-align: center; }
.cob .cs-hero-nameled .cs-lead-video { margin-top: 30px; }
.cob .cs-nameled-quote { max-width: 820px; margin: 34px auto 0; padding: 0; }
.cob .cs-nameled-quote .cs-quote-mark { display: block; color: var(--tan); margin: 0 auto 10px; }
.cob .cs-nameled-quote .cs-quote-mark svg { width: 26px; height: 26px; display: block; }
.cob .cs-nameled-quote-text {
  margin: 0; padding: 0; border: 0; color: var(--ink); font-weight: 600;
  font-size: 28px; line-height: 1.3; letter-spacing: -0.02em; text-wrap: pretty;
}
.cob .cs-nameled-quote .cs-quote-by { justify-content: center; margin-top: 18px; }
.cob .cs-hero-nameled .cs-pills { justify-content: center; margin-top: 30px; }

/* ---- page header: title band, then quote left / video right ---- */
/* Bottom padding is tight: the first body section carries its own 72px. */
.cob .cs-hero { padding: 54px 56px 44px; }
.cob .cs-hero-top { max-width: 1080px; margin: 0 auto; }
.cob .cs-hero-top .cs-pills { margin-top: 24px; }
.cob .cs-hero-split {
  max-width: 1080px; margin: 44px auto 0; display: grid; grid-template-columns: 0.88fr 1.12fr;
  gap: 52px; align-items: center;
}
.cob .cs-hero-quote .cs-quote { margin-top: 0; }
.cob .cs-hero-quote .cs-quote-hero .cs-quote-text { font-size: 26px; line-height: 1.3; }
.cob .cs-hero-video { min-width: 0; }

/* ---- the close: endorsement + demo form, three treatments ---- */
.cob .cs-close { background: var(--navy); padding: 76px 56px; scroll-margin-top: 84px; }

/* 1 — one navy close: quote, hairline, form, all in one band */
.cob .cs-close-quote { max-width: 860px; margin: 0 auto; }
.cob .cs-close-quote .cs-quote { margin-top: 0; }
.cob .cs-close-rule { max-width: 860px; margin: 46px auto; height: 1px; background: rgba(255,255,255,0.16); }
.cob .cs-close-form { max-width: 720px; margin: 0 auto; text-align: center; }
.cob .cs-close-eyebrow { color: var(--tan-light); }
.cob .cs-close-h2 {
  font-weight: 700; font-size: 34px; line-height: 1.06; letter-spacing: -0.03em;
  color: #fff; margin: 12px 0 0;
}
.cob .cs-close-lede { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 12px 0 0; }
.cob .cs-close-form .cs-demo-card { margin-top: 28px; text-align: left; }

/* shared form card */
.cob .cs-demo-card { padding: 32px 34px; background: var(--paper); }
.cob .cs-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cob .cs-demo-submit { width: 100%; height: 50px; margin-top: 18px; font-size: 15.5px; }
.cob .cs-demo-thanks { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 0; }
.cob .cs-demo-tick { width: 60px; height: 60px; border-radius: 999px; background: var(--mint); margin-bottom: 18px; }
.cob .cs-demo-tick svg { width: 30px; height: 30px; display: block; }
.cob .cs-demo-thanks-h { font-weight: 700; font-size: 24px; margin: 0; }
.cob .cs-demo-thanks-p { font-size: 15px; line-height: 1.5; margin: 10px 0 0; max-width: 340px; }

/* 2 — endorsement as the pitch: quote left, form right, one band */
.cob .cs-close-split-inner {
  max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.cob .cs-close-split-pitch { min-width: 0; }
.cob .cs-close-split-pitch .cs-quote { margin-top: 0; }
.cob .cs-close-points { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; }
.cob .cs-close-point { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.92); }
.cob .cs-close-tick {
  width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.12);
  color: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.cob .cs-close-tick svg { width: 15px; height: 15px; display: block; }

/* 3 — light close: the quote keeps the navy, the form moves to the warm band */
.cob .cs-close-quote-band { padding: 68px 56px; }
.cob .cs-close-light {
  background: var(--warm); border-top: 1px solid var(--rule); padding: 72px 56px;
  scroll-margin-top: 84px;
}
.cob .cs-close-light-inner { max-width: 660px; margin: 0 auto; text-align: center; }
.cob .cs-close-h2-light { color: var(--ink); }
.cob .cs-close-lede-light { color: var(--ink-mute); }
.cob .cs-close-light .cs-demo-card { margin-top: 28px; text-align: left; }
.cob .cs-demo-card-light { padding: 30px 32px; }
/* Full-width band and its "runs on" footer strip. The ground is a warm wash
   mixed from the tan token — the only warm block on the page, so it stands out
   by being different in kind rather than merely darker{
  margin-top: 78px; padding: 66px 56px; scroll-margin-top: 84px;
  background: color-mix(in srgb, var(--tan) 11%, #fff);
  border-top: 1px solid color-mix(in srgb, var(--tan) 22%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--tan) 22%, #fff);
}/* ---- case study + widget responsive ---- */
@media (max-width: 1023px) {
  .cob .cs-section, .cob .cs-section-tight, .cob .cs-band-outer,
  .cob .cs-cta,
  .cob .cs-hero, .cob .cs-close, .cob .cs-close-light,
  .cob .cs-specifics-intro{ padding-left: 32px; padding-right: 32px; }
  .cob .cs-lead-quote { font-size: 34px; }
  .cob .cs-nameled-quote-text { font-size: 25px; }
  .cob .cs-title-h1 { font-size: 44px; }
}

@media (max-width: 767px) {
  .cob .cs-section { padding: 48px 24px; }
  .cob .cs-section-tight { padding: 32px 24px; }
  .cob .cs-band-outer { padding: 44px 24px; }
  .cob .cs-specifics-intro { padding: 44px 24px 0; }
  .cob .cs-cta { padding: 34px 24px; }
  .cob .cs-hero { padding: 36px 24px 44px; }
  .cob .cs-close { padding: 48px 24px; }
  .cob .cs-close-quote-band { padding: 44px 24px; }
  .cob .cs-close-light { padding: 48px 24px; }
  .cob .cs-close-rule { margin: 32px auto; }
  .cob .cs-close-h2 { font-size: 26px; }
  .cob .cs-demo-card { padding: 24px 20px; }
  .cob .cs-demo-grid { grid-template-columns: 1fr; }
  .cob .cs-pill { height: 36px; padding: 0 13px; font-size: 12.5px; }
  .cob .cs-byline { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .cob .cs-byline-text { font-size: 13.5px; }
  .cob .cs-lead-quote { font-size: 24px; margin-top: 20px; }
  .cob .cs-nameled-quote-text { font-size: 20px; }
  .cob .cs-kicker-h1 { font-size: 22px; }
  .cob .cs-credits { grid-template-columns: 1fr; gap: 16px; padding: 18px 0; }
  .cob .cs-credits-item { border-left: 0; padding: 0; }
  .cob .cs-credits-pills { margin-top: 0; padding-top: 15px; justify-content: flex-start; }

  .cob .cs-story-rail { grid-template-columns: 1fr !important; gap: 22px !important; }
  .cob .cs-story-rail-head { position: static; }
  .cob .cs-story-forward .cs-quote-hero .cs-quote-text { font-size: 21px; }
  .cob .cs-split, .cob .cs-band, .cob .cs-hero-split,
  .cob .cs-close-split-inner{ grid-template-columns: 1fr !important; gap: 30px !important; }
  .cob .cs-split > div, .cob .cs-band > div { min-width: 0; }
  .cob .cs-band > div:first-child { order: 1 !important; }
  .cob .cs-band-mock { order: 2 !important; }

  .cob .cs-mock-frame .pcard { width: 100% !important; max-width: 420px; }
  /* Four stat tiles in a 342px column is about 79px each — go two up. Only the
     tiles that are self-contained boxes; the divider-based stat rows would
     strand a rule mid-row. */
  .cob .cs-mock-tiles { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  /* The inline quote rule indents its text 21px past the heading and the mock
     card, which reads as broken alignment once the column is single-file. */
  .cob .cs-quote-inline { padding-left: 14px; border-left-width: 2px; }
  /* "Peter Hosking · Managing Director, Campaign Surge" cannot sit on one line
     in a 342px column, and mid-phrase wrapping reads worse than a stack. */
  .cob .cs-quote-by-plain b, .cob .cs-quote-by-plain .cs-quote-role { display: block; }
  .cob .cs-quote-sep { display: none; }

  .cob .cs-title-h1 { font-size: 34px; }
  .cob .cs-title-deck { font-size: 16px; }
  .cob .cs-h2, .cob .cs-band-heading { font-size: 24px; }
  .cob .cs-quote-hero .cs-quote-text { font-size: 22px; }
  .cob .cs-hero-quote .cs-quote-hero .cs-quote-text { font-size: 21px; }
  .cob .cs-quote-section .cs-quote-text { font-size: 18px; }  .cob .cs-cta-heading { font-size: 22px; }
  .cob .cs-cta-actions { width: 100%; }
  .cob .cs-cta-actions .btn { flex: 1; justify-content: center; }
  /* The title wraps to two lines in a narrow frame and the second line rises
     into the centred play control. Clamp it to one line. */
  .cob .cs-video-play { padding: 14px 16px; }
  .cob .cs-video-play-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
  .cob .cs-video-play-label { max-width: 100%; }
  .cob .cs-video-play-dot { width: 56px; height: 56px; }
  .cob .cs-video-play-dot svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cob .cs-video-play-dot { transition: none; }
  .cob .cs-video-play:hover .cs-video-play-dot { transform: translate(-50%,-50%); }
}

/* ==========================================================================
   Homepage customer-story section, and the case study callout in the nav.
   ========================================================================== */

/* ---- case study callout in the mega-menus + mobile drawer ---- */
/* Full-bleed background, contents capped to match .fullmenu-inner. */
.cob .menu-foot-story { display: block; padding: 0; text-decoration: none; transition: background .14s ease; }
.cob .menu-foot-inner {
  max-width: 1296px; margin: 0 auto; padding: 13px 44px; gap: 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.cob .menu-foot-story:hover { background: var(--acc-soft); }
.cob .menu-foot-story:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.cob .menu-foot-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cob .menu-foot-play {
  width: 36px; height: 36px; border-radius: 999px; background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cob .menu-foot-play svg { width: 17px; height: 17px; display: block; }
.cob .menu-foot-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tan-deep);
}
.cob .menu-foot-title {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--navy); margin-top: 2px;
}
.cob .menu-foot-cta {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--navy);
}
.cob .menu-foot-cta svg { width: 16px; height: 16px; display: block; }

.cob .hp-drawer-story {
  display: flex; align-items: center; gap: 13px; margin: 6px 0 4px; padding: 14px;
  border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--warm);
  text-decoration: none;
}
.cob .hp-drawer-story:hover { border-color: var(--navy); }
.cob .hp-drawer-story-play {
  width: 36px; height: 36px; border-radius: 999px; background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cob .hp-drawer-story-play svg { width: 17px; height: 17px; display: block; }
.cob .hp-drawer-story-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tan-deep);
}
.cob .hp-drawer-story-title {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  line-height: 1.3; color: var(--navy); margin-top: 3px;
}

/* ---- customer identity lockup ---- */
.cob .cs-widget-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cob .cs-widget-lockup-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--tan-deep);
}
.cob .cs-widget-lockup-name {
  font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.035em; color: var(--ink);
}
.cob .cs-widget-lockup-meta { font-size: 13.5px; color: var(--ink-light); }
.cob .cs-widget-badge-play {
  width: 22px; height: 22px; border-radius: 999px; background: var(--tan); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cob .cs-widget-badge-play svg { width: 11px; height: 11px; display: block; }

/* ---- the section itself ----
   A warm wash mixed from the tan token: the only warm block on the page, so it
   stands out by being different in kind rather than merely darker, and it sits
   with the outback tones in the poster rather than against them. */
.cob .cs-widget-fullband {
  margin-top: 78px; padding: 66px 56px; scroll-margin-top: 84px;
  background: color-mix(in srgb, var(--tan) 11%, #fff);
  border-top: 1px solid color-mix(in srgb, var(--tan) 22%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--tan) 22%, #fff);
}
.cob .cs-widget-inner { max-width: 1080px; margin: 0 auto; }
.cob .cs-widget-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: center; }
.cob .cs-widget-split-copy { min-width: 0; }
.cob .cs-widget-split-video { min-width: 0; }
.cob .cs-widget-context { font-size: 16px; line-height: 1.55; margin: 16px 0 0; max-width: 560px; text-wrap: pretty; }
.cob .cs-widget-fullband .cs-pills { justify-content: flex-start; margin-top: 24px; }
.cob .cs-widget-link { margin-top: 22px; font-weight: 600; font-family: var(--font-display); }
.cob .cs-widget-link:hover { color: var(--tan-deep); }
.cob .cs-widget-link-flush { margin-top: 0; }

/* "Runs on Cobber" footer strip. */
.cob .cs-widget-runs {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(30,58,95,0.10);
}
.cob .cs-widget-runs-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cob .cs-widget-runs-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-light); white-space: nowrap;
}
.cob .cs-widget-runs .cs-pills { margin-top: 0; }

@media (max-width: 1023px) {
  .cob .cs-widget-fullband { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 767px) {
  .cob .cs-widget-split { grid-template-columns: 1fr !important; gap: 26px !important; }
  .cob .cs-widget-fullband { margin-top: 48px; padding: 48px 24px; }
  .cob .cs-widget-lockup-name { font-size: 32px; }
  .cob .cs-widget-context { font-size: 15.5px; }
  .cob .cs-widget-runs { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 30px; }
}