/* Dental Implant Machine: site design system
   Palette: closed DIM brand palette (Brand Guidelines V2.0). Type: Aspekta headlines, Inter body (website only).
   Motion: CSS for loops (aurora, tickers, card walls); GSAP + ScrollTrigger + Lenis for scroll choreography. */

@font-face { font-family: "Aspekta"; src: url("../fonts/Aspekta-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("../fonts/Aspekta-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("../fonts/Aspekta-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Aspekta"; src: url("../fonts/Aspekta-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #0F1857; --accent: #142ABF; --blue-2: #1B2F9B; --blue-3: #152FED;
  --hl-1: #203EFF; --hl-2: #416AFF; --hl-3: #6493FF; --hl-4: #90BBFF; --hl-5: #BAD7FF; --hl-6: #D9EAFF; --hl-7: #EAF4FF;
  --grey-1: #F1F1F1; --grey-2: #E6EBEA; --white: #FFFFFF;

  --ink: var(--navy);
  --ink-2: rgba(15, 24, 87, 0.74);
  --ink-3: rgba(15, 24, 87, 0.70);
  --line: rgba(15, 24, 87, 0.1);
  --line-d: rgba(186, 215, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.09);

  --f-head: "Aspekta", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 44px);
  --r: 22px;
  --r-sm: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(15, 24, 87, .05), 0 12px 40px rgba(15, 24, 87, .08);
  --shadow-lg: 0 2px 6px rgba(15, 24, 87, .06), 0 30px 80px rgba(15, 24, 87, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.06; letter-spacing: -0.028em; margin: 0; }
p { margin: 0; }
::selection { background: var(--hl-2); color: var(--white); }
:focus-visible { outline: 2px solid var(--hl-3); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); position: relative; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-xs { width: 15px; height: 15px; }

/* ---------- Surfaces ---------- */
.s-dark { position: relative; background: var(--navy); color: var(--white); isolation: isolate; overflow: hidden; }
.s-light { background: var(--white); }
.s-tint { background: linear-gradient(180deg, var(--hl-7) 0%, var(--white) 100%); }
.sec { padding-block: clamp(80px, 11vw, 150px); position: relative; }

/* Animated background: aurora + grid + grain */
.fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.fx-aurora i:nth-child(1) { width: 52vw; height: 52vw; left: -12vw; top: -18vw; background: radial-gradient(circle, var(--hl-1) 0%, transparent 65%); animation: drift1 22s var(--ease) infinite alternate; }
.fx-aurora i:nth-child(2) { width: 46vw; height: 46vw; right: -14vw; top: 10%; background: radial-gradient(circle, var(--accent) 0%, transparent 62%); animation: drift2 26s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { width: 40vw; height: 40vw; left: 30%; bottom: -24vw; background: radial-gradient(circle, var(--hl-3) 0%, transparent 60%); opacity: .35; animation: drift3 30s ease-in-out infinite alternate; }
.fx-strong .fx-aurora i { opacity: .75; }
@keyframes drift1 { to { transform: translate3d(14vw, 10vw, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-12vw, 8vw, 0) scale(.9); } }
@keyframes drift3 { to { transform: translate3d(-10vw, -8vw, 0) scale(1.2); } }
.fx-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(186, 215, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 215, 255, .06) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%); }
.fx-grain { position: absolute; inset: -50%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 9s steps(10) infinite; mix-blend-mode: overlay; }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, 3%); } 80% { transform: translate(3%, -2%); } }

/* ---------- Type helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; width: fit-content; padding: 8px 14px 8px 11px; border-radius: 99px; font: 600 .72rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-1); background: var(--hl-7); border: 1px solid rgba(65, 106, 255, .18); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(65, 106, 255, .18); }
.s-dark .eyebrow { color: var(--hl-4); background: rgba(144, 187, 255, .1); border-color: rgba(144, 187, 255, .22); }
.s-dark .eyebrow::before { box-shadow: 0 0 0 3px rgba(144, 187, 255, .2); }
.grad { background: linear-gradient(92deg, var(--white) 0%, var(--hl-5) 38%, var(--hl-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-l { background: linear-gradient(92deg, var(--hl-1) 0%, var(--hl-2) 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--ink-2); max-width: 640px; margin-top: 22px; }
.s-dark .lede { color: var(--hl-5); }
.shead { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.shead h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); margin-top: 18px; }
.lede-wide { max-width: none; white-space: nowrap; }
@media (max-width: 860px) { .lede-wide { white-space: normal; } }
.shead-c { margin-inline: auto; text-align: center; }
.shead-c .lede { margin-inline: auto; }
.split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; }
.split-head .shead { margin-bottom: clamp(40px, 6vw, 64px); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--hl-1); margin-top: 22px; }
.link-arrow .ico { transition: transform .35s var(--ease); }
.link-arrow:hover .ico, a:hover > .link-arrow .ico { transform: translateX(4px); }
.link-light { color: var(--hl-4); }
.badge { display: inline-flex; align-items: center; font: 600 .72rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; background: var(--hl-7); color: var(--hl-1); }
.s-dark .badge { background: rgba(144, 187, 255, .12); color: var(--hl-4); }

/* Word-split reveal (JS wraps words) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; will-change: transform; }
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-intro] { opacity: 0; transform: translateY(18px); }
.js.no-motion [data-reveal], .js.no-motion [data-intro] { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font: 600 .95rem/1 var(--f-body); letter-spacing: -.005em; white-space: nowrap; transition: transform .45s var(--ease), background .3s, box-shadow .45s var(--ease), border-color .3s, color .3s; }
.btn .ico { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 1rem; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .88rem; }
.btn-primary { color: var(--white); background: linear-gradient(135deg, var(--hl-2) 0%, var(--hl-1) 45%, var(--accent) 100%); box-shadow: 0 0 0 1px rgba(144, 187, 255, .25) inset, 0 10px 30px -8px rgba(32, 62, 255, .7); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(186, 215, 255, .45) inset, 0 16px 44px -8px rgba(32, 62, 255, .9); }
.btn-glass { color: var(--white); background: rgba(255, 255, 255, .07); border-color: rgba(186, 215, 255, .24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255, 255, 255, .13); border-color: rgba(186, 215, 255, .45); }
.btn-light { color: var(--navy); background: var(--white); }
.btn-light:hover { background: var(--hl-7); }
.btn-dark { color: var(--white); background: var(--navy); }
.btn-dark:hover { background: var(--blue-2); }
.play-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--white); color: var(--navy); display: grid; place-items: center; margin-left: -8px; }
.play-dot .ico { width: 13px; height: 13px; margin-left: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.actions-c { justify-content: center; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--white); transition: background .4s, backdrop-filter .4s, border-color .4s, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(15, 24, 87, .78); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-color: var(--line-d); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; gap: 30px; min-height: 84px; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 99px; font-size: .93rem; font-weight: 500; color: var(--hl-6); transition: color .25s, background .25s; }
.nav-link:hover, .nav-link.is-active { color: var(--white); background: rgba(255, 255, 255, .07); }
.nav-item { position: relative; }
.drop { position: absolute; top: 100%; left: 50%; padding-top: 14px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .45s var(--ease), visibility .3s; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop-panel { width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px; border-radius: 20px; background: rgba(15, 24, 87, .92); border: 1px solid var(--line-d); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 30px 80px -20px rgba(15, 24, 87, .8); }
.drop-link { display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px; transition: background .25s; }
.drop-link b { font: 600 .95rem/1.2 var(--f-head); letter-spacing: -.01em; color: var(--white); }
.drop-link span { font-size: .82rem; color: var(--hl-5); line-height: 1.35; }
.drop-link:hover { background: rgba(255, 255, 255, .07); }
.drop-link:nth-child(-n+2) { background: rgba(65, 106, 255, .12); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.nav-login { font-size: .88rem; color: var(--hl-5); }
.nav-login:hover { color: var(--white); }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-d); position: relative; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: var(--white); transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 26px; }
.menu-open .menu-btn span:first-child { top: 22px; transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { top: 22px; transform: rotate(-45deg); }
.mobile-panel { display: none; }

/* ---------- Heroes ---------- */
.hero { min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: center; padding-top: 120px; }
.hero-inner { width: 100%; flex: 1; display: flex; align-items: center; }
.hero-copy { max-width: 640px; position: relative; z-index: 2; padding-block: 40px 60px; }
.hero-title { font-size: clamp(2.7rem, 5.6vw, 5.1rem); font-weight: 600; margin-top: 24px; letter-spacing: -.035em; }
.hero-sub { margin-top: 26px; font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--hl-5); max-width: 560px; }
.hero-strip { margin: 18px 0 0; font-size: .92rem; font-weight: 500; color: var(--hl-5); letter-spacing: .01em; }
.hero-strip i { font-style: normal; opacity: .45; padding: 0 .45em; }
.hero-proof { display: flex; align-items: center; gap: 16px; margin-top: 40px; color: var(--hl-5); font-size: .92rem; }
.hero-proof b { color: var(--white); }
.avatars { display: flex; }
.avatars img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy); margin-left: -10px; }
.avatars img:first-child { margin-left: 0; }
.hero-ticker { position: relative; z-index: 3; }

