/* Frontend-only motion. The native editor deliberately retains expanded content. */
.outcome-art { height:140px; margin:0 0 28px; color:var(--int-night,#151c29); pointer-events:none; }
.outcome-art svg { display:block; height:100%; width:100%; max-width:240px; fill:currentColor; overflow:visible; }
.outcome-connections { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.v2-page:has(> .v2-hero) #outcomes .has-outcome-art h3 { margin-bottom:24px; }
.outcome-lead { display:block; margin-bottom:12px; font-weight:600; }
.outcome-art.is-playing .outcome-bars path { animation:outcome-speed .85s cubic-bezier(.2,.7,.2,1) both; }
.outcome-art.is-playing .outcome-bars path:nth-child(2) { animation-delay:.1s; }
.outcome-art.is-playing .outcome-bars path:nth-child(3) { animation-delay:.2s; }
.outcome-grid path { transform-box:fill-box; transform-origin:center; }
.outcome-art.is-playing .outcome-grid path { animation:outcome-clarity 1s cubic-bezier(.2,.7,.2,1) both; }
.outcome-grid path:nth-child(even) { --scatter-x:16px; --scatter-y:-12px; --scatter-turn:20deg; }
.outcome-grid path:nth-child(odd) { --scatter-x:-14px; --scatter-y:14px; --scatter-turn:-20deg; }
.outcome-art.is-playing .outcome-connections { stroke-dasharray:600; animation:outcome-connect 1.25s ease both; }
.outcome-art.is-playing .outcome-nodes { animation:outcome-nodes .6s ease both; }
@keyframes outcome-speed { from { transform:translateX(-28px); opacity:.25; } to { transform:translateX(0); opacity:1; } }
@keyframes outcome-clarity { from { transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-turn)); opacity:.35; } to { transform:none; opacity:1; } }
@keyframes outcome-connect { from { stroke-dashoffset:600; } to { stroke-dashoffset:0; } }
@keyframes outcome-nodes { from { opacity:.25; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce),print {
 .outcome-art.is-playing * { animation:none!important; }
}
.motion-outcomes { position:relative; }
.motion-outcomes-source { opacity:0; }
.motion-outcomes-overlay { position:absolute; inset:0; pointer-events:none; color:var(--int-purple,#8116e0); }
.motion-outcomes-overlay > span { position:absolute; inset:0; animation:home-outcome-word 1.4s ease both; }
@keyframes home-outcome-word {
 0% { opacity:0; transform:translateY(18px); }
 18%,82% { opacity:1; transform:translateY(0); }
 100% { opacity:0; transform:translateY(-14px); }
}
@media(prefers-reduced-motion:reduce),print {
 .motion-outcomes-source { opacity:1; }
 .motion-outcomes-overlay { display:none; }
}
.v2-hero .motion-heading { position:relative; }
.motion-heading-source { opacity:0; }
.motion-heading-visible { position:absolute; inset:0; padding:inherit; box-sizing:border-box; pointer-events:none; }
.motion-heading-visible::after { content:""; display:inline-block; width:2px; height:.9em; margin-left:3px; background:var(--int-lilac); vertical-align:-.05em; }
.v2-page:has(> .v2-hero) #approach .motion-engine { display:block; padding-left:0; border-left:0; }
.motion-tabs { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:28px; border-bottom:1px solid #ffffff40; }
.motion-tabs button {
 appearance:none; border:1px solid #ffffff55; border-radius:0; background:transparent;
 color:var(--int-lilac); font:inherit; font-size:17px; font-weight:600; padding:12px 16px;
 min-height:48px; cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.motion-tabs button[aria-selected="true"] { background:var(--int-lilac); border-color:var(--int-lilac); color:var(--int-night); }
.motion-tabs button:hover { border-color:var(--int-lilac); }
.motion-tabs button:focus-visible,.motion-panels > [role="tabpanel"]:focus-visible { outline:2px solid white; outline-offset:5px; }
.motion-panels { position:relative; margin-top:32px; }
.v2-page:has(> .v2-hero) #approach .motion-panels > .process-card { padding:0 0 28px; border:0; }
.motion-panels > [hidden] { display:none!important; }
.motion-panels > :not([hidden]):not(.motion-measuring) { animation:home-panel-in .3s ease-out both; }
.motion-panels > .motion-measuring { position:absolute; inset:0 0 auto; visibility:hidden; animation:none; pointer-events:none; }
@keyframes home-panel-in { from {opacity:0;transform:translateY(8px);} to {opacity:1;transform:translateY(0);} }
.v2-page:has(> .v2-hero) .home-card-image { overflow:hidden; }
.v2-page:has(> .v2-hero) .home-card-image img { transition:transform .65s cubic-bezier(.2,.65,.3,1); }
.v2-page:has(> .v2-hero) .v2-problem { transition:transform .35s cubic-bezier(.2,.65,.3,1),box-shadow .35s ease; }
/* Paint the ring above the artwork, not as an inset shadow below it. */
.v2-page:has(> .v2-hero) .v2-problem::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border:2px solid var(--int-lilac); opacity:0; transition:opacity .2s ease; }
.v2-page:has(> .v2-hero) .v2-problem:focus-within::after { opacity:1; }
.v2-page:has(> .v2-hero) .v2-problem:focus-within { transform:scale(1.012); z-index:1; box-shadow:0 18px 35px #0006; }
.v2-page:has(> .v2-hero) .v2-problem:focus-within .home-card-image img { transform:scale(1.1); }
@media(max-width:480px) {
 .motion-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .motion-tabs button { min-width:0; overflow-wrap:anywhere; }
}
/* Same three source paths and filters, separated only in the frontend.
 * CSS timelines are preferred; unsupported browsers use an event-driven fallback. */
.v2-page:has(> .v2-hero) :is(#introduction,#proof).motion-symbol-section:not(.has-background) {
 position:relative; isolation:isolate; background-image:none;
 view-timeline-name:--home-symbols; view-timeline-axis:block;
}
.motion-symbol-art { position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:-1; }
.motion-symbol-art .motion-symbol-svg { position:absolute; left:50%; top:100px; width:115%; height:auto; transform:translateX(-50%); }
#proof .motion-symbol-art .motion-symbol-svg { top:50%; width:130%; transform:translate(-50%,-50%); }
.motion-symbol-svg g[filter] {
 transform-box:fill-box; transform-origin:center;
 animation:home-symbol-tall 1s linear both; animation-timeline:--home-symbols;
 animation-range:entry 0% exit 100%;
}
.motion-symbol-svg g.motion-symbol-1 { animation-name:home-symbol-square; }
.motion-symbol-svg g.motion-symbol-2 { animation-name:home-symbol-arc; }
.motion-symbol-fallback .motion-symbol-svg g[filter] { animation:none; }
@keyframes home-symbol-tall { from {transform:translate(0,40px);} to {transform:translate(0,-40px);} }
@keyframes home-symbol-square { from {transform:translate(-30px,70px) rotate(-6deg);} to {transform:translate(30px,-70px) rotate(6deg);} }
@keyframes home-symbol-arc { from {transform:translate(30px,45px) rotate(4deg);} to {transform:translate(-30px,-45px) rotate(-4deg);} }
#next-step .motion-closing-enter { animation:home-closing-enter .55s ease-out both; }
@keyframes home-closing-enter { from {opacity:.35;transform:translateY(16px);} to {opacity:1;transform:none;} }
.v2-page:has(> .v2-hero) #next-step.motion-closing-scroll { overflow:hidden; }
#next-step.motion-closing-scroll > .v2-container { transform:translateY(var(--closing-copy-y,0px)); }
#next-step.motion-closing-scroll:focus-within > .v2-container { transform:none; }
#next-step.motion-closing-scroll .home-glass-composite { transform:translateY(var(--closing-art-y,0px)) scale(var(--closing-art-scale,1)); transform-origin:center bottom; }
@media(prefers-reduced-motion:reduce),print {
 .motion-symbol-fallback .motion-symbol-svg g[filter],
 #next-step.motion-closing-scroll > .v2-container,
 #next-step.motion-closing-scroll .home-glass-composite { transform:none!important; }
}
.v2-page:has(> .v2-hero) #next-step .closing-link a { transition:transform .2s ease,box-shadow .2s ease; }
.v2-page:has(> .v2-hero) #next-step .closing-link a:focus-visible { outline:2px solid white; outline-offset:5px; }
@media(hover:hover) and (pointer:fine) {
 .v2-page:has(> .v2-hero) .v2-problem:hover { transform:scale(1.012); z-index:1; box-shadow:0 18px 35px #0006; }
 .v2-page:has(> .v2-hero) .v2-problem:hover::after { opacity:1; }
 .v2-page:has(> .v2-hero) .v2-problem:hover .home-card-image img { transform:scale(1.1); }
 .v2-page:has(> .v2-hero) #next-step .closing-link a:hover { transform:translateY(-3px); box-shadow:0 5px 0 color-mix(in srgb,var(--int-lilac) 25%,transparent),inset 0 0 0 1px var(--int-lilac); }
}
@media(prefers-reduced-motion:reduce) {
 .motion-heading-source { opacity:1; }
 .motion-heading-visible { display:none; }
 .motion-tabs button,.v2-page:has(> .v2-hero) .v2-problem,.v2-page:has(> .v2-hero) .home-card-image img { transition:none; }
 .v2-page:has(> .v2-hero) .v2-problem .home-card-image img { transform:none!important; }
 .v2-page:has(> .v2-hero) .v2-problem { transform:none!important; }
 .v2-page:has(> .v2-hero) .v2-problem::after { transition:none; }
 .motion-panels > :not([hidden]):not(.motion-measuring) { animation:none; }
 .motion-symbol-svg g[filter] { animation:none; transform:none; }
 #next-step .motion-closing-enter { animation:none; transform:none; opacity:1; }
 .v2-page:has(> .v2-hero) #next-step .closing-link a { transition:none; transform:none!important; }
}
@media print {
 .v2-page:has(> .v2-hero) .v2-problem::after { display:none; }
 .v2-page:has(> .v2-hero) .v2-problem { transform:none!important; box-shadow:none!important; }
 .home-glass-composite .home-glass-layer { display:none!important; }
 .home-glass-composite img { visibility:visible!important; }
 .motion-heading-source { opacity:1; }
 .motion-heading-visible { display:none; }
 .motion-tabs { display:none; }
 .motion-panels > [hidden] { display:block!important; }
 .motion-panels > :not([hidden]):not(.motion-measuring) { animation:none; }
 .motion-symbol-svg g[filter] { animation:none; transform:none; }
 #next-step .motion-closing-enter { animation:none; transform:none; opacity:1; }
}
/* Approved Home review trial: full-width process navigation, native fallback retained. */
.v2-page:has(> .v2-hero) #approach .v2-container:has(.motion-engine) { display:block; }
.v2-page:has(> .v2-hero) #approach:has(.motion-engine) h2 { max-width:none; }
.v2-page:has(> .v2-hero) #approach .motion-engine { margin-top:44px; }
#approach .motion-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; border-bottom:1px solid #ffffff40; }
#approach .motion-tabs button { text-align:left; border:0; border-bottom:3px solid transparent; padding:22px 18px; font-size:clamp(18px,2vw,26px); font-weight:400; color:white; min-width:0; }
#approach .motion-tabs button::before { content:attr(data-step); display:block; margin-bottom:18px; font-size:14px; font-weight:600; color:var(--int-lilac); }
#approach .motion-tabs button[aria-selected="true"] { background:color-mix(in srgb,var(--int-lilac) 10%,transparent); border-bottom-color:var(--int-lilac); color:var(--int-lilac); }
#approach .motion-tabs button:hover { background:color-mix(in srgb,var(--int-lilac) 7%,transparent); }
#approach .motion-panels { margin-top:40px; }
@media print { #approach .motion-tabs { display:none; } }
.v2-page:has(> .v2-hero) #approach .motion-panels > .process-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; padding:12px 0 32px; }
.v2-page:has(> .v2-hero) #approach .motion-panels h3 { font-size:var(--int-heading-font-size,clamp(30px,3.5vw,48px)); margin:0; }
.v2-page:has(> .v2-hero) #approach .motion-panels p { margin:0; font-size:var(--int-paragraph-font-size,clamp(19px,2vw,25px)); max-width:38ch; }
@media(max-width:600px) {
 #approach .motion-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #approach .motion-tabs button { padding:18px 12px; }
 .v2-page:has(> .v2-hero) #approach .motion-panels > .process-card { grid-template-columns:minmax(0,1fr); gap:20px; }
}