/* ==========================================================================
   AutoCoreAI — brand layer (loaded last on every page)
   Product-launch presentation: centred keynote heroes, very large type,
   staged product visuals, quiet tiles. Colours taken from the AutoCoreAI logo:
   navy wordmark #0f194c, blue gradient #17a7ff -> #1f6cff.
   ========================================================================== */
:root {
  --brand-navy: #0f194c;
  --brand-blue: #1f6cff;
  --brand-sky: #17a7ff;
  --brand-ink: #1a5ae6;                 /* text-safe blue on white (5.3:1) */
  --brand-grad: linear-gradient(135deg, #17a7ff 0%, #1f6cff 55%, #2b4fe0 100%);
  --brand-grad-text: linear-gradient(100deg, #17a7ff 0%, #1f6cff 45%, #3b4fe0 100%);
  --tile: #f5f5f7;
  --tile-radius: 28px;

  /* comparison page + blog token names */
  --c-accent: #1a5ae6; --c-accent-hover: #1447c0; --c-accent-soft: #eef3ff; --c-accent-line: #c6d5ff;
  /* sales page token names */
  --accent: #1a5ae6; --accent-2: #1447c0; --accent-soft: #eef3ff; --accent-line: #c6d5ff;
}

/* ---------- Logo ---------- */
.brand-logo { display: block; height: 28px; width: auto; }
.brand-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo { gap: 0 !important; }

/* ---------- Global nav (Apple-like translucent bar) ---------- */
.header { background: rgba(251, 251, 253, .72) !important; border-bottom: 1px solid rgba(0, 0, 0, .06) !important; }
.header__inner, .header .wrap { height: 3.25rem !important; }
.nav a { font-size: .8125rem; color: #424245 !important; letter-spacing: -.005em; }
.nav a:hover { color: var(--brand-navy) !important; }

/* ---------- Type: keynote scale, brand navy ---------- */
.p-compare .h1, .p-compare .h2, .p-sales h1, .p-sales h2, .p-blog .hero-title, .p-blog .blog-hero h1 {
  background: none !important; -webkit-text-fill-color: currentColor; color: var(--brand-navy) !important;
  letter-spacing: -.045em; font-weight: 700;
}
.p-compare .h2 { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem); line-height: 1.03; max-width: 16ch; }
.p-sales h2 { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem); line-height: 1.03; }
.p-sales .band--night h2 { color: #f5f5f7 !important; }
.p-compare .accent, .p-compare .h1 .accent, .p-compare .h2 .accent, .p-sales h1 em, .p-sales .holo,
.p-blog .blog-hero h1 span, .grad-text {
  background: var(--brand-grad-text) !important; background-size: 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: brand-sheen 9s ease-in-out infinite alternate;
}
@keyframes brand-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* Eyebrows: small, bright, product-launch style */
.p-compare .eyebrow { font: 600 1rem/1.2 var(--font-sans) !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--brand-ink) !important; }
.p-compare .eyebrow::after { display: none; }
.p-compare .eyebrow[data-n]::before { content: none; }
.p-sales .kicker { font: 600 1rem/1.2 var(--sans) !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--brand-ink) !important; }
.p-sales .band--night .kicker { color: #6fb3ff !important; }
.p-sales .kicker::after { display: none; }

/* ---------- Buttons ---------- */
.btn--primary { background: var(--brand-grad) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 24px -10px rgba(31, 108, 255, .65); }
.btn--primary:hover { filter: brightness(1.08) saturate(1.05); box-shadow: 0 12px 30px -10px rgba(31, 108, 255, .75); }
.btn-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--brand-ink); text-decoration: none; font-size: 1.0625rem; }
.btn-link::after { content: "›"; font-size: 1.3em; line-height: 1; transform: translateY(-1px); transition: transform 240ms; }
.btn-link:hover { text-decoration: underline; }
.btn-link:hover::after { transform: translate(3px, -1px); }

/* ---------- Tiles: Apple-style rounded, quiet ---------- */
.p-compare .card { border-radius: var(--tile-radius) !important; border-color: transparent !important; background: #fff; box-shadow: 0 2px 12px rgba(15, 25, 76, .05) !important; }
.p-compare .section:not(.section--alt) .card { background: var(--tile); box-shadow: none !important; }
.p-compare .card:hover { transform: translateY(-4px) scale(1.005); box-shadow: 0 18px 40px -18px rgba(15, 25, 76, .25) !important; }
.p-compare .card--featured, .p-compare .pick--top { border: 1.5px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, var(--brand-grad) border-box !important; }
.p-compare .table-wrap, .p-compare .market, .p-compare .mirror, .p-compare .demo, .p-compare .cost, .p-compare .guide { border-radius: 32px !important; }
.p-compare .final__panel { border-radius: 40px !important; }
.p-sales .ba__col, .p-sales .plan, .p-sales .cost, .p-sales .live, .p-sales .deadline { border-radius: var(--tile-radius) !important; }
.p-sales .stack li { border: 0; background: var(--tile); border-radius: 24px; }

/* ---------- Comparison page: keynote hero (centred, product staged below) ---------- */
.p-compare .hero--split { padding-block: var(--s-8) calc(var(--s-10) + var(--s-6)); text-align: center; }
.p-compare .hero--split .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-7); }
.p-compare .hero--split .crumbs ol { justify-content: center; }
.p-compare .hero--split .h1 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.75rem); line-height: 1; max-width: 15ch; margin-inline: auto; letter-spacing: -.05em; }
.p-compare .hero--split .lede { margin-inline: auto; max-width: 40rem; font-size: clamp(1.125rem, 1rem + .6vw, 1.4rem); }
.p-compare .hero--split .cta-row { justify-content: center; align-items: center; gap: var(--s-5); }
.p-compare .hero--split .updated { text-align: center; }
.p-compare .hero--split .mock-wrap { width: 100%; max-width: 46rem; transform: perspective(1800px) rotateX(calc((1 - var(--hp, 1)) * 24deg)) scale(calc(.9 + var(--hp, 1) * .1)); transform-origin: 50% 100%; transition: transform 90ms linear; }
.p-compare .hero--split .mock { transform: none; border-radius: 28px; box-shadow: 0 40px 100px -40px rgba(15, 25, 76, .45), 0 0 0 1px rgba(15, 25, 76, .06); }
.p-compare .hero--split .mock-wrap::before { inset: 20% 5% -12% 5%; background: radial-gradient(closest-side, rgba(31, 108, 255, .28), transparent); filter: blur(30px); }
.hero-logo { width: 72px; height: 72px; margin: 0 auto var(--s-4); filter: drop-shadow(0 12px 28px rgba(31, 108, 255, .35)); }