/* Tilted infinite card wall */
.tilt { position: absolute; z-index: 1; top: -20%; right: -8%; width: 64%; height: 150%; perspective: 1800px; pointer-events: none; mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 4%, #000 22%, #000 78%, transparent 96%); mask-composite: intersect; -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 78%, transparent 96%); }
.tilt::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--navy) 0%, rgba(15, 24, 87, .6) 18%, transparent 42%); }
.tilt-plane { display: grid; grid-template-columns: repeat(3, 330px); gap: 26px; justify-content: center; height: 100%; transform: rotateX(20deg) rotateY(-10deg) rotateZ(-16deg) translateZ(0); transform-style: preserve-3d; }
.tilt-col { overflow: visible; }
.tilt-track { display: flex; flex-direction: column; gap: 26px; padding-bottom: 26px; animation: tiltUp 60s linear infinite; }
.tilt-col:nth-child(2) .tilt-track { animation-duration: 74s; animation-direction: reverse; margin-top: -140px; }
.tilt-col:nth-child(3) .tilt-track { animation-duration: 66s; margin-top: -60px; }
@keyframes tiltUp { to { transform: translate3d(0, -50%, 0); } }

/* Result card */
.rcard { display: grid; gap: 18px; padding: 22px; border-radius: var(--r); background: var(--white); color: var(--navy); box-shadow: var(--shadow-lg); border: 1px solid var(--line); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
a.rcard:hover { transform: translateY(-6px); box-shadow: 0 40px 90px -20px rgba(15, 24, 87, .3); }
.rcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rcard-name { display: block; font: 600 1.14rem/1.2 var(--f-head); letter-spacing: -.015em; }
.rcard-meta { font-size: .8rem; color: var(--ink-3); }
.rcard-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--hl-7); color: var(--hl-1); flex: none; transition: background .3s, color .3s, transform .5s var(--ease); }
a.rcard:hover .rcard-go { background: var(--hl-1); color: var(--white); transform: rotate(-45deg); }
.tilt .rcard-go { display: none; }
.rcard-ret { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcard-ret > div { padding: 14px; border-radius: var(--r-sm); background: var(--hl-7); }
.rcard-ret b { display: block; font: 700 2rem/1 var(--f-head); letter-spacing: -.03em; color: var(--hl-1); }
.rcard-ret .roi { background: var(--navy); }
.rcard-ret .roi b { color: var(--white); }
.rcard-ret small { display: block; margin-top: 8px; font-size: .74rem; line-height: 1.25; color: var(--ink-3); }
.rcard-ret .roi small { color: var(--hl-5); }
.rcard-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rcard-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); }
.rcard-chips .ico { color: var(--hl-1); }

/* Ticker */
.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--line-d); background: rgba(255, 255, 255, .03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; gap: 56px; padding: 22px 56px 22px 0; animation: marquee 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tk { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; font: 500 1.02rem/1 var(--f-head); letter-spacing: -.01em; }
.tk img { width: 18px; height: 18px; opacity: .8; }
.tk b { font-weight: 600; color: var(--white); }
.tk em { font-style: normal; color: var(--hl-4); }
.tk em.roi { color: var(--hl-5); opacity: .8; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Inner page hero */
.phero { padding: clamp(150px, 16vw, 200px) 0 clamp(130px, 13vw, 170px); text-align: center; }
.phero-inner { display: flex; flex-direction: column; align-items: center; }
.phero-mark { position: absolute; z-index: -1; width: min(720px, 70vw); right: -12%; top: 50%; translate: 0 -50%; opacity: .045; pointer-events: none; }
.phero-title { font-size: clamp(2.5rem, 5.4vw, 4.6rem); max-width: 1000px; margin-top: 22px; letter-spacing: -.035em; }
.phero-sub { margin-top: 24px; max-width: 700px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--hl-5); }
.crumbs { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-d); font-size: .84rem; color: var(--hl-5); }
.crumbs a:hover { color: var(--white); }
.crumbs span[aria-current] { color: var(--white); }
.crumbs .ico { opacity: .6; }
.hero .crumbs { margin-bottom: 4px; }
.pill { display: inline-flex; margin-top: 18px; padding: 8px 16px; border-radius: 99px; font-size: .84rem; font-weight: 600; color: var(--hl-4); background: rgba(65, 106, 255, .14); border: 1px solid rgba(144, 187, 255, .25); }

/* Mechanism bar overlapping the hero */
.mech-wrap { margin-top: -62px; position: relative; z-index: 5; }
.mech { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 10px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-lg); border: 1px solid var(--line); position: relative; }
.mech-item { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-right: 1px solid var(--line); }
.mech-item:last-of-type { border-right: 0; }
.mech-item .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--hl-7); color: var(--hl-1); }
.mech-item b { display: block; font: 600 1.06rem/1.2 var(--f-head); letter-spacing: -.01em; }
.mech-item span { font-size: .82rem; color: var(--ink-3); }
.mech .flag { position: absolute; top: -12px; right: 16px; }

/* ---------- Content blocks ---------- */
.pain { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.pain-l { position: sticky; top: 130px; }
.pain-l h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-top: 18px; }
.pain-l .btn { margin-top: 34px; }
.pain-r { display: grid; gap: 14px; }
.pain-3, .fail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fail-grid { grid-template-columns: repeat(4, 1fr); }
.pcard { position: relative; overflow: hidden; padding: 30px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pcard-no { font: 600 .82rem/1 var(--f-head); color: var(--hl-2); letter-spacing: .04em; }
.pcard h3 { font-size: 1.3rem; margin-top: 18px; }
.pcard p { margin-top: 10px; color: var(--ink-2); font-size: .96rem; }

/* Spotlight hover */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(65, 106, 255, .12), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.spot:hover::after { opacity: 1; }
.s-dark .spot::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(144, 187, 255, .16), transparent 60%); }

