html, body {margin:0;padding:0}
.bpv2-root {background:#f6f7f9}
:root { --bg: #f6f7f9; --bg-warm: #f4f1ec; --surface: #ffffff; --surface-2: #fbfbfc; --border: #e9ebef; --border-strong: #dce0e6; --ink-1: #11151b; --ink-2: #38404a; --ink-3: #69727d; --ink-4: #98a0ab; --green-900: #12231f; --green-800: #16302a; --green-700: #1d3833; --green-600: #234a42; --green-ink: #8ba096; --emerald: #0f9d6a; --emerald-weak: #e6f6ee; --emerald-ink: #0a6b48; --orange: #d97757; --orange-dark: #b75832; --orange-weak: #f7e3d9; --gold: #c79214; --gold-weak: #f6ecd2; --danger: #c0392b; --danger-weak: #fdecea; --radius-xl: 22px; --radius-lg: 16px; --radius: 11px; --radius-sm: 7px; --shadow-sm: 0 1px 2px rgba(17,21,27,.05), 0 1px 1px rgba(17,21,27,.03); --shadow: 0 8px 28px rgba(17,21,27,.07), 0 2px 6px rgba(17,21,27,.04); --shadow-lg: 0 30px 70px -22px rgba(18,35,31,.40), 0 12px 30px -12px rgba(17,21,27,.12); --shadow-float: 0 50px 110px -34px rgba(18,35,31,.55), 0 18px 42px -18px rgba(17,21,27,.18); --maxw: 1180px; --ease: cubic-bezier(.22,.61,.36,1); }
.bpv2-root, .bpv2-root * { box-sizing: border-box; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
.bpv2-root { margin: 0px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }
/* Anti-collision thème (Blocksy pose font-family direct sur h1-h6/label/etc, ce qui bat l'héritage Inter de .bpv2-root). Ce filet remet Inter partout sous .bpv2-root ; les règles JetBrains Mono (.mono/.eyebrow/…) gardent leur police car plus spécifiques. */
.bpv2-root * { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* color: inherit = anti-collision thème (Blocksy pose une couleur de titre rgb(25,42,61) directement sur h1-h4,
   ce qui battait l'héritage ink-1 de .bpv2-root — écart mesuré vs maquette 2026-07-07). inherit reproduit
   exactement la cascade maquette (encre sur fond clair, blanc hérité dans les sections sombres). */
.bpv2-root h1, .bpv2-root h2, .bpv2-root h3, .bpv2-root h4 { margin: 0px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.07; text-wrap: balance; color: inherit; }
.bpv2-root p { margin: 0px; text-wrap: pretty; }
.bpv2-root a { color: inherit; text-decoration: none; }
.bpv2-root img { max-width: 100%; display: block; }
.bpv2-root .mono { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
/* Les descendants de .mono (ex: la fleche du bandeau stats) doivent HERITER JetBrains Mono comme dans la maquette — sans ce filet, le .bpv2-root * anti-theme les repassait en Inter. */
.bpv2-root .mono * { font-family: inherit; }
.bpv2-root ::selection { background: var(--emerald); color: rgb(255, 255, 255); }
.bpv2-root ::-webkit-scrollbar { width: 11px; height: 11px; }
.bpv2-root ::-webkit-scrollbar-thumb { background: padding-box rgb(212, 216, 223); border-radius: 8px; border: 3px solid transparent; }
.bpv2-root .wrap { max-width: var(--maxw); margin: 0px auto; padding: 0px 28px; }
.bpv2-root .wrap-narrow { max-width: 880px; margin: 0px auto; padding: 0px 28px; }
.bpv2-root .section { padding: 96px 0px; }
.bpv2-root .section-sm { padding: 64px 0px; }
.bpv2-root .eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emerald-ink); display: inline-flex; align-items: center; gap: 8px; }
.bpv2-root .eyebrow::before { content: ""; width: 18px; height: 1.5px; background: var(--emerald); display: inline-block; }
.bpv2-root .eyebrow.on-dark { color: rgb(127, 217, 173); }
.bpv2-root .eyebrow.on-dark::before { background: rgb(127, 217, 173); }
.bpv2-root .eyebrow.no-rule::before { display: none; }
.bpv2-root .section-title { font-size: clamp(30px, 4vw, 46px); margin-top: 18px; }
.bpv2-root .section-lead { font-size: 19px; color: var(--ink-3); margin-top: 18px; max-width: 620px; }
.bpv2-root .center { text-align: center; }
.bpv2-root .center .section-lead, .bpv2-root .center .eyebrow { margin-left: auto; margin-right: auto; }
.bpv2-root .center .eyebrow { justify-content: center; }
/* font-family + line-height explicites = anti-collision theme sur <button> (Blocksy pose sa propre police/hauteur de ligne avec une specificite qui bat le filet .bpv2-root *). inherit -> Inter, normal = computed maquette. */
.bpv2-root .btn { font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0px 24px; border-radius: var(--radius); font-size: 16px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s; white-space: nowrap; }
.bpv2-root .btn svg { width: 18px; height: 18px; }
.bpv2-root .btn-primary { background: var(--orange); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(183, 88, 50, 0.7) 0px 10px 24px -10px; }
.bpv2-root .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: rgba(183, 88, 50, 0.7) 0px 16px 30px -12px; }
.bpv2-root .btn-dark { background: var(--green-700); color: rgb(255, 255, 255); }
.bpv2-root .btn-dark:hover { background: var(--green-800); transform: translateY(-1px); }
.bpv2-root .btn-ghost { background: var(--surface); color: var(--ink-1); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.bpv2-root .btn-ghost:hover { background: rgb(255, 255, 255); border-color: var(--ink-4); transform: translateY(-1px); }
.bpv2-root .btn-light { background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.22); }
.bpv2-root .btn-light:hover { background: rgba(255, 255, 255, 0.18); }
.bpv2-root .btn-sm { height: 42px; padding: 0px 18px; font-size: 15px; }
.bpv2-root .btn-block { width: 100%; }
/* Cascade maquette exacte : les <button> gardent le line-height normal du navigateur, les <a class=btn> heritent 1.6 du body. Blocksy posait 1.6 sur les <button> -> on le neutralise seulement la. */
.bpv2-root button.btn { line-height: normal; }
.bpv2-root .nav { position: sticky; top: 0px; z-index: 50; backdrop-filter: saturate(180%) blur(14px); background: rgba(246, 247, 249, 0.78); border-bottom: 1px solid transparent; transition: border-color 0.25s, background 0.25s; }
.bpv2-root .nav.scrolled { border-bottom-color: var(--border); background: rgba(246, 247, 249, 0.92); }
.bpv2-root .nav-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.bpv2-root .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.02em; }
.bpv2-root .brand-mark { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; background: linear-gradient(135deg, rgb(22, 168, 102) 0%, rgb(12, 138, 87) 100%); display: grid; place-items: center; color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 0px 1px inset, rgba(12, 138, 87, 0.55) 0px 4px 12px -4px; }
.bpv2-root .brand-mark svg { display: block; }
.bpv2-root .brand-name { font-size: 16px; }
.bpv2-root .brand-name b { font-weight: 800; }
.bpv2-root .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.bpv2-root .nav-links a { padding: 8px 13px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
.bpv2-root .nav-links a:hover { background: rgba(17, 21, 27, 0.05); color: var(--ink-1); }
.bpv2-root .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bpv2-root .nav-login { font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 8px; color: var(--ink-2); }
.bpv2-root .nav-login:hover { color: var(--ink-1); background: rgba(17, 21, 27, 0.05); }
.bpv2-root .nav-mobile { display: none; }
.bpv2-root .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-1); cursor: pointer; list-style: none; }
.bpv2-root .nav-toggle::-webkit-details-marker { display: none; }
.bpv2-root .nav-toggle svg { width: 22px; height: 22px; display: block; }
.bpv2-root .nav-toggle .ico-close { display: none; }
.bpv2-root .nav-mobile[open] .nav-toggle .ico-open { display: none; }
.bpv2-root .nav-mobile[open] .nav-toggle .ico-close { display: block; }
.bpv2-root .nav-menu { display: none; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; padding: 10px 18px 16px; background: rgba(246, 247, 249, 0.97); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); box-sizing: border-box; }
.bpv2-root .nav-mobile[open] .nav-menu { display: flex; }
.bpv2-root .nav-menu a { padding: 11px 12px; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--ink-2); }
.bpv2-root .nav-menu a:hover { background: rgba(17, 21, 27, 0.05); color: var(--ink-1); }
.bpv2-root .nav-menu .nav-menu-login { font-weight: 600; }
.bpv2-root .nav-menu .btn-primary { width: 100%; margin-top: 8px; }
.bpv2-root .hero { position: relative; overflow: hidden; padding: 70px 0px 60px; }
.bpv2-root .hero-grid { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: 56px; align-items: center; }
.bpv2-root .hero h1 { font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -0.03em; }
.bpv2-root .hero h1 .accent { color: var(--emerald); }
.bpv2-root .hero-sub { font-size: 20px; color: var(--ink-2); margin-top: 24px; max-width: 540px; line-height: 1.55; }
.bpv2-root .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.bpv2-root .hero-reassure { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14.5px; color: var(--ink-3); }
.bpv2-root .hero-reassure .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }
.bpv2-root .hero-reassure b { color: var(--ink-1); font-weight: 600; }
.bpv2-root .hero-bg { position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 78% 18%, rgba(15, 157, 106, 0.1), transparent 70%), radial-gradient(46% 40% at 12% 92%, rgba(217, 119, 87, 0.08), transparent 70%); }
.bpv2-root .trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.bpv2-root .trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px; padding: 22px 0px; }
.bpv2-root .trust-item { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.bpv2-root .trust-item svg { width: 17px; height: 17px; color: var(--emerald); flex: 0 0 auto; }
.bpv2-root .trust-sep { width: 1px; height: 18px; background: var(--border-strong); }
.bpv2-root .problem { background: var(--surface); border-top: 1px solid var(--border); }
.bpv2-root .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.bpv2-root .pain-list { display: flex; flex-direction: column; gap: 12px; }
.bpv2-root .pain { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); transition: transform .2s var(--ease), box-shadow .2s; }
.bpv2-root .pain:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.bpv2-root .pain-x { width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center; background: var(--danger-weak); color: var(--danger); margin-top: 1px; }
.bpv2-root .pain-x svg { width: 14px; height: 14px; }
.bpv2-root .pain p { font-size: 16px; color: var(--ink-2); line-height: 1.45; }
.bpv2-root .flip-line { margin-top: 26px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.bpv2-root .flip-line .hl { color: var(--emerald); }
.bpv2-root .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.bpv2-root .pillar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.bpv2-root .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.bpv2-root .pillar-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; }
.bpv2-root .pillar-ic svg { width: 23px; height: 23px; }
.bpv2-root .pillar-ic.green { background: var(--emerald-weak); color: var(--emerald-ink); }
.bpv2-root .pillar-ic.gold { background: var(--gold-weak); color: rgb(138, 101, 16); }
.bpv2-root .pillar-ic.orange { background: var(--orange-weak); color: var(--orange-dark); }
.bpv2-root .pillar h3 { font-size: 21px; margin-bottom: 10px; letter-spacing: -0.02em; }
.bpv2-root .pillar p { font-size: 16px; color: var(--ink-3); line-height: 1.5; }
.bpv2-root .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 48px; }
.bpv2-root .feat { background: var(--surface); padding: 28px 24px; transition: background 0.2s; }
.bpv2-root .feat:hover { background: var(--surface-2); }
.bpv2-root .feat-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--green-700); color: rgb(207, 230, 221); display: grid; place-items: center; margin-bottom: 16px; }
.bpv2-root .feat-ic svg { width: 19px; height: 19px; }
.bpv2-root .feat h4 { font-size: 16.5px; margin-bottom: 6px; letter-spacing: -0.015em; }
.bpv2-root .feat p { font-size: 14.5px; color: var(--ink-3); line-height: 1.45; }
.bpv2-root .dive { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.bpv2-root .dive.flip .dive-text { order: 2; }
.bpv2-root .dive + .dive { margin-top: 110px; }
.bpv2-root .dive h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 16px; }
.bpv2-root .dive-lead { font-size: 18px; color: var(--ink-2); margin-top: 18px; line-height: 1.55; }
.bpv2-root .dive-points { list-style: none; padding: 0px; margin: 26px 0px 0px; display: flex; flex-direction: column; gap: 14px; }
.bpv2-root .dive-points li { display: flex; gap: 12px; font-size: 16px; color: var(--ink-2); align-items: flex-start; }
.bpv2-root .dive-points .ck { width: 22px; height: 22px; border-radius: 6px; background: var(--emerald-weak); color: var(--emerald-ink); display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; }
.bpv2-root .dive-points .ck svg { width: 13px; height: 13px; }
.bpv2-root .dive-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-4); font-style: italic; line-height: 1.5; max-width: 460px; }
.bpv2-root .mock { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 13px; position: relative; }
.bpv2-root .mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.bpv2-root .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.bpv2-root .mock-bar .tag { margin-left: 10px; font-size: 11.5px; color: var(--ink-4); font-weight: 500; }
.bpv2-root .mock-body { padding: 20px; }
.bpv2-root .mk-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.bpv2-root .mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bpv2-root .mk-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 13px; }
.bpv2-root .mk-kpi .lab { font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.bpv2-root .mk-kpi .val { font-size: 19px; font-weight: 700; margin-top: 5px; letter-spacing: -0.02em; }
.bpv2-root .mk-kpi .val.green { color: var(--emerald-ink); }
.bpv2-root .mk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.bpv2-root .mk-badge.green { background: var(--emerald-weak); color: var(--emerald-ink); }
.bpv2-root .mk-badge.warn { background: var(--gold-weak); color: rgb(138, 101, 16); }
.bpv2-root .mk-badge.orange { background: var(--orange-weak); color: var(--orange-dark); }
.bpv2-root .mk-badge.danger { background: var(--danger-weak); color: var(--danger); }
.bpv2-root .mk-rows { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.bpv2-root .mk-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 13px; border-top: 1px solid var(--border); }
.bpv2-root .mk-row:first-child { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
.bpv2-root .mk-row .nm { font-weight: 500; color: var(--ink-1); }
.bpv2-root .mk-row .meta { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.bpv2-root .mk-row .kg { font-family: "JetBrains Mono", monospace; color: var(--ink-3); font-size: 12px; }
.bpv2-root .mk-row .pr { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 12.5px; }
.bpv2-root .mk-dark { background: linear-gradient(150deg, var(--green-700) 0%, var(--green-900) 100%); color: rgb(234, 241, 238); border-radius: var(--radius-lg); padding: 26px 26px 24px; border: 1px solid rgba(255, 255, 255, 0.05); }
.bpv2-root .mk-dark .mk-eyebrow { color: rgb(127, 182, 162); }
.bpv2-root .mk-compare { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
.bpv2-root .mk-compare .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bpv2-root .mk-compare .lbl { font-size: 13.5px; color: rgb(169, 196, 186); }
.bpv2-root .mk-compare .big { font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.bpv2-root .mk-compare .big.muted { color: rgb(207, 224, 217); }
.bpv2-root .mk-compare .big.green { color: rgb(79, 209, 160); }
.bpv2-root .mk-gap-bar { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 4px; }
.bpv2-root .mk-gap-fill { height: 100%; background: linear-gradient(90deg, rgb(79, 209, 160), rgb(47, 174, 132)); border-radius: 999px; }
.bpv2-root .mk-gap-label { display: flex; justify-content: space-between; font-size: 11px; color: rgb(142, 174, 160); margin-top: 7px; }
.bpv2-root .mk-honest { margin-top: 16px; padding: 11px 13px; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); font-size: 12px; color: rgb(185, 208, 200); line-height: 1.5; display: flex; gap: 9px; }
.bpv2-root .mk-honest svg { width: 15px; height: 15px; flex: 0 0 auto; color: rgb(127, 217, 173); margin-top: 1px; }
.bpv2-root .mk-pricehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bpv2-root .mk-slider { display: flex; align-items: center; gap: 10px; }
.bpv2-root .mk-objective { background: var(--emerald-weak); color: var(--emerald-ink); font-weight: 700; padding: 4px 11px; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 13px; }
.bpv2-root .mk-cale { background: var(--green-700); color: rgb(255, 255, 255); padding: 7px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.bpv2-root .mk-cale svg { width: 14px; height: 14px; }
.bpv2-root .mk-ptable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bpv2-root .mk-ptable th { text-align: right; font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.bpv2-root .mk-ptable th:first-child { text-align: left; }
.bpv2-root .mk-ptable td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: right; font-family: "JetBrains Mono", monospace; }
.bpv2-root .mk-ptable td:first-child { text-align: left; font-family: Inter, sans-serif; font-weight: 500; }
.bpv2-root .mk-ptable tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.bpv2-root .mk-ptable .m-neg { color: var(--danger); font-weight: 700; }
.bpv2-root .mk-ptable .m-pos { color: var(--emerald-ink); font-weight: 600; }
.bpv2-root .mk-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bpv2-root .mk-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; }
.bpv2-root .mk-step .n { width: 26px; height: 26px; border-radius: 8px; background: var(--green-700); color: rgb(255, 255, 255); font-weight: 700; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-size: 13px; }
.bpv2-root .mk-step h5 { margin: 12px 0px 5px; font-size: 14px; font-weight: 700; }
.bpv2-root .mk-step p { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.bpv2-root .mk-step .seal { position: absolute; top: 14px; right: 14px; }
.bpv2-root .dark-section { background: linear-gradient(165deg, var(--green-700) 0%, var(--green-900) 100%); color: rgb(234, 241, 238); position: relative; overflow: hidden; }
.bpv2-root .dark-section .section-title { color: rgb(255, 255, 255); }
.bpv2-root .dark-section .section-lead { color: rgb(185, 208, 200); }
.bpv2-root .dark-glow { position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(50% 45% at 80% 10%, rgba(79, 209, 160, 0.14), transparent 70%); }
.bpv2-root .steps-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }
.bpv2-root .flow-card { background: rgba(255, 255, 255, 0.043); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-lg); padding: 26px 22px; position: relative; transition: transform .25s var(--ease), background .25s; }
.bpv2-root .flow-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.075); }
.bpv2-root .flow-num { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: rgb(79, 209, 160); letter-spacing: 0.05em; }
.bpv2-root .flow-card h4 { font-size: 19px; color: rgb(255, 255, 255); margin: 14px 0px 9px; }
.bpv2-root .flow-card p { font-size: 14px; color: rgb(174, 199, 189); line-height: 1.5; }
.bpv2-root .flow-arrow { position: absolute; right: -13px; top: 38px; color: rgba(255, 255, 255, 0.22); z-index: 2; }
.bpv2-root .flow-arrow svg { width: 22px; height: 22px; }
.bpv2-root .steps-close { margin-top: 40px; font-size: 18px; color: rgb(214, 230, 223); text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.bpv2-root .steps-close b { color: rgb(255, 255, 255); }
.bpv2-root .sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.bpv2-root .sec-card { padding: 24px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.bpv2-root .sec-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--green-700); color: rgb(207, 230, 221); display: grid; place-items: center; margin-bottom: 16px; }
.bpv2-root .sec-ic svg { width: 20px; height: 20px; }
.bpv2-root .sec-card h4 { font-size: 16px; margin-bottom: 7px; }
.bpv2-root .sec-card p { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.bpv2-root .stats { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bpv2-root .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0px; }
.bpv2-root .stat { padding: 14px 28px; text-align: center; border-left: 1px solid var(--border); }
.bpv2-root .stat:first-child { border-left-width: medium; border-left-style: none; border-left-color: currentcolor; }
.bpv2-root .stat .big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.bpv2-root .stat .big .arrow { color: var(--emerald); }
.bpv2-root .stat .lab { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.bpv2-root .stat .sub { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; font-style: italic; }
.bpv2-root .cmp-wrap { margin-top: 48px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); }
.bpv2-root .cmp { width: 100%; border-collapse: collapse; }
.bpv2-root .cmp th, .bpv2-root .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--border); font-size: 15px; }
.bpv2-root .cmp thead th { font-weight: 600; color: var(--ink-3); font-size: 14px; background: var(--surface-2); }
.bpv2-root .cmp thead th.us { color: rgb(255, 255, 255); background: var(--green-700); border-top-right-radius: 0px; position: relative; }
.bpv2-root .cmp thead th.us .pill { font-size: 11px; font-weight: 700; }
.bpv2-root .cmp tbody td:first-child, .bpv2-root .cmp thead th:first-child { text-align: left; font-weight: 500; color: var(--ink-1); }
.bpv2-root .cmp td.us-col { background: rgba(15, 157, 106, 0.05); font-weight: 600; }
.bpv2-root .cmp tbody tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.bpv2-root .cmp tbody tr:last-child td { font-weight: 600; }
.bpv2-root .cmp .yes { color: var(--emerald); }
.bpv2-root .cmp .no { color: var(--ink-4); }
.bpv2-root .cmp .warn { color: var(--gold); font-size: 13px; }
.bpv2-root .cmp svg { width: 19px; height: 19px; }
.bpv2-root .cmp .price-us { font-family: "JetBrains Mono", monospace; font-weight: 800; color: var(--emerald-ink); }
.bpv2-root .cmp-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-4); font-style: italic; max-width: 760px; line-height: 1.5; }
.bpv2-root .faq-list { margin-top: 44px; border-top: 1px solid var(--border); }
.bpv2-root .faq-item { border-bottom: 1px solid var(--border); }
.bpv2-root .faq-q { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 22px 4px; text-align: left; font-size: 18px; font-weight: 600; color: var(--ink-1); font-family: inherit; letter-spacing: -0.01em; line-height: normal; }
.bpv2-root .faq-q .plus { margin-left: auto; flex: 0 0 auto; width: 24px; height: 24px; position: relative; transition: transform .3s var(--ease); color: var(--ink-3); }
.bpv2-root .faq-q .plus::before, .bpv2-root .faq-q .plus::after { content: ""; position: absolute; background: currentcolor; border-radius: 2px; }
.bpv2-root .faq-q .plus::before { width: 16px; height: 2px; top: 11px; left: 4px; }
.bpv2-root .faq-q .plus::after { width: 2px; height: 16px; top: 4px; left: 11px; transition: transform .3s var(--ease); }
.bpv2-root .faq-item.open .plus { transform: rotate(90deg); color: var(--emerald); }
.bpv2-root .faq-item.open .plus::after { transform: rotate(90deg); }
.bpv2-root .faq-a { max-height: 0px; overflow: hidden; transition: max-height .35s var(--ease); }
.bpv2-root .faq-a-inner { padding: 0px 4px 24px; font-size: 16px; color: var(--ink-2); line-height: 1.6; max-width: 760px; }
.bpv2-root .faq-a-inner em { color: var(--ink-3); font-size: 14.5px; }
.bpv2-root .cta-final { position: relative; overflow: hidden; }
.bpv2-root .cta-card { background: linear-gradient(160deg, var(--green-700) 0%, var(--green-900) 100%); border-radius: var(--radius-xl); padding: 70px 40px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.bpv2-root .cta-card .glow { position: absolute; inset: 0px; background: radial-gradient(50% 60% at 50% 0%, rgba(79, 209, 160, 0.16), transparent 70%); }
.bpv2-root .cta-card h2 { font-size: clamp(30px, 4vw, 46px); color: rgb(255, 255, 255); position: relative; }
.bpv2-root .cta-card p { font-size: 19px; color: rgb(185, 208, 200); margin-top: 16px; position: relative; }
.bpv2-root .cta-card .hero-cta { justify-content: center; position: relative; }
.bpv2-root .cta-card .sub { margin-top: 20px; font-size: 14px; color: rgb(142, 174, 160); position: relative; }
.bpv2-root .footer { background: var(--green-900); color: rgb(159, 181, 172); padding: 64px 0px 36px; }
.bpv2-root .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.bpv2-root .footer .brand-name, .bpv2-root .footer-tag { color: rgb(255, 255, 255); }
.bpv2-root .footer-tag { font-size: 14px; color: rgb(159, 181, 172); margin-top: 16px; max-width: 280px; line-height: 1.6; }
.bpv2-root .footer .footer-heading { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(120, 150, 138); margin: 0px 0px 16px; line-height: 1.6; }
.bpv2-root .footer-col a { display: block; font-size: 14.5px; color: rgb(182, 200, 192); padding: 5px 0px; transition: color 0.15s; }
.bpv2-root .footer-col a:hover { color: rgb(255, 255, 255); }
.bpv2-root .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: rgb(120, 150, 138); }
.bpv2-root .footer-bottom .spacer { flex: 1 1 0%; }
.bpv2-root .price-hero { text-align: center; padding: 80px 0px 20px; }
.bpv2-root .price-card-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; margin-top: 56px; }
.bpv2-root .price-card { background: linear-gradient(165deg, var(--green-700) 0%, var(--green-900) 100%); color: rgb(234, 241, 238); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.bpv2-root .price-card .glow { position: absolute; inset: 0px; background: radial-gradient(60% 50% at 80% 0%, rgba(79, 209, 160, 0.15), transparent 70%); pointer-events: none; }
.bpv2-root .price-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(217, 119, 87, 0.18); color: rgb(240, 184, 159); border: 1px solid rgba(217, 119, 87, 0.35); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; position: relative; }
.bpv2-root .price-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 24px; position: relative; }
.bpv2-root .price-amount .num { font-size: 72px; font-weight: 800; letter-spacing: -0.04em; color: rgb(255, 255, 255); line-height: 1; }
.bpv2-root .price-amount .per { font-size: 20px; color: rgb(169, 196, 186); }
.bpv2-root .price-sub { font-size: 14.5px; color: rgb(169, 196, 186); margin-top: 12px; position: relative; }
.bpv2-root .price-card .btn { margin-top: 28px; position: relative; }
.bpv2-root .price-micro { margin-top: 16px; font-size: 13px; color: rgb(142, 174, 160); position: relative; }
.bpv2-root .incl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-sm); }
.bpv2-root .incl-card h3 { font-size: 21px; margin-bottom: 22px; }
.bpv2-root .incl-list { list-style: none; padding: 0px; margin: 0px; display: flex; flex-direction: column; gap: 13px; }
.bpv2-root .incl-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.bpv2-root .incl-list .ck { width: 22px; height: 22px; border-radius: 6px; background: var(--emerald-weak); color: var(--emerald-ink); display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; }
.bpv2-root .incl-list .ck svg { width: 13px; height: 13px; }
.bpv2-root .obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.bpv2-root .obj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); }
.bpv2-root .obj h4 { font-size: 17px; margin-bottom: 10px; }
.bpv2-root .obj p { font-size: 15px; color: var(--ink-3); line-height: 1.55; }
.bpv2-root .login-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.bpv2-root .login-aside { background: linear-gradient(165deg, var(--green-700) 0%, var(--green-900) 100%); color: rgb(234, 241, 238); padding: 56px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.bpv2-root .login-aside .glow { position: absolute; inset: 0px; background: radial-gradient(55% 45% at 75% 15%, rgba(79, 209, 160, 0.16), transparent 70%); pointer-events: none; }
.bpv2-root .login-aside .brand { color: rgb(255, 255, 255); position: relative; }
.bpv2-root .login-aside-mid { margin-top: auto; margin-bottom: auto; position: relative; }
.bpv2-root .login-aside-mid h2 { font-size: 34px; color: rgb(255, 255, 255); letter-spacing: -0.03em; line-height: 1.12; }
.bpv2-root .login-aside-mid p { font-size: 17px; color: rgb(185, 208, 200); margin-top: 18px; max-width: 420px; line-height: 1.6; }
.bpv2-root .login-aside-foot { position: relative; display: flex; flex-direction: column; gap: 14px; }
.bpv2-root .login-aside-foot .li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: rgb(198, 218, 210); }
.bpv2-root .login-aside-foot .li svg { width: 18px; height: 18px; color: rgb(79, 209, 160); flex: 0 0 auto; }
.bpv2-root .login-main { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg); }
.bpv2-root .login-box { width: 100%; max-width: 392px; }
.bpv2-root .login-box h1 { font-size: 30px; letter-spacing: -0.03em; }
.bpv2-root .login-box .sub { font-size: 16px; color: var(--ink-3); margin-top: 10px; }
.bpv2-root .field { margin-top: 20px; }
.bpv2-root .field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.bpv2-root .field .ipt { width: 100%; height: 48px; padding: 0px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; color: var(--ink-1); transition: border-color 0.15s, box-shadow 0.15s; }
.bpv2-root .field .ipt:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-weak); }
.bpv2-root .field-row { display: flex; align-items: center; justify-content: space-between; }
.bpv2-root .field-row a { font-size: 13.5px; color: var(--emerald-ink); font-weight: 600; }
.bpv2-root .field-row a:hover { text-decoration: underline; }
.bpv2-root .login-check { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.bpv2-root .login-check input { width: 17px; height: 17px; accent-color: var(--emerald); }
.bpv2-root .login-sep { display: flex; align-items: center; gap: 14px; margin: 26px 0px 18px; color: var(--ink-4); font-size: 13.5px; }
.bpv2-root .login-sep::before, .bpv2-root .login-sep::after { content: ""; flex: 1 1 0%; height: 1px; background: var(--border); }
.bpv2-root .login-foot { margin-top: 30px; display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--ink-4); }
.bpv2-root .login-foot svg { width: 15px; height: 15px; color: var(--emerald); }
.bpv2-root .login-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-3); font-weight: 500; margin-bottom: 28px; }
.bpv2-root .login-back:hover { color: var(--ink-1); }
@media (max-width: 980px) {
  .bpv2-root { font-size: 16px; }
  .bpv2-root .section { padding: 72px 0px; }
  .bpv2-root .nav-links { display: none; }
  .bpv2-root .hero-grid, .bpv2-root .problem-grid, .bpv2-root .dive, .bpv2-root .dive.flip .dive-text, .bpv2-root .price-card-wrap, .bpv2-root .login-page { grid-template-columns: 1fr; }
  .bpv2-root .dive.flip .dive-text { order: 0; }
  .bpv2-root .dive + .dive { margin-top: 72px; }
  .bpv2-root .hero-visual { margin-top: 12px; }
  .bpv2-root .pillars, .bpv2-root .feat-grid, .bpv2-root .steps-flow, .bpv2-root .sec-grid, .bpv2-root .obj-grid { grid-template-columns: 1fr 1fr; }
  .bpv2-root .stats-grid { grid-template-columns: 1fr 1fr; }
  .bpv2-root .stat:nth-child(2n+1) { border-left-width: medium; border-left-style: none; border-left-color: currentcolor; }
  .bpv2-root .stat:nth-child(3), .bpv2-root .stat:nth-child(4) { border-top: 1px solid var(--border); }
  .bpv2-root .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .bpv2-root .flow-arrow { display: none; }
  .bpv2-root .login-aside { display: none; }
  .bpv2-root .cmp-wrap { overflow-x: auto; }
  .bpv2-root .cmp { min-width: 720px; }
  .bpv2-root .nav-right { display: none; }
  .bpv2-root .nav-mobile { display: block; margin-left: auto; }
  .bpv2-root .nav-toggle { display: flex; }
}
@media (max-width: 620px) {
  .bpv2-root .wrap, .bpv2-root .wrap-narrow { padding: 0px 18px; }
  .bpv2-root .pillars, .bpv2-root .feat-grid, .bpv2-root .steps-flow, .bpv2-root .sec-grid, .bpv2-root .obj-grid { grid-template-columns: 1fr; }
  .bpv2-root .hero h1 { font-size: 34px; }
  .bpv2-root .mk-kpis { grid-template-columns: 1fr 1fr; }
  .bpv2-root .mk-steps { grid-template-columns: 1fr; }
  .bpv2-root .cta-card { padding: 48px 22px; }
  .bpv2-root .footer-top { grid-template-columns: 1fr; }
  .bpv2-root .footer-col a { min-height: 44px; display: flex; align-items: center; padding: 0px; }
  .bpv2-root .footer-legal-links a { min-height: 44px; display: inline-flex !important; align-items: center; }
  .bpv2-root .nav .brand { min-height: 44px; }
  .bpv2-root .btn { width: 100%; }
  .bpv2-root .hero-cta .btn { width: 100%; }
}
/* Apparence (barres de race, grille EUROP, chips catégorie, frais-strip, carte
   "ce qu'il te reste") = règles de BASE, valables à toutes les largeurs.
   Régression corrigée 2026-06-25 : l'accolade de fermeture du @media
   (max-width:620px) ci-dessus avait glissé et avalait ces 25 règles ; elles ne
   s'appliquaient donc plus sur desktop (>620px) → blocs sans style.
   Référence : accueil-rebuild.html (ces règles y sont en base, hors média). */