/* Dark brand panel (origin) */
.p-compare .origin { background: var(--brand-navy) !important; }
.p-compare .origin__mark { width: 56px; height: 56px; }

/* ---------- Sales page: keynote hero ---------- */
.p-sales .hero { text-align: center; padding-block: var(--s8) var(--s10); }
.p-sales .hero__grid { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: var(--s8); }
.p-sales .hero .kicker { justify-content: center; }
.p-sales .hero h1 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.75rem); line-height: 1; max-width: 16ch; margin-inline: auto; letter-spacing: -.05em; }
.p-sales .hero .lead { margin-inline: auto; max-width: 40rem; }
.p-sales .hero__cta { justify-content: center; align-items: center; }
.p-sales .stage { width: 100%; max-width: 46rem; transform: perspective(1800px) rotateX(calc((1 - var(--hp, 1)) * 24deg)) scale(calc(.9 + var(--hp, 1) * .1)); transform-origin: 50% 100%; transition: transform 90ms linear; }
.p-sales .stage .live { transform: none !important; }
.p-sales .band--night { background: #000 !important; }
.p-sales .origin { text-align: left; }
.p-sales .origin .mark, .p-sales .origin .brand-icon-wrap { width: 72px; height: 72px; }

/* ---------- Sales page: pinned story (Apple scrollytelling) ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s7); margin-top: var(--s8); }
@media (max-width: 56rem) { .story { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }
.story__steps { display: grid; gap: 0; }
.story__step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity 500ms; }
.story__step.is-on { opacity: 1; }
@media (max-width: 56rem) { .story__step { min-height: auto; padding-block: var(--s5); opacity: 1; } }
.story__n { font: 600 .875rem/1 var(--sans); color: #6fb3ff; }
.story__step h3 { margin-top: var(--s3); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -.04em; line-height: 1.05; color: #f5f5f7; }
.story__step p { margin-top: var(--s3); color: rgba(245, 245, 247, .7); font-size: 1.125rem; max-width: 28rem; }
.story__visual { position: sticky; top: 18vh; align-self: start; height: 64vh; min-height: 420px; border-radius: 32px; background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(31, 108, 255, .35), transparent 70%), #0b0b0f; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; display: grid; place-items: center; }
@media (max-width: 56rem) { .story__visual { position: relative; top: 0; height: 380px; min-height: 0; order: -1; } }
.sv { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.94) translateY(16px); transition: opacity 600ms cubic-bezier(.2, .7, .2, 1), transform 600ms cubic-bezier(.2, .7, .2, 1); }
.sv.is-on { opacity: 1; transform: none; }
.sv__card { width: min(78%, 360px); border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); padding: 22px; color: #1d1d1f; font-size: .875rem; }
.sv__pdf { display: flex; align-items: center; gap: 12px; }
.sv__pdf i { width: 44px; height: 54px; border-radius: 8px; background: #fff1f0; border: 1px solid #f6d3cf; color: #c4291c; font: 700 11px/54px var(--sans); text-align: center; font-style: normal; }
.sv__lines { margin-top: 14px; display: grid; gap: 7px; }
.sv__lines span { height: 7px; border-radius: 4px; background: #e6e6eb; }
.sv__lines span:nth-child(2) { width: 82%; } .sv__lines span:nth-child(3) { width: 90%; } .sv__lines span:nth-child(4) { width: 64%; }
.sv__scan { position: absolute; left: 10%; right: 10%; height: 2px; top: 30%; background: linear-gradient(90deg, transparent, #6fb3ff, transparent); box-shadow: 0 0 30px 6px rgba(31, 108, 255, .55); animation: sv-scan 2.2s ease-in-out infinite alternate; }
@keyframes sv-scan { to { top: 70%; } }
.sv__orb { width: 120px; height: 120px; border-radius: 50%; background: var(--brand-grad); box-shadow: 0 0 80px 10px rgba(31, 108, 255, .55); display: grid; place-items: center; animation: sv-pulse 2.4s ease-in-out infinite; }
.sv__orb img { width: 64%; height: 64%; filter: brightness(0) invert(1); }
@keyframes sv-pulse { 50% { transform: scale(1.06); box-shadow: 0 0 110px 20px rgba(31, 108, 255, .6); } }
.sv__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv__fields div { padding: 8px 10px; border-radius: 10px; background: #eef3ff; border: 1px solid #c6d5ff; }
.sv__fields div.w { grid-column: 1 / -1; }
.sv__fields dt { font-size: .6875rem; color: #6e6e73; }
.sv__fields dd { font-weight: 600; }
.sv__docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(80%, 380px); }
.sv__doc { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .96); color: #1d1d1f; font-weight: 600; display: grid; gap: 8px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.sv__doc small { color: #0a7a46; font-weight: 600; font-size: .75rem; }
.sv__doc span { height: 6px; border-radius: 3px; background: #e6e6eb; }

/* ---------- Blog brand touches ---------- */
.p-blog .avatar--brand { background: none !important; border: 0 !important; }
.p-blog .avatar--brand::after { content: none !important; }
.p-blog .module::before { background: var(--brand-grad) !important; }

/* ---------- Scroll zoom helper ---------- */
@media (prefers-reduced-motion: reduce) {
  .p-compare .hero--split .mock-wrap, .p-sales .stage { transform: none !important; }
  .sv { transition: none; } .sv__scan, .sv__orb { animation: none; }
  .p-compare .accent, .p-sales h1 em, .p-sales .holo, .grad-text { animation: none !important; }
}

/* fixes */
img.hero-logo { display: block; }
@media (min-width: 52rem) { .header__actions a[href="blog/index.html"] { display: none; } }
.p-sales .band--beam { overflow: clip; }
.p-compare .hero--split .mock, .p-compare .hero--split figcaption { text-align: left; }
.p-compare .hero--split .mock__caption { text-align: center; }
.p-sales .stage .live { text-align: left; }
img.hero-logo { margin-left: auto !important; margin-right: auto !important; margin-bottom: 1rem; }

/* ==========================================================================
   Premium staging layer
   ========================================================================== */

/* 1. Brand opening: the ring draws itself, the mark flies at the camera,
      and the page opens through the ring (iris). */
@property --iris { syntax: '<length>'; inherits: true; initial-value: 0px; }
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #fff; cursor: pointer;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
  animation: intro-iris 950ms cubic-bezier(.76,0,.18,1) 1250ms forwards, intro-gone 1ms linear 2250ms forwards; }