/* Gates */
.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; padding-top: 34px; }
.gates-rail { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.gates-rail i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--hl-3), var(--hl-1)); transform-origin: left; }
.js .gates-rail i { transform: scaleX(0); }
.gate { padding: 34px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.gate:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gate-top { display: flex; justify-content: space-between; align-items: center; }
.gate-no { font: 700 3.6rem/1 var(--f-head); letter-spacing: -.05em; background: linear-gradient(180deg, var(--hl-2), var(--hl-6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-tag { font: 600 .74rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.gate h3 { font-size: 2rem; margin-top: 22px; }
.gate > p { color: var(--ink-2); margin-top: 10px; }
.gate ul { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.gate li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.gate li .ico { color: var(--hl-1); margin-top: 4px; }
.gate-breaks { margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: var(--hl-7); font-size: .9rem; }
.gate-breaks b { color: var(--hl-1); margin-right: 4px; }
.gate .link-arrow { margin-top: auto; padding-top: 22px; }

/* Steps (dark) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; padding-top: 34px; }
.steps .gates-rail { background: var(--line-d); }
.step { padding: 28px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line-d); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .6s var(--ease), background .4s; }
.step:hover { transform: translateY(-6px); background: var(--glass-2); }
.step-no { font: 600 .78rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--hl-4); }
.step h3 { font-size: 1.35rem; margin-top: 18px; }
.step p { margin-top: 12px; color: var(--hl-5); font-size: .95rem; }

/* The million section */
.million { padding-block: clamp(100px, 13vw, 180px); }
.million-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.mega { font: 700 clamp(3.6rem, 14.5vw, 13.5rem)/.86 var(--f-head); letter-spacing: -.055em; margin-top: 26px; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--white) 0%, var(--hl-5) 55%, var(--hl-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 20px 60px rgba(32, 62, 255, .45)); }
.million-title { font-size: clamp(1.8rem, 3.6vw, 3rem); margin-top: 18px; max-width: 900px; }
.million-copy { max-width: 720px; margin-top: 26px; color: var(--hl-5); font-size: 1.08rem; }
.million-note { margin-top: 16px; color: var(--white); font-weight: 600; }
.plaques { display: grid; gap: 18px; margin-top: clamp(56px, 7vw, 90px); transform: rotate(-2.5deg) scale(1.04); }
.plaque-row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.plaque-track { display: flex; width: max-content; gap: 18px; padding-right: 18px; animation: marquee 90s linear infinite; }
.plaque-row.rev .plaque-track { animation-direction: reverse; animation-duration: 105s; }
.plaque-row:nth-child(3) .plaque-track { animation-duration: 98s; }
.plaque-track img { width: clamp(260px, 26vw, 380px); height: auto; aspect-ratio: 600 / 336; object-fit: cover; border-radius: 16px; border: 1px solid var(--line-d); box-shadow: 0 20px 50px -20px rgba(15, 24, 87, .9); transition: transform .6s var(--ease); }
.plaque-track img:hover { transform: scale(1.04); }
.plaques:hover .plaque-track { animation-play-state: paused; }
.million-videos { margin-top: clamp(80px, 10vw, 130px); }
.million-videos h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); max-width: 560px; }
.million-videos .split-head { margin-bottom: 34px; }
.million-videos .link-arrow { margin-top: 0; }

/* Video cards */
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vcard { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; background: var(--navy); color: var(--white); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.s-light .vcard, .s-tint .vcard { border-color: transparent; box-shadow: var(--shadow-lg); }
.vcard:hover { transform: translateY(-8px); box-shadow: 0 40px 90px -24px rgba(15, 24, 87, .6); }
.vcard-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.vcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.vcard:hover .vcard-media img { transform: scale(1.06); }
.vplay { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: var(--navy); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: pulse 2.6s ease-out infinite; }
.vplay .ico { width: 22px; height: 22px; margin-left: 3px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 80%, 100% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); } }
.vdur { position: absolute; right: 12px; bottom: 12px; font-size: .74rem; padding: 4px 9px; border-radius: 99px; background: rgba(15, 24, 87, .8); }
.vcard-body { display: grid; gap: 6px; padding: 20px; flex: 1; align-content: start; }
.vquote { font-size: .95rem; line-height: 1.5; color: var(--hl-6); margin-bottom: 10px; }
.vcard-body b { font: 600 1.02rem/1.2 var(--f-head); }
.vcard-body small { color: var(--hl-5); font-size: .8rem; }

/* Quote cards */
.qmono { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--hl-6, #EAF4FF); color: var(--accent, #142ABF); font: 600 1.05rem/1 var(--f-head); }
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qcard { margin: 0; padding: 30px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line-d); display: flex; flex-direction: column; gap: 20px; }
.qcard-l { background: var(--white); border-color: var(--line); box-shadow: var(--shadow); }
.qmark { width: 30px; height: 30px; color: var(--hl-2); }
.qcard blockquote { margin: 0; font: 500 1.08rem/1.5 var(--f-head); letter-spacing: -.01em; flex: 1; }
.qcard figcaption { display: flex; align-items: center; gap: 12px; }
.qcard figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.qcard figcaption b { display: block; font-size: .95rem; }
.qcard figcaption small { color: var(--ink-3); font-size: .82rem; }
.qcard:not(.qcard-l) figcaption small { color: var(--hl-5); }

/* Products */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.prod { padding: clamp(30px, 4vw, 48px); border-radius: 28px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.prod:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.prod-dark { color: var(--white); border: 1px solid transparent; background: radial-gradient(120% 90% at 100% 0%, rgba(65, 106, 255, .45), transparent 55%), linear-gradient(160deg, var(--blue-2), var(--navy)) padding-box, linear-gradient(140deg, var(--hl-3), rgba(144, 187, 255, .1), var(--hl-1)) border-box; }
.who { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 13px; border-radius: 99px; font-size: .82rem; font-weight: 600; background: var(--hl-7); color: var(--hl-1); }
.prod-dark .who { background: rgba(255, 255, 255, .1); color: var(--hl-4); }
.prod h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.prod-line { font-size: 1.12rem; color: var(--ink-2); }
.prod-dark .prod-line { color: var(--hl-5); }
.prod ul { list-style: none; margin: 6px 0 12px; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.prod-dark ul { border-color: var(--line-d); }
.prod li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); }
.prod-dark li { color: var(--hl-5); }
.prod li b { display: block; color: var(--navy); font-weight: 600; }
.prod-dark li b { color: var(--white); }
.prod li .ico { margin-top: 3px; color: var(--hl-1); }
.prod-dark li .ico { color: var(--hl-4); }
.prod .btn { margin-top: auto; align-self: flex-start; }
.duo-note { text-align: center; margin-top: 28px; color: var(--ink-3); }

/* Split layouts */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-top: 18px; }
.split-top { align-items: start; }
.prose { display: grid; gap: 18px; color: var(--ink-2); font-size: 1.04rem; }
.prose .big { font: 500 clamp(1.3rem, 2vw, 1.6rem)/1.4 var(--f-head); color: var(--navy); letter-spacing: -.015em; }
.callout { display: flex; gap: 14px; padding: 22px; margin-top: 8px; border-radius: var(--r-sm); background: var(--hl-7); color: var(--navy); font-weight: 500; }
.callout .ico { color: var(--hl-1); width: 24px; height: 24px; }

/* Systems grid */
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sys { padding: 30px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line-d); display: flex; flex-direction: column; transition: transform .6s var(--ease), background .4s, border-color .4s; }
.sys:hover { transform: translateY(-6px); background: var(--glass-2); border-color: rgba(144, 187, 255, .3); }
.sys-top { display: flex; justify-content: space-between; align-items: center; }
.sys-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--hl-2), var(--accent)); color: var(--white); box-shadow: 0 10px 30px -10px rgba(32, 62, 255, .8); }
.sys-ico .ico { width: 24px; height: 24px; }
.sys h3 { font-size: 1.45rem; margin-top: 26px; }
.sys p { color: var(--hl-5); margin-top: 10px; font-size: .94rem; }
.sys .link-arrow { margin-top: auto; padding-top: 20px; }

/* Comparison tables */
.compare { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.compare table { width: 100%; min-width: 660px; border-collapse: collapse; }
.compare th, .compare td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; vertical-align: middle; }
.compare thead th { font: 600 1rem/1.2 var(--f-head); background: var(--hl-7); }
.compare thead th.us { background: var(--navy); color: var(--white); }
.compare td.us { font-weight: 600; }
.compare tr:last-child td { border-bottom: 0; }
.compare-prod td:not(:first-child), .compare-prod th:not(:first-child) { text-align: center; }
.tick { color: var(--hl-1); margin-inline: auto; width: 22px; height: 22px; }
.dash-x { color: var(--ink-3); font-size: .82rem; }
.compare-prod + .actions { margin-top: 40px; }

/* Fit + includes */
.fit-list { display: grid; gap: 14px; }
.fit { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); font: 500 1.1rem/1.45 var(--f-head); letter-spacing: -.01em; }
.fit .ico { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--hl-1); color: var(--white); margin-top: 1px; }
.inc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.inc { padding: 30px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line-d); display: flex; flex-direction: column; transition: transform .6s var(--ease), background .4s; }
.inc:hover { transform: translateY(-6px); background: var(--glass-2); }
.inc-no { font: 600 .82rem/1 var(--f-head); color: var(--hl-4); }
.inc h3 { font-size: 1.35rem; margin-top: 22px; }
.inc p { color: var(--hl-5); margin-top: 10px; font-size: .94rem; }
.inc .link-arrow { margin-top: auto; padding-top: 18px; }
.inc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inc-row { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: var(--r-sm); background: var(--hl-7); font-weight: 500; }
.inc-row .ico { color: var(--hl-1); }

/* Dashboard mock */
.dash { border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-d); padding: 12px; box-shadow: 0 50px 120px -40px rgba(32, 62, 255, .55); position: relative; }
.dash-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px 12px; }
.dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(186, 215, 255, .3); }
.dash-bar span { margin-left: 12px; font-size: .76rem; color: var(--hl-5); padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.dash-body { display: grid; grid-template-columns: 150px 1fr; gap: 12px; border-radius: 14px; overflow: hidden; }
.dash-side { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 14px; background: rgba(15, 24, 87, .6); font-size: .82rem; color: var(--hl-5); }
.dash-side img { margin-bottom: 14px; }
.dash-side span { padding: 8px 10px; border-radius: 8px; }
.dash-side .on { background: rgba(65, 106, 255, .25); color: var(--white); }
.dash-main { display: grid; gap: 12px; }
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-tile { padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-d); }
.dash-tile small { font-size: .72rem; color: var(--hl-5); }
.sk { display: block; height: 18px; margin-top: 10px; border-radius: 6px; width: 70%; background: linear-gradient(90deg, rgba(144, 187, 255, .18), rgba(144, 187, 255, .42), rgba(144, 187, 255, .18)); background-size: 200% 100%; animation: shimmer 2.4s linear infinite; }
.dash-tile:nth-child(2n) .sk { width: 52%; }
.dash-tile:nth-child(5) .sk, .dash-tile:nth-child(6) .sk { background: linear-gradient(90deg, rgba(65, 106, 255, .35), rgba(144, 187, 255, .75), rgba(65, 106, 255, .35)); background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.dash-chart { padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-d); height: 190px; }
.dash-chart svg { width: 100%; height: 100%; }
.dash-line { fill: none; stroke: var(--hl-4); stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 3.2s var(--ease) .4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.dash-cap { margin-top: 12px; font-size: .78rem; color: var(--hl-5); text-align: center; }

/* Below-hero video stage. Chayden's walkthrough plays in place rather than in a modal,
   because the top of the page is now hero then video, which is the order the VSL was
   written for. The overlay is decorative and pointer-transparent, so if the script never
   runs the native controls underneath are still reachable. */
.watch { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid rgba(144, 187, 255, .14); }
.watch-inner { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.watch-inner > * { min-width: 0; }
.watch-copy h2 { font-size: clamp(1.95rem, 3.5vw, 3rem); margin-top: 20px; letter-spacing: -.03em; }
.watch-copy .lede { margin-top: 22px; }
.watch-copy .actions { margin-top: 32px; align-items: center; }
.watch-copy .actions .link-arrow { margin-top: 0; }
.watch-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 0; border-top: 1px solid rgba(144, 187, 255, .22); }
.watch-facts > div { padding: 16px 18px; border-bottom: 1px solid rgba(144, 187, 255, .22); border-right: 1px solid rgba(144, 187, 255, .22); }
.watch-facts > div:first-child { padding-left: 0; }
.watch-facts > div:last-child { border-right: 0; }
.watch-facts dt { font: 600 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--f-head); letter-spacing: -.02em; color: var(--white); }
.watch-facts dd { margin: 6px 0 0; font-size: .86rem; color: var(--hl-5); }
/* Ian wants this band blue, not white, but it was the same navy as the hero with only the
   ticker between them. So it steps DOWN to the deep ground the video frame already uses:
   two distinct blues read as two sections, where one blue read as one long one. */
