/* ==========================================================================
   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;
}

/* live (hover/focus-triggered) full-width menu used inside the real nav */
.cob .feat-group { display: inline-flex; align-items: center; height: 68px; }
.cob .fullmenu.live {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.cob .feat-group:hover .fullmenu.live,
.cob .fullmenu.live:hover,
.cob .fullmenu.live.open { opacity: 1; visibility: visible; transform: translateY(0); }
.cob .feat-group:hover .navlink .car,
.cob .feat-group .navlink.is-open .car { transform: rotate(90deg) scaleX(-1); }
.cob .feat-group:hover .navlink,
.cob .feat-group .navlink.is-open { background: rgba(30,58,95,0.06); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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