/* Homepage-only motion and art direction. Other pages use styles.css. */
.home-page .hero { padding: 24px 0 32px; background: #f6f8fb; }
.home-page .hero-grid { grid-template-columns: 1fr 1.08fr; gap: 46px; }
.home-page .hero h1 { font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.055em; line-height: 1.07; }
.hero-emphasis { color: var(--accent); }
.home-page .hero .lede { font-size: 16px; line-height: 1.8; }
.home-page #homeDashboard { transform: translateY(var(--hero-offset, 0px)); }
.home-page .browser-body { grid-template-columns: 118px minmax(0, 1fr); }
.home-page .browser-side { padding: 16px 6px; }
.home-page .browser-main { padding: 22px 16px; }
.home-page .bm-stats { gap: 6px; }
.home-page .bm-stat { padding: 12px 8px; }
.home-page .scroll-invitation { display: inline-flex; gap: 12px; align-items: center; margin-top: 34px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.scroll-invitation > span { display: grid; place-items: center; width: 29px; height: 38px; border: 1px solid #cbd0df; border-radius: 20px; font-size: 17px; }
.home-page a:focus-visible, .home-page button:focus-visible { outline: 2px solid #6878ec; outline-offset: 5px; }
.home-page .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%); }
.home-page #solutions { scroll-margin-top: 80px; padding-top: 36px; }
.connected-story { padding: 0; background: #111823; color: #fff; scroll-margin-top: 70px; --assembly: 1; }
.story-sticky { position: relative; padding: 36px 0 28px; overflow: hidden; }
.story-layout { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 40px; }
.story-copy { position: relative; z-index: 2; }
.story-copy h2 { color: #fff; font-size: clamp(38px, 4.1vw, 58px); line-height: 1.06; letter-spacing: -.045em; }
.story-copy h2 > span { color: #9bbcff; }
.story-intro { color: #aab5c5; font-size: 15px; max-width: 35ch; margin-top: 22px; }
.story-steps { list-style: none; padding: 0; margin: 32px 0 26px; display: grid; gap: 22px; }
.story-steps li { display: flex; align-items: start; gap: 15px; }
.story-number { color: #9bbcff; font-size: 11px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.story-steps h3 { color: #fff; font-size: 16px; line-height: 1.4; letter-spacing: -.02em; }
.story-steps p { color: #aab5c5; font-size: 13px; line-height: 1.65; max-width: 36ch; margin: 5px 0 0; }
.story-link { display: inline-flex; gap: 22px; align-items: center; font-size: 13px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid #556775; }
.story-link span { color: #9bbcff; font-size: 20px; }
.connection-visual { position: relative; height: 470px; min-width: 0; }
.connection-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid #ffffff0b; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-one { width: 470px; height: 470px; }
.orbit-two { width: 660px; height: 660px; }
.workspace-shell { position: absolute; inset: 51px -8px 51px; border: 1px solid #8195ad4d; border-radius: 18px; background: #1b2634; box-shadow: 0 32px 90px #0003; opacity: var(--assembly); transform: scale(var(--shell-scale, 1)); }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px; border-bottom: 1px solid #ffffff12; }
.workspace-heading img { width: 107px; height: auto; }
.workspace-heading > span { display: flex; gap: 6px; align-items: center; color: #b9c6d7; font-size: 10px; }
.workspace-heading i, .caption-dot { width: 5px; height: 5px; background: #9bbcff; border-radius: 50%; }
.workspace-bottom { position: absolute; bottom: 16px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 12px; font-size: 9px; color: #aab5c5; }
.connection-card { position: absolute; width: 31%; height: 112px; left: 50%; top: 50%; border: 1px solid #465467; border-radius: 10px; background: #222f40; box-shadow: 0 14px 30px #0002; padding: 13px; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rotation, 0deg)); }
/* Explicit positions keep the visual stable when the cards are real buttons. */
.connection-card:nth-of-type(1) { --x: -105%; --y: -42px; }
.connection-card:nth-of-type(2) { --x: 0%; --y: -42px; }
.connection-card:nth-of-type(3) { --x: 105%; --y: -42px; }
.connection-card:nth-of-type(4) { --x: -105%; --y: 80px; }
.connection-card:nth-of-type(5) { --x: 0%; --y: 80px; }
.connection-card:nth-of-type(6) { --x: 105%; --y: 80px; }
.home-page .connection-visual { margin-bottom: 110px; }
.home-page .connection-card {
  appearance: none; font: inherit; line-height: 1.4; text-align: left; color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: translate .35s var(--ease-out), border-color .25s ease, background .25s ease, box-shadow .3s ease;
}
.connection-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--card-color); opacity: 0;
}
.home-page .connection-card[aria-pressed="true"], .home-page .connection-card:focus-visible {
  border-color: var(--card-color); background: #2a394c;
  box-shadow: inset 0 0 0 1px var(--card-color), 0 16px 36px #0003;
}
.home-page .connection-card:focus-visible { outline-color: var(--card-color); }
.connection-card[aria-pressed="true"] .connection-icon { background: var(--card-color); color: #111823; }
.connection-detail {
  position: absolute; top: calc(100% + 16px); left: 0; right: 0; min-height: 76px;
  border-left: 2px solid var(--detail-accent, #9bbcff); padding: 2px 0 2px 16px;
}
.connection-detail strong { color: var(--detail-accent, #9bbcff); font-size: 13px; font-weight: 600; }
.connection-detail p { color: #b9c6d7; font-size: 12px; line-height: 1.65; margin: 5px 0 0; max-width: 62ch; }
.mini-checks { display: block; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page .connection-card:hover { translate: 0 -5px; z-index: 3; }
  .home-page .connection-card:hover .mini-people i { translate: 0 -3px; }
  .home-page .connection-card:hover .mini-lines i { transform: scaleX(1.12); opacity: .7; }
}
@media (prefers-reduced-motion: no-preference) {
  .connection-card .mini-people i { transition: translate .3s var(--ease-out); }
  .connection-card .mini-people i:nth-child(2) { transition-delay: 40ms; }
  .connection-card .mini-people i:nth-child(3) { transition-delay: 80ms; }
  .connection-card .mini-lines i { transform-origin: left; transition: transform .35s var(--ease-out), opacity .3s ease; }
  .connection-card.is-connected::after { animation: connection-lock .8s ease-out; }
  .connection-card.is-connected .mini-bars i { animation: chart-connect .65s var(--ease-out) backwards; }
  .connection-card.is-connected .mini-lines i { animation: line-enter .65s var(--ease-out) backwards; }
  .connection-card.is-connected .mini-people i, .connection-card.is-connected .mini-checks { animation: metric-arrive .6s var(--ease-out) backwards; }
}
@keyframes connection-lock { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.09); } }
@keyframes chart-connect { from { transform: scaleY(.15); opacity: .2; } to { transform: scaleY(1); opacity: .6; } }
.connection-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--card-color); background: #ffffff08; border-radius: 5px; font-size: 16px; }
.connection-category { font-size: 8px; color: var(--card-color); margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.connection-card strong { display: block; font-size: 10px; font-weight: 500; margin: 9px 0; }
.mini-bars { height: 17px; display: flex; gap: 5px; align-items: end; }
.mini-bars i { width: 17%; height: 45%; background: var(--card-color); opacity: .6; border-radius: 2px; }
.mini-bars i:nth-child(2) { height: 65%; }.mini-bars i:nth-child(3) { height: 55%; }.mini-bars i:nth-child(4) { height: 85%; }.mini-bars i:nth-child(5) { height: 100%; }
.mini-people { display: flex; padding-left: 3px; }
.mini-people i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 7px; background: #485478; border: 2px solid #222f40; margin-left: -3px; }
.mini-lines { display: grid; gap: 5px; }.mini-lines i { height: 4px; width: 80%; background: var(--card-color); opacity: .3; border-radius: 3px; }.mini-lines i:last-child { width: 55%; }
.mini-checks { font-size: 8px; color: var(--card-color); }
.connection-caption { position: absolute; bottom: 8px; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; color: #9bbcff; font-size: 11px; opacity: var(--assembly); }
.story-track { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #ffffff12; }
.story-track > span { display: block; height: 100%; background: #9bbcff; transform: scaleX(var(--story-progress, 1)); transform-origin: left; }
.home-page .solution-card { transition: transform .3s ease, box-shadow .3s ease; }
.home-page .solution-card:first-child { border-top: 3px solid var(--nursery-a); }
.home-page .solution-card:last-child { border-top: 3px solid var(--accent); }
.home-page .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .connected-story { height: calc(var(--story-height) + var(--story-hold)); }
  .motion-enabled .story-sticky { position: sticky; top: var(--story-top, 0px); }
  .motion-enabled .story-layout { width: 100%; }
  .motion-enabled .story-steps li { opacity: .68; transition: opacity .25s ease; }
  .motion-enabled .story-steps li.is-active { opacity: 1; }
}
@media (max-width: 1049px) {
  .home-page .hero-grid { grid-template-columns: 1fr; max-width: 800px; gap: 54px; }
  .home-page .hero h1 { max-width: 16ch; }
  .home-page .hero .lede { max-width: 60ch; }
  .story-layout { grid-template-columns: 1fr; max-width: 740px; gap: 20px; }
  .story-intro, .story-steps p { max-width: 54ch; }
  .story-steps { gap: 20px; }
  .connection-visual { width: 100%; max-width: 580px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .home-page .hero { padding: 20px 0 28px; }
  .home-page .hero .eyebrow { font-size: 10px; }
  .home-page .hero h1 { font-size: clamp(36px, 9.8vw, 56px); }
  .home-page .browser-body { grid-template-columns: minmax(0, 1fr); }
  .home-page .browser-side { display: none; }
  .home-page .dash-tab { font-size: 10px; padding: 7px 10px; }
  .story-sticky { padding: 28px 0 24px; }
  .story-layout { gap: 36px; }
  .connection-visual { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 65px 12px 68px; }
  .workspace-shell { inset: 0; }
  .workspace-heading { padding: 18px 12px; }
  .workspace-heading img { width: 85px; }
  .workspace-heading > span { font-size: 8px; }
  .connection-card { position: relative; left: auto; top: auto; transform: none; width: auto; height: 115px; padding: 12px 9px; }
  .connection-category { font-size: 7px; }
  .workspace-bottom { left: 12px; right: 12px; bottom: 38px; font-size: 7px; }
  .connection-caption { bottom: 13px; font-size: 9px; }
  .home-page .solution-card { padding: 28px; }
}
/* Quiet depth and purposeful motion, scoped to the homepage. */
.home-page { --ease-out: cubic-bezier(.22, 1, .36, 1); }
.home-page .hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 80% 40%, #4453d612, transparent 55%);
}
.home-page .site-header { transition: box-shadow .3s ease; box-shadow: 0 4px 24px #141a2b04; }
.home-page .section-head .eyebrow::before,
.home-page .story-copy .eyebrow::before { transform-origin: left; }
.home-page .solution-card { position: relative; overflow: hidden; --surface-accent: var(--accent); --surface-ink: var(--accent-deep); --surface-tint: #4453d619; }
.home-page .solution-card:first-child { --surface-accent: var(--nursery-a); --surface-ink: #216e5e; --surface-tint: #2e8f7a1c; }
.home-page .solution-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--pointer-x, 85%) var(--pointer-y, 0%), var(--surface-tint), transparent 75%);
  transition: opacity .4s ease;
}
.home-page .card-link svg, .home-page .story-link span { transition: transform .3s var(--ease-out); }
.home-page .btn { transition: transform .25s var(--ease-out), box-shadow .25s ease, background .25s ease; }
.home-page .solution-card:focus-within { border-color: var(--surface-accent); box-shadow: 0 18px 44px #141a2b12; }
.home-page .solution-card:focus-within::before { opacity: 1; }
.home-page .flow-step .num-badge { transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.home-page .flow-step.has-entered .num-badge { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px #4453d60a; }
.home-page .flow-step::after { transform-origin: left; }
.home-page .section-dark { position: relative; overflow: hidden; isolation: isolate; }
.home-page .section-dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 90% 100%, #4453d627, transparent 65%);
}
.home-page .formula .piece { transition: border-color .3s ease, background .3s ease; }
.home-page .cta-banner { position: relative; isolation: isolate; overflow: hidden; }
.home-page .cta-banner::before, .home-page .cta-banner::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 430px; height: 430px; right: -100px; top: -230px;
  border: 1px solid #ffffff1f; border-radius: 50%;
}
.home-page .cta-banner::after { width: 560px; height: 560px; right: -165px; top: -295px; }
@media (hover: hover) and (pointer: fine) {
  .home-page .solution-card:hover { transform: translateY(-7px); border-color: var(--surface-accent); box-shadow: 0 24px 54px #141a2b18; }
  .home-page .solution-card:hover::before { opacity: 1; }
  .home-page .card-link:hover svg, .home-page .story-link:hover span { transform: translateX(4px); }
  .home-page .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #141a2b14; }
  .home-page .formula .piece:hover { border-color: #a9b4f5; background: #ffffff12; }
}
/* Interactive details retain their natural hit areas and keyboard focus rings. */
.home-page .solution-card { transition: transform .45s var(--ease-out), box-shadow .35s ease, border-color .3s ease; }
.home-page .solution-card h3, .home-page .solution-card .card-link { transition: color .25s ease; }
.home-page .solution-card:focus-within .card-link { color: var(--surface-ink); }
.home-page .nav-links a.top-link, .home-page .footer-col a, .home-page .card-link { position: relative; }
.home-page .nav-links a.top-link::after, .home-page .footer-col a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out); pointer-events: none;
}
.home-page .footer-col a { display: inline-block; }
.home-page .footer-col a::after { bottom: -2px; height: 1px; }
.home-page .nav-links a.top-link:focus-visible::after, .home-page .footer-col a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.home-page .btn, .home-page .nav-cta { position: relative; isolation: isolate; overflow: hidden; }
.home-page .nav-cta { transition: background .25s ease, box-shadow .3s ease, transform .25s var(--ease-out); }
.home-page .btn::before, .home-page .nav-cta::before {
  content: ''; position: absolute; inset: -40% -60%; pointer-events: none; z-index: -1;
  background: linear-gradient(110deg, transparent 38%, #ffffff30 49%, transparent 60%);
  transform: translateX(-65%); transition: transform .65s var(--ease-out);
}
.home-page .btn:focus-visible::before, .home-page .nav-cta:focus-visible::before { transform: translateX(65%); }
.home-page .btn:active, .home-page .nav-cta:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.home-page .browser-frame { transition: transform .5s var(--ease-out), box-shadow .4s ease; }
.home-page .dash-tab, .home-page .side-item { transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.home-page .dash-tab:active, .home-page .side-item:active { box-shadow: inset 0 0 0 2px #4453d633; }
.home-page .mini-bars i { transform-origin: bottom; transition: transform .35s var(--ease-out), opacity .25s ease; }
.home-page .value-list li { position: relative; padding: 6px 10px; margin: -6px -10px; border-radius: 6px; transition: background .25s ease, color .25s ease; }
.home-page .value-list li::before { transition: transform .3s var(--ease-out), box-shadow .3s ease; }
.home-page .flow-step .num-badge { transition: transform .4s var(--ease-out), background .25s ease, box-shadow .3s ease; }
.home-page .story-steps li { transition: opacity .25s ease, background .25s ease; border-radius: 8px; }
.home-page .cta-banner { background: radial-gradient(430px circle at var(--pointer-x, 90%) var(--pointer-y, 10%), #ffffff16, transparent 75%), linear-gradient(135deg, var(--accent), #333fb0 70%); }
@media (hover: hover) and (pointer: fine) {
  .home-page .nav-links a.top-link:hover::after, .home-page .footer-col a:hover::after { transform: scaleX(1); transform-origin: left; }
  .home-page .btn:hover::before, .home-page .nav-cta:hover::before { transform: translateX(65%); }
  .home-page .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #4453d62b; }
  .home-page .btn:active, .home-page .nav-cta:active { transform: translateY(1px) scale(.98); }
  .home-page .solution-card:hover h3, .home-page .solution-card:hover .card-link { color: var(--surface-ink); }
  .home-page .solution-card:hover .card-link svg { transform: translateX(7px); }
  .home-page .browser-frame.pointer-active { transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); box-shadow: 0 35px 70px #141a2b24; }
  .home-page .dash-tab:not(.active):hover, .home-page .side-item:not(.active):hover { background: var(--accent-pale); color: var(--accent-deep); box-shadow: inset 0 0 0 1px #4453d629; }
  .home-page .connection-card:hover { border-color: var(--card-color); background: #2a394c; }
  .home-page .connection-card:hover .mini-bars i { transform: scaleY(1.2); opacity: 1; }
  .home-page .value-list li:hover { background: var(--accent-pale); color: var(--ink); }
  .home-page .value-list li:hover::before { transform: scale(1.3); box-shadow: 0 0 0 4px #4453d612; }
  .home-page .flow-step:hover .num-badge { transform: translateY(-5px) scale(1.1); background: var(--accent-deep); box-shadow: 0 8px 22px #4453d630; }
  .home-page .story-steps li:hover { opacity: 1; background: #ffffff06; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-page .hero::before { animation: hero-light 2.2s var(--ease-out) both; }
  .home-page .float-card { animation: metric-arrive 1s .35s var(--ease-out) backwards; }
  .home-page .float-card.bottom { animation-delay: .55s; }
  .home-page .scroll-invitation > span { animation: scroll-nudge 1.5s 1s 2; }
  .home-page .has-entered .eyebrow::before { animation: line-enter .7s var(--ease-out) both; }
  .home-page .flow-step.has-entered::after { animation: line-enter .8s var(--ease-out) backwards; animation-delay: .25s; }
  .home-page .cta-banner.has-entered::after { animation: ring-enter 1.4s var(--ease-out) both; }
}
@keyframes hero-light { from { opacity: 0; transform: translateX(5%); } to { opacity: 1; transform: translateX(0); } }
@keyframes metric-arrive { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes scroll-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes line-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ring-enter { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
/* Native sticky sections retain document flow and reverse with normal scrolling. */
.homepage-stack { position: relative; isolation: isolate; }
.stack-anchor { height: 0; pointer-events: none; }
.home-page .final-stack { background: var(--bg-deep); }
.final-stack > .stack-content { width: 100%; }
.home-page .final-stack .section-tight { padding: 36px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .homepage-stack.stack-enabled { background: #e9edf5; }
  .stack-enabled > .stack-panel {
    min-height: var(--stack-panel-height); display: flex; align-items: center;
    position: sticky; top: var(--stack-top, 88px); z-index: var(--stack-layer);
    transform: scale(var(--stack-scale, 1)); transform-origin: center top;
    border-radius: 26px 26px 0 0; background-color: var(--paper);
    box-shadow: 0 -12px 36px #141a2b0b, 0 -1px 0 #141a2b0b;
  }
  .stack-enabled > .stack-panel.section-soft { background-color: var(--bg-soft); }
  .stack-enabled > .stack-panel.section-dark { background-color: var(--bg-deep); }
  .stack-enabled > .stack-panel.final-stack { background-color: var(--bg-deep); align-items: flex-end; }
  .stack-enabled > .stack-panel:last-child { position: relative; top: auto; }
  .stack-enabled > .stack-panel > .wrap { width: 100%; }
}
/* Why it matters: editorial hierarchy with an explorable pressure/outcome pair. */
.why-section { padding: 88px 0 68px; scroll-margin-top: 80px; }
.why-header { max-width: 790px; margin-bottom: 28px; }
.why-header h2 { font-size: clamp(32px, 3.6vw, 49px); letter-spacing: -.045em; line-height: 1.12; max-width: 24ch; }
.why-header h2 span { color: var(--accent); }
.why-header > p { margin: 22px 0 0; font-size: 15px; line-height: 1.8; max-width: 76ch; }
.why-explorer { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: start; }
.why-section:not(.why-interactive) .why-outcomes { display: none; }
.why-section:not(.why-interactive) .why-explorer { grid-template-columns: 1fr; }
.why-direction { color: var(--ink-soft); font-size: 12px; font-weight: 600; margin: 0 0 18px; }
.why-theme { border-bottom: 1px solid var(--line); }
.why-theme summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.025em; transition: color .2s ease; }
.why-theme summary::-webkit-details-marker { display: none; }
.why-theme summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.why-toggle { position: relative; display: block; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; transition: background .25s ease, border-color .25s ease, transform .3s var(--ease-out); }
.why-toggle::before, .why-toggle::after { content: ''; position: absolute; background: currentColor; width: 10px; height: 1px; left: 8px; top: 12px; }
.why-toggle::after { transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.why-theme[open] summary { color: var(--accent-deep); }
.why-theme[open] .why-toggle { background: var(--accent); border-color: var(--accent); color: white; }
.why-theme[open] .why-toggle::after { transform: rotate(0deg); }
.why-theme-copy { padding: 0 40px 24px 0; font-size: 14px; line-height: 1.8; }
.why-theme-copy p { margin-bottom: 12px; }
.why-theme-copy .why-benefit { color: var(--accent-deep); font-size: 12px; font-weight: 600; margin: 0; }
.why-context { font-size: 12px; line-height: 1.8; margin-top: 24px; max-width: 48ch; }
.why-outcomes { background: #f1f3fc; border-radius: 18px; padding: 34px 36px 0; border: 1px solid #e3e7f6; overflow: hidden; min-width: 0; }
.why-outcome { min-height: 402px; display: flex; flex-direction: column; }
.why-outcome[hidden] { display: none; }
.why-pressure > span, .why-result > span { display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.why-pressure p { font-size: 16px; line-height: 1.5; margin: 0; color: var(--ink-soft); }
.why-shift { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 22px; margin: 19px 0; }
.why-shift span { height: 1px; flex: 1; background: #cbd2ef; transform-origin: left; }
.why-result h3 { font-size: clamp(27px, 2.5vw, 36px); letter-spacing: -.045em; line-height: 1.15; }
.why-result h3 em { color: var(--accent-deep); font-style: normal; }
.why-result > p { margin: 15px 0 24px; font-size: 13px; line-height: 1.75; max-width: 45ch; }
.why-outcome-footer { border-top: 1px solid #d9def2; padding: 16px 0; margin-top: auto; color: var(--accent-deep); font-size: 11px; font-weight: 600; }
.why-principle { display: flex; align-items: start; gap: 18px; margin-top: 24px; }
.why-principle > span { font-family: Georgia, serif; font-size: 74px; line-height: 1; color: #c0c7ec; }
.why-principle p { font-family: var(--font-display); font-size: clamp(17px, 2vw, 23px); line-height: 1.5; letter-spacing: -.025em; }
.why-principle strong { font-weight: 700; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .why-theme summary:hover { color: var(--accent-deep); }
  .why-theme:not([open]) summary:hover .why-toggle { background: var(--accent-pale); border-color: var(--accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .why-theme[open] .why-theme-copy { animation: why-copy-enter .3s var(--ease-out); }
  .why-explorer.has-entered .why-shift span { animation: line-enter .7s var(--ease-out) backwards; }
}
@keyframes why-copy-enter { from { opacity: .3; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .why-explorer { grid-template-columns: 1fr; gap: 28px; }
  .why-header { margin-bottom: 32px; }
  .why-theme summary { font-size: 18px; }
  .why-outcome { min-height: 375px; }
}
@media (max-width: 480px) {
  .why-section { padding: 56px 0 44px; }
  .why-header h2 { font-size: 34px; }
  .why-theme-copy { padding-right: 12px; }
  .why-outcomes { padding: 26px 22px 0; }
  .why-outcome { min-height: 415px; }
  .why-principle { margin-top: 32px; gap: 12px; }
}
/* Give the shorter stack panels enough substance to balance the longer ones. */
.home-page .experience-section .section-head { text-align: left; max-width: none; }
.experience-section .section-head h2 { max-width: 24ch; }
.experience-section .section-head > p { max-width: 82ch; font-size: 15px; }
.home-page .experience-section .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; margin-top: 36px; }
.experience-section .flow-step { text-align: left; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.home-page .experience-section .flow-step::after { display: none; }
.experience-section .flow-step .num-badge { margin: 0 0 14px; width: 34px; height: 34px; font-size: 12px; }
.experience-section .flow-step h4 { font-size: 17px; margin-bottom: 9px; line-height: 1.3; }
.experience-section .flow-step p { font-size: 13px; line-height: 1.75; max-width: 32ch; }
.oversight-section .two-col { align-items: center; gap: 60px; }
.oversight-section h2 { font-size: clamp(30px, 3.3vw, 45px); letter-spacing: -.045em; line-height: 1.16; }
.oversight-section h2 > span { color: #a9b4f5; }
.oversight-section .two-col > div > p { font-size: 14px; line-height: 1.8; }
.oversight-principles { display: grid; gap: 24px; margin-top: 28px; }
.oversight-principles > div { border-left: 2px solid #6878ec; padding-left: 20px; }
.oversight-principles span { display: block; color: #a9b4f5; font-size: 11px; font-weight: 600; margin-bottom: 7px; }
.oversight-principles h3 { font-size: 21px; margin-bottom: 8px; }
.oversight-principles p { font-size: 13px; line-height: 1.75; max-width: 46ch; }
@media (max-width: 680px) {
  .home-page .experience-section .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .experience-section .flow-step { padding-left: 12px; }
  .experience-section .flow-step h4 { font-size: 15px; }
  .experience-section .flow-step p { font-size: 12px; }
  .oversight-section .two-col { gap: 28px; }
}
/* Compact section rhythm, keeping clearance for card details and focus rings. */
.home-page .homepage-stack > section { padding: 36px 0; }
.home-page .section-head { margin-bottom: 28px; }
.home-page .cta-banner { padding: 32px 36px; }
.home-page .site-footer { padding: 36px 0 16px; }
.home-page .footer-top { padding-bottom: 28px; }
@media (max-width: 680px) {
  .home-page .homepage-stack > section, .home-page #solutions { padding: 28px 0; }
  .home-page .section-head, .home-page .why-header { margin-bottom: 24px; }
  .home-page .why-principle { margin-top: 24px; }
  .home-page .cta-banner { padding: 26px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-page *, .home-page *::before, .home-page *::after { animation: none !important; transition: none !important; }
  .home-page #homeDashboard { transform: none; }
  .home-page .solution-card:hover, .home-page .btn:hover { transform: none; }
  .home-page .browser-frame.pointer-active, .home-page .nav-cta:hover,
  .home-page .nav-cta:active, .home-page .btn:active,
  .home-page .flow-step:hover .num-badge, .home-page .value-list li:hover::before,
  .home-page .connection-card:hover .mini-bars i,
  .home-page .solution-card:hover .card-link svg, .home-page .story-link:hover span { transform: none; }
  .home-page .btn::before, .home-page .nav-cta::before { display: none; }
}