.intro__rim { position: absolute; inset: 0; opacity: 0; background: conic-gradient(from 200deg at 50% 50%, #17a7ff, #1f6cff, #3b4fe0, #17a7ff);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px), #000 calc(var(--iris) + 3px), transparent calc(var(--iris) + 26px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px), #000 calc(var(--iris) + 3px), transparent calc(var(--iris) + 26px));
  animation: intro-show 120ms linear 1250ms forwards; }
.intro__mark { position: relative; width: 120px; height: 120px; animation: intro-fly 700ms cubic-bezier(.6,0,.2,1) 1150ms forwards; }
.intro__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.intro__mark circle { fill: none; stroke: url(#acai-ig); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 900ms cubic-bezier(.65,0,.25,1) 100ms forwards; filter: drop-shadow(0 0 6px rgba(31,108,255,.5)); }
.intro__mark img { position: absolute; inset: 18px; width: 84px; height: 84px; opacity: 0; transform: scale(.55); animation: intro-icon 800ms cubic-bezier(.2,.9,.2,1.15) 250ms forwards; filter: drop-shadow(0 14px 30px rgba(31,108,255,.35)); }
.intro__word { position: absolute; top: calc(50% + 82px); left: 50%; height: 26px; opacity: 0; transform: translate(-50%, 8px); animation: intro-word 600ms cubic-bezier(.2,.8,.2,1) 620ms forwards, intro-fade 300ms ease 1150ms forwards; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-icon { to { opacity: 1; transform: none; } }
@keyframes intro-word { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes intro-fade { to { opacity: 0; } }
@keyframes intro-fly { to { transform: scale(2.6); opacity: 0; filter: blur(6px); } }
@keyframes intro-show { to { opacity: 1; } }
@keyframes intro-iris { to { --iris: 82vmax; } }
@keyframes intro-gone { to { visibility: hidden; opacity: 0; } }
/* camera push: the hero settles while the iris opens */
.intro-play .p-hero-cam { animation: hero-cam 1500ms cubic-bezier(.2,.8,.2,1) 1200ms both; }
@keyframes hero-cam { from { transform: scale(1.07); opacity: .4; } to { transform: none; opacity: 1; } }

/* 2. Brand orbit: the logo's ring, alive behind every hero */
.orbit { position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1100px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .9; }
.orbit::before, .orbit::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.orbit::before { background: conic-gradient(from 0deg, transparent 0 55%, rgba(23,167,255,.0) 55%, rgba(23,167,255,.55) 72%, rgba(31,108,255,.8) 82%, transparent 92%); -webkit-mask: radial-gradient(circle, transparent 69.6%, #000 70%, #000 70.4%, transparent 70.8%); mask: radial-gradient(circle, transparent 69.6%, #000 70%, #000 70.4%, transparent 70.8%); animation: orbit-spin 14s linear infinite; }
.orbit::after { inset: 9%; background: conic-gradient(from 180deg, transparent 0 60%, rgba(59,79,224,.45) 78%, transparent 90%); -webkit-mask: radial-gradient(circle, transparent 69.5%, #000 70%, #000 70.3%, transparent 70.8%); mask: radial-gradient(circle, transparent 69.5%, #000 70%, #000 70.3%, transparent 70.8%); animation: orbit-spin 22s linear infinite reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.hero-glow { position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; left: var(--gx, 50%); top: var(--gy, 30%); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(31,108,255,.16), transparent); pointer-events: none; transition: left 600ms cubic-bezier(.2,.7,.2,1), top 600ms cubic-bezier(.2,.7,.2,1); }

/* 3. Headline entrance: lines rise out of a blur */
.p-sales .hero h1, .p-sales .hero .lead, .p-sales .hero .hero__cta, .p-sales .hero .kicker, .p-sales .hero .hero-logo { animation: rise 1100ms cubic-bezier(.2,.8,.2,1) both; }
.p-sales .hero .hero-logo { animation-delay: 1.15s; } .p-sales .hero .kicker { animation-delay: 1.25s; }
.p-sales .hero h1 { animation-delay: 1.35s; } .p-sales .hero .lead { animation-delay: 1.5s; } .p-sales .hero .hero__cta { animation-delay: 1.62s; }
.p-compare .hero-logo { animation: rise 1100ms cubic-bezier(.2,.8,.2,1) 1.1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* 4. Manifesto: words light up as you scroll (brand voice) */
.manifesto { padding-block: clamp(5rem, 12vw, 10rem); background: #fff; }
.manifesto__inner { max-width: 62rem; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.manifesto__eyebrow { font-weight: 600; color: var(--brand-ink); margin-bottom: 1.25rem; }
.manifesto__text { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.6rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 700; color: var(--brand-navy); text-wrap: pretty; }
.manifesto__text .mw { color: rgba(15, 25, 76, .14); transition: color 300ms ease; }
.manifesto__text .mw.is-lit { color: var(--brand-navy); }
.manifesto__text .mw.is-brand { background: var(--brand-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .18; transition: opacity 300ms ease; }
.manifesto__text .mw.is-brand.is-lit { opacity: 1; }

/* 5. Buttons: light sweep, magnetic feel */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: btn-sweep 4.5s ease-in-out 2.4s infinite; }
@keyframes btn-sweep { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* 6. Tiles: depth on pointer */
.tilt-on { transform-style: preserve-3d; will-change: transform; transition: transform 400ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms !important; }

/* 7. Brand signature before the footer */
.brand-sign { position: relative; overflow: hidden; padding: clamp(4rem, 10vw, 8rem) max(16px, env(safe-area-inset-right, 0px)) clamp(3rem, 6vw, 5rem) max(16px, env(safe-area-inset-left, 0px)); text-align: center; background: linear-gradient(180deg, #fff, #f4f7ff); }
.brand-sign__mark { width: 88px; height: 88px; margin: 0 auto; position: relative; }
.brand-sign__mark img { width: 100%; height: 100%; filter: drop-shadow(0 18px 40px rgba(31,108,255,.35)); }
.brand-sign__mark::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 60%, #17a7ff 78%, #1f6cff 88%, transparent 96%); -webkit-mask: radial-gradient(circle, transparent 60px, #000 61px, #000 62.5px, transparent 63.5px); mask: radial-gradient(circle, transparent 60px, #000 61px, #000 62.5px, transparent 63.5px); animation: orbit-spin 6s linear infinite; }
.brand-sign__line { margin-top: 1.75rem; font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; color: var(--brand-navy); }
.brand-sign__line span { background: var(--brand-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-sign__sub { margin: 1rem auto 0; max-width: 34rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: #55555c; }
.brand-sign__sub strong { color: var(--brand-navy); font-weight: 700; }
.brand-sign__vals { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: relative; z-index: 1; }
.brand-sign__vals li { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(31, 108, 255, .2); color: #1a5ae6; font-size: .88rem; font-weight: 600; box-shadow: 0 6px 18px -10px rgba(31, 108, 255, .4); }
.brand-sign__word { position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%); font-size: clamp(5rem, 18vw, 16rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(31,108,255,.12); white-space: nowrap; pointer-events: none; user-select: none; }

/* Parallax helper */
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .orbit::before, .orbit::after, .brand-sign__mark::before, .btn--primary::after { animation: none !important; }
  .p-sales .hero *, .p-compare .hero-logo { animation: none !important; }
  .manifesto__text .mw { color: var(--brand-navy); }
  .manifesto__text .mw.is-brand { opacity: 1; }
}
.p-compare .split-words .accent-w { background: var(--brand-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ==========================================================================
   Immersive layer
   ========================================================================== */

/* Hero product: light glides across the screen as it unfolds */
.glare { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.55) 49%, rgba(255,255,255,.1) 54%, transparent 62%);
  background-size: 260% 100%; background-position: calc(100% - var(--hp, 1) * 100%) 0; opacity: calc(1 - var(--hp, 1) * .85); mix-blend-mode: soft-light; }
.p-compare .hero--split .mock, .p-sales .stage .live { position: relative; }

/* Page transitions: leaving = the brand floods out from the click,
   arriving = the page opens through the ring */
.curtain { position: fixed; inset: 0; z-index: 300; pointer-events: none; display: grid; place-items: center;
  background: radial-gradient(ellipse 70% 60% at 30% 20%, #17a7ff, transparent 60%), var(--brand-grad);
  clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 620ms cubic-bezier(.7,0,.2,1); }
.curtain img { width: 76px; height: 76px; opacity: 0; transform: scale(.7); transition: opacity 300ms ease 300ms, transform 500ms cubic-bezier(.2,.9,.2,1.2) 300ms; filter: brightness(0) invert(1) drop-shadow(0 10px 30px rgba(0,0,0,.25)); }
.curtain.is-closing { pointer-events: auto; clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%)); }
.curtain.is-closing img { opacity: 1; transform: none; }
html.nav-in body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 30% 20%, #17a7ff, transparent 60%), var(--brand-grad);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
  animation: intro-iris 900ms cubic-bezier(.76,0,.18,1) 80ms forwards, intro-gone 1ms linear 1000ms forwards; }

/* Click answers: a pulse of light from the exact point pressed */
.btn { position: relative; overflow: hidden; }
.burst { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 70%); animation: burst 700ms cubic-bezier(.2,.8,.2,1) forwards; }
.btn:not(.btn--primary) .burst { background: radial-gradient(circle, rgba(31,108,255,.35), rgba(31,108,255,0) 70%); }
@keyframes burst { to { transform: scale(30); opacity: 0; } }

/* ---------- The scan: a report becomes a dossier (scroll-driven) ---------- */
.scan { position: relative; background: #fff; color: #f5f7ff; text-align: left; }
.scan__stage { position: relative; padding: clamp(12px, 2vw, 24px); }
.scan__frame { position: relative; overflow: hidden; isolation: isolate; border-radius: 40px; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(16px, 3vh, 32px);
  padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 72px) clamp(24px, 4vh, 48px);
  background: radial-gradient(ellipse 60% 55% at 72% 18%, rgba(31,108,255,.42), transparent 62%),
              radial-gradient(ellipse 55% 50% at 8% 95%, rgba(23,167,255,.22), transparent 60%), #0a1440; }
.scan-on .scan__track { height: 470vh; }
.scan-on .scan__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.scan-on .scan__frame { position: absolute; inset: 0; border-radius: 0; padding-top: max(84px, 11vh);
  clip-path: inset(calc((1 - var(--a, 1)) * 9%) calc((1 - var(--a, 1)) * 7%) round calc((1 - var(--a, 1)) * 48px)); }
.scan__orbit { position: absolute; z-index: -1; width: min(1000px, 140vw); aspect-ratio: 1; left: 30%; top: 58%; transform: translate(-50%, -50%) rotate(calc(var(--p, 0) * 140deg)); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(23,167,255,.55) 76%, rgba(31,108,255,.9) 84%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 69.4%, #000 70%, #000 70.5%, transparent 71%); mask: radial-gradient(circle, transparent 69.4%, #000 70%, #000 70.5%, transparent 71%); opacity: .8; pointer-events: none; }
.scan__floor { position: absolute; z-index: -1; left: -30%; right: -30%; bottom: 0; height: 42%; pointer-events: none; perspective: 500px; -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%); }
.scan__floor::before { content: ""; position: absolute; inset: 0 0 -60% 0; transform: rotateX(72deg); transform-origin: 50% 0;
  background-image: linear-gradient(rgba(111,179,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(111,179,255,.22) 1px, transparent 1px); background-size: 64px 64px;
  background-position: 0 calc(var(--p, 0) * 640px); }

.scan__head { max-width: 46rem; }
.scan__kicker { font-weight: 600; color: #8cc8ff; margin-bottom: .75rem; }
.scan__caps { list-style: none; display: grid; margin: 0; padding: 0; }
.scan__cap { grid-area: 1 / 1; display: grid; align-content: start; gap: .7rem; opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1), filter 600ms; }
.scan__cap strong { font-size: clamp(1.75rem, .8rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; color: #fff; text-wrap: balance; }
.scan__cap span { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: rgba(235,241,255,.7); max-width: 36rem; }
.scan:not([data-cap]) .scan__cap:last-child, .scan[data-cap="0"] .scan__cap:nth-child(1), .scan[data-cap="1"] .scan__cap:nth-child(2),
.scan[data-cap="2"] .scan__cap:nth-child(3), .scan[data-cap="3"] .scan__cap:nth-child(4) { opacity: 1; transform: none; filter: none; }

.scan__scene { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); min-height: 0; }
.scan__sheet { --w: min(440px, 46vh, 38vw); position: relative; justify-self: center; width: var(--w); font-size: calc(var(--w) / 30); color: #1d1d1f; background: #fff; border-radius: 1.4em; padding: 1.6em 1.6em 1.2em;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), 0 0 90px -20px rgba(31,108,255,calc(var(--c, 1) * .9));
  transform: perspective(1500px) translateY(calc((1 - var(--s, 1)) * 55vh)) rotateX(calc(9deg + (1 - var(--s, 1)) * 32deg)) rotateY(-13deg) rotateZ(1.5deg) scale(calc(1 - var(--d, 0) * .1));
  opacity: calc(var(--s, 1) * (1 - var(--d, 0) * .55)); transform-origin: 50% 100%; }
.scan__sheet-head { display: flex; align-items: center; gap: .9em; padding-bottom: 1em; margin-bottom: .6em; border-bottom: 1px solid #ececf1; }
.scan__sheet-head i { flex: none; width: 2.6em; height: 3.2em; border-radius: .5em; background: #fff1f0; border: 1px solid #f6d3cf; color: #c4291c; font: 700 .75em/4.3em var(--sans, var(--font-sans, system-ui)); text-align: center; font-style: normal; }
.scan__sheet-head b { display: block; font-size: 1.15em; letter-spacing: -.02em; }
.scan__sheet-head span { color: #6e6e73; font-size: .9em; }
.scan__rows { list-style: none; margin: 0; padding: 0; }
.scan__row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: .8em; align-items: center; padding: .62em 0; border-bottom: 1px dashed #ececf1; }
.scan__row:last-child { border-bottom: 0; }
.scan__row .k { color: #6e6e73; font-size: .9em; }
.scan__row .v { justify-self: start; font-weight: 600; padding: .15em .45em; margin-left: -.45em; border-radius: .4em; filter: blur(4px); opacity: .45; transition: filter 450ms ease, opacity 450ms ease, background 450ms ease, box-shadow 450ms ease; }
.scan:not(.scan-on) .scan__row .v, .scan__row.is-read .v { filter: none; opacity: 1; background: rgba(31,108,255,.1); box-shadow: inset 0 0 0 1px rgba(31,108,255,.35); color: #1447c0; }
.scan__beam { position: absolute; left: -7%; right: -7%; height: 2px; top: calc(var(--c, 0) * 100%); opacity: var(--beam, 0); pointer-events: none;
  background: linear-gradient(90deg, transparent, #7fd0ff 18%, #fff 50%, #7fd0ff 82%, transparent);
  box-shadow: 0 0 22px 5px rgba(23,167,255,.65), 0 0 90px 24px rgba(31,108,255,.35); }
.scan__beam::before { content: ""; position: absolute; left: 7%; right: 7%; bottom: 0; height: 9em; background: linear-gradient(to top, rgba(23,167,255,.16), transparent); }

.scan__chips, .scan__docs { grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.scan__chips { display: grid; gap: 10px; align-content: center; opacity: calc(1 - var(--d, 1) * 3); }
.scan:not(.scan-on) .scan__chips { display: none; }
.scan__chip { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateX(-60px) scale(.92); transition: opacity 500ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.9,.2,1.15); }
.scan__chip span { flex: 1; text-align: left; color: rgba(235,241,255,.65); font-size: .9375rem; }
.scan__chip b { color: #fff; font-weight: 600; text-align: right; }
.scan__chip.is-read { opacity: 1; transform: none; }
.scan__chip.is-read::before { content: ""; }

.scan__docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-content: center; }
.scan__doc { --l: clamp(0, (var(--d, 1) - var(--i) * .14) / .58, 1); display: grid; gap: 7px; padding: clamp(14px, 1.4vw, 20px); border-radius: 20px; background: #fff; color: #1d1d1f;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
  opacity: var(--l); transform: translate(calc((1 - var(--l)) * -38vw), calc((1 - var(--l)) * 8vh)) rotate(calc((1 - var(--l)) * -16deg)) scale(calc(.45 + var(--l) * .55)); }
.scan__doc b { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); letter-spacing: -.02em; }
.scan__doc small { color: #6e6e73; font-size: .875rem; }
.scan__doc i { height: 6px; border-radius: 3px; background: #ececf1; }
.scan__doc i:nth-of-type(2) { width: 78%; } .scan__doc i:nth-of-type(3) { width: 56%; }
.scan__doc em { justify-self: start; margin-top: 4px; font-style: normal; font-size: .8125rem; font-weight: 600; color: #0a7a46; background: #e9f8ef; padding: 3px 10px; border-radius: 999px; }

.scan__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.scan-on .scan__cta { opacity: var(--f, 1); transform: translateY(calc((1 - var(--f, 1)) * 16px)); }
.scan-on:not(.is-final) .scan__cta { pointer-events: none; visibility: hidden; }
.scan__note { color: rgba(235,241,255,.5); font-size: .875rem; }

@media (max-width: 56rem) {
  .scan__scene { grid-template-columns: minmax(0, 1fr); }
  .scan__chips { display: none; }
  .scan__sheet { --w: min(360px, 84vw, 44svh); transform: perspective(1200px) translateY(calc((1 - var(--s, 1)) * 50vh)) rotateX(calc(6deg + (1 - var(--s, 1)) * 30deg)) rotateZ(1deg) scale(calc(1 - var(--d, 0) * .15)); opacity: calc(var(--s, 1) * (1 - var(--d, 0) * 1.4)); }
  .scan__docs { grid-column: 1; grid-row: 1; width: min(400px, 100%); justify-self: center; }
  .scan__sheet { grid-column: 1; grid-row: 1; }
  .p-sales .scan__cta { display: none; }
  .scan__doc { transform: translateY(calc((1 - var(--l)) * 40vh)) rotate(calc((1 - var(--l)) * -8deg)) scale(calc(.6 + var(--l) * .4)); }
  .scan__doc i:nth-of-type(3) { display: none; }
  .scan__cap span { display: none; }
  .scan__orbit { left: 50%; top: 62%; }
  .scan__frame { border-radius: 28px; }
  .scan:not(.scan-on) .scan__sheet { display: none; }
}
@media (max-height: 820px) { .scan__doc i:nth-of-type(3) { display: none; } }
@media (max-width: 56rem) and (max-height: 700px) { .scan__doc small, .scan__doc i { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro, html.nav-in body::after, .curtain { display: none !important; }
  .glare, .burst { display: none; }
  .intro-play .p-hero-cam { animation: none; }
}

/* Header turns to dark glass while the scan scene is on screen */
.header { transition: background-color 400ms ease, border-color 400ms ease; }
.on-dark .header { background: rgba(10, 20, 64, .62) !important; border-bottom-color: rgba(255, 255, 255, .08) !important; }
.on-dark .header .brand-logo, .on-dark .header .logo img { filter: brightness(0) invert(1); transition: filter 400ms ease; }
.on-dark .nav a, .on-dark .header__actions a:not(.btn) { color: rgba(245, 247, 255, .82) !important; }

/* ---------- Duel mode (comparison page) ---------- */
.duel { overflow: clip; margin-top: clamp(28px, 4vw, 48px); padding: clamp(18px, 4vw, 48px); border-radius: 36px; background: linear-gradient(180deg, #f7f9ff, #fff 60%); box-shadow: 0 0 0 1px rgba(15,25,76,.06), 0 40px 90px -50px rgba(15,25,76,.35); }
.duel__pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.duel__opt { appearance: none; border: 1px solid rgba(15,25,76,.12); background: #fff; color: #424245; font: 500 .9375rem/1 var(--font-sans, system-ui); padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms, transform 200ms; }
.duel__opt:hover { border-color: rgba(31,108,255,.45); color: var(--brand-navy); }
.duel__opt[aria-checked="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.duel__opt:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.duel__arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 3vw, 40px); margin: clamp(28px, 4vw, 44px) 0 clamp(16px, 2vw, 24px); text-align: center; }
.duel__corner { display: grid; justify-items: center; gap: 6px; }
.duel__corner b { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); letter-spacing: -.03em; color: var(--brand-navy); }
.duel__corner small { color: #6e6e73; font-size: .875rem; }
.duel__mark { width: clamp(56px, 7vw, 76px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.duel__mark img { width: 100%; height: 100%; filter: drop-shadow(0 14px 30px rgba(31,108,255,.4)); }
.duel__mark--them { background: #eceef4; color: #424245; font-weight: 700; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(15,25,76,.08); }
.duel__vs { position: relative; width: clamp(56px, 7vw, 76px); aspect-ratio: 1; display: grid; place-items: center; }
.duel__vs span { font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.35rem); letter-spacing: -.04em; background: var(--brand-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.duel__vs::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 40%, #17a7ff 70%, #1f6cff 85%, transparent 95%); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%, #000 67%, transparent 69%); mask: radial-gradient(circle, transparent 62%, #000 64%, #000 67%, transparent 69%); animation: orbit-spin 3.5s linear infinite; }

.duel__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.duel__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .78fr) minmax(0, 1fr); grid-template-areas: "us crit them" "us bar them" "us badge them"; column-gap: clamp(10px, 2vw, 24px); align-items: center; padding: 14px 0; border-top: 1px solid rgba(15,25,76,.07); }
.duel__row:first-child { border-top: 0; }
.duel__crit { grid-area: crit; text-align: center; display: grid; justify-items: center; gap: 4px; }
.duel__crit b { font-size: .9375rem; color: var(--brand-navy); letter-spacing: -.01em; }
.duel__key { font-size: .75rem; font-weight: 600; color: var(--brand-ink); background: var(--c-accent-soft); padding: 2px 9px; border-radius: 999px; }
.duel__badge { grid-area: badge; text-align: center; font-size: .8125rem; color: #6e6e73; margin: 4px 0 0; }
.duel__row[data-win="us"] .duel__badge { color: var(--brand-ink); font-weight: 600; }
.duel__row[data-win="them"] .duel__badge { color: var(--brand-navy); font-weight: 600; }
.duel__val { padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15,25,76,.08); font-size: .9375rem; line-height: 1.4; color: #424245; min-height: 100%; display: flex; flex-direction: column; justify-content: center; transition: box-shadow 300ms, background 300ms, opacity 300ms; }
.duel__val--us { grid-area: us; text-align: right; }
.duel__val--them { grid-area: them; }
.duel__who { display: none; font-size: .75rem; font-weight: 600; color: #6e6e73; margin-bottom: 2px; }
.duel__row[data-win="us"] .duel__val--us { background: linear-gradient(#fff, #fff) padding-box, var(--brand-grad) border-box; border: 1.5px solid transparent; box-shadow: 0 16px 34px -18px rgba(31,108,255,.6); color: var(--brand-navy); font-weight: 600; }
.duel__row[data-win="them"] .duel__val--them { box-shadow: inset 0 0 0 1.5px var(--brand-navy), 0 16px 34px -20px rgba(15,25,76,.45); color: var(--brand-navy); font-weight: 600; }
.duel__row[data-win="us"] .duel__val--them, .duel__row[data-win="them"] .duel__val--us { opacity: .7; }
.duel__bar { grid-area: bar; display: grid; grid-template-columns: 1fr 1fr; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(15,25,76,.07); overflow: hidden; }
.duel__bar i { display: block; height: 100%; transform: scaleX(0);  }
.duel__bar i:first-child { transform-origin: 100% 50%; background: var(--brand-grad); }
.duel__bar i:last-child { transform-origin: 0 50%; background: var(--brand-navy); }
.duel__row[data-win="us"] .duel__bar i:first-child, .duel__row[data-win="them"] .duel__bar i:last-child { transform: scaleX(1); }
.duel__row[data-win="tie"] .duel__bar i { transform: scaleX(.45); background: #b8c2dc; }

/* Swap animation: one-shot, always ends visible (no hidden state to get stuck in) */
.duel.is-swap .duel__val--us { animation: duel-l 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.duel.is-swap .duel__val--them { animation: duel-r 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.duel.is-swap .duel__bar i { animation: duel-bar 700ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.duel.is-swap .duel__corner--them { animation: duel-pop 420ms cubic-bezier(.2,.9,.2,1.2) both; }
@keyframes duel-l { from { opacity: 0; transform: translateX(-36px); } }
@keyframes duel-r { from { opacity: 0; transform: translateX(36px); } }
@keyframes duel-bar { from { transform: scaleX(0); } }
@keyframes duel-pop { from { opacity: 0; transform: scale(.88); } }

.duel__verdict { margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 3vw, 36px); border-radius: 28px; text-align: center; color: #f5f7ff; background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(31,108,255,.55), transparent 70%), #0a1440; display: grid; justify-items: center; gap: 10px; }
.duel__vlabel { color: #8cc8ff; font-weight: 600; font-size: .9375rem; }
.duel__vwin { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 700; letter-spacing: -.04em; color: #fff; }
.duel__vwin img { width: 40px; height: 40px; }
.duel__why { max-width: 40rem; color: rgba(235,241,255,.82); }
.duel__alt { max-width: 40rem; color: rgba(235,241,255,.6); font-size: .9375rem; }
.duel__alt b { color: #fff; font-weight: 600; }
.duel__verdict .btn { margin-top: 8px; }
.duel__note { margin-top: 16px; font-size: .8125rem; color: #6e6e73; text-align: center; max-width: 52rem; margin-inline: auto; }

@media (max-width: 40rem) {
  .duel__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "crit crit" "us them" "bar bar" "badge badge"; row-gap: 8px; }
  .duel__val { padding: 12px; font-size: .875rem; }
  .duel__val--us { text-align: left; }
  .duel__who { display: block; }
  .duel__arena { gap: 8px; }
  .duel__corner small { display: none; }
  .duel__opt { padding: 8px 12px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .duel__vs::before { animation: none; }
  .duel.is-swap * { animation: none !important; }
}

/* Personalised documents: the visitor's workshop name on every document */
.scan__foot { justify-content: flex-start; }
.scan__note { margin-left: auto; }
.scan__name { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color 250ms, box-shadow 250ms; }
.scan__name:focus-within { border-color: rgba(127,208,255,.8); box-shadow: 0 0 0 4px rgba(31,108,255,.25), 0 0 40px -6px rgba(23,167,255,.6); }
.scan__name label { color: rgba(235,241,255,.75); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.scan__name input { width: min(15rem, 46vw); border: 0; border-radius: 999px; padding: 10px 16px; background: #fff; color: var(--brand-navy); font: 600 .9375rem/1.2 var(--font-sans, var(--sans, system-ui)); }
.scan__name input::placeholder { color: #8e8e93; font-weight: 500; }
.scan__name input:focus { outline: none; }
.scan__shop { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid #ececf1; font-size: .75rem; font-weight: 600; color: #424245; min-width: 0; }
.scan__shop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan__shop i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .625rem; font-weight: 700; color: #fff; background: var(--brand-grad); letter-spacing: 0; }
.is-named .scan__shop span, .is-named .scan__sheet-head span [data-shop] { color: var(--brand-ink); }
.scan__sheet.is-ping { animation: sheet-ping 700ms cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-ping { 40% { box-shadow: 0 50px 120px -30px rgba(0,0,0,.7), 0 0 0 3px rgba(127,208,255,.9), 0 0 120px 0 rgba(31,108,255,.8); } }
@media (max-width: 56rem) {
  .scan__foot { gap: 10px; }
  .scan__name { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; border-radius: 22px; }
  .scan__name label { font-size: .8125rem; padding-left: 6px; }
  .scan__name input { width: 100%; min-width: 0; }
  .scan__note { display: none; }
  .p-sales .scan-on .scan__frame { padding-bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) { .scan__sheet.is-ping { animation: none; } }

/* Liens vers les pages de duel */
.duel__more { margin: 18px 0 0; font-weight: 600; text-align: center; }
.duel__more a { color: #1a5ae6; text-decoration: underline; text-underline-offset: 3px; }
.duel__all { margin-top: 14px; text-align: center; font-size: .9rem; }
.duel__all p { margin: 0 0 8px; color: #6e6e73; }
.duel__all div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.duel__all a { color: #1a5ae6; text-decoration: underline; text-underline-offset: 3px; }

/* Partage du résultat du guide */
.result__share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(15, 25, 76, .1); }
.result__share-label { font-size: .85rem; font-weight: 600; color: #6e6e73; margin-right: 4px; }
.result__copied { font-size: .85rem; color: #0a6b34; font-weight: 600; min-height: 1em; }

/* Calculateur : coût de la ressaisie */
.rs { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px; border: 1px solid rgba(15, 25, 76, .1); border-radius: 24px; background: #fff; box-shadow: 0 20px 60px rgba(31, 108, 255, .08); }
.rs__inputs { display: grid; gap: 18px; }
.rs__out { display: grid; gap: 12px; }
.rs__card { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: #f5f7ff; border: 1px solid rgba(31, 108, 255, .14); }
.rs__card span { font-size: .85rem; color: #6e6e73; font-weight: 600; }
.rs__card b { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -.02em; color: #0f194c; font-variant-numeric: tabular-nums; }
.rs__card small { color: #6e6e73; }
.rs__card--hl { background: linear-gradient(135deg, #17a7ff, #1f6cff 55%, #2b4fe0); border: 0; }
.rs__card--hl span, .rs__card--hl small { color: rgba(255, 255, 255, .85); }
.rs__card--hl b { color: #fff; }
.rs__note, .rs__more { grid-column: 1 / -1; margin: 0; font-size: .88rem; color: #6e6e73; }
.rs__more a { color: #1a5ae6; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .rs { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

/* Preuves sociales (affichées seulement si tools/proof.json contient des données réelles) */
.proof__stats { list-style: none; padding: 0; margin: 0 auto 28px; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.proof__stat { display: grid; gap: 4px; padding: 20px; border-radius: 18px; background: #f5f7ff; border: 1px solid rgba(31, 108, 255, .14); }
.proof__stat b { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; color: #1a5ae6; }
.proof__stat span { font-weight: 600; color: #0f194c; }
.proof__stat small { color: #6e6e73; }
.proof__quotes { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.proof__quote { margin: 0; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid rgba(15, 25, 76, .1); }
.proof__quote blockquote { margin: 0 0 12px; font-size: 1.05rem; }
.proof__quote figcaption { color: #6e6e73; font-size: .9rem; }
.rs input[type="range"] { width: 100%; }

/* Cookies : bannière et panneau (boutons de même poids visuel pour accepter et refuser) */
.ck { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding: 12px; display: flex; justify-content: center; pointer-events: none; }
.ck__card { pointer-events: auto; width: min(640px, 100%); background: #fff; color: #1d1d1f; border: 1px solid rgba(15, 25, 76, .14); border-radius: 20px; padding: 18px 20px; box-shadow: 0 24px 60px rgba(15, 25, 76, .22); display: grid; gap: 10px; }
.ck__title { margin: 0; font-weight: 700; color: #0f194c; }
.ck__text { margin: 0; font-size: .92rem; color: #4a4a50; }
.ck__link { font-size: .88rem; color: #1a5ae6; text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.ck__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ck__btn { flex: 1 1 140px; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid #1a5ae6; background: #fff; color: #1a5ae6; font-family: inherit; font-weight: 600; font-size: .92rem; line-height: 1; cursor: pointer; }
.ck__btn:hover { background: #f0f5ff; }
.ck__btn:focus-visible, .ck__open:focus-visible { outline: 3px solid rgba(31, 108, 255, .45); outline-offset: 2px; }
.ck__switch { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.ck__switch input { margin-top: 3px; width: 18px; height: 18px; accent-color: #1a5ae6; }
.ck__open { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media print { .ck { display: none; } }

/* Fonctionnalités : parcours + cartes */
.flow { list-style: none; padding: 0; margin: 0 auto 28px; max-width: 980px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: f; }
.flow li { position: relative; padding: 14px 12px 14px; border-radius: 14px; background: #f5f7ff; border: 1px solid rgba(31, 108, 255, .14); font-weight: 600; font-size: .9rem; color: #0f194c; display: grid; gap: 8px; }
.flow li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; color: #fff; background: linear-gradient(135deg, #17a7ff, #2b4fe0); }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #1f6cff; border-right: 2px solid #1f6cff; transform: translateY(-50%) rotate(45deg); z-index: 1; }
.feat { list-style: none; padding: 0; margin: 0 auto; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feat__card { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 25, 76, .1); box-shadow: 0 10px 30px rgba(31, 108, 255, .06); transition: transform .3s, box-shadow .3s; }
.feat__card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(31, 108, 255, .16); }
.feat__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px; color: #fff; background: linear-gradient(135deg, #17a7ff, #1f6cff 55%, #2b4fe0); }
.feat__ico svg { width: 24px; height: 24px; }
.feat__card h3 { margin: 0 0 6px; font-size: 1.1rem; color: #0f194c; }
.feat__card p { margin: 0; color: #4a4a50; font-size: .95rem; }
.feat__more { text-align: center; margin: 24px 0 0; font-weight: 600; }
.feat__more a { color: #1a5ae6; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow li::after { display: none; } }
@media (max-width: 560px) { .feat { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .feat__card { transition: none; } }

/* Menu mobile : toutes les pages */
.mm-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(15, 25, 76, .16); background: #fff; color: #0f194c; font-family: inherit; font-weight: 600; font-size: .875rem; line-height: 1; cursor: pointer; }
.mm-btn__bars { display: grid; gap: 4px; width: 16px; }
.mm-btn__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.mm-btn:focus-visible, .mm__x:focus-visible, .mm__a:focus-visible, .mm__g summary:focus-visible { outline: 3px solid rgba(31, 108, 255, .45); outline-offset: 2px; }
.mm-btn { display: inline-flex; flex: none; }
.header__actions, .header__inner, .wrap { gap: 8px; }
@media (min-width: 52.01rem) and (max-width: 75rem) { .p-compare .header__actions .btn--secondary { display: none; } }
@media (min-width: 52.01rem) {
  .mm.mm { inset: auto; top: 76px; right: max(16px, calc((100vw - 1200px) / 2)); width: 420px; max-height: calc(100vh - 96px); border-radius: 22px; border: 1px solid rgba(15, 25, 76, .1); box-shadow: 0 30px 80px -20px rgba(15, 25, 76, .35); overflow: hidden; }
  html.mm-open { overflow: auto; }
  .mm.mm .mm__top { padding: 14px 18px; }
  .mm.mm .mm__nav { padding: 4px 18px 16px; }
}
@media (max-width: 24rem) { .mm-btn__txt { display: none; } .mm-btn { padding: 0 12px; } }
html.mm-open { overflow: hidden; }
.mm { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #fbfbfd; opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease; }
.mm.is-in { opacity: 1; transform: none; }
.mm__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(15, 25, 76, .1); background: #fff; color: #0f194c; }
.mm__x { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(15, 25, 76, .16); background: #fff; color: #0f194c; font-family: inherit; font-weight: 600; font-size: .875rem; line-height: 1; cursor: pointer; }
.mm__nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 24px; }
.mm__list { display: grid; max-width: 560px; margin: 0 auto; }
.mm__a, .mm__g summary { display: block; padding: 16px 4px; border-bottom: 1px solid rgba(15, 25, 76, .08); font-size: 1.05rem; font-weight: 600; color: #0f194c; text-decoration: none; }
.mm__a[aria-current="page"] { color: #1a5ae6; }
.mm__g summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mm__g summary::-webkit-details-marker { display: none; }
.mm__g summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #1a5ae6; border-bottom: 2px solid #1a5ae6; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.mm__g[open] summary::after { transform: rotate(-135deg); }
.mm__sub { list-style: none; margin: 0; padding: 4px 0 8px 12px; border-bottom: 1px solid rgba(15, 25, 76, .08); }
.mm__sub .mm__a { font-size: .95rem; font-weight: 500; padding: 11px 4px; border-bottom: 0; color: #424245; }
.mm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(15, 25, 76, .1); background: #fff; }
.mm__foot .btn { flex: 1 1 100%; justify-content: center; }
.mm__small { color: #6e6e73; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mm { transition: none; transform: none; } .mm__g summary::after { transition: none; } }
@media print { .mm-btn, .mm { display: none !important; } }

/* ---------- Garantie « 1 mois satisfait ou remboursé » + accompagnement (tools/trust.py) ---------- */
.gx { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 26px; align-items: center; margin: 40px auto; max-width: 860px; padding: 26px 28px; border-radius: 26px; text-align: left;
  background: linear-gradient(180deg, #fff, #f6f9ff); border: 1px solid #d9e4ff; box-shadow: 0 1px 2px rgba(15,25,76,.05), 0 18px 44px -22px rgba(31,108,255,.35); position: relative; overflow: hidden; isolation: isolate; }
.gx::before { content: ""; position: absolute; inset: -40% auto auto -10%; width: 60%; height: 140%; z-index: -1; background: radial-gradient(closest-side, rgba(23,167,255,.14), transparent); }
.gx__seal { width: 128px; height: 128px; filter: drop-shadow(0 10px 18px rgba(31,108,255,.35)); }
@media (prefers-reduced-motion: no-preference) { .gx__seal { animation: gx-in .9s cubic-bezier(.2,.8,.2,1) both; } .gx__seal .gx__ring { transform-origin: 60px 60px; } }
@keyframes gx-in { from { transform: rotate(-25deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.gx__ring { font: 700 8.4px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif; letter-spacing: .02em; }
.gx__big { font: 800 17px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, sans-serif; letter-spacing: -.02em; }
.gx__small { font: 700 7px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; letter-spacing: .22em; }
.gx__k { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); display: flex; align-items: center; gap: 8px; }
.gx__shield { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-size: .7rem; }
.gx h2, .gx h3 { margin: 0 0 8px !important; font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem) !important; line-height: 1.12; letter-spacing: -.03em; color: var(--brand-navy) !important; max-width: none !important; background: none !important; -webkit-text-fill-color: currentColor; }
.gx p { margin: 0 0 10px; color: #3a3f55; font-size: 1rem; line-height: 1.5; }
.gx .gx__call { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #e3eaff; }
.gx__ph { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e9fbef; color: #12924a; }
.gx__call b { color: var(--brand-navy); }
@media (max-width: 600px) { .gx { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 22px 18px; margin: 28px 0; } .gx__k { justify-content: center; } .gx .gx__call { text-align: left; } .gx__seal { width: 112px; height: 112px; } }
.gx-mini { list-style: none; margin: 14px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .84rem; color: #4a4f63; }
.gx-mini li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.gx-mini li span { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #e9fbef; color: #12924a; font-size: .62rem; font-weight: 800; }
.th-cta .gx-mini { color: rgba(255,255,255,.85); justify-content: flex-start; grid-column: 1 / -1; margin: 0; }
.th-cta .gx-mini li span { background: rgba(255,255,255,.2); color: #fff; }