.bpv2-root .breed-row { display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 12px; padding: 8px 0px; border-top: 1px solid var(--border); }
.bpv2-root .breed-row:first-of-type { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
.bpv2-root .breed-name { font-weight: 500; font-size: 13px; }
.bpv2-root .breed-track { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.bpv2-root .breed-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(224, 160, 127), rgb(217, 119, 87)); }
.bpv2-root .breed-val { text-align: right; font-size: 12px; color: var(--ink-2); font-weight: 600; font-family: "JetBrains Mono", monospace; }
.bpv2-root .europ-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 8px; }
.bpv2-root .europ-chip { text-align: center; border-radius: var(--radius-sm); padding: 9px 2px; border: 1px solid var(--border); background: var(--surface-2); }
.bpv2-root .europ-chip .l { font-weight: 800; font-size: 15px; line-height: 1; }
.bpv2-root .europ-chip .m { font-family: "JetBrains Mono", monospace; font-size: 10.5px; margin-top: 4px; color: var(--ink-3); }
.bpv2-root .cat-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.bpv2-root .cat-chip { font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--ink-2); }
.bpv2-root .cat-chip b { font-family: "JetBrains Mono", monospace; font-weight: 700; }
.bpv2-root .frais-strip { margin-top: 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }
.bpv2-root .frais-strip .hd { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.bpv2-root .frais-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bpv2-root .frais-chip { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--ink-2); font-weight: 500; }
.bpv2-root .frais-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
.bpv2-root .frais-result .lab { font-size: 13px; color: var(--ink-3); max-width: 180px; line-height: 1.4; }
.bpv2-root .frais-result .big { font-family: "JetBrains Mono", monospace; font-size: 30px; font-weight: 700; color: var(--emerald-ink); letter-spacing: -0.02em; white-space: nowrap; }
.bpv2-root .reste-card { display: flex; flex-direction: column; gap: 4px; }
.bpv2-root .reste-point { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 12.5px; color: rgb(231, 210, 200); align-self: flex-start; }
.bpv2-root .reste-point svg { width: 14px; height: 14px; color: rgb(240, 164, 140); flex: 0 0 auto; }
.bpv2-root .reste-both { margin-top: 14px; font-size: 12.5px; color: rgb(169, 196, 186); line-height: 1.5; }
.bpv2-root .reste-both b { color: rgb(79, 209, 160); }
/* ── Page contact « Nous écrire » (maquette 2026-07-07) ──
   Scopé .bpv2-root.bpv2-contact : les redéfinitions .field / .field-row de la maquette
   contact ne doivent PAS déborder sur la page connexion (qui a ses propres .field/.field-row). */
