/* ════ LYXAA v4 — Apple-white premium theme ════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --white: #ffffff;
  --gray-bg: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --blue: #0071e3;
  --blue-hov: #0077ed;
  --link: #0066cc;
  --teal: #2a8cf0;
  --violet: #0071e3;
  --green: #0071e3;
  --amber: #ff9f0a;
  --hairline: #d2d2d7;
  --dark: #050807;
  --dark-card: #161c1a;
  --r-lg: 28px;
  --r-md: 18px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--font);
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font); background: var(--white); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: rgba(0,113,227,0.18); }

/* ════ NAV ════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; height: 74px; z-index: 900;
  background: rgba(255,255,255,0); border-bottom: 1px solid rgba(255,255,255,0);
  backdrop-filter: saturate(180%) blur(0px); -webkit-backdrop-filter: saturate(180%) blur(0px);
  display: flex; align-items: center; justify-content: center;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), height .4s var(--ease); }
/* whisper-soft contrast veil so white nav stays readable, with no visible band */
nav::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,14,13,.28) 0%, rgba(10,14,13,.10) 45%, rgba(10,14,13,0) 100%);
  opacity: 1; transition: opacity .4s var(--ease); }
nav.scrolled::before { opacity: 0; }
nav.scrolled {
  background: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(15,20,19,.06);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.nav-in { width: min(1240px, 100% - 56px); display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 48px; width: auto; display: block; transition: filter .4s var(--ease); }
/* logo white over hero */
nav:not(.scrolled) .nav-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.4)); }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a { font-size: 13.5px; color: rgba(255,255,255,.9); text-decoration: none; transition: color .2s; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.nav-links a:hover { color: #fff; }
nav.scrolled .nav-links a { color: rgba(29,29,31,0.78); text-shadow: none; }
nav.scrolled .nav-links a:hover { color: var(--ink); }
.nav-cta { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--blue); border: none; border-radius: 980px; padding: 9px 22px; cursor: pointer; font-family: var(--font); box-shadow: 0 2px 10px rgba(0,113,227,.28); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); }
/* glossy sheen that sweeps across on hover */
.nav-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); transform: translateX(-120%); transition: transform .6s cubic-bezier(.22,1,.36,1); }
/* deeper blue fill that rises from the bottom */
.nav-cta::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--blue-hov), #0a5fc4); opacity: 0; transition: opacity .35s ease; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,113,227,.42); }
.nav-cta:hover::before { transform: translateX(120%); }
.nav-cta:hover::after { opacity: 1; }
.nav-cta:active { transform: translateY(0) scale(.97); box-shadow: 0 3px 12px rgba(0,113,227,.34); }
nav.scrolled .nav-cta { background: var(--blue); color: #fff; }
nav.scrolled .nav-cta:hover { transform: translateY(-2px); }
/* ════ HERO — editorial video ════ */
:root { --bone: #fbfbfd; --ink: #111318; --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', monospace; }
#hero { position: relative; height: 100vh; height: 100dvh; min-height: 600px; overflow: hidden; background: #0a0b0e; }
.hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0a0b0e; }
.hero-video::before,
.hero-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero-video::before {
  background:
    radial-gradient(70% 58% at 50% 34%, rgba(0,113,227,.18), transparent 68%),
    radial-gradient(44% 38% at 76% 22%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(145deg, #05070d 0%, #0a0d15 48%, #030405 100%);
}
.hero-video::after {
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.48' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-video video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.32); background: #0a0b0e; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,14,13,.55) 0%, rgba(10,14,13,.28) 26%, rgba(10,14,13,.22) 54%, rgba(10,14,13,.78) 100%); }

/* hairline frame */
.hero-frame { position: absolute; inset: 92px 44px 44px; z-index: 3; pointer-events: none; }
.hero-frame > * { pointer-events: auto; }
.hf-rule { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.26); transform: scaleX(0); transform-origin: left; }
.hf-rule.top { top: 0; animation: hfx 1.1s var(--ease) .2s forwards; }
.hf-rule.bottom { bottom: 0; animation: hfx 1.1s var(--ease) .35s forwards; }
@keyframes hfx { to { transform: scaleX(1); } }
.hf-corner { position: absolute; width: 16px; height: 16px; opacity: 0; animation: fadein .6s ease .9s forwards; }
.hf-corner::before, .hf-corner::after { content: ''; position: absolute; background: rgba(255,255,255,.5); }
.hf-corner::before { width: 16px; height: 1px; } .hf-corner::after { height: 16px; width: 1px; }
.hf-corner.tl { top: 0; left: 0; } .hf-corner.tl::before { top: 0; left: 0; } .hf-corner.tl::after { top: 0; left: 0; }
.hf-corner.tr { top: 0; right: 0; } .hf-corner.tr::before { top: 0; right: 0; } .hf-corner.tr::after { top: 0; right: 0; }
.hf-corner.bl { bottom: 0; left: 0; } .hf-corner.bl::before { bottom: 0; left: 0; } .hf-corner.bl::after { bottom: 0; left: 0; }
.hf-corner.br { bottom: 0; right: 0; } .hf-corner.br::before { bottom: 0; right: 0; } .hf-corner.br::after { bottom: 0; right: 0; }

/* centered composition */
.hero-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%); width: min(880px, 90%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-center .vh-eyebrow { margin: 0 0 26px; }
.hero-center .vh-sub { margin: 26px auto 34px; }
.hero-center .vh-ctas { justify-content: center; }
.vh-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 16px 7px 13px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 9px rgba(255,255,255,.9); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 50% { opacity: .35; } }
.vh-h1 { font-size: clamp(48px, 7.4vw, 118px); font-weight: 500; letter-spacing: -.035em;
  line-height: .96; color: #fff; margin: 0; text-shadow: 0 2px 50px rgba(0,0,0,.34); }
.vh-h1 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -.01em; }
.vh-mask { display: block; overflow: hidden; padding: 0 .14em .18em; margin: 0 -.14em -.18em; }
.vh-line { display: inline-block; white-space: nowrap; }

.vh-sub { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.62; color: rgba(255,255,255,.86);
  max-width: 56ch; text-shadow: 0 1px 20px rgba(0,0,0,.32); }

/* bottom meta bar — grounded trust strip */
.hero-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 13px 18px;
  padding: 30px clamp(20px,5vw,64px) 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.hm-div { width: 1px; align-self: stretch; min-height: 18px; margin: 0 4px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent); }
.hm-reco { font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.hm-item { display: inline-flex; align-items: center; gap: 7px; transition: color .3s ease; }
.hm-item:hover { color: rgba(255,255,255,.9); }
.hm-item b { color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.hm-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.24); }
.hm-cred svg { width: 13px; height: 13px; color: #6ab1f7; flex-shrink: 0; }
.hm-cred:hover svg { color: #8cc4ff; }
@media (max-width: 720px) { .hm-div { display: none; } }
.vh-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.btn-blue { font-family: var(--font); font-size: clamp(13px, 3.4vw, 15px); font-weight: 500; color: var(--ink); background: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  white-space: nowrap; border-radius: 980px; padding: clamp(11px, 2.6vw, 13px) clamp(20px, 5.5vw, 28px); cursor: pointer; will-change: transform;
  transition: transform .25s var(--ease), box-shadow .3s; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.32); }
.btn-under { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 4px; transition: gap .25s, border-color .25s; }
.btn-under:hover { border-color: #fff; gap: 13px; }

/* entrance */
.vh-line.vr2 { display: inline-block; }
#hero.vh-anim .vr { opacity: 0; animation: vrise 1s var(--ease) forwards; }
@keyframes vrise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
#hero.vh-anim .vh-line.vr2 { transform: translateY(115%); animation: vline 1.15s cubic-bezier(.22,.85,.26,1) forwards; }
@keyframes vline { from { transform: translateY(115%); } to { transform: none; } }
.v1 { animation-delay: .2s; } .v2 { animation-delay: .34s; } .v3 { animation-delay: .46s; }
.v4 { animation-delay: .7s; } .v5 { animation-delay: .85s; } .v6 { animation-delay: 1.05s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes fadein { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }
@media (max-width: 920px) {
  .hero-frame { inset: 82px 22px 28px; }
  .hero-center { width: 92%; }
  .vh-h1 { font-size: clamp(38px, 11vw, 70px); }
  .vh-mask { overflow: visible; } .vh-line { white-space: normal; }
  .vh-sub { font-size: 15px; max-width: 90%; margin-bottom: 28px; }
  .hero-meta { font-size: 9.5px; gap: 11px; flex-wrap: wrap; }
  .hm-cred svg { width: 11px; height: 11px; }
  .vh-eyebrow { font-size: 10px; letter-spacing: .13em; gap: 7px; padding: 6px 13px 6px 11px; white-space: nowrap; }
  .pulse-dot { width: 6px; height: 6px; }
}

@media (max-width: 560px) {
  .vh-ctas { flex-direction: column; align-items: flex-start; gap: 16px; }
  .btn-blue { width: auto; max-width: 100%; font-size: 14px; padding: 12px 24px; }
  .btn-under { font-size: 10.5px; }
  .vh-eyebrow { font-size: 9px; letter-spacing: .1em; padding: 5.5px 11px 5.5px 10px; }
  .hero-center .vh-eyebrow { margin-bottom: 20px; }
}

/* ════ GLOW DIVIDER ════ */
.glowline { height: 1px; width: min(1080px, 100% - 80px); margin: 0 auto; position: relative; }
.glowline::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(42,140,240,.55), rgba(0,113,227,.55), transparent);
  box-shadow: 0 0 18px rgba(12,150,120,.35);
  transform: scaleX(0); transition: transform 1.4s var(--ease);
}
.glowline.on::before { transform: scaleX(1); }

/* ════ TEXT FILL ════ */
#manifesto { padding: 14vh 6vw 16vh; background: var(--white); }
.kx-head { max-width: 1080px; margin: 0 auto; }
.kx-eyebrow { display: inline-block; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 22px; }
.fill-text {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 62px); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.16;
}
.fill-text .w { color: #d6d6db; transition: color .35s linear; }
.fill-text .w.on { color: var(--ink); }
.fill-text .w.accent.on { color: var(--blue); }

/* value rail (manifesto) — elevated cards */
.vrail { max-width: 1180px; margin: 84px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.vr-cell { position: relative; overflow: hidden; padding: 40px 40px 44px; border-radius: 26px; background: linear-gradient(180deg,#ffffff 0%, #f6f8fb 100%); border: 1px solid #ebedf2; box-shadow: 0 1px 2px rgba(16,20,28,.03);
  opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), border-color .5s; }
.vr-cell.on { opacity: 1; transform: none; }
.vr-cell.on:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(16,26,45,.22); border-color: #dfe3ea; }
.vr-num { position: absolute; top: 28px; right: 34px; font-family: var(--font); font-size: 76px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #eef1f6; pointer-events: none; transition: color .5s; }
.vr-cell.on:hover .vr-num { color: #e5edfb; }
.vr-ic { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; margin: 0 0 26px; color: var(--blue); background: linear-gradient(180deg,#eaf3ff,#dcebff); box-shadow: inset 0 0 0 1px rgba(0,113,227,.1); }
.vr-ic svg { width: 28px; height: 28px; transition: transform .5s var(--ease); }
.vr-cell:hover .vr-ic svg { transform: scale(1.1) rotate(-4deg); }
.vr-h { font-family: var(--font); font-size: clamp(23px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; color: #14171c; margin: 0; position: relative; }
.vr-p { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: #6e747b; margin: 16px 0 0; max-width: 40ch; position: relative; }

@media (max-width: 820px) {
  .vrail { grid-template-columns: 1fr; gap: 16px; }
  .vr-cell { padding: 32px 28px 34px; }
  .vr-num { font-size: 60px; top: 24px; right: 26px; }
}

/* ════ SHELL ════ */
.sec { padding: 110px 0; }
.sec-gray { background: var(--gray-bg); }
.shell { width: min(1024px, 100% - 48px); margin: 0 auto; }
.shell-wide { width: min(1240px, 100% - 48px); margin: 0 auto; }
.sec-eyebrow { font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 8px; }
.sec-h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; color: var(--ink); }
.sec-h2 .dim { color: var(--ink-3); }
.sec-sub { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 620px; margin-top: 16px; }

/* ════ GLOW-BORDER CARD (rotating conic) ════ */
@property --ga { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.glowcard { position: relative; border-radius: var(--r-lg); padding: 1.5px; overflow: hidden; }
.glowcard::before {
  content: ''; position: absolute; inset: -40%;
  background: conic-gradient(from var(--ga), transparent 0%, rgba(42,140,240,.0) 18%, rgba(42,140,240,.9) 32%, rgba(0,113,227,.9) 45%, rgba(26,166,75,.6) 55%, transparent 70%);
  animation: spin-ga 5.5s linear infinite;
}
@keyframes spin-ga { to { --ga: 360deg; } }
@supports not (background: conic-gradient(from var(--ga), red, blue)) {
  .glowcard::before { background: conic-gradient(transparent, rgba(42,140,240,.8), rgba(0,113,227,.8), transparent); animation: spin-rot 5.5s linear infinite; inset: -60%; }
}
@keyframes spin-rot { to { transform: rotate(360deg); } }
.glowcard-in { position: relative; border-radius: 26.5px; background: var(--white); height: 100%; width: 100%; }

/* ════ PREVENTION (healthspan gap) ════ */
#prevention { background: #fff; position: relative; overflow: hidden; }
.pvx-head { text-align: center; max-width: 720px; margin: 0 auto; }
.pvx { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 48px; align-items: center; margin-top: 48px;
  background: linear-gradient(165deg, #f6f9fd, #eef3f9); border: 1px solid #e6ecf3; border-radius: 32px; padding: 46px 48px;
  box-shadow: 0 30px 70px rgba(16,24,40,.06); }
/* left readout */
.pvx-tag { display: inline-block; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.pvx-age { font-family: var(--font); font-size: 17px; color: #6e7670; margin: 18px 0 6px; }
.pvx-age b { color: #16181d; font-weight: 600; }
.pvx-gain { display: flex; align-items: baseline; gap: 14px; }
.pvx-gain-n { font-family: var(--font); font-size: clamp(56px, 6vw, 84px); font-weight: 600; letter-spacing: -.05em; line-height: .9;
  background: linear-gradient(120deg, #0071e3, #6ab1f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pvx-gain-u { font-size: 14px; line-height: 1.35; color: #828985; }
.pvx-bars { display: flex; flex-direction: column; gap: 16px; margin: 32px 0 0; }
.pvx-barrow { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 14px; }
.pvx-barlbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #4a524e; }
.pvx-barlbl i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pvx-barlbl .dot-typ { background: #c4ccc7; }
.pvx-barlbl .dot-lyx { background: linear-gradient(120deg, #0071e3, #6ab1f7); }
.pvx-bartrack { height: 7px; border-radius: 4px; background: #e4ebe6; overflow: hidden; }
.pvx-barfill { display: block; height: 100%; width: 50%; border-radius: 4px; transition: width .5s var(--ease); }
.pvx-barfill.typ { background: #c4ccc7; }
.pvx-barfill.lyx { background: linear-gradient(90deg, #0071e3, #6ab1f7); }
.pvx-barval { font-family: var(--font); font-size: 15px; font-weight: 600; color: #16181d; text-align: right; }
.pvx-barval.muted { color: #9aa19d; }
.pvx-slider-wrap { margin-top: 30px; }
input[type="range"].pv-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #0071e3, #6ab1f7); outline: none; cursor: pointer; }
input[type="range"].pv-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 3px 12px rgba(16,24,40,.22), 0 0 0 5px rgba(0,113,227,.14); cursor: grab; }
input[type="range"].pv-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: #fff; border: none;
  box-shadow: 0 3px 12px rgba(16,24,40,.22), 0 0 0 5px rgba(0,113,227,.14); cursor: grab; }
.pvx-slider-lbl { display: flex; justify-content: space-between; font-size: 11.5px; color: #9aa19d; margin-top: 12px; }
/* right chart */
.pvx-right { position: relative; }
#pv-svg { width: 100%; height: auto; overflow: visible; display: block; }

.pvx-grid line { stroke: #e2e8e4; stroke-width: 1; }
.pvx-axis { stroke: #c2cac4; stroke-width: 1.5; stroke-linecap: round; }
.pvx-axcap { fill: #0a0c10; }
.pvx-axis-y { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .18em; fill: #8a938c; text-anchor: middle; transform: rotate(-90deg); transform-origin: 20px 180px; }
.pv-path-typ-d { fill: none; stroke: #c4ccc7; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; }
.pvx-marker-glow { fill: #f4e9b8; opacity: .55; }
.pvx-marker { fill: url(#pvMarker); stroke: #fff; stroke-width: 1.5; }
.pvx-anno-line { stroke: #aab2ad; stroke-width: 1.3; stroke-dasharray: 4 4; }
.pvx-anno-arrow { stroke: #8a938c; stroke-width: 1.3; fill: none; stroke-linecap: round; }
.pvx-anno-head { fill: #8a938c; }
.pvx-anno-lbl { font-family: var(--font); font-size: 13px; font-weight: 500; fill: #6e7686; text-anchor: middle; }
.pvx-lbl-lyx { font-family: var(--font); font-size: 14px; font-weight: 600; fill: #0a0c10; text-anchor: middle; }
.pvx-lbl-arrow { stroke: #0071e3; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 4; }
.pvx-num { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 13px; fill: #aab2ad; text-anchor: middle; }
.pvx-num.end { text-anchor: end; }
.pv-path-typ { fill: none; stroke: #c4ccc7; stroke-width: 2; stroke-linecap: round; }
.pv-path-lyx { fill: none; stroke: url(#pvGlow); stroke-width: 3.5; stroke-linecap: round; }
.pv-area { fill: url(#pvAreaGrad); opacity: 0; }
.pv-vline { stroke: rgba(16,24,40,.18); stroke-width: 1; stroke-dasharray: 3 4; }
.pv-dot-t { fill: #aab2ad; }
.pv-dot-l { fill: #fff; stroke: #0071e3; stroke-width: 3; filter: drop-shadow(0 2px 6px rgba(0,113,227,.4)); }
.pvx-caption { display: flex; justify-content: space-between; margin-top: 16px; font-size: 12.5px; }
.pvx-cap-lyx { color: #0071e3; font-weight: 600; }
.pvx-cap-typ { color: #9aa19d; }

@media (max-width: 860px) {
  .pvx { grid-template-columns: 1fr; gap: 32px; padding: 32px 26px; }
}

/* ════ SERVICES BENTO ════ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; }
.card {
  background: var(--white); border-radius: var(--r-lg);
  padding: 34px; position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,30,60,0.11); }
.card.s4 { grid-column: span 4; min-height: 400px; }
.card.s3 { grid-column: span 3; min-height: 330px; }
.card.s2 { grid-column: span 2; min-height: 330px; }
.card-k { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.card-h { font-size: 26px; font-weight: 600; letter-spacing: -.018em; line-height: 1.15; color: var(--ink); margin-bottom: 10px; }
.card-p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 420px; }
.card.s4 .card-p { max-width: min(400px, calc(100% - 215px)); }
.card.dark { background: var(--dark-card); }
.card.dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 0%, rgba(42,140,240,.16) 0%, transparent 55%); pointer-events: none; }
.card.dark .card-h { color: #f5f5f7; }
.card.dark .card-p { color: rgba(245,245,247,0.62); }
.card.dark .card-k { color: #6ab1f7; }

/* glucose before/after */
.glu-visual { position: absolute; right: 28px; bottom: 26px; width: 210px; }
.glu-visual svg { width: 100%; overflow: visible; }
.glu-before { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; opacity: .55; stroke-dasharray: 4 6; }
.glu-after { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(42,140,240,.55)); stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.glu-visual.on .glu-after { stroke-dashoffset: 0; }
.glu-lbl { font-size: 10.5px; font-weight: 600; color: var(--ink-3); display: flex; gap: 14px; margin-top: 6px; justify-content: flex-end; }
.glu-lbl i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.glu-lbl .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
/* hba1c chip */
.hba-chip { position: absolute; left: 34px; bottom: 30px; background: var(--gray-bg); border-radius: 14px; padding: 12px 18px; }
.hba-chip .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.hba-chip .v { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.hba-chip .v em { font-style: normal; font-size: 13px; color: #028702; font-weight: 600; }

/* DNA helix (animated by JS) */
.dna-svg { position: absolute; right: 14px; bottom: 4px; }
.dna-svg line { stroke: rgba(255,255,255,.2); stroke-width: 1.5; }
.dna-svg .s1 { fill: #6ab1f7; }
.dna-svg .s2 { fill: #6ab1f7; }

/* CGM interactive trace */
.cgm-wrap { position: absolute; left: 30px; right: 30px; bottom: 24px; cursor: crosshair; }
.cgm-wrap svg { width: 100%; overflow: visible; display: block; }
.cgm-grid line { stroke: rgba(0,0,0,.05); stroke-width: 1; }
.cgm-range { fill: rgba(42,140,240,.07); }
.cgm-path { fill: none; stroke: url(#cgmGrad); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(0,113,227,.35)); }
.cgm-dot { filter: drop-shadow(0 0 6px rgba(0,113,227,.7)); }
.cgm-tip {
  position: absolute; top: -14px; transform: translateX(-50%); pointer-events: none;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 600;
  border-radius: 8px; padding: 5px 10px; white-space: nowrap; opacity: 0; transition: opacity .2s;
}
.cgm-tip small { font-weight: 400; opacity: .65; }
.cgm-hint { font-size: 11px; color: var(--ink-3); margin-top: 8px; text-align: center; }

/* breathing circle */
.breath-wrap { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.breath {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,92,230,.16), rgba(94,92,230,.05));
  display: flex; align-items: center; justify-content: center;
  animation: breathe 8s var(--ease) infinite;
  position: relative;
}
.breath::before, .breath::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(94,92,230,.25); animation: breathe 8s var(--ease) infinite;
}
.breath::after { inset: -28px; border-color: rgba(94,92,230,.12); }
.breath-core { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #0071e3, #8482ff); box-shadow: 0 0 24px rgba(94,92,230,.5); }
@keyframes breathe { 0%, 100% { transform: scale(0.82); } 50% { transform: scale(1.12); } }
.breath-lbl { font-size: 12px; font-weight: 600; color: var(--violet); letter-spacing: .06em; text-transform: uppercase; }

/* heart bpm */
.heart-wrap { position: absolute; bottom: 26px; left: 34px; display: flex; align-items: center; gap: 16px; }
.heart {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  animation: heartbeat 1.05s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  56% { transform: scale(1); }
}
.bpm-v { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.bpm-v small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.bpm-k { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }

/* sleep stages */
.sleep-wrap { position: absolute; bottom: 28px; left: 34px; right: 34px; }
.sleep-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 3px; }
.sleep-seg { height: 100%; border-radius: 5px; width: 0; transition: width 1.1s var(--ease); }
.sleep-wrap.on .sleep-seg { width: var(--w); }
.sleep-leg { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.sleep-leg i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.sleep-leg .dot { width: 8px; height: 8px; border-radius: 3px; }

/* gut wave */
.gutwave { position: absolute; bottom: 28px; left: 34px; right: 34px; height: 52px; }
.gutwave path { fill: none; stroke: url(#gutGrad); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(94,92,230,.4)); }

/* ════ THE LYXAA METHOD (interactive stepper) ════ */
#approach.lmx2 { background: #fff; position: relative; padding: 0; }
.lmx2-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 80px 0; }
#approach.lmx2 { height: 300vh; }
#approach.lmx2::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 40% at 18% 30%, rgba(0,113,227,.05), transparent 70%), radial-gradient(46% 38% at 86% 72%, rgba(42,140,240,.05), transparent 70%); }
.lmx2-inner { width: min(1240px, 100% - 48px); position: relative; z-index: 2; }
.lmx-eb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(0,113,227,.5); animation: lmxdot 2.4s var(--ease) infinite; }
@keyframes lmxdot { 0% { box-shadow: 0 0 0 0 rgba(0,113,227,.45); } 70% { box-shadow: 0 0 0 7px rgba(0,113,227,0); } 100% { box-shadow: 0 0 0 0 rgba(0,113,227,0); } }
.lmx2-head { margin-bottom: 38px; }
.lmx2-h2 { font-family: var(--font); font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: #16181d; margin: 14px 0 0; }
.lmx2-h2 .dim { color: #c4c9c7; }

.lmx2-body { display: grid; grid-template-columns: 230px 1fr; gap: 48px; align-items: stretch; }

/* left rail spine */
.lmx2-rail { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-left: 30px; }
.lmx2-spine { position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: #eceeed; border-radius: 2px; overflow: hidden; }
.lmx2-spine i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--blue), #2a8cf0); border-radius: 2px; box-shadow: 0 0 12px rgba(0,113,227,.5); transition: height .3s linear; }
.lmx2-node { position: relative; display: flex; align-items: center; gap: 14px; background: none; border: none; text-align: left; cursor: pointer; padding: 16px 0; font-family: var(--font); opacity: .5; transition: opacity .45s var(--ease); }
.lmx2-node::before { content: ''; position: absolute; left: -21px; top: 50%; transform: translate(-50%,-50%) scale(.5); width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid #d6dad8; transition: all .45s var(--ease); }
.lmx2-node.is-on { opacity: 1; }
.lmx2-node.is-on::before { background: var(--blue); border-color: var(--blue); transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 0 5px rgba(0,113,227,.14), 0 0 14px rgba(0,113,227,.5); }
.lmx2-node.done::before { background: #2a8cf0; border-color: #2a8cf0; }
.lmx2-dot { width: 46px; height: 46px; border-radius: 14px; background: #fff; color: #aab0ad; display: grid; place-items: center; flex: none; border: 1px solid rgba(16,20,28,.05); box-shadow: 0 4px 12px rgba(16,20,28,.05); transition: all .45s var(--ease); }
.lmx2-dot svg { width: 20px; height: 20px; }
.lmx2-node.is-on .lmx2-dot { background: linear-gradient(135deg, var(--blue), #2a8cf0); color: #fff; box-shadow: 0 8px 20px rgba(0,113,227,.34); }
.lmx2-meta { display: flex; flex-direction: column; gap: 2px; }
.lmx2-meta b { font-size: 16px; font-weight: 600; color: #16181d; letter-spacing: -.02em; }
.lmx2-meta small { font-size: 12px; color: #9aa19d; }

/* stage */
.lmx2-stage { position: relative; min-height: 440px; border-radius: 32px; overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #f3f6f7 100%); border: 1px solid rgba(16,20,28,.06); box-shadow: 0 40px 90px rgba(16,20,28,.09), 0 2px 8px rgba(16,20,28,.04); }
.lmx2-stage::before { content: ''; position: absolute; top: -30%; right: -10%; width: 460px; height: 460px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(0,113,227,.07), transparent 65%); }
.lmx2-ghost { position: absolute; top: -8%; right: 2%; font-family: var(--font); font-size: 320px; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: rgba(16,20,28,.035); z-index: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.lmx2-panel { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 18px; padding: 44px;
  background: linear-gradient(150deg, rgba(0,113,227,.025) 0%, rgba(42,140,240,.03) 100%);
  opacity: 0; transform: translateY(26px) scale(.99); pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.lmx2-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.lmx-copy { display: flex; flex-direction: column; justify-content: center; padding-right: 12px; }
.lmx-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #86868b; background: none; padding: 0; }
.lmx-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--tint,0,113,227)); }
.lmx-title { font-family: var(--font); font-size: clamp(26px, 2.7vw, 38px); font-weight: 600; letter-spacing: -.033em; line-height: 1.05; color: #1d1d1f; margin: 15px 0 0; text-wrap: balance; }
.lmx-text { font-size: 15.5px; line-height: 1.62; color: #6e6e73; margin: 14px 0 0; max-width: 42ch; text-wrap: pretty; }
.lmx-bullets { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 14px; }
.lmx-bullets li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 500; color: #1d1d1f; line-height: 1.4; }
.lmx-bullets svg { width: 15px; height: 15px; flex: none; padding: 5px; box-sizing: content-box; background: rgba(var(--tint,42,140,240),.13); border-radius: 50%; }

/* staged reveal of copy bits */
.lmx2-panel .lmx-tag, .lmx2-panel .lmx-title, .lmx2-panel .lmx-text, .lmx2-panel .lmx-bullets, .lmx2-panel .lmx-vcard {
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.lmx2-panel.is-on .lmx-tag { opacity: 1; transform: none; transition-delay: .08s; }
.lmx2-panel.is-on .lmx-title { opacity: 1; transform: none; transition-delay: .15s; }
.lmx2-panel.is-on .lmx-text { opacity: 1; transform: none; transition-delay: .22s; }
.lmx2-panel.is-on .lmx-bullets { opacity: 1; transform: none; transition-delay: .3s; }
.lmx2-panel.is-on .lmx-vcard:nth-child(1) { opacity: 1; transform: none; transition-delay: .26s; }
.lmx2-panel.is-on .lmx-vcard:nth-child(2) { opacity: 1; transform: none; transition-delay: .38s; }

.lmx-visual { display: grid; grid-template-rows: auto auto; gap: 14px; align-content: center; }
.lmx-vcard { background: #f5f5f7; border: 1px solid rgba(0,0,0,.05); border-radius: 20px; padding: 22px 24px; box-shadow: none; }
.lmx-vc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lmx-vc-lbl { font-size: 12.5px; font-weight: 600; color: #9aa19d; }
.lmx-vc-cat { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9aa19d; }
.lmx-vc-name { display: block; font-size: 18px; font-weight: 600; color: #16181d; letter-spacing: -.02em; margin-top: 4px; }
.lmx-chip { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.lmx-chip.up { color: #1a8f53; background: #e3f6ec; }
.lmx-chip.sub { color: #b06f17; background: #fcefd7; }
.lmx-chip.out { color: #d12846; background: #ffe4ea; }

/* measure: ring */
.lmx-score-card { display: flex; flex-direction: column; align-items: center; }
.lmx-score-card .lmx-vc-top { width: 100%; }
.lmx-ring { position: relative; width: 132px; height: 132px; margin: 14px 0 4px; }
.lmx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lmx-ring-bg { fill: none; stroke: #e8e8ed; stroke-width: 9; }
.lmx-ring-fg { fill: none; stroke: url(#lmxRingGrad); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 92; }
.lmx-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lmx-ring-mid b { font-size: 38px; font-weight: 600; letter-spacing: -.04em; color: #16181d; line-height: 1; }
.lmx-ring-mid small { font-size: 12px; color: #9aa19d; margin-top: 2px; }

/* measure: systems */
.lmx-sys-card .lmx-vc-lbl { display: block; margin-bottom: 14px; }
.lmx-sys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.lmx-sys li { display: flex; align-items: center; gap: 12px; }
.lmx-sys-k { font-size: 13.5px; color: #16181d; width: 74px; flex: none; }
.lmx-track { flex: 1; height: 7px; border-radius: 4px; background: #eef0ef; overflow: hidden; }
.lmx-track i { display: block; height: 100%; width: var(--w); border-radius: 4px; }
.lmx-sys-s { font-size: 11px; font-weight: 600; width: 52px; text-align: right; flex: none; }
.lmx-sys-s.opt { color: #1a8f53; } .lmx-sys-s.sub { color: #b06f17; } .lmx-sys-s.out { color: #d12846; }

/* mentor: focus + plan */
.lmx-vc-val { font-size: 34px; font-weight: 600; letter-spacing: -.04em; color: #16181d; line-height: 1; margin: 16px 0 0; display: flex; align-items: baseline; gap: 5px; }
.lmx-vc-val small { font-size: 13px; font-weight: 400; color: #9aa19d; }
.lmx-scale { position: relative; height: 7px; border-radius: 4px; margin: 14px 0 8px; background: linear-gradient(90deg, #ff5f7a, #f6b73c 45%, #0071e3 72%, #0071e3); }
.lmx-scale-now { position: absolute; top: 50%; left: var(--x); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #16181d; transform: translate(-50%,-50%); }
.lmx-scale-lbl { display: flex; justify-content: space-between; font-size: 11.5px; color: #9aa19d; }
.lmx-plan { background: #111318; color: #fff; }
.lmx-plan-top { display: flex; align-items: center; gap: 11px; }
.lmx-plan-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none; }
.lmx-plan-ic svg { width: 17px; height: 17px; }
.lmx-plan-top b { font-size: 15px; font-weight: 600; }
.lmx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }
.lmx-pchip { font-size: 12px; color: rgba(255,255,255,.66); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 13px; }
.lmx-pchip.on { background: #fff; color: #111318; border-color: #fff; }
.lmx-note { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62); margin: 16px 0 0; font-style: italic; }

/* monitor: chart */
.lmx-chart .lmx-graph { width: 100%; height: 132px; margin: 16px 0 6px; overflow: visible; }
.lmx-grid-l { stroke: #eceeed; stroke-width: 1; }
.lmx-line { fill: none; stroke: #2a8cf0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 360; stroke-dashoffset: 360; }
.lmx2-panel.is-on .lmx-line { transition: stroke-dashoffset 1.4s cubic-bezier(.3,0,.2,1) .4s; stroke-dashoffset: 0; }
.lmx-area { fill: #2a8cf0; opacity: 0; }
.lmx2-panel.is-on .lmx-area { transition: opacity .8s ease 1s; opacity: .14; }
.lmx-pt { fill: #2a8cf0; stroke: #fff; stroke-width: 2.5; opacity: 0; }
.lmx2-panel.is-on .lmx-pt { transition: opacity .4s ease 1.4s; opacity: 1; }
.lmx-chart-x { display: flex; justify-content: space-between; font-size: 11px; color: #b4bab7; margin-top: 4px; }
.lmx-deltas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lmx-delta { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 4px 18px rgba(16,20,28,.05); }
.lmx-delta b { font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: #d12846; line-height: 1; display: block; }
.lmx-delta.up b { color: #1a8f53; }
.lmx-delta small { font-size: 12.5px; color: #9aa19d; margin-top: 6px; display: block; }


/* ════ TESTIMONIALS (auto-scroll marquee) ════ */
#testimonials { background: linear-gradient(180deg, #fbfcfd 0%, #f3f6f8 100%); position: relative; overflow: hidden; }
.ts2-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
.ts-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #828985; }
.tst-dot { width: 7px; height: 7px; border-radius: 50%; background: #0071e3; box-shadow: 0 0 0 0 rgba(52,210,123,.5); animation: lmxdot 2.4s var(--ease) infinite; display: inline-block; }
.ts2-h2 { font-family: var(--font); font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; color: #16181d; margin: 16px 0 0; }
.ts2-h2 .dim { color: #b8bdbb; }
.ts2-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; text-decoration: none; font-family: var(--font); font-size: 14px; color: #16181d; background: #fff; border: 1px solid #e6e9e8; border-radius: 999px; padding: 9px 18px; box-shadow: 0 6px 20px rgba(16,20,28,.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ts2-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,20,28,.1); }
.ts2-badge b { font-weight: 700; font-size: 15px; }
.ts2-stars { color: #f6b73c; letter-spacing: 1px; font-size: 13px; }
.ts2-badge span:last-child { color: #9aa19d; font-size: 13px; }

.rv-marquee { position: relative; overflow: hidden; padding: 8px 0; -webkit-mask-image: none; }
.rv-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
.rv-track--l { animation: rvscrollL 46s linear infinite; }
.rv-track--r { animation: rvscrollR 46s linear infinite; }
.rv-marquee:hover .rv-track { animation-play-state: paused; }
@keyframes rvscrollL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rvscrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.rv-card { flex: 0 0 380px; width: 380px; background: #fff; border: 1px solid #eef1f0; border-radius: 24px; padding: 26px 28px; box-shadow: 0 10px 30px rgba(16,20,28,.05); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.rv-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(16,20,28,.1); }
.rv-card-top { display: flex; align-items: center; gap: 13px; }
.rv-card-top img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.rv-card-id { flex: 1; min-width: 0; }
.rv-card-id b { display: block; font-size: 15px; font-weight: 600; color: #16181d; letter-spacing: -.01em; }
.rv-card-id small { font-size: 12.5px; color: #9aa19d; }
.rv-g { flex: none; }
.rv-stars { color: #f6b73c; letter-spacing: 2px; font-size: 14px; margin: 16px 0 10px; }
.rv-text { font-size: 14.5px; line-height: 1.6; color: #4a524e; margin: 0; }

.rv-edge { position: absolute; top: 0; bottom: 0; width: 14%; z-index: 4; pointer-events: none; }
.rv-edge--l { left: 0; background: linear-gradient(90deg, #f7fafb, transparent); }
.rv-edge--r { right: 0; background: linear-gradient(270deg, #f3f6f8, transparent); }

@media (max-width: 600px) { .rv-card { flex-basis: 300px; width: 300px; } .rv-edge { width: 8%; } }

/* ════ THE REALITY (dark, futuristic) ════ */
.rly { position: relative; overflow: hidden; padding: clamp(96px,11vw,148px) 0; background: #07090d; color: #fff; }
.rly-atmos { position: absolute; inset: 0; pointer-events: none; }
.rly-glow { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 1100px; height: 760px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,113,227,.26), rgba(0,113,227,.07) 52%, transparent 76%); filter: blur(8px); animation: rlyBreathe 12s ease-in-out infinite; }
@keyframes rlyBreathe { 0%,100% { opacity:.7; transform: translateX(-50%) scale(1); } 50% { opacity:1; transform: translateX(-50%) scale(1.08); } }
.rly-grid { position: absolute; inset: 0; opacity: .5; -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 75%);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 58px 58px; }
.rly-inner { position: relative; z-index: 2; }
.rly-head { text-align: center; max-width: 920px; margin: 0 auto; }
.rly-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.66); padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.rly-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #6ab1f7; box-shadow: 0 0 0 0 rgba(106,177,247,.6); animation: lmxdot 2.4s var(--ease) infinite; }
.rly-title { font-family: var(--font); font-size: clamp(32px, 4.6vw, 60px); font-weight: 600; letter-spacing: -.04em; line-height: 1.04; margin: 26px 0 0; text-wrap: balance; }
.rly-title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.06em; background: linear-gradient(100deg, #6ab1f7, #7fd9bf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rly-lead { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62; color: rgba(255,255,255,.58); margin: 24px auto 0; max-width: 60ch; }

.rly-stage { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px,6vw,90px); align-items: center; margin: clamp(56px,7vw,84px) auto 0; max-width: 1080px;
  padding: clamp(34px,4vw,52px); border-radius: 30px; background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.rly-figs { display: flex; gap: clamp(10px,1.6vw,20px); justify-content: center; }
.rly-fig { width: clamp(46px,6vw,76px); opacity: 0; transform: translateY(20px) scale(.82); }
.rly-stage.on .rly-fig { animation: rlyPop .6s cubic-bezier(.34,1.5,.5,1) forwards; }
.rly-fig svg { width: 100%; height: auto; display: block; }
.rly-fig.risk { color: #2a8cf0; }
.rly-fig.risk svg { filter: drop-shadow(0 6px 22px rgba(42,140,240,.6)); }
.rly-fig.safe { color: rgba(255,255,255,.2); }
.rly-fig:nth-child(1){animation-delay:.05s}.rly-fig:nth-child(2){animation-delay:.15s}.rly-fig:nth-child(3){animation-delay:.25s}.rly-fig:nth-child(4){animation-delay:.4s}.rly-fig:nth-child(5){animation-delay:.5s}
.rly-stage.on .rly-fig.risk { animation: rlyPop .6s cubic-bezier(.34,1.5,.5,1) forwards, rlyPulse 3s ease-in-out 1.1s infinite; }
@keyframes rlyPop { to { opacity: 1; transform: none; } }
@keyframes rlyPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.rly-bignum { display: flex; align-items: baseline; gap: 14px; }
.rly-bignum .num-v { font-family: var(--font); font-size: clamp(78px,9vw,128px); font-weight: 600; letter-spacing: -.05em; line-height: .82; background: linear-gradient(120deg, #6ab1f7, #2a8cf0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rly-of { font-family: var(--font); font-size: clamp(22px,2.4vw,30px); font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: -.02em; }
.rly-caption { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.62); margin: 16px 0 0; max-width: 32ch; }
.rly-key { display: flex; gap: 24px; margin: 22px 0 0; }
.rly-key span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.66); }
.rly-key i { width: 10px; height: 10px; border-radius: 50%; }
.rly-key .risk { background: #2a8cf0; box-shadow: 0 0 10px rgba(42,140,240,.7); } .rly-key .safe { background: rgba(255,255,255,.26); }

.rly-shift { max-width: 1080px; margin: 22px auto 0; padding: 22px 28px; border-radius: 20px; background: linear-gradient(120deg, rgba(0,113,227,.16), rgba(0,113,227,.05)); border: 1px solid rgba(106,177,247,.22); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.rly-shift-tag { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8fc4f9; }
.rly-shift-p { font-size: clamp(15px,1.6vw,18px); line-height: 1.5; color: rgba(255,255,255,.82); margin: 0; }
.rly-shift-p b { color: #fff; font-weight: 600; }
.rly-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 1080px; margin: 16px auto 0; }
.rly-stat { position: relative; overflow: hidden; padding: 28px 26px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); }
.rly-stat::after { content: ''; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; background: linear-gradient(90deg, #2a8cf0, transparent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.rly-stat:hover { transform: translateY(-5px); border-color: rgba(106,177,247,.32); background: rgba(255,255,255,.06); }
.rly-stat:hover::after { transform: scaleX(1); }
.rly-stat b { display: block; font-family: var(--font); font-size: clamp(36px,3.8vw,50px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #fff; }
.rly-stat small { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.56); margin-top: 12px; }
.rly-src { display: inline-flex; margin-top: 14px; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(143,196,249,.72); padding: 4px 9px; border-radius: 100px; border: 1px solid rgba(106,177,247,.22); background: rgba(106,177,247,.07); }
.rly-cite { max-width: 1080px; margin: 18px auto 0; font-size: 12px; color: rgba(255,255,255,.38); text-align: center; }
.rly-cite a { color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(106,177,247,.4); transition: color .3s; }
.rly-cite a:hover { color: #6ab1f7; }

/* ── The silent decade timeline ── */
.rly-decade { max-width: 1080px; margin: clamp(48px,6vw,72px) auto 0; }
.rly-decade-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(28px,3.5vw,40px); }
.rly-decade-tag { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8fc4f9; }
.rly-decade-sub { margin: 0; font-size: 14px; color: rgba(255,255,255,.44); }
.rly-track { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,36px); padding-top: 26px; }
.rly-track-line { position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.rly-track-line i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #2a8cf0, #7fd9bf); box-shadow: 0 0 14px rgba(42,140,240,.8); transition: width .2s linear; }
.rly-phase { position: relative; opacity: .32; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rly-phase.lit { opacity: 1; transform: none; }
.rly-phase-dot { position: absolute; top: -25px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); border: 2px solid #07090d; transition: background .5s, box-shadow .5s; }
.rly-phase.lit .rly-phase-dot { background: #2a8cf0; box-shadow: 0 0 0 4px rgba(42,140,240,.18), 0 0 16px rgba(42,140,240,.7); }
.rly-phase b { display: block; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.rly-phase p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.52); max-width: 30ch; }
.rly-phase-flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; font-weight: 600; color: #7fd9bf; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(127,217,191,.3); background: rgba(127,217,191,.08); opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s; }
.rly-phase-flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7fd9bf; box-shadow: 0 0 8px rgba(127,217,191,.9); }
.rly-phase.lit .rly-phase-flag { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .rly-stage { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .rly-figs { flex-wrap: wrap; }
  .rly-readout { display: flex; flex-direction: column; align-items: center; }
  .rly-caption, .rly-key { margin-left: auto; margin-right: auto; }
  .rly-stats { grid-template-columns: 1fr; }
  .rly-track { grid-template-columns: 1fr; gap: 28px; padding-top: 0; padding-left: 26px; }
  .rly-track-line { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .rly-track-line i { width: 100% !important; height: var(--rlyv, 0%); }
  .rly-phase-dot { top: 3px; left: -26px; }
}

/* WHO-sourced authority band */
.rly-source { max-width: 1080px; margin: 22px auto 0; display: flex; gap: 18px; align-items: flex-start; padding: 20px 24px; border-radius: 18px; background: rgba(106,177,247,.06); border: 1px solid rgba(106,177,247,.16); }
.rly-source-lbl { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: #6ab1f7; padding-top: 2px; }
.rly-source-txt { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.6); }
.rly-source-txt a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(106,177,247,.5); transition: color .3s; }
.rly-source-txt a:hover { color: #6ab1f7; }
.rly-source-txt strong { color: rgba(255,255,255,.85); font-weight: 600; }
.rly-authority { max-width: 1080px; margin: 22px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.rly-auth-intro { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.rly-auth-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; }
.rly-auth-list li { font-family: var(--font); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.66); position: relative; }
.rly-auth-list li:not(:last-child)::after { content: ''; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); }
@media (max-width: 860px) {
  .rly-source { flex-direction: column; gap: 10px; }
}

/* AEO question blocks */
.rly-qa { max-width: 1080px; margin: 40px auto 0; }
.rly-qa-kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin: 0 0 18px; }
.rly-qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rly-qcard { position: relative; padding: 26px 24px 22px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: transform .5s var(--ease), border-color .5s, background .5s; }
.rly-qcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(106,177,247,.7), transparent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.rly-qcard:hover { transform: translateY(-5px); border-color: rgba(106,177,247,.3); background: rgba(255,255,255,.06); }
.rly-qcard:hover::before { transform: scaleX(1); }
.rly-qnum { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: rgba(106,177,247,.85); }
.rly-qcard h3 { font-family: var(--font); font-size: clamp(16px,1.5vw,18px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: #fff; margin: 12px 0 10px; }
.rly-qcard p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.62); margin: 0 0 16px; }
.rly-qcard p strong { color: rgba(255,255,255,.92); font-weight: 600; }
.rly-qcite { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.45); padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); width: 100%; }
@media (max-width: 860px) {
  .rly-qa-grid { grid-template-columns: 1fr; }
}

/* ════ SERVICES (Apple bento) ════ */
.svc-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.svc-h2 { font-family: var(--font); font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; color: #15181d; margin: 16px 0 0; }
.svc-h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.05em; }
.svc-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: #828985; margin: 22px auto 0; max-width: 56ch; }
/* ════ SERVICES — varied bento (vb) ════ */
.vb { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; }
.vb-cell { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 28px;
  background: #f4f6f9; border: 1px solid #e9edf2; display: flex; flex-direction: column;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s var(--ease), border-color .45s var(--ease); }
.vb-cell:hover { transform: translateY(-5px); box-shadow: 0 30px 64px rgba(16,24,40,.1); border-color: #dbe2ec; }
.vb-h { font-family: var(--font); font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; color: #15181d; margin: 0; }
.vb-h.sm { font-size: 18px; }
.vb-sub { font-size: 13px; line-height: 1.5; color: #828a86; margin: 7px 0 0; }

/* A — integrations */
.vb-int { grid-column: 1; grid-row: 1; justify-content: flex-end; background: linear-gradient(180deg, #eef3fb, #e6edf8); }
.vb-logos { display: flex; gap: 8px; position: absolute; top: 24px; left: 28px; }
.vb-logo { width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center; color: #15181d; box-shadow: 0 5px 14px rgba(16,24,40,.08); transition: transform .5s var(--ease); }
.vb-logo svg { width: 19px; height: 19px; }
.vb-logo.l2 { color: var(--blue); } .vb-logo.l3 { color: #e0524d; } .vb-logo.l4 { color: #6a4ad9; }
.vb-int:hover .vb-logo { transform: translateY(-3px); }
.vb-int:hover .vb-logo.l2 { transition-delay: .04s; } .vb-int:hover .vb-logo.l3 { transition-delay: .08s; } .vb-int:hover .vb-logo.l4 { transition-delay: .12s; }

/* B — portrait, spans both rows */
.vb-portrait { grid-column: 2; grid-row: 1 / 3; padding: 0; border: none; background: #11202e; }
.vb-img { position: absolute; inset: 0; width: 100%; height: 100%; --radius: 0; }
.vb-img::part(image), .vb-img img { width: 100%; height: 100%; object-fit: cover; }
.vb-portrait-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,26,.05) 0%, rgba(6,16,26,.08) 40%, rgba(6,16,26,.72) 100%); z-index: 1; pointer-events: none; }
.vb-portrait-tx { position: absolute; left: 28px; bottom: 28px; right: 24px; z-index: 2; }
.vb-pt-eyebrow { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.vb-pt-title { font-family: var(--font); font-size: clamp(28px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; color: #fff; margin: 10px 0 0; }

/* C — DNA */
.vb-dna { grid-column: 3; grid-row: 1; justify-content: flex-end; background: linear-gradient(165deg, #eaf1fb, #dde8f6); }
.vb-dna-art { position: absolute; top: -6px; right: 2px; width: 120px; height: 120px; color: var(--blue); opacity: .85; filter: drop-shadow(0 8px 18px rgba(0,113,227,.18)); }
.vb-dna-art svg { width: 100%; height: 100%; animation: vbHelix 9s ease-in-out infinite; transform-origin: center; }
@keyframes vbHelix { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.vb-tag { align-self: flex-start; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: rgba(0,113,227,.1); border-radius: 999px; padding: 5px 11px; margin-bottom: 10px; }

/* D — steps */
.vb-step { grid-column: 4; grid-row: 1; background: #fff; justify-content: space-between; }
.vb-step-top { display: flex; align-items: center; justify-content: space-between; }
.vb-step-no { font-family: var(--font); font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: #d6dae0; }
.vb-dots { display: flex; gap: 6px; }
.vb-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e4e8ee; transition: background .4s var(--ease); }
.vb-dots i.on { background: var(--blue); }
.vb-step:hover .vb-dots i:nth-child(3) { background: #aacdf5; }

/* E — stat */
.vb-stat { grid-column: 3; grid-row: 2; justify-content: space-between; background: linear-gradient(180deg, #f4f6f9, #eaeef4); }
.vb-stat-num { font-family: var(--font); font-size: clamp(40px, 4.4vw, 56px); font-weight: 600; letter-spacing: -.04em; color: #15181d; line-height: 1; }
.vb-stat-btn { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: #15181d; background: #fff; border: 1px solid #e4e8ee; border-radius: 999px; padding: 8px 16px 8px 8px; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.vb-stat-btn:hover { transform: translateX(3px); box-shadow: 0 10px 24px rgba(16,24,40,.1); }
.vb-stat-phone { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.vb-stat-phone svg { width: 14px; height: 14px; }

/* F — pills */
.vb-pills { grid-column: 1; grid-row: 2; justify-content: center; gap: 11px; background: #fff; }
.vb-pill { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-family: var(--font); font-size: 14px; font-weight: 500; color: #41474c; background: #f4f6f9; border: 1px solid #e7ebf1; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all .3s var(--ease); }
.vb-pill span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 1px solid #e2e6ec; font-size: 14px; line-height: 1; color: #9aa19d; transition: all .3s var(--ease); }
.vb-pill:hover, .vb-pill.is-on { background: rgba(0,113,227,.08); border-color: rgba(0,113,227,.25); color: var(--blue); }
.vb-pill:hover span, .vb-pill.is-on span { background: var(--blue); border-color: var(--blue); color: #fff; }

/* G — network */
.vb-net { grid-column: 4; grid-row: 2; justify-content: flex-end; background: linear-gradient(165deg, #eef3fb, #e4edf7); }
.vb-net-art { position: absolute; inset: 0; }
.vb-orbit { position: absolute; left: 56%; top: 40%; border: 1px dashed #c8d6ea; border-radius: 50%; transform: translate(-50%,-50%); }
.vb-orbit.o1 { width: 120px; height: 120px; } .vb-orbit.o2 { width: 184px; height: 184px; }
.vb-node { position: absolute; border-radius: 50%; overflow: hidden; background: #cdd8e6; border: 2px solid #fff; box-shadow: 0 6px 14px rgba(16,24,40,.12); }
.vb-node img { width: 100%; height: 100%; object-fit: cover; }
.vb-node.center { width: 44px; height: 44px; left: 56%; top: 40%; transform: translate(-50%,-50%); z-index: 3; }
.vb-node.n1 { width: 30px; height: 30px; left: 30%; top: 26%; animation: vbFloat 5s ease-in-out infinite; }
.vb-node.n2 { width: 28px; height: 28px; left: 84%; top: 30%; animation: vbFloat 5s ease-in-out infinite .8s; }
.vb-node.n3 { width: 22px; height: 22px; left: 30%; top: 60%; background: #b7c6da; animation: vbFloat 5s ease-in-out infinite 1.6s; }
.vb-node.n4 { width: 24px; height: 24px; left: 82%; top: 62%; background: #c4d1e2; animation: vbFloat 5s ease-in-out infinite 2.2s; }
@keyframes vbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.vb-net .vb-h, .vb-net .vb-sub { position: relative; z-index: 2; }

@media (max-width: 980px) {
  .vb { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .vb-int { grid-column: 1; grid-row: 1; } .vb-dna { grid-column: 2; grid-row: 1; }
  .vb-portrait { grid-column: 1; grid-row: 2 / 4; } .vb-step { grid-column: 2; grid-row: 2; }
  .vb-stat { grid-column: 2; grid-row: 3; } .vb-pills { grid-column: 1; grid-row: 4; } .vb-net { grid-column: 2; grid-row: 4; }
}
@media (max-width: 600px) {
  .vb { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .vb-cell { grid-column: 1 !important; grid-row: auto !important; min-height: 180px; }
  .vb-portrait { min-height: 320px; }
}

/* ════ CONDITIONS (interactive list) ════ */
#conditions { background: linear-gradient(180deg, #f6f8f8 0%, #fbfcfc 100%); }
.cnd-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.cnd-lead { font-size: 16px; line-height: 1.6; color: #828985; max-width: 50ch; }
.cnd-list { display: flex; flex-direction: column; }
.cnd-row { display: grid; grid-template-columns: 52px 1fr 150px 48px; gap: 28px; align-items: center;
  padding: 28px 8px; border-top: 1px solid #ececec; cursor: pointer; position: relative; overflow: hidden;
  transition: padding .45s var(--ease), background .45s var(--ease); }
.cnd-row:last-child { border-bottom: 1px solid #ececec; }
.cnd-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--blue), #2a8cf0); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.cnd-row:hover, .cnd-row:focus-visible { background: #f7f8f8; padding-left: 24px; padding-right: 24px; outline: none; }
.cnd-row:hover::before, .cnd-row:focus-visible::before { transform: scaleY(1); }
.cnd-idx { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 13px; font-weight: 600; color: #c4c9c6; transition: color .45s var(--ease); }
.cnd-row:hover .cnd-idx, .cnd-row:focus-visible .cnd-idx { color: var(--blue); }
.cnd-top { display: flex; align-items: center; gap: 14px; }
.cnd-n { font-family: var(--font); font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: #16181d; margin: 0; }
.cnd-tag { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9aa19d; background: #f2f4f3; border-radius: 999px; padding: 4px 10px; }
.cnd-d { font-size: 14px; line-height: 1.5; color: #8a8f8c; margin: 0; max-width: 60ch;
  max-height: 0; opacity: 0; transform: translateY(-4px); overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease), transform .4s var(--ease); }
.cnd-row:hover .cnd-d, .cnd-row:focus-visible .cnd-d { max-height: 80px; opacity: 1; margin-top: 8px; transform: none; }
.cnd-stat { text-align: right; }
.cnd-stat b { display: block; font-family: var(--font); font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #16181d; line-height: 1; background: linear-gradient(180deg, #16181d, #6b726e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cnd-stat small { font-size: 11.5px; color: #9aa19d; margin-top: 5px; display: block; }
.cnd-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #e6e8e7; display: grid; place-items: center; color: #9aa19d; justify-self: end; transition: all .45s var(--ease); }
.cnd-row:hover .cnd-arrow, .cnd-row:focus-visible .cnd-arrow { background: #16181d; border-color: #16181d; color: #fff; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .cnd-head { grid-template-columns: 1fr; gap: 18px; }
  .cnd-row { grid-template-columns: 36px 1fr; gap: 14px; padding: 22px 6px; }
  .cnd-stat, .cnd-arrow { display: none; }
  .cnd-d { max-height: 120px; opacity: 1; margin-top: 8px; transform: none; }
}

/* ════ APP SHOWCASE (bento) ════ */
#showcase { background: #fff; position: relative; overflow: hidden; }
.sol-head { margin-bottom: 40px; }
.sol-pill { display: inline-block; font-family: var(--mono, 'Spline Sans Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); background: #e7f6ef; border-radius: 999px; padding: 6px 14px; }
.sol-h2 { font-family: var(--font); font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; color: #16181d; margin: 18px 0 0; }
.sol-h2 .dim { color: #b8bdbb; }

.sol-grid { display: grid; grid-template-columns: 1.62fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.sol-feat { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; background: #f5f6f6; border-radius: 30px; overflow: hidden; }
.sol-feat-media { flex: 1; min-height: 300px; overflow: hidden; }
.sol-feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.sol-feat:hover .sol-feat-media img { transform: scale(1.04); }
.sol-feat-body { padding: 32px 36px 36px; }
.sol-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.sol-badge { width: 44px; height: 44px; border-radius: 13px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(16,20,28,.07); }
.sol-badge-v { width: auto; padding: 0 16px; font-family: var(--font); font-size: 20px; font-weight: 600; color: #16181d; letter-spacing: -.02em; gap: 5px; }
.sol-badge-v small { font-size: 11px; font-weight: 500; color: #9aa19d; }
.sol-plus { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e2e4e3; background: #fff; display: grid; place-items: center; cursor: pointer; margin-left: auto; transition: background .2s, transform .2s; }
.sol-plus:hover { background: #f0f2f1; transform: rotate(90deg); }
.sol-feat-h { font-family: var(--font); font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; color: #16181d; margin: 0; }
.sol-feat-p { font-size: 16px; line-height: 1.55; color: #828985; margin: 14px 0 0; max-width: 46ch; font-family: var(--font); }
.sol-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--font); font-size: 15px; font-weight: 500; color: #16181d; text-decoration: none; transition: gap .25s var(--ease); }
.sol-more:hover { gap: 16px; }
.sol-arrow { width: 32px; height: 32px; border-radius: 50%; background: #111318; display: grid; place-items: center; }

.sol-tall { position: relative; border-radius: 30px; overflow: hidden; min-height: 232px; display: flex; }
.sol-tall-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s var(--ease); }
.sol-tall:hover .sol-tall-img { transform: scale(1.05); }
.sol-tall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,13,.05) 0%, rgba(8,14,13,.12) 45%, rgba(8,14,13,.7) 100%); }
.sol-tag { position: relative; z-index: 1; align-self: flex-start; margin: 22px 0 0 24px; font-family: var(--mono, 'Spline Sans Mono', monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: 5px 12px; }
.sol-tall-cap { position: absolute; z-index: 1; left: 24px; bottom: 22px; }
.sol-tall-cap b { font-family: var(--font); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; color: #fff; }

/* legacy phone-mockup styles (unused markup) */
.tsx { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.tsx-h2 { font-family: var(--font); font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; color: #16181d; margin: 14px 0 0; }
.tsx-grad { background: linear-gradient(90deg, #0a8f84, #0071e3 60%, #0071e3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tsx-sub { font-size: 18px; line-height: 1.6; color: #828985; margin: 22px 0 0; max-width: 44ch; font-family: var(--font); }
.tsx-feats { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.tsx-feats li { display: flex; gap: 16px; align-items: flex-start; }
.tsx-fi { flex: none; width: 44px; height: 44px; border-radius: 13px; background: #f0f2f1; display: grid; place-items: center; }
.tsx-feats h4 { font-family: var(--font); font-size: 17px; font-weight: 600; color: #16181d; margin: 2px 0 4px; }
.tsx-feats p { font-size: 14.5px; line-height: 1.5; color: #8a8a8a; margin: 0; font-family: var(--font); max-width: 38ch; }
.tsx-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 38px; background: #111318; color: #fff; font-family: var(--font); font-size: 16px; font-weight: 500; text-decoration: none; border-radius: 999px; padding: 13px 13px 13px 26px; transition: transform .25s var(--ease); }
.tsx-cta:hover { transform: translateY(-2px); }
.tsx-cta .pc-arrow { width: 36px; height: 36px; border-radius: 50%; background: #2a3a33; display: grid; place-items: center; transition: transform .25s var(--ease); }
.tsx-cta:hover .pc-arrow { transform: translateX(3px); }

/* phone stage */
.tsx-stage { position: relative; display: flex; justify-content: center; }
.tsx-phone { width: 296px; height: 600px; border-radius: 46px; background: #fff;
  border: 1px solid #e8eae9; box-shadow: 0 40px 90px rgba(16,20,28,.12), 0 8px 24px rgba(16,20,28,.06);
  overflow: hidden; position: relative; }
.tp-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; border-radius: 14px; background: #111318; z-index: 3; }
.tp-screen { position: absolute; inset: 0; background: #f6f7f7; padding: 54px 18px 18px; display: flex; flex-direction: column; }
.tp-greet { font-size: 12px; color: #9aa19d; font-family: var(--font); }
.tp-name { font-family: var(--font); font-size: 21px; font-weight: 600; color: #16181d; letter-spacing: -.02em; margin-top: 2px; }
.tp-score { margin-top: 16px; background: #111318; border-radius: 22px; padding: 20px; position: relative; overflow: hidden; }
.tp-score::before { content: ''; position: absolute; top: -40%; right: -10%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(42,140,240,.3), transparent 70%); }
.tp-score-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.tp-score-big { font-family: var(--font); font-size: 46px; font-weight: 600; color: #fff; letter-spacing: -.04em; line-height: 1; }
.tp-score-lbl { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 5px; font-family: var(--font); }
.tp-delta { font-size: 12px; font-weight: 600; color: #4ade80; background: rgba(74,222,128,.16); padding: 4px 11px; border-radius: 100px; }
.tp-track { margin-top: 16px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; position: relative; }
.tp-track i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #2a8cf0, #4ade80); transition: width 1.2s cubic-bezier(.3,0,.2,1) .3s; }
.tsx-stage.in .tp-track i { width: 82%; }
.tp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tp-m { background: #fff; border-radius: 16px; padding: 14px; border: 1px solid #ececec; }
.tp-m-k { font-size: 10.5px; color: #a0a7a3; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font); }
.tp-m-v { font-family: var(--font); font-size: 20px; font-weight: 600; color: #16181d; letter-spacing: -.02em; margin-top: 5px; }
.tp-m-v small { font-size: 11px; font-weight: 400; color: #a0a7a3; }
.tp-chat { margin-top: 12px; background: #fff; border-radius: 18px; padding: 15px; border: 1px solid #ececec; flex: 1; }
.tp-c-h { font-size: 12px; font-weight: 600; color: #16181d; margin-bottom: 11px; display: flex; align-items: center; gap: 7px; font-family: var(--font); }
.tp-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.tp-bubble { font-size: 11.5px; line-height: 1.45; padding: 10px 13px; border-radius: 15px; max-width: 90%; margin-bottom: 8px; font-family: var(--font); }
.tp-bubble.user { background: #0071e3; color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.tp-bubble.doc { background: #f0f2f1; color: #3a4540; border-bottom-left-radius: 5px; }
.tp-doc-tag { font-size: 10px; color: #a0a7a3; margin-bottom: 5px; font-family: var(--font); }

/* floating cards */
.tsx-float { position: absolute; display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: 0 14px 40px rgba(16,20,28,.13); border: 1px solid #f0f0f0; }
.tf1 { top: 20%; left: -4%; }
.tf2 { bottom: 16%; right: -6%; }
@keyframes tfloat { 50% { transform: translateY(-12px); } }

/* ── Apple-style scroll choreography ── */
.tsx-phone { opacity: 0; transform: translateY(54px) scale(.94);
  transition: opacity 1s var(--ease), transform 1.05s cubic-bezier(.22,.7,.24,1); will-change: transform, opacity; }
.tsx-stage.in .tsx-phone { opacity: 1; transform: none; }
/* inner UI staggers up after the phone lands */
.tp-greet, .tp-name, .tp-score, .tp-metrics, .tp-chat {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s cubic-bezier(.22,.7,.24,1); }
.tsx-stage.in .tp-greet { transition-delay: .34s; }
.tsx-stage.in .tp-name  { transition-delay: .40s; }
.tsx-stage.in .tp-score { transition-delay: .48s; }
.tsx-stage.in .tp-metrics { transition-delay: .58s; }
.tsx-stage.in .tp-chat  { transition-delay: .68s; }
.tsx-stage.in .tp-greet, .tsx-stage.in .tp-name, .tsx-stage.in .tp-score,
.tsx-stage.in .tp-metrics, .tsx-stage.in .tp-chat { opacity: 1; transform: none; }
/* chat bubbles type in one by one */
.tp-bubble, .tp-doc-tag { opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity .55s var(--ease), transform .55s cubic-bezier(.34,1.3,.5,1); }
.tsx-stage.in .tp-bubble.user { transition-delay: .8s; }
.tsx-stage.in .tp-doc-tag    { transition-delay: 1.0s; }
.tsx-stage.in .tp-bubble.doc { transition-delay: 1.12s; }
.tsx-stage.in .tp-bubble, .tsx-stage.in .tp-doc-tag { opacity: 1; transform: none; }
/* floating cards drift in from the sides */
.tsx-float { opacity: 0; }
.tf1 { transform: translateX(-26px); }
.tf2 { transform: translateX(26px); }
.tsx-float { transition: opacity .7s var(--ease), transform .8s cubic-bezier(.22,.8,.24,1); }
.tsx-stage.in .tf1 { opacity: 1; transform: none; transition-delay: .9s; animation: tfloat 5s ease-in-out 1.7s infinite; }
.tsx-stage.in .tf2 { opacity: 1; transform: none; transition-delay: 1.05s; animation: tfloat 5s ease-in-out -2.5s infinite; }
@media (prefers-reduced-motion: reduce) {
  .tsx-phone, .tp-greet, .tp-name, .tp-score, .tp-metrics, .tp-chat, .tp-bubble, .tp-doc-tag, .tsx-float { opacity: 1; transform: none; transition: none; }
}
.tf-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.tf-ic.teal { background: #d9f3ef; }
.tf-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); flex: none; }
.tf-k { font-family: var(--font); font-size: 11px; color: #9aa19d; }
.tf-v { font-family: var(--font); font-size: 13.5px; font-weight: 600; color: #16181d; margin-top: 1px; }

/* ════ JOURNEY ════ */
#journey { overflow: hidden; }
.caro-head { display: flex; align-items: flex-end; justify-content: space-between; }
.caro {
  display: flex; gap: 20px; margin-top: 48px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px max(calc((100vw - 1240px)/2), 3vw) 32px;
  scrollbar-width: none;
}
.caro::-webkit-scrollbar { display: none; }
.c-card {
  flex: 0 0 400px; height: 470px; border-radius: var(--r-lg);
  scroll-snap-align: start; position: relative; overflow: hidden;
  padding: 36px; display: flex; flex-direction: column;
  transition: transform .45s var(--ease);
}
.c-card:hover { transform: scale(1.01); }
.c-card h3 { font-size: 26px; font-weight: 600; letter-spacing: -.018em; line-height: 1.15; }
.c-card p { font-size: 15px; line-height: 1.5; margin-top: 8px; max-width: 310px; }
.c-k { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.c-num { margin-top: auto; font-size: 60px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.c-num small { font-size: 16px; font-weight: 500; letter-spacing: 0; }
.caro-nav { display: flex; gap: 10px; }
.caro-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); color: var(--ink); font-size: 17px;
  cursor: pointer; transition: background .2s; display: flex; align-items: center; justify-content: center;
}
.caro-btn:hover { background: rgba(0,0,0,0.12); }

/* ════ ORBIT CARE LOOP ════ */
#careloop { overflow: hidden; }
.ct-head { text-align: center; max-width: 720px; margin: 0 auto; }
.ct { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 24px; margin-top: 60px; align-items: stretch; }

/* live detail panel */
.ct-stage { position: relative; border-radius: 30px; overflow: hidden; background: #f5f6f6; min-height: 380px; }
.ct-panels { position: relative; height: 100%; }
.ct-panel { position: absolute; inset: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transform: translateY(16px); pointer-events: none; overflow: hidden;
  transition: opacity .55s var(--ease), transform .55s var(--ease); }
.ct-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* full-bleed photo + dark scrim (Apple card style) */
.ct-photo { position: absolute; inset: 0; margin: 0; z-index: 0; background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 6s ease; }
.ct-panel.is-on .ct-photo { transform: scale(1); }
.ct-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,14,13,0) 0%, rgba(8,14,13,.06) 38%, rgba(8,14,13,.55) 76%, rgba(8,14,13,.9) 100%); }
.ct-photo.p0 { background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1000&q=74'); }
.ct-photo.p1 { background-image: url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=1000&q=74'); }
.ct-photo.p2 { background-image: url('https://images.unsplash.com/photo-1545205597-3d9d02c29597?auto=format&fit=crop&w=1000&q=74'); }
.ct-photo.p3 { background-image: url('https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=1000&q=74'); }
.ct-photo.p4 { background-image: url('https://images.unsplash.com/photo-1582750433449-648ed127bb54?auto=format&fit=crop&w=1000&q=74'); }
.ct-photo.p5 { background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1000&q=74'); }
.ct-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; padding: 0 44px; order: 2; }
.ct-idx { font-family: var(--font); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.ct-cat { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.ct-bigic { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.28); display: grid; place-items: center;
  margin: 0 44px 14px; position: relative; z-index: 1; order: 1; }
.ct-bigic svg { stroke: #fff; }
.ct-name { font-family: var(--font); font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.025em; color: #fff; margin: 10px 0 0; position: relative; z-index: 1; padding: 0 44px; order: 3; }
.ct-desc { font-size: 15px; line-height: 1.56; color: rgba(255,255,255,.84); margin: 12px 0 0; max-width: 46ch; font-family: var(--font); position: relative; z-index: 1; padding: 0 44px; order: 4; }
.ct-insight { display: flex; align-items: center; gap: 11px; font-family: var(--font);
  font-size: 13px; color: #fff; background: rgba(255,255,255,.13); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.18); border-radius: 13px; padding: 12px 15px;
  position: relative; z-index: 1; margin: 18px 44px 44px; order: 5; }
.ct-insight b { font-weight: 600; }
.ct-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); animation: ctpulse 2s infinite; }
@keyframes ctpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* selector list */
.ct-list { display: flex; flex-direction: column; gap: 10px; }
.ct-row { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #ececec; border-radius: 18px; padding: 15px 18px;
  font-family: var(--font); cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.ct-row:hover { transform: translateX(3px); border-color: #dde0df; }
.ct-row.is-on { background: var(--cb); border-color: color-mix(in srgb, var(--c) 38%, transparent); }
.ct-rowic { width: 42px; height: 42px; border-radius: 13px; background: #f4f5f5; color: var(--ink-3);
  display: grid; place-items: center; flex: none; transition: background .3s var(--ease), color .3s var(--ease); }
.ct-row.is-on .ct-rowic { background: var(--c); color: #fff; }
.ct-rowtx { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ct-rowtx b { font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ct-rowtx small { font-size: 12.5px; color: var(--ink-3); }
.ct-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: transparent; }
.ct-prog i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 2px; }
.ct-row.is-on .ct-prog i { animation: ctprog var(--dur, 4.5s) linear forwards; }
@keyframes ctprog { from { width: 0; } to { width: 100%; } }

/* ════ WHAT YOU GAIN (Apple bento) ════ */
#gains { background: #fff; position: relative; overflow: hidden; }
#gains::before { content: ''; position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: 70%; height: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(0,113,227,.05), transparent 70%); }
#gains .shell-wide { position: relative; z-index: 1; }
.gx { background: #fff; position: relative; overflow: hidden; padding-top: clamp(80px,9vw,120px); }
#gains.gx::before { content: ''; position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: 70%; height: 50%; pointer-events: none; z-index: 0; background: radial-gradient(50% 60% at 50% 0%, rgba(0,113,227,.05), transparent 70%); }
.gx-head { text-align: center; max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.gx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); padding: 7px 15px; border-radius: 999px; background: rgba(0,113,227,.06); border: 1px solid rgba(0,113,227,.12); }
.gx-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(0,113,227,.5); animation: lmxdot 2.4s var(--ease) infinite; }
.gx-title { font-family: var(--font); font-size: clamp(34px, 5vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; color: #15181d; margin: 24px 0 0; }
.gx-title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.05em; color: var(--blue); }
.gx-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: #828985; margin: 22px auto 0; max-width: 56ch; }

/* scrollytelling */
.gx-scrolly { position: relative; max-width: 1180px; margin: clamp(40px,5vw,64px) auto 0; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; z-index: 1; }
.gx-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }
/* phone */
.gx-phone { position: relative; width: 310px; height: 632px; border-radius: 50px; padding: 13px; background: linear-gradient(160deg,#23262c,#0d0f12); box-shadow: 0 50px 100px -30px rgba(16,24,40,.55), inset 0 0 0 2px rgba(255,255,255,.06); }
.gx-notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 104px; height: 26px; background: #0a0b0d; border-radius: 0 0 16px 16px; z-index: 6; }
.gx-screens { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: linear-gradient(180deg,#f3f6fb,#e9eef6); }
.gx-screen { position: absolute; inset: 0; padding: 46px 22px 24px; display: flex; flex-direction: column; opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.gx-screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.gx-sbar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: #15181d; margin-bottom: 14px; }
.gx-sbar-r { display: flex; gap: 4px; } .gx-sbar-r i { width: 5px; height: 9px; border-radius: 2px; background: #15181d; opacity: .55; } .gx-sbar-r i:nth-child(2){height:12px;opacity:.75}.gx-sbar-r i:nth-child(3){height:14px}
.gx-app-top { display: flex; justify-content: space-between; align-items: center; }
.gx-app-top small { display: block; font-size: 11px; color: #8a93a3; }
.gx-app-top b { font-family: var(--font); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #15181d; }
.gx-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#6ab1f7,#2a8cf0); }
.gx-pill-sm { font-size: 11px; font-weight: 600; color: var(--blue); background: rgba(0,113,227,.08); border-radius: 999px; padding: 6px 11px; }
.gx-unit { font-size: 13px; color: #8a93a3; font-weight: 500; }
/* ring screen */
.gx-ring { position: relative; width: 192px; height: 192px; margin: 18px auto 14px; }
.gx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gxr-bg { fill: none; stroke: #d9e2ee; stroke-width: 12; }
.gxr-fg { fill: none; stroke: url(#gxring); stroke: #2a8cf0; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 528; stroke-dashoffset: 528; transition: stroke-dashoffset 1.4s cubic-bezier(.3,0,.2,1); }
.gx-screen.is-active .gxr-fg { stroke-dashoffset: 122; }
.gx-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gx-ring-c b { font-family: var(--font); font-size: 56px; font-weight: 600; letter-spacing: -.04em; color: #15181d; line-height: 1; }
.gx-ring-c small { font-size: 9.5px; letter-spacing: .14em; color: #8a93a3; margin-top: 6px; }
.gx-chips { display: flex; justify-content: center; gap: 10px; }
.gx-chips span { font-size: 11px; font-weight: 600; color: #6e7686; background: #fff; border: 1px solid #e3e9f1; border-radius: 999px; padding: 6px 11px; }
.gx-chips .up { color: #1aa64b; background: rgba(26,166,75,.08); border-color: rgba(26,166,75,.18); }
.gx-mini-rows { margin-top: auto; display: flex; flex-direction: column; gap: 11px; }
.gx-mr { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; font-size: 12px; color: #6e7686; }
.gx-mr i { height: 7px; border-radius: 4px; background: linear-gradient(90deg,#6ab1f7,#2a8cf0); width: 0; transition: width 1.1s cubic-bezier(.3,0,.2,1) .2s; }
.gx-screen.is-active .gx-mr i { width: var(--w); }
/* biomarker screen */
.gx-bm { margin-top: 16px; display: flex; flex-direction: column; gap: 13px; }
.gx-bm-row { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; align-items: center; }
.gx-bm-n { font-size: 12.5px; color: #4a505c; font-weight: 500; }
.gx-bm-v { font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-align: right; }
.gx-bm-v small { font-size: 10px; color: #8a93a3; font-weight: 500; margin-left: 2px; }
.gx-bm-v.ok { color: #1aa64b; } .gx-bm-v.warn { color: #e08a1e; }
.gx-bm-bar { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: #e3e9f1; overflow: hidden; }
.gx-bm-bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 1s cubic-bezier(.3,0,.2,1) .2s; }
.gx-bm-bar i.ok { background: linear-gradient(90deg,#3bbf6a,#1aa64b); } .gx-bm-bar i.warn { background: linear-gradient(90deg,#f0b24a,#e08a1e); }
.gx-screen.is-active .gx-bm-bar i { width: var(--w); }
/* monitoring screen */
.gx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #e0483a; background: rgba(224,72,58,.08); border-radius: 999px; padding: 6px 11px; }
.gx-live i { width: 7px; height: 7px; border-radius: 50%; background: #e0483a; animation: gxBlink 1.4s ease-in-out infinite; }
@keyframes gxBlink { 0%,100%{opacity:1}50%{opacity:.3} }
.gx-graph { position: relative; margin: 22px 0 18px; height: 150px; background: #fff; border: 1px solid #e6ecf4; border-radius: 18px; overflow: hidden; padding: 6px; }
.gx-graph svg { width: 100%; height: 100%; display: block; }
.gx-line { stroke: #2a8cf0; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.gx-screen.is-active .gx-line { animation: gxDraw 1.6s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes gxDraw { to { stroke-dashoffset: 0; } }
.gx-dot { fill: #2a8cf0; opacity: 0; } .gx-screen.is-active .gx-dot { animation: gxDot .4s ease 1.4s forwards; }
@keyframes gxDot { to { opacity: 1; } }
.gx-band { position: absolute; right: 10px; top: 10px; font-size: 10px; font-weight: 600; color: #2a8cf0; background: rgba(0,113,227,.08); border-radius: 6px; padding: 3px 7px; }
.gx-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: auto; }
.gx-tile { background: #fff; border: 1px solid #e6ecf4; border-radius: 14px; padding: 13px 10px; text-align: center; }
.gx-tile small { display: block; font-size: 10px; color: #8a93a3; }
.gx-tile b { font-family: var(--font); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #15181d; }
/* care screen */
.gx-chat { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.gx-msg { display: flex; gap: 9px; align-items: flex-end; max-width: 88%; }
.gx-msg p { font-size: 12.5px; line-height: 1.45; padding: 11px 14px; border-radius: 16px; margin: 0; }
.gx-msg.in p { background: #fff; border: 1px solid #e6ecf4; color: #2d333d; border-bottom-left-radius: 5px; }
.gx-msg.out { align-self: flex-end; } .gx-msg.out p { background: linear-gradient(135deg,#2a8cf0,#0071e3); color: #fff; border-bottom-right-radius: 5px; }
.gx-msg-av { width: 28px; height: 28px; border-radius: 50%; flex: none; background: linear-gradient(135deg,#6ab1f7,#2a8cf0); } .gx-msg-av.c2 { background: linear-gradient(135deg,#7fd9bf,#1aa64b); }
.gx-msg-meta { font-size: 10.5px; color: #8a93a3; margin: 2px 0 6px 37px; }
.gx-appt { margin-top: auto; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6ecf4; border-radius: 16px; padding: 13px 15px; }
.gx-appt-t { font-family: var(--font); font-size: 17px; font-weight: 600; color: #15181d; }
.gx-appt b { display: block; font-size: 13px; color: #15181d; } .gx-appt small { font-size: 11px; color: #8a93a3; }
.gx-go { margin-left: auto; color: var(--blue); font-size: 18px; }
/* steps */
.gx-steps { display: flex; flex-direction: column; }
.gx-step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 420px; opacity: .25; transition: opacity .5s var(--ease); }
.gx-step.is-active { opacity: 1; }
.gx-step-i { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--blue); }
.gx-step h3 { font-family: var(--font); font-size: clamp(26px,3vw,40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; color: #15181d; margin: 16px 0 0; }
.gx-step p { font-size: clamp(15px,1.5vw,18px); line-height: 1.6; color: #828985; margin: 18px 0 0; }
/* facts */
.gx-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px,5vw,72px); padding-top: 56px; border-top: 1px solid #ececec; position: relative; z-index: 1; }
.gx-fact { text-align: center; }
.gx-fact-n { font-family: var(--font); font-size: clamp(36px, 4vw, 54px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #16181d; }
.gx-fact-l { font-size: 14px; color: #828985; margin-top: 10px; }
@media (max-width: 860px) {
  .gx-scrolly { grid-template-columns: 1fr; padding: 0 24px; }
  .gx-sticky { position: relative; height: auto; margin-bottom: 12px; }
  .gx-steps { gap: 0; }
  .gx-step { min-height: auto; padding: 28px 0; opacity: 1; }
  .gx-phone { transform: scale(.92); }
  .gx-facts { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
}

/* ════ NUMBERS (editorial) ════ */
#numbers { background: linear-gradient(180deg, #fbfcfc 0%, #f4f7f8 100%); }
.num-head { max-width: 640px; margin-bottom: 52px; }
.num-editorial { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; }
.num-hero { background: linear-gradient(165deg, #16181d, #0a0b0e); border-radius: 30px; padding: 52px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.num-hero::before { content: ''; position: absolute; top: -30%; right: -10%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(42,140,240,.26), transparent 68%); pointer-events: none; }
.num-hero::after { content: ''; position: absolute; bottom: -34%; left: -12%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,113,227,.18), transparent 70%); pointer-events: none; }
.num-hero-fig { position: relative; }
.num-hero .num-v { font-family: var(--font); font-size: clamp(78px, 11vw, 156px); font-weight: 600; letter-spacing: -.05em; line-height: .86; color: #fff; display: block; }
.num-hero-l { font-family: var(--font); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.num-hero-p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.56); margin-top: 12px; max-width: 42ch; }
.num-bar { margin-top: 22px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.num-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #2a8cf0, #0071e3); transition: width 1.4s cubic-bezier(.3,0,.2,1) .3s; }
.num-hero.on .num-bar i { width: 86%; }
.num-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 28px; }
.num-s { border: 1px solid #ececec; border-radius: 22px; padding: 28px 34px; display: flex; align-items: baseline; gap: 18px; transition: border-color .35s var(--ease), transform .35s var(--ease); }
.num-s:hover { border-color: #d4d8d6; transform: translateX(4px); }
.num-s .num-v { font-family: var(--font); font-size: clamp(40px, 4.2vw, 58px); font-weight: 600; letter-spacing: -.04em; line-height: 1; flex: none; min-width: 2.6ch;
  background: linear-gradient(180deg, #1d1d1f 30%, #6e6e73); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.num-s .num-l { font-size: 15px; color: var(--ink-2); line-height: 1.4; }

@media (max-width: 920px) {
  .orb { height: 480px; }
  .orb-bubble { max-width: 80%; padding: 28px 30px; }
  .orb-avatar.a1 { left: 2%; } .orb-avatar.a3 { right: 1%; }
  .orb-avatar.a4 { left: 6%; } .orb-avatar.a5 { right: 6%; }
  .orb-ring.r3 { width: 100%; }
  .gn-facts { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
}
@media (max-width: 600px) {
  .orb-sticker { display: none; }
  .orb-avatar.a2, .orb-avatar.a6 { display: none; }
  .orb-bubble { max-width: 92%; }
}

/* ════ SERVICES BENTO v2 (reference) ════ */
#services.sec-gray { background: #fff; }
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(286px,auto) minmax(212px,auto) minmax(248px,auto); gap: 16px; margin-top: 56px; align-items: stretch; }
.g-pre    { grid-column: 1 / 8;   grid-row: 1; }
.g-tech   { grid-column: 8 / 13;  grid-row: 1 / 3; }
.g-mental { grid-column: 1 / 8;   grid-row: 2; }
.g-diag   { grid-column: 1 / 5;   grid-row: 3; }
.g-lives  { grid-column: 5 / 8;   grid-row: 3; }
.g-gut    { grid-column: 8 / 13;  grid-row: 3; }
.bx { background: #f5f6f6; border-radius: 30px; padding: 38px 38px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease); }
.bx.rv.on:hover { border-color: rgba(0,113,227,.18); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.bx h3 { font-family: var(--font); font-size: 28px; font-weight: 600; letter-spacing: -.022em;
  color: #16181d; line-height: 1.12; margin: 0 0 12px; }
.bx-sub { font-size: 16px; color: #828985; line-height: 1.5; max-width: 34ch; margin: 0; font-family: var(--font); }

/* pre/post slider */
.ppm { margin-top: auto; display: flex; flex-direction: column; gap: 44px; padding: 30px 30px 8px 0; }
.ppm-line { position: relative; height: 3px; background: #1c2a24; border-radius: 2px; width: 0;
  transition: width 1.3s cubic-bezier(.3,0,.2,1); }
.bx.on .ppm-line { width: var(--w); }
.ppm-line.l2 { transition-delay: .28s; }
.ppm-node { position: absolute; right: -26px; top: 50%; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid #1c2a24; background: #fff; display: grid; place-items: center; opacity: 0;
  transform: translateY(-50%) scale(.55); transition: opacity .5s var(--ease) 1s, transform .55s cubic-bezier(.34,1.4,.5,1) 1s; }
.bx.on .ppm-node { opacity: 1; transform: translateY(-50%) scale(1); }
.ppm-line.l2 .ppm-node { transition-delay: 1.28s; }

/* technology card */
.tech-card .tech-img { position: absolute; right: 0; bottom: 0; width: 74%; height: auto; max-height: 60%; object-fit: contain; object-position: bottom right; pointer-events: none; }

/* mental wellness */
.mental-card { align-items: center; justify-content: center; text-align: center; }
.mental-card h3 { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: clamp(28px,3vw,38px); font-weight: 600; color: #16181d; margin: 0; }
.mental-card .mface { position: relative; display: inline-flex; align-items: center; height: 56px; vertical-align: -16px; }
.mental-card .mface img { position: relative; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 4px solid #f5f6f6; margin-left: -56px; opacity: 1; transition: margin-left .55s cubic-bezier(.34,1.3,.4,1); }
.mental-card .mface img:first-child { margin-left: 0; z-index: 3; }
.mental-card .mface img:nth-child(2) { z-index: 2; }
.mental-card .mface img:nth-child(3) { z-index: 1; }
.mental-card.on:hover .mface img { margin-left: -16px; }
.mental-card.on:hover .mface img:first-child { margin-left: 0; }
.mental-card .bx-sub { max-width: 46ch; margin-top: 20px; font-size: 18px; text-align: center; }

/* diagnostics */
.diag-card { text-align: center; align-items: center; justify-content: space-between; }
.diag-card h3 { color: #9aa19d; font-size: 24px; margin-bottom: 0; }
.diag-card .diag-img { height: 168px; width: auto; margin-top: 18px; }

/* lives */
.lives-card { align-items: center; justify-content: center; text-align: center; }
.lives-stars { color: #c9892f; font-size: 22px; letter-spacing: 4px; }
.lives-n { font-family: var(--font); font-size: 72px; font-weight: 600; letter-spacing: -.04em; color: #16181d; line-height: 1; margin: 14px 0 6px; }
.lives-lbl { font-size: 17px; color: #7c8480; font-family: var(--font); }

/* gut — concentric beating rings */
.gut-blob { position: absolute; right: -50px; bottom: -50px; width: 210px; height: 210px; border-radius: 50%;
  background: #c9d4c9; display: grid; place-items: center;
  animation: gutbeat 1.9s ease-in-out infinite; }
.gut-blob::before, .gut-blob::after { content: ''; position: absolute; border-radius: 50%; }
.gut-blob::before { width: 138px; height: 138px; background: #889a8b; animation: gutbeat 1.9s ease-in-out .14s infinite; }
.gut-blob::after { width: 74px; height: 74px; background: #1c2a24; animation: gutbeat 1.9s ease-in-out .28s infinite; }
.gut-dot { display: none; }
@keyframes gutbeat { 0%, 100% { transform: scale(1); } 16% { transform: scale(1.07); } 32% { transform: scale(1); } 48% { transform: scale(1.03); } 64% { transform: scale(1); } }
.gut-card.on:hover .gut-blob { animation-duration: 1.1s; }

/* ════ PATIENT JOURNEY v2 (reference) ════ */
#journey { background: #fff; }
.pj-head { text-align: center; max-width: 760px; margin: 0 auto; }
.pj-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-size: 16px; margin-bottom: 22px; }
.pj-eyebrow .pe-ic { width: 22px; height: 22px; border-radius: 50%; background: #111318; display: grid; place-items: center; }
.pj-eyebrow .pe-mut { color: #9a9a9a; } .pj-eyebrow .pe-str { color: #16181d; font-weight: 600; }
.pj-h2 { font-family: var(--font); font-size: clamp(36px,5.4vw,68px); font-weight: 600; letter-spacing: -.025em; color: #16181d; line-height: 1.04; margin: 0; }
.pj-sub { font-size: 19px; color: #8a8a8a; line-height: 1.5; margin: 22px auto 0; font-family: var(--font); }
.pj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 84px; align-items: start; }
.pj-col h4 { font-family: var(--font); font-size: 25px; font-weight: 600; color: #16181d; margin: 0; }
.pj-col .csub { color: #9a9a9a; margin: 7px 0 0; font-size: 17px; font-family: var(--font); }

/* timeline */
.tl { margin-top: 44px; position: relative; }
.tl::before { content: ''; position: absolute; left: 8px; top: 14px; bottom: 42px; border-left: 2px dashed #e3e3e1; }
.tl-item { display: flex; align-items: center; gap: 18px; padding-bottom: 34px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-node { width: 18px; height: 18px; border-radius: 50%; background: #ececea; flex: none; position: relative; z-index: 2;
  transition: background .4s var(--ease); }
.tl-node::after { content: ''; position: absolute; left: 50%; top: 48%; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%,-60%) rotate(45deg) scale(0);
  transition: transform .32s cubic-bezier(.34,1.4,.5,1); }
.tl-item.done .tl-node { background: #111318; display: grid; place-items: center; width: 22px; height: 22px; }
.tl-item.done .tl-node::after { display: none; }
/* hover: unchecked steps check themselves, staggered */
.pj-col:hover .tl-item:not(.done) .tl-node { background: #111318; }
.pj-col:hover .tl-item:not(.done) .tl-node::after { transform: translate(-50%,-60%) rotate(45deg) scale(1); }
.pj-col:hover .tl-item:nth-child(2) .tl-node,
.pj-col:hover .tl-item:nth-child(2) .tl-node::after { transition-delay: .14s; }
.tl-meta { display: flex; flex-direction: column; }
.tl-title { font-family: var(--font); font-weight: 600; font-size: 18px; color: #16181d; }
.tl-date { color: #a0a0a0; font-size: 14px; margin-top: 3px; }
.tl-pill { margin-left: auto; background: #f3f3f1; border-radius: 999px; padding: 5px 13px; font-size: 13px; color: #9a9a9a; font-weight: 500; }
.tl-avs { margin-left: auto; display: flex; }
.tl-avs img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; margin-left: -8px; border: 2px solid #fff; }
.tl-avs img:first-child { margin-left: 0; }

/* chat */
.chat { margin-top: 44px; display: flex; flex-direction: column; gap: 13px; transition: transform .55s var(--ease); }
.pj-col:hover .chat { transform: translateY(-14px); }
.bub { max-width: 86%; padding: 14px 18px; font-size: 15px; line-height: 1.42; font-family: var(--font); }
.bub.gray { background: #f3f3f1; color: #16181d; border-radius: 20px; }
.bub.dark { background: #111318; color: #fff; border-radius: 20px; }
.bub.r { align-self: flex-end; border-bottom-right-radius: 6px; }
.bub.l { align-self: flex-start; border-bottom-left-radius: 6px; }
.bub .bemo { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin-left: 2px; }
.chat .time { align-self: center; color: #b4b4b4; font-size: 13px; margin: 2px 0; font-family: var(--font); }
/* typing indicator (hover reveal) */
.typing { align-self: flex-start; display: flex; gap: 6px; align-items: center; background: #111318;
  border-radius: 20px; border-bottom-left-radius: 6px; padding: 14px 18px; margin-top: 1px;
  opacity: 0; transform: translateY(14px) scale(.9); transform-origin: left bottom;
  transition: opacity .4s var(--ease), transform .45s cubic-bezier(.34,1.3,.5,1); }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.7); }
.pj-col:hover .typing { opacity: 1; transform: none; }
.pj-col:hover .typing span { animation: typedot 1.15s ease-in-out infinite; }
.pj-col:hover .typing span:nth-child(2) { animation-delay: .18s; }
.pj-col:hover .typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typedot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }

/* video consult */
.vc { margin-top: 44px; position: relative; height: 240px; }
.vc-phone { position: absolute; left: 50%; top: 8px; width: 150px; aspect-ratio: 10/12.4; border-radius: 20px;
  overflow: hidden; box-shadow: 0 22px 50px rgba(0,0,0,.24); transition: transform .55s cubic-bezier(.34,1.2,.5,1), box-shadow .55s var(--ease), z-index 0s .27s; }
.vc-phone img { width: 100%; height: 100%; object-fit: cover; }
.vc-phone.back { width: 140px; transform: translateX(-60%) rotate(-7deg); animation: vcfloat 6s ease-in-out infinite; z-index: 1; }
.vc-phone.front { transform: translateX(-32%) rotate(4deg); border: 5px solid #fff; animation: vcfloat 6s ease-in-out -3s infinite; z-index: 2; }
/* hover: the back card swaps to the front */
.pj-col:hover .vc-phone { animation-play-state: paused; }
.pj-col:hover .vc-phone.back { transform: translateX(-40%) rotate(5deg) scale(1.06); z-index: 3; border: 5px solid #fff; box-shadow: 0 30px 64px rgba(0,0,0,.28); transition: transform .55s cubic-bezier(.34,1.2,.5,1), box-shadow .55s var(--ease), z-index 0s; }
.pj-col:hover .vc-phone.front { transform: translateX(-56%) rotate(-6deg) scale(.96); z-index: 2; }
@keyframes vcfloat { 50% { translate: 0 -10px; } }
.vc-dock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 30px; }
.vc-dock svg { width: 22px; height: 22px; color: #c2c2c2; }
.vc-dock .vd-active { width: 52px; height: 52px; border-radius: 50%; background: #111318; display: grid; place-items: center; }
.vc-dock .vd-active svg { color: #fff; width: 22px; height: 22px; }

.pj-cta { text-align: center; margin-top: 70px; }
.pj-cta a { display: inline-flex; align-items: center; gap: 14px; color: #6f6f6f; font-size: 18px; text-decoration: none; font-family: var(--font); transition: gap .25s; }
.pj-cta a:hover { gap: 18px; }
.pj-cta .pc-arrow { width: 38px; height: 38px; border-radius: 50%; background: #111318; display: grid; place-items: center; }

@media (max-width: 920px) {
  .svc-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  #approach.lmx2 { height: auto; }
  .lmx2-sticky { position: static; min-height: 0; padding: 64px 0; }
  .lmx2-body { grid-template-columns: 1fr; gap: 28px; }
  .lmx2-rail { flex-direction: row; padding-left: 0; gap: 10px; overflow-x: auto; }
  .lmx2-spine { display: none; }
  .lmx2-node::before { display: none; }
  .lmx2-node { flex: 1 0 auto; opacity: 1; padding: 10px 4px; }
  .lmx2-stage { min-height: 0; }
  .lmx2-ghost { display: none; }
  .lmx2-panel { position: relative; inset: auto; grid-template-columns: 1fr; gap: 24px; padding: 30px; }
  .lmx2-panel:not(.is-on) { display: none; }
  .g-pre, .g-tech, .g-mental, .g-diag, .g-lives, .g-gut { grid-column: 1 / -1; grid-row: auto; }
  .tech-card { min-height: 360px; } .tech-card .tech-img { width: 64%; }
  .ppm-card { min-height: 300px; } .gut-card { min-height: 280px; }
  .diag-card, .lives-card { min-height: 220px; }
  .pj-grid { grid-template-columns: 1fr; gap: 48px; }
  .vc { height: 280px; }
  .tsx { grid-template-columns: 1fr; gap: 56px; }
  .tsx-stage { order: -1; }
  .tsx-float { display: none; }
  .sol-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .sol-feat { grid-column: 1; grid-row: auto; }
  .sol-tall { min-height: 260px; }
  .bm-grid3, .rc-grid, .mon-grid { grid-template-columns: 1fr 1fr; }
  .m3-label { gap: 14px; }
}

@media (max-width: 600px) {
  .sec { padding: 68px 0; }
  #manifesto { padding: 11vh 7vw; }
  .fill-text { font-size: clamp(24px, 7vw, 38px); line-height: 1.22; }
  .sec-h2 { font-size: clamp(28px, 8vw, 40px); }
  .sec-eyebrow { font-size: 13px; }
  .sec-sub { font-size: 15px; }
  /* numbers */
  .num-grid, .gain-grid { grid-template-columns: 1fr; gap: 14px; }
  .ab-intro { grid-template-columns: 1fr; gap: 18px; }
  .ab-cards { grid-template-columns: 1fr; }
  .ab-facts { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .ab-card { min-height: 280px; }
  .num-editorial { gap: 16px; }
  .num-hero { padding: 32px 28px; }
  .num-hero .num-v { font-size: clamp(64px, 22vw, 96px); }
  .num-side { gap: 14px; }
  .num-s { padding: 22px 24px; }
  /* care team */
  .ct-name { font-size: 26px; }
  .ct-desc { font-size: 14px; }
  .ct-panel { padding-bottom: 0; }
  .ct-top, .ct-bigic, .ct-name, .ct-desc { padding-left: 32px; padding-right: 32px; }
  .ct-insight { margin-left: 32px; margin-right: 32px; }
  /* team */
  .tm-title { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.06; }
  .tm-feat-h { font-size: clamp(24px, 7vw, 32px); }
  .tm-feat-stat { grid-template-columns: auto 1fr; gap: 16px; row-gap: 18px; }
  .tm-feat-btn { grid-column: 1 / -1; justify-self: start; }
  /* gains/cards */
  .gain { padding: 26px 24px; }
  .bm-grid3, .rc-grid, .mon-grid { grid-template-columns: 1fr; }
  .rc-counts { gap: 6px; }
  .ap-card { padding: 26px 22px; }
  /* journey + showcase spacing */
  .pj-grid { gap: 40px; }
  .tsx { gap: 40px; }
  .tsx-h2 { font-size: clamp(28px, 8vw, 40px); }
  .tsx-feats h4 { font-size: 16px; }
  /* hero footer stats fit */
  .vh-foot .fs { font-size: 9.5px; gap: 10px; }
}

/* ════ REVEAL — floating ════ */
.rv { opacity: 0; transform: translate3d(0, 40px, 0); 
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); }
.rv.on { opacity: 1; transform: none; }
.rv-d1.on { transition-delay: .1s; }
.rv-d2.on { transition-delay: .2s; }
.rv-d3.on { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .rv { transition-duration: .4s; transform: none; filter: none; }
}

/* glow kill-switch (Tweaks) */
body.no-glow .show-glow { display: none; }
body.no-glow .ed-ecg path, body.no-glow .pulse-dot { filter: none; box-shadow: none; }
body.no-glow .glowline::before { box-shadow: none; }
body.no-glow .ecg path { filter: none; }

/* ════ TEAM ════ */
#team { background: #fff; }
.tm-head { margin-bottom: 8px; }
.tm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 8px; vertical-align: middle; }
.tm-title { font-family: var(--font); font-size: clamp(40px, 5.6vw, 76px); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); margin: 14px 0 0; }
.tm-feature { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 64px; margin-top: 44px; align-items: center; }
.tm-feat-photo { background: #ececec; border-radius: 26px; aspect-ratio: 4 / 4.4; position: relative; max-width: 400px; overflow: hidden; }
.tm-feat-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 26px; display: block; transition: transform .6s var(--ease); }
.tm-feat-left:hover .tm-feat-photo > img { transform: scale(1.04); }
.tm-feat-n { font-family: var(--font); font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 24px 0 0; }
.tm-feat-r { font-size: 15px; color: var(--ink-3); margin-top: 7px; font-family: var(--font); }
.tm-feat-right { padding-top: 0; display: flex; flex-direction: column; }
.tm-feat-h { font-family: var(--font); font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); margin: 0; }
.tm-feat-p { font-size: 17px; line-height: 1.55; color: var(--ink-3); margin: 18px 0 0; max-width: 42ch; font-family: var(--font); }
.tm-feat-stat { margin-top: 32px; padding-top: 32px; border-top: 1px solid #e3e6e5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; }
.tm-stat-n { font-family: var(--font); font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.tm-stat-l { font-family: var(--font); font-size: 17px; line-height: 1.3; color: var(--ink); }
.tm-feat-btn { display: inline-flex; align-items: center; gap: 12px; background: #111318; color: #fff; font-family: var(--font); font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 999px; padding: 13px 13px 13px 26px; white-space: nowrap; justify-self: end; transition: transform .25s var(--ease); }
.tm-feat-btn:hover { transform: translateY(-2px); }
.tm-feat-btn .pc-arrow { width: 32px; height: 32px; border-radius: 50%; background: #2a3a33; display: grid; place-items: center; transition: transform .25s var(--ease); }
.tm-feat-btn:hover .pc-arrow { transform: translateX(3px); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 72px; }
.tm { background: none; padding: 0; text-align: left; }
.tm-photo-wrap { border-radius: 22px; aspect-ratio: 1 / 1.04; background: #ececec; position: relative; overflow: hidden; }
.tm-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 22px; transition: transform .6s var(--ease); }
.tm:hover .tm-photo { transform: scale(1.03); }
.tm-n { font-family: var(--font); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-top: 20px; display: inline-block; position: relative; text-decoration: none; }
.tm-n:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.tm-n::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: var(--blue); transition: width .4s var(--ease); }
.tm:hover .tm-n::after { width: 26px; }
.tm-q { font-size: 13.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.55; font-family: var(--font); }

/* social hover panel — docks inside photo top-right */
.tm-feat-photo, .tm-photo-wrap { position: relative; }
.tm-social { position: absolute; top: 0; right: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: #fff; border-bottom-left-radius: 20px; padding: 18px 16px 20px; box-shadow: -8px 8px 24px rgba(16,20,28,.08);
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tm-feat-photo:hover .tm-social, .tm-photo-wrap:hover .tm-social { opacity: 1; pointer-events: auto; transform: translateX(0); }
.tm-soc { width: 30px; height: 30px; display: grid; place-items: center; color: #6b726e; transition: color .25s, transform .25s; opacity: 0; transform: translateY(6px); }
.tm-feat-photo:hover .tm-soc, .tm-photo-wrap:hover .tm-soc { opacity: 1; transform: none; }
.tm-feat-photo:hover .tm-soc:nth-child(1), .tm-photo-wrap:hover .tm-soc:nth-child(1) { transition: opacity .45s ease .1s, transform .45s ease .1s, color .25s; }
.tm-feat-photo:hover .tm-soc:nth-child(2), .tm-photo-wrap:hover .tm-soc:nth-child(2) { transition: opacity .45s ease .17s, transform .45s ease .17s, color .25s; }
.tm-feat-photo:hover .tm-soc:nth-child(3), .tm-photo-wrap:hover .tm-soc:nth-child(3) { transition: opacity .45s ease .24s, transform .45s ease .24s, color .25s; }
.tm-feat-photo:hover .tm-soc:nth-child(4), .tm-photo-wrap:hover .tm-soc:nth-child(4) { transition: opacity .45s ease .31s, transform .45s ease .31s, color .25s; }
.tm-soc:hover { transform: translateY(-1px); color: var(--blue); }

/* ════ FAQ ════ */
#faq.sec-gray { background: #f5f6f7; }
.faq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.faq-aside { position: sticky; top: 100px; }
.faq-h2 { font-family: var(--font); font-size: clamp(36px, 4.4vw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1; color: var(--ink); margin: 16px 0 0; }
.faq-aside-p { font-size: 16px; line-height: 1.6; color: var(--ink-3); margin: 22px 0 0; max-width: 34ch; }
.faq-aside-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--blue); text-decoration: none; transition: gap .25s; }
.faq-aside-cta i { font-style: normal; transition: transform .25s; }
.faq-aside-cta:hover i { transform: translateX(4px); }
.faq-list { margin: 0; }
.faq { border-bottom: 1px solid #e1e4e3; }
.faq:first-child { border-top: 1px solid #e1e4e3; }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font);
  font-size: clamp(16px, 1.5vw, 18px); font-weight: 500; letter-spacing: -.01em; color: var(--ink);
  padding: 26px 48px 26px 0; position: relative; transition: color .25s, padding-left .35s var(--ease); }
.faq-q:hover { color: var(--blue); padding-left: 8px; }
.faq.open .faq-q { color: var(--blue); }
.faq-q::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px;
  background:
    linear-gradient(var(--ink-3),var(--ink-3)) center/14px 2px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) center/2px 14px no-repeat;
  transform: translateY(-50%) rotate(0deg); transition: transform .4s var(--ease), background .25s; }
.faq.open .faq-q::after {
  background:
    linear-gradient(var(--blue),var(--blue)) center/14px 2px no-repeat,
    linear-gradient(var(--blue),var(--blue)) center/2px 14px no-repeat;
  transform: translateY(-50%) rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq.open .faq-a { max-height: 360px; }
.faq-a p { font-size: 15px; line-height: 1.65; color: var(--ink-2); padding: 0 40px 26px 0; margin: 0; }

@media (max-width: 920px) {
  .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .faq-aside { position: static; }
}

/* ════ CTA (dark card) ════ */
#get { background: #07080c; padding: clamp(80px,9vw,140px) 0; text-align: left; }
.cta-card { position: relative; overflow: hidden; border-radius: 0; padding: 150px 40px 132px; text-align: center; width: 100%; max-width: none; margin: 0;
  background: linear-gradient(165deg, #16181d 0%, #0a0b0e 100%); }
.cta-glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 720px; height: 720px; pointer-events: none;
  background: radial-gradient(circle, rgba(42,140,240,.22), rgba(0,113,227,.1) 45%, transparent 70%); }
.cta-orbs { position: absolute; inset: 0; pointer-events: none; }
.cta-dna { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 62%; z-index: 0; opacity: .8; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 78%); }
.cta-card > :not(.cta-dna):not(.cta-glow):not(.cta-orbs) { position: relative; z-index: 2; }
.cta-orbs span { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .5; }
.cta-orbs span:nth-child(1) { width: 240px; height: 240px; background: rgba(42,140,240,.4); top: -8%; left: 8%; animation: ctaOrb 14s ease-in-out infinite; }
.cta-orbs span:nth-child(2) { width: 200px; height: 200px; background: rgba(0,113,227,.34); bottom: -10%; right: 10%; animation: ctaOrb 18s ease-in-out -5s infinite reverse; }
.cta-orbs span:nth-child(3) { width: 160px; height: 160px; background: rgba(42,140,240,.3); top: 30%; right: 24%; animation: ctaOrb 16s ease-in-out -9s infinite; }
@keyframes ctaOrb { 0%,100% { transform: translate(0,0); } 33% { transform: translate(40px,-30px); } 66% { transform: translate(-30px,24px); } }
.cta-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 30px; padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.cta-h, .cta-sub, .cta-actions, .cta-eyebrow { max-width: 1080px; margin-left: auto; margin-right: auto; }
.cta-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #6ab1f7; box-shadow: 0 0 0 0 rgba(90,160,240,.5); animation: lmxdot 2.4s var(--ease) infinite; }
.cta-h { position: relative; font-family: var(--font); font-size: clamp(38px, 5.4vw, 72px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #fff; margin: 0; }
.cta-grad { background: linear-gradient(100deg, #6ab1f7, #6ab1f7 55%, #7fd9bf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cta-sub { position: relative; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: rgba(255,255,255,.6); margin: 26px auto 0; max-width: 52ch; }
.cta-actions { position: relative; display: flex; gap: 22px; justify-content: center; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.btn-white { font-family: var(--font); font-size: 16px; font-weight: 600; color: #111318; background: #fff; border: none; border-radius: 999px; padding: 16px 34px; cursor: pointer; transition: transform .2s, box-shadow .3s; box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,0,0,.36); }
.link-arrow.lt { font-family: var(--font); font-size: 15px; font-weight: 500; color: rgba(255,255,255,.82); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: gap .25s, color .2s; }
.link-arrow.lt:hover { color: #fff; }
.link-arrow.lt::after { content: '\2192'; transition: transform .25s; }
.link-arrow.lt:hover::after { transform: translateX(4px); }

/* ════ FOOTER ════ */
footer { background: #111318; color: #fff; padding: 72px 0 36px; }
.foot-note { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.62); max-width: 760px; margin: 0 0 52px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.14); }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; }
.foot-h { font-family: var(--font); font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 16px; }
.foot-p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.74); max-width: 34ch; }
.foot-ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot-ul a { font-size: 14px; color: rgba(255,255,255,.74); text-decoration: none; transition: color .2s; }
.foot-ul a:hover { color: #fff; }
.foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.6); }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .card.s4, .card.s3, .card.s2 { grid-column: span 6; min-height: auto; padding-bottom: 150px; }
  .card.s4 .card-p, .card-p { max-width: 100%; }
  .pv-grid { grid-template-columns: 1fr; }
  .num-grid, .gain-grid { grid-template-columns: 1fr 1fr; }
  .ab-cards { grid-template-columns: 1fr; }
  .ab-facts { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .team-grid { grid-template-columns: 1fr; gap: 32px; }
  .tm-feature { grid-template-columns: 1fr; gap: 28px; }
  .tm-feat-left { order: 2; }
  .tm-feat-right { order: 1; padding-top: 0; }
  .tm-feat-photo { aspect-ratio: 4 / 3.2; max-width: none; }
  .tm-feat-photo > img { object-position: center 18%; }
  .tm-feat-stat { margin-top: 26px; padding-top: 26px; }
  .num-editorial { grid-template-columns: 1fr; }
  .num-hero { padding: 40px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .svc-bento { grid-template-columns: 1fr; }
  .fcard { display: none; }
  .c-card { flex-basis: 78vw; }
  .phone { width: 260px; height: 530px; }
  .ct { grid-template-columns: 1fr; gap: 16px; }
  .ct-stage { min-height: 340px; order: 2; }
  .ct-panel { padding: 36px; }
}


/* ════════════════════════════════════════════════
   WHAT YOU GAIN — v2 (gy-*)
   Steps LEFT · Sticky iPhone RIGHT
   ════════════════════════════════════════════════ */
.gy { background: #fff; padding: clamp(80px,9vw,130px) 0 0; overflow: hidden; position: relative; }
.gy::before { content:''; position:absolute; top:-10%; right:-15%; width:60%; height:70%; background:radial-gradient(50% 50% at 60% 40%, rgba(0,113,227,.07) 0%, transparent 100%); pointer-events:none; }

/* header */
.gy-header { text-align:center; max-width:780px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.gy-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono,'Spline Sans Mono',monospace); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#5a6478; background:#f0f4fa; border-radius:999px; padding:8px 16px; margin-bottom:28px; }
.gy-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 rgba(0,113,227,.5); animation:lmxdot 2.4s ease infinite; }
.gy-h { font-family:var(--font); font-size:clamp(36px,5vw,68px); font-weight:600; letter-spacing:-.04em; line-height:1.02; color:#15181d; margin:0 0 20px; }
.gy-h em { font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:var(--blue); }
.gy-lead { font-size:clamp(16px,1.5vw,18px); line-height:1.6; color:#6e7686; max-width:52ch; margin:0 auto; }

/* body: steps | phone */
.gy-body { max-width:1200px; margin:clamp(56px,6vw,90px) auto 0; padding:0 40px; display:grid; grid-template-columns:1fr 440px; gap:clamp(40px,5vw,80px); align-items:start; position:relative; z-index:1; }

/* feature steps */
.gy-steps { display:flex; flex-direction:column; gap:0; padding-bottom:clamp(60px,8vw,120px); }
.gy-step { display:grid; grid-template-columns:52px 1fr; gap:20px; padding:32px 0; border-top:1px solid #ebeef3; cursor:pointer; position:relative; transition:background .3s; }
.gy-step::before { content:''; position:absolute; left:-24px; top:0; width:3px; height:0; background:var(--blue); border-radius:0 2px 2px 0; transition:height .5s cubic-bezier(.16,1,.3,1); }
.gy-step.is-active::before { height:100%; }
.gy-step.is-active { background:linear-gradient(90deg, rgba(0,113,227,.03) 0%, transparent 100%); border-radius:0 12px 12px 0; }
.gy-step:last-child { border-bottom:1px solid #ebeef3; }

.gy-step-icon { width:52px; height:52px; border-radius:14px; background:#f0f4fa; display:flex; align-items:center; justify-content:center; color:#5a6478; transition:background .3s, color .3s; flex-shrink:0; margin-top:4px; }
.gy-step.is-active .gy-step-icon { background:var(--blue); color:#fff; }
.gy-step-n { font-family:var(--mono,'Spline Sans Mono',monospace); font-size:10px; font-weight:600; letter-spacing:.14em; color:#aab0be; display:block; margin-bottom:8px; }
.gy-step-body h3 { font-family:var(--font); font-size:clamp(17px,1.6vw,21px); font-weight:600; letter-spacing:-.025em; color:#15181d; margin:0 0 10px; transition:color .3s; }
.gy-step.is-active .gy-step-body h3 { color:var(--blue); }
.gy-step-body p { font-size:clamp(14px,1.2vw,15.5px); line-height:1.6; color:#6e7686; margin:0 0 16px; }
.gy-step-body p em { font-style:italic; color:#3a7bd5; }
.gy-step-stat { display:inline-flex; align-items:baseline; gap:8px; background:#f7faff; border:1px solid rgba(0,113,227,.12); border-radius:10px; padding:10px 14px; opacity:0; transform:translateY(6px); transition:opacity .4s .1s, transform .4s .1s; }
.gy-step.is-active .gy-step-stat { opacity:1; transform:none; }
.gy-step-stat b { font-family:var(--font); font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--blue); }
.gy-step-stat span { font-size:12px; color:#6e7686; line-height:1.3; max-width:26ch; }

/* phone wrap — sticky */
.gy-phone-wrap { position:sticky; top:calc(50vh - 340px); height:680px; display:flex; align-items:center; justify-content:center; }
.gy-phone { position:relative; width:300px; height:648px; border-radius:52px; background:linear-gradient(160deg,#1e2028,#0d0f14); box-shadow:0 60px 120px -30px rgba(10,15,30,.55), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12); }

/* Dynamic Island */
.gy-island { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:34px; background:#0a0b0d; border-radius:999px; z-index:6; }
.gy-island::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:12px; height:12px; background:#1a1c24; border-radius:50%; }

/* physical buttons */
.gy-btn-l, .gy-btn-r { position:absolute; width:3px; height:36px; background:#0d0f14; border-radius:2px; }
.gy-btn-l { left:-3px; top:140px; }
.gy-btn-l2 { left:-3px; top:188px; }
.gy-btn-r { right:-3px; top:160px; height:60px; }

.gy-screens { position:absolute; inset:12px; border-radius:40px; overflow:hidden; background:#f0f4f9; }
.gy-screen { position:absolute; inset:0; padding:56px 20px 20px; display:flex; flex-direction:column; gap:0; opacity:0; transform:translateX(30px) scale(.97); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.gy-screen.is-active { opacity:1; transform:none; pointer-events:auto; }
.gy-screen.exit { opacity:0; transform:translateX(-30px) scale(.97); }

/* status bar */
.gy-sb { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; color:#15181d; margin-bottom:16px; }
.gy-sb-r { display:flex; gap:5px; align-items:center; color:#15181d; }

/* app top bar */
.gy-app-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.gy-app-top small { display:block; font-size:11px; color:#8a93a3; }
.gy-app-top b { font-family:var(--font); font-size:18px; font-weight:600; letter-spacing:-.025em; color:#15181d; }
.gy-av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#6ab1f7,#0071e3); }
.gy-unit { font-size:13px; color:#8a93a3; font-weight:500; }
.gy-pill-ok { font-size:11px; font-weight:600; color:#1aa64b; background:rgba(26,166,75,.1); border-radius:999px; padding:5px 11px; }
.gy-live { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#e53935; }
.gy-live i { width:6px; height:6px; border-radius:50%; background:#e53935; animation:livepulse 1.2s ease infinite; }
@keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

/* SCREEN 0 — health ring */
.gy-ring { position:relative; width:170px; height:170px; margin:0 auto 14px; }
.gy-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.gyr-bg { fill:none; stroke:#d9e2ee; stroke-width:11; }
.gyr-fg { fill:none; stroke:#0071e3; stroke-width:11; stroke-linecap:round; stroke-dasharray:503; stroke-dashoffset:503; transition:stroke-dashoffset 1.5s cubic-bezier(.34,1.3,.64,1); }
.gy-screen.is-active .gyr-fg { stroke-dashoffset:110; }
.gy-ring-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gy-ring-c b { font-family:var(--font); font-size:52px; font-weight:700; letter-spacing:-.05em; color:#15181d; line-height:1; }
.gy-ring-c small { font-size:9px; letter-spacing:.14em; color:#8a93a3; margin-top:5px; }
.gy-chips { display:flex; justify-content:center; gap:8px; margin-bottom:16px; }
.gy-chips span { font-size:11px; font-weight:600; color:#6e7686; background:#fff; border:1px solid #dde3ef; border-radius:999px; padding:5px 11px; }
.gy-chips .up { color:#1aa64b; background:rgba(26,166,75,.07); border-color:rgba(26,166,75,.18); }
.gy-bars { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.gy-bar { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; font-size:12px; }
.gy-bar span { color:#6e7686; }
.gy-track { flex:1; height:5px; background:#e3e9f1; border-radius:999px; overflow:hidden; }
.gy-bar .gy-track i { display:block; height:100%; width:var(--w,0%); background:linear-gradient(90deg,#2a8cf0,#0071e3); border-radius:999px; transition:width 1s cubic-bezier(.34,1,.56,1) .4s; }
.gy-screen:not(.is-active) .gy-bar .gy-track i { width:0 !important; }
.gy-meter { flex:1; height:5px; background:#e3e9f1; border-radius:999px; overflow:hidden; }
.gy-bar .gy-meter i { display:block; height:100%; width:var(--w,0%); background:linear-gradient(90deg,#2a8cf0,#0071e3); border-radius:999px; transition:width 1s cubic-bezier(.34,1,.56,1) .4s; }
.gy-screen:not(.is-active) .gy-bar .gy-meter i { width:0 !important; }
.gy-bar em { font-style:normal; font-weight:700; color:#15181d; font-size:13px; }

/* SCREEN 1 — biomarkers */
.gy-bm { display:flex; flex-direction:column; gap:10px; }
.gy-bm-row { display:grid; grid-template-columns:1fr auto 70px; align-items:center; gap:8px; font-size:12px; }
.gy-bm-n { color:#3d4450; font-weight:500; }
.gy-bm-v { font-weight:700; font-size:12px; letter-spacing:-.01em; white-space:nowrap; }
.gy-bm-v small { font-size:10px; color:#8a93a3; font-weight:400; }
.gy-bm-v.ok { color:#1aa64b; }
.gy-bm-v.warn { color:#d97706; }
.gy-bm-bar { height:5px; background:#e3e9f1; border-radius:999px; overflow:hidden; }
.gy-bm-bar i { display:block; height:100%; width:var(--w,0%); border-radius:999px; transition:width 1s cubic-bezier(.34,1,.56,1) .3s; }
.gy-bm-bar i.ok { background:#1aa64b; }
.gy-bm-bar i.warn { background:#d97706; }
.gy-screen:not(.is-active) .gy-bm-bar i { width:0 !important; }

/* SCREEN 2 — glucose graph */
.gy-graph { flex:1; min-height:0; position:relative; margin-bottom:12px; }
.gy-graph svg { width:100%; height:100%; }
.gy-area { transition:opacity .6s; }
.gy-band { position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:9px; color:#8a93a3; letter-spacing:.04em; }
.gy-tiles3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gy-tile3 { background:#fff; border-radius:12px; padding:10px 8px; text-align:center; }
.gy-tile3 small { display:block; font-size:10px; color:#8a93a3; margin-bottom:4px; }
.gy-tile3 b { font-family:var(--font); font-size:18px; font-weight:700; letter-spacing:-.03em; color:#15181d; }

/* SCREEN 3 — care team */
.gy-chat { display:flex; flex-direction:column; gap:10px; flex:1; overflow:hidden; }
.gy-msg { display:flex; gap:8px; align-items:flex-end; }
.gy-msg.in { align-self:flex-start; }
.gy-msg.out { align-self:flex-end; flex-direction:row-reverse; }
.gy-msg-av { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#6ab1f7,#0071e3); flex-shrink:0; }
.gy-msg-av.c2 { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
.gy-msg p { font-size:12.5px; line-height:1.45; color:#15181d; background:#fff; border-radius:14px 14px 14px 4px; padding:10px 13px; max-width:200px; margin:0; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.gy-msg.out p { background:var(--blue); color:#fff; border-radius:14px 14px 4px 14px; }
.gy-msg-meta { font-size:10px; color:#aab0be; padding-left:36px; }
.gy-appt { display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; padding:12px 14px; margin-top:auto; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.gy-appt-t { font-family:var(--mono,'Spline Sans Mono',monospace); font-size:13px; font-weight:700; color:var(--blue); width:40px; }
.gy-appt b { display:block; font-size:13px; font-weight:600; color:#15181d; }
.gy-appt small { font-size:11px; color:#8a93a3; }
.gy-go { margin-left:auto; color:var(--blue); font-weight:700; }

/* phone dot indicators */
.gy-dots { position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.gy-dot-i { width:6px; height:6px; border-radius:50%; background:#d0d6e0; transition:background .3s, width .3s; }
.gy-dot-i.is-active { background:var(--blue); width:18px; border-radius:999px; }

/* stats row */
.gy-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#ebeef3; border-top:1px solid #ebeef3; border-bottom:1px solid #ebeef3; margin-top:clamp(60px,7vw,100px); }
.gy-stat { background:#fff; padding:clamp(28px,4vw,44px) 24px; text-align:center; }
.gy-stat b { display:block; font-family:var(--font); font-size:clamp(34px,4vw,52px); font-weight:700; letter-spacing:-.04em; color:#15181d; }
.gy-stat span { font-size:13px; color:#6e7686; margin-top:6px; display:block; }

/* responsive */
@media (max-width: 900px) {
  .gy-body { grid-template-columns:1fr; padding:0 24px; }
  .gy-phone-wrap { position:relative; top:0; height:auto; margin:48px auto; }
  .gy-steps { padding-bottom:0; }
  .gy-stats-row { grid-template-columns:repeat(2,1fr); }
  .gy-step::before { left:-12px; }
}
@media (max-width: 480px) {
  .gy-stats-row { grid-template-columns:1fr 1fr; }
  .gy-step { grid-template-columns:44px 1fr; gap:14px; }
}

/* ════════════════════════════════════════════════
   CTA v2 — 2-col premium booking card (ct2-*)
   ════════════════════════════════════════════════ */
.ct2 { background:#07080c; padding:clamp(80px,9vw,140px) 0; position:relative; overflow:hidden; }

/* ambient glows */
.ct2-glow { position:absolute; border-radius:50%; pointer-events:none; }
.ct2-glow-l { width:600px; height:600px; left:-200px; top:-100px; background:radial-gradient(50% 50% at 50% 50%, rgba(0,113,227,.18) 0%, transparent 100%); }
.ct2-glow-r { width:500px; height:500px; right:-100px; bottom:-150px; background:radial-gradient(50% 50% at 50% 50%, rgba(42,140,240,.12) 0%, transparent 100%); }

.ct2-inner { max-width:1200px; margin:0 auto; padding:0 clamp(24px,5vw,80px); display:grid; grid-template-columns:1fr 420px; gap:clamp(48px,6vw,100px); align-items:center; position:relative; z-index:1; }
.ct2-inner-center { display:block; max-width:780px; text-align:center; }
.ct2-inner-center .ct2-copy { display:flex; flex-direction:column; align-items:center; }
.ct2-inner-center .ct2-sub { max-width:54ch; margin-left:auto; margin-right:auto; }
.ct2-inner-center .ct2-trust { justify-content:center; }
.ct2-inner-center .ct2-btns { justify-content:center; }
.ct2-inner-center .ct2-fine { margin-top:26px; }

/* left copy */
.ct2-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono,'Spline Sans Mono',monospace); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:24px; }
.ct2-pulse { width:7px; height:7px; border-radius:50%; background:#2a8cf0; box-shadow:0 0 0 0 rgba(42,140,240,.6); animation:lmxdot 2.4s ease infinite; }
.ct2-h { font-family:var(--font); font-size:clamp(36px,4.5vw,62px); font-weight:600; letter-spacing:-.04em; line-height:1.04; color:#f5f5f7; margin:0 0 20px; }
.ct2-h em { font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:#6ab1f7; }
.ct2-sub { font-size:clamp(15px,1.4vw,17px); line-height:1.65; color:rgba(255,255,255,.55); margin:0 0 36px; max-width:46ch; }

/* trust row */
.ct2-trust { display:flex; gap:0; margin-bottom:40px; }
.ct2-t { padding:16px 28px; border-right:1px solid rgba(255,255,255,.08); }
.ct2-t:first-child { padding-left:0; }
.ct2-t:last-child { border-right:none; }
.ct2-t strong { display:block; font-family:var(--font); font-size:22px; font-weight:700; letter-spacing:-.03em; color:#f5f5f7; }
.ct2-t span { font-size:12px; color:rgba(255,255,255,.4); margin-top:3px; display:block; }

/* buttons */
.ct2-btns { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ct2-btn-primary { display:inline-flex; align-items:center; padding:16px 32px; background:#0071e3; color:#fff; border-radius:999px; font-size:15px; font-weight:600; text-decoration:none; letter-spacing:-.01em; transition:background .25s, transform .25s, box-shadow .25s; box-shadow:0 8px 24px rgba(0,113,227,.35); }
.ct2-btn-primary:hover { background:#0077ed; transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,113,227,.45); }
.ct2-btn-ghost { color:rgba(255,255,255,.65); font-size:14px; font-weight:500; text-decoration:none; letter-spacing:.01em; transition:color .2s; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px; }
.ct2-btn-ghost:hover { color:#fff; border-bottom-color:#fff; }

/* right card */
.ct2-card { background:#fff; border-radius:24px; padding:32px; box-shadow:0 40px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06); }
.ct2-card-badge { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#3d4450; background:#f0f4fa; border-radius:999px; padding:7px 14px; margin-bottom:10px; }
.ct2-avail-dot { width:7px; height:7px; border-radius:50%; background:#1aa64b; box-shadow:0 0 0 0 rgba(26,166,75,.5); animation:lmxdot 2.4s ease infinite; }
.ct2-card-slot { font-family:var(--font); font-size:26px; font-weight:700; letter-spacing:-.03em; color:#15181d; margin-bottom:24px; }

.ct2-doctor { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.ct2-dr-av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#6ab1f7,#0071e3); flex-shrink:0; }
.ct2-dr-info strong { display:block; font-size:15px; font-weight:600; color:#15181d; letter-spacing:-.01em; }
.ct2-dr-info span { font-size:12px; color:#6e7686; }
.ct2-dr-badge { margin-left:auto; font-size:10px; font-weight:700; color:var(--blue); background:rgba(0,113,227,.08); padding:5px 10px; border-radius:8px; letter-spacing:.04em; flex-shrink:0; }

.ct2-divider { height:1px; background:#ebeef3; margin:0 0 20px; }
.ct2-incl-lbl { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#aab0be; margin:0 0 14px; }
.ct2-list { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:11px; }
.ct2-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#3d4450; line-height:1.4; }
.ct2-ck { width:20px; height:20px; border-radius:50%; background:rgba(0,113,227,.1); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--blue); font-weight:700; flex-shrink:0; }

.ct2-reserve { display:block; width:100%; text-align:center; padding:15px; background:#15181d; color:#fff; border-radius:14px; font-size:15px; font-weight:600; text-decoration:none; letter-spacing:-.01em; transition:background .25s, transform .2s; margin-bottom:14px; }
.ct2-reserve:hover { background:#0071e3; transform:translateY(-1px); }
.ct2-fine { font-size:12px; text-align:center; color:#aab0be; margin:0; }

@media (max-width: 960px) {
  .ct2-inner { grid-template-columns:1fr; }
  .ct2-card { max-width:480px; margin:0 auto; }
}
@media (max-width: 480px) {
  .ct2-trust { flex-wrap:wrap; gap:0; }
  .ct2-t { border-bottom:1px solid rgba(255,255,255,.08); border-right:none; padding:12px 0; width:50%; }
}

/* ── vb-meta (Metabolic / CGM cell) ── */
.vb-meta { grid-column: 3; grid-row: 1; justify-content: flex-end; background: linear-gradient(165deg, #eaf1fb, #dde8f6); }
.vb-cgm-art { position: absolute; top: 0; left: 0; right: 0; height: 76px; overflow: hidden; }
.vb-cgm-svg { width: 100%; height: 100%; }
.vb-cgm-dot { animation: cgmpulse 2s ease-in-out infinite; transform-origin: center; }
@keyframes cgmpulse { 0%,100%{r:3.5;opacity:1} 50%{r:5.5;opacity:.7} }
.vb-cgm-val { position: absolute; top: 8px; right: 12px; font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: #15181d; }
.vb-cgm-val small { font-size: 11px; color: #8a93a3; font-weight: 400; }

/* ── vb-cardiac (ECG cell) ── */
.vb-cardiac { grid-column: 4; grid-row: 1; justify-content: flex-end; background: linear-gradient(165deg, #fdf0f0, #fbe0e0); }
.vb-ecg-wrap { position: absolute; top: 12px; left: 0; right: 0; height: 56px; overflow: hidden; }
.vb-ecg-svg { width: 100%; height: 100%; }
.vb-ecg-path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: ecgdraw 2.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes ecgdraw { 0%{stroke-dashoffset:400;opacity:0} 10%{opacity:1} 70%,100%{stroke-dashoffset:0} }
.vb-ecg-val { position: absolute; top: 8px; right: 12px; font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: #c0392b; }
.vb-ecg-val small { font-size: 11px; color: #c07070; font-weight: 400; }
.vb-cardiac .vb-tag { color: #c0392b; background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.15); }
.vb-cardiac .vb-h { color: #15181d; }

/* ── vb-svclist (services list cell) ── */
.vb-svclist { grid-column: 4; grid-row: 2; background: #fff; justify-content: space-between; }
.vb-svc-tags { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.vb-stag { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: #3d4450; transition: color .2s, transform .2s; }
.vb-stag svg { color: var(--blue); flex-shrink: 0; }
.vb-svclist:hover .vb-stag { transform: translateX(3px); }
.vb-svclist:hover .vb-stag:nth-child(2) { transition-delay: .03s; }
.vb-svclist:hover .vb-stag:nth-child(3) { transition-delay: .06s; }
.vb-svclist:hover .vb-stag:nth-child(4) { transition-delay: .09s; }
.vb-svclist:hover .vb-stag:nth-child(5) { transition-delay: .12s; }
.vb-svclist:hover .vb-stag:nth-child(6) { transition-delay: .15s; }

/* ════ WHAT YOU GAIN v3 — dark centered showcase ════ */
/* Override light layout rules */
.gy { background: #07080c !important; overflow: hidden; }
.gy-bg-glow { position:absolute; width:700px; height:700px; top:30%; left:50%; transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(0,113,227,.16) 0%, transparent 100%); pointer-events:none; z-index:0; }
.gy-header { position:relative; z-index:1; }
.gy-eyebrow { color:rgba(255,255,255,.45) !important; background:rgba(255,255,255,.06) !important; }
.gy-dot { background:#2a8cf0 !important; }
.gy-h { color:#f5f5f7 !important; }
.gy-h em { color:#6ab1f7 !important; }
.gy-lead { color:rgba(255,255,255,.45) !important; }

/* ── stage (centered phone + float cards) ── */
.gy-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:clamp(32px,4vw,56px) clamp(24px,5vw,80px); z-index:1; }
.gy-phone { position:relative; width:320px; height:690px; border-radius:54px; background:linear-gradient(160deg,#1e2028,#0d0f14); box-shadow:0 80px 160px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.1); transition:transform .6s cubic-bezier(.2,.7,.2,1); flex-shrink:0; }
.gy-phone:hover { transform:none; }
.gy-screens { position:absolute; inset:12px; border-radius:40px; overflow:hidden; background:#f0f4f9; }

/* floating data cards */
.gy-float { position:absolute; background:rgba(255,255,255,.06); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:16px 20px; min-width:160px; }
.gy-fl-l { right:calc(50% + 200px); animation:gyfloat 4s ease-in-out infinite; }
.gy-fl-r { left:calc(50% + 200px); animation:gyfloat 4s ease-in-out infinite; animation-delay:-2s; }
@keyframes gyfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.gy-fc-top { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.45); text-transform:uppercase; margin-bottom:8px; }
.gy-fc-top svg { opacity:.6; }
.gy-fc-val { font-family:var(--font); font-size:28px; font-weight:700; letter-spacing:-.04em; color:#f5f5f7; line-height:1; margin-bottom:6px; }
.gy-fc-val small { font-size:14px; color:rgba(255,255,255,.4); font-weight:400; }
.gy-fc-delta { font-size:12px; font-weight:500; }
.gy-fc-delta.up { color:#34c759; }
.gy-fc-delta.ok { color:#2a8cf0; }

/* ── feature tabs ── */
.gy-tabs-row { display:flex; justify-content:center; gap:8px; padding:0 clamp(16px,3vw,40px); margin:clamp(28px,3vw,40px) auto 0; max-width:820px; position:relative; z-index:1; }
.gy-tab { display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px clamp(12px,2vw,28px); border:1px solid rgba(255,255,255,.07); border-radius:18px; background:rgba(255,255,255,.03); color:rgba(255,255,255,.38); cursor:pointer; transition:background .3s, border-color .3s, color .3s, transform .3s; font-size:12.5px; font-weight:500; font-family:var(--font); flex:1; line-height:1; }
.gy-tab svg { flex-shrink:0; }
.gy-tab.is-active { background:rgba(0,113,227,.14); border-color:rgba(0,113,227,.4); color:#6ab1f7; }
.gy-tab:hover:not(.is-active) { background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); border-color:rgba(255,255,255,.13); transform:translateY(-2px); }

/* ── feature descriptions ── */
.gy-descs { max-width:580px; margin:clamp(24px,3vw,36px) auto 0; text-align:center; padding:0 24px; position:relative; z-index:1; min-height:130px; }
.gy-desc { opacity:0; transform:translateY(10px); transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); position:absolute; inset:0; pointer-events:none; }
.gy-desc.is-active { opacity:1; transform:none; pointer-events:auto; position:relative; }
.gy-desc h3 { font-family:var(--font); font-size:clamp(21px,2vw,28px); font-weight:600; letter-spacing:-.03em; color:#f5f5f7; margin:0 0 10px; }
.gy-desc p { font-size:clamp(14px,1.2vw,15.5px); line-height:1.65; color:rgba(255,255,255,.45); margin:0 0 18px; }
.gy-desc-stat { display:inline-flex; align-items:baseline; gap:9px; background:rgba(0,113,227,.12); border:1px solid rgba(0,113,227,.25); border-radius:12px; padding:11px 18px; }
.gy-desc-stat b { font-family:var(--font); font-size:24px; font-weight:700; letter-spacing:-.04em; color:#6ab1f7; }
.gy-desc-stat span { font-size:12px; color:rgba(255,255,255,.38); max-width:28ch; line-height:1.4; }

/* stats row — dark treatment */
.gy-stats-row { background:rgba(255,255,255,.03) !important; border-top:1px solid rgba(255,255,255,.07) !important; border-bottom:none !important; }
.gy-stat b { color:#f5f5f7 !important; }
.gy-stat span { color:rgba(255,255,255,.38) !important; }

/* responsive */
@media (max-width: 960px) {
  .gy-fl-l, .gy-fl-r { display:none; }
  .gy-stage { padding:32px 16px; }
}
@media (max-width: 600px) {
  .gy-tabs-row { gap:6px; }
  .gy-tab { padding:14px 8px; font-size:11px; gap:7px; }
  .gy-tab svg { width:16px; height:16px; }
}

/* ── GAINS v4: phone + feature rail (clean two-column) ── */
.gy-stage2 {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: center;
  max-width: 1060px;
  margin: clamp(44px,5vw,76px) auto 0;
  padding: 0 clamp(24px,5vw,40px);
}
.gy-stage2 .gy-phone { margin: 0 auto; }

.gy-rail { display: flex; flex-direction: column; gap: 10px; }
.gy-rail .gy-rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 17px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font);
  transition: background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.gy-rail .gy-rail-item:hover { background: rgba(255,255,255,.05); transform: translateX(3px); }
.gy-rail .gy-rail-item.is-active {
  background: rgba(255,255,255,.06);
  border-color: rgba(0,113,227,.42);
}
.gy-rail-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
  transition: background .4s, color .4s, box-shadow .4s;
}
.gy-rail-item.is-active .gy-rail-ic { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(0,113,227,.4); }
.gy-rail-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gy-rail-tx b { font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: #f5f5f7; line-height: 1.25; }
.gy-rail-tx small {
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.46);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s ease, opacity .4s ease, margin-top .4s ease;
}
.gy-rail-item.is-active .gy-rail-tx small { max-height: 64px; opacity: 1; margin-top: 2px; }
.gy-rail-stat {
  font-size: 22px; font-weight: 700; letter-spacing: -.03em;
  color: rgba(255,255,255,.28); white-space: nowrap; transition: color .4s;
}
.gy-rail-stat i { font-style: normal; font-size: 13px; font-weight: 600; opacity: .55; }
.gy-rail-item.is-active .gy-rail-stat { color: #5bbbff; }
.gy-rail-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: transparent; pointer-events: none; }
.gy-rail-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), #5bbbff); border-radius: 2px; }
.gy-rail-item.is-active .gy-rail-prog i { animation: gyProg 4s linear forwards; }
@keyframes gyProg { from { width: 0; } to { width: 100%; } }

/* ════════════════════════════════════════════════
   WHAT YOU GAIN v5 — sticky phone + scroll chapters
   Reliable IO-driven narrative · Apple-grade
   ════════════════════════════════════════════════ */
#gains.gy { background: linear-gradient(180deg,#ffffff 0%,#f4f7fb 46%,#eef2f8 100%) !important; padding: clamp(84px,9vw,140px) 0 clamp(80px,8vw,120px) !important; position: relative; overflow: visible !important; }
.gyn-bg { position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(40% 36% at 78% 18%, rgba(0,113,227,.10), transparent 70%),
    radial-gradient(34% 30% at 12% 70%, rgba(0,113,227,.06), transparent 72%); }
.gyn-head { position:relative; z-index:2; text-align:center; max-width:760px; }
.gyn-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.02em; color:#5b6472; background:rgba(13,22,38,.045); border:1px solid rgba(13,22,38,.07); border-radius:999px; padding:7px 15px; }
.gyn-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(0,113,227,.14); }
.gyn-title { font-family:var(--font); font-size:clamp(34px,5vw,62px); font-weight:700; letter-spacing:-.035em; line-height:1.04; color:#0a0c10; margin:22px 0 0; }
.gyn-title em { font-style:normal; color:var(--blue); background:linear-gradient(90deg,#0071e3,#43a4ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gyn-lead { font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:#5b6472; margin:20px auto 0; max-width:600px; }

/* stage: phone (sticky) + chapters */
.gyn-stage { position:relative; z-index:2; display:grid; grid-template-columns:minmax(320px,1fr) minmax(380px,1.05fr); gap:clamp(40px,6vw,96px); align-items:start; margin-top:clamp(48px,6vw,90px); }
.gyn-phonecol { position:sticky; top:calc(50vh - 350px); display:flex; align-items:center; justify-content:center; min-height:700px; }
.gyn-glow { position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(0,113,227,.16), transparent 70%); filter:blur(10px); z-index:0; animation:gynGlow 7s ease-in-out infinite; }
@keyframes gynGlow { 0%,100%{transform:scale(1);opacity:.85;} 50%{transform:scale(1.08);opacity:1;} }
.gyn-phone { position:relative; z-index:1; transform:translateZ(0); }

/* chapters — scroll narrative */
.gyn-chapters { position:relative; padding:clamp(60px,18vh,180px) 0; }
.gyn-chapters::before { content:''; position:absolute; left:13px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,transparent,rgba(13,22,38,.1) 12%,rgba(13,22,38,.1) 88%,transparent); }
.gyn-chapter { position:relative; padding:0 0 clamp(120px,26vh,220px) 46px; opacity:.4; filter:saturate(.6); transition:opacity .6s var(--ease), filter .6s; cursor:pointer; }
.gyn-chapter:last-child { padding-bottom:0; }
.gyn-chapter.is-active { opacity:1; filter:none; }
.gyn-node { position:absolute; left:7px; top:6px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid rgba(13,22,38,.18); transition:border-color .45s, box-shadow .45s, transform .45s; z-index:1; }
.gyn-chapter.is-active .gyn-node { border-color:var(--blue); background:var(--blue); transform:scale(1.15); box-shadow:0 0 0 6px rgba(0,113,227,.14); }
.gyn-ch-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.gyn-ch-no { font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:.18em; color:#aab3c2; transition:color .45s; }
.gyn-chapter.is-active .gyn-ch-no { color:var(--blue); }
.gyn-ch-ic { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#fff; border:1px solid rgba(13,22,38,.08); color:#7a8493; box-shadow:0 2px 8px rgba(16,24,40,.05); transition:background .45s, color .45s, box-shadow .45s, transform .45s; }
.gyn-chapter.is-active .gyn-ch-ic { background:var(--blue); color:#fff; box-shadow:0 10px 26px rgba(0,113,227,.32); transform:translateY(-2px); }
.gyn-chapter h3 { font-family:var(--font); font-size:clamp(22px,2.4vw,30px); font-weight:650; letter-spacing:-.028em; line-height:1.14; color:#0a0c10; margin:0 0 12px; }
.gyn-chapter p { font-size:clamp(14.5px,1.3vw,16.5px); line-height:1.6; color:#5b6472; margin:0 0 18px; max-width:42ch; }
.gyn-ch-stat { display:inline-flex; align-items:baseline; gap:8px; }
.gyn-ch-stat b { font-family:var(--font); font-size:30px; font-weight:800; letter-spacing:-.04em; color:#0a0c10; font-variant-numeric:tabular-nums; transition:color .45s; }
.gyn-chapter.is-active .gyn-ch-stat b { color:var(--blue); }
.gyn-ch-stat i { font-style:normal; font-size:13px; font-weight:500; color:#8a93a3; }

/* dots under phone */
.gyn-dots { position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); }

/* E-E-A-T trust ribbon */
.gyn-trust { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,34px); margin-top:clamp(60px,8vw,110px); padding-top:clamp(34px,4vw,52px); border-top:1px solid rgba(13,22,38,.08); }
.gyn-trust-item { display:flex; flex-direction:column; gap:7px; }
.gyn-trust-ic { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(0,113,227,.07); color:var(--blue); margin-bottom:4px; }
.gyn-trust-item b { font-size:15px; font-weight:650; letter-spacing:-.01em; color:#0a0c10; }
.gyn-trust-item small { font-size:13px; line-height:1.5; color:#6e7686; }

@media (max-width:900px) {
  .gyn-stage { grid-template-columns:1fr; gap:8px; }
  .gyn-phonecol { position:sticky; top:74px; min-height:0; padding-bottom:8px; }
  .gyn-phone { transform:scale(.82); transform-origin:top center; }
  .gyn-chapters { padding:24px 0 0; }
  .gyn-chapters::before { left:13px; }
  .gyn-chapter { padding-bottom:clamp(80px,16vh,140px); }
  .gyn-trust { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .gyn-trust { grid-template-columns:1fr; gap:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gyn-glow { animation:none; }
  .gyn-chapter { opacity:1; filter:none; }
}

/* ── WHAT YOU GAIN — bento panel redesign (gnb-*) ── */
.gy { background:#fff; padding:clamp(80px,9vw,130px) 0 clamp(60px,7vw,100px); overflow:visible !important; }
.gnb-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:16px;
  margin-top:clamp(44px,5vw,72px);
}
/* card base */
.gnb-card {
  border-radius:28px;
  padding:clamp(28px,3vw,42px);
  position:relative;
  overflow:hidden;
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.gnb-card:hover { transform:translateY(-5px); box-shadow:0 24px 56px -16px rgba(10,22,40,.18); }
.gnb-label { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.55; }
.gnb-card h3 { font-family:var(--font); font-size:clamp(24px,2.2vw,32px); font-weight:700; letter-spacing:-.035em; line-height:1.12; margin:0; }
.gnb-copy p { font-size:clamp(13.5px,1.1vw,15px); line-height:1.6; opacity:.68; margin:0; }
.gnb-chip { display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:.01em; border-radius:999px; padding:7px 14px; align-self:flex-start; }

/* Score card — dark navy */
.gnb-score { background:#07090d; color:#fff; grid-column:1; grid-row:1; }
.gnb-score .gnb-label { color:rgba(255,255,255,.55); }
.gnb-score h3 { color:#fff; }
.gnb-score .gnb-copy p { color:rgba(255,255,255,.62); }
.gnb-chip { background:rgba(0,113,227,.2); color:#6ab1f7; }
.gnb-score-viz { display:flex; align-items:center; gap:24px; margin-top:4px; }
.gnb-ring-wrap { position:relative; width:140px; height:140px; flex-shrink:0; }
.gnb-ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
.gnb-rg-bg { fill:none; stroke:rgba(255,255,255,.1); stroke-width:12; }
.gnb-rg-fg { fill:none; stroke:url(#gnbRingGrad); stroke-width:12; stroke-linecap:round; stroke-dasharray:490; stroke-dashoffset:490; transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s; }
.gnb-card.rv.on .gnb-rg-fg { stroke-dashoffset:99; }
.gnb-ring-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gnb-ring-inner b { font-family:var(--font); font-size:40px; font-weight:760; letter-spacing:-.05em; color:#fff; line-height:1; }
.gnb-ring-inner small { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.48); margin-top:3px; }
.gnb-score-sub { display:flex; flex-direction:column; gap:10px; flex:1; }
.gnb-score-sub div { display:flex; align-items:center; gap:10px; }
.gnb-score-sub span { font-size:12px; font-weight:500; color:rgba(255,255,255,.5); flex:1; }
.gnb-score-sub b { font-family:var(--font); font-size:20px; font-weight:720; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums; }
.gnb-score-sub i { font-style:normal; font-size:13px; font-weight:700; }
.gnb-score-sub i.g { color:#34d399; }
.gnb-score-sub i.r { color:#f87171; }

/* Biomarkers card — light */
.gnb-bm { background:#f5f7fb; color:#0a0c10; grid-column:2; grid-row:1; }
.gnb-bm-list { display:flex; flex-direction:column; gap:0; }
.gnb-bm-row { display:grid; grid-template-columns:80px 1fr 56px; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(13,22,38,.07); }
.gnb-bm-row:last-child { border-bottom:0; }
.gnb-bm-n { font-size:12px; font-weight:600; color:#5b6472; }
.gnb-bm-track { height:6px; background:rgba(13,22,38,.07); border-radius:99px; overflow:hidden; }
.gnb-bm-track i { display:block; height:100%; width:0; border-radius:99px; transition:width 1.1s cubic-bezier(.34,1,.56,1) .35s; }
.gnb-card.rv.on .gnb-bm-track i { width:var(--w,0%); }
.gnb-bm-track i.ok { background:linear-gradient(90deg,#2a8cf0,#0071e3); }
.gnb-bm-track i.warn { background:#f0a330; }
.gnb-bm-v { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; text-align:right; }
.gnb-bm-v.ok { color:#0071e3; }
.gnb-bm-v.warn { color:#d97706; }
.gnb-bm-foot { display:flex; gap:8px; }
.gnb-pill { font-size:11px; font-weight:650; padding:5px 12px; border-radius:999px; }
.gnb-pill.ok { background:rgba(0,113,227,.1); color:#0071e3; }
.gnb-pill.warn { background:rgba(217,119,6,.1); color:#d97706; }

/* Glucose card — white */
.gnb-glu { background:#fff; border:1px solid rgba(13,22,38,.07); color:#0a0c10; grid-column:1; grid-row:2; }
.gnb-glu-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.gnb-live-dot { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#e5484d; }
.gnb-live-dot i { width:7px; height:7px; border-radius:50%; background:#e5484d; animation:livepulse 1.2s ease infinite; }
.gnb-glu-val { font-family:var(--font); font-size:26px; font-weight:760; letter-spacing:-.04em; color:#0a0c10; font-variant-numeric:tabular-nums; }
.gnb-glu-val small { font-size:12px; font-weight:500; color:#8a93a3; margin-left:3px; }
.gnb-glu-svg { width:100%; height:110px; display:block; }
.gnb-glu-line { stroke-dasharray:620; stroke-dashoffset:620; }
.gnb-card.rv.on .gnb-glu-line { animation:lxDraw 1.5s cubic-bezier(.4,0,.2,1) .3s forwards; }
.gnb-glu-dot { opacity:0; }
.gnb-card.rv.on .gnb-glu-dot { animation:lxPop .4s ease 1.7s forwards; }
.gnb-glu-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.gnb-glu-stats div { background:#f5f7fb; border-radius:13px; padding:11px 10px; text-align:center; }
.gnb-glu-stats small { display:block; font-size:10px; font-weight:600; color:#8a93a3; margin-bottom:4px; }
.gnb-glu-stats b { font-family:var(--font); font-size:19px; font-weight:740; letter-spacing:-.04em; color:#0a0c10; }
.gnb-glu-stats b.ok { color:#1aa64b; font-size:16px; }

/* Care card — navy */
.gnb-care { background:#0a1628; color:#fff; grid-column:2; grid-row:2; }
.gnb-care .gnb-label { color:rgba(255,255,255,.45); }
.gnb-care h3 { color:#fff; }
.gnb-care .gnb-copy p { color:rgba(255,255,255,.6); }
.gnb-chip-light { background:rgba(0,113,227,.25); color:#6ab1f7; }
.gnb-care-viz { display:flex; flex-direction:column; gap:12px; flex:1; }
.gnb-doc { display:flex; align-items:center; gap:12px; padding:13px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; }
.gnb-doc-av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#6ab1f7,#0071e3); flex-shrink:0; box-shadow:0 4px 12px rgba(0,113,227,.35); }
.gnb-doc div { flex:1; }
.gnb-doc b { display:block; font-size:14px; font-weight:650; letter-spacing:-.02em; color:#fff; }
.gnb-doc small { font-size:11px; color:rgba(255,255,255,.5); }
.gnb-online { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#34d399; flex-shrink:0; }
.gnb-online i { width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.2); animation:livepulse 1.4s ease infinite; }
.gnb-msgs { display:flex; flex-direction:column; gap:8px; flex:1; overflow:hidden; }
.gnb-msg { display:flex; }
.gnb-msg.in { justify-content:flex-start; }
.gnb-msg.out { justify-content:flex-end; }
.gnb-msg p { font-size:12px; line-height:1.45; margin:0; padding:10px 13px; max-width:220px; border-radius:16px; }
.gnb-msg.in p { background:rgba(255,255,255,.09); color:rgba(255,255,255,.88); border-bottom-left-radius:5px; }
.gnb-msg.out p { background:var(--blue); color:#fff; border-bottom-right-radius:5px; }

@media (max-width:900px) { .gnb-grid { grid-template-columns:1fr; } .gnb-score,.gnb-bm,.gnb-glu,.gnb-care { grid-column:1; grid-row:auto; } }

/* gradient def for ring — inject via SVG */
.gnb-ring-svg defs { display:block; }
.gyn-phone .gy-screen { padding:52px 17px 70px; gap:0; }

/* frosted bottom tab bar */
.gy-tabbar { position:absolute; left:0; right:0; top:auto; bottom:0; width:auto; height:60px; display:flex; justify-content:space-around; align-items:center; padding:0 6px 6px; background:rgba(248,250,253,.78); backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%); border-top:1px solid rgba(13,22,38,.06); z-index:5; }
.gy-tb { display:flex; flex-direction:column; align-items:center; gap:4px; color:#aeb6c4; font-size:9px; font-weight:600; letter-spacing:.01em; transition:color .35s ease, transform .35s ease; }
.gy-tb i { font-style:normal; }
.gy-tb svg { width:21px; height:21px; }
.gy-tb.is-on { color:var(--blue); }
.gy-tb.is-on svg { transform:translateY(-1px); }

/* app top — cleaner */
.gyn-phone .gy-app-top { margin-bottom:16px; }
.gyn-phone .gy-app-top small { font-size:10.5px; font-weight:500; color:#9aa3b2; letter-spacing:.01em; }
.gyn-phone .gy-app-top b { font-size:19px; font-weight:680; color:#0a0c10; }
.gyn-phone .gy-av { box-shadow:0 3px 10px rgba(0,113,227,.3); }

/* screen 0 — ring + grouped category card */
.gyn-phone .gy-ring { width:158px; height:158px; margin:2px auto 14px; }
.gyn-phone .gy-ring-c b { font-size:48px; font-weight:720; }
.gyn-phone .gy-bars { background:#fff; border-radius:18px; padding:6px 14px; box-shadow:0 1px 3px rgba(16,24,40,.05),0 8px 22px -14px rgba(16,24,40,.18); gap:0; }
.gyn-phone .gy-bar { padding:11px 0; border-bottom:1px solid rgba(13,22,38,.055); font-size:12.5px; }
.gyn-phone .gy-bar:last-child { border-bottom:0; }
.gyn-phone .gy-bar span { color:#5b6472; font-weight:500; }

/* screen 1 — grouped biomarker list */
.gyn-phone .gy-bm { background:#fff; border-radius:18px; padding:4px 14px; gap:0; box-shadow:0 1px 3px rgba(16,24,40,.05),0 8px 22px -14px rgba(16,24,40,.18); }
.gyn-phone .gy-bm-row { padding:11px 0; border-bottom:1px solid rgba(13,22,38,.055); }
.gyn-phone .gy-bm-row:last-child { border-bottom:0; }
.gyn-phone .gy-bm-n { color:#3d4450; font-weight:550; }

/* screen 2 — glucose in a card */
.gyn-phone .gy-graph { background:#fff; border-radius:18px; padding:14px 12px 8px; box-shadow:0 1px 3px rgba(16,24,40,.05),0 8px 22px -14px rgba(16,24,40,.18); }
.gyn-phone .gy-tile3 { border:1px solid rgba(13,22,38,.06); box-shadow:0 1px 3px rgba(16,24,40,.04); }
.gyn-phone .gy-tile3 b { font-weight:720; }

/* screen 3 — chat + appt polish */
.gyn-phone .gy-msg p { box-shadow:0 2px 8px -2px rgba(16,24,40,.1); font-size:12px; }
.gyn-phone .gy-appt { border:1px solid rgba(13,22,38,.06); box-shadow:0 4px 16px -6px rgba(16,24,40,.16); }
.gyn-phone .gy-pill-ok { font-weight:650; }

/* ══════ LYXAA APP UI v2 — Oura-grade, brand blue ══════ */
.gyn-phone .gy-screen { padding:50px 16px 70px; }
.lx-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.lx-top small { display:block; font-size:10.5px; font-weight:500; color:#9aa3b2; letter-spacing:.01em; margin-bottom:1px; }
.lx-top b { font-family:var(--font); font-size:19px; font-weight:680; letter-spacing:-.03em; color:#0a0c10; }
.lx-unit { font-size:13px; font-weight:500; color:#9aa3b2; }
.gyn-phone .gy-av { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#6ab1f7,#0071e3); box-shadow:0 3px 10px rgba(0,113,227,.3); }

/* generic card + tags */
.lx-card { background:#fff; border-radius:20px; padding:16px; box-shadow:0 1px 3px rgba(16,24,40,.05),0 14px 32px -18px rgba(16,24,40,.22); border:1px solid rgba(13,22,38,.04); }
.lx-tag { font-size:10.5px; font-weight:650; letter-spacing:-.005em; border-radius:999px; padding:4px 10px; }
.lx-tag.ok { color:#0071e3; background:rgba(0,113,227,.1); }
.lx-tag-lg { font-size:11.5px; padding:6px 13px; }

/* day selector */
.lx-days { display:flex; gap:5px; margin-bottom:14px; }
.lx-days span { flex:1; text-align:center; font-size:11px; font-weight:600; color:#9aa3b2; padding:8px 0; border-radius:11px; background:#fff; border:1px solid rgba(13,22,38,.05); }
.lx-days span.on { flex:1.7; color:#fff; background:#0a0c10; border-color:#0a0c10; }

/* screen 0 — score card */
.lx-score-head { display:flex; justify-content:space-between; align-items:flex-start; }
.lx-score-main { display:flex; flex-direction:column; }
.lx-k { font-size:11px; font-weight:600; color:#9aa3b2; letter-spacing:.01em; }
.lx-bignum { font-family:var(--font); font-size:62px; font-weight:760; letter-spacing:-.05em; line-height:.92; color:#0a0c10; margin:4px 0 7px; }
.lx-tag.ok.lx-tag, .lx-score-main .lx-tag { align-self:flex-start; }
.lx-delta { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; letter-spacing:-.02em; padding:6px 10px; border-radius:999px; }
.lx-delta.up { color:#1aa64b; background:rgba(26,166,75,.1); }
.lx-delta i { font-style:normal; font-size:9.5px; font-weight:600; opacity:.8; margin-left:1px; }
.lx-spark { height:62px; margin:10px 0 12px; }
.lx-spark svg { width:100%; height:100%; }
.lx-spark-line { stroke-dasharray:620; stroke-dashoffset:620; }
.gy-screen.is-active .lx-spark-line { animation:lxDraw 1.3s cubic-bezier(.4,0,.2,1) .25s forwards; }
@keyframes lxDraw { to { stroke-dashoffset:0; } }
.lx-spark-dot, .lx-glu-dot { opacity:0; }
.gy-screen.is-active .lx-spark-dot, .gy-screen.is-active .lx-glu-dot { animation:lxPop .4s ease 1.4s forwards; }
@keyframes lxPop { from{opacity:0;transform:scale(.4);} to{opacity:1;transform:scale(1);} }
.lx-substats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-top:13px; border-top:1px solid rgba(13,22,38,.06); }
.lx-substats div { display:flex; flex-direction:column; gap:2px; }
.lx-substats span { font-size:10.5px; font-weight:500; color:#9aa3b2; }
.lx-substats b { font-family:var(--font); font-size:21px; font-weight:720; letter-spacing:-.04em; color:#0a0c10; }
.lx-substats i { font-style:normal; font-size:10px; font-weight:650; }
.lx-substats i.up { color:#1aa64b; }
.lx-substats i.dn { color:#d97706; }

/* screen 1 — biomarker list */
.lx-list { padding:2px 16px; }
.lx-row { display:grid; grid-template-columns:1fr auto 64px; align-items:center; gap:10px; padding:11.5px 0; border-bottom:1px solid rgba(13,22,38,.055); }
.lx-row:last-child { border-bottom:0; }
.lx-row-n { font-size:12.5px; font-weight:550; color:#3d4450; }
.lx-row-v { font-size:13px; font-weight:720; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lx-row-v small { font-size:9.5px; font-weight:500; color:#9aa3b2; margin-left:3px; }
.lx-row-v.ok { color:#0071e3; }
.lx-row-v.warn { color:#d97706; }
.lx-row-bar { height:5px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.lx-row-bar i { display:block; height:100%; width:var(--w,0%); border-radius:999px; transition:width .9s cubic-bezier(.34,1,.56,1) .3s; }
.lx-row-bar i.ok { background:linear-gradient(90deg,#2a8cf0,#0071e3); }
.lx-row-bar i.warn { background:#f0a330; }
.gy-screen:not(.is-active) .lx-row-bar i { width:0 !important; }
.lx-note { display:flex; align-items:center; gap:8px; margin-top:13px; font-size:11.5px; font-weight:500; color:#6e7686; padding:0 4px; }
.lx-note-dot { width:7px; height:7px; border-radius:50%; background:#f0a330; flex-shrink:0; box-shadow:0 0 0 4px rgba(240,163,48,.15); }

/* screen 2 — glucose */
.lx-live { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:650; color:#e5484d; }
.lx-live i { width:6px; height:6px; border-radius:50%; background:#e5484d; animation:livepulse 1.2s ease infinite; }
.lx-glu { padding:14px 14px 12px; }
.lx-glu-tags { display:flex; gap:8px; margin-bottom:8px; }
.lx-pk, .lx-lo { font-size:10px; font-weight:650; border-radius:999px; padding:3px 9px; }
.lx-pk { color:#d97706; background:rgba(217,119,6,.1); }
.lx-lo { color:#0071e3; background:rgba(0,113,227,.1); }
.lx-graph { position:relative; height:112px; margin-bottom:13px; }
.lx-graph svg { width:100%; height:100%; }
.lx-glu-line { stroke-dasharray:560; stroke-dashoffset:560; }
.gy-screen.is-active .lx-glu-line { animation:lxDraw 1.4s cubic-bezier(.4,0,.2,1) .25s forwards; }
.lx-band { position:absolute; right:5px; top:46%; transform:translateY(-50%); font-size:9px; font-weight:500; color:#9aa3b2; letter-spacing:.03em; }
.lx-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.lx-tiles div { background:#f6f8fc; border:1px solid rgba(13,22,38,.05); border-radius:13px; padding:11px 8px; text-align:center; }
.lx-tiles small { display:block; font-size:9.5px; font-weight:500; color:#9aa3b2; margin-bottom:4px; }
.lx-tiles b { font-family:var(--font); font-size:20px; font-weight:740; letter-spacing:-.04em; color:#0a0c10; }
.lx-tiles b i { font-style:normal; font-size:12px; font-weight:600; color:#9aa3b2; }
.lx-tiles b.lx-good { color:#1aa64b; font-size:17px; }

/* screen 3 — care */
.lx-doc { display:flex; align-items:center; gap:11px; padding:13px 15px; margin-bottom:11px; }
.lx-doc-av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#6ab1f7,#0071e3); flex-shrink:0; box-shadow:0 4px 12px rgba(0,113,227,.3); }
.lx-doc-meta { flex:1; min-width:0; }
.lx-doc-meta b { display:block; font-size:14px; font-weight:680; letter-spacing:-.02em; color:#0a0c10; }
.lx-doc-meta small { font-size:11px; color:#8a93a3; }
.lx-doc-on { display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:#1aa64b; }
.lx-doc-on i { width:7px; height:7px; border-radius:50%; background:#1aa64b; box-shadow:0 0 0 3px rgba(26,166,75,.18); }
.lx-chat { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow:hidden; }
.lx-msg { display:flex; }
.lx-msg.in { justify-content:flex-start; }
.lx-msg.out { justify-content:flex-end; }
.lx-msg p { font-size:12px; line-height:1.45; margin:0; padding:10px 13px; max-width:215px; border-radius:16px; box-shadow:0 2px 8px -3px rgba(16,24,40,.14); }
.lx-msg.in p { background:#fff; color:#15181d; border-bottom-left-radius:5px; border:1px solid rgba(13,22,38,.05); }
.lx-msg.out p { background:var(--blue); color:#fff; border-bottom-right-radius:5px; }
.lx-appt { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid rgba(13,22,38,.06); border-radius:16px; padding:13px 15px; margin-top:auto; box-shadow:0 6px 18px -8px rgba(16,24,40,.2); }
.lx-appt-t { font-family:var(--mono,'Spline Sans Mono',monospace); font-size:14px; font-weight:700; color:var(--blue); }
.lx-appt b { display:block; font-size:13px; font-weight:650; color:#0a0c10; }
.lx-appt small { font-size:10.5px; color:#8a93a3; }
.lx-go { margin-left:auto; color:var(--blue); font-weight:700; font-size:17px; }

@media (max-width: 880px) {
  .gy-stage2 { grid-template-columns: 1fr; gap: 34px; justify-items: center; }
  .gy-rail { max-width: 460px; width: 100%; }
}

/* ── CTA DNA canvas ── */
.ct2-dna-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.28; pointer-events:none; z-index:0; -webkit-mask-image:radial-gradient(80% 90% at 82% 50%, #000 40%, transparent 100%); mask-image:radial-gradient(80% 90% at 82% 50%, #000 40%, transparent 100%); }

/* ════════════════════════════════════════════════
   GAINS — clean light premium theme (FINAL override)
   Dark phone on soft light bg · readable · Apple-like
   ════════════════════════════════════════════════ */
#gains.gy { background: linear-gradient(180deg,#f6f8fc 0%,#eef2f8 100%) !important; padding: clamp(80px,9vw,130px) 0 0 !important; }
#gains .gy-bg-glow { width:760px; height:760px; top:18%; background:radial-gradient(50% 50% at 50% 50%, rgba(0,113,227,.10) 0%, transparent 70%) !important; }
#gains .gy-eyebrow { color:#5b6472 !important; background:rgba(13,22,38,.04) !important; border:1px solid rgba(13,22,38,.07); }
#gains .gy-dot { background:var(--blue) !important; }
#gains .gy-h { color:#15181d !important; }
#gains .gy-h em { color:var(--blue) !important; }
#gains .gy-lead { color:#5b6472 !important; }

/* feature rail — light cards */
#gains .gy-rail .gy-rail-item { border:1px solid rgba(13,22,38,.08); background:#ffffff; box-shadow:0 1px 2px rgba(16,24,40,.04); }
#gains .gy-rail .gy-rail-item:hover { background:#ffffff; border-color:rgba(13,22,38,.16); box-shadow:0 10px 28px rgba(16,24,40,.08); transform:translateX(3px); }
#gains .gy-rail .gy-rail-item.is-active { background:#ffffff; border-color:rgba(0,113,227,.5); box-shadow:0 14px 36px rgba(0,113,227,.14); }
#gains .gy-rail-ic { background:#eef2f8; color:#7a8493; }
#gains .gy-rail-item.is-active .gy-rail-ic { background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(0,113,227,.35); }
#gains .gy-rail-tx b { color:#15181d; }
#gains .gy-rail-tx small { color:#6e7686; }
#gains .gy-rail-stat { color:#c2cad6; }
#gains .gy-rail-stat i { color:#a9b3c2; }
#gains .gy-rail-item.is-active .gy-rail-stat { color:var(--blue); }
#gains .gy-rail-prog i { background:linear-gradient(90deg,var(--blue),#5bbbff) !important; }

/* stats strip — light */
#gains .gy-stats-row { background:transparent !important; border-top:1px solid #e3e8f0 !important; border-bottom:none !important; margin-top:clamp(60px,7vw,96px) !important; }
#gains .gy-stat { background:transparent !important; }
#gains .gy-stat b { color:#15181d !important; }
#gains .gy-stat span { color:#6e7686 !important; }

/* ════ SERVICES MASONRY v2 (nsvc-*) ════ */
#services { background: #e9eaec; }

.svc-head { margin-bottom: 52px; }
.svc-h2 { font-size: clamp(28px,3.5vw,44px); font-weight:700; letter-spacing:-.04em; color:#16261d; margin:10px 0 16px; }
.svc-h2 em { font-style:italic; }
.svc-lead { color:#6e7686; font-size:clamp(15px,1.3vw,17px); max-width:52ch; }
.svc-head .sec-eyebrow { color: #6e7686; border-color: rgba(0,0,0,.12); }

/* grid: two flex columns */
.nsvc-grid {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 0;
}
.nsvc-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
.nsvc-col-left { flex: 2.1; }
.nsvc-col-right { flex: 1; }
.nsvc-col-right .nsvc-b { flex: 1.5; }
.nsvc-col-right .nsvc-d { flex: 1; }

/* base card — clean white */
.nsvc-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 20px;
  padding: 32px;
  overflow: hidden;
  position: relative;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s;
}
.nsvc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(0,0,0,.08);
}

/* headings + body text */
.nsvc-card h3 {
  font-family: var(--font);
  font-size: clamp(20px,2vw,26px);
  font-weight: 700;
  letter-spacing: -.04em;
  color: #16261d;
  line-height: 1.2;
  margin: 0 0 10px;
}
.nsvc-card p {
  font-size: clamp(13px,1.1vw,15px);
  line-height: 1.65;
  color: #6e7686;
  margin: 0;
}
.nsvc-card-text { margin-bottom: 0; }

/* A — Pre & Post: floating circles, no lines */
.nsvc-a { min-height: 280px; display:flex; flex-direction:column; }
.nsvc-float-circles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nsvc-fc {
  position: absolute;
  width: 68px; height: 68px; border-radius: 50%;
  border: 1.5px solid #1a2e1c;
  background: #f0f1f0;
  display: flex; align-items: center; justify-content: center;
  color: #1a2e1c;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.6);
  transition: opacity .6s ease, transform .7s cubic-bezier(.34,1.45,.5,1);
}
.nsvc-fc svg { width: 22px; height: 22px; }
/* hourglass: upper-center-left area */
.nsvc-fc-1 { left: 38%; top: 52%; transition-delay: .3s; }
/* heartbeat: lower-center-right area */
.nsvc-fc-2 { left: 58%; top: 72%; transition-delay: .55s; }
.nsvc-card.rv.on .nsvc-fc { opacity: 1; transform: translate(-50%,-50%) scale(1); }
@keyframes fc-float-1 { 0%,100% { margin-top:0 } 50% { margin-top:-10px } }
@keyframes fc-float-2 { 0%,100% { margin-top:0 } 50% { margin-top:10px } }
.nsvc-card.rv.on .nsvc-fc-1 { animation: fc-float-1 4s ease-in-out 1s infinite; }
.nsvc-card.rv.on .nsvc-fc-2 { animation: fc-float-2 4.5s ease-in-out 1.5s infinite; }

/* B — Technology: hand fills bottom-right */
.nsvc-b { display:flex; flex-direction:column; overflow:hidden; min-height: 360px; }
.nsvc-tech-art {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 220px;
  margin: 0 -32px -32px;
}
.nsvc-hand-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(40px) translateY(10px);
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.nsvc-card.rv.on .nsvc-hand-img {
  transform: translateX(0) translateY(0);
}

/* C — Mental Wellness: centered */
.nsvc-c { min-height:200px; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:44px 40px; }
.nsvc-mental-head { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:16px; }
.nsvc-mental-title { font-family:var(--font); font-size:clamp(30px,3.8vw,46px); font-weight:700; letter-spacing:-.05em; color:#16261d; line-height:1; }
/* avatar: single visible, others hidden until hover */
.nsvc-mental-av-wrap {
  position: relative;
  width: 52px; height: 52px;
  flex-shrink: 0;
}
.nsvc-av-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.nsvc-av-0 { z-index:3; opacity:1; }
.nsvc-av-1 { z-index:2; opacity:0; transition: opacity .2s, transform .4s cubic-bezier(.34,1.56,.5,1); transform: translateX(0); }
.nsvc-av-2 { z-index:1; opacity:0; transition: opacity .2s, transform .4s cubic-bezier(.34,1.56,.5,1) .06s; transform: translateX(0); }
/* on hover: fan out */
.nsvc-c:hover .nsvc-mental-av-wrap { width: 136px; }
.nsvc-c:hover .nsvc-av-0 { transform: translateX(-42px); }
.nsvc-c:hover .nsvc-av-1 { opacity:1; transform: translateX(0px); }
.nsvc-c:hover .nsvc-av-2 { opacity:1; transform: translateX(42px); }
.nsvc-mental-av-wrap { transition: width .4s cubic-bezier(.34,1.56,.5,1); }
.nsvc-av-0 { transition: transform .4s cubic-bezier(.34,1.56,.5,1); }
.nsvc-c p { font-size:clamp(14px,1.2vw,16px); color:#6e7686; max-width:50ch; margin:0 auto; }

/* bottom row wrapper */
.nsvc-bottom-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nsvc-bottom-row .nsvc-card { min-height:260px; }

/* D — Gut: title top, semi-circle arcs at bottom */
.nsvc-d { display:flex; flex-direction:column; justify-content:flex-start; position:relative; overflow:hidden; min-height:280px; }
.nsvc-d h3 { margin-bottom:8px; }
.nsvc-d p { max-width:32ch; }
.nsvc-gut-rings { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:320px; height:160px; overflow:hidden; pointer-events:none; }
.nsvc-ring {
  position:absolute; left:50%; bottom:0;
  border-radius:50%;
  transform:translate(-50%,50%) scale(0.4);
  transform-origin:center bottom;
  transition:transform .8s cubic-bezier(.34,1.3,.5,1);
}
.nsvc-ring-1 { width:320px;height:320px; background:#b8c4bc; transition-delay:.1s; }
.nsvc-ring-2 { width:240px;height:240px; background:#8fa897; transition-delay:.2s; }
.nsvc-ring-3 { width:160px;height:160px; background:#6b8c72; transition-delay:.3s; }
.nsvc-ring-4 { width: 80px;height: 80px; background:#3b5c42; transition-delay:.4s; }
.nsvc-card.rv.on .nsvc-ring { transform:translate(-50%,50%) scale(1); }

/* E — Diagnostics: grey title, trophy centered */
.nsvc-e { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; border-color:rgba(0,0,0,.07); overflow:hidden; }
.nsvc-e h3 { color:#8a9099; font-size:clamp(15px,1.5vw,19px); font-weight:500; letter-spacing:-.01em; }
.nsvc-trophy-art { flex:1; display:flex; align-items:flex-end; justify-content:center; }
.nsvc-trophy-img { width:140px; height:auto; display:block; }

/* F — Social proof: cream */
.nsvc-f { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:#fffbee; border-color:#eee5b0; }
.nsvc-stars { display:flex; gap:4px; }
.nsvc-stat-n { font-family:var(--font); font-size:clamp(44px,5vw,60px); font-weight:700; letter-spacing:-.05em; color:#15181d; line-height:1; }
.nsvc-stat-l { font-size:14px; color:#6e7686; letter-spacing:.02em; }

/* responsive */
@media (max-width:860px) {
  .nsvc-grid { flex-direction:column; }
  .nsvc-col-left, .nsvc-col-right { flex:1 1 auto; width:100%; }
  .nsvc-b { min-height:400px; }
}
@media (max-width:480px) {
  .nsvc-bottom-row { grid-template-columns:1fr; }
}

/* ── Real images in services cards ── */
.nsvc-b.rv.on .nsvc-hand-img {
  opacity: 1;
  transform: translateX(0) translateY(0);
}
.nsvc-b:hover .nsvc-hand-img { transform: translateY(-4px) scale(1.02); }
@keyframes handFloat {
  0%,100% { transform: translateX(0) translateY(0) rotate(0deg); }
  50%     { transform: translateX(-6px) translateY(-8px) rotate(-1.2deg); }
}

/* Mental wellness avatar — single by default, fans into a trio on hover */
.nsvc-mental-av-wrap {
  width: 50px; height: 50px;
  position: relative;
  flex-shrink: 0;
  transition: width .55s cubic-bezier(.34,1.3,.5,1);
}
.nsvc-av-img {
  position: absolute; top: 0; left: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  object-fit: cover; object-position: top;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .45s ease, left .55s cubic-bezier(.34,1.3,.5,1), transform .55s cubic-bezier(.34,1.3,.5,1);
}
.nsvc-av-img.nsvc-av-0 { opacity: 1; z-index:3; }
.nsvc-av-img.nsvc-av-1 { z-index:2; }
.nsvc-av-img.nsvc-av-2 { z-index:1; }
/* on hover: fan out all three */
.nsvc-c:hover .nsvc-mental-av-wrap { width: 118px; }
.nsvc-c:hover .nsvc-av-img { opacity: 1; }
.nsvc-c:hover .nsvc-av-img.nsvc-av-0 { left: 0; }
.nsvc-c:hover .nsvc-av-img.nsvc-av-1 { left: 34px; }
.nsvc-c:hover .nsvc-av-img.nsvc-av-2 { left: 68px; }

/* Trophy image */
.nsvc-trophy-art { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-top: 0; margin: 0 -16px -32px; }
.nsvc-trophy-img {
  width: 260px;
  max-width: 90%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.22));
  opacity: 0;
  transform: translateY(24px) scale(.9);
  transition: transform .7s cubic-bezier(.34,1.3,.5,1) .3s, opacity .6s ease .3s;
}
.nsvc-e.rv.on .nsvc-trophy-img { opacity: 1; transform: translateY(0) scale(1); }
.nsvc-e:hover .nsvc-trophy-img { transform: translateY(-4px) scale(1.05); }

/* ════ SERVICES v3 (asvc-*) — Apple bento ════ */
#services { background: #f5f5f7; }

.svc2-head { margin-bottom: 44px; text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.svc2-head .sec-eyebrow { justify-content: center; }
.svc2-h2 {
  font-size: clamp(32px,4vw,52px);
  font-weight: 700;
  letter-spacing: -.05em;
  color: #1d1d1f;
  line-height: 1.06;
  margin: 14px 0 18px;
}
.svc2-h2 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, #0071e3, #5bbbff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.svc2-lead { color: #6e6e73; font-size: clamp(15px,1.3vw,18px); max-width: 56ch; margin: 0 auto; line-height: 1.6; }
/* scannable service index */
.svc2-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.svc2-pill {
  font-size: 12px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -.01em;
  padding: 7px 14px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.1,.5,1), border-color .25s, color .25s, box-shadow .25s;
}
.svc2-head.rv.on .svc2-pill { opacity: 1; transform: none; }
.svc2-head.rv.on .svc2-pill:nth-child(1) { transition-delay: .25s; }
.svc2-head.rv.on .svc2-pill:nth-child(2) { transition-delay: .31s; }
.svc2-head.rv.on .svc2-pill:nth-child(3) { transition-delay: .37s; }
.svc2-head.rv.on .svc2-pill:nth-child(4) { transition-delay: .43s; }
.svc2-head.rv.on .svc2-pill:nth-child(5) { transition-delay: .49s; }
.svc2-head.rv.on .svc2-pill:nth-child(6) { transition-delay: .55s; }
.svc2-pill:hover {
  color: #0071e3;
  border-color: rgba(0,113,227,.3);
  box-shadow: 0 4px 14px rgba(0,113,227,.12);
}

/* section fits one viewport */
#services.sec { padding: 72px 0; }

/* premium bento reveal — gentle scale + rise */
#services .asvc-card.rv {
  transform: translateY(30px) scale(.975);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1);
}

/* card style variants (Tweakable) */
body.svc-outlined #services .asvc-card:not(.asvc-hero):not(.asvc-tech) {
  box-shadow: none !important;
  border-color: rgba(0,0,0,.14) !important;
}
body.svc-elevated #services .asvc-card:not(.asvc-hero):not(.asvc-tech) {
  box-shadow: 0 16px 44px rgba(0,0,0,.10) !important;
  border-color: rgba(0,0,0,.04) !important;
}
body.svc-flat #services .asvc-card { transition-duration: .85s; }
body.svc-flat #services .asvc-card:hover { transform: none !important; box-shadow: 0 2px 16px rgba(0,0,0,.05) !important; }

/* top grid */
.asvc-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
.asvc-left { display: flex; flex-direction: column; gap: 12px; }
.asvc-right { display: flex; flex-direction: column; gap: 12px; }
.asvc-right .asvc-card { flex: 1; min-height: 170px; }

/* ── Longevity card ── */
.asvc-longevity {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
.asvc-longevity h3 { margin: 0 0 6px; }
.asvc-longevity p { margin: 0; }
.lon2-feats {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lon2-feats li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.1,.5,1);
}
.lon2-feats li svg {
  color: #0071e3;
  flex-shrink: 0;
  padding: 3px;
  background: rgba(0,113,227,.1);
  border-radius: 50%;
  box-sizing: content-box;
}
.asvc-longevity.rv.on .lon2-feats li { opacity: 1; transform: none; }
.asvc-longevity.rv.on .lon2-feats li:nth-child(1) { transition-delay: .1s; }
.asvc-longevity.rv.on .lon2-feats li:nth-child(2) { transition-delay: .18s; }
.asvc-longevity.rv.on .lon2-feats li:nth-child(3) { transition-delay: .26s; }
.lon2 {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lon2-row { display: flex; align-items: center; gap: 10px; }
.lon2-label { width: 64px; flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: #86868b; letter-spacing: -.01em; }
.lon2-bar { flex: 1; height: 8px; background: rgba(0,0,0,.05); border-radius: 99px; position: relative; }
.lon2-fill { height: 100%; border-radius: 99px; width: 0; transition: width 1.3s cubic-bezier(.4,0,.2,1); position: relative; }
.lon2-fill-base { background: rgba(0,0,0,.18); }
.lon2-fill-pro { background: linear-gradient(90deg, #0071e3, #5bbbff); box-shadow: 0 0 12px rgba(0,113,227,.35); }
.asvc-longevity.rv.on .lon2-fill-base { width: 56%; }
.asvc-longevity.rv.on .lon2-fill-pro { width: 92%; transition-delay: .25s; }
.lon2-tip {
  position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid #0071e3;
  opacity: 0; transition: opacity .3s ease 1.4s;
}
.asvc-longevity.rv.on .lon2-tip { opacity: 1; animation: lonPulse 2s ease-in-out 1.6s infinite; }
@keyframes lonPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(0,113,227,.15); }
  50%     { box-shadow: 0 0 0 8px rgba(0,113,227,.04); }
}
.lon2-callout { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.lon2-n { font-size: 30px; font-weight: 800; color: #0071e3; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.lon2-l { font-size: 10px; color: #86868b; line-height: 1.3; }

/* bottom grid */
.asvc-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* base card */
.asvc-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 26px;
  overflow: hidden;
  position: relative;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .4s;
  display: flex;
  flex-direction: column;
  will-change: transform;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 30px -18px rgba(16,24,40,.12);
}
.asvc-card::before {
  content: '';
  position: absolute;
  inset: 0; border-radius: 20px;
  background: radial-gradient(ellipse 80% 60% at var(--mx,50%) var(--my,0%), rgba(0,113,227,.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.asvc-card:hover::before { opacity: 1; }
.asvc-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.08), 0 0 0 1px rgba(0,113,227,.12);
  border-color: rgba(0,113,227,.16);
}

/* ── per-card content hover reactions (no box lift) ── */
@media (prefers-reduced-motion: no-preference) {
  /* Tech — heartbeat quickens on hover */
  .asvc-tech:hover .tech3-ecg-bright { animation-duration: 1.8s; }
  .asvc-tech:hover .tech3-ecg-sweep  { animation-duration: 1.8s; }

  /* Metabolic — calm, confident hover: line glows, tracer glides, band lifts */
  .asvc-meta:hover .meta2-live span { animation-duration: .9s; }
  .asvc-meta:hover .meta2-line { filter: drop-shadow(0 1px 5px rgba(0,113,227,.35)); }
  .asvc-meta:hover .meta2-area { opacity: 1; }
  .asvc-meta:hover .meta2-tracer { opacity: 1; animation: metaTrace 3.4s cubic-bezier(.45,0,.55,1) infinite; }
  .asvc-meta:hover .meta2-band { fill: rgba(0,113,227,.08); stroke-opacity: .42; }
  .asvc-meta:hover .meta2-band-l { fill: rgba(0,113,227,.62); }
}
@keyframes metaFlow { to { stroke-dashoffset: -20; } }
@keyframes metaShimmer { 0%,100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes metaTrace { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }

/* tags */
.asvc-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 30px;
  padding: 4px 12px;
  margin-bottom: 18px;
  align-self: flex-start;
  border: 1px solid transparent;
}
.asvc-tag-green { color: #16261d; background: rgba(22,38,29,.07); border-color: rgba(22,38,29,.12); }
.asvc-tag-blue  { color: #0055b3; background: rgba(0,113,227,.07); border-color: rgba(0,113,227,.14); }

/* card text */
.asvc-card h3 {
  font-size: clamp(17px,1.7vw,22px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #1d1d1f;
  line-height: 1.18;
  margin: 0 0 8px;
}
.asvc-card p {
  font-size: clamp(12px,1vw,13.5px);
  color: #6e6e73;
  line-height: 1.6;
  margin: 0;
}
.asvc-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
  color: #16261d;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -.01em;
  transition: gap .25s, opacity .25s;
}
.asvc-link::after { content: '→'; transition: transform .25s; }
.asvc-link:hover { gap: 9px; }
.asvc-link:hover::after { transform: translateX(4px); }

/* ── HERO card — frosted glass ── */
.asvc-hero {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.95) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px;
  position: relative;
}
.asvc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
/* soft blue aura that intensifies on hover */
.asvc-hero::after {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0,113,227,.16), transparent 68%);
  pointer-events: none; z-index: 0;
  opacity: .55;
  transition: opacity .5s ease, transform .5s ease;
}
.asvc-hero:hover {
  box-shadow: 0 14px 40px rgba(0,0,0,.09), 0 0 0 1px rgba(0,113,227,.16), inset 0 1px 0 rgba(255,255,255,.95) !important;
  border-color: rgba(0,113,227,.22) !important;
}
.asvc-hero:hover::after { opacity: 1; transform: scale(1.1); }
/* number row */
.bm-num-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
  position: relative; z-index: 1;
}
.bm-big-n {
  font-size: 62px;
  font-weight: 800;
  background: linear-gradient(160deg, #1d1d1f 30%, #0071e3 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -.06em;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.bm-big-n sup { font-size: 22px; vertical-align: super; letter-spacing: 0; -webkit-text-fill-color: #0071e3; }
.bm-num-label { display: flex; flex-direction: column; gap: 3px; }
.bm-num-label strong {
  font-size: 14px; font-weight: 700; color: #1d1d1f;
  letter-spacing: -.02em; line-height: 1.2;
}
.bm-num-label span { font-size: 11px; color: #6e6e73; line-height: 1.35; }
/* rule */
.bm-rule {
  height: 1px;
  background: rgba(0,0,0,.07);
  margin: 14px 0;
  position: relative; z-index: 1;
}
/* 3×2 category grid — premium chips */
.bm-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: relative; z-index: 1;
}
.bm-ci {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border-radius: 11px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .38s ease, transform .28s cubic-bezier(.34,1.1,.5,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.asvc-hero.rv.on .bm-ci:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 18%, transparent);
}
.asvc-hero.rv.on .bm-ci { opacity: 1; transform: none; }
.asvc-hero.rv.on .bm-ci:nth-child(1) { transition-delay: .12s; }
.asvc-hero.rv.on .bm-ci:nth-child(2) { transition-delay: .17s; }
.asvc-hero.rv.on .bm-ci:nth-child(3) { transition-delay: .22s; }
.asvc-hero.rv.on .bm-ci:nth-child(4) { transition-delay: .27s; }
.asvc-hero.rv.on .bm-ci:nth-child(5) { transition-delay: .32s; }
.asvc-hero.rv.on .bm-ci:nth-child(6) { transition-delay: .37s; }
.bm-ci i {
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--c);
  flex-shrink: 0;
  display: block;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent);
  transition: box-shadow .28s ease, transform .28s ease;
}
.asvc-hero.rv.on .bm-ci:hover i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); transform: scale(1.12); }
.bm-ci span {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-ci b {
  font-size: 10.5px;
  font-weight: 700;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
/* cta link */
.bm-cta {
  position: relative; z-index: 1;
  font-size: 13px;
  font-weight: 600;
  color: #0071e3;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: pre;
  transition: gap .25s ease;
}
.bm-cta:hover { color: var(--blue-hov); }
.bm-cta:hover { letter-spacing: 0; }

/* dot field — hidden now, sparkline replaces it */
.bm-dot-field { display: none; }
.asvc-hero .asvc-link { color: #60a5fa; }
.asvc-hero .asvc-link:hover { color: #93c5fd; }
.asvc-text { position: relative; z-index: 1; }



.bm-footer { display: none; }

/* ── AI Chat card ── */
.asvc-ai { background: #f5f7fa; border-color: rgba(0,113,227,.1); }
.asvc-ai h3 { color: #1d1d1f; font-size: clamp(16px,1.6vw,20px); }
.asvc-ai p  { color: #6e6e73; font-size: 12.5px; }
.asvc-ai:hover { border-color: rgba(0,113,227,.2); box-shadow: 0 20px 48px rgba(0,113,227,.08); }
.asvc-chat { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.asvc-msg { display: flex; align-items: flex-end; gap: 8px; }
.asvc-msg-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg,#16261d,#4ade80);
  flex-shrink: 0;
}
.asvc-msg-b {
  background: #fff;
  border-radius: 14px;
  padding: 8px 13px;
  font-size: 12px;
  color: #1d1d1f;
  line-height: 1.45;
  max-width: 28ch;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.asvc-msg-out { flex-direction: row-reverse; }
.asvc-msg-out .asvc-msg-b { background: #0071e3; color: #fff; }
.asvc-dot {
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: #aaa; margin: 0 2px;
  animation: asvc-bop .9s ease-in-out infinite;
}
.asvc-dot:nth-child(2) { animation-delay: .15s; }
.asvc-dot:nth-child(3) { animation-delay: .30s; }
@keyframes asvc-bop { 0%,80%,100%{ transform:translateY(0) } 40%{ transform:translateY(-5px) } }

/* on hover — new message slides in */
.asvc-msg-new {
  display: flex; align-items: flex-end; gap: 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease .15s, transform .4s cubic-bezier(.34,1.4,.5,1) .15s;
}
.asvc-ai:hover .asvc-msg-new { opacity: 1; transform: translateY(0); }
.asvc-msg-new .asvc-msg-b { background: #fff; font-size: 12px; color: #1d1d1f; padding: 8px 13px; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.07); }

/* ── Technology card v3 — clean live pulse ── */
.asvc-tech {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.05) !important;
}
.tech3-head { display: flex; flex-direction: column; gap: 6px; }
.tech3-head h3 { color: #1d1d1f; font-size: clamp(16px,1.6vw,20px); font-weight: 700; letter-spacing: -.03em; line-height: 1.18; margin: 4px 0 0; }
.tech3-head p { color: #6e6e73; font-size: 12.5px; line-height: 1.5; margin: 0; }
/* monitor */
.tech3-monitor {
  background: linear-gradient(180deg, rgba(0,113,227,.05), rgba(0,113,227,.01));
  border: 1px solid rgba(0,113,227,.1);
  border-radius: 14px;
  padding: 12px 14px;
}
.tech3-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tech3-live { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: .08em; }
.tech3-live span { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: t3blink 1.2s ease-in-out infinite; }
@keyframes t3blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.tech3-bpm { font-size: 11.5px; color: #6e6e73; font-variant-numeric: tabular-nums; }
.tech3-bpm b { font-size: 15px; font-weight: 800; color: #1d1d1f; letter-spacing: -.03em; }
/* real ECG monitor */
.tech3-wave-wrap {
  height: 48px;
  overflow: hidden;
  position: relative;
  background-image:
    linear-gradient(rgba(0,113,227,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,113,227,.05) 1px, transparent 1px);
  background-size: 24px 12px, 24px 12px;
  border-radius: 6px;
}
.tech3-ecg { position: absolute; inset: 0; width: 100%; height: 48px; }
.tech3-ecg-bright {
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 3px rgba(0,113,227,.6));
}
.asvc-tech.rv.on .tech3-ecg-bright { animation: ecgDraw 3.4s linear infinite; }
@keyframes ecgDraw {
  0%   { stroke-dashoffset: 1000; }
  92%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
/* glowing refresh sweep bar (real-monitor head) */
.tech3-ecg-sweep {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 14px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,113,227,.18) 60%, rgba(91,187,255,.5));
  border-right: 1.5px solid rgba(91,187,255,.9);
  box-shadow: 0 0 10px 1px rgba(0,113,227,.4);
  opacity: 0;
}
.asvc-tech.rv.on .tech3-ecg-sweep { animation: ecgSweep 3.4s linear infinite; }
@keyframes ecgSweep {
  0%   { left: 0%;   opacity: 1; }
  92%  { left: 100%; opacity: 1; }
  93%  { opacity: 0; }
  100% { left: 100%; opacity: 0; }
}
/* metrics */
.tech3-metrics { display: flex; gap: 8px; }
.tech3-chip {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 6px;
  background: rgba(0,0,0,.025);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 12px;
  transition: background .25s, transform .25s, border-color .25s;
}
.tech3-chip:hover { background: rgba(0,113,227,.05); border-color: rgba(0,113,227,.15); transform: translateY(-2px); }
.tech3-chip-dot { width: 6px; height: 6px; border-radius: 50%; margin-bottom: 2px; }
.tech3-chip-n { font-size: 16px; font-weight: 800; color: #1d1d1f; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tech3-chip-n i { font-style: normal; font-size: 8px; font-weight: 500; color: #86868b; margin-left: 1px; }
.tech3-chip-l { font-size: 9px; color: #86868b; text-transform: uppercase; letter-spacing: .06em; }
/* ── Wearables card v5 — activity-ring dial ── */
.wrx { margin-top: 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wrx-dial { position: relative; width: 128px; height: 128px; flex: none; }
.wrx-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wrx-tracks circle { fill: none; stroke: #eceef1; stroke-width: 7; }
.wrx-arc { fill: none; stroke-width: 7; stroke-linecap: round; }
.wrx-arc.a1 { stroke: #0071e3; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; }
.wrx-arc.a2 { stroke: #16a34a; stroke-dasharray: 251.33; stroke-dashoffset: 251.33; }
.wrx-arc.a3 { stroke: #7c3aed; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; }
.asvc-tech.rv.on .wrx-arc { transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1); }
.asvc-tech.rv.on .wrx-arc.a1 { stroke-dashoffset: 75; transition-delay: .1s; }
.asvc-tech.rv.on .wrx-arc.a2 { stroke-dashoffset: 45; transition-delay: .22s; }
.asvc-tech.rv.on .wrx-arc.a3 { stroke-dashoffset: 15; transition-delay: .34s; }
.wrx-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wrx-center b { font-size: 30px; font-weight: 700; letter-spacing: -.04em; color: #1d1d1f; line-height: 1; font-variant-numeric: tabular-nums; }
.wrx-center span { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 9px; font-weight: 600; letter-spacing: .12em; color: #86868b; margin-top: 3px; }
.wrx-side { flex: 1; min-width: 152px; display: flex; flex-direction: column; }
.wrx-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wrx-legend li { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13.5px; color: #1d1d1f; }
.wrx-legend li:last-child { border-bottom: 0; }
.wrx-d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wrx-d.d1 { background: #0071e3; } .wrx-d.d2 { background: #16a34a; } .wrx-d.d3 { background: #7c3aed; }
.wrx-k { color: #6e6e73; }
.wrx-legend b { margin-left: auto; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #1d1d1f; }
.wrx-legend b i { font-style: normal; font-size: 10px; font-weight: 500; color: #86868b; margin-left: 2px; }
.wrx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(0,0,0,.06); }
.wrx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #16a34a; }
.wrx-live i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: twxPulse 1.6s ease-out infinite; }
@keyframes twxPulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)} 70%{box-shadow:0 0 0 6px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }
.wrx-sync { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 9.5px; letter-spacing: .04em; color: #9aa0a6; }

/* ── Metabolic card v3 — minimal ── */
.asvc-meta {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-color: rgba(0,113,227,.12) !important;
  background: #fff !important;
}
.meta-top { display: flex; flex-direction: column; gap: 8px; }
.meta-top h3 { margin: 0; }
.meta-top p  { margin: 0; font-size: 12.5px; color: #6e6e73; line-height: 1.55; }

/* clean glucose curve */
.meta2-chart { margin-top: auto; position: relative; }
.meta2-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* target range band */
.meta2-band {
  fill: rgba(0,113,227,.05);
  stroke: rgba(0,113,227,.14);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  transition: fill .45s ease, stroke-opacity .45s ease;
}
.meta2-band-l {
  font-family: var(--mono, 'Spline Sans Mono', monospace);
  font-size: 7px; font-weight: 600; letter-spacing: .12em;
  fill: rgba(0,113,227,.42);
  transition: fill .45s ease;
}
.meta2-grid line { stroke: rgba(0,0,0,.05); stroke-width: 1; }

/* in-range chip */
.meta2-chip {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 600; color: #0071e3;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,113,227,.16);
  border-radius: 999px; padding: 3px 8px 3px 6px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px) scale(.96);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.meta2-chip i {
  width: 6px; height: 6px; border-radius: 50%; background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: live-ping 1.8s ease infinite;
}
.asvc-meta:hover .meta2-chip { opacity: 1; transform: translateY(0) scale(1); }

.meta2-area {
  fill: url(#meta-grad);
  opacity: 0;
  transition: opacity 1.1s ease .4s;
}
.meta2-line {
  stroke: url(#meta-line-grad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  transition: stroke-dashoffset 1.9s cubic-bezier(.4,0,.2,1) .2s;
}
.asvc-meta.rv.on .meta2-line { stroke-dashoffset: 0; }
.asvc-meta.rv.on .meta2-area { opacity: 1; }
.meta2-tracer {
  fill: #0071e3;
  opacity: 0;
  offset-path: path("M0,36 C22,20 38,52 60,44 C84,34 100,64 126,54 C150,46 166,60 192,56 C224,55 260,56 292,56 L320,56");
  offset-distance: 100%;
  filter: drop-shadow(0 0 5px rgba(0,113,227,.7));
  transition: opacity .3s ease;
}

/* foot — hero stat + live */
.meta2-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.meta2-hero { display: flex; align-items: baseline; gap: 8px; }
.meta-stat-n {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.06em;
  color: #1d1d1f;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.meta2-pct { font-size: 20px; font-weight: 700; color: #0071e3; letter-spacing: -.03em; margin-left: -2px; }
.meta2-hero-l { font-size: 10.5px; color: #86868b; line-height: 1.3; font-weight: 500; align-self: center; margin-left: 2px; }
.meta2-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #16a34a;
  white-space: nowrap;
  padding-bottom: 4px;
}
.meta2-live span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22,163,74,.5);
  animation: live-ping 1.8s ease infinite;
}
@keyframes live-ping {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ── Mental Wellness card ── */
.asvc-mental { min-height: 0; display: flex; flex-direction: column; }
.asvc-mental-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  flex: 1;
  align-content: flex-start;
}
.asvc-mental-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  color: #374151;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  padding: 4px 11px;
}
.asvc-av-wrap { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.asvc-avs { display: flex; }
.asvc-av {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2.5px solid #fff;
  object-fit: cover;
  margin-left: -14px;
  transition: margin-left .4s cubic-bezier(.34,1.56,.5,1);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.asvc-av:first-child { margin-left: 0; }
.asvc-mental:hover .asvc-av { margin-left: 8px; }
.asvc-mental:hover .asvc-av:first-child { margin-left: 0; }
.asvc-av-wrap { margin-top: auto; }
.asvc-av-lbl { font-size: 12.5px; color: #6e6e73; font-weight: 500; }

/* ── Gut Health card — diversity equalizer ── */
.asvc-gut { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.asvc-gut > p { margin-bottom: 12px; }
.gut2-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 550; color: #b0b3ba; margin-top: 2px; transition: color .3s ease; }
.gut2-hint svg { transition: transform .4s ease; }
.asvc-gut:hover .gut2-hint { color: #1aa64b; }
.asvc-gut:hover .gut2-hint svg { transform: rotate(260deg); }
.gut2 { margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  background: #f6f8fc; border: 1px solid rgba(13,22,38,.055); border-radius: 14px;
  padding: 12px 14px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: background .35s ease, border-color .35s ease; }
.asvc-gut:hover .gut2 { background: #f5faf6; border-color: rgba(26,166,75,.14); }
.gut2-head { display: flex; align-items: center; justify-content: space-between; }
.gut2-label { font-size: 10px; font-weight: 650; color: #86868b; letter-spacing: .06em; text-transform: uppercase; }
.gut2-grade { font-size: 9.5px; font-weight: 700; color: #0071e3; background: rgba(0,113,227,.08); padding: 3px 9px; border-radius: 20px; }
.gut2-segs { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 46px; padding-bottom: 1px; }
.gut2-segs::before { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, rgba(229,72,77,.25), rgba(240,163,48,.25), rgba(26,166,75,.3)); }
.gut2-segs::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(13,22,38,.035) 0 1px, transparent 1px 15px); pointer-events: none; }
.gut2-seg {
  flex: 1;
  height: var(--h0, 24%);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb,#e5484d 42%,#fff), color-mix(in srgb,#e5484d 85%,#6e6e73));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(13,22,38,.06);
  transform-origin: bottom;
  transform: scaleY(0);
  transition:
    transform .65s cubic-bezier(.22,1,.36,1),
    height .5s cubic-bezier(.34,1.1,.64,1),
    background .4s ease,
    box-shadow .4s ease;
}
/* hover restores each bar to its Week-12 height + red→green health gradient */
.asvc-gut:hover .gut2-seg { height: var(--h, 50%); }
.asvc-gut:hover .gut2-seg:nth-child(1)  { background: linear-gradient(180deg, color-mix(in srgb,#e5484d 55%,#fff), #e5484d); }
.asvc-gut:hover .gut2-seg:nth-child(2)  { background: linear-gradient(180deg, color-mix(in srgb,#ea5a45 55%,#fff), #ea5a45); }
.asvc-gut:hover .gut2-seg:nth-child(3)  { background: linear-gradient(180deg, color-mix(in srgb,#ef6d3c 55%,#fff), #ef6d3c); }
.asvc-gut:hover .gut2-seg:nth-child(4)  { background: linear-gradient(180deg, color-mix(in srgb,#f0883e 55%,#fff), #f0883e); }
.asvc-gut:hover .gut2-seg:nth-child(5)  { background: linear-gradient(180deg, color-mix(in srgb,#f0a330 55%,#fff), #f0a330); }
.asvc-gut:hover .gut2-seg:nth-child(6)  { background: linear-gradient(180deg, color-mix(in srgb,#eab53a 55%,#fff), #eab53a); }
.asvc-gut:hover .gut2-seg:nth-child(7)  { background: linear-gradient(180deg, color-mix(in srgb,#dcc23e 55%,#fff), #dcc23e); }
.asvc-gut:hover .gut2-seg:nth-child(8)  { background: linear-gradient(180deg, color-mix(in srgb,#c3c742 55%,#fff), #c3c742); }
.asvc-gut:hover .gut2-seg:nth-child(9)  { background: linear-gradient(180deg, color-mix(in srgb,#a3c64b 55%,#fff), #a3c64b); }
.asvc-gut:hover .gut2-seg:nth-child(10) { background: linear-gradient(180deg, color-mix(in srgb,#84c157 55%,#fff), #84c157); }
.asvc-gut:hover .gut2-seg:nth-child(11) { background: linear-gradient(180deg, color-mix(in srgb,#6abd63 55%,#fff), #6abd63); }
.asvc-gut:hover .gut2-seg:nth-child(12) { background: linear-gradient(180deg, color-mix(in srgb,#54b86a 55%,#fff), #54b86a); }
.asvc-gut:hover .gut2-seg:nth-child(13) { background: linear-gradient(180deg, color-mix(in srgb,#3bb05f 55%,#fff), #3bb05f); }
.asvc-gut:hover .gut2-seg:nth-child(14) { background: linear-gradient(180deg, color-mix(in srgb,#1aa64b 55%,#fff), #1aa64b); }
/* ── hover plays the 12-week restoration forward, left → right ── */
.asvc-gut:hover .gut2-seg:nth-child(1)  { transition-delay: .00s; }
.asvc-gut:hover .gut2-seg:nth-child(2)  { transition-delay: .025s; }
.asvc-gut:hover .gut2-seg:nth-child(3)  { transition-delay: .05s; }
.asvc-gut:hover .gut2-seg:nth-child(4)  { transition-delay: .075s; }
.asvc-gut:hover .gut2-seg:nth-child(5)  { transition-delay: .10s; }
.asvc-gut:hover .gut2-seg:nth-child(6)  { transition-delay: .125s; }
.asvc-gut:hover .gut2-seg:nth-child(7)  { transition-delay: .175s; }
/* grade chip crossfade: Week 0 · Depleted (rest) ⇄ Restored (hover) */
.gut2-grade { position: relative; color: #e5484d; background: rgba(229,72,77,.09); transition: background .3s, color .3s; }
.gut2-grade b { font-weight: 650; transition: opacity .3s ease; }
.gut2-grade .g-now { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; color: #0071e3; white-space: nowrap; }
.asvc-gut:hover .gut2-grade { color: transparent; background: rgba(0,113,227,.09); }
.asvc-gut:hover .gut2-grade .g-then { opacity: 0; }
.asvc-gut:hover .gut2-grade .g-now { opacity: 1; }
/* score crossfade: 4.1 (rest) ⇄ 8.4 (hover) */
.gut2-n { position: relative; display: inline-block; }
.gut2-n b { font-weight: inherit; transition: opacity .35s ease; }
.gut2-n .gn-now { position: absolute; inset: 0; opacity: 0; }
.gut2-n .gn-then { color: #e5484d; opacity: 1; }
.asvc-gut:hover .gut2-n .gn-now { opacity: 1; }
.asvc-gut:hover .gut2-n .gn-then { opacity: 0; }
/* delta chip lights up as the restored state resolves */
.gut2-delta { opacity: .3; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; }
.asvc-gut:hover .gut2-delta { opacity: 1; filter: none; }
.asvc-gut:hover .gut2-seg:nth-child(1)  { transition-delay: .00s; }
.asvc-gut:hover .gut2-seg:nth-child(2)  { transition-delay: .03s; }
.asvc-gut:hover .gut2-seg:nth-child(3)  { transition-delay: .06s; }
.asvc-gut:hover .gut2-seg:nth-child(4)  { transition-delay: .09s; }
.asvc-gut:hover .gut2-seg:nth-child(5)  { transition-delay: .12s; }
.asvc-gut:hover .gut2-seg:nth-child(6)  { transition-delay: .15s; }
.asvc-gut:hover .gut2-seg:nth-child(7)  { transition-delay: .18s; }
.asvc-gut:hover .gut2-seg:nth-child(8)  { transition-delay: .21s; }
.asvc-gut:hover .gut2-seg:nth-child(9)  { transition-delay: .24s; }
.asvc-gut:hover .gut2-seg:nth-child(10) { transition-delay: .27s; }
.asvc-gut:hover .gut2-seg:nth-child(11) { transition-delay: .30s; }
.asvc-gut:hover .gut2-seg:nth-child(12) { transition-delay: .33s; }
.asvc-gut:hover .gut2-seg:nth-child(13) { transition-delay: .36s; }
.asvc-gut:hover .gut2-seg:nth-child(14) { transition-delay: .39s; }
/* ── scroll reveal: bars grow from baseline, left-to-right stagger ── */
.asvc-gut.rv.on .gut2-seg { transform: scaleY(1); }
.asvc-gut.rv.on .gut2-seg:nth-child(1)  { transition-delay: .05s; }
.asvc-gut.rv.on .gut2-seg:nth-child(2)  { transition-delay: .09s; }
.asvc-gut.rv.on .gut2-seg:nth-child(3)  { transition-delay: .13s; }
.asvc-gut.rv.on .gut2-seg:nth-child(4)  { transition-delay: .17s; }
.asvc-gut.rv.on .gut2-seg:nth-child(5)  { transition-delay: .21s; }
.asvc-gut.rv.on .gut2-seg:nth-child(6)  { transition-delay: .25s; }
.asvc-gut.rv.on .gut2-seg:nth-child(7)  { transition-delay: .29s; }
.asvc-gut.rv.on .gut2-seg:nth-child(8)  { transition-delay: .33s; }
.asvc-gut.rv.on .gut2-seg:nth-child(9)  { transition-delay: .37s; }
.asvc-gut.rv.on .gut2-seg:nth-child(10) { transition-delay: .41s; }
.asvc-gut.rv.on .gut2-seg:nth-child(11) { transition-delay: .45s; }
.asvc-gut.rv.on .gut2-seg:nth-child(12) { transition-delay: .49s; }
.asvc-gut.rv.on .gut2-seg:nth-child(13) { transition-delay: .53s; }
.asvc-gut.rv.on .gut2-seg:nth-child(14) { transition-delay: .57s; }
/* idle state: static, no wave — clean */









.asvc-gut.rv.on .gut2-seg:nth-child(10) { animation-delay: 1.90s; }
.asvc-gut.rv.on .gut2-seg:nth-child(11) { animation-delay: 2.00s; }
.asvc-gut.rv.on .gut2-seg:nth-child(12) { animation-delay: 2.10s; }
.asvc-gut.rv.on .gut2-seg:nth-child(13) { animation-delay: 2.20s; }
.asvc-gut.rv.on .gut2-seg:nth-child(14) { animation-delay: 2.30s; }
@media (prefers-reduced-motion: reduce) { .asvc-gut.rv.on .gut2-seg, .asvc-gut:hover .gut2-seg { transition: none; } }
.gut2-axis { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(13,22,38,.05); }
.gx-tick { display: flex; flex-direction: column; gap: 1px; font-size: 9.5px; font-weight: 650; letter-spacing: .02em; color: #86868b; text-transform: uppercase; }
.gx-tick i { font-style: normal; font-size: 9px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #b0b3ba; }
.gx-tick.gx-mid { align-items: center; text-align: center; }
.gx-tick.gx-end { align-items: flex-end; text-align: right; }
.gx-tick.gx-end { color: #1aa64b; }
.gx-tick.gx-end i { color: rgba(26,166,75,.6); }
.gut2-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.gut2-n { font-size: 25px; font-weight: 780; color: #1d1d1f; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.gut2-l { font-size: 9.5px; color: #86868b; line-height: 1.3; }
.gut2-delta { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: -.02em; color: #1aa64b; background: rgba(26,166,75,.1); border-radius: 999px; padding: 5px 10px; transition: background .4s, color .4s; }

/* responsive */
@media (max-width:960px) {
  .asvc-top { grid-template-columns: 1fr; }
  .asvc-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px) {
  .asvc-bottom { grid-template-columns: 1fr; }
  .asvc-card { padding: 24px; }
}

/* ════ SERVICES BENTO v3 (reference-inspired premium grid) ════ */
/* ════ SERVICES BENTO v3 — clean Apple 6-card grid ════ */
.svc3-sec { background: #f5f5f7; }
.svc3-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 18px;
}
.svc3-grid > * { min-height: 0; }
.svc3-grid .asvc-card { border-radius: 24px; padding: 28px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 34px -18px rgba(16,24,40,.14); transition: box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .4s, transform .45s cubic-bezier(.16,1,.3,1); }
.svc3-grid .asvc-svx:hover, .svc3-grid .asvc-card.asvc-longevity:hover {
  box-shadow: 0 26px 60px -28px rgba(8,32,58,.28), 0 0 0 1px rgba(var(--ac,0,113,227),.24);
  border-color: rgba(var(--ac,0,113,227),.3);
}
.svc3-hero { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1); box-shadow: 0 20px 54px -26px rgba(8,32,58,.5); }
.svc3-hero:hover { transform: translateY(-6px); box-shadow: 0 38px 82px -30px rgba(8,32,58,.62); }
/* brighter pointer-tracked sheen on the premium bento */
.svc3-grid .asvc-card::before { background: radial-gradient(ellipse 70% 55% at var(--mx,50%) var(--my,50%), rgba(var(--ac,0,113,227),.10) 0%, transparent 68%); }
.svc3-hero::after { background: radial-gradient(circle 300px at var(--mx,80%) var(--my,30%), rgba(108,182,255,.2), transparent 70%) !important; }

/* hero — dark navy foundation */
.svc3-hero {
  grid-area: hero; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0b2a4a 0%, #0a2540 56%, #08203a 100%);
  border-radius: 24px; color: #fff; padding: 38px 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  min-height: 620px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: box-shadow .5s, transform .5s cubic-bezier(.16,1,.3,1);
}
.svc3-hero:hover { box-shadow: 0 22px 56px rgba(8,32,58,.32); transform: none; }

/* no card ever lifts — flat, modern interaction only */
#services .svc3-grid .asvc-card:hover, #services .svc3-hero:hover { transform: none !important; }

/* staggered scroll-reveal cascade for the bento */
#services .svc3-grid .asvc-card.rv { transform: translateY(34px) scale(.985); opacity: 0; transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change: transform, opacity; }
#services .svc3-grid .asvc-card.rv.on { transform: none; opacity: 1; }
#services .svc3-grid .asvc-card.rv:nth-of-type(1).on { transition-delay: 0s; }
#services .svc3-grid .asvc-card.rv:nth-of-type(2).on { transition-delay: .09s; }
#services .svc3-grid .asvc-card.rv:nth-of-type(3).on { transition-delay: .16s; }
#services .svc3-grid .asvc-card.rv:nth-of-type(4).on { transition-delay: .23s; }
#services .svc3-grid .asvc-card.rv:nth-of-type(5).on { transition-delay: .30s; }
#services .svc3-grid .asvc-card.rv:nth-of-type(6).on { transition-delay: .37s; }
@media (prefers-reduced-motion: reduce) {
  #services .svc3-grid .asvc-card.rv { transform: none; opacity: 1; transition: none; }
}

/* Foundation hero — inner scroll-reveal stagger */
.svc3-hero .svc3-tag, .svc3-hero .svc3-num-row, .svc3-hero .svc3-chips span, .svc3-hero .svc3-hero-foot {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.svc3-hero.on .svc3-tag { opacity: 1; transform: none; transition-delay: .06s; }
.svc3-hero.on .svc3-num-row { opacity: 1; transform: none; transition-delay: .14s; }
.svc3-hero.on .svc3-chips span { opacity: 1; transform: none; }
.svc3-hero.on .svc3-chips span:nth-child(1) { transition-delay: .26s; }
.svc3-hero.on .svc3-chips span:nth-child(2) { transition-delay: .31s; }
.svc3-hero.on .svc3-chips span:nth-child(3) { transition-delay: .36s; }
.svc3-hero.on .svc3-chips span:nth-child(4) { transition-delay: .41s; }
.svc3-hero.on .svc3-chips span:nth-child(5) { transition-delay: .46s; }
.svc3-hero.on .svc3-chips span:nth-child(6) { transition-delay: .51s; }
.svc3-hero.on .svc3-hero-foot { opacity: 1; transform: none; transition-delay: .58s; }

/* hero hover — chips energize + scanning sweep */
.svc3-hero { overflow: hidden; }
.svc3-hero .svc3-chips span { transition: background .35s, border-color .35s, transform .35s cubic-bezier(.22,1,.36,1), opacity .6s, color .35s; }
.svc3-hero:hover .svc3-chips span { transform: translateY(-2px); }
.svc3-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(108,182,255,.16), transparent);
  opacity: 0; pointer-events: none; z-index: 1;
}
.svc3-hero:hover::before { animation: svc3Scan 2.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes svc3Scan { 0% { top: -45%; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { top: 105%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .svc3-hero .svc3-tag, .svc3-hero .svc3-num-row, .svc3-hero .svc3-chips span, .svc3-hero .svc3-hero-foot { opacity: 1; transform: none; transition: none; }
  .svc3-hero:hover::before { animation: none; }
}
.svc3-hero { --gx: 80%; --gy: 0%; }
.svc3-hero::after { content: ''; position: absolute; inset: 0; border-radius: 24px; background: radial-gradient(circle 280px at var(--gx) var(--gy), rgba(108,182,255,.18), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 0; }
.svc3-hero:hover::after { opacity: 1; }
.svc3-hero-glow { position: absolute; top: -40%; right: -8%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(0,113,227,.42), transparent 66%); pointer-events: none; transition: opacity .5s, transform .6s var(--ease); }
.svc3-hero-motif { position: absolute; top: -26px; right: -26px; width: 300px; height: 300px; color: rgba(108,182,255,.16); stroke-width: 1; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(circle at 80% 12%, #000, transparent 74%); mask-image: radial-gradient(circle at 80% 12%, #000, transparent 74%); }
.svc3-hero-top { position: relative; z-index: 1; }
.svc3-hero-lede { font-family: var(--font); font-size: clamp(23px,2.3vw,30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.13; color: #fff; margin: 16px 0 0; max-width: 17ch; text-wrap: balance; }
.svc3-hero-lede em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; color: #9cc6f6; }
.svc3-hero-sub { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 13px 0 0; max-width: 32ch; }
.svc3-hero-mid { position: relative; z-index: 1; }
.svc3-hero-l { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.svc3-hero-l .svc3-hero-lede { margin-top: 18px; max-width: 15ch; font-size: clamp(26px,2.5vw,37px); }
.svc3-hero-l .svc3-hero-sub { margin-top: 14px; max-width: 36ch; }
.svc3-hero-people { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.svc3-hero-r { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding-left: 44px; border-left: 1px solid rgba(255,255,255,.12); }
.svc3-hero-r .svc3-num-row { align-items: flex-start; }
.svc3-hero-r .svc3-chips { margin-top: 0; }
.svc3-hero-r .svc3-hero-cta { margin-left: 0; align-self: flex-start; }
.svc3-hero-flow { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.svc3-hero-flow .hf-step { position: relative; }
.svc3-hero-flow .hf-step + .hf-step::before { content: ""; position: absolute; left: -8px; top: 7px; width: 1px; height: 30px; background: rgba(255,255,255,.1); }
.svc3-hero-flow .hf-n { font-family: var(--mono, 'Spline Sans Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #6fb6ff; }
.svc3-hero-flow b { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-top: 7px; letter-spacing: -.01em; }
.svc3-hero-flow .hf-step > span:last-child { display: block; font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 3px; }
.svc3-hero:hover .svc3-hero-glow { opacity: .8; transform: scale(1.1); }
.svc3-tag { position: relative; z-index: 1; align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9cc6f6; background: rgba(108,182,255,.12); border: 1px solid rgba(108,182,255,.22); padding: 7px 13px; border-radius: 980px; }
.svc3-hero-body { position: relative; z-index: 1; }
.svc3-num-row { display: flex; align-items: flex-start; gap: 20px; }
.svc3-bign { font-family: var(--font); font-size: clamp(58px,7vw,88px); font-weight: 800; letter-spacing: -.05em; line-height: .9; background: linear-gradient(180deg,#fff,#9cc6f6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.svc3-bign sup { font-size: .4em; -webkit-text-fill-color: #6fb6ff; }
.svc3-num-label { padding-top: 10px; }
.svc3-num-label strong { display: block; font-family: var(--font); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.svc3-num-label span { display: block; font-size: 14px; color: rgba(255,255,255,.66); margin-top: 6px; max-width: 32ch; line-height: 1.5; }
.svc3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc3-chips span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 980px; padding: 7px 14px; transition: background .3s, transform .3s, border-color .3s; }
.svc3-hero:hover .svc3-chips span { background: rgba(108,182,255,.14); border-color: rgba(108,182,255,.3); }
.svc3-hero-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.svc3-hero-foot .dbx-avs { display: flex; }
.svc3-hero-foot .dbx-av { border-color: #0a2540; }
.svc3-hero-note { font-size: 13px; color: rgba(255,255,255,.6); }
.svc3-hero-note b { color: #fff; font-weight: 600; }
.svc3-hero-cta { margin-left: auto; text-decoration: none; font-size: 13.5px; font-weight: 600; color: #0a2540; background: #fff; border-radius: 980px; padding: 12px 22px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .3s var(--ease), box-shadow .3s, background .3s; }
.svc3-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,113,227,.32); background: #eaf3ff; }

/* consistent service-card content rhythm */
.svc3-grid .asvc-card h3 { font-family: var(--font); font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.18; color: #1d1d1f; margin: 14px 0 8px; }
.svc3-grid .asvc-svx h3 { font-size: 22px; letter-spacing: -.03em; line-height: 1.14; margin: 11px 0 0; }
.svc3-grid .asvc-svx > p { font-size: 14.5px; line-height: 1.55; color: #6e6e73; margin: 11px 0 0; max-width: 34ch; }
.svc3-grid .asvc-meta { grid-area: meta; min-height: 340px; }
.svc3-grid .asvc-gut  { grid-area: gut; }
.svc3-grid .asvc-mental { grid-area: mind; }
.svc3-grid .asvc-tech { grid-area: tech; }
.svc3-grid .asvc-gut, .svc3-grid .asvc-mental, .svc3-grid .asvc-tech { min-height: 320px; }

/* longevity — premium wide healthspan finisher */
.svc3-long { grid-area: long; }
.svc3-long.asvc-longevity {
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; align-items: center;
  min-height: 0; padding: 38px 44px; background: #fff !important;
}
.lon3-left { display: flex; flex-direction: column; align-items: flex-start; }
.lon3-left h3 { margin: 16px 0 10px; }
.lon3-left > p { font-size: 14px; line-height: 1.55; color: #6e6e73; margin: 0; max-width: 34ch; }
.lon3-feats { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lon3-feats li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: #1d1d1f; letter-spacing: -.01em; opacity: 0; transform: translateX(-6px); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.1,.5,1); }
.lon3-feats li svg { color: #0071e3; flex-shrink: 0; padding: 3px; background: rgba(0,113,227,.1); border-radius: 50%; box-sizing: content-box; }
.svc3-long.rv.on .lon3-feats li { opacity: 1; transform: none; }
.svc3-long.rv.on .lon3-feats li:nth-child(1) { transition-delay: .12s; }
.svc3-long.rv.on .lon3-feats li:nth-child(2) { transition-delay: .2s; }
.svc3-long.rv.on .lon3-feats li:nth-child(3) { transition-delay: .28s; }
.lon3-cta { margin-top: 22px; font-size: 13.5px; font-weight: 600; color: #0071e3; display: inline-flex; align-items: center; transition: gap .3s, color .3s; }
.lon3-cta:hover { color: #0a5fc4; letter-spacing: .01em; }

/* right: healthspan timeline + stats */
.lon3-right { display: flex; flex-direction: column; gap: 26px; }
.lon3-time { display: flex; flex-direction: column; gap: 13px; padding: 24px 26px 22px; background: #f5f7fa; border: 1px solid rgba(0,0,0,.05); border-radius: 18px; }
.lon3-time-eyebrow { font-family: var(--mono, 'Spline Sans Mono', monospace); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #86868b; margin-bottom: 3px; }
.lon3-row { display: flex; align-items: center; gap: 16px; }
.lon3-rl { width: 90px; flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: #86868b; letter-spacing: -.01em; }
.lon3-rl-pro { color: #0071e3; }
.lon3-track { position: relative; flex: 1; height: 14px; background: rgba(0,0,0,.05); border-radius: 99px; }
.lon3-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 99px; transition: width 1.4s cubic-bezier(.4,0,.2,1); }
.lon3-fill-base { background: rgba(10,37,64,.22); }
.lon3-fill-pro { background: linear-gradient(90deg, #0071e3, #5bbbff); box-shadow: 0 0 16px rgba(0,113,227,.4); }
.svc3-long.rv.on .lon3-fill-base { width: 100%; }
.svc3-long.rv.on .lon3-fill-pro { width: 82%; transition-delay: .25s; }
.lon3-note { font-size: 11.5px; line-height: 1.45; color: #86868b; margin: 6px 0 0; padding-left: 106px; }
.lon3-cap { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; opacity: 0; transition: opacity .4s ease 1.1s; }
.lon3-cap-base { left: 58%; margin-left: -26px; color: #6e6e73; }
.lon3-cap-pro { left: 92%; margin-left: -26px; }
.svc3-long.rv.on .lon3-cap { opacity: 1; }
.lon3-axis { display: flex; justify-content: space-between; padding-left: 106px; margin-top: 2px; }
.lon3-axis span { font-size: 10px; font-weight: 600; color: #c0c0c5; letter-spacing: .02em; }
.lon3-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lon3-stat { padding: 16px 18px; background: #f5f7fa; border: 1px solid rgba(0,0,0,.05); border-radius: 16px; transition: transform .4s var(--ease), border-color .4s, background .4s; }
.svc3-long:hover .lon3-stat { background: #fff; border-color: rgba(0,113,227,.14); }
.lon3-stat b { display: block; font-family: var(--font); font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.lon3-stat b.lon3-pos { color: #0071e3; }
.lon3-stat b i { font-size: 13px; font-weight: 600; font-style: normal; letter-spacing: 0; margin-left: 1px; }
.lon3-stat span { display: block; font-size: 11.5px; line-height: 1.4; color: #86868b; margin-top: 7px; }
@media (max-width: 980px) {
  .svc3-long.asvc-longevity { grid-template-columns: 1fr; gap: 26px; padding: 30px; }
}
@media (max-width: 560px) {
  .lon3-stats { grid-template-columns: 1fr; }
  .lon3-rl { width: 74px; }
  .lon3-note { padding-left: 90px; }
}

/* responsive */
@media (max-width: 1000px) {
  .svc3-grid {
    grid-template-rows: auto;
  }
  .svc3-hero { min-height: auto; }
}
@media (max-width: 600px) {
  .svc3-grid {
    grid-template-rows: auto;
  }
  .svc3-hero { padding: 28px 24px; }
  .svc3-grid .asvc-card { padding: 24px; min-height: 0; }
}

/* ════ DASHBOARD BENTO ════ */
.dbx-sec { background: #fff; }
.dbx-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.dbx-h2 { font-family: var(--font); font-size: clamp(30px,4vw,50px); font-weight: 700; letter-spacing: -.045em; line-height: 1.06; color: #1d1d1f; margin: 14px 0 0; }
.dbx-h2 em { font-style: normal; background: linear-gradient(120deg, #0071e3, #4c9bf0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dbx-lead { font-size: clamp(15px,1.5vw,17.5px); line-height: 1.55; color: #6e6e73; margin: 16px auto 0; max-width: 58ch; }

.dbx-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 16px;
  grid-template-areas:
    "ritual ritual ritual ritual ritual ritual ritual img1   img1   img1   img1   img1"
    "move   move   move   chart  chart  chart  chart  chart  rec    rec    rec    rec"
    "move   move   move   chart  chart  chart  chart  chart  nut    nut    nut    nut"
    "score  score  score  score  score  next   next   next   next   img2   img2   img2";
}
.dbx-card { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 22px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.04); transition: box-shadow .4s var(--ease), border-color .4s var(--ease); }
.dbx-card:hover { box-shadow: 0 12px 34px rgba(0,0,0,.08); border-color: rgba(0,113,227,.16); }

/* reveal */
.dbx-grid > * { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.dbx-grid.on > * { opacity: 1; transform: none; }
.dbx-grid.on > *:nth-child(1) { transition-delay: .04s; }
.dbx-grid.on > *:nth-child(2) { transition-delay: .10s; }
.dbx-grid.on > *:nth-child(3) { transition-delay: .16s; }
.dbx-grid.on > *:nth-child(4) { transition-delay: .12s; }
.dbx-grid.on > *:nth-child(5) { transition-delay: .20s; }
.dbx-grid.on > *:nth-child(6) { transition-delay: .26s; }
.dbx-grid.on > *:nth-child(7) { transition-delay: .22s; }
.dbx-grid.on > *:nth-child(8) { transition-delay: .30s; }
.dbx-grid.on > *:nth-child(9) { transition-delay: .34s; }
@media (prefers-reduced-motion: reduce) { .dbx-grid > * { opacity: 1; transform: none; } }

/* ── Daily ritual (dark) ── */
.dbx-ritual { background: linear-gradient(155deg, #0b2a4a 0%, #0a2540 60%, #08203a 100%); border: none; color: #fff; padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 184px; }
.dbx-ritual::after { content: ''; position: absolute; top: -50%; right: -10%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(0,113,227,.4), transparent 68%); pointer-events: none; }
.dbx-ritual-top { position: relative; z-index: 1; }
.dbx-ritual h3 { font-family: var(--font); font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.dbx-ritual-top p { font-size: 13.5px; color: rgba(255,255,255,.72); margin: 7px 0 0; }
.dbx-ritual-foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dbx-ritual-note { font-size: 13px; color: rgba(255,255,255,.62); margin: 0; max-width: 18ch; line-height: 1.45; }
.dbx-ritual-note b { color: #fff; font-weight: 600; }
.dbx-avs { display: flex; align-items: center; }
.dbx-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2.5px solid #0a2540; margin-left: -12px; background: #1b3a5c; }
.dbx-av:first-child { margin-left: 0; }
.dbx-av-more { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #0a2540; background: #6fb6ff; }
.dbx-ritual:hover .dbx-av { margin-left: -7px; }
.dbx-ritual:hover .dbx-av:first-child { margin-left: 0; }
.dbx-av { transition: margin-left .35s var(--ease); }

/* ── image cards ── */
.dbx-img1, .dbx-move, .dbx-img2 { min-height: 184px; background: #eef3f8; }
.dbx-img1 image-slot, .dbx-move image-slot, .dbx-img2 image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dbx-img-word { position: absolute; left: 24px; bottom: 20px; z-index: 2; font-family: var(--font); font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.4); pointer-events: none; }
.dbx-move { min-height: 100%; }
.dbx-move-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; background: linear-gradient(180deg, rgba(8,24,42,.18) 0%, rgba(8,24,42,.04) 30%, rgba(8,24,42,.55) 100%); pointer-events: none; }
.dbx-move-txt h3 { font-family: var(--font); font-size: 24px; font-weight: 600; letter-spacing: -.025em; color: #fff; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.dbx-move-txt p { font-size: 13px; color: rgba(255,255,255,.85); margin: 6px 0 0; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.dbx-move-btn { pointer-events: auto; align-self: flex-start; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: #0a2540; background: #fff; border: none; border-radius: 980px; padding: 11px 22px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .3s var(--ease), box-shadow .3s; }
.dbx-move-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.24); }

/* ── chart card ── */
.dbx-chart { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.dbx-chart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dbx-chart h3 { font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: #1d1d1f; margin: 0; }
.dbx-chart-dates { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: #a1a1a6; text-transform: uppercase; }
.dbx-chart-avg { text-align: right; }
.dbx-chart-avg b { display: block; font-family: var(--font); font-size: 24px; font-weight: 700; letter-spacing: -.04em; color: #0071e3; line-height: 1; }
.dbx-chart-avg b small { font-size: 13px; font-weight: 600; }
.dbx-chart-avg span { font-size: 10.5px; color: #a1a1a6; }
.dbx-seg { display: inline-flex; background: #f1f3f6; border-radius: 12px; padding: 3px; gap: 2px; align-self: flex-start; }
.dbx-seg-b { font-family: var(--font); font-size: 12px; font-weight: 600; color: #86868b; background: transparent; border: none; border-radius: 9px; padding: 7px 18px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.dbx-seg-b.is-on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.dbx-bars { display: flex; align-items: flex-end; gap: 9px; height: 116px; margin-top: auto; }
.dbx-bar { flex: 1; height: 100%; border-radius: 6px 6px 4px 4px; background: linear-gradient(180deg, #4c9bf0, #0071e3); transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.dbx-bar { --h: .5; }
.dbx-grid.on .dbx-bar { transform: scaleY(var(--h)); }
.dbx-grid.on .dbx-bar:nth-child(1) { transition-delay: .3s; }
.dbx-grid.on .dbx-bar:nth-child(2) { transition-delay: .36s; }
.dbx-grid.on .dbx-bar:nth-child(3) { transition-delay: .42s; }
.dbx-grid.on .dbx-bar:nth-child(4) { transition-delay: .48s; }
.dbx-grid.on .dbx-bar:nth-child(5) { transition-delay: .54s; }
.dbx-grid.on .dbx-bar:nth-child(6) { transition-delay: .6s; }
.dbx-grid.on .dbx-bar:nth-child(7) { transition-delay: .66s; }
.dbx-chart:hover .dbx-bar:nth-child(4) { background: linear-gradient(180deg, #6fb6ff, #0a5fc4); }
.dbx-bars-x { display: flex; gap: 9px; }
.dbx-bars-x span { flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; color: #c0c0c5; }

/* ── stat cards ── */
.dbx-stat { padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 84px; }
.dbx-rec { background: #fff; }
.dbx-nut { background: linear-gradient(155deg, #eaf3fe, #dcebfd 120%); background: linear-gradient(155deg, #eef5fe, #e0edfc); border-color: rgba(0,113,227,.14); }
.dbx-stat-top { display: flex; align-items: center; justify-content: space-between; }
.dbx-stat-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #0071e3, #4c9bf0); box-shadow: 0 4px 12px rgba(0,113,227,.28); }
.dbx-nut .dbx-stat-ic { background: linear-gradient(150deg, #0a2540, #1b4d7e); }
.dbx-stat-menu { width: 18px; height: 12px; position: relative; flex: none; }
.dbx-stat-menu::before, .dbx-stat-menu::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: #c7c7cc; }
.dbx-stat-menu::before { top: 3px; } .dbx-stat-menu::after { top: 8px; }
.dbx-stat-label { font-size: 13px; font-weight: 500; color: #6e6e73; }
.dbx-stat-val { display: block; font-family: var(--font); font-size: 23px; font-weight: 700; letter-spacing: -.03em; color: #1d1d1f; margin-top: 2px; }
.dbx-stat-val small { font-size: 12px; font-weight: 500; color: #86868b; letter-spacing: 0; }

/* ── health score gauge ── */
.dbx-score { padding: 22px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 200px; }
.dbx-gauge { position: relative; width: 220px; height: 110px; display: flex; align-items: flex-end; justify-content: center; }
.dbx-gbar { position: absolute; bottom: 0; left: 50%; width: 5px; height: 46px; border-radius: 3px; background: #e3e7ec; transform-origin: bottom center; transform: rotate(calc((var(--i) - 8.5) * 10deg)) translateY(-64px) scaleY(0); transition: transform .6s cubic-bezier(.34,1.2,.5,1), background .4s; }
.dbx-grid.on .dbx-gbar { transform: rotate(calc((var(--i) - 8.5) * 10deg)) translateY(-64px) scaleY(1); }
.dbx-gbar[style*="--i:0"], .dbx-gbar[style*="--i:1"], .dbx-gbar[style*="--i:2"], .dbx-gbar[style*="--i:3"], .dbx-gbar[style*="--i:4"], .dbx-gbar[style*="--i:5"], .dbx-gbar[style*="--i:6"], .dbx-gbar[style*="--i:7"], .dbx-gbar[style*="--i:8"], .dbx-gbar[style*="--i:9"], .dbx-gbar[style*="--i:10"], .dbx-gbar[style*="--i:11"], .dbx-gbar[style*="--i:12"], .dbx-gbar[style*="--i:13"] { background: linear-gradient(#4c9bf0, #0071e3); }
.dbx-grid.on .dbx-gbar:nth-child(1) { transition-delay: .3s; }
.dbx-grid.on .dbx-gbar:nth-child(2) { transition-delay: .33s; }
.dbx-grid.on .dbx-gbar:nth-child(3) { transition-delay: .36s; }
.dbx-grid.on .dbx-gbar:nth-child(4) { transition-delay: .39s; }
.dbx-grid.on .dbx-gbar:nth-child(5) { transition-delay: .42s; }
.dbx-grid.on .dbx-gbar:nth-child(6) { transition-delay: .45s; }
.dbx-grid.on .dbx-gbar:nth-child(7) { transition-delay: .48s; }
.dbx-grid.on .dbx-gbar:nth-child(8) { transition-delay: .51s; }
.dbx-grid.on .dbx-gbar:nth-child(9) { transition-delay: .54s; }
.dbx-grid.on .dbx-gbar:nth-child(10) { transition-delay: .57s; }
.dbx-grid.on .dbx-gbar:nth-child(11) { transition-delay: .6s; }
.dbx-grid.on .dbx-gbar:nth-child(12) { transition-delay: .63s; }
.dbx-grid.on .dbx-gbar:nth-child(13) { transition-delay: .66s; }
.dbx-grid.on .dbx-gbar:nth-child(14) { transition-delay: .69s; }
.dbx-score-c { display: flex; flex-direction: column; align-items: center; margin-top: -36px; }
.dbx-score-n { font-family: var(--font); font-size: 40px; font-weight: 800; letter-spacing: -.05em; background: linear-gradient(150deg, #1d1d1f, #0071e3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; }
.dbx-score-l { font-size: 12px; font-weight: 500; color: #86868b; margin-top: 4px; }
.dbx-score-leg { display: flex; gap: 18px; margin-top: 10px; }
.dbx-score-leg span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #86868b; }
.dbx-score-leg i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.dbx-score-leg .lg-trk { background: #0071e3; }
.dbx-score-leg .lg-tgt { background: #e3e7ec; }

/* ── schedule stack ── */
.dbx-card-stack { display: flex; flex-direction: column; gap: 12px; }
.dbx-time { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.dbx-time-on { background: linear-gradient(155deg, #eef5fe, #dcebfd); border-color: rgba(0,113,227,.16); }
.dbx-time-n { font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: #1d1d1f; font-variant-numeric: tabular-nums; }
.dbx-time-n small { font-size: 12px; font-weight: 500; color: #86868b; letter-spacing: 0; margin-left: 4px; }
.dbx-time-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #0071e3; background: rgba(0,113,227,.09); flex: none; }
.dbx-next { display: flex; align-items: center; gap: 13px; padding: 13px 16px; }
.dbx-next-th { width: 46px; height: 46px; border-radius: 13px; flex: none; background: linear-gradient(150deg, #cfe3fb, #9cc6f6); }
.dbx-next-txt { flex: 1; min-width: 0; }
.dbx-next-txt small { display: block; font-size: 11px; color: #a1a1a6; }
.dbx-next-txt b { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #1d1d1f; }
.dbx-next-play { width: 40px; height: 40px; border-radius: 50%; flex: none; border: none; cursor: pointer; color: #fff; background: linear-gradient(150deg, #0071e3, #4c9bf0); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,113,227,.34); transition: transform .3s var(--ease); }
.dbx-next-play:hover { transform: scale(1.08); }

/* ── responsive ── */
@media (max-width: 940px) {
  .dbx-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "ritual ritual ritual ritual ritual ritual"
      "img1   img1   img1   move   move   move"
      "chart  chart  chart  chart  chart  chart"
      "rec    rec    rec    nut    nut    nut"
      "score  score  score  score  score  score"
      "next   next   next   img2   img2   img2";
  }
  .dbx-img1, .dbx-move, .dbx-img2 { min-height: 200px; }
}
@media (max-width: 560px) {
  .dbx-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ritual" "img1" "move" "chart" "rec" "nut" "score" "next" "img2";
  }
  .dbx-img1, .dbx-move, .dbx-img2 { min-height: 180px; }
}

/* ════ JOURNAL / BLOG ════ */
.jr-sec { padding: 96px 0; }
.jr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.jr-all {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
  padding: 11px 18px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--white); transition: transform .3s var(--ease,cubic-bezier(.16,1,.3,1)), box-shadow .3s, border-color .3s;
}
.jr-all svg { width: 17px; height: 17px; transition: transform .3s var(--ease,cubic-bezier(.16,1,.3,1)); }
.jr-all:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); border-color: rgba(0,113,227,.4); }
.jr-all:hover svg { transform: translateX(3px); }

/* ══ Premium image bento ══ */
/* ══ Interactive split gallery — cinematic preview + index list ══ */
.je {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: stretch;
}

/* preview panel */
.je-preview {
  position: relative; overflow: hidden; border-radius: 26px; text-decoration: none;
  min-height: 540px; background: #0a1524; display: block;
  box-shadow: 0 40px 80px -50px rgba(6,20,42,.55);
}
.je-layer {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
}
.je-layer.is-active { opacity: 1; transform: scale(1); }
.je-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,16,32,.28) 0%, rgba(6,16,32,0) 32%, rgba(6,16,32,.24) 56%, rgba(4,12,26,.9) 100%);
}
.je-preview-top {
  position: absolute; top: 22px; left: 22px; right: 22px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
}
.je-chip {
  font-family: var(--mono, 'Spline Sans Mono', monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #fff;
  background: rgba(16,26,44,.34); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
}
.je-count { font-family: var(--mono, 'Spline Sans Mono', monospace); font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.62); }
.je-count b { color: #fff; font-weight: 600; }
.je-preview-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 36px 36px; }
.je-pdate { display: block; font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.je-ptitle {
  font-size: clamp(26px, 2.7vw, 40px); font-weight: 700; letter-spacing: -.038em; line-height: 1.04;
  color: #fff; margin: 0; max-width: 20ch; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.je-plink {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  font-size: 14.5px; font-weight: 600; color: #fff;
}
.je-plink svg { width: 17px; height: 17px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.je-preview:hover .je-plink svg { transform: translateX(5px); }
/* animate text swap */
.je-pdate, .je-ptitle { transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.je.is-swapping .je-pdate, .je.is-swapping .je-ptitle { opacity: 0; transform: translateY(10px); }

/* index list */
.je-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.je-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 22px 18px; text-decoration: none; border-radius: 16px;
  border-bottom: 1px solid rgba(12,28,58,.09);
  transition: background .4s cubic-bezier(.16,1,.3,1), padding .4s cubic-bezier(.16,1,.3,1);
}
.je-list li:last-child .je-row { border-bottom: 0; }
.je-idx {
  font-family: var(--mono, 'Spline Sans Mono', monospace); font-size: 12px; font-weight: 600;
  color: var(--ink3, #8a94a6); letter-spacing: .04em; transition: color .35s;
}
.je-rmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.je-rtitle {
  font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; letter-spacing: -.022em; line-height: 1.24;
  color: var(--ink, #0a1524); transition: color .35s; text-wrap: pretty;
}
.je-rmeta { font-size: 12.5px; color: var(--ink3, #8a94a6); font-variant-numeric: tabular-nums; }
.je-rarrow {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(12,28,58,.12); color: var(--ink2, #5a667a);
  opacity: 0; transform: translateX(-6px) scale(.9);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), background .35s, color .35s, border-color .35s;
}
.je-rarrow svg { width: 16px; height: 16px; }
/* active/hover row */
.je-row.is-active {
  background: linear-gradient(90deg, rgba(29,99,255,.08), rgba(29,99,255,.02));
  padding-left: 26px; padding-right: 12px;
}
.je-row.is-active::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: var(--blue, #1d63ff);
}
.je-row.is-active .je-idx { color: var(--blue, #1d63ff); }
.je-row.is-active .je-rtitle { color: var(--ink, #0a1524); }
.je-row.is-active .je-rarrow {
  opacity: 1; transform: translateX(0) scale(1);
  background: var(--blue, #1d63ff); color: #fff; border-color: var(--blue, #1d63ff);
}

@media (max-width: 940px) {
  .je { grid-template-columns: 1fr; gap: 20px; }
  .je-preview { min-height: 380px; }
  .je-row { padding: 18px 14px; }
  .je-rarrow { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .je-preview { min-height: 300px; }
  .je-preview-body { padding: 26px 24px 26px; }
  .je-idx { display: none; }
  .je-row { grid-template-columns: 1fr auto; }
}

/* ══ (legacy) Apple magazine grid ══ */
.jr-mag { display: grid; grid-template-columns: 1.08fr 1fr; gap: 26px; align-items: stretch; }

/* ══ (legacy) Apple magazine grid ══ */
.jr-mag { display: grid; grid-template-columns: 1.08fr 1fr; gap: 26px; align-items: stretch; }

/* featured card */
.jm-hero {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: #fff; border: 1px solid var(--hairline); border-radius: 26px;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s;
}
.jm-hero:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -32px rgba(8,32,58,.34); border-color: rgba(0,113,227,.24); }
.jm-hero-media { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: #eef2f6; }
.jm-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.jm-hero:hover .jm-hero-media img { transform: scale(1.055); }
.jm-hero-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.jm-hero-title { font-size: clamp(23px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); margin: 0; text-wrap: balance; transition: color .3s; }
.jm-hero:hover .jm-hero-title { color: var(--blue); }
.jm-hero-ex { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; max-width: 46ch; }
.jm-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 22px; }
.jm-meta { font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jm-arrow {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--gray-bg); color: var(--ink); font-size: 16px;
  transition: background .35s, color .35s, transform .35s cubic-bezier(.16,1,.3,1);
}
.jm-hero:hover .jm-arrow { background: var(--blue); color: #fff; transform: translateX(3px); }

/* category chips */
.jm-cat {
  font-family: var(--mono, 'Spline Sans Mono', monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.jm-cat.glass {
  position: absolute; top: 16px; left: 16px; z-index: 2; color: #fff;
  background: rgba(20,30,48,.42); backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
}
.jm-cat.sm { font-size: 9.5px; letter-spacing: .09em; color: var(--ink-3); }

/* list of story rows */
.jm-list { display: flex; flex-direction: column; gap: 12px; }
.jm-item {
  display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 16px;
  text-decoration: none; padding: 12px; border-radius: 18px;
  background: #fff; border: 1px solid var(--hairline); flex: 1;
  transition: background .35s, border-color .35s, transform .4s cubic-bezier(.16,1,.3,1);
}
.jm-item:hover { background: #fbfcfe; border-color: rgba(0,113,227,.22); transform: translateX(2px); }
.jm-thumb { aspect-ratio: 1/1; width: 104px; border-radius: 12px; overflow: hidden; background: #eef2f6; }
.jm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.jm-item:hover .jm-thumb img { transform: scale(1.07); }
.jm-item-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.jm-item-title { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.22; color: var(--ink); margin: 2px 0; text-wrap: pretty; transition: color .3s; }
.jm-item:hover .jm-item-title { color: var(--blue); }
.jm-arrow.sm { width: 30px; height: 30px; font-size: 13px; background: transparent; color: var(--ink-3); }
.jm-item:hover .jm-arrow.sm { background: var(--gray-bg); color: var(--blue); transform: translateX(2px); }

@media (max-width: 940px) {
  .jr-mag { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .jm-item { grid-template-columns: 84px 1fr; }
  .jm-item .jm-arrow.sm { display: none; }
  .jm-thumb { width: 84px; }
}

/* ══ Editorial overlay grid (legacy — articles index) ══ */
.jr-ed {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 232px;
  gap: 18px;
}
/* featured — 3 cols wide, 2 rows tall */
.jr-ov-feat { grid-column: span 3; grid-row: span 2; }
/* the four secondary cards fill the remaining 3-col strip, 2 per row */
.jr-ed > .jr-ov:not(.jr-ov-feat) { grid-column: span 3; }
.jr-ed > .jr-ov:nth-child(4),
.jr-ed > .jr-ov:nth-child(5) { grid-column: span 3; }

.jr-ov {
  position: relative; overflow: hidden; text-decoration: none;
  border-radius: var(--r-lg); display: block;
  background-image: var(--jr-img); background-size: cover; background-position: center;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.jr-ov::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--jr-img); background-size: cover; background-position: center;
  transform: scale(1.001); transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.jr-ov:hover::before { transform: scale(1.07); }
.jr-ov-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,20,38,.10) 0%, rgba(8,20,38,0) 32%, rgba(8,20,38,.42) 62%, rgba(6,16,32,.86) 100%);
  transition: background .45s;
}
.jr-ov:hover .jr-ov-scrim { background: linear-gradient(180deg, rgba(8,20,38,.22) 0%, rgba(8,20,38,.10) 30%, rgba(8,20,38,.55) 60%, rgba(4,12,26,.92) 100%); }
.jr-ov-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px;
}
.jr-ov-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jr-ov-bot { display: flex; flex-direction: column; align-items: flex-start; }
.jr-ov .jr-date { color: rgba(255,255,255,.72); font-size: 11.5px; margin-bottom: 6px; }
.jr-ov-title {
  color: #fff; font-weight: 600; letter-spacing: -.02em; line-height: 1.16;
  font-size: 17px; margin: 0; text-wrap: balance;
  text-shadow: 0 1px 20px rgba(0,0,0,.35);
}
.jr-ov-feat .jr-ov-title { font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.03em; line-height: 1.05; }
.jr-ov-ex {
  color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.55;
  margin: 12px 0 0; max-width: 42ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s, margin .5s;
}
.jr-ov-feat:hover .jr-ov-ex { max-height: 120px; opacity: 1; }
.jr-ov-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  color: #fff; font-size: 13.5px; font-weight: 600;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s cubic-bezier(.16,1,.3,1);
}
.jr-ov-link i { font-style: normal; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.jr-ov:hover .jr-ov-link { opacity: 1; transform: translateY(0); }
.jr-ov:hover .jr-ov-link i { transform: translateX(4px); }
.jr-read {
  font-family: var(--mono, 'Spline Sans Mono', monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

/* category tag */
.jr-cat {
  display: inline-flex; align-items: center;
  font-family: var(--mono, 'Spline Sans Mono', monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.jr-cat-metabolic { color: #0071e3; background: rgba(0,113,227,.09); }
.jr-cat-lifestyle { color: #7a5af0; background: rgba(122,90,240,.10); }
.jr-cat-gut       { color: #0a8a5f; background: rgba(10,138,95,.10); }

.jr-date { font-size: 12px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .jr-ed { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; gap: 14px; }
  .jr-ov-feat { grid-column: span 2; grid-row: span 1; }
  .jr-ed > .jr-ov:not(.jr-ov-feat) { grid-column: span 1; }
  .jr-ov-feat:hover .jr-ov-ex { max-height: 0; opacity: 0; }
}
@media (max-width: 560px) {
  .jr-sec { padding: 72px 0; }
  .jr-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .jr-ed { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .jr-ov-feat, .jr-ed > .jr-ov:not(.jr-ov-feat) { grid-column: span 1; }
}


/* ════ THE REALITY v2 — pinned scrollytelling ════ */
.rly2 { padding: clamp(10px,1.4vw,20px); background: var(--white,#fff); }
.rly2-panel { position: relative; overflow: clip; border-radius: clamp(24px,3vw,40px); background: #06090f; color: #fff; padding: clamp(88px,10vw,136px) 0 clamp(72px,8vw,104px); }
.rly2-atmos { position: absolute; inset: 0; pointer-events: none; }
.rly2-glow { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 1100px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,113,227,.24), rgba(0,113,227,.06) 52%, transparent 76%); filter: blur(8px); animation: rlyBreathe 12s ease-in-out infinite; }
.rly2-grid { position: absolute; inset: 0; opacity: .5; -webkit-mask-image: radial-gradient(120% 90% at 50% 26%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 26%, #000 30%, transparent 75%);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 58px 58px; }
.rly2-inner { position: relative; z-index: 2; }
.rly2-head { text-align: center; max-width: 940px; margin: 0 auto clamp(30px,4vw,54px); }

/* scrolly layout */
.rly2-scrolly { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px,6vw,96px); max-width: 1120px; margin: 0 auto; align-items: start; }
.rly2-pincol { position: sticky; top: clamp(72px,12vh,130px); }
.rly2-stage { position: relative; min-height: clamp(420px,56vh,540px); border-radius: 28px; background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rly2-vis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: clamp(28px,3.5vw,44px); text-align: center;
  opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .65s var(--ease), transform .65s var(--ease); pointer-events: none; }
.rly2-stage[data-state="0"] .rly2-vis[data-vis="0"], .rly2-stage[data-state="1"] .rly2-vis[data-vis="1"],
.rly2-stage[data-state="2"] .rly2-vis[data-vis="2"], .rly2-stage[data-state="3"] .rly2-vis[data-vis="3"] { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.rly2-readout { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rly2-big { font-family: var(--font); font-size: clamp(64px,7vw,104px); font-weight: 600; letter-spacing: -.05em; line-height: .9; display: flex; align-items: baseline; gap: 12px; white-space: nowrap;
  background: linear-gradient(120deg, #6ab1f7, #2a8cf0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rly2-big small { font-size: clamp(18px,2vw,24px); font-weight: 500; letter-spacing: -.02em; background: none; -webkit-text-fill-color: rgba(255,255,255,.5); white-space: nowrap; }
.rly2-big-teal { background: linear-gradient(120deg, #7fd9bf, #34b88a); -webkit-background-clip: text; background-clip: text; }
.rly2-cap { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.6); max-width: 34ch; }

/* figs */
.rly2-figs { display: flex; gap: clamp(10px,1.4vw,18px); justify-content: center; }
.rly2-fig { width: clamp(42px,4.6vw,62px); opacity: 0; transform: translateY(18px) scale(.84); }
.rly2-fig svg { width: 100%; height: auto; display: block; }
.rly2-vis.go .rly2-fig { animation: rlyPop .55s cubic-bezier(.34,1.5,.5,1) forwards; animation-delay: calc(var(--i) * .09s); }
.rly2-fig.risk { color: #2a8cf0; } .rly2-fig.risk svg { filter: drop-shadow(0 6px 20px rgba(42,140,240,.55)); }
.rly2-fig.safe { color: rgba(255,255,255,.18); }
.rly2-fig.well { color: #4ecfa5; } .rly2-fig.well svg { filter: drop-shadow(0 6px 20px rgba(78,207,165,.45)); }

/* ring — Apple Activity style */
.rly2-ringwrap { position: relative; width: clamp(196px,21vw,250px); aspect-ratio: 1; display: grid; place-items: center; }
.rly2-ring-halo { position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10,132,255,.30), rgba(10,132,255,.06) 60%, transparent 78%);
  opacity: 0; transform: scale(.65); transition: opacity 1s var(--ease) .4s, transform 1.2s var(--ease) .4s; }
.rly2-vis.go .rly2-ring-halo { opacity: 1; transform: scale(1); }
.rly2-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); display: block; overflow: visible; }
.rly2-ring circle { fill: none; stroke-width: 15; stroke-linecap: round; }
.rly2-ring-bg { stroke: rgba(255,255,255,.07); }
.rly2-ring-fg { stroke: url(#rly2grad); stroke-dasharray: 603; stroke-dashoffset: 603;
  filter: drop-shadow(0 4px 18px rgba(10,132,255,.5)); transition: stroke-dashoffset 1.6s cubic-bezier(.32,.72,.29,1) .25s; }
.rly2-vis.go .rly2-ring-fg { stroke-dashoffset: 157; } /* 74% of 603 */
.rly2-ring-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rly2-ring-num { display: flex; align-items: baseline; gap: 3px; font-family: var(--font); font-weight: 600; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(54px,5.8vw,76px); color: #fff; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease) .55s, transform .7s var(--ease) .55s; }
.rly2-vis.go .rly2-ring-num { opacity: 1; transform: none; }
.rly2-ring-num small { font-size: clamp(21px,2vw,27px); font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: -.02em; }
.rly2-ring-lbl { font-size: 11.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.4);
  opacity: 0; transition: opacity .7s var(--ease) .85s; }
.rly2-vis.go .rly2-ring-lbl { opacity: 1; }

/* source tag */
.rly2-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 10px; border-radius: 999px; margin-top: 2px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-family: var(--mono,'Spline Sans Mono',monospace);
  font-size: 11px; font-weight: 500; letter-spacing: .05em; color: rgba(255,255,255,.55); white-space: nowrap; }
.rly2-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #0a84ff; box-shadow: 0 0 8px rgba(10,132,255,.85); }

/* decade chart — Apple Health style biomarker trend */
.rly2-chart { position: relative; width: 100%; max-width: 400px; }
.rly2-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.rly2-chart-thresh { stroke: rgba(255,255,255,.22); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.rly2-chart-area { opacity: 0; transition: opacity 1s var(--ease) .5s; }
.rly2-vis.go .rly2-chart-area { opacity: 1; }
.rly2-chart-line { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 14px rgba(90,169,232,.4));
  stroke-dasharray: 460; stroke-dashoffset: 460; transition: stroke-dashoffset 1.7s cubic-bezier(.32,.72,.29,1) .2s; }
.rly2-vis.go .rly2-chart-line { stroke-dashoffset: 0; }
.rly2-chart-dot { fill: #e0785a; stroke: #06090f; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0);
  transition: opacity .5s var(--ease) 1.7s, transform .6s cubic-bezier(.34,1.5,.5,1) 1.7s; }
.rly2-vis.go .rly2-chart-dot { opacity: 1; transform: scale(1); animation: rly2DotPulse 2.4s ease-in-out 2.3s infinite; }
@keyframes rly2DotPulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(224,120,90,0)); } 50% { filter: drop-shadow(0 0 12px rgba(224,120,90,.85)); } }
.rly2-chart-thresh-lbl { position: absolute; top: 22.5%; left: 2px; transform: translateY(-100%); font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.4);
  opacity: 0; transition: opacity .6s var(--ease) .7s; }
.rly2-vis.go .rly2-chart-thresh-lbl { opacity: 1; }
.rly2-chart-diag { position: absolute; top: 4%; right: 4px; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #f0a08a; white-space: nowrap;
  opacity: 0; transition: opacity .6s var(--ease) 2s; }
.rly2-vis.go .rly2-chart-diag { opacity: 1; }
.rly2-chart-axis { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* steps */
.rly2-steps { display: flex; flex-direction: column; }
.rly2-step { min-height: clamp(320px,55vh,500px); display: flex; flex-direction: column; justify-content: center; gap: 16px;
  opacity: .45; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rly2-step.on { opacity: 1; transform: none; }
.rly2-step-n { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8fc4f9; }
.rly2-step h3 { font-family: var(--font); font-size: clamp(24px,2.6vw,34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; margin: 0; text-wrap: balance; }
.rly2-step p { margin: 0; font-size: 15.5px; line-height: 1.66; color: rgba(255,255,255,.58); max-width: 46ch; }
.rly2-step-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 15px; font-weight: 600; color: #6ab1f7; text-decoration: none; transition: gap .35s var(--ease), color .3s; }
.rly2-step-cta svg { width: 17px; height: 17px; }
.rly2-step-cta:hover { color: #8fc4f9; gap: 14px; }

@media (max-width: 900px) {
  .rly2-scrolly { grid-template-columns: 1fr; gap: 0; }
  .rly2-pincol { top: 66px; z-index: 3; }
  .rly2-stage { min-height: 340px; }
  .rly2-vis { gap: 22px; }
  .rly2-step { min-height: 58vh; padding-top: 40px; }
  .rly2-step:first-child { padding-top: 56px; }
}

/* page scroll progress */
.pg-progress { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 2000; pointer-events: none; }
.pg-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0071e3, #6ab1f7); border-radius: 0 3px 3px 0; }

/* ════ LYXAA METHOD — product-panel visuals (v2) ════ */
.lmx-visual { align-self: stretch; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #f6f8fb, #eef1f6); border: 1px solid rgba(0,0,0,.05); border-radius: 24px; padding: clamp(20px,2.4vw,36px); grid-template-rows: none; }
.mvp { width: 100%; max-width: 430px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 18px; box-shadow: 0 22px 50px -28px rgba(16,24,40,.34); overflow: hidden; }
.mvp-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid rgba(0,0,0,.06); }
.mvp-t { font-size: 13px; font-weight: 600; color: #1d1d1f; letter-spacing: -.01em; }
.mvp-meta { font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; color: #a1a6ad; }
.mvp-body { padding: 20px 18px; }
.mvp-score { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mvp-score-lbl { font-size: 12.5px; font-weight: 500; color: #86868b; }
.mvp-score-v { font-size: 44px; font-weight: 600; letter-spacing: -.04em; color: #1d1d1f; line-height: 1; margin-top: 7px; font-variant-numeric: tabular-nums; }
.mvp-score-v i { font-style: normal; font-size: 16px; color: #b0b4bb; margin-left: 3px; }
.mvp-badge { flex: none; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.mvp-badge.good { color: #1a8f53; background: #e6f7ee; }
.mvp-meter { height: 6px; border-radius: 6px; background: #eef0f3; margin: 18px 0 2px; overflow: hidden; }
.mvp-meter span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #0071e3, #4aa3ff); }
.mvp-rows { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(0,0,0,.06); display: flex; flex-direction: column; }
.mvp-rows li { display: flex; align-items: center; gap: 11px; padding: 11px 0; font-size: 14px; color: #1d1d1f; border-bottom: 1px solid rgba(0,0,0,.045); }
.mvp-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.mvp-rows li b { margin-left: auto; font-size: 12.5px; font-weight: 600; }
.mvp-rows .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mvp-rows .dot.ok { background: #34c759; } .mvp-rows .dot.warn { background: #ff9f0a; } .mvp-rows .dot.bad { background: #ff453a; }
.mvp-rows b.c-ok { color: #1a8f53; } .mvp-rows b.c-warn { color: #b06f17; } .mvp-rows b.c-bad { color: #d1342b; }
.mvp-doc { display: flex; align-items: center; gap: 12px; }
.mvp-ava { width: 42px; height: 42px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #0071e3, #4aa3ff); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.mvp-doc b { font-size: 14.5px; color: #1d1d1f; display: block; letter-spacing: -.01em; }
.mvp-doc span { font-size: 12px; color: #86868b; }
.mvp-quote { font-size: 14.5px; line-height: 1.55; color: #1d1d1f; margin: 16px 0 0; padding: 15px 16px; background: #f5f5f7; border-radius: 14px; }
.mvp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mvp-tags span { font-size: 12px; font-weight: 500; color: #1d1d1f; background: #f0f1f4; border: 1px solid rgba(0,0,0,.05); border-radius: 999px; padding: 6px 12px; }
.mvp-tags span.on { background: #0071e3; color: #fff; border-color: transparent; }
.mvp-trend { width: 100%; height: 112px; display: block; margin-top: 8px; overflow: visible; }
.mvp-x { display: flex; justify-content: space-between; font-family: var(--mono,'Spline Sans Mono',monospace); font-size: 10px; color: #a1a6ad; margin-top: 9px; }
.mvp-deltas { display: flex; gap: 26px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.06); }
.mvp-delta b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #1d1d1f; display: block; }
.mvp-delta.up b { color: #1a8f53; }
.mvp-delta small { font-size: 12px; color: #86868b; }
@media(max-width:900px){ .lmx-visual { align-self: auto; } }