/* ============================================================================
   v5 — "App-faithful" re-skin. Loads AFTER ds.css and the page's own styles,
   retargeting the existing class system to the LoopSuite app look:
   sage canvas, near-black pill CTAs, frosted rounded white cards, Spline Sans.
   The CTA colour is inherited from ds.css --cta-fill (near-black here).
   v6 = this file + a red --cta-fill override.
   ========================================================================== */

/* ---- Global canvas + type (win over inline/legacy) ---- */
body, .ex-body { background: var(--canvas) !important; color: var(--text-primary) !important; font-family: var(--font-sans) !important; }
h1,h2,h3,.page-hero h1,.sec-head h2,.hero h1 { font-family: var(--font-display) !important; font-weight: var(--weight-heavy) !important; letter-spacing: var(--tracking-tight) !important; color: var(--text-primary) !important; }
p,li { color: var(--text-secondary); }
.wrap, .ds-wrap { max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--page-pad); }
a { color: inherit; }

/* ---- Eyebrows / tags / pills ---- */
.eyebrow,.sec-tag,.q-eyebrow { color: var(--text-tertiary) !important; font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: var(--text-xs); }
.pill,.badge,.plat-badge,.plat-eyebrow { background: var(--surface-subtle) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; color: var(--text-primary) !important; }

/* ---- Buttons -> app pills ---- */
.btn,.nav-cta,.button { border-radius: var(--radius-pill) !important; font-family: var(--font-sans) !important; font-weight: var(--weight-bold) !important; transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease; border: 0; }
.btn:active,.button:active { transform: translateY(1px); }
.btn-primary,.nav-cta,.button.btn-primary,.btn.btn-primary {
  background: var(--cta-fill) !important; color: var(--cta-text) !important; box-shadow: var(--shadow-card) !important;
  padding: 15px 26px !important;
}
.btn-primary:hover,.nav-cta:hover { background: var(--cta-fill-hover) !important; box-shadow: var(--shadow-pop) !important; }
.btn-lg,.btn-primary.btn-lg { padding: 18px 32px !important; font-size: clamp(16px,1.6vw,18px) !important; }
.btn-ghost,.btn.btn-ghost { background: var(--control-fill) !important; color: var(--text-primary) !important; box-shadow: none !important; }
.btn-ghost:hover { background: var(--control-fill-strong) !important; }

/* ---- Nav -> frosted rounded chrome ---- */
.nav,.ex-head,header.nav {
  background: var(--glass-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border) !important;
}
.nav-links a { color: var(--text-secondary) !important; font-weight: var(--weight-semibold); }
.nav-links a:hover { color: var(--text-primary) !important; }
.logo { color: var(--text-primary) !important; }

/* ---- Hero ---- */
.page-hero,.hero { background: transparent !important; }
.page-hero h1,.hero h1,.ex-q { font-size: var(--text-hero) !important; line-height: var(--leading-tight) !important; }
.page-hero p,.hero p,.ex-sub { color: var(--text-secondary) !important; font-size: clamp(16px,1.7vw,19px) !important; }
.grad { -webkit-text-fill-color: var(--brand-red) !important; color: var(--brand-red) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; }

/* ---- Cards -> frosted rounded white ---- */
.card,.ocard,.intg-card,.price-card,.chatcard,.approve-card,.step,.plan,.faq details,.q-step,.q-trust {
  background: var(--surface-strong) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card) !important;
}
.card:hover,.intg-card:hover,.ocard:hover { box-shadow: var(--shadow-panel) !important; }
.split-media,.chatcard,.bubble { border-radius: var(--radius-lg) !important; }

/* ---- Sections / bands ---- */
.band-white { background: var(--surface-strong) !important; }
.band-green,.band-indigo { background: var(--canvas-alt) !important; color: var(--text-primary) !important; }
.sec-head h2 { font-size: var(--text-display) !important; }
.sec-head p { color: var(--text-secondary) !important; }

