/* ==========================================================================
   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 — drop the desktop line break and let the browser balance the lines */
  .cob .hp-h1 { font-size:58px !important; text-wrap:balance; }
  .cob .hp-h1 br { display:none; }

  /* hero collage → stacked column */

  /* platform grid 3 → 2 */

  /* 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:38px !important; letter-spacing:-0.05em !important; text-wrap:initial; white-space:nowrap; }
  .cob .hp-h1 br.hp-br-phone { display:inline; }
  /* three lines on a phone: the marker is a real background that can wrap, not the rotated pseudo */
  .cob .hp-h1 .blend-mark { padding:0 8px; }
  .cob .hp-desk-word { display:none; }
  .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 */

  /* dashboard internals reflow — the faux-UI rows are built for 740px wide */

  /* platform grid → 1 */

  /* 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-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-prospects-table tbody tr { transition: 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; }
}

/* ==========================================================================
   Homepage hero demo — the customer's petition site in the middle of the
   collage, and the Cobber cards that react to a signature. Driven by
   hero_demo_controller.js, which adds cumulative .s1 … .s14 classes to
   .hp-demo. Without JS (or with reduced motion) the finished state shows.
   ========================================================================== */

/* --- hero copy sits on cream in brand navy; the stage rises behind the collage --- */
.cob.hp { overflow-x: clip; }
.cob.hp .hp-hero p { color: var(--navy); opacity: 0.85; }
.cob.hp .hp-hero .btn-ghost { color: var(--navy); border: 2px solid var(--navy); }
.cob.hp .hp-hero .btn-ghost:hover { background: #fff; }
.cob .hp-demo { perspective: 2200px; }
.cob .hp-demo::before { /* the navy stage rising behind the collage */
  content: ''; position: absolute; z-index: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  top: 330px; bottom: 0; background: linear-gradient(180deg, #24466F 0%, var(--navy) 55%);
}
.cob .hp-demo .hp-glow { z-index: 1; background: radial-gradient(closest-side, rgba(30,34,51,0.14), rgba(255,255,255,0.10) 50%, transparent 74%) !important; }

/* --- the site's own brand: deliberately not Cobber's palette --- */
.cob .sd {
  /* the site's brand: slate ink with gold — layout and type follow
     for-families.cobberhq.com.au, the colour is chosen to sit beside Cobber navy */
  --sd-brand: #2C3247; --sd-brand-deep: #1E2233; --sd-brand-light: #4A5270; --sd-ink: #1f1f1f;
  --sd-yellow: #F2C94C; --sd-orange: #f0603a; --sd-cream: #FCF5E6;
  position: relative; overflow: hidden; font-family: var(--font-body); color: #fff;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(255,255,255,0.14), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, rgba(0,0,0,0.30), transparent 65%),
    linear-gradient(115deg, var(--sd-brand-deep) 0%, var(--sd-brand) 55%, var(--sd-brand-light) 140%);
  /* designed at 720px wide; scaled rather than stretched to the 900px frame */
  zoom: 1.25;
}
.cob .sd::before { /* faint diagonal stripes, as on the real theme */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 18px);
}
.cob .hp-collage-site { transform: translateX(-50%) rotateX(4deg); transform-origin: 50% 100%; }
.cob .hp-collage-site > .pcard { /* the frame is just a clip: no white edge under the tilted site */
  background: #1E2233; border: 0;
  box-shadow: 0 60px 120px -30px rgba(10,20,40,0.7), 0 8px 24px rgba(20,40,70,0.1);
  transition: box-shadow 1.2s ease;
}
.cob .sd { border-radius: 0 0 16px 16px; }
.cob .hp-demo.s7 .hp-collage-site > .pcard { box-shadow: 0 60px 120px -30px rgba(10,20,40,0.7), 0 8px 24px rgba(20,40,70,0.1), 0 40px 130px -10px rgba(242,201,76,0.35); }
.cob .sd-chrome {
  height: 38px; background: #EEEEF1; border-bottom: 1px solid #D9D9DE; display: flex; align-items: center; padding: 0 14px; gap: 7px;
}
.cob .sd-chrome > span { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.cob .sd-url {
  margin-left: 10px; flex: 1; height: 24px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #DCDCE1;
  color: #5A5A63; font-size: 11.5px; display: flex; align-items: center; padding: 0 10px;
}
.cob .sd-nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 26px; background: var(--sd-brand); }
.cob .sd-logo { display: block; width: auto; height: 30px; }
.cob .sd-links { display: flex; align-items: center; gap: 18px; font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.cob .sd-donate { background: #fff; color: var(--sd-brand); padding: 6px 12px; border-radius: 2px; }
.cob .sd-body { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; padding: 30px 28px 34px; align-items: start; align-content: center; min-height: 402px; }
.cob .sd-eyebrow { font-size: 7.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #B9C0D8; margin-bottom: 10px; }
/* the live site's .pf-hero-title: Inter 900, uppercase, -0.035em, 0.92, faint shadow */
.cob .sd-h1 { font-family: 'Inter', var(--font-body); font-weight: 900; font-size: 42px; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.cob .sd-copy p { font-size: 10px; line-height: 1.5; margin: 14px 0 0; opacity: 0.92; max-width: 340px; }
.cob .sd-ticks { display: flex; gap: 14px; margin-top: 11px; font-size: 8.5px; font-weight: 600; }
.cob .sd-stats { display: flex; gap: 30px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.18); }
.cob .sd-stats b { display: block; font-family: 'Inter', var(--font-body); font-weight: 900; font-size: 18px; line-height: 1; letter-spacing: -0.02em; }
.cob .sd-stats span { display: block; font-size: 6.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-top: 4px; }

.cob .sd-form { background: #fff; color: var(--sd-ink); border-radius: 3px; padding: 18px 18px 16px; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.5); }
.cob .sd-form-h { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: -0.01em; }
.cob .sd-form-h em { font-style: normal; color: var(--sd-brand); }
.cob .sd-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.cob .sd-bar i { flex: 1; height: 5px; border-radius: 999px; background: #E9E6F2; position: relative; overflow: hidden; }
.cob .sd-bar i::after { content: ''; position: absolute; inset: 0 8% 0 0; border-radius: 999px; background: linear-gradient(90deg, #f0603a, #f5c93f, #67c23a); }
.cob .sd-bar span { font-size: 7.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--sd-brand); }
.cob .sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cob .sd-form label { display: block; font-size: 8.5px; font-weight: 700; margin-bottom: 8px; }
.cob .sd-form label small { font-weight: 400; color: #777; }
.cob .sd-in {
  position: relative; height: 22px; margin-top: 3px; border: 1px solid #CFCADF; border-radius: 2px;
  padding: 0 6px; display: flex; align-items: center; font-size: 8.5px; font-weight: 500; color: var(--sd-ink); white-space: nowrap; overflow: hidden;
}
.cob .sd-btn {
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; color: #fff; border-radius: 2px; transition: transform 0.15s, filter 0.15s;
}
.cob .sd-sign { background: var(--sd-brand); padding: 9px; margin-top: 4px; }
.cob .sd-fine { font-size: 6.5px; color: #777; line-height: 1.4; margin-top: 8px; }

/* modal, over a blurred page */
.cob .sd-overlay { position: absolute; inset: 0; background: rgba(12,14,24,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 5; }
.cob .sd-modal {
  position: absolute; left: 50%; top: 50%; width: 296px; z-index: 6; background: #fff; color: var(--sd-ink);
  border-radius: 3px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.cob .sd-modal-top { position: relative; background: var(--sd-brand); padding: 16px 18px 12px; text-align: center; border-bottom: 3px solid; border-image: linear-gradient(90deg, #f0603a, #f5c93f, #67c23a) 1; }
.cob .sd-check {
  width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 999px; background: var(--sd-yellow); color: var(--sd-brand);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(242,201,76,0.35);
}
.cob .sd-check svg { width: 18px; height: 18px; }
.cob .sd-confetti, .cob .sd-confetti::before, .cob .sd-confetti::after {
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 1px;
}
.cob .sd-confetti { left: 40px; top: 22px; background: var(--sd-yellow); transform: rotate(20deg); }
.cob .sd-confetti::before { left: 190px; top: -6px; background: #67c23a; border-radius: 999px; }
.cob .sd-confetti::after { left: 220px; top: 30px; background: var(--sd-orange); transform: rotate(-30deg); }
.cob .sd-modal-h { font-family: 'Inter', var(--font-body); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; }
.cob .sd-modal-sub { font-size: 9px; color: rgba(255,255,255,0.85); margin-top: 3px; }
.cob .sd-modal-body { padding: 12px 16px 12px; }
.cob .sd-pill { display: inline-block; background: var(--sd-brand); color: #fff; font-size: 6.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; }
.cob .sd-modal-t { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; margin-top: 7px; }
.cob .sd-modal-p { font-size: 8.5px; color: #4B4762; line-height: 1.4; margin-top: 2px; }
.cob .sd-share { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.cob .sd-share span { height: 22px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; border-radius: 2px; }
.cob .sd-then { display: flex; align-items: center; gap: 8px; margin: 9px 0 8px; font-size: 6.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8A86A0; }
.cob .sd-then::before, .cob .sd-then::after { content: ''; flex: 1; border-top: 1px solid #E4E1EE; }
.cob .sd-chip { background: var(--sd-cream); border-left: 2px solid var(--sd-yellow); padding: 8px 10px 10px; }
.cob .sd-chip .sd-modal-t { margin-top: 0; }
.cob .sd-chipin { background: var(--sd-yellow); color: var(--sd-brand-deep); padding: 8px; margin-top: 8px; }

/* --- typing --- */
.cob .sd-in .typed { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.cob .sd-in .caret { width: 1px; height: 12px; background: var(--sd-brand-deep); margin-left: 1px; opacity: 0; }
@keyframes hp-caret { 50% { opacity: 0; } }

/* --- pointer --- */
.cob .sd-cursor {
  position: absolute; left: 62%; top: 60%; width: 24px; height: 24px; z-index: 7; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
  transition: left 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s;
}
.cob .sd-cursor svg { width: 100%; height: 100%; display: block; transform-origin: 25% 15%; transition: transform 0.12s; }
.cob .sd-cursor::after {
  content: ''; position: absolute; left: -6px; top: -7px; width: 24px; height: 24px; border-radius: 999px;
  border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); opacity: 0; transform: scale(0.4);
}
.cob .sd-cursor.is-visible { opacity: 1; }
.cob .sd-cursor.is-clicking svg { transform: scale(0.82); }
.cob .sd-cursor.is-clicking::after { animation: sd-click 0.5s ease-out; }
@keyframes sd-click { 0% { opacity: 0.95; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.1); } }

/* --- confetti burst from the check badge when the signature lands --- */
.cob .sd-burst { position: absolute; left: 50%; top: calc(50% - 155px); width: 0; height: 0; z-index: 8; pointer-events: none; }
.cob .sd-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 2px; opacity: 0; }
.cob .sd-burst i:nth-child(4n+1) { background: var(--sd-yellow); } .cob .sd-burst i:nth-child(4n+2) { background: var(--sd-orange); }
.cob .sd-burst i:nth-child(4n+3) { background: #67c23a; } .cob .sd-burst i:nth-child(4n+4) { background: #fff; border-radius: 999px; }
.cob .sd-burst i:nth-child(1)  { --a: 0deg;   --d: 150px; } .cob .sd-burst i:nth-child(2)  { --a: 28deg;  --d: 120px; }
.cob .sd-burst i:nth-child(3)  { --a: 55deg;  --d: 165px; } .cob .sd-burst i:nth-child(4)  { --a: 84deg;  --d: 130px; }
.cob .sd-burst i:nth-child(5)  { --a: 112deg; --d: 150px; } .cob .sd-burst i:nth-child(6)  { --a: 140deg; --d: 115px; }
.cob .sd-burst i:nth-child(7)  { --a: 170deg; --d: 140px; } .cob .sd-burst i:nth-child(8)  { --a: 200deg; --d: 125px; }
.cob .sd-burst i:nth-child(9)  { --a: 230deg; --d: 160px; } .cob .sd-burst i:nth-child(10) { --a: 258deg; --d: 120px; }
.cob .sd-burst i:nth-child(11) { --a: 286deg; --d: 150px; } .cob .sd-burst i:nth-child(12) { --a: 314deg; --d: 130px; }
.cob .sd-burst i:nth-child(13) { --a: 340deg; --d: 170px; } .cob .sd-burst i:nth-child(14) { --a: 14deg;  --d: 100px; }
@keyframes sd-burst {
  0%   { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0deg) scale(0.5); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(260deg) scale(1); }
}

/* --- odometer: two stacked values, the second slides up --- */
.cob .odo { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; }
.cob .odo > span { display: block; line-height: 1; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* --- the Cobber cards: turned toward the site, materialise from blur on a spring --- */
.cob .hp-pop {
  opacity: 0; transform: var(--rot) translateY(36px) scale(0.88); filter: blur(14px);
  transition: opacity 0.7s, filter 0.8s, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.cob .hp-pop::after { /* arrival ring, animated per step below */
  content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(196,149,106,0);
}
@keyframes hp-arrive { 0% { box-shadow: 0 0 0 0 rgba(196,149,106,0.7), 0 0 60px 10px rgba(196,149,106,0.35); } 100% { box-shadow: 0 0 0 26px rgba(196,149,106,0), 0 0 0 0 rgba(196,149,106,0); } }
.cob .hp-pop .pcard { box-shadow: 0 34px 80px -22px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.08); }
.cob .hp-new-row { max-height: 0; opacity: 0; overflow: hidden; background: var(--sky); box-shadow: inset 3px 0 0 var(--sky-deep); border-radius: 6px; transition: max-height 0.45s ease, opacity 0.3s 0.15s, background 1.8s 1s, box-shadow 1.8s 1s; }
.cob .auto-step { opacity: 0.28; filter: saturate(0.2); transition: opacity 0.35s, filter 0.35s; }
.cob .auto-status { opacity: 0; transform: translateY(6px); transition: opacity 0.35s 1.35s, transform 0.35s 1.35s; }
.cob .don-receipt, .cob .msg-status { opacity: 0; transform: translateY(6px); transition: opacity 0.4s 0.7s, transform 0.4s 0.7s; }
.cob .msg-status .msg-sending { position: absolute; opacity: 1; transition: opacity 0.3s 0.6s; }
.cob .msg-bubble { position: relative; background: #E9E9EB; color: #111; border-radius: 18px 18px 18px 5px; padding: 10px 13px; font-size: 12px; line-height: 1.4; } /* iOS received-message grey */

@media (min-width: 1024px) { .cob .hp-notes, .cob .hp-mini { display: none; } }

.cob .hp-h1 .hp-br-phone { display:none; }

/* ==== resting state (before JS, or between loops) ==== */
.cob .hp-demo .sd-overlay, .cob .hp-demo .sd-modal { opacity: 0; visibility: hidden; }
.cob .hp-demo .sd-overlay { transition: opacity 0.35s, visibility 0.35s; }
.cob .hp-demo .sd-modal { transform: translate(-50%, -42%) scale(0.8); filter: blur(12px); transition: opacity 0.5s, visibility 0.5s, filter 0.6s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }

/* ==== steps ==== */
.cob .hp-demo.s1 .f1 .typed { max-width: 40px; transition: max-width 0.45s steps(5); }
.cob .hp-demo.s2 .f2 .typed { max-width: 40px; transition: max-width 0.45s steps(6); }
.cob .hp-demo.s3 .f3 .typed { max-width: 140px; transition: max-width 0.7s steps(24); }
.cob .hp-demo.s4 .f4 .typed { max-width: 30px; transition: max-width 0.35s steps(4); }
.cob .hp-demo.s5 .f5 .typed { max-width: 70px; transition: max-width 0.55s steps(12); }
.cob .hp-demo.s1:not(.s2) .f1 .caret, .cob .hp-demo.s2:not(.s3) .f2 .caret,
.cob .hp-demo.s3:not(.s4) .f3 .caret, .cob .hp-demo.s4:not(.s5) .f4 .caret, .cob .hp-demo.s5:not(.s6) .f5 .caret { opacity: 1; animation: hp-caret 0.9s steps(1) infinite; }
.cob .hp-demo.s1:not(.s2) .f1, .cob .hp-demo.s2:not(.s3) .f2,
.cob .hp-demo.s3:not(.s4) .f3, .cob .hp-demo.s4:not(.s5) .f4, .cob .hp-demo.s5:not(.s6) .f5 { border-color: var(--sd-brand); box-shadow: 0 0 0 2px rgba(44,50,71,0.18); }
.cob .hp-demo.s6 .sd-sign { transform: scale(0.97); filter: brightness(0.85); }
.cob .hp-demo.s7 .sd-sign { transform: none; filter: none; }
.cob .hp-demo.s7 .sd-overlay, .cob .hp-demo.s7 .sd-modal { opacity: 1; visibility: visible; }
.cob .hp-demo.s7 .sd-modal { transform: translate(-50%, -50%) scale(1); filter: none; }
.cob .hp-demo.s7 .sd-form-h .odo > span { transform: translateY(-50%); }
.cob .hp-demo.s7 .sd-burst i { animation: sd-burst 1.25s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
.cob .hp-demo.s7 .sd-burst i:nth-child(even) { animation-delay: 0.06s; }
.cob .hp-demo.s8 .hp-collage-people, .cob .hp-demo.s9 .hp-collage-email, .cob .hp-demo.s10 .hp-collage-sms,
.cob .hp-demo.s11 .hp-collage-workflow, .cob .hp-demo.s13 .hp-collage-donation { opacity: 1; transform: var(--rot); filter: none; }
.cob .hp-demo.s8 .hp-collage-people::after, .cob .hp-demo.s9 .hp-collage-email::after, .cob .hp-demo.s10 .hp-collage-sms::after,
.cob .hp-demo.s11 .hp-collage-workflow::after, .cob .hp-demo.s13 .hp-collage-donation::after { animation: hp-arrive 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
.cob .hp-demo.s8 .hp-new-row { max-height: 60px; opacity: 1; background: #fff; box-shadow: inset 3px 0 0 transparent; }
.cob .hp-demo.s8 .hp-collage-people .odo > span { transform: translateY(-50%); transition-delay: 0.35s; }
.cob .hp-demo.s9 .hp-collage-email .msg-status, .cob .hp-demo.s10 .hp-collage-sms .msg-status { opacity: 1; transform: none; }
.cob .hp-demo.s9 .hp-collage-email .msg-sending, .cob .hp-demo.s10 .hp-collage-sms .msg-sending { opacity: 0; }
.cob .hp-demo.s11 .auto-step { opacity: 1; filter: none; }
.cob .hp-demo.s11 .st1 { transition-delay: 0.35s; } .cob .hp-demo.s11 .st2 { transition-delay: 0.5s; } .cob .hp-demo.s11 .st3 { transition-delay: 0.65s; }
.cob .hp-demo.s11 .st4 { transition-delay: 0.8s; } .cob .hp-demo.s11 .st5 { transition-delay: 0.95s; } .cob .hp-demo.s11 .st6 { transition-delay: 1.1s; }
.cob .hp-demo.s11 .auto-status { opacity: 1; transform: none; }
.cob .hp-demo.s12 .sd-chipin { transform: scale(0.97); filter: brightness(0.85); }
.cob .hp-demo.s13 .sd-chipin { transform: none; filter: none; }
.cob .hp-demo.s14 .don-receipt { opacity: 1; transform: none; }

/* ==== no JS: show the finished state ==== */
.cob .hp-demo:not([data-hero-demo-ready]) .hp-pop { opacity: 1; transform: var(--rot); filter: none; }
.cob .hp-demo:not([data-hero-demo-ready]) .don-receipt, .cob .hp-demo:not([data-hero-demo-ready]) .msg-status, .cob .hp-demo:not([data-hero-demo-ready]) .auto-status { opacity: 1; transform: none; }
.cob .hp-demo:not([data-hero-demo-ready]) .auto-step { opacity: 1; filter: none; }
.cob .hp-demo:not([data-hero-demo-ready]) .msg-sending { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cob .hp-demo *, .cob .hp-demo *::before, .cob .hp-demo *::after { transition: none !important; animation: none !important; }
}

/* ==== the demo on a phone (below the desktop stage) ==== */
@media (max-width: 1023px) {
  /* Below the desktop stage the demo becomes a phone: the customer's site in a
     phone frame on a navy panel, and the cards become notification banners that
     stack over its top edge. Same steps, same controller. */
  .cob .hp-collage { position:relative !important; height:auto !important; width:100% !important; display:flex; flex-direction:column; align-items:center; margin-top:28px; padding:96px 0 40px; background:linear-gradient(180deg, #24466F 0%, var(--navy) 60%); perspective:none; }
  .cob .hp-collage > div:not(.hp-notes) { position:static !important; transform:none !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; }
  .cob .hp-demo::before, .cob .hp-demo .hp-glow, .cob .hp-pop, .cob .sd-chrome, .cob .sd-cursor { display:none !important; }
  .cob .hp-collage-site { width:284px !important; max-width:80%; }
  .cob .hp-collage-site > .pcard { /* the phone */
    position:relative; width:100% !important; height:560px; border-radius:42px; border:8px solid #1E2233; background:#1E2233;
    box-shadow:0 40px 80px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  }
  .cob .hp-collage-site > .pcard::before { /* the notch */
    content:''; position:absolute; left:50%; top:10px; transform:translateX(-50%); width:86px; height:22px; border-radius:999px; background:#1E2233; z-index:9;
  }
  .cob .sd { zoom:1.18; height:100%; border-radius:30px; }
  .cob .sd-nav { padding:30px 14px 9px; }
  .cob .sd-logo { height:20px; }
  .cob .sd-links span:not(.sd-donate) { display:none; }
  .cob .sd-donate { font-size:8px; padding:5px 9px; }
  .cob .sd-body { display:block; min-height:0; padding:14px 12px 16px; }
  .cob .sd-eyebrow { font-size:6.5px; margin-bottom:8px; }
  .cob .sd-h1 { font-size:26px; }
  .cob .sd-copy p, .cob .sd-ticks, .cob .sd-stats { display:none; }
  .cob .sd-form { margin-top:12px; padding:12px 12px 10px; }
  .cob .sd-modal { width:88%; transform-origin:50% 50%; }
  .cob .sd-share { display:none; }
  .cob .sd-burst { top:calc(50% - 120px); }
  .cob .hp-collage > .hp-mini { position:static !important; }
  /* native notifications, dropping in over the phone's top edge */
  .cob .hp-notes { position:absolute; left:0; right:0; top:76px; z-index:12; pointer-events:none; }
  .cob .hp-note {
    position:absolute; left:50%; top:0; width:min(330px, calc(100% - 28px)); display:flex; align-items:flex-start; gap:10px;
    background:rgba(245,245,247,0.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-radius:20px; padding:11px 13px; box-shadow:0 18px 40px -14px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.12);
    color:#111; font-size:12px; line-height:1.3;
    opacity:0; transform:translate(-50%, -24px) scale(0.94); transition:opacity 0.45s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cob .hp-note b { font-weight:600; font-size:12.5px; }
  .cob .hp-note-app { width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .cob .hp-note-app svg { width:20px; height:20px; }
  .cob .hp-note-time { font-size:11px; color:#6e6e73; flex-shrink:0; }
  .cob .hp-note-l1 { font-weight:500; margin-top:1px; }
  .cob .hp-note-l2 { color:#3a3a3c; margin-top:1px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
  .cob .hp-demo.s9 .n2 { opacity:1; transform:translate(-50%, 0); z-index:3; }
  .cob .hp-demo.s10 .n3 { opacity:1; transform:translate(-50%, 0); z-index:3; }
  .cob .hp-demo.s10 .n2 { opacity:0.55; transform:translate(-50%, 10px) scale(0.94); z-index:2; }
  .cob .hp-demo:not([data-hero-demo-ready]) .n3 { opacity:1; transform:translate(-50%, 0); }
  /* what the organiser sees: a row of Cobber cards under the phone, filling in as the loop runs */
  .cob .hp-mini { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; max-width:560px; padding:26px 16px 0; }
  .cob .hp-mini-card {
    display:flex; align-items:center; gap:10px; flex:1 1 160px; max-width:260px; background:#fff; border-radius:14px; padding:10px 12px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.1);
    opacity:0; transform:translateY(16px) scale(0.94); transition:opacity 0.5s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cob .hp-mini-card .ibadge { width:32px; height:32px; border-radius:9px; }
  .cob .hp-mini-card .ibadge svg { width:16px; height:16px; display:block; }
  .cob .hp-mini-t { font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--ink); line-height:1.2; }
  .cob .hp-mini-s { font-size:11px; color:var(--ink-mute); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cob .hp-demo.s8 .m1, .cob .hp-demo.s11 .m4, .cob .hp-demo.s13 .m5, .cob .hp-demo:not([data-hero-demo-ready]) .hp-mini-card { opacity:1; transform:none; }
}

/* ==========================================================================
   The Platform — the scattered stack, struck through, beside Cobber.
   ========================================================================== */
.cob .hp-pc-before { --scale: 1.08; }
.cob .hp-pc-before > * { zoom: var(--scale, 1); }
.cob .hp-pc-old {
  position: absolute; background: #fff; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; color: #666;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,0.35); transform: rotate(var(--r)); filter: saturate(0.4);
}
.cob .hp-pc-old::after { /* struck through */
  content: ''; position: absolute; left: -6%; right: -6%; top: 50%; height: 3px; background: var(--tan); transform: rotate(-6deg); opacity: 0.85;
}
.cob .hp-pc-note {
  position: absolute; padding: 12px 12px 13px; background: #FFF6B3; color: #4a3d00; transform: rotate(var(--r));
  box-shadow: 0 10px 22px -8px rgba(0,0,0,0.35); font-family: 'Chalkboard SE', 'Comic Sans MS', 'Segoe Print', cursive; font-size: 13px; line-height: 1.3; z-index: 2;
}
.cob .hp-pc-note::before { /* tape */
  content: ''; position: absolute; left: 50%; top: -8px; width: 46px; height: 14px; transform: translateX(-50%) rotate(-2deg);
  background: rgba(255,255,255,0.55); box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.cob .hp-pc-old-bar { background: #f1f1f1; border-bottom: 1px solid #ddd; padding: 6px 10px; font-size: 10.5px; font-weight: 600; color: #555; font-family: var(--font-display); }
@media (max-width: 1023px) {
  .cob .hp-pc-cols { grid-template-columns: 1fr !important; }
  .cob .hp-pc-before { max-width: 480px; margin: 0 auto; width: 100%; --scale: 0.95; height: 400px !important; }
  .cob .hp-pc-cols > div:nth-child(2) { transform: rotate(90deg); margin: 8px 0; }
}
@media (max-width: 767px) {
  /* the pile keeps its overlapping layout on phones, scaled to fit */
  .cob .hp-pc-before { --scale: 0.68; height: 260px !important; max-width: 340px; }
  .cob .hp-pc-list { grid-template-columns: 1fr 1fr !important; gap: 0 12px !important; }
  .cob .hp-pc-list .display { font-size: 15px !important; }
  .cob .hp-pc-list .ibadge { width: 30px !important; height: 30px !important; }
  .cob .hp-pc h2.display { font-size: 32px !important; }
  .cob .hp-pc { padding-top: 64px !important; }
}

/* ==== customer-story variants (?story=a|b|c|d), being compared ==== */
.cob .cs-c-stage { perspective: 1800px; }
.cob .cs-c .hp-pop-static { box-shadow: 0 30px 70px -22px rgba(20,40,70,0.42), 0 4px 14px rgba(20,40,70,0.06); }
.cob .cs-b .cs-video, .cob .cs-c .cs-video { max-width: none; }
@media (max-width: 1023px) {
  .cob .cs-a-grid, .cob .cs-d-grid { grid-template-columns: 1fr !important; }
  .cob .cs-b-foot { grid-template-columns: 1fr !important; }
  .cob .cs-b-foot > div:last-child { align-items: flex-start !important; }
  .cob .cs-c-stage { height: auto !important; display: grid; gap: 14px; }
  .cob .cs-c-stage > * { position: static !important; transform: none !important; width: 100% !important; }
  .cob .cs-d h2 { font-size: 64px !important; }
}
/* D: the iframe fills the section behind the copy once Watch is pressed */
.cob .cs-d-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; }

/* ==========================================================================
   /cpac — conference landing page (landing#cpac)
   Phone-first: almost all of this traffic is a QR scan in a conference hall.
   Only genuinely new token is --strike, sampled from the flyer's red circles.
   ========================================================================== */

.cob.cpac { --strike: #CF2E24; }

/* ---- the one dated layer; CpacEvent decides whether it renders at all ---- */
.cob .cpac-bar {
  background: var(--navy-deep); color: #fff; font-family: var(--font-display);
  font-size: 13.5px; font-weight: 500; display: flex; align-items: center;
  justify-content: center; gap: 10px; padding: 9px 20px; text-align: center;
}
.cob .cpac-dot {
  width: 7px; height: 7px; border-radius: 999px; background: #4ADE80; flex-shrink: 0;
  animation: cpac-pulse 2s infinite;
}
@keyframes cpac-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) { .cob .cpac-dot { animation: none; } }

/* ---- minimal nav: a conference page should not offer exits ---- */
.cob .cpac-nav {
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; max-width: 1180px; margin: 0 auto;
}
.cob .cpac-wrap { max-width: 680px; margin: 0 auto; padding: 0 22px; }
/* The homepage's mobile rule (".cob.hp > section") force-pads every section with
   !important. On /cpac the gutter belongs to .cpac-wrap alone, or the two stack
   and squeeze the cards. Needs matching weight plus one more class to win. */
.cob.hp > section.cpac-hero,
.cob.hp > section.cpac-sec { padding-left: 0 !important; padding-right: 0 !important; }

/* ---- hero ---- */
.cob .cpac-hero { padding: 28px 0 0; text-align: center; }
.cob .cpac-hero h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.06;
  letter-spacing: -0.04em; margin: 15px 0 0; text-wrap: balance; color: var(--ink);
}
@media (min-width: 420px) { .cob .cpac-hero h1 { font-size: 41px; } }
@media (min-width: 560px) { .cob .cpac-hero h1 { font-size: 54px; } }
.cob .cpac-hero h1 .blend-mark {
  display: inline-block; margin-top: 12px;
  /* The answer should be noticeably louder than the charge it answers. */
  font-size: 1.32em; line-height: 1.05;
}


/* ---- the strike wall: the flyer's front panel ---- */
.cob .cpac-seq { margin-top: 28px; }
.cob .cpac-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px 8px;
  max-width: 430px; margin: 0 auto;
}
.cob .cpac-tool { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cob .cpac-badge {
  position: relative; width: 52px; height: 52px; border-radius: 999px;
  display: block; background: #fff;
}
.cob .cpac-badge img {
  width: 100%; height: 100%; display: block; border-radius: 999px; object-fit: cover;
}
/* Struck tools drain of colour as well as taking the slash, so the resolved
   Cobber card below is the only saturated thing left on screen. */
.cob .cpac-tool img { transition: filter .3s ease, opacity .3s ease; }
.cob .cpac-seq.is-armed .cpac-tool.is-struck img,
.cob .cpac-seq:not(.is-armed) .cpac-tool img { filter: grayscale(1); opacity: 0.55; }
.cob .cpac-badge::after {
  content: ''; position: absolute; inset: -1px; border-radius: 999px;
  border: 2.5px solid var(--strike);
}
.cob .cpac-badge::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 2.5px;
  background: var(--strike); transform: translate(-50%,-50%) rotate(-45deg);
}
.cob .cpac-label {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--rule-strong);
  text-align: center; text-decoration: line-through;
}

/* Resting state above is the FINISHED state, so no-JS reads correctly. The
   controller adds .is-armed to wind it back before playing the sequence. */
.cob .cpac-seq.is-armed .cpac-badge::after,
.cob .cpac-seq.is-armed .cpac-badge::before { opacity: 0; transition: opacity .28s ease; }
.cob .cpac-seq.is-armed .cpac-label { color: var(--ink-light); text-decoration: none; }
.cob .cpac-seq.is-armed .cpac-tool.is-struck .cpac-badge::after,
.cob .cpac-seq.is-armed .cpac-tool.is-struck .cpac-badge::before { opacity: 1; }
.cob .cpac-seq.is-armed .cpac-tool.is-struck .cpac-badge { animation: cpac-shake .34s cubic-bezier(.3,.9,.4,1); }
.cob .cpac-seq.is-armed .cpac-tool.is-struck .cpac-label { color: var(--rule-strong); text-decoration: line-through; }
@keyframes cpac-shake {
  0% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-5deg); } 100% { transform: scale(1); }
}

/* ---- the resolve ---- */
.cob .cpac-resolve { margin-top: 26px; }
.cob .cpac-seq.is-armed .cpac-resolve {
  opacity: 0; transform: translateY(20px) scale(0.97);
  transition: opacity .55s cubic-bezier(.2,.8,.3,1), transform .55s cubic-bezier(.2,.8,.3,1);
}
.cob .cpac-seq.is-armed .cpac-resolve.is-in { opacity: 1; transform: none; }

/* ---- the one-login grid, from the flyer's back panel ---- */
.cob .cpac-onelogin { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cob .cpac-onelogin > div {
  display: flex; gap: 11px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.cob .cpac-onelogin > div:nth-last-child(-n+2) { border-bottom: 0; }
.cob .cpac-onelogin .ibadge { width: 34px; height: 34px; border-radius: 10px; }
.cob .cpac-onelogin-t {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; color: var(--ink);
}

/* ---- the explanation beat ---- */
.cob .cpac-story {
  font-size: 16.5px; line-height: 1.55; color: var(--ink-mute);
  margin: 28px auto 0; max-width: 520px;
}
.cob .cpac-story b { color: var(--ink); font-weight: 600; }

/* ---- the two ways in: equal weight, two different people ---- */
.cob .cpac-ways { display: grid; gap: 13px; margin-top: 30px; }
@media (min-width: 600px) { .cob .cpac-ways { grid-template-columns: 1fr 1fr; } }
.cob .cpac-way { padding: 22px 20px 20px; border-radius: 17px; text-align: left; display: flex; flex-direction: column; }
.cob .cpac-way-talk { background: var(--navy); color: #fff; box-shadow: 0 24px 50px -22px rgba(20,40,70,0.8); }
.cob .cpac-way-email { background: #fff; border: 1.5px solid var(--rule-strong); }
.cob .cpac-way-k {
  font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 11px;
}
.cob .cpac-way-talk .cpac-way-k { color: var(--tan-light); }
.cob .cpac-way-email .cpac-way-k { color: var(--tan-deep); }
.cob .cpac-way-h { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.025em; line-height: 1.1; }
.cob .cpac-way-email .cpac-way-h { color: var(--ink); }
.cob .cpac-way-p { font-size: 14px; line-height: 1.45; margin: 8px 0 0; }
.cob .cpac-way-talk .cpac-way-p { color: rgba(255,255,255,0.74); }
.cob .cpac-way-email .cpac-way-p { color: var(--ink-mute); }
.cob .cpac-way .cpac-cta { margin-top: auto; padding-top: 17px; }

.cob .cpac-person { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.cob .cpac-person img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); }
.cob .cpac-person-n { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.cob .cpac-person-r { font-size: 12px; color: rgba(255,255,255,0.62); }
.cob .cpac-here {
  display: inline-flex; align-items: center; gap: 5px; background: #16A34A; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; padding: 3px 8px;
  border-radius: 999px; margin-left: auto; white-space: nowrap;
}
.cob .cpac-here i { width: 5px; height: 5px; border-radius: 999px; background: #fff; display: block; }

.cob .btn-tan { background: var(--tan); color: #fff; }
.cob .btn-tan:hover { background: var(--tan-deep); }

/* ---- "what are you running on now?" ---- */
.cob .cpac-stack-q {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  color: var(--ink); margin: 17px 0 9px;
}
/* Fixed 3-up so the six options are always exactly two rows — a ragged
   three-row wrap made the card read as a questionnaire. */
.cob .cpac-stack-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cob .cpac-stack-option {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  padding: 9px 4px; border-radius: 999px; cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #fff; color: var(--ink-mute); border: 1.5px solid var(--rule-strong);
  transition: border-color .14s, background .14s, color .14s;
}
/* Side by side, the card is narrower than a phone's and the two longest
   labels overrun by under a pixel. */
@media (min-width: 600px) { .cob .cpac-stack-option { font-size: 11px; padding: 9px 3px; } }
.cob .cpac-stack-option:hover { border-color: var(--navy); color: var(--ink); }
.cob .cpac-stack-option[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.cob .cpac-stack-option:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.cob .cpac-stack-reply {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 11px;
  font-size: 13px; line-height: 1.4; color: var(--ink-mute);
  animation: cpac-reply-in .3s cubic-bezier(.2,.8,.3,1);
}
.cob .cpac-stack-reply[hidden] { display: none; }
@keyframes cpac-reply-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cob .cpac-stack-reply .ibadge {
  width: 19px; height: 19px; border-radius: 999px; background: var(--mint);
  color: var(--mint-deep); margin-top: 1px;
}

/* ---- form fields ---- */
.cob .cpac-fields { display: grid; gap: 11px; margin-top: 15px; }
.cob .cpac-input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid var(--rule-strong); background: #fff; font-family: var(--font-body);
  font-size: 15px; color: var(--ink); outline: none;
}
.cob .cpac-input::placeholder { color: var(--ink-light); }
.cob .cpac-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,0.10); }

/* ---- why we built Cobber ---- */
.cob .cpac-sec { padding: 46px 0 0; }
.cob .cpac-sec h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 29px; line-height: 1.06;
  letter-spacing: -0.03em; margin: 0; text-wrap: balance; color: var(--ink);
}
/* Was strike red to tie back to the struck NationBuilder badge above; read too
   much like an error state next to a person's name. */
.cob .cpac-founders-from { font-weight: 600; }

/* ---- numbers ---- */
.cob .cpac-band { background: var(--navy); color: #fff; margin-top: 46px; padding: 44px 0 42px; }
.cob .cpac-stats { display: grid; grid-template-columns: repeat(var(--stat-cols, 3), 1fr); }
.cob .cpac-stats > div { padding: 0 18px; border-left: 1px solid rgba(255,255,255,0.16); }
.cob .cpac-stats > div:first-child { border-left: 0; padding-left: 0; }
.cob .cpac-stat-n { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
.cob .cpac-stat-l { font-size: 12.5px; line-height: 1.35; margin-top: 7px; opacity: 0.72; }
@media (max-width: 860px) {
  .cob .cpac-stats { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  /* Whatever wraps onto a new row loses the divider that would otherwise
     dangle at the start of it. */
  .cob .cpac-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---- closing CTA ---- */
/* The closing section is cream and the footer is navy-deep, so without this the
   CTAs sit hard against the colour change. */
.cob .cpac-close { padding-bottom: 72px; }
.cob .cpac-close-cta {
  display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin-top: 24px;
}
.cob .cpac-close-cta .btn { height: 50px; padding: 0 24px; font-size: 15.5px; }
.cob.hp > section.cpac-close { padding-left: 0 !important; padding-right: 0 !important; }

/* The 680px wrap suits the cards and the form, but it forces the headline onto
   three lines on a desktop that has room for two. The hero gets a wider wrap
   and its inner blocks keep their own measures. */
@media (min-width: 900px) {
  .cob .cpac-hero .cpac-wrap { max-width: 940px; }
  .cob .cpac-hero h1 { font-size: 58px; max-width: 840px; margin-left: auto; margin-right: auto; }
  .cob .cpac-story { max-width: 600px; }
  /* Top-align rather than stretch: the form card is much taller now that it
     carries the stack question and four fields, and stretching the navy card
     to match left a void with the button pinned to the bottom of it. */
  .cob .cpac-ways { max-width: 760px; margin-left: auto; margin-right: auto; align-items: start; }
  /* Closer to the flyer's single row of twelve than a 4-up block is. */
  .cob .cpac-grid { grid-template-columns: repeat(6, 1fr); max-width: 660px; }
  /* The card shouldn't run the full width of the wider hero wrap — at 940px the
     rows stretch so far that the icon and its label stop reading as a pair. */
  .cob .cpac-resolve { max-width: 680px; margin-left: auto; margin-right: auto; }
  /* The explanation beat is the hinge between the demonstration and the ask, so
     give it room on both sides rather than letting it crowd either. */
  .cob .cpac-story { margin-top: 60px; }
  .cob .cpac-ways { margin-top: 56px; }
}