/* home-v3.css: the homepage redesign (RJ 06.10.2026, Claude Design project
   "Home v2", rebuilt in our own markup). Scope: agents/marketing/drafts/
   2026-10-06-redesign-build-scope.md. Every class is prefixed hv- so nothing
   here reaches the shared components (nav, footer, ask, advisory, refs,
   partners), which keep their own stylesheets. Brand tokens as on the live
   site: navy #1a2b4a / #14203b, gold #8a6d3b / #d4bfa3, ground #f8f9fb. */

.hv-wrap { max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.hv-kick { font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #7a5f2f; margin: 0; }
.hv-bar { display: flex; height: 4px; width: 56px; border-radius: 2px; overflow: hidden; }
.hv-bar span { flex: 1; }
.hv-bar .k { background: #000; } .hv-bar .r { background: #dd0000; } .hv-bar .g { background: #ffcc00; } .hv-bar .s { background: #d4bfa3; }
.hv-flagline { display: grid; grid-template-columns: repeat(6, 1fr); height: 4px; }
.hv-flagline span:nth-child(1) { background: #000; } .hv-flagline span:nth-child(2) { background: #dd0000; } .hv-flagline span:nth-child(3) { background: #ffcc00; }
.hv-flagline span:nth-child(4) { background: #002395; } .hv-flagline span:nth-child(5) { background: #e3e0d9; } .hv-flagline span:nth-child(6) { background: #ed2939; }
.hv-h2 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; color: #1a2b4a; margin: 0; text-wrap: balance; }
.hv-head { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.hv-lead { margin: 0; font-size: 16.5px; line-height: 1.75; color: #3d4a63; max-width: 52ch; }
.hv-more { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: #1a2b4a; border-bottom: 1px solid #d4bfa3; }
.hv-more:hover { border-bottom-color: #1a2b4a; }

/* Hero */
/* Phone layout shift (0.107, 10.10): the hero text first drew in the wider system font, the sub took one more line,
   and everything below jumped 31px when Roboto arrived. A local Arial sized to Roboto's metrics fills the gap, so the
   swap changes the glyphs and not the line count. Android has no Arial and uses its own Roboto, so no change there. */
@font-face { font-family: 'Roboto Fallback'; src: local('Arial'); size-adjust: 98%; ascent-override: 92.77%; descent-override: 24.41%; line-gap-override: 0%; }
.hv-hero { background: linear-gradient(180deg, #eef1f7 0%, #f8f9fb 100%); padding: clamp(48px, 7vw, 96px) 0 0; font-family: 'Roboto', 'Roboto Fallback', sans-serif; }
.hv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .hv-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.hv-hero-copy { display: grid; gap: 22px; }
.hv-hero h1 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(36px, 5vw, 62px); line-height: 1.06; letter-spacing: -0.5px; color: #1a2b4a; margin: 0; text-wrap: balance; }
.hv-hero-sub { margin: 0; font-size: 18px; line-height: 1.7; color: #3d4a63; max-width: 52ch; }
.hv-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hv-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 6px; text-decoration: none; font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.hv-btn-primary { background: #14203b; color: #fff; }
.hv-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(20, 32, 59, .22); }
.hv-btn-ghost { background: #fff; color: #1a2b4a; border: 1px solid #c5c5c5; }
.hv-btn-ghost:hover { border-color: #1a2b4a; color: #1a2b4a; }
.hv-price { margin: 0; font-size: 14.5px; line-height: 1.6; color: #3d4a63; }
.hv-price b { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 20px; color: #1a2b4a; }
.hv-price a, .hv-small a { color: #1a2b4a; font-weight: 500; white-space: nowrap; }
.hv-proof { margin: 0; font-size: 13.5px; line-height: 1.6; text-wrap: pretty; }
.hv-proof a { color: #3d4a63; text-decoration: none; }
.hv-proof .stars { color: #00b67a; letter-spacing: 1px; }
.hv-small { margin: 0; font-size: 13.5px; line-height: 1.7; color: #5f5f5f; }

/* Hero visual: example dashboard, HTML text on purpose (readable, not an image) */
.hv-visual { position: relative; margin: 0; }
.hv-dash-art { margin: 0; }
.hv-card { background: #fff; border-radius: 10px; box-shadow: 0 30px 60px -24px rgba(20, 32, 59, .28); overflow: hidden; }
.hv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e6e6e6; font-family: 'Montserrat', Arial, sans-serif; text-transform: uppercase; }
.hv-card-head b { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; color: #1a2b4a; }
.hv-card-head span { font-size: 11px; letter-spacing: 1px; color: #5f5f5f; }
.hv-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0 12px; padding: 14px 20px; border-bottom: 1px solid #e6e6e6; align-items: center; font-size: 13.5px; }
.hv-row:last-child { border-bottom: 0; }
.hv-row.th { padding: 10px 20px; background: #f8f9fb; font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #5f5f5f; }
.hv-row .muted { color: #5f5f5f; }
.hv-pill { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.hv-pill.you { background: #fbf1d9; color: #7a5800; }
.hv-pill.prog { background: #e6eefb; color: #1f4a8a; }
.hv-pill.done { background: #e3f4ea; color: #1d6b40; }
.hv-float { background: #fff; border-radius: 8px; box-shadow: 0 16px 40px -12px rgba(20, 32, 59, .3); padding: 16px 18px; display: grid; gap: 6px; margin-top: 12px; }
.hv-float .lab { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8a6d3b; }
.hv-float .lab.navy { color: #1a2b4a; }
.hv-float .big { font-size: 14px; font-weight: 500; color: #14203b; }
.hv-float .txt { font-size: 12.5px; line-height: 1.5; color: #3d4a63; }
.hv-float.next { border-top: 3px solid #8a6d3b; }
@media (min-width: 900px) {
  .hv-visual { padding: 0 48px 72px 48px; }
  .hv-visual .hv-card::after { content: ""; display: block; height: 28px; background: #f8f9fb; border-top: 1px solid #e6e6e6; }
  .hv-float { position: absolute; bottom: 0; margin: 0; }
  .hv-float.next { right: 0; width: 230px; }
  .hv-float.letter { left: 0; width: 250px; }
}

/* Marketplaces row */
.hv-markets { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(36px, 5vw, 52px); }
.hv-markets-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; } /* centred (RJ 08.10) */
.hv-markets-lab { flex: 0 0 auto; font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #5f5f5f; margin: 0; }
.hv-markets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; }
.hv-markets li { display: inline-flex; align-items: center; gap: 9px; font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .3px; color: #5f6b80; }
.hv-markets img { width: 22px; height: 22px; display: block; }

/* Stats band */
.hv-stats { background: linear-gradient(135deg, #1a2b4a 0%, #14203b 100%); color: #fff; }
.hv-stats-in { padding: clamp(64px, 8vw, 96px) 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hv-stats .hv-kick { color: #d4bfa3; }
.hv-stats .hv-h2 { color: #fff; }
.hv-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; text-align: center; max-width: 960px; margin: 0 auto; width: 100%; }
.hv-stat { display: grid; gap: 10px; padding: 28px 20px; background: rgba(255, 255, 255, .05); border-radius: 8px; }
.hv-stat .n { font-family: 'Marcellus', Georgia, serif; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; color: #fff; }
.hv-stat .l { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #d4bfa3; }
.hv-stat p { margin: 0; font-size: 14px; line-height: 1.6; color: #c9cfdb; }

/* On your own vs with us */
.hv-compare { padding: clamp(72px, 9vw, 120px) 0; }
.hv-compare-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.hv-vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; }
.hv-vs-col { padding: clamp(28px, 4vw, 48px); }
.hv-vs-col.us { background: #eef1f7; }
.hv-vs-head { display: grid; gap: 8px; justify-items: center; text-align: center; padding-bottom: 26px; }
.hv-vs-head span { font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #5f5f5f; }
.hv-vs-col.us .hv-vs-head span { color: #7a5f2f; }
.hv-vs-head h3 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); color: #1a2b4a; margin: 0; }
.hv-vs ul { list-style: none; margin: 0; padding: 0; }
.hv-vs li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid #e6e6e6; align-items: start; font-size: 15.5px; line-height: 1.6; color: #3d4a63; }
.hv-vs-col.us li { border-top-color: #d9dfeb; color: #262626; }
.hv-vs li b { color: #14203b; font-weight: 500; }
.hv-vs .ic { width: 44px; height: 44px; border-radius: 6px; background: #f8f9fb; display: grid; place-items: center; color: #5f5f5f; }
.hv-vs-col.us .ic { background: #fff; color: #1a2b4a; }
.hv-fr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 20px 24px; border-radius: 8px; background: #f8f9fb; text-decoration: none; color: inherit; transition: box-shadow .2s ease; }
.hv-fr:hover { box-shadow: 0 8px 32px rgba(20, 32, 59, .12); color: inherit; }
.hv-fr-txt { display: flex; align-items: center; gap: 14px; font-size: 15.5px; line-height: 1.5; }
.hv-fr-txt b { font-weight: 500; color: #14203b; }
.hv-fr-flag { display: flex; height: 12px; width: 20px; border-radius: 2px; overflow: hidden; flex: 0 0 auto; border: 1px solid #e6e6e6; }
.hv-fr-flag i:nth-child(1) { flex: 1; background: #002395; } .hv-fr-flag i:nth-child(2) { flex: 1; background: #fff; } .hv-fr-flag i:nth-child(3) { flex: 1; background: #ed2939; }
.hv-fr-go { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #1a2b4a; white-space: nowrap; }

/* Dashboard section */
.hv-dash { padding: 0 0 clamp(72px, 9vw, 120px); }
.hv-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hv-dash-art { background: #e1e6f0; border-radius: 12px; padding: clamp(20px, 4vw, 48px); }
.hv-dash-body { padding: 20px; display: grid; gap: 14px; }
.hv-dash-title { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 14.5px; font-weight: 500; color: #14203b; }
.hv-lines { display: grid; gap: 6px; }
.hv-lines span { height: 7px; background: #e6e6e6; border-radius: 4px; }
.hv-explain { background: #f8f9fb; border-left: 3px solid #8a6d3b; border-radius: 0 6px 6px 0; padding: 14px 16px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.55; }
.hv-explain .lab { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8a6d3b; }
.hv-explain .kv { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hv-explain .kv span:first-child { color: #5f5f5f; }
.hv-explain .kv span:last-child { font-weight: 500; }
.hv-dash-copy { display: grid; gap: 20px; }
.hv-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hv-ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.6; }
.hv-ticks li b { font-weight: 500; color: #14203b; }
.hv-ticks svg { margin-top: 3px; }

/* Free tools strip */
.hv-tools { padding: clamp(56px, 7vw, 88px) 0; background: #fff; border-top: 1px solid #e6e6e6; }
.hv-tools-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hv-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.hv-tool { display: grid; gap: 8px; align-content: start; padding: 24px; border: 1px solid #e6e6e6; border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.hv-tool:hover { border-color: #8a6d3b; box-shadow: 0 8px 28px rgba(20, 32, 59, .08); color: inherit; }
.hv-tool .t { font-family: 'Marcellus', Georgia, serif; font-size: 20px; line-height: 1.3; color: #1a2b4a; }
.hv-tool p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5f5f5f; }
.hv-tool .go { font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #1a2b4a; margin-top: 4px; }

/* Who does the work */
.hv-team { padding: clamp(72px, 9vw, 112px) 0; background: #fff; }
.hv-team-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a2b4a 0%, #14203b 100%); color: #fff; border-radius: 12px; padding: clamp(28px, 4.4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; box-shadow: 0 10px 40px rgba(20, 32, 59, .18); }
.hv-team-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #000 0 33.3%, #dd0000 33.3% 66.6%, #ffcc00 66.6% 100%); }
.hv-team-who { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hv-team-who img { width: 112px; height: 112px; border-radius: 999px; object-fit: cover; border: 3px solid rgba(212, 191, 163, .5); }
.hv-team-who .lab { font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #d4bfa3; }
.hv-team-who .name { font-family: 'Marcellus', Georgia, serif; font-size: 24px; line-height: 1.25; color: #fff; text-decoration: none; }
.hv-team-who a.name:hover { color: #d4bfa3; }
.hv-team-who .role { font-size: 14px; line-height: 1.5; color: #c9cfdb; }
.hv-team-copy { display: grid; gap: 18px; }
.hv-team-copy h2 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; margin: 0; color: #fff; text-wrap: balance; }
.hv-team-copy p { margin: 0; font-size: 15.5px; line-height: 1.75; color: #c9cfdb; }
.hv-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .12); border-radius: 8px; overflow: hidden; }
.hv-facts div { background: rgba(20, 32, 59, .92); padding: 16px; display: grid; gap: 4px; }
.hv-facts span { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #d4bfa3; }
.hv-facts b { font-weight: 400; font-size: 13.5px; line-height: 1.5; color: #fff; }
.hv-team .hv-more { color: #fff; }

/* Questions */
.hv-faq { padding: clamp(72px, 9vw, 120px) 0; background: #f8f9fb; }
.hv-faq-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(20, 32, 59, .06); padding: clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 6vw, 96px); }
.hv-faq-side { flex: 1 1 260px; max-width: 340px; display: grid; gap: 12px; align-content: start; }
.hv-faq-side p:not(.hv-kick) { margin: 0; font-size: 15px; line-height: 1.7; color: #5f5f5f; }
.hv-faq-side p a { color: #1a2b4a; }
.hv-faq-list { flex: 1 1 420px; min-width: 0; }
.hv-faq-list .faq-q { padding-left: 0; padding-right: 0; font-size: 17px; }
.hv-faq-list .faq-a { padding-left: 0; padding-right: 0; font-size: 15.5px; color: #3d4a63; }

@media (max-width: 600px) {
  .hv-wrap { padding-left: 16px; padding-right: 16px; }
  .hv-facts { grid-template-columns: minmax(0, 1fr); }
  .hv-markets-lab { flex-basis: 100%; text-align: center; }
  .hv-markets ul { gap: 12px 20px; }
  .hv-stats-in { padding-left: 16px; padding-right: 16px; }
}

/* Shared blocks aligned to the same 1120px content box on the homepage (review 06.10). */
#advisory .adv-wrap { max-width: 1120px; }
#advisory .adv-tile-price { font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; letter-spacing: .3px; }
#advisory .adv-kick { color: #7a5f2f; }
.hv-card-head span { white-space: nowrap; }

/* ---- Hero card: plays once on load, then holds (RJ via CoS 10.10.2026) ----
   Order: the card, the rows, the pills land oldest first (both Delivered get a tick,
   then In progress, then October's Waiting on you with a gold pulse), then the letter
   note and its line, then Your next step with its date. ~7 s, opacity and transform
   only, so nothing moves in the layout (CLS 0). Text and markup are untouched: the
   tick is a CSS border shape, not a character. .hv-anim is added by the inline script
   right after the figure only at the moment the animation starts (in view, tab visible,
   not a bot); everyone else, and anything without JS, sees today's static card. */
@media (prefers-reduced-motion: no-preference) {
  .hv-visual.hv-anim .hv-card { animation: hvIn .5s ease-out both; }
  .hv-visual.hv-anim .hv-row:not(.th) { animation: hvRise .45s ease-out both; }
  .hv-visual.hv-anim .hv-row:nth-child(3) { animation-delay: .35s; }
  .hv-visual.hv-anim .hv-row:nth-child(4) { animation-delay: .5s; }
  .hv-visual.hv-anim .hv-row:nth-child(5) { animation-delay: .65s; }
  .hv-visual.hv-anim .hv-row:nth-child(6) { animation-delay: .8s; }
  .hv-visual.hv-anim .hv-pill { animation: hvPop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
  .hv-visual.hv-anim .hv-row:nth-child(6) .hv-pill { animation-delay: 1.4s; }
  .hv-visual.hv-anim .hv-row:nth-child(5) .hv-pill { animation-delay: 2s; }
  .hv-visual.hv-anim .hv-row:nth-child(4) .hv-pill { animation-delay: 2.6s; }
  .hv-visual.hv-anim .hv-row:nth-child(3) .hv-pill { animation: hvPop .4s cubic-bezier(.34, 1.56, .64, 1) 3.2s both, hvPulse 1.2s ease-out 3.7s 2; }
  .hv-visual.hv-anim .hv-pill.done::before { content: ""; display: inline-block; width: 4px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 7px 2px 1px; vertical-align: middle; }
  .hv-visual.hv-anim .hv-float.letter { animation: hvRise .5s ease-out 4.3s both; }
  .hv-visual.hv-anim .hv-float.letter .txt { animation: hvFade .4s ease-out 4.9s both; }
  .hv-visual.hv-anim .hv-float.next { animation: hvRise .5s ease-out 5.8s both; }
  .hv-visual.hv-anim .hv-float.next .big { animation: hvFade .4s ease-out 6.3s both; }
  .hv-visual.hv-anim .hv-float.next .txt { animation: hvFade .4s ease-out 6.7s both; }
}
/* fail-safe end state: once started, the script adds .hv-done after 8 s or when the tab is hidden */
.hv-visual.hv-done .hv-card, .hv-visual.hv-done .hv-card *, .hv-visual.hv-done .hv-float, .hv-visual.hv-done .hv-float * { animation: none !important; }
@keyframes hvIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes hvRise { from { opacity: 0; transform: translateY(12px); } }
@keyframes hvFade { from { opacity: 0; } }
@keyframes hvPop { from { opacity: 0; transform: scale(.6); } }
@keyframes hvPulse { from { box-shadow: 0 0 0 0 rgba(138, 109, 59, .45); } to { box-shadow: 0 0 0 10px rgba(138, 109, 59, 0); } }