.watch-deep { background: #050A2A; border-top: 1px solid rgba(144, 187, 255, .18); }
.watch-deep .watch-frame { border-color: rgba(144, 187, 255, .28); }

/* One fact, so it gets to be a statement rather than a cell in a table of three. The old
   treatment left it dim and boxed in on three sides. */
.watch-facts { grid-template-columns: auto; justify-content: start; border-top: 0; margin-top: 34px; }
.watch-facts > div { padding: 2px 0 2px 20px; border: 0; border-left: 3px solid var(--hl-2); }
.watch-facts dt { font-size: clamp(1.5rem, 2.2vw, 1.95rem); color: var(--white); }
.watch-facts dd { margin-top: 4px; font-size: .95rem; color: var(--hl-4); letter-spacing: .01em; }
/* Sits between the headline and the blurb, carrying the two facts that used to be a table. */
.watch-since { margin: 20px 0 0; padding-left: 18px; border-left: 3px solid var(--hl-2);
               font: 500 1.05rem/1.5 var(--f-body); color: var(--hl-4); letter-spacing: .01em; }
.watch-since b { color: var(--white); font-weight: 600; }
.watch-copy .lede { margin-top: 18px; }
/* Mission and vision were two floating paragraphs with a small pill each. They are the two
   statements the company is built on, so they get said plainly. */
.mv-item { padding: clamp(26px, 2.6vw, 38px); border-radius: var(--r); background: rgba(144, 187, 255, .06); border: 1px solid rgba(144, 187, 255, .20); }
.mv-no { font: 600 .78rem/1 var(--f-head); letter-spacing: .14em; color: var(--hl-3); }
.mv-label { margin: 10px 0 0; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.02em; color: var(--white); }
.mv-label::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--hl-2); }
.mv-item .mv-quote { margin-top: 18px; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; color: var(--hl-5); }
/* Replaces links scattered through 2,400 words of prose: every onward route in one block. */
.nextlinks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px;
             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nextlinks a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
               padding: 16px 18px; border-radius: var(--r); background: var(--white);
               border: 1px solid var(--line); box-shadow: var(--shadow);
               font: 600 .98rem/1.3 var(--f-head); color: var(--navy);
               transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.nextlinks a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.nextlinks .ico { width: 16px; height: 16px; flex: none; color: var(--hl-1); }
.watch-stage { margin: 0; }
.watch-frame { position: relative; border-radius: var(--r); overflow: hidden; background: #050a2a; border: 1px solid rgba(144, 187, 255, .2); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); }
.watch-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #050a2a; }
.watch-over[hidden] { display: none; }   /* a display rule here outranks the UA [hidden] style, so the play button sat on top of the playing video */
.watch-over { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; background: linear-gradient(180deg, rgba(15, 24, 87, .10), rgba(15, 24, 87, .45)); transition: opacity .4s var(--ease); }
.watch-play { pointer-events: auto; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--white); color: var(--navy); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: pulse 2.6s ease-out infinite; }
.watch-play .ico { width: 26px; height: 26px; margin-left: 4px; }
.watch-dur { position: absolute; right: 14px; bottom: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 10, 42, .72); font: 600 .78rem/1 var(--f-body); letter-spacing: .04em; color: var(--white); }
.watch-stage figcaption { margin-top: 16px; font-size: .86rem; color: var(--hl-5); }
@media (max-width: 980px) { .watch-inner { grid-template-columns: 1fr; } .watch-stage { order: -1; } }
@media (max-width: 760px) {
  .watch-facts { grid-template-columns: 1fr; }
  .watch-facts > div { border-right: 0; padding-left: 0; padding-right: 0; }
}

/* Why DIM: the four differentiators, in the order the positioning framework ranks them */
.why-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.why { position: relative; overflow: hidden; padding: clamp(20px, 1.8vw, 26px); border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.why:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-no { font: 600 .82rem/1 var(--f-head); color: var(--hl-2); letter-spacing: .04em; }
.why h3 { font-size: clamp(1.02rem, 1.15vw, 1.16rem); margin-top: 14px; letter-spacing: -.02em; text-wrap: balance; }
.why p { margin-top: 10px; color: var(--ink-2); font-size: .88rem; line-height: 1.55; }
@media (max-width: 1180px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

.leader-quote { margin: 28px 0 0; padding-left: 20px; border-left: 3px solid var(--hl-3); font: 500 clamp(1.05rem, 1.5vw, 1.22rem)/1.5 var(--f-head); letter-spacing: -.01em; color: var(--navy); }

/* Leadership feature */
.leader-feature { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.leader-copy h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-top: 18px; }
.mission { margin: 34px 0 0; padding: 26px 28px; border-radius: var(--r); background: var(--hl-7); font: 500 1.14rem/1.5 var(--f-head); letter-spacing: -.01em; position: relative; }
.mission cite { display: block; margin-top: 14px; font: 600 .78rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--hl-1); }
.leader-sign { margin-top: 26px; }
.leader-sign b { display: block; font: 600 1.2rem/1.2 var(--f-head); }
.leader-sign span { color: var(--ink-3); }
.leader-photo { position: relative; aspect-ratio: 1; max-width: 520px; justify-self: center; width: 100%; }
.leader-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 140deg, var(--hl-1), var(--hl-5), var(--accent), var(--hl-3), var(--hl-1)); animation: spin 18s linear infinite; }
.leader-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--white); }
@keyframes spin { to { transform: rotate(360deg); } }
.leader-photo img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: cover; object-position: center 20%; border-radius: 50%; }

/* Leaders grid (about) */
.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.leader { border-radius: var(--r); overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.leader-img { aspect-ratio: 4 / 3.4; background: linear-gradient(160deg, var(--blue-2), var(--navy)); display: grid; place-items: center; overflow: hidden; }
.leader-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.initials { font: 700 4rem/1 var(--f-head); color: var(--hl-5); letter-spacing: -.04em; }
.leader-body { padding: 24px; }
.leader-body h3 { font-size: 1.35rem; }
.leader-body > span { color: var(--hl-1); font-weight: 500; }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); }
.mv-quote { margin-top: 22px; font: 500 clamp(1.5rem, 2.6vw, 2.2rem)/1.3 var(--f-head); letter-spacing: -.02em; }
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.value { padding: 26px; border-radius: var(--r); background: var(--hl-7); }
.value h3 { font-size: 1.3rem; margin-top: 16px; }
.value p { margin-top: 10px; color: var(--ink-2); font-size: .92rem; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.faq-wrap > div:first-child { position: sticky; top: 130px; }
.faq { display: grid; gap: 12px; }
.faq-item { border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); transition: box-shadow .4s; }
.faq-item[open] { box-shadow: var(--shadow-lg); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 26px; font: 600 1.08rem/1.35 var(--f-head); letter-spacing: -.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--hl-7); transition: background .3s, transform .5s var(--ease); }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; background: var(--hl-1); translate: -50% -50%; transition: transform .5s var(--ease), background .3s; }
.faq-ico::after { transform: rotate(90deg); }
.faq-item[open] .faq-ico { background: var(--hl-1); transform: rotate(180deg); }
.faq-item[open] .faq-ico::before, .faq-item[open] .faq-ico::after { background: var(--white); }
.faq-item[open] .faq-ico::after { transform: rotate(0deg); }
.faq-a { padding: 0 26px 24px; color: var(--ink-2); }