/* ---- CTA band / final -> near-black feature panel (app "Open card" vibe) ---- */
.cta-band,.final,.ex-cta.dark {
  background: var(--brand-ink) !important; color: #fff !important; border-radius: var(--radius-xl) !important;
}
.cta-band h2,.final h2,.cta-band p,.final p { color: #fff !important; }
.cta-band .btn-primary,.final .btn-primary { background: #fff !important; color: var(--brand-ink) !important; }

/* ---- Steps / checks / prices ---- */
.step b,.q-step b { background: var(--cta-fill) !important; color: #fff !important; border-radius: var(--radius-pill) !important; }
.check svg,.trust-note svg,.q-trust svg { color: var(--brand-red) !important; }
.price-card .price,.plan .price { font-family: var(--font-display) !important; font-weight: var(--weight-heavy) !important; color: var(--text-primary) !important; }
.price-card.featured,.plan.featured { border-color: var(--brand-red) !important; box-shadow: var(--shadow-panel) !important; }

/* ---- Integrations grid controls ---- */
.intg-search,.intg-chip { border-radius: var(--radius-pill) !important; border: 1px solid var(--border) !important; background: var(--surface-strong) !important; }
.intg-chip.active { background: var(--cta-fill) !important; color: #fff !important; border-color: var(--cta-fill) !important; }

/* ---- Footer ---- */
.foot,.ex-foot,.foot-top,.foot-bottom { background: var(--surface-strong) !important; border-top: 1px solid var(--border) !important; color: var(--text-secondary) !important; }
.foot a,.ex-foot a { color: var(--text-secondary) !important; }
.foot a:hover { color: var(--text-primary) !important; }

/* ---- Focus ---- */
a:focus-visible,.btn:focus-visible,button:focus-visible { outline: none; box-shadow: var(--ring) !important; }

/* ============================================================================
   Colour sweep + phone polish — make everything match the app.
   ========================================================================== */

/* Flip the legacy indigo variable to the brand accent site-wide */
:root { --indigo: var(--brand-red) !important; --indigo-hover: var(--brand-red-strong) !important; }

/* In-phone chat bubbles -> app palette (user = brick-red, assistant = white + soft shadow) */
.bubble.me,.bubble.user { background: var(--brand-red) !important; color: #fff !important; border-radius: var(--radius) !important; }
.bubble.ai,.bubble.assistant { border-radius: var(--radius) !important; }
.bubble.me svg path,.bubble.me .tail path { fill: var(--brand-red) !important; }

/* Consent banner (consent.js paints inline #4F46E5) */
#lsc-accept { background: var(--cta-fill) !important; color: #fff !important; }
#lsc-banner a { color: var(--brand-red) !important; }

/* Phone frames -> thin bezel + 3D titanium rim (Apple-ish), soft floating shadow */
.phone,.q-mock {
  background: linear-gradient(150deg,#43464d 0%,#191a1f 20%,#0b0c0f 55%,#282a30 100%) !important;
  border: 0 !important; padding: 7px !important; border-radius: 48px !important; position: relative;
  box-shadow: 0 48px 88px -34px rgba(0,0,0,.55), 0 12px 30px -12px rgba(0,0,0,.42),
              inset 0 0 0 1.5px rgba(255,255,255,.13), inset 0 1px 1px rgba(255,255,255,.30) !important;
}
.q-mock-screen { border-radius: 41px !important; overflow: hidden; }

/* ============================================================================
   v6 override — "High-contrast": CTA becomes brick-red and is the ONLY red
   button on the page; other red accents go neutral so the CTA is isolated
   (von Restorff). Everything else inherits the v5 app-faithful skin.
   ========================================================================== */
:root { --cta-fill: var(--brand-red) !important; --cta-fill-hover: var(--brand-red-strong) !important; }
/* neutralise the headline accent word so red = CTA only */
.grad { -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; }
/* step numbers + active chips follow the red CTA in v6 */

/* ============================================================================
   v6 fixes — navbar CTA size + true-iPhone phone frame.
   The ONLY nav bug was my skin bloating the CTA (75px tall) which broke the
   original grid row's alignment. So: compact the CTA + re-centre the row, and
   LEAVE the original grid nav + its 980px hamburger behaviour untouched.
   ========================================================================== */
.nav { align-items: center !important; }
.nav > * { align-self: center !important; }
.nav .nav-cta { padding: 0 !important; }                                  /* it's a wrapper, not the button */
.nav .btn-primary, .nav .nav-cta .btn { padding: 10px 20px !important; font-size: 14px !important; box-shadow: none !important; }
/* Keep the original grid (1fr auto 1fr) — it centres the logo in its own column
   with no overlap. Just make sure the logo link centres its mark vertically. */
.nav .logo { display: inline-flex !important; align-items: center !important; }

/* True-iPhone frame: thin uniform bezel, big corner radius, dynamic island */
.phone { padding: 6px !important; border-radius: 56px !important; }
.phone-screen { border-radius: 50px !important; height: 640px !important; }
.phone-notch { display: none !important; }
.phone::after {
  content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px; background: #05060a; border-radius: 999px; z-index: 6; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ============================================================================
   Unified true-iPhone frame — ALL phone mocks (.phone, .q-mock, .device):
   titanium rim, thin uniform bezel, dynamic island, responsive width.
   ========================================================================== */
.phone, .q-mock, .device {
  background: linear-gradient(150deg,#43464d 0%,#191a1f 20%,#0b0c0f 55%,#282a30 100%) !important;
  border: 0 !important; padding: 6px !important; border-radius: 54px !important; position: relative !important;
  width: 100%; max-width: min(320px, 90vw) !important;
  box-shadow: 0 48px 88px -34px rgba(0,0,0,.55), 0 12px 30px -12px rgba(0,0,0,.42),
              inset 0 0 0 1.5px rgba(255,255,255,.13), inset 0 1px 1px rgba(255,255,255,.30) !important;
}
.phone-screen, .q-mock-screen, .device-screen { border-radius: 48px !important; overflow: hidden; }
.phone-notch { display: none !important; }
.phone::after, .q-mock::after, .device::after {
  content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px; background: #05060a; border-radius: 999px; z-index: 6; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Short screens: stop the 600px+ app screens from dwarfing small phones */
@media (max-width: 420px){
  .phone-screen, .q-mock-screen, .device-screen, .device-screen[style*="height"] { height: 560px !important; }
}

/* Workflow step chips: neutral DS fill (kills leftover indigo-soft tint); done-step = brand red */
.flow-num { background: var(--surface-subtle) !important; color: var(--text-primary) !important; }
.flow-step.is-done .flow-num { background: var(--brand-red) !important; color: #fff !important; }

/* Grid sparse-flow fix: logo (DOM-first, col 2) was pushing the col-1 links to row 2.
   Pin all three nav children to row 1 so links/logo/CTA share one centred row. */
@media (min-width: 981px){ .nav > * { grid-row: 1 !important; } }