.landing-motion :is(.hero, .stock-hero, .sgq-hero) { isolation: isolate; position: relative; }
.landing-motion :is(.hero, .stock-hero, .sgq-hero) > .shell { position: relative; z-index: 1; }
.motion-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background-image: linear-gradient(#8ee6df04 1px, transparent 1px), linear-gradient(90deg, #8ee6df04 1px, transparent 1px); background-size: 64px 64px; }
.motion-ambient::before { content: ''; position: absolute; width: min(70vw, 950px); height: min(70vw, 950px); top: -35%; right: -12%; background: radial-gradient(ellipse, #48d8ce20 0%, #48d8ce08 40%, transparent 68%); }
.motion-ambient::after { content: ''; position: absolute; width: 50%; height: 70%; bottom: -40%; left: -10%; background: radial-gradient(ellipse, #329ba517, transparent 70%); }
html[data-motion="on"] .landing-motion [data-motion-visible] > .motion-ambient::before { animation: ambient-drift 12s ease-in-out infinite alternate; }
@keyframes ambient-drift { to { transform: translate3d(-30px, 24px, 0) scale(1.06); } }
.landing-motion .motion-visual { box-shadow: 0 22px 60px #0003, 0 0 0 1px #71d8d41c; }
html[data-motion="on"] .landing-motion .motion-visual[data-motion-visible] { animation: product-light 7s ease-in-out infinite; }
@keyframes product-light { 50% { box-shadow: 0 24px 66px #0004, 0 0 28px #5bd4ce24, 0 0 0 1px #71d8d43b; } }
.landing-motion .motion-light-card { position: relative; isolation: isolate; }
.landing-motion .capability-grid { overflow: visible; }
.landing-motion .capability-card { display: flex; flex-direction: column; overflow: hidden; }
.landing-motion .capability-card > a { position: static; align-self: flex-start; margin-top: auto; padding-top: 1.25rem; flex-shrink: 0; }
.landing-motion .capability-card > p { overflow-wrap: anywhere; }
/* The accent sits inside the card; the rounded outline stays continuous. */
.landing-motion .capability-card::before { top: .65rem; left: 1.65rem; right: auto; width: 2.75rem; height: 3px; border-radius: 999px; opacity: 0; transform: scaleX(.55); transition: opacity .18s ease, transform .22s ease; }
.landing-motion .capability-card:hover::before, .landing-motion .capability-card:focus-within::before { opacity: 1; transform: scaleX(1); }
.landing-motion .capability-card > a span[aria-hidden="true"] { display: inline-block; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .landing-motion .capability-card:hover > a span[aria-hidden="true"] { transform: translateX(3px); }
}
html[data-motion="off"] .landing-motion .capability-card::before { transition: none; }
/* Focused homepage trial: first steps, plan summaries, FAQ and header buttons. */
.home-effects :is(.journey-grid > article, .plans-preview .plan-limit-grid > div) { position: relative; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-effects :is(.journey-grid > article, .plans-preview .plan-limit-grid > div)::before { content: ''; position: absolute; top: .65rem; left: 1.4rem; width: 2.75rem; height: 3px; border-radius: 999px; background: var(--teal-strong); opacity: 0; transform: scaleX(.55); transform-origin: left; transition: opacity .18s ease, transform .22s ease; }
.home-effects :is(.journey-grid > article, .plans-preview .plan-limit-grid > div):hover::before { opacity: 1; transform: scaleX(1); }
.home-effects #faq .faq-list { border-top: 0; }
.home-effects #faq .faq-list > details { margin-block: .35rem; padding-inline: 1rem; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: .8rem; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.home-effects #faq .faq-list > details:hover, .home-effects #faq .faq-list > details:focus-within { border-color: var(--ux-focus); background: color-mix(in srgb, var(--surface-strong) 94%, var(--teal) 6%); }
.home-effects #faq .faq-list > details[open] { border-color: var(--ux-focus); background: color-mix(in srgb, var(--surface-strong) 90%, var(--teal) 10%); box-shadow: inset 3px 0 0 var(--ux-focus); }
.home-effects #faq summary:focus-visible { border-radius: .5rem; outline-offset: 1px; }
.home-effects :is(.nav-toggle,.icon-button) { position: relative; transition: transform .22s cubic-bezier(.2,.75,.25,1), box-shadow .22s ease, background-color .18s ease, border-color .18s ease; }
.home-effects .nav-toggle[aria-expanded="true"] { border-color: var(--teal); background: #5bd4ce12; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .home-effects :is(.journey-grid > article, .plans-preview .plan-limit-grid > div):hover { transform: translateY(-2px); border-color: var(--ux-focus); box-shadow: 0 7px 20px #10282d1c; }
  html[data-motion="on"] .home-effects :is(.nav-toggle,.icon-button):hover { transform: translateY(-3px); border-color: var(--teal); background: #5bd4ce14; box-shadow: 0 7px 18px #001e2833; }
  html[data-motion="on"] .home-effects :is(.nav-toggle,.icon-button):hover::after { content: ''; position: absolute; inset: 0 0 -4px; border-radius: inherit; background: transparent; }
  html[data-motion="on"] .home-effects :is(.nav-toggle,.icon-button):active { transform: translateY(0) scale(.98); box-shadow: none; }
}
html[data-motion="off"] .home-effects :is(.journey-grid > article, .plans-preview .plan-limit-grid > div)::before { transition: none; }
.motion-light-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--motion-x,50%) var(--motion-y,50%), #5bd4ce16, transparent 75%); transition: opacity .2s ease; }
html[data-motion="on"] .landing-motion .motion-light-card.motion-pointer::after { opacity: 1; }
.landing-motion :is(.attention-list li, .stock-row, .sgq-preview-row:not(.sgq-preview-heading)) { border-radius: .45rem; }
html[data-motion="on"] .landing-motion .motion-visual[data-motion-visible] :is(.attention-list li, .stock-row, .sgq-preview-row:not(.sgq-preview-heading)) { animation: illustration-emphasis var(--motion-row-cycle,9s) ease-in-out infinite; animation-delay: var(--motion-row-delay,0s); }
@keyframes illustration-emphasis { 0%, 32%, 100% { background-color: transparent; } 8%, 24% { background-color: #0a9b9214; } }
/* The previous exit-fade is not used on these public previews. */
.landing-motion [data-reveal], .landing-motion [data-reveal].reveal-out { opacity: 1; }
/* A tangible hover lift: transform changes presentation, never layout. */
.landing-motion .button { position: relative; transition: transform .22s cubic-bezier(.2,.75,.25,1), box-shadow .22s ease, background-color .18s ease, border-color .18s ease; }
.landing-motion .button-primary { box-shadow: 0 3px 10px #0c837918; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .landing-motion .button:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-4px); box-shadow: 0 12px 24px #001e2829, 0 2px 6px #001e2814; }
  html[data-motion="on"] .landing-motion .button-primary:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: 0 12px 28px #29b8ad38, 0 4px 10px #001e2826; }
  html[data-motion="on"] .landing-motion .button-quiet:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 7px 16px #001e2824; }
  /* Keep the pointer inside the original hit area while the button rises. */
  html[data-motion="on"] .landing-motion .button:not(:disabled):not([aria-disabled="true"]):hover::after { content: ''; position: absolute; inset: 0 0 -6px; border-radius: inherit; background: transparent; }
  html[data-motion="on"] .landing-motion .button:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(-1px) scale(.99); box-shadow: 0 3px 8px #001e2829; transition-duration: .08s; }
}
@media (max-width: 700px) {
  .motion-ambient { background-size: 48px 48px; }
  .motion-light-card::after { display: none; }
  html[data-motion="on"] .landing-motion .motion-visual[data-motion-visible] { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-motion *, .landing-motion *::before, .landing-motion *::after { animation: none !important; scroll-behavior: auto !important; }
  .motion-light-card::after { transition: none; }
}