/* Case study pieces */
.hero-cs .hero-copy { max-width: 600px; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-grid .rcard { padding: 26px; }
.cs-grid .rcard-ret b { font-size: 2.4rem; }
.cs-grid + .flag { margin-top: 18px; }
.formula-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formula { padding: clamp(28px, 4vw, 44px); border-radius: 26px; background: var(--glass); border: 1px solid var(--line-d); display: grid; gap: 20px; }
.formula-hl { background: linear-gradient(160deg, rgba(65, 106, 255, .28), rgba(255, 255, 255, .04)); border-color: rgba(144, 187, 255, .35); }
.formula .badge { width: fit-content; }
.eq, .eq-num { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 600 1.2rem/1.2 var(--f-head); }
.eq i, .eq-num i { font-style: normal; color: var(--hl-4); }
.eq span { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.eq-num { font-size: 1.05rem; color: var(--hl-5); }
.eq-num b { margin-left: auto; font: 700 clamp(2.6rem, 5vw, 3.8rem)/1 var(--f-head); letter-spacing: -.04em; color: var(--white); }
.formula p { color: var(--hl-5); }
.formula-l { background: var(--white); border-color: var(--line); box-shadow: var(--shadow); }
.formula-l .eq-num { color: var(--ink-2); }
.formula-l .eq-num b { color: var(--hl-1); }
.formula-l.formula-hl { background: var(--navy); color: var(--white); }
.formula-l.formula-hl .eq-num { color: var(--hl-5); }
.formula-l.formula-hl .eq-num b { color: var(--white); }
.formula-l p { color: var(--ink-2); }
.formula-l.formula-hl p { color: var(--hl-5); }
.cdhero { padding: 140px 0 70px; }
.cdhero .crumbs { margin-bottom: 26px; }
.cd-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.cd-title { text-align: left; margin-top: 0; }
.cd-sub { text-align: left; }
.cd-big { text-align: right; }
.cd-big b { display: block; font: 700 clamp(4rem, 10vw, 8rem)/.9 var(--f-head); letter-spacing: -.05em; background: linear-gradient(180deg, var(--white), var(--hl-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-big span { color: var(--hl-5); }
.cd-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 50px; }
.cd-stat { padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .95); color: var(--navy); }
.cd-stat small { display: block; font-size: .78rem; color: var(--ink-3); }
.cd-stat b { display: block; margin-top: 12px; font: 700 1.7rem/1 var(--f-head); letter-spacing: -.03em; }
.cd-stat-hl { background: linear-gradient(135deg, var(--hl-2), var(--accent)); color: var(--white); }
.cd-stat-hl small { color: var(--hl-6); }
.story { padding: clamp(30px, 5vw, 60px); border-radius: 28px; background: var(--white); border: 1px dashed rgba(65, 106, 255, .4); }
.story h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 16px 0; max-width: 760px; }
.story p { color: var(--ink-2); max-width: 760px; }
.cs-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Diagnostic */
.diag { display: grid; grid-template-columns: .85fr 1.15fr; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: var(--white); }
.diag-intro { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--white); }
.diag-intro-in { position: relative; padding: clamp(30px, 4vw, 54px); display: grid; gap: 18px; align-content: start; }
.diag-intro h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.diag-intro p { color: var(--hl-5); }
.diag-steps { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.diag-steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; font-weight: 500; }
.diag-steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: rgba(144, 187, 255, .16); color: var(--hl-4); }
.promise { padding-left: 16px; border-left: 2px solid var(--hl-3); font-size: .95rem; }
.diag-body { padding: clamp(30px, 4vw, 54px); min-height: 500px; display: grid; align-content: start; gap: 22px; }
.progress { height: 6px; border-radius: 99px; background: var(--hl-7); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hl-3), var(--hl-1)); transition: width .6s var(--ease); }
.q-count { font: 600 .76rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.q-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.options { display: grid; gap: 10px; }
.option { text-align: left; padding: 18px 20px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--white); color: var(--navy); font-weight: 500; display: flex; justify-content: space-between; align-items: center; transition: border-color .25s, background .25s, transform .4s var(--ease); }
.option::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); transition: border-color .25s, background .25s, box-shadow .25s; }
.option:hover { border-color: var(--hl-3); background: var(--hl-7); transform: translateX(4px); }
.option:hover::after { border-color: var(--hl-1); }
.option.is-picked { border-color: var(--hl-1); background: var(--hl-7); }
.option.is-picked::after { background: var(--hl-1); border-color: var(--hl-1); box-shadow: inset 0 0 0 3px var(--white); }
.diag-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--ink-2); font-weight: 500; }
.link-btn:hover { color: var(--hl-1); }
.result-gate { font: 700 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--f-head); letter-spacing: -.04em; }
.result-copy { color: var(--ink-2); font-size: 1.06rem; }
.plan-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-form input { min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--line); font: inherit; color: var(--navy); background: var(--white); }
.plan-form input:focus { border-color: var(--hl-1); box-shadow: 0 0 0 4px rgba(32, 62, 255, .32); }
.plan-form .btn { grid-column: 1 / -1; }
.fine { font-size: .82rem; color: var(--ink-3); }

