/* ==========================================================================
   Rescover Marketing Design System
   --------------------------------------------------------------------------
   The single stylesheet for every public marketing page (homepage, product,
   feature, and pro pages). Loaded per-page via the "Styles" section on top of
   Bootstrap, so every class here is prefixed `mkt-` to avoid collisions with
   Bootstrap (.card, .btn, etc.). Page markup lives inside a `.rs-mkt` wrapper.

   Source of truth for the look: the approved 2026-07 messaging-overhaul
   mockups (VA Hub/Marketing/work/2026-07_messaging-overhaul). Brand values
   come from the Rescover Branding Book:
     Dark Eclipse #132844 · Lava Lamp #F26E34 · Bee Cluster #F9AA34
     Teal (Property Suite) #009CA6 · backdrop gray #e9edf1
     Investment Gateway #6FA8DC · Portfolio Insights #8E7CC3 · Olivine #93C47D
   Fonts: Montserrat (display) / Lato (body) — loaded by _Layout; the 800
   display weight is imported below.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

:root {
  --rs-eclipse: #132844;
  --rs-lava: #F26E34;
  --rs-lava-hover: #d95c26;
  --rs-bee: #F9AA34;
  --rs-teal: #009CA6;
  --rs-gray: #e9edf1;
  --rs-ink: #1d2b3a;
  --rs-sub: #5a6b7d;
  --rs-ig: #6FA8DC;
  --rs-pi: #8E7CC3;
  --rs-olive: #93C47D;
  --rs-good: #128233;
  --rs-radius: 14px;
  --rs-shadow: 0 10px 30px rgba(19, 40, 68, .10);
}

/* ---- base -------------------------------------------------------------- */
.rs-mkt { font-family: 'Lato', Arial, sans-serif; color: var(--rs-ink); line-height: 1.55; }
.rs-mkt h1, .rs-mkt h2, .rs-mkt h3, .rs-mkt h4, .rs-mkt .mkt-mont { font-family: 'Montserrat', Arial, sans-serif; }
.mkt-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.mkt-section { padding: 72px 0; }
.mkt-section--alt { background: #f7f9fb; }
.mkt-kicker { font-family: 'Montserrat'; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-lava); }
.mkt-kicker--bee { color: var(--rs-bee); }
.mkt-h2 { font-size: 2.1rem; font-weight: 800; color: var(--rs-eclipse); line-height: 1.15; margin: .4rem 0 .9rem; }
.mkt-p { color: #41536a; font-size: 1.05rem; margin-bottom: .8rem; }
.mkt-quiet { color: var(--rs-sub); font-size: .92rem; }
.mkt-card { background: #fff; border-radius: var(--rs-radius); box-shadow: var(--rs-shadow); }

/* ---- buttons ----------------------------------------------------------- */
/* Buttons: the app's button language, site palette (HANDOFF 2026-08-02).
   Pills, one gradient primary per view, ghost pills for secondaries, soft
   directional shadow, hover brightens and lifts (never recolors), 1.5px
   borders, Montserrat 600. GOTCHA: background-origin must come AFTER the
   background shorthand or the gradient bleeds past the rounded border. */
.mkt-btn { display: inline-block; font-family: 'Montserrat'; font-weight: 600; font-size: .95rem; border-radius: 999px; padding: .65rem 1.6rem; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: box-shadow .18s ease, filter .18s ease, background .18s ease; }
.mkt-btn:hover { text-decoration: none; }
.mkt-btn--lava { color: #fff; background: linear-gradient(135deg, #F6874E 0%, var(--rs-lava) 100%); background-origin: border-box; box-shadow: 0 6px 7px -7px rgba(0, 0, 0, .5); }
.mkt-btn--lava:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .55); }
.mkt-btn--dark { color: var(--rs-eclipse); background: #fff; border-color: var(--rs-eclipse); box-shadow: 0 6px 7px -7px rgba(0, 0, 0, .35); }
.mkt-btn--dark:hover { color: var(--rs-eclipse); background: linear-gradient(135deg, rgba(19, 40, 68, .10), rgba(27, 58, 99, .10)); background-origin: border-box; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .4); }
.mkt-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.mkt-btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .1); }
/* Ghost pill on LIGHT sections: use .mkt-btn--ghostnavy */
.mkt-btn--ghostnavy { background: #fff; color: var(--rs-eclipse); border: 1.5px solid var(--rs-eclipse); }
.mkt-btn--ghostnavy:hover { color: var(--rs-eclipse); border-color: var(--rs-eclipse); background: linear-gradient(135deg, rgba(19, 40, 68, .12), rgba(0, 156, 166, .12)); background-origin: border-box; }

/* ---- hero -------------------------------------------------------------- */
.mkt-hero { background: linear-gradient(160deg, #0e2038 0%, #132844 55%, #1b3a63 100%); color: #fff; padding: 84px 0 88px; }
.mkt-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.mkt-hero h1 { font-size: 3.1rem; line-height: 1.08; font-weight: 800; color: #fff; }
.mkt-hero .mkt-payoff { font-size: 1.35rem; color: #dbe6f4; margin: 18px 0 6px; font-weight: 400; }
.mkt-hero .mkt-payoff b { color: var(--rs-bee); font-weight: 700; }
.mkt-hero .mkt-sub { color: #9fb2c9; font-size: 1rem; margin-bottom: 26px; }
.mkt-fineprint { font-size: .85rem; color: #8ba1bb; margin-top: 12px; }
.mkt-fineprint a { color: var(--rs-bee); }
/* Feature/interior page hero (shorter, single column) */
.mkt-hero--feature { padding: 72px 0; }
.mkt-hero--feature h1 { font-size: 2.6rem; line-height: 1.1; }
.mkt-hero--feature .mkt-lead { font-size: 1.2rem; color: #dbe6f4; margin: 16px 0 22px; max-width: 640px; }
.mkt-crumbs { font-size: .8rem; color: #8ba1bb; margin-bottom: 14px; }
.mkt-crumbs a { color: #b9c8dc; text-decoration: none; }
.mkt-crumbs a:hover { color: #fff; }

/* ---- hero search (hosts the live Vue omnibox) --------------------------- */
.mkt-searchbar { background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); max-width: 560px; padding: .55rem .9rem; color: var(--rs-ink); }
.mkt-searchbar .p-autocomplete input, .mkt-searchbar input { border: 0; font-size: 1rem; font-family: 'Lato'; outline: none; box-shadow: none; }

/* ---- verdict card (hero right) ------------------------------------------ */
.mkt-verdict-card { background: #fff; border-radius: 16px; color: var(--rs-ink); padding: 22px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.mkt-vc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.mkt-vc-title { font-family: 'Montserrat'; font-weight: 700; font-size: 1.02rem; }
.mkt-vc-sub { font-size: .8rem; color: var(--rs-sub); }
.mkt-score { text-align: right; }
.mkt-score .mkt-n { font-family: 'Montserrat'; font-weight: 800; font-size: 1.7rem; color: #1a7a34; line-height: 1; }
.mkt-score .mkt-l { font-size: .62rem; letter-spacing: .1em; color: var(--rs-sub); }
.mkt-verdict-line { background: #eaf7ee; border: 1px solid #bfe4c8; color: #1a5c2c; border-radius: 9px; padding: .55rem .8rem; font-size: .9rem; margin: .6rem 0; }
.mkt-verdict-line b { color: var(--rs-good); }
.mkt-vc-stats { display: flex; border: 1px solid #e4e9ef; border-radius: 10px; overflow: hidden; margin: .7rem 0; }
.mkt-vc-stats > div { flex: 1; padding: .6rem .4rem; text-align: center; }
.mkt-vc-stats > div + div { border-left: 1px solid #e4e9ef; }
.mkt-vc-stats .mkt-n { font-family: 'Montserrat'; font-weight: 700; color: #1a7a34; }
.mkt-vc-stats .mkt-l { font-size: .62rem; color: var(--rs-sub); letter-spacing: .06em; }
.mkt-vc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mkt-chip { font-size: .72rem; background: #f1f4f8; border-radius: 20px; padding: 3px 10px; color: var(--rs-ink); }
.mkt-chip--blue { background: var(--rs-eclipse); color: #fff; }

/* ---- proof strip -------------------------------------------------------- */
.mkt-proof { background: var(--rs-gray); padding: 26px 0; }
.mkt-proof-in { display: flex; justify-content: space-between; gap: 20px; text-align: center; flex-wrap: wrap; }
.mkt-proof .mkt-n { font-family: 'Montserrat'; font-weight: 800; font-size: 1.55rem; color: var(--rs-eclipse); }
.mkt-proof .mkt-l { font-size: .85rem; color: var(--rs-sub); }

/* ---- generic split ------------------------------------------------------ */
.mkt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Reverses the two columns at desktop width without touching DOM order, so the
   stacked mobile layout still leads with the copy. Add alongside .mkt-split. */
.mkt-split--flip > :first-child { order: 2; }
.mkt-split--flip > :last-child  { order: 1; }

/* ---- what's included panel ------------------------------------------------ */
/* Added 2026-08-04 (Morgan: "the what's included box just isn't impactful enough").
   Built as a CSS component, not a partial, because every page lists DIFFERENT rows:
   the look is what gets reused, not the content. Accent follows --prod, so the panel
   picks up whichever product colour the page already sets on .rs-mkt.
   In use on: /products/portfolio-finder, /products/myrescover. */
.mkt-inc {
  background: #fff; border: 1px solid #e4e9ef; border-radius: var(--rs-radius);
  box-shadow: var(--rs-shadow); overflow: hidden;
}
.mkt-inc-head {
  padding: 18px 22px; color: #fff;
  background: linear-gradient(135deg, #1E3A5F 0%, #132844 55%, #0E1F35 100%);
  border-bottom: 3px solid var(--prod, var(--rs-bee));
}
.mkt-inc-eyebrow {
  display: block; font-family: 'Montserrat'; font-weight: 700; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--prod, var(--rs-bee));
  margin-bottom: 4px;
}
.mkt-inc-title { font-family: 'Montserrat'; font-weight: 800; font-size: 1.18rem; margin: 0; color: #fff; }
.mkt-inc-list { list-style: none; margin: 0; padding: 6px 22px 4px; }
.mkt-inc-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid #eef1f5;
}
.mkt-inc-list li:last-child { border-bottom: 0; }
/* the tick sits in its own disc so the eye lands on a column of green, not stray glyphs */
.mkt-inc-ico {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #eaf7ee; color: #1a5c2c; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.mkt-inc-label { flex: 1 1 auto; color: var(--rs-eclipse); font-weight: 600; font-size: .95rem; }
.mkt-inc-val {
  flex: none; font-family: 'Montserrat'; font-weight: 800; font-size: .92rem;
  color: var(--rs-good); white-space: nowrap;
}
/* the one or two numbers worth shouting about */
.mkt-inc-val--hero { font-size: 1.05rem; }
.mkt-inc-foot {
  margin: 0; padding: 12px 22px 16px; background: #f7f9fb;
  border-top: 1px solid #eef1f5; color: var(--rs-sub); font-size: .78rem;
}
@media (max-width: 600px) {
  .mkt-inc-list li { flex-wrap: wrap; }
  .mkt-inc-val { width: 100%; padding-left: 34px; }
}

/* ---- stats panel (mock app panels) -------------------------------------- */
.mkt-stats-panel { padding: 20px 22px; }
.mkt-sp-title { font-family: 'Montserrat'; font-weight: 700; font-size: .95rem; margin-bottom: 2px; }
.mkt-sp-sub { font-size: .78rem; color: var(--rs-sub); margin-bottom: 12px; }
.mkt-sp-row { display: flex; justify-content: space-between; font-size: .9rem; padding: .45rem 0; border-bottom: 1px solid #eef1f5; }
.mkt-sp-row .mkt-m { color: var(--rs-sub); }
.mkt-sp-row .mkt-t { font-weight: 700; color: var(--rs-good); }
.mkt-sp-row--last { border-bottom: 0; }
.mkt-heat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 14px; }
.mkt-heat i { display: block; aspect-ratio: 1; border-radius: 2px; opacity: .9; }
.mkt-mf-tease { margin-top: 14px; background: #f4f1fb; border: 1px dashed #b9a8e6; border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; color: #5b4a8e; }
.mkt-mockrow { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; padding: .5rem .2rem; border-bottom: 1px solid #eef1f5; }
.mkt-mockrow--last { border-bottom: 0; }
.mkt-pill { font-family: 'Montserrat'; font-weight: 700; font-size: .6rem; letter-spacing: .05em; padding: 2px 9px; border-radius: 12px; color: #fff; }

/* ---- trust band (dark) --------------------------------------------------- */
.mkt-trust { background: var(--rs-eclipse); color: #fff; }
.mkt-trust .mkt-h2 { color: #fff; }
.mkt-trust .mkt-p { color: #b9c8dc; }
.mkt-formula { font-family: ui-monospace, Consolas, monospace; background: #0d1b30; border: 1px solid #29456e; border-radius: 10px; padding: 1rem 1.2rem; font-size: .9rem; color: #9fd8ff; overflow-x: auto; }
.mkt-formula b { color: var(--rs-bee); }
.mkt-partner { display: inline-block; background: #0d1b30; border: 1px solid #29456e; border-radius: 8px; padding: .5rem .9rem; font-size: .85rem; color: #dbe6f4; margin: .35rem .35rem 0 0; }

/* ---- feature cards ------------------------------------------------------- */
.mkt-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.mkt-feature-card { display: block; padding: 22px; border: 1px solid #e4e9ef; border-radius: var(--rs-radius); background: #fff; text-decoration: none; }
a.mkt-feature-card:hover { border-color: var(--rs-lava); text-decoration: none; }
.mkt-feature-card h3 { font-size: 1.02rem; margin: .6rem 0 .4rem; color: var(--rs-eclipse); }
.mkt-feature-card p { font-size: .9rem; color: var(--rs-sub); margin-bottom: 0; }
.mkt-feature-card p a { color: var(--rs-lava); }
.mkt-dot { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; font-family: 'Montserrat'; font-weight: 800; }

/* ---- pro band ------------------------------------------------------------ */
.mkt-pro { background: linear-gradient(150deg, #0e2038, #132844 60%, #173355); color: #fff; }
.mkt-pro .mkt-h2 { color: #fff; }
.mkt-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 30px 0 26px; }
.mkt-pillar { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--rs-radius); padding: 22px; display: flex; flex-direction: column; }
/* The product-mention footer line sits at ONE height across sibling cards
   (Morgan, 2026-08-07): flex column + auto top margin pins it to the bottom
   regardless of how long each card's body copy runs. */
.mkt-pillar .mkt-quiet { margin-top: auto; padding-top: .6rem; }
/* Colored product tile + icon on pillars that set --tile (homepage pro band, 2026-08-07):
   same solid-color square + white glyph as the navbar Products menu tiles, plus a
   colored top edge. Pillars without --tile (compare/no-per-door pages) are untouched. */
.mkt-pillar[style*="--tile"] { border-top: 3px solid var(--tile); }
.mkt-pillar-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--tile); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 12px; }
.mkt-pillar .mkt-kicker { color: var(--rs-bee); }
.mkt-pillar h3 { font-size: 1.15rem; margin: .4rem 0 .5rem; color: #fff; }
.mkt-pillar p { font-size: .9rem; color: #b9c8dc; }
.mkt-pillar .mkt-quiet { color: #8ba1bb; }
.mkt-reassure { font-size: .92rem; color: #9fb2c9; }

/* ---- builders band (dark, held back until MCP ships) --------------------- */
.mkt-headless { background: #0b1626; color: #fff; border-top: 1px solid #1d3049; }
.mkt-headless .mkt-h2 { color: #fff; }
.mkt-headless .mkt-p { color: #a9bccf; }
.mkt-code { font-family: ui-monospace, Consolas, monospace; background: #060d18; border: 1px solid #1d3049; border-radius: 12px; padding: 1.1rem 1.3rem; font-size: .86rem; line-height: 1.7; color: #7ee0a3; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.mkt-code .mkt-c { color: #5a7290; }
.mkt-code .mkt-k { color: #7ab8ff; }
.mkt-code .mkt-s { color: #f7c66b; }

/* ---- marketplace band (held back until listing volume) ------------------- */
.mkt-market { background: var(--rs-gray); }
.mkt-listing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 26px; }
.mkt-listing { overflow: hidden; border-radius: var(--rs-radius); background: #fff; box-shadow: var(--rs-shadow); }
.mkt-listing .mkt-ph { height: 150px; background: linear-gradient(135deg, #3f6ea5, #5d94c9); position: relative; }
.mkt-listing .mkt-ph--b { background: linear-gradient(135deg, #4d8a6a, #79b493); }
.mkt-badge { position: absolute; font-family: 'Montserrat'; font-weight: 700; font-size: .62rem; letter-spacing: .05em; padding: 3px 9px; border-radius: 14px; color: #fff; }
.mkt-badge--mkt { top: 10px; left: 10px; background: var(--rs-lava); }
.mkt-badge--chip { top: 10px; right: 10px; background: var(--rs-eclipse); }
.mkt-listing .mkt-body { padding: 16px 18px; }
.mkt-listing .mkt-price { font-family: 'Montserrat'; font-weight: 800; font-size: 1.25rem; color: var(--rs-eclipse); }
.mkt-listing .mkt-addr { font-size: .85rem; color: var(--rs-sub); margin-bottom: 8px; }
.mkt-lstats { display: flex; border-top: 1px solid #eef1f5; padding-top: 10px; margin-top: 6px; }
.mkt-lstats > div { flex: 1; text-align: center; }
.mkt-lstats .mkt-n { font-family: 'Montserrat'; font-weight: 700; color: var(--rs-good); }
.mkt-lstats .mkt-l { font-size: .6rem; color: var(--rs-sub); letter-spacing: .05em; }

/* ---- pricing ladder ------------------------------------------------------ */
.mkt-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; align-items: stretch; }
.mkt-tier { border: 1px solid #e4e9ef; border-radius: var(--rs-radius); padding: 22px; background: #fff; display: flex; flex-direction: column; }
.mkt-tier--hot { border: 2px solid var(--rs-lava); box-shadow: 0 14px 38px rgba(242, 110, 52, .18); position: relative; }
.mkt-tier .mkt-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--rs-lava); color: #fff; font-family: 'Montserrat'; font-weight: 700; font-size: .62rem; letter-spacing: .08em; padding: 3px 12px; border-radius: 14px; white-space: nowrap; }
.mkt-tier h3 { font-size: 1rem; color: var(--rs-eclipse); }
.mkt-tier .mkt-pr { font-family: 'Montserrat'; font-weight: 800; font-size: 1.9rem; color: var(--rs-eclipse); margin: .3rem 0; }
.mkt-tier .mkt-pr span { font-size: .85rem; color: var(--rs-sub); font-weight: 400; }
.mkt-tier ul { list-style: none; font-size: .85rem; color: #41536a; margin: .5rem 0 1rem; padding: 0; }
.mkt-tier li { padding: .28rem 0 .28rem 1.2rem; position: relative; }
.mkt-tier li::before { content: "\2713"; position: absolute; left: 0; color: var(--rs-teal); font-weight: 700; }
.mkt-tier .mkt-btn { margin-top: auto; text-align: center; font-size: .85rem; padding: .5rem 1rem; }
.mkt-bundle { margin-top: 18px; text-align: center; font-size: .9rem; color: var(--rs-sub); }

/* ---- close band ---------------------------------------------------------- */
.mkt-close { background: var(--rs-eclipse); color: #fff; text-align: center; }
.mkt-close .mkt-h2 { color: #fff; font-size: 2rem; }
.mkt-close .mkt-close-sub { color: #9fb2c9; margin: .4rem 0 1.4rem; }
.mkt-close .mkt-close-sub a { color: #fff; text-decoration: underline; }

/* ---- misc ---------------------------------------------------------------- */
.mkt-badge-inc { display: inline-block; background: #eaf7ee; border: 1px solid #bfe4c8; color: #1a5c2c; font-size: .78rem; border-radius: 16px; padding: 2px 12px; margin-left: 8px; vertical-align: middle; font-family: 'Lato'; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 992px) {
  .mkt-hero-grid, .mkt-split { grid-template-columns: 1fr; }
  /* Stacked: drop the desktop flip so the copy stays above its image. */
  /* BUGFIX 2026-08-06: the old reset was `.mkt-split--flip > * { order: 0 }`, which
     LOSES on specificity to the desktop `> :first-child { order: 2 }` rule, so every
     flip section stacked image-first on phones. Match the specificity and win by
     source order. Mobile law: title, paragraph, image. */
  .mkt-split--flip > :first-child, .mkt-split--flip > :last-child { order: 0; }
  .mkt-three, .mkt-pillars, .mkt-listing-grid { grid-template-columns: 1fr; }
  .mkt-tiers { grid-template-columns: repeat(2, 1fr); }
  .mkt-hero h1 { font-size: 2.2rem; }
  .mkt-hero--feature h1 { font-size: 2rem; }
  /* Proof strip: five tiles don't fit a row; go 2-up so labels wrap instead of overflowing. */
  .mkt-proof-in > div { flex: 1 1 42%; min-width: 0; }
}
@media (max-width: 600px) {
  .mkt-tiers { grid-template-columns: 1fr; }
  .mkt-section { padding: 56px 0; }
  .mkt-proof-in > div { flex: 1 1 100%; }
}

/* ---- hero omnibox host ---------------------------------------------------- */
/* Wraps the real PropertySearch component on the homepage hero. Sizes the
   PrimeVue autocomplete up to hero scale; the component brings its own UX. */
.mkt-searchbar--omni { padding: .45rem .6rem; }
.mkt-searchbar--omni .p-autocomplete,
.mkt-searchbar--omni .p-autocomplete .p-inputtext,
.mkt-searchbar--omni input { width: 100%; border: 0; box-shadow: none; font-size: 1.05rem; padding: .55rem .6rem; }
.mkt-searchbar--omni .p-autocomplete-dropdown { border: 0; }

/* ---- product pages -------------------------------------------------------- */
/* Pages set --prod (the product's brand color) on the .rs-mkt wrapper. */
.mkt-kicker--prod { color: var(--prod, var(--rs-lava)); }
.mkt-dot--prod { background: var(--prod, var(--rs-lava)); }

/* Narrow pricing layouts for single-product pages */
.mkt-tiers--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 20px; justify-content: center; margin-top: 30px; }
.mkt-tiers--1 { display: grid; grid-template-columns: minmax(0, 380px); justify-content: center; margin-top: 30px; }
.mkt-tiers--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; align-items: stretch; }
@media (max-width: 900px) { .mkt-tiers--3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mkt-tiers--2 { grid-template-columns: 1fr; } }
.mkt-tier .mkt-pr-note { font-size: .8rem; color: var(--rs-sub); margin-bottom: .6rem; }

/* FAQ accordion (native details/summary, no JS) */
.mkt-faq { border: 1px solid #e4e9ef; border-radius: 10px; margin-bottom: 10px; background: #fff; }
.mkt-faq summary { cursor: pointer; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: .95rem; color: var(--rs-eclipse); padding: 14px 42px 14px 16px; list-style: none; position: relative; }
.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary::after { content: "+"; position: absolute; right: 16px; top: 12px; color: var(--rs-lava); font-weight: 700; font-size: 1.1rem; }
.mkt-faq[open] summary::after { content: "\2212"; }
.mkt-faq-a { padding: 0 16px 14px; color: #41536a; font-size: .95rem; }
.mkt-faq-wrap { max-width: 760px; }

/* "Includes myRescover" band */
.mkt-includes { background: #fdf1e8; border: 1px solid #f6cdb3; border-radius: var(--rs-radius); padding: 22px 26px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.mkt-includes .mkt-inc-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--rs-lava); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 44px; }
.mkt-includes p { margin: 0; color: #41536a; }
.mkt-includes b { color: var(--rs-eclipse); }

/* What's-inside card grid (myRescover) */
.mkt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
@media (max-width: 992px) { .mkt-grid-3 { grid-template-columns: 1fr; } }

/* Framed media (GIF/screenshot) */
/* ---- product tiles under the proof strip (2026-08-06) ------------------------
   IDENTICAL to the navbar mega-menu tiles (navbar-guest.css .rs-tile), re-scoped
   because those rules live under #navbar. If the tile look changes there, mirror
   it here. auto-fit: 5-up on desktop, wraps itself on tablet/phone. */
.mkt-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 28px; }
.mkt-products .rs-tile { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--tile) 9%, #fff); text-decoration: none; transition: background .12s ease; }
.mkt-products .rs-tile:hover { background: color-mix(in srgb, var(--tile) 18%, #fff); }
.mkt-products .rs-tile-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: var(--tile); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.mkt-products .rs-tile-name { display: block; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .85rem; color: #132844; }
.mkt-products .rs-tile-desc { display: block; font-size: .77rem; color: #5a6b7d; line-height: 1.35; margin-top: 2px; }

.mkt-media { border-radius: var(--rs-radius); box-shadow: var(--rs-shadow); overflow: hidden; background: #fff; }
.mkt-media img { display: block; width: 100%; height: auto; }

/* ---- knowledge base -------------------------------------------------------- */
.mkt-article { max-width: 760px; font-size: 1.05rem; color: #2b3a4d; }
.mkt-article h2 { font-size: 1.5rem; font-weight: 700; color: var(--rs-eclipse); margin: 2rem 0 .7rem; }
.mkt-article h3 { font-size: 1.15rem; font-weight: 700; color: var(--rs-eclipse); margin: 1.5rem 0 .5rem; }
.mkt-article p, .mkt-article li { line-height: 1.7; }
.mkt-article p { margin-bottom: 1rem; }
.mkt-article ul, .mkt-article ol { margin: 0 0 1rem 1.3rem; }
.mkt-article code { background: #f1f4f8; border-radius: 4px; padding: .1em .35em; font-size: .9em; }
.mkt-article table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.mkt-article th, .mkt-article td { border: 1px solid #e4e9ef; padding: .5rem .7rem; text-align: left; }
.mkt-article th { background: #f7f9fb; font-family: 'Montserrat', Arial, sans-serif; font-size: .85rem; }
.mkt-article blockquote { border-left: 3px solid var(--rs-lava); margin: 1rem 0; padding: .3rem 0 .3rem 1rem; color: var(--rs-sub); }
.mkt-article-meta { font-size: .85rem; color: var(--rs-sub); margin-bottom: 1.5rem; }
.mkt-kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
@media (max-width: 992px) { .mkt-kb-grid { grid-template-columns: 1fr; } }
.mkt-kb-cat { font-family: 'Montserrat', Arial, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-lava); }

/* ---- knowledge base v2 (redesigned index/category/article) ---------------- */
.mkt-kb-search { margin-top: 20px; max-width: 480px; display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 11px; padding: .3rem .5rem .3rem 1rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }
.mkt-kb-search i { color: var(--rs-sub); }
.mkt-kb-search input { border: 0; outline: none; flex: 1; font-size: 1rem; font-family: 'Lato', Arial, sans-serif; padding: .55rem 0; color: var(--rs-ink); background: transparent; }

.mkt-kb-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -36px; position: relative; z-index: 5; }
.mkt-kb-cat-tile { background: #fff; border: 1px solid #e4e9ef; border-radius: 14px; padding: 18px; text-decoration: none; box-shadow: 0 10px 30px rgba(19, 40, 68, .08); transition: transform .12s ease, box-shadow .12s ease; }
.mkt-kb-cat-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(19, 40, 68, .15); text-decoration: none; }
.mkt-kb-cat-tile .mkt-kb-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--cat); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 10px; }
.mkt-kb-cat-tile b { font-family: 'Montserrat', Arial, sans-serif; font-size: .95rem; color: var(--rs-eclipse); display: block; }
.mkt-kb-cat-tile span { font-size: .78rem; color: var(--rs-sub); line-height: 1.4; display: block; margin-top: 3px; }
.mkt-kb-count { float: right; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .72rem; color: var(--rs-sub); background: #f1f4f8; border-radius: 12px; padding: 2px 9px; }

.mkt-kb-sec-head { display: flex; align-items: center; gap: 12px; margin: 46px 0 14px; }
.mkt-kb-sec-head .mkt-kb-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--cat); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex: 0 0 32px; }
.mkt-kb-sec-head h2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--rs-eclipse); margin: 0; flex: 1; }
.mkt-kb-sec-head .mkt-kb-viewall { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .8rem; color: var(--rs-lava); text-decoration: none; white-space: nowrap; }
.mkt-kb-sec-head .mkt-kb-viewall:hover { color: var(--rs-lava-hover); }

.mkt-kb-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid #e4e9ef; border-radius: 14px; background: #fff; text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
.mkt-kb-card:hover { border-color: var(--cat, var(--rs-lava)); box-shadow: 0 10px 26px rgba(19, 40, 68, .08); text-decoration: none; }
.mkt-kb-card h3 { font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; font-weight: 700; color: var(--rs-eclipse); margin: 0 0 .4rem; }
.mkt-kb-card p { font-size: .88rem; color: var(--rs-sub); line-height: 1.5; margin: 0; }
.mkt-kb-card .mkt-kb-meta { margin-top: auto; padding-top: 14px; font-size: .72rem; color: #a5b3c2; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mkt-kb-chip { font-size: .68rem; background: color-mix(in srgb, var(--cat, #F26E34) 12%, #fff); color: var(--rs-eclipse); border-radius: 12px; padding: 2px 9px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; }
.mkt-kb-empty { border: 1px dashed #cdd6e0; border-radius: 14px; padding: 20px; color: var(--rs-sub); font-size: .9rem; background: #fbfcfe; }

@media (max-width: 992px) {
    .mkt-kb-cats { grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
}
@media (max-width: 600px) {
    .mkt-kb-cats { grid-template-columns: 1fr; }
}

/* Hero imagery (2026-07-28): two-column feature/product heroes with a framed
   product shot on the right, and the full-width homepage hero band. */
.mkt-hero-grid2 { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.mkt-hero-shot { border-radius: var(--rs-radius); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); overflow: hidden; background: #fff; }
.mkt-hero-shot img { display: block; width: 100%; height: auto; }
.mkt-hero-band { margin-top: 40px; }

@media (max-width: 991px) {
  .mkt-hero-grid2 { grid-template-columns: 1fr; gap: 30px; }
}

/* Knowledge-base article images (markdown <img>): framed like the marketing shots. */
.mkt-article img { display: block; width: 100%; height: auto; border-radius: var(--rs-radius); box-shadow: var(--rs-shadow); margin: 20px 0 6px; }
.mkt-article img + em, .mkt-article p:has(> img) + p > em { color: var(--rs-sub); font-size: .85rem; }

/* Trust attribution pills (homepage) double as quiet links. */
a.mkt-partner { text-decoration: none; transition: border-color .12s ease, color .12s ease; }
a.mkt-partner:hover { border-color: var(--rs-bee); color: #fff; }

/* ---- homepage loudness pass (2026-07-31, Morgan's ruling) ------------------
   Hero: the analysis card is the hero — supersized, tilted, glowing, breaking
   the hero's bottom edge into the proof strip. Color/depth: richer hero
   gradient with warm radial glows; The Verdict gets a green wash (green IS the
   brand verdict). Motion: scroll-reveal (JS adds .rs-motion on <html>, so
   no-JS visitors see everything), hover lift on cards, slow glow pulse on the
   hero card. All scoped so interior pages are untouched. */
.mkt-hero--home {
  background:
    radial-gradient(900px 520px at 78% 28%, rgba(249, 170, 52, .16), transparent 62%),
    radial-gradient(760px 460px at 12% 88%, rgba(242, 110, 52, .12), transparent 60%),
    linear-gradient(160deg, #0a1830 0%, #132844 55%, #1b3a63 100%);
}
.mkt-hero-shot--money {
  position: relative; z-index: 2;
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 110px rgba(249, 170, 52, .26);
}
@media (min-width: 992px) {
  .mkt-hero--home { padding-bottom: 64px; }
  .mkt-hero--home .mkt-hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .mkt-hero-shot--money { width: 110%; max-width: none; margin-bottom: -120px; transform: translateY(-48px); }
  .mkt-proof--under { padding-top: 78px; }
}
@media (min-width: 1240px) { .mkt-hero-shot--money { margin-right: -48px; } }
@media (prefers-reduced-motion: no-preference) {
  .mkt-hero-shot--money { animation: mkt-heroGlow 7s ease-in-out infinite alternate; }
  @keyframes mkt-heroGlow {
    from { box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 90px rgba(249, 170, 52, .18); }
    to   { box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 130px rgba(249, 170, 52, .34); }
  }
}

/* The Verdict: green wash band + the gauges shot */
.mkt-verdict-band { background: linear-gradient(180deg, #fff 0%, #eef8f1 45%, #e7f5ec 100%); }
.mkt-verdict-band .mkt-kicker { color: var(--rs-good); }
.mkt-media--gauges { border: 1px solid #d7ecdc; }

/* Motion: scroll reveal, pure CSS (scroll-driven animations). No JS and no
   hidden-by-default state, so it cannot conflict with the Vue re-render on
   the homepage (which killed the first IntersectionObserver attempt) and
   unsupporting browsers simply see everything. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mkt-reveal { animation: mkt-rise linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
  }
}
@keyframes mkt-rise { from { opacity: .001; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.mkt-feature-card, .mkt-tier, .mkt-pillar { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.mkt-feature-card:hover, .mkt-tier:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(19, 40, 68, .14); }
.mkt-pillar:hover { transform: translateY(-3px); }

/* Hero rotating showcase (2026-07-31, Morgan): a framed card crossfading
   through real sections of the software. Pure CSS; reduced-motion (and any
   non-animating context) simply holds the first slide. */
.mkt-hero-show { aspect-ratio: 16 / 10; position: relative; }
.mkt-hero-show img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; }
.mkt-hero-show img:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mkt-hero-show img { animation: mkt-xfade 13.5s linear infinite; }
  .mkt-hero-show img:first-child { opacity: 0; }
  .mkt-hero-show img:nth-child(1) { animation-delay: 0s; }
  .mkt-hero-show img:nth-child(2) { animation-delay: 4.5s; }
  .mkt-hero-show img:nth-child(3) { animation-delay: 9s; }
}
@keyframes mkt-xfade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  33.3% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

/* The Verdict: full-width verdict strip under the copy (it is 8:1; a split
   column rendered it unreadably small). */
.mkt-verdict-copy { max-width: 720px; }

/* Inline "try it" omnibox on light sections (Workbench section CTA): the hero
   searchbar restyled for a white background. */
.mkt-searchbar--inline { border: 1px solid #e4e9ef; box-shadow: 0 10px 30px rgba(19, 40, 68, .12); margin-bottom: 4px; }

/* Workbench section layout: story + omnibox left, pro aside right; aside drops
   below the omnibox under 992px. */
.mkt-wb-stack { display: grid; gap: 14px; align-content: center; }
.mkt-wb-item { display: flex; align-items: center; gap: 20px; padding: 24px 22px; border: 1px solid #e4e9ef; border-radius: var(--rs-radius); background: #fff; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.mkt-wb-item:hover { border-color: var(--rs-lava); text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(19, 40, 68, .14); }
.mkt-wb-item i { font-size: 1.7rem; color: var(--rs-lava); width: 46px; text-align: center; flex: none; }
.mkt-wb-item h3 { font-size: 1.02rem; margin: 0 0 .3rem; color: var(--rs-eclipse); }
.mkt-wb-item p { font-size: .9rem; color: var(--rs-sub); margin: 0; }

/* Pro band body copy (the band is dark; the generic .mkt-p ink is too dark) */
.mkt-pro .mkt-p { color: #b9c8dc; }

/* "Answers" section chat demo card (illustrative mock of Rescover AI) */
.mkt-chat-demo { padding: 18px 20px; }
.mkt-cd-head { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-sub); margin-bottom: 12px; }
.mkt-cd-head i { color: var(--rs-lava); margin-right: 4px; }
.mkt-cd-msg { background: #f1f4f8; border-radius: 12px 12px 12px 4px; padding: .6rem .9rem; font-size: .92rem; color: var(--rs-ink); margin: 8px 0; max-width: 88%; }
.mkt-cd-msg--user { background: var(--rs-eclipse); color: #fff; border-radius: 12px 12px 4px 12px; margin-left: auto; }

/* Pillar product labels: pinned to the bottom edge of every tile so the row of
   product names stays aligned across tiles at any copy length or viewport, and
   product names are quiet links into their product pages. */
.mkt-pillar { display: flex; flex-direction: column; }
.mkt-pillar .mkt-quiet { margin-top: auto; padding-top: .9rem; }
.mkt-pillar .mkt-quiet a { color: #b9c8dc; text-decoration: none; }
.mkt-pillar .mkt-quiet a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   /no-per-door: the pricing-position page (calculator, fairness list,
   seats, held-back one-portal mock). Copy source: the Marketing brain,
   work/2026-08_blanket-competitive-deep-dive/no-per-door-pricing-mockup.html.
   ========================================================================== */
/* Calculator card */
.mkt-calc { padding: 30px 32px; }
.mkt-calc h3 { font-size: 1.15rem; color: var(--rs-eclipse); margin-bottom: 4px; }
.mkt-calc-note { font-size: .85rem; color: var(--rs-sub); margin-bottom: 20px; }
.mkt-doors-row { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; flex-wrap: wrap; }
.mkt-doors-n { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--rs-eclipse); min-width: 130px; }
.mkt-doors-n span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-sub); }
.mkt-calc input[type=range] { flex: 1; min-width: 220px; accent-color: var(--rs-lava); height: 6px; }
.mkt-toggle { display: flex; gap: 8px; margin: 10px 0 22px; flex-wrap: wrap; align-items: center; }
.mkt-toggle .mkt-toggle-gap { flex: 1; }
.mkt-toggle button { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .78rem; border: 1.5px solid #c9d3de; background: #fff; color: var(--rs-sub); border-radius: 20px; padding: .4rem 1rem; cursor: pointer; }
.mkt-toggle button.on { background: var(--rs-eclipse); border-color: var(--rs-eclipse); color: #fff; }
.mkt-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mkt-duel-side { border-radius: 12px; padding: 20px 22px; border: 1px solid #e4e9ef; background: #fff; }
.mkt-duel-side--us { border: 2px solid var(--rs-teal); background: #f4fbfb; }
.mkt-duel-who { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-sub); }
.mkt-duel-side--us .mkt-duel-who { color: var(--rs-teal); }
.mkt-duel-amt { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 2.2rem; color: var(--rs-eclipse); margin: .3rem 0 0; }
.mkt-duel-amt span { font-size: .9rem; color: var(--rs-sub); font-weight: 400; }
.mkt-duel-per { font-size: .82rem; color: var(--rs-sub); }
.mkt-savings { margin-top: 20px; background: var(--rs-eclipse); color: #fff; border-radius: 12px; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.mkt-savings-n { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--rs-bee); }
.mkt-savings-l { font-size: .9rem; color: #b9c8dc; }
/* Fairness list */
.mkt-fairlist { margin-top: 6px; }
.mkt-fair { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #eef1f5; align-items: flex-start; }
.mkt-fair-mark { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 1rem; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.mkt-fair-mark--ok { background: #31AD6F; }
.mkt-fair-mark--no { background: var(--rs-lava); }
.mkt-fair h4 { font-size: .98rem; color: var(--rs-eclipse); margin: 0 0 .15rem; }
.mkt-fair p { font-size: .88rem; color: var(--rs-sub); margin: 0; }
/* Seats (people, not doors) */
.mkt-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.mkt-seat { padding: 24px; border: 1px solid #e4e9ef; border-radius: var(--rs-radius); background: #fff; }
.mkt-seat-pr { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--rs-eclipse); }
.mkt-seat-pr span { font-size: .85rem; color: var(--rs-sub); font-weight: 400; }
.mkt-seat h3 { font-size: 1rem; color: var(--rs-eclipse); margin-bottom: .3rem; }
.mkt-seat p { font-size: .88rem; color: var(--rs-sub); }
.mkt-seat-tag { display: inline-block; background: #f4f1fb; border: 1px solid #d8cdf0; color: #5b4a8e; font-size: .72rem; border-radius: 14px; padding: 2px 10px; margin-top: 10px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; }
.mkt-callout { margin-top: 26px; padding: 26px 30px; border-left: 5px solid var(--rs-pi); }
.mkt-callout h3 { color: var(--rs-eclipse); font-size: 1.15rem; margin: .4rem 0 .5rem; }
/* Checklist bullets (one-portal band) */
.mkt-checkline { margin: 16px 0 0; padding: 0; }
.mkt-checkline li { list-style: none; font-size: .95rem; color: #41536a; padding: .3rem 0 .3rem 1.5rem; position: relative; }
.mkt-checkline li:before { content: "\2713"; position: absolute; left: 0; color: var(--rs-pi); font-weight: 800; font-family: 'Montserrat', Arial, sans-serif; }
/* One-portal client-portal mock (held-back band) */
.mkt-portal { border-radius: var(--rs-radius); overflow: hidden; box-shadow: 0 24px 60px rgba(19, 40, 68, .22); border: 1px solid #e4e9ef; background: #fff; }
.mkt-pm-head { background: var(--rs-eclipse); color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; }
.mkt-pm-brand { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .95rem; }
.mkt-pm-brand span { color: var(--rs-bee); }
.mkt-pm-user { font-size: .72rem; color: #9fb2c9; }
.mkt-pm-tabs { display: flex; gap: 2px; background: #f1f4f8; border-bottom: 1px solid #e4e9ef; padding: 0 10px; overflow-x: auto; }
.mkt-pm-tabs div { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .7rem; padding: .55rem .7rem; color: var(--rs-sub); border-bottom: 2px solid transparent; white-space: nowrap; }
.mkt-pm-tabs div.on { color: var(--rs-pi); border-bottom-color: var(--rs-pi); background: #fff; }
.mkt-pm-body { padding: 14px 18px; }
.mkt-pm-row { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; padding: .5rem 0; border-bottom: 1px solid #eef1f5; }
.mkt-pm-row .l { color: var(--rs-ink); }
.mkt-pm-row .l small { display: block; color: var(--rs-sub); font-size: .7rem; }
.mkt-pm-row .r { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; color: var(--rs-eclipse); font-size: .8rem; }
.mkt-pm-row .r.g { color: #1a7a34; }
.mkt-st { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .58rem; letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; }
.mkt-st--open { background: #fdf1e8; color: #b45416; }
.mkt-st--done { background: #eaf7ee; color: #1a5c2c; }
.mkt-st--new { background: #f4f1fb; color: #5b4a8e; }
.mkt-pm-opp { margin-top: 12px; background: #f4f1fb; border: 1px solid #d8cdf0; border-radius: 10px; padding: .7rem .9rem; }
.mkt-pm-opp .k { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: .08em; color: #5b4a8e; text-transform: uppercase; }
.mkt-pm-opp .t { font-size: .85rem; color: var(--rs-ink); margin: .15rem 0; }
.mkt-pm-opp .m { font-size: .75rem; color: #1a7a34; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; }
@media (max-width: 900px) {
  .mkt-duel, .mkt-seats { grid-template-columns: 1fr; }
  .mkt-toggle .mkt-toggle-gap { display: none; }
}

/* Hero floating collage (2026-08-01): cut-out UI atoms on transparency instead
   of a full-page screenshot. Elements overlap, tilt slightly, and drift on
   independent rhythms; a soft warm glow sits behind the composition. */
.mkt-hero-collage { position: relative; aspect-ratio: 5 / 4; z-index: 2; }
.mkt-hero-collage::before { content: ""; position: absolute; inset: 6% 2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(249, 170, 52, .22), transparent 70%); filter: blur(6px); }
.mkt-el { position: absolute; height: auto; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .45)); }
.mkt-el--line { top: 0; left: 2%; width: 96%; z-index: 4; }
.mkt-el--b { top: 16%; left: 0; width: 62%; z-index: 3; transform: rotate(-1.5deg); }
.mkt-el--c { top: 38%; right: 0; width: 42%; z-index: 2; transform: rotate(1.5deg); }
.mkt-el--d { bottom: 12%; left: 2%; width: 96%; z-index: 4; }
@media (prefers-reduced-motion: no-preference) {
  .mkt-el--line { animation: mkt-drift-a 9s ease-in-out infinite; }
  .mkt-el--b { animation: mkt-drift-b 7s ease-in-out infinite; }
  .mkt-el--c { animation: mkt-drift-c 8s ease-in-out infinite 1.2s; }
  .mkt-el--d { animation: mkt-drift-a 10s ease-in-out infinite .6s; }
}
@keyframes mkt-drift-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes mkt-drift-b { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-13px) rotate(-1.9deg); } }
@keyframes mkt-drift-c { 0%, 100% { transform: translateY(0) rotate(1.5deg); } 50% { transform: translateY(-11px) rotate(1.9deg); } }
@media (min-width: 992px) {
  .mkt-hero-collage { width: 108%; max-width: none; margin-bottom: -96px; transform: translateY(-36px); }
}


/* ================================================================
   HOMEPAGE HERO, "ASK, IT ALREADY KNOWS" (2026-08-02, night): the
   headline is the visitor's own question, rotating through four,
   answered live by the card on the right, over the fixed line
   "Rescover already knows." Supersedes the portal-mosaic block
   above, which moves to the Portfolio Finder product page (see the
   Marketing brain). Collage, carousel, and mosaic blocks above are
   all now unused by the homepage; keep until Morgan's review.
   ================================================================ */
.mkt-hero--ask { padding: 76px 0 84px; }
.mkt-askgrid { display: grid; grid-template-columns: 11fr 9fr; gap: 56px; align-items: start; }
.mkt-qbox { position: relative; height: 9.6rem; }
.mkt-q { position: absolute; inset: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 3rem; line-height: 1.12; font-weight: 800; color: #fff; opacity: 0; }
.mkt-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mkt-answord { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 1.35rem; color: #dbe6f4; margin: 6px 0 26px; }
.mkt-answord em { color: var(--rs-bee); font-style: normal; }
.mkt-askside { position: relative; height: 350px; display: none; }
.mkt-a { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; opacity: 0; }
.mkt-acard { background: #fff; border-radius: 5px; /* was 16px; Morgan 2026-08-06: too tight on the corners */ box-shadow: 0 24px 60px rgba(3, 10, 22, .45); padding: 22px 24px; color: var(--rs-ink); width: 100%; }
.mkt-acard img { width: 100%; height: auto; display: block; }
.mkt-ak { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-lava); margin-bottom: 10px; }
.mkt-al { font-size: .85rem; color: var(--rs-sub); margin-top: 10px; line-height: 1.4; }
.mkt-al b { color: var(--rs-eclipse); }
.mkt-arow { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; border-bottom: 1px solid #eef1f5; padding: .5rem 0; gap: 12px; }
.mkt-av { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; color: var(--rs-eclipse); white-space: nowrap; }
.mkt-av--g { color: #1a7a34; }
.mkt-acard--portal { padding: 0; overflow: hidden; }
/* Pricing intro band */
.mkt-price-lead { background: linear-gradient(135deg, #f2f6fa, #eef4f0); border: 1px solid #e4ebf2; border-radius: 18px; padding: 32px 36px; margin-bottom: 48px; align-items: center; }

/* Hero cards */
.mkt-aslot { width: 100%; }
.mkt-aphrase { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 1.06rem; letter-spacing: .01em; color: #fff; margin: 0 0 10px; }
.mkt-acard--img { padding: 0; overflow: hidden; }
/* Cap the capture height so phrase + card + caption stay inside the 350px
   askside slot and never sit on top of the hold dots (Morgan, 2026-08-05).
   Tall captures crop from the top edge down. */
.mkt-acard--img img { max-height: 240px; object-fit: cover; object-position: top center; }
/* Hero-card captions moved BELOW the card (Morgan 2026-08-06: only the image in the
   image box). They sit on the dark hero now, so they go light. */
.mkt-aslot > .mkt-al { margin-top: 10px; padding: 0 2px; color: #b9c8dc; }
.mkt-aslot > .mkt-al b { color: #fff; }
.mkt-portalhead { background: var(--rs-eclipse); color: #fff; padding: .75rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mkt-ph-brand { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.mkt-ph-brand span { color: var(--rs-bee); }
.mkt-ph-sub { font-size: .7rem; color: #9fb2c9; }
.mkt-portalbody { padding: 12px 18px 16px; }
@media (min-width: 768px) { .mkt-askside { display: block; } }
/* PHONES (Morgan, 2026-08-06): the hero cards were display:none below 768px, so mobile
   got no hero image at all. Small screens now show CARD 1 STATIC (no rotation, no
   dots): the stacking machinery is absolute-positioned, so the one visible card goes
   static/relative and the rest stay hidden. Same single-card treatment no-JS and
   reduced-motion already get. */
@media (max-width: 767.98px) {
  .mkt-askside { display: block; height: auto; margin-top: 26px; }
  .mkt-askside .mkt-a { display: none; }
  .mkt-askside .mkt-a:first-child { display: flex; position: relative; inset: auto; opacity: 1 !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  /* FIVE cards since 2026-08-05 (the OS hero): 35s cycle, 7s per card, visible
     window is 1/5 of the cycle. */
  .mkt-q, .mkt-a, .mkt-qdot i { animation: mkt-askcyc 35s infinite; }
  /* Negative delays: every card is already mid-cycle at first paint, so card 1
     is FULLY VISIBLE from frame one (no fade-in-from-blank on page load) and
     transitions become true crossfades. */
  .mkt-q:nth-child(1), .mkt-a:nth-child(1), .mkt-qdot:nth-child(1) i { animation-delay: 0s; }
  .mkt-q:nth-child(2), .mkt-a:nth-child(2), .mkt-qdot:nth-child(2) i { animation-delay: -28s; }
  .mkt-q:nth-child(3), .mkt-a:nth-child(3), .mkt-qdot:nth-child(3) i { animation-delay: -21s; }
  .mkt-q:nth-child(4), .mkt-a:nth-child(4), .mkt-qdot:nth-child(4) i { animation-delay: -14s; }
  .mkt-q:nth-child(5), .mkt-a:nth-child(5), .mkt-qdot:nth-child(5) i { animation-delay: -7s; }
  .mkt-hero--ask:hover .mkt-q, .mkt-hero--ask:hover .mkt-a, .mkt-hero--ask:hover .mkt-qdot i { animation-play-state: paused; }
}
@keyframes mkt-askcyc { 0% { opacity: 1; } 16% { opacity: 1; } 20% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mkt-q:first-child, .mkt-a:first-child { opacity: 1; } }
.mkt-hero--ask .mkt-q:first-child, .mkt-hero--ask .mkt-a:first-child { opacity: 1; animation-fill-mode: both; }
@media (max-width: 980px) { .mkt-askgrid { grid-template-columns: 1fr; gap: 40px; } .mkt-qbox { height: 7.4rem; } .mkt-q { font-size: 2.2rem; } }


/* Hero carousel dots + click-to-hold (2026-08-03): pure CSS. Radios sit as
   direct children of the header; :has() kills the rotation when one is
   checked and the ID rules pin the chosen question, its card, and its dot.
   No JS, so nothing on the homepage is gated on scripts. */
.mkt-hold-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mkt-qdots { display: none; justify-content: center; gap: 10px; margin-top: 20px; }
@media (min-width: 768px) { .mkt-qdots { display: flex; } }
.mkt-qdot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); overflow: hidden; cursor: pointer; }
.mkt-qdot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--rs-bee); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mkt-qdot:first-child i { opacity: 1; } }
.mkt-hero--ask:has(.mkt-hold-radio:checked) .mkt-q,
.mkt-hero--ask:has(.mkt-hold-radio:checked) .mkt-a,
.mkt-hero--ask:has(.mkt-hold-radio:checked) .mkt-qdot i { animation: none; opacity: 0; }
#mktHold1:checked ~ .mkt-askgrid .mkt-q:nth-child(1), #mktHold1:checked ~ .mkt-askgrid .mkt-a:nth-child(1), #mktHold1:checked ~ .mkt-askgrid .mkt-qdot:nth-child(1) i { opacity: 1; }
#mktHold2:checked ~ .mkt-askgrid .mkt-q:nth-child(2), #mktHold2:checked ~ .mkt-askgrid .mkt-a:nth-child(2), #mktHold2:checked ~ .mkt-askgrid .mkt-qdot:nth-child(2) i { opacity: 1; }
#mktHold3:checked ~ .mkt-askgrid .mkt-q:nth-child(3), #mktHold3:checked ~ .mkt-askgrid .mkt-a:nth-child(3), #mktHold3:checked ~ .mkt-askgrid .mkt-qdot:nth-child(3) i { opacity: 1; }
#mktHold4:checked ~ .mkt-askgrid .mkt-q:nth-child(4), #mktHold4:checked ~ .mkt-askgrid .mkt-a:nth-child(4), #mktHold4:checked ~ .mkt-askgrid .mkt-qdot:nth-child(4) i { opacity: 1; }
#mktHold5:checked ~ .mkt-askgrid .mkt-q:nth-child(5), #mktHold5:checked ~ .mkt-askgrid .mkt-a:nth-child(5), #mktHold5:checked ~ .mkt-askgrid .mkt-qdot:nth-child(5) i { opacity: 1; }


/* ================================================================
   PROOF STRIP, REVOLUTIONIZED (2026-08-03): the flat gray band under
   the hero becomes a floating white credentials card that overlaps
   the hero's bottom edge. Numbers upscaled; the $10,000+ / $29 pair
   is styled as the narrative it is (muted problem, lava answer).
   Markup untouched: CountUp refs and server-rendered values stay.
   Overrides the base .mkt-proof rules above by specificity/order.
   ================================================================ */
.mkt-proof--under { background: transparent; padding: 0 0 8px; position: relative; z-index: 6; margin-top: -46px; }
@media (min-width: 992px) { .mkt-proof--under { padding-top: 0; } }
.mkt-proof--under .mkt-proof-in { background: #fff; border-radius: 16px; box-shadow: 0 26px 60px rgba(10, 21, 36, .28); padding: 26px 12px; gap: 0; }
.mkt-proof--under .mkt-proof-in > div { flex: 1 1 0; min-width: 0; padding: 2px 14px; }
.mkt-proof--under .mkt-proof-in > div + div { border-left: 1px solid #eef1f5; }
.mkt-proof--under .mkt-n { font-size: 2.05rem; line-height: 1.15; letter-spacing: -0.5px; }
.mkt-proof--under .mkt-l { font-size: .78rem; line-height: 1.3; margin-top: 2px; }
.mkt-proof--under .mkt-proof-in > div:nth-child(4) .mkt-n { color: #8a94a3; text-decoration: line-through; text-decoration-color: #b00020; text-decoration-thickness: 3px; }
/* $29 in green: the good-news number (Morgan, 2026-08-05); the struck $10,000+ keeps the lava strike. */
.mkt-proof--under .mkt-proof-in > div:nth-child(5) .mkt-n { color: #1a7a34; }
@media (max-width: 900px) {
  .mkt-proof--under { margin-top: -30px; }
  .mkt-proof--under .mkt-proof-in { flex-wrap: wrap; row-gap: 18px; padding: 22px 10px; }
  .mkt-proof--under .mkt-proof-in > div { flex: 1 1 42%; }
  .mkt-proof--under .mkt-proof-in > div + div { border-left: 0; }
}


/* ================================================================
   GROWTH ENGINE section (2026-08-03): outbound funnel + inbound
   widget mock, light band between the two dark pro/builders bands.
   The .mkt-gv visuals are placeholders pending F2 and K3/K4 shots.
   ================================================================ */
.mkt-grow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.mkt-grow-tile { background: #fff; border: 1px solid #e4e9ef; border-radius: var(--rs-radius); padding: 24px; display: flex; flex-direction: column; }
.mkt-grow-tag { font-family: 'Montserrat'; font-weight: 700; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-teal); margin-bottom: 14px; }
.mkt-grow-tile h3 { font-size: 1.05rem; color: var(--rs-eclipse); margin: 16px 0 6px; }
.mkt-grow-tile > p { font-size: .92rem; color: #41536a; }
.mkt-grow-tile .mkt-quiet { margin-top: auto; padding-top: 10px; }
.mkt-gv { background: #f7f9fb; border: 1px solid #eef1f5; border-radius: 12px; padding: 14px 16px; }
.mkt-gv-row { display: flex; align-items: baseline; gap: 10px; background: #fff; border: 1px solid #e4e9ef; border-radius: 9px; padding: .5rem .8rem; }
.mkt-gv-row--lead { background: #f0faf4; border-color: #cfe8d8; }
.mkt-gv-stage { font-family: 'Montserrat'; font-weight: 700; font-size: .82rem; color: var(--rs-eclipse); }
.mkt-gv-desc { font-size: .74rem; color: var(--rs-sub); flex: 1; min-width: 0; }
.mkt-gv-n { font-family: 'Montserrat'; font-weight: 800; font-size: .95rem; color: var(--rs-eclipse); }
.mkt-gv-row--lead .mkt-gv-n { color: #1a7a34; }
.mkt-gv-arrow { font-size: .72rem; color: #8a94a3; padding: .25rem .4rem; }
.mkt-gv-arrow i { font-style: normal; }
.mkt-wm { padding: 0; overflow: hidden; }
.mkt-wm-chrome { display: flex; align-items: center; gap: 5px; background: #e9edf1; padding: .45rem .8rem; }
.mkt-wm-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #c9d3de; }
.mkt-wm-chrome span { flex: 1; text-align: center; font-size: .68rem; color: #8a94a3; background: #fff; border-radius: 6px; padding: .15rem .6rem; margin-left: 6px; }
.mkt-wm-body { padding: 14px 16px; }
.mkt-wm-brand { font-family: 'Montserrat'; font-weight: 700; font-size: .8rem; color: var(--rs-eclipse); letter-spacing: .02em; margin-bottom: 10px; }
.mkt-wm-brand b { color: var(--rs-bee); }
.mkt-wm-widget { border: 1px solid #e4e9ef; border-radius: 10px; padding: .8rem .9rem; background: #fff; box-shadow: 0 8px 22px rgba(19, 40, 68, .08); }
.mkt-wm-q { font-family: 'Montserrat'; font-weight: 700; font-size: .88rem; color: var(--rs-eclipse); margin-bottom: 8px; }
.mkt-wm-input { display: flex; gap: 8px; align-items: center; }
.mkt-wm-input span { flex: 1; border: 1px solid #d6dde5; border-radius: 8px; padding: .4rem .6rem; font-size: .78rem; color: #41536a; background: #fff; }
.mkt-wm-input em { font-style: normal; background: var(--rs-lava); color: #fff; font-family: 'Montserrat'; font-weight: 700; font-size: .72rem; border-radius: 8px; padding: .45rem .7rem; white-space: nowrap; }
.mkt-wm-toast { margin-top: 10px; background: #f0faf4; border: 1px solid #cfe8d8; color: #1a5c2c; font-size: .74rem; border-radius: 8px; padding: .4rem .7rem; }
@media (max-width: 900px) { .mkt-grow-grid { grid-template-columns: 1fr; } }


/* /compare/blanket comparison table (2026-08-03) */
.mkt-cmp-wrap { overflow-x: auto; margin-top: 18px; }
.mkt-cmp { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rs-radius); overflow: hidden; box-shadow: var(--rs-shadow); }
.mkt-cmp th { font-family: 'Montserrat'; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-sub); text-align: left; padding: .9rem 1.1rem; border-bottom: 2px solid #e4e9ef; background: #fbfcfd; }
.mkt-cmp td { padding: .85rem 1.1rem; border-bottom: 1px solid #eef1f5; font-size: .95rem; color: var(--rs-ink); }
.mkt-cmp tr:last-child td { border-bottom: 0; }
.mkt-cmp td:first-child { font-family: 'Montserrat'; font-weight: 700; color: var(--rs-eclipse); }
.mkt-cmp td.us { font-family: 'Montserrat'; font-weight: 800; color: #1a7a34; background: #f4fbf6; }


/* Omnibox Search button: rounded to match the pill language + lava gradient
   (embedded control; minimum treatment per the 2026-08-02 button handoff). */
.mkt-searchbar--omni .p-button, .mkt-searchbar--omni button[type="submit"] {
  border-radius: 999px; border: 1.5px solid transparent;
  background: linear-gradient(135deg, #F6874E 0%, #F26E34 100%); background-origin: border-box;
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 600;
  box-shadow: 0 6px 7px -7px rgba(0, 0, 0, .5); transition: box-shadow .18s ease, filter .18s ease;
}
.mkt-searchbar--omni .p-button:hover { filter: brightness(1.08); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .55); }


/* THE ATLAS section (2026-08-03): layer rows beside the layer-stack art */
.mkt-atlas-rows { margin-top: 18px; }
.mkt-atlas-row { display: flex; gap: 12px; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid #eef1f5; font-size: .95rem; color: #41536a; }
.mkt-atlas-row:last-child { border-bottom: 0; }
.mkt-atlas-row i { width: 12px; height: 12px; border-radius: 4px; margin-top: .3rem; flex-shrink: 0; }
.mkt-atlas-row b { color: var(--rs-eclipse); }