.bpv2-root.bpv2-contact .contact-hero { padding: 128px 0px 0px; position: relative; }
.bpv2-root.bpv2-contact .contact-hero .section-title .accent { color: var(--emerald); }
.bpv2-root.bpv2-contact .hero-head { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center; }
.bpv2-root.bpv2-contact .hero-head-txt .section-title { margin-top: 14px; }
.bpv2-root.bpv2-contact .hero-viz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px; position: relative; }
.bpv2-root.bpv2-contact .hero-viz::before { content: ""; position: absolute; inset: 0px; border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 100% 0%, var(--emerald-weak) 0%, transparent 55%); opacity: .6; pointer-events: none; }
.bpv2-root.bpv2-contact .viz-thread { position: relative; display: flex; flex-direction: column; gap: 12px; }
.bpv2-root.bpv2-contact .bubble { font-size: 14.5px; line-height: 1.5; padding: 13px 15px; border-radius: 16px; max-width: 86%; }
.bpv2-root.bpv2-contact .bubble-who { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 5px; opacity: .7; display: flex; align-items: center; gap: 6px; }
.bpv2-root.bpv2-contact .bubble-in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--ink-1); }
.bpv2-root.bpv2-contact .bubble-in .bubble-who { color: var(--ink-3); }
.bpv2-root.bpv2-contact .bubble-out { align-self: flex-end; background: var(--green-700); color: rgb(238, 244, 241); border-bottom-right-radius: 5px; }
.bpv2-root.bpv2-contact .bubble-out .bubble-who { color: rgb(159, 224, 193); }
.bpv2-root.bpv2-contact .who-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(79, 209, 160); box-shadow: 0 0 0 3px rgba(79, 209, 160, .25); }
.bpv2-root.bpv2-contact .viz-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 15px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; border-bottom-left-radius: 5px; }
.bpv2-root.bpv2-contact .viz-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); opacity: .5; animation: bpv2vizblink 1.2s infinite; }
.bpv2-root.bpv2-contact .viz-typing span:nth-child(2) { animation-delay: .2s; }
.bpv2-root.bpv2-contact .viz-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bpv2vizblink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }
.bpv2-root.bpv2-contact .viz-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); position: relative; }
.bpv2-root.bpv2-contact .viz-avatar { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--emerald-weak); color: var(--emerald-ink); font-weight: 800; font-size: 14px; font-family: "JetBrains Mono", monospace; }
.bpv2-root.bpv2-contact .viz-foot-name { font-size: 14px; font-weight: 700; color: var(--ink-1); }
.bpv2-root.bpv2-contact .viz-foot-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .bpv2-root.bpv2-contact .viz-typing span { animation: none; } }
.bpv2-root.bpv2-contact .contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items: start; margin-top: 44px; padding-bottom: 96px; }
.bpv2-root.bpv2-contact .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px; }
.bpv2-root.bpv2-contact .form-card h3 { font-size: 21px; margin: 0px 0px 4px; letter-spacing: -0.01em; }
.bpv2-root.bpv2-contact .form-card .fc-sub { font-size: 15px; color: var(--ink-3); margin: 0px 0px 24px; }
.bpv2-root.bpv2-contact .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.bpv2-root.bpv2-contact .field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.bpv2-root.bpv2-contact .field label .opt { font-weight: 400; color: var(--ink-4); }
.bpv2-root.bpv2-contact .field .req { color: var(--orange-dark); }
.bpv2-root.bpv2-contact .field input, .bpv2-root.bpv2-contact .field select, .bpv2-root.bpv2-contact .field textarea { font: inherit; font-size: 15px; color: var(--ink-1); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 12px 14px; width: 100%; transition: border-color .15s, box-shadow .15s, background .15s; }
.bpv2-root.bpv2-contact .field textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.bpv2-root.bpv2-contact .field input:focus, .bpv2-root.bpv2-contact .field select:focus, .bpv2-root.bpv2-contact .field textarea:focus { outline: none; border-color: var(--emerald); background: rgb(255, 255, 255); box-shadow: 0 0 0 3px var(--emerald-weak); }
.bpv2-root.bpv2-contact .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369727d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.bpv2-root.bpv2-contact .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bpv2-root.bpv2-contact .form-foot { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.bpv2-root.bpv2-contact .form-foot .note { font-size: 12.5px; color: var(--ink-4); line-height: 1.45; }
.bpv2-root.bpv2-contact .form-error { display: none; margin-top: 12px; padding: 11px 13px; border: 1px solid rgb(240, 184, 184); border-radius: var(--radius-sm); background: var(--danger-weak); color: var(--danger); font-size: 13.5px; line-height: 1.45; }
.bpv2-root.bpv2-contact .form-error.show { display: block; }
.bpv2-root.bpv2-contact .form-success { display: none; text-align: center; padding: 26px 12px 14px; }
.bpv2-root.bpv2-contact .form-success.show { display: block; animation: bpv2fadeup .35s var(--ease); }
.bpv2-root.bpv2-contact .form-card.sent .form-live { display: none; }
.bpv2-root.bpv2-contact .success-mark { width: 62px; height: 62px; border-radius: 50%; background: var(--emerald-weak); color: var(--emerald-ink); display: grid; place-items: center; margin: 0px auto 18px; }
.bpv2-root.bpv2-contact .success-mark svg { width: 30px; height: 30px; }
.bpv2-root.bpv2-contact .form-success h3 { font-size: 22px; margin: 0px 0px 8px; }
.bpv2-root.bpv2-contact .form-success p { font-size: 15px; color: var(--ink-3); max-width: 380px; margin: 0px auto 22px; line-height: 1.6; }
@keyframes bpv2fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0px); } }
.bpv2-root.bpv2-contact .aside-stack { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.bpv2-root.bpv2-contact .channel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 8px; }
.bpv2-root.bpv2-contact .channel { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); text-decoration: none; color: inherit; transition: background .15s; }
.bpv2-root.bpv2-contact .channel + .channel { border-top: 1px solid var(--border); border-radius: 0px; }
.bpv2-root.bpv2-contact a.channel:hover { background: var(--surface-2); }
.bpv2-root.bpv2-contact .ch-ico { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; }
.bpv2-root.bpv2-contact .ch-ico svg { width: 20px; height: 20px; }
.bpv2-root.bpv2-contact .ch-ico.email { background: var(--emerald-weak); color: var(--emerald-ink); }
.bpv2-root.bpv2-contact .ch-ico.phone { background: var(--gold-weak); color: var(--gold); }
.bpv2-root.bpv2-contact .ch-ico.wa { background: rgb(227, 246, 236); color: rgb(31, 157, 87); }
.bpv2-root.bpv2-contact .ch-ico.mail { background: rgb(238, 241, 244); color: var(--ink-2); }
.bpv2-root.bpv2-contact .ch-txt { min-width: 0px; }
.bpv2-root.bpv2-contact .ch-lab { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); font-family: "JetBrains Mono", monospace; }
.bpv2-root.bpv2-contact .ch-val { font-size: 15.5px; font-weight: 600; color: var(--ink-1); margin-top: 2px; word-break: break-word; }
.bpv2-root.bpv2-contact .ch-meta { font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.bpv2-root.bpv2-contact .delay-badge { display: inline-flex; align-items: center; gap: 9px; background: var(--green-700); color: rgb(234, 241, 238); padding: 12px 16px; border-radius: var(--radius); font-size: 14px; }
.bpv2-root.bpv2-contact .delay-badge svg { width: 17px; height: 17px; color: rgb(127, 217, 173); flex-shrink: 0; }
.bpv2-root.bpv2-contact .delay-badge b { color: rgb(255, 255, 255); }
.bpv2-root.bpv2-contact .faq-callout { background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.bpv2-root.bpv2-contact .faq-callout .fco-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-dark); }
.bpv2-root.bpv2-contact .faq-callout h4 { font-size: 17px; margin: 8px 0px 6px; letter-spacing: -0.01em; }
.bpv2-root.bpv2-contact .faq-callout p { font-size: 14px; color: var(--ink-3); margin: 0px 0px 16px; line-height: 1.55; }
.bpv2-root.bpv2-contact .faq-callout a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; color: var(--emerald-ink); text-decoration: none; }
.bpv2-root.bpv2-contact .faq-callout a svg { width: 16px; height: 16px; transition: transform .15s; }
.bpv2-root.bpv2-contact .faq-callout a:hover svg { transform: translateX(3px); }
@media (max-width: 980px) {
  .bpv2-root.bpv2-contact .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .bpv2-root.bpv2-contact .aside-stack { position: static; }
  .bpv2-root.bpv2-contact .contact-hero { padding: 104px 0px 0px; }
  .bpv2-root.bpv2-contact .hero-head { grid-template-columns: 1fr; gap: 30px; }
  .bpv2-root.bpv2-contact .hero-viz { max-width: 460px; }
}
@media (max-width: 620px) {
  .bpv2-root.bpv2-contact .form-card { padding: 22px; }
  .bpv2-root.bpv2-contact .field-row { grid-template-columns: 1fr; gap: 0px; }
  .bpv2-root.bpv2-contact .form-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
}