/* Book */
.book { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.book-l h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-top: 18px; }
.book-list { list-style: none; margin: 34px 0 40px; padding: 0; display: grid; gap: 14px; }
.book-list li { display: flex; gap: 18px; padding: 22px; border-radius: var(--r); background: var(--hl-7); }
.book-no { font: 700 1.4rem/1 var(--f-head); color: var(--hl-2); }
.book-list b { font: 600 1.12rem/1.3 var(--f-head); }
.book-list p { color: var(--ink-2); margin-top: 6px; font-size: .95rem; }
.book-l .qgrid { grid-template-columns: 1fr; }
.book-r { position: sticky; top: 120px; }
.book-embed { padding: 28px; border-radius: 28px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 20px; }
.book-head { display: flex; justify-content: space-between; align-items: baseline; }
.book-head b { font: 600 1.3rem/1 var(--f-head); }
.book-head span { font-size: .82rem; color: var(--ink-3); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-h { text-align: center; font-size: .75rem; color: var(--ink-3); font-weight: 600; }
.cal-d { aspect-ratio: 1; border-radius: 50%; background: var(--grey-1); }
.cal-d.open { background: var(--hl-6); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slots span { height: 46px; border-radius: 12px; border: 1.5px solid var(--hl-6); }
.book-alt { margin-top: 16px; text-align: center; color: var(--ink-3); }
.book-alt a { color: var(--hl-1); font-weight: 600; }

/* Reviews band */
.reviews-band { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; padding: clamp(30px, 5vw, 56px); border-radius: 28px; background: var(--hl-7); }
.reviews-band h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 14px 0 8px; }
.reviews-band p { color: var(--ink-2); }

/* CTA band */
.cta-sec { padding: 0 0 clamp(80px, 10vw, 130px); background: var(--white); }
.cta { border-radius: 34px; padding: clamp(60px, 9vw, 120px) var(--gutter); text-align: center; }
.cta-mark { position: absolute; z-index: -1; width: 520px; left: -120px; bottom: -180px; opacity: .06; }
.cta-inner { max-width: 880px; margin: 0 auto; }
.cta h2 { font-size: clamp(2.2rem, 4.8vw, 4rem); margin-top: 20px; }
.cta p { color: var(--hl-5); margin: 22px auto 0; max-width: 620px; font-size: 1.1rem; }

/* Footer */
.footer { padding: clamp(70px, 9vw, 110px) 0 0; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand img { height: 46px; width: auto; }
.foot-brand p { margin: 20px 0 24px; color: var(--hl-5); max-width: 320px; }
.footer h4 { font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-4); margin-bottom: 20px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer ul a { color: var(--hl-6); font-size: .94rem; transition: color .25s; }
.footer ul a:hover { color: var(--white); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 70px; padding: 26px 0; border-top: 1px solid var(--line-d); font-size: .84rem; color: var(--hl-5); }
.foot-word { font: 700 clamp(3rem, 11.5vw, 11rem)/.8 var(--f-head); letter-spacing: -.05em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(186, 215, 255, .16); margin-top: 10px; padding-bottom: 20px; user-select: none; overflow: hidden; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(15, 24, 87, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modal[hidden] { display: none; }
.modal-inner { width: min(1100px, 100%); position: relative; }
.modal-frame { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 18px; overflow: hidden; background: var(--navy); box-shadow: 0 60px 140px -40px rgba(32, 62, 255, .6); }
.modal-frame iframe, .modal-frame video { width: 100%; height: 100%; border: 0; }
.modal-close { position: absolute; top: -54px; right: 0; padding: 10px 18px; border-radius: 99px; border: 0; background: var(--white); color: var(--navy); font-weight: 600; }

/* Review mode (?review) */
.flag { display: none; }
body.review .flag { display: inline-block; font: 600 .7rem/1.3 var(--f-body); letter-spacing: .01em; text-transform: none; background: var(--hl-5); color: var(--navy); padding: 4px 8px; border-radius: 6px; vertical-align: middle; }
body.review .needs-ruling { outline: 2px dashed var(--hl-2); outline-offset: 5px; }
.review-banner { display: none; }
body.review .review-banner { display: block; position: fixed; bottom: 16px; left: 50%; translate: -50% 0; z-index: 90; padding: 10px 18px; border-radius: 99px; background: var(--hl-5); color: var(--navy); font-size: .84rem; font-weight: 600; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav, .nav-login { display: none; }
  .menu-btn { display: block; }
  .header-cta { margin-left: auto; }
  .mobile-panel { display: block; position: fixed; inset: 84px 0 0; background: var(--navy); overflow-y: auto; padding: 20px 0 40px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s, transform .5s var(--ease), visibility .35s; }
  .menu-open .mobile-panel { opacity: 1; visibility: visible; transform: none; }
  .menu-open .site-header { background: var(--navy); }
  .m-link { display: block; padding: 16px 0; font: 600 1.4rem/1.2 var(--f-head); border-bottom: 1px solid var(--line-d); }
  .m-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line-d); }
  .m-sub a { padding: 8px 0; color: var(--hl-5); font-size: .95rem; }
  .m-cta { width: 100%; margin-top: 26px; }
  .vgrid, .inc-grid, .fail-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(3, 1fr); }
  .cd-stats { grid-template-columns: repeat(3, 1fr); }
  .tilt { width: 72%; right: -22%; }
}
@media (max-width: 900px) {
  .pain, .split, .faq-wrap, .leader-feature, .book, .diag, .mv, .duo, .formula-grid { grid-template-columns: 1fr; }
  .pain-l, .faq-wrap > div:first-child, .book-r { position: static; }
  .gates, .pain-3, .qgrid, .sys-grid, .cs-grid, .leaders { grid-template-columns: 1fr; }
  .mech { grid-template-columns: 1fr 1fr; }
  .mech-item:nth-of-type(2) { border-right: 0; }
  .mech-item:nth-of-type(-n+2) { border-bottom: 1px solid var(--line); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .hero { min-height: auto; padding-top: 110px; }
  .hero-copy { padding-block: 30px 50px; }
  .tilt { position: absolute; width: 150%; right: -60%; top: -10%; height: 120%; opacity: .28; }
  .tilt::before { background: linear-gradient(90deg, var(--navy) 0%, rgba(15, 24, 87, .3) 60%); }
  .leader-photo { max-width: 380px; }
  .cd-big { text-align: left; }
}
@media (max-width: 640px) {
  .header-inner { min-height: 70px; gap: 12px; }
  .brand img { height: 32px; }
  .header-cta .btn { display: none; }
  .mobile-panel { inset: 70px 0 0; }
  .hero-title { font-size: 2.35rem; }
  .phero-title { font-size: 2.2rem; }
  .actions .btn { width: 100%; }
  .vgrid, .inc-grid, .fail-grid, .steps, .values, .inc-list, .cd-stats, .plan-form { grid-template-columns: 1fr; }
  .mech { grid-template-columns: 1fr; }
  .mech-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .mech-item:last-of-type { border-bottom: 0; }
  /* The footer stacked 22 links into one column, nearly two and a half phone screens on
     every page of the site. The three sections collapse on a phone and open on a tap.
     Every link stays in the HTML, which is what matters for search; it is the thumb that
     no longer has to travel past all of them. */
  .foot-top { grid-template-columns: 1fr; gap: 0; }
  .foot-brand { padding-bottom: 22px; }
  .foot-brand p { margin: 14px 0 18px; }
  .foot-acc { border-top: 1px solid rgba(144, 187, 255, .16); }
  .foot-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center;
                      justify-content: space-between; padding: 15px 0; }
  .foot-acc summary::-webkit-details-marker { display: none; }
  .foot-acc summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px;
                             border-right: 2px solid var(--hl-4); border-bottom: 2px solid var(--hl-4);
                             transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
  .foot-acc[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
  .foot-acc summary h4 { margin: 0; }
  .foot-acc ul { padding-bottom: 10px; }
  .foot-acc a { padding-block: 10px; }
  .dash-body { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-tiles { grid-template-columns: 1fr 1fr; }
  .plaque-track img { width: 220px; }
  .m-sub { grid-template-columns: 1fr; }
  .eq-num b { margin-left: 0; width: 100%; }
  .hero-proof { flex-direction: column; align-items: flex-start; }
}
/* ---------- Refinements after first render review ---------- */
/* Card wall: fade on both axes so it never sits behind the nav or shows a hard edge */
.tilt { top: 0; height: 130%; }
.tilt, .tilt { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 34%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 34%); mask-composite: intersect; }
.tilt::before { display: none; }
/* Keep nav legible over moving content */
.site-header::before { content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(15, 24, 87, .9) 0%, rgba(15, 24, 87, 0) 100%); transition: opacity .4s; }
.site-header.is-scrolled::before { opacity: 0; }
/* Gradient text is applied per word, so avoid a white start on each word */
.grad { background: linear-gradient(92deg, var(--hl-5) 0%, var(--hl-4) 50%, var(--hl-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.leader-photo { max-width: min(520px, 100%); }
.foot-word { font-size: clamp(2.2rem, 9vw, 8.6rem); }
.leader-feature > * { min-width: 0; }
/* The ring spins; clip it so its rotating box never widens the page */
.leader-photo { overflow: hidden; border-radius: 50%; }
@media (max-width: 900px) {
  .leader-photo { width: min(380px, calc(100vw - 2 * var(--gutter))); max-width: none; }
  .tilt { opacity: .14; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
  .leader-photo { max-width: min(380px, 100%); }
}

/* ---------- Round three: faces, lead capture, partners, reviews, clips, podcast, legal ---------- */
.rcard-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rcard-face { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex: none; border: 2px solid var(--hl-6); }
.rcard-ret-1 { grid-template-columns: 1fr; }
.rcard-ret-1 > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.rcard-ret-1 b { font-size: 2.9rem; }
.rcard-ret-1 small { margin-top: 0; text-align: right; font-size: .8rem; }

.modal-book .modal-inner { width: min(820px, 100%); }
.book-frame { border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: 0 60px 140px -40px rgba(32, 62, 255, .6); }
.book-frame-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 22px; background: var(--navy); color: var(--white); border-bottom: 1px solid var(--line-d); }
.book-frame-head b { font: 600 1.05rem/1.2 var(--f-head); }
.book-frame-head span { font-size: .84rem; color: var(--hl-5); }
.book-frame-body { height: min(74vh, 740px); background: var(--white); }
.book-frame-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.book-live { height: 720px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--white); }
.book-live iframe { width: 100%; height: 100%; border: 0; display: block; }
.diag-form { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.diag-form iframe { width: 100%; height: 560px; border: 0; display: block; }
.gap-capture { display: grid; gap: 10px; }
.gap-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.gap-consent input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: 0 0 auto; accent-color: var(--hl-1); }
.gap-err { color: #b3261e; font-size: .9rem; margin: 0; }
.plan-form input.is-bad { border-color: #b3261e; }

.sticky-cta { display: none; }
@media (max-width: 640px) {
  .sticky-cta { display: flex; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; padding: 8px; border-radius: 99px; background: rgba(15, 24, 87, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-d); transform: translateY(160%); transition: transform .55s var(--ease); }
  .sticky-cta.is-on { transform: none; }
  .sticky-cta .btn { flex: 1; min-height: 48px; padding: 0 12px; width: auto; }
  .menu-open .sticky-cta { display: none; }
}

.partners { padding-block: 40px; border-block: 1px solid var(--line-d); }
.partners-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 58px; }
.partners-label { width: 100%; text-align: center; font: 600 .72rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--hl-5); }
.partner { display: flex; align-items: center; height: 38px; opacity: .82; transition: opacity .3s; }
.partner:hover { opacity: 1; }
.partner img { height: 100%; width: auto; max-width: 170px; object-fit: contain; }
.partner-text { font: 600 1.05rem/1 var(--f-head); color: var(--white); letter-spacing: -.01em; }
.partner:has(img[src*="google-partner"]) { height: 64px; }
.partner:has(img[src*="hipaa"]) { height: 44px; }
.partner { position: relative; }
.partner .flag { position: absolute; top: 100%; left: 50%; translate: -50% 6px; white-space: nowrap; }
.partners { background: var(--navy); }

.rev-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 30px; margin-bottom: 18px; border-radius: 24px; background: var(--navy); color: var(--white); }
.rev-score { display: flex; align-items: center; gap: 18px; }
.g-mark { width: 44px; height: 44px; }
.rev-score b { display: block; font: 700 2.6rem/1 var(--f-head); letter-spacing: -.03em; }
.rev-score small { display: block; margin-top: 4px; color: var(--hl-5); font-size: .88rem; }
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { width: 16px; height: 16px; fill: var(--hl-2); }
.rev-head .stars svg { fill: var(--hl-4); }
.stars svg.off { fill: var(--line); }
/* Equal cards, not a ragged column flow: every review is the same height and the
   name sits on the same baseline across the row. Long reviews clamp instead of
   stretching the row. */
/* scoped to figure.rev - `.plaque-row.rev` reuses the same class name */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
figure.rev { margin: 0; padding: 24px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100%; }
figure.rev blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; }
@media (max-width: 980px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rev-grid { grid-template-columns: 1fr; } }
.rev-top { display: flex; justify-content: space-between; align-items: center; }
.rev-top small { color: var(--ink-3); font-size: .78rem; }
.rev blockquote { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.rev figcaption { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; }
.rev-initial { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--hl-7); color: var(--hl-1); font-weight: 700; }
.rev figcaption b { font-size: .92rem; }
.rev figcaption small { color: var(--ink-3); font-size: .78rem; }

.clips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Seven testimonials in a four-wide grid leaves an orphaned row of three, which Ian
   flagged as looking unfinished. Rather than drop a doctor or invent an eighth, the
   strongest clip leads at double width: that fills row one with 2+1+1 and leaves a
   clean four across row two. The wider aspect keeps both rows the same height, so the
   row still reads as a row. The feature carries no aspect ratio of its own so the grid
   stretches it to whatever the normal cards set, which keeps the rows flush at every
   width instead of only at one.

   :nth-last-child(7) scopes this to a grid of exactly seven. The rule first shipped
   unscoped and silently broke the homepage, which runs the same .clips grid with four
   clips: the feature ate two columns and left the fourth clip orphaned on its own row.
   Four in a four-column grid is already one clean row and needs no feature at all.
   width instead of only at one. Below the 4-column breakpoint the feature simply spans the
   full width, which stays even because the grid never falls below two columns. */
.clips > .clip:first-child:nth-last-child(7) { grid-column: span 2; aspect-ratio: auto; }
.clips > .clip:first-child:nth-last-child(7) .clip-quote { font-size: 1.28rem; line-height: 1.32; }
.clips > .clip:first-child:nth-last-child(7) .clip-body { padding: 26px; }
.clips > .clip:first-child:nth-last-child(7) .vplay { width: 58px; height: 58px; }
.clip { position: relative; isolation: isolate; aspect-ratio: 4 / 5; max-width: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--navy); color: var(--white); text-align: left; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.clip:hover { transform: translateY(-8px); box-shadow: 0 40px 90px -24px rgba(15, 24, 87, .6); }
.clip > img, .clip-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip > img { transition: transform 1.2s var(--ease); }
.clip:hover > img { transform: scale(1.05); }
.clip-prev { opacity: 0; transition: opacity .45s; z-index: 0; }
.clip.is-playing .clip-prev { opacity: 1; }
.clip::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 24, 87, 0) 30%, rgba(15, 24, 87, .78) 58%, var(--navy) 80%); }
.clip .vplay { top: 22px; left: 22px; translate: 0 0; width: 50px; height: 50px; z-index: 2; }
.clip .vdur { top: 30px; right: 16px; bottom: auto; z-index: 2; }
.clip-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 4px; padding: 20px; }
.clip-quote { font: 500 1rem/1.4 var(--f-head); letter-spacing: -.01em; margin-bottom: 10px; }
.clip-body b { font: 600 1rem/1.2 var(--f-head); }
.clip-body small { color: var(--hl-5); font-size: .8rem; }

.founder { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.founder-story { display: grid; gap: 16px; color: var(--ink-2); font-size: 1.04rem; margin-top: 24px; }
.founder-quote { margin: 30px 0 0; padding: 26px 28px; border-radius: var(--r); background: var(--navy); color: var(--white); font: 500 1.2rem/1.45 var(--f-head); letter-spacing: -.01em; }
.founder-quote cite { display: block; margin-top: 14px; font: 600 .78rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--hl-4); font-style: normal; }
/* Was a fixed three columns, so a fourth quote was stranded alone on a second row.
   Flex seats however many there are on one line. */
.quote-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.quote-row > blockquote { flex: 1 1 210px; min-width: 0; }
.quote-row blockquote { margin: 0; padding: 24px; border-radius: var(--r); background: var(--hl-7); font: 500 1.02rem/1.5 var(--f-head); }

.pod-phero { text-align: left; padding-bottom: clamp(80px, 9vw, 120px); }
.pod-phero .crumbs { justify-content: flex-start; margin-bottom: 28px; }
.pod-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 5vw, 72px); align-items: center; text-align: left; }
.pod-hero .phero-title { margin-inline: 0; }
.pod-hero .phero-sub { margin-inline: 0; }
.pod-art { width: 100%; aspect-ratio: 1; max-width: 100%; border-radius: 26px; object-fit: cover; box-shadow: 0 50px 120px -40px rgba(32, 62, 255, .7); }
.platforms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ep-list { display: grid; gap: 12px; }
.ep { display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: center; padding: 18px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ep:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ep img, .ep-ph { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var(--navy); color: var(--hl-4); display: grid; place-items: center; }
.ep h3 { font-size: 1.12rem; }
.ep p { color: var(--ink-2); font-size: .9rem; margin-top: 6px; }
.ep-meta { font-size: .78rem; color: var(--ink-3); }
.ep .btn { white-space: nowrap; }
.ep-audio { width: 100%; max-width: 520px; height: 36px; margin-top: 12px; }

.legal { max-width: 780px; margin-inline: auto; color: var(--ink-2); }
.legal h2 { font-size: 1.6rem; color: var(--navy); margin: 44px 0 12px; }
.legal h3 { font-size: 1.2rem; color: var(--navy); margin: 28px 0 10px; }
.legal p + p { margin-top: 14px; }
.legal ul, .legal ol { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0; }
.legal a { color: var(--hl-1); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { font-size: .88rem; color: var(--ink-3); margin-bottom: 30px; }
.legal-table { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; }
.legal-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; }
.legal-table th, .legal-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { background: var(--hl-7); color: var(--navy); }
.legal-table tr:last-child td { border-bottom: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card { padding: 30px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.contact-card .ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--hl-7); color: var(--hl-1); }
.contact-card h3 { font-size: 1.25rem; }
.contact-card a { color: var(--hl-1); font-weight: 600; }
.foot-social { display: flex; gap: 10px; margin-top: 22px; }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-d); color: var(--hl-6); transition: background .3s, color .3s; }
.foot-social a:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
.foot-social svg { width: 17px; height: 17px; }
.foot-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.needs-block { display: none; }
body.review .needs-block { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.drop-panel { width: 720px; }

@media (max-width: 1180px) { .clips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .founder, .pod-hero { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .quote-row > blockquote { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .clips { grid-template-columns: 1fr 1fr; gap: 10px; }
  .clip-quote { display: none; }
  .ep { grid-template-columns: 56px 1fr; }
  .ep img, .ep-ph { width: 56px; height: 56px; }
  .ep .btn { grid-column: 1 / -1; }
  .rcard-ret-1 b { font-size: 2.4rem; }
}

/* ---------- Icon system: Lucide line icons, no tinted tiles (September 14) ---------- */
.ico { stroke-width: 1.75; }
.mech-item .ico { width: 26px; height: 26px; padding: 0; border-radius: 0; background: none; color: var(--hl-1); }
.mech-item { gap: 16px; }
.sys-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(186, 215, 255, .22); color: var(--hl-4); box-shadow: none; }
.sys-ico .ico { width: 22px; height: 22px; }
.contact-card .ico { width: 28px; height: 28px; padding: 0; background: none; border-radius: 0; color: var(--hl-1); }
.fit .ico { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; color: var(--hl-1); margin-top: 3px; }
.callout .ico { width: 22px; height: 22px; }
.qmark { width: 26px; height: 26px; color: var(--hl-3); opacity: .9; }
.g-chip { width: 46px; height: 46px; border-radius: 12px; background: var(--white); display: grid; place-items: center; flex: none; }
.g-chip .g-mark { width: 24px; height: 24px; }
.partner-text { font: 600 .95rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hl-6); padding: 10px 16px; border: 1px solid rgba(186, 215, 255, .28); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal], .js [data-intro] { opacity: 1; transform: none; }
  .js .gates-rail i { transform: none; }
}

/* Steel hero mark: one gear, homepage only */
.hero-steel { position: absolute; z-index: 2; top: 50%; right: max(3vw, calc((100vw - 1280px) / 2)); width: min(480px, 33vw); translate: 0 -54%; pointer-events: none; filter: drop-shadow(0 34px 50px rgba(3, 7, 38, .7)) drop-shadow(0 0 1px rgba(234, 244, 255, .25)); }
.hero-steel img { display: block; width: 100%; height: auto; }
.hero:has(.hero-steel) .tilt { opacity: .22; }
.tk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hl-3); flex: none; }
.sys-top { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero-steel { position: relative; top: auto; right: auto; translate: none; width: min(300px, 64vw); margin: -10px auto 36px; }
}
@media (min-width: 901px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .hero:has(.hero-steel) .tilt { opacity: .14; } }

/* Leadership credentials and the questions to ask any agency */
/* three credentials, one even row - no half-empty cell */
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 26px; border-top: 1px solid var(--line); }
.creds > div { padding: 18px 20px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.creds > div:first-child { padding-left: 0; }
.creds > div:last-child { border-right: 0; }
@media (max-width: 760px) { .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .creds > div:nth-child(2n) { border-right: 0; } }
.creds dt { font: 600 clamp(1.45rem, 2.3vw, 1.95rem)/1.1 var(--f-head); letter-spacing: -.02em; color: var(--navy); }
.creds dd { margin: 6px 0 0; font-size: .9rem; color: var(--ink-3); }
.edge { margin-top: clamp(48px, 7vw, 84px); border-radius: var(--r); background: var(--navy); color: var(--white); padding: clamp(28px, 4vw, 48px); }
.edge h3 { font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: -.02em; }
.edge-list { list-style: none; margin: 22px 0 0; padding: 0; }
.edge-list li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; padding: 18px 0; border-top: 1px solid rgba(186, 215, 255, .18); }
.edge-list .q { color: var(--hl-5); font-size: .98rem; }
.edge-list .a { font: 500 1.05rem/1.45 var(--f-head); color: var(--white); }
@media (max-width: 700px) {
  .edge-list li { grid-template-columns: 1fr; gap: 6px; }
  .creds { grid-template-columns: 1fr; }
  .creds > div:nth-child(odd) { border-right: 0; padding-right: 0; }
  .creds > div:nth-child(even) { padding-left: 0; }
}
@media (min-width: 901px) { .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Proprietary block on service pages, and the pillars above the services grid */
.sec-edge { padding-block-end: clamp(20px, 3vw, 40px); }
.moat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin-top: 8px; }
.moat-item { border-top: 2px solid var(--hl-1); padding-top: 18px; }
.moat-item h3 { font-size: 1.12rem; letter-spacing: -.01em; }
.moat-item p { margin-top: 8px; color: var(--ink-3); font-size: .95rem; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 28px; border-top: 1px solid rgba(186, 215, 255, .2); border-bottom: 1px solid rgba(186, 215, 255, .2); }
.pillar { padding: 22px 24px 22px 0; }
.pillar + .pillar { padding-left: 24px; border-left: 1px solid rgba(186, 215, 255, .2); }
.pillar h3 { font-size: 1.15rem; color: var(--white); }
.pillar p { margin-top: 8px; color: var(--hl-5); font-size: .94rem; }
.s-light .pillars, .s-tint .pillars { border-color: var(--line); }
.s-light .pillar + .pillar, .s-tint .pillar + .pillar { border-color: var(--line); }
.s-light .pillar h3, .s-tint .pillar h3 { color: var(--navy); }
.s-light .pillar p, .s-tint .pillar p { color: var(--ink-3); }
@media (max-width: 900px) {
  .moat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 18px 0; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid rgba(186, 215, 255, .2); }
}
@media (max-width: 560px) { .moat { grid-template-columns: 1fr; } }

/* Case cards without a photo */
.rcard-initial { display: grid; place-items: center; font: 600 1.1rem/1 var(--f-head); background: var(--hl-7); color: var(--hl-1); }
/* Trademark specimen pages: the mark is plain text, visible at load, on one line */
.mark-page { min-height: 70svh; display: flex; align-items: center; padding-block: clamp(140px, 16vw, 200px) clamp(80px, 10vw, 120px); }
.mark-wrap { width: 100%; }
.mark-h1 { font-size: clamp(1.15rem, 6.2vw, 4.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; color: var(--white); }
.mark-body { margin-top: 26px; max-width: 680px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--hl-5); }
.mark-cta { margin-top: 34px; }

/* ---- Long-form guides and the guide index ---- */
.art-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.article { max-width: 760px; color: var(--ink-2); font-size: 1.05rem; }
.art-meta { font-size: .88rem; color: var(--ink-3); margin-bottom: 26px; }
.art-answer { font: 500 clamp(1.15rem, 1.7vw, 1.35rem)/1.5 var(--f-head); color: var(--navy); letter-spacing: -.012em; padding: 20px 24px; background: var(--hl-7); border-radius: 16px; margin-bottom: 34px; }
.art-toc { border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; margin-bottom: 38px; }
.art-toc b { display: block; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.art-toc ul { padding-left: 18px; display: grid; gap: 7px; margin: 0; }
.art-toc a { color: var(--hl-1); text-decoration: none; }
.art-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.art-sec { margin-bottom: 40px; scroll-margin-top: 90px; }
.art-sec h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--navy); letter-spacing: -.02em; margin: 0 0 14px; }
.art-sec h3 { font-size: 1.15rem; color: var(--navy); margin: 26px 0 8px; }
.art-sec p + p { margin-top: 14px; }
.art-sec ul, .art-sec ol { padding-left: 22px; display: grid; gap: 9px; margin: 16px 0; }
.art-sec a { color: var(--hl-1); text-decoration: underline; text-underline-offset: 3px; }
.art-quote { border-left: 3px solid var(--hl-1); padding: 4px 0 4px 20px; margin: 22px 0; font: 500 1.12rem/1.55 var(--f-head); color: var(--navy); }
.art-quote cite { display: block; margin-top: 10px; font: 400 .9rem/1 var(--f-body); color: var(--ink-3); font-style: normal; }
.art-note { font-size: .93rem; color: var(--ink-3); border-left: 2px solid var(--line); padding-left: 16px; margin: 18px 0; }
.art-takeaway { border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; background: var(--white); display: grid; gap: 10px; justify-items: start; margin-top: 44px; }
.art-takeaway b { font: 600 1.2rem/1.3 var(--f-head); color: var(--navy); }
.art-side { position: sticky; top: 96px; display: grid; gap: 18px; }
.art-card { border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; background: var(--white); display: grid; gap: 10px; justify-items: start; }
.art-card b { font: 600 1.05rem/1.35 var(--f-head); color: var(--navy); }
.art-card p { font-size: .94rem; color: var(--ink-3); }
.art-links { padding-left: 18px; display: grid; gap: 8px; margin: 0; font-size: .94rem; }
.art-links a { color: var(--hl-1); text-decoration: none; }
.art-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.glist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.gcard { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--white); display: grid; gap: 10px; align-content: start; text-decoration: none; }
.gcard-tag { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-1); }
.gcard b { font: 600 1.15rem/1.35 var(--f-head); color: var(--navy); letter-spacing: -.015em; }
.gcard-dek { font-size: .95rem; color: var(--ink-3); }
.glist-more { margin-top: 26px; }
@media (max-width: 980px) {
  .art-wrap { grid-template-columns: 1fr; gap: 34px; }
  .art-side { position: static; }
}


/* ---- Tables in long-form. Neither competitor has one; answer engines parse them best. ---- */
.art-table { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 14px; }
.art-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94rem; }
.art-table th, .art-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.art-table th { background: var(--hl-7); color: var(--navy); font-weight: 600; letter-spacing: -.005em; }
.art-table tr:last-child td { border-bottom: 0; }
.art-table td:first-child { color: var(--navy); font-weight: 500; }
.art-cap { font-size: .84rem; color: var(--ink-3); margin: -10px 0 22px; }

/* Trademark symbol on the hero tagline. Small and raised so it marks the phrase
   without competing with it. The mark is the whole line, so it sits at the end. */
.hero-title .tm { font-size: .34em; vertical-align: super; line-height: 0; margin-left: .06em; letter-spacing: 0; font-weight: 600; }

/* The article table and note are built for a white ground. On the dark proof band the first
   column, the caption and the note under it were navy on navy. The wrapper is .art-table,
   not .legal-table, which is why the first attempt at this changed nothing. */
.s-dark .art-table { border-color: rgba(144, 187, 255, .22); background: rgba(144, 187, 255, .05); }
.s-dark .art-table th { background: rgba(144, 187, 255, .12); color: var(--white); border-bottom-color: rgba(144, 187, 255, .22); }
.s-dark .art-table td { color: var(--hl-5); border-bottom-color: rgba(144, 187, 255, .14); }
.s-dark .art-table td:first-child { color: var(--white); font-weight: 600; }
.s-dark .art-table figcaption, .s-dark .art-table caption, .s-dark figcaption { color: var(--hl-4); }
.s-dark .art-note { color: var(--hl-5); border-left-color: rgba(144, 187, 255, .35); }
.s-dark .art-note a { color: var(--hl-4); }
.s-dark .art-cap { color: var(--hl-4); }

/* ---- Resources hub ---- */
.res-jump { margin-bottom: clamp(48px, 5vw, 70px); }
.res-jump > b { display: block; font: 600 .72rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.res-jump ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px;
               grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.res-jump a { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border-radius: 12px;
              border: 1px solid var(--line); background: var(--white); text-decoration: none;
              transition: border-color .3s var(--ease), transform .3s var(--ease); }
.res-jump a:hover { border-color: var(--hl-2); transform: translateX(3px); }
.res-jump i { font-style: normal; font: 600 .8rem/1 var(--f-head); color: var(--hl-3); letter-spacing: .06em; min-width: 20px; }
.res-jump span { flex: 1; font: 600 .97rem/1.3 var(--f-head); color: var(--navy); }
.res-jump span em { font-style: normal; color: var(--hl-1); }
.res-jump u { text-decoration: none; font: 500 .82rem/1 var(--f-body); color: var(--ink-3); }

.res-group { padding-bottom: clamp(48px, 5vw, 70px); }
.res-group + .res-group { border-top: 1px solid var(--line); padding-top: clamp(44px, 4.5vw, 64px); }

.res-bar { display: flex; align-items: baseline; gap: clamp(16px, 2vw, 28px); padding-bottom: 18px; border-bottom: 2px solid var(--navy); }
.res-num { font: 600 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--f-head); color: var(--hl-3); letter-spacing: -.02em; }
.res-title { flex: 1; min-width: 0; }
.res-title h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.025em; margin: 0; }
.res-title h2 em { font-style: normal; color: var(--hl-1); }
.res-sub { margin: 6px 0 0; font-size: .95rem; color: var(--ink-2); }
.res-count { flex: none; font: 500 .82rem/1 var(--f-body); color: var(--ink-3); white-space: nowrap; }
.res-intro { margin: 20px 0 0; max-width: 66ch; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }

.res-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px;
            grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.res-list a { position: relative; display: block; height: 100%; padding: 22px 52px 22px 22px; border-radius: var(--r);
              background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none;
              transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.res-list a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--hl-3); }
.res-list b { display: block; font: 600 1.04rem/1.35 var(--f-head); color: var(--navy); letter-spacing: -.01em; }
.res-list span { display: block; margin-top: 8px; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.res-go { position: absolute; top: 24px; right: 22px; color: var(--hl-2); }
.res-go .ico { width: 17px; height: 17px; }
.res-limit { max-width: 72ch; }
.res-limit p { margin-top: 16px; font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; color: var(--hl-5); }
.res-limit .actions { margin-top: 28px; align-items: center; }
@media (max-width: 760px) { .res-bar { flex-wrap: wrap; } .res-count { width: 100%; } }
@media (max-width: 620px) { .res-list { grid-template-columns: 1fr; } }

/* ---- Mobile tap targets ----
   Measured on a 390px viewport across 47 pages: footer links came out 95x19, breadcrumbs
   38x22 and on-page contents links 365x20. All are comfortably wide and far too short to
   hit reliably with a thumb. Padding only, so nothing moves on desktop. */
@media (max-width: 860px) {
  .foot-top a, .foot-col a, footer .nav-link { display: inline-block; padding-block: 11px; }
  .crumbs a, .crumbs span { display: inline-block; padding-block: 10px; }
  .art-toc a { display: block; padding-block: 11px; }
  .art-links a { display: inline-block; padding-block: 9px; }
  .nextlinks a, .res-jump a, .res-list a { min-height: 48px; }
}

/* Desktop keeps the footer fully open: the accordion exists only for the phone. */
@media (min-width: 861px) {
  .foot-acc > summary { display: none; }
  .foot-acc > ul { display: block !important; }
  .foot-acc { border-top: 0; }
}

/* ---- Long-form sections: collapsed on a phone, always open on desktop ----
   Same device as the footer. The words stay in the HTML, which is what search reads; the
   thumb no longer has to travel past 2,500 of them. The first section is open so the page
   never greets a reader with a list of closed headings. */
.art-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start;
                     justify-content: space-between; gap: 16px; }
.art-acc > summary::-webkit-details-marker { display: none; }
.art-acc > summary h2 { margin: 0; }
@media (max-width: 860px) {
  .art-acc > summary { padding: 4px 0 14px; }
  .art-acc > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: 12px;
                              border-right: 2px solid var(--hl-1); border-bottom: 2px solid var(--hl-1);
                              transform: rotate(45deg); transition: transform .25s var(--ease); }
  .art-acc[open] > summary::after { transform: rotate(225deg); }
  .art-sec { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
}
@media (min-width: 861px) {
  .art-acc > summary { cursor: default; pointer-events: none; }
  .art-acc > .art-body { display: block !important; }
}