/* A keeps the original sections outside this scope. Within it, :scope is the document root. */
@scope (:root) to (:scope[data-direction=presence] :is(#avatars,#why,#how,#system-proof,#pricing,#closing,footer)){
/* One clean visual language; three compositions. */
:scope{--canvas:#faf8f3;--ink:#25231c;--muted:#646158;--rule:#dedbd4;--accent:#254ebc;--soft:#f1f0eb;--blue-wash:#edf1f9;--review-height:0px;--section-space:64px;--section-space-compact:48px}
:scope{scroll-padding-top:calc(var(--review-height) + 12px)}
body{padding-top:var(--review-height);background:var(--canvas);font-family:Archivo,sans-serif}
.site-shell{background:var(--canvas);color:var(--ink)}
.site-shell *{min-width:0}
.site-nav{position:relative!important;inset:auto!important;max-width:1440px;margin:auto;min-height:92px}
.toda-brand{gap:14px!important}.toda-brand-word{font:500 31px/1 Archivo,sans-serif!important;letter-spacing:-.04em!important}
.site-nav .toda-btn-sm{font-size:13px!important;padding:12px 21px!important}
#top,main>section{scroll-margin-top:calc(var(--review-height) + 12px)}
.toda-page-shell{max-width:1240px!important}
main>section{background:var(--canvas)!important}
main h2{font:500 clamp(38px,4.4vw,62px)/1.06 Archivo,sans-serif!important;letter-spacing:-.05em!important;color:var(--ink)!important}
main h2 em{font-family:inherit!important;font-weight:inherit!important;font-style:normal!important;color:var(--accent)!important}
.toda-section-statement{color:var(--ink)!important;letter-spacing:inherit!important}
.toda-section-kicker,#interaction .toda-proof-grid>div:first-child>span{color:var(--muted)!important;font:600 11px/1.5 Archivo,sans-serif!important;letter-spacing:.11em!important}
.toda-section-kicker::before{display:none}
.toda-cc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);align-items:center;gap:44px;padding:30px var(--page-gutter) 65px;max-width:1440px;min-height:650px;margin:auto;background:var(--canvas);isolation:isolate}
.clean-hero-copy{display:flex;flex-direction:column;gap:28px;position:relative;z-index:2}
.toda-cc-h1{display:flex;flex-direction:column;width:100%;margin:0;text-align:left}
.toda-hero-panel{order:0}
.toda-hero-title{font:500 clamp(54px,5.3vw,78px)/1.055 Archivo,sans-serif;letter-spacing:-.055em;text-wrap:balance}
.toda-hero-title-item{align-self:end}
.toda-hero-keyword{background:none!important;color:var(--accent)!important}
.toda-hero-selector{order:1;margin:10px 0 0;width:100%;padding-top:30px}
.toda-eyebrow-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;animation:none}
.toda-eyebrow{min-height:46px;justify-content:flex-start;padding:10px 14px;font:500 10px/1.4 Archivo,sans-serif;letter-spacing:.025em;color:var(--muted);background:transparent;border:1px solid transparent;box-shadow:none;text-align:left}
.toda-eyebrow::before{width:4px;height:4px;opacity:.6}
.toda-eyebrow[aria-selected=true]{color:var(--accent);background:#fff;border-color:#cad5eb;box-shadow:0 2px 8px #25231c04}
.toda-eyebrow[aria-selected=true]::before{box-shadow:none}
.toda-eyebrow:hover{border-color:var(--rule);background:#fff}
.toda-hero-playback{top:-10px;right:0}
.toda-hero-step,.toda-hero-toggle{color:var(--muted)}
.toda-cc-foot{align-items:flex-start}.toda-hero-ctas{justify-content:flex-start;gap:12px;width:100%}
.toda-hero-ctas .toda-cta{flex:0 1 auto;min-width:170px;max-width:none;min-height:50px;padding:13px 24px;font:500 15px/1.4 Archivo,sans-serif;color:var(--accent);background:var(--canvas);border:1px solid #cbd5ea;box-shadow:none}
.toda-hero-ctas .toda-cta:first-child{background:var(--accent);border-color:var(--accent);color:#fff}
.clean-portrait{position:relative;height:570px;width:100%;pointer-events:none;z-index:0}
.clean-portrait .toda-cc-vid{position:absolute;inset:0;width:100%;height:100%;max-width:100%;transform:none;object-fit:cover;object-position:center top;mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 58%,transparent 100%),linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.concept-disclosure{margin-top:24px;color:var(--muted);font-size:12px;line-height:1.6}
.toda-marquee{background:var(--canvas);border:0;padding:22px 0}
.toda-marquee-track{animation:none!important;justify-content:center;transform:none!important;gap:0!important;width:100%!important}
.toda-marquee .grp{gap:30px;flex-wrap:wrap;justify-content:center;padding:0 24px}
.toda-marquee .grp[aria-hidden=true]{display:none}.toda-marquee span{font-size:11px!important;letter-spacing:.02em!important;color:var(--muted)!important}.toda-marquee i{color:var(--muted)!important}
/* The live product surface is the first section after every Hero. */
#interaction{background:var(--paper)!important}
.toda-proof-grid{gap:90px;align-items:center}
.toda-proof-grid>div:first-child>p{color:var(--muted)!important;font-size:17px!important;line-height:1.65!important}
.toda-live-demo{border-radius:24px;border:1px solid var(--rule);background:var(--canvas)!important;box-shadow:0 16px 50px -42px #25231c44}
.toda-live-demo *{font-family:Archivo,sans-serif}
.toda-demo-consent .toda-demo-legal{color:#55524b}
#avatar{max-width:100%}
/* The selected WHY copy is imported unchanged. */
.why-choice{color:var(--ink)}
.why-choice h2{margin:20px 0 44px;max-width:880px}
.why-choice h2 span{color:var(--accent)}
.why-matrix{border-block:1px solid var(--rule)}
.why-row{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr))}
.why-row+.why-row{border-top:1px solid var(--rule)}
.why-row>div{padding:28px 24px;min-width:0}
.why-row>div:first-child{padding-left:0;padding-right:38px}
.why-row>[role=cell]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.why-head>div{font:600 13px/1.5 Archivo,sans-serif;text-align:center;padding-block:19px}
.why-head>div:first-child{text-align:left}
.why-head sup{margin-left:2px}
.why-row .mesh-cell{background:var(--blue-wash);color:var(--accent)}
.why-row h3{font:500 clamp(22px,2vw,27px)/1.25 Archivo,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.why-row .row-num{display:block;margin-bottom:12px;font:500 11px/1 Archivo,sans-serif;color:var(--muted)}
.why-row .row-benefit{display:block;margin-top:10px;font:400 15px/1.55 Archivo,sans-serif;color:var(--muted)}
.why-row .result{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:400 27px/1 Archivo,sans-serif;background:#eeece6;color:var(--muted)}
.why-row .yes{background:#e0e7f5;color:var(--accent)}
.why-row .answer{max-width:230px;font:500 14px/1.5 Archivo,sans-serif}
.why-scope{margin-top:20px;max-width:920px;font:400 12px/1.65 Archivo,sans-serif;color:var(--muted)}
/* Concepts have room to be seen; the featured story carries the hierarchy. */
#uses{padding-top:var(--section-space)!important}
.toda-scenes{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.toda-scene{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.toda-scene-art{aspect-ratio:1.5;background:#f0ede7;border:1px solid var(--rule);border-radius:18px;overflow:hidden}
.toda-scene-art>img:first-child{object-fit:contain}
.toda-scene:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:60px;margin-bottom:16px}
.toda-scene:first-child .toda-scene-art{aspect-ratio:1.4}
.toda-scene-copy{padding:26px 0 0}
.toda-scene:first-child .toda-scene-copy{padding:0}
.toda-scene-copy h3{font:500 clamp(26px,2.6vw,36px)/1.13 Archivo,sans-serif;letter-spacing:-.035em;margin-bottom:16px;text-wrap:balance}
.toda-scene-copy p{font-size:16px;line-height:1.65;max-width:510px;color:var(--muted)}
.toda-scene-num{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--muted);margin-bottom:16px}
/* Mechanism and pricing remain light, with blue reserved for useful emphasis. */
#system-proof{background:var(--soft)!important}
.toda-system-intro>p,.toda-system-summary,.toda-pricing-head>p,.toda-pricing-status,.toda-pricing-lanes-note,.toda-pricing-notes,.toda-pricing-enterprise-note{color:var(--muted)}
.toda-system-intro>p{font-size:17px;line-height:1.6}
.toda-system-summary strong{color:var(--ink)}
.toda-system-card{border:1px solid var(--rule);border-radius:18px;background:var(--canvas);box-shadow:none;padding:34px;min-height:235px}
.toda-system-card.is-mesh{background:#e8edf6;border-color:#ccd6e7;box-shadow:none}
.toda-system-card.is-mesh h3{color:var(--ink)}.toda-system-card.is-mesh>p{color:#55524b}
.toda-system-card>p{font-size:17px;line-height:1.6}
.toda-system-card.is-mesh .toda-btn-on-dark{background:var(--accent);color:#fff;font-size:14px!important}
.toda-pricing-lane{border:0;border-top:1px solid var(--rule);border-radius:0;background:transparent;padding:32px 0;box-shadow:none}
.toda-pricing-lanes{gap:64px}
.toda-pricing-lane h3{color:var(--muted);font-size:14px}
.toda-pricing-lane h4{font:500 clamp(28px,2.5vw,36px)/1.14 Archivo,sans-serif;letter-spacing:-.035em}
.toda-pricing-lane-benefits strong,.toda-pricing-lane-benefits p,.toda-pricing-lane-description{font-size:16px;line-height:1.6}
.toda-pricing-lane-cta,.toda-pricing-cta{font-size:14px;min-height:48px;font-weight:500}
.toda-pricing-lanes-note{font-size:13px}
.toda-pricing-standard-heading{font-family:Archivo,sans-serif;font-size:28px;letter-spacing:-.025em;margin-top:40px}
.toda-pricing-option{border-radius:16px;box-shadow:none;background:#fff;padding:28px 24px}
.toda-pricing-option h3{font:500 24px Archivo,sans-serif;letter-spacing:-.02em}
.toda-pricing-summary{font-size:15px;min-height:68px;line-height:1.6}
.toda-pricing-price{font:500 43px/1 Archivo,sans-serif;letter-spacing:-.045em;min-height:60px}
.toda-pricing-price small{font-size:14px;letter-spacing:0}
.toda-pricing-list li{font-size:15px}.toda-pricing-list-label{font-size:13px}.toda-pricing-list{gap:14px}
.toda-pricing-notes,.toda-pricing-enterprise-note{font-size:14px;line-height:1.6}
#closing{border-top:1px solid var(--rule);padding-block:110px!important}
#closing>div{max-width:1040px!important}
#closing h2{font-size:clamp(46px,5.5vw,78px)!important;letter-spacing:-.055em!important}
#closing p{color:var(--muted)!important}
#closing .toda-btn,#closing .toda-btn-ghost{font-size:15px!important;min-height:50px}
footer{background:var(--canvas)!important;border-top:1px solid var(--rule);color:var(--ink)!important}
footer>div{max-width:1240px!important}
footer>div:first-child>div:first-child>div:first-child{font:500 42px/1 Archivo,sans-serif!important;color:var(--ink)!important;letter-spacing:-.045em;margin-bottom:20px!important}
footer a,footer p,footer>div:last-child{color:var(--muted)!important}
footer>div:first-child>div:first-child>div:not(:first-child){color:var(--muted)!important}
:scope.has-js .reveal,:scope.has-js .hero-in{opacity:1;transform:none;animation:none}
/* A — Original clean Hero, followed by the balanced body. */
:scope[data-direction=presence] .site-nav{position:absolute!important;inset:var(--review-height) 0 auto!important;max-width:none;min-height:0;padding:22px var(--page-gutter)!important}
:scope[data-direction=presence] .site-nav .toda-brand{gap:24px!important}
:scope[data-direction=presence] .site-nav .toda-brand-word{font:500 36px/1 var(--sans)!important;letter-spacing:-.011em!important}
:scope[data-direction=presence] .site-nav .toda-btn-sm{font-size:15px!important;padding:11px 22px!important}
:scope[data-direction=presence] .toda-cc{--portrait-top:72px;--portrait-height:860px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:24px;max-width:none;min-height:100vh;min-height:100svh;margin:0;padding:clamp(426px,48svh,516px) var(--page-gutter) 24px}
/* These wrappers carry the alternative compositions; A uses the original flow. */
:scope[data-direction=presence] .clean-portrait,:scope[data-direction=presence] .clean-hero-copy{display:contents}
:scope[data-direction=presence] .clean-portrait .toda-cc-vid{inset:var(--portrait-top) auto auto 50%;width:574px;height:var(--portrait-height);max-width:none;transform:translateX(-50%);object-fit:contain;mask-image:linear-gradient(to bottom,#000 0%,#000 28%,rgba(0,0,0,.3) 48%,transparent 88%)}
:scope[data-direction=presence] .toda-cc::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent 310px,rgba(250,248,243,.5) 426px,rgba(250,248,243,.75) 546px,transparent 800px)}
:scope[data-direction=presence] .toda-cc-h1{display:block;width:min(1060px,100%);margin:0 auto;text-align:center}
:scope[data-direction=presence] .toda-hero-title{max-width:none;margin:0;font:500 clamp(44px,4.1vw,64px)/1.12 var(--sans);letter-spacing:-.035em;text-wrap:balance}
:scope[data-direction=presence] .toda-hero-title-item{align-self:start}
:scope[data-direction=presence] .toda-hero-line{display:inline}
@supports (background-clip:text){
 :scope[data-direction=presence] .toda-hero-keyword{background:linear-gradient(110deg,var(--green-700) 10%,var(--action) 50%,#5c83d4 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important}
}
:scope[data-direction=presence] .toda-hero-selector{width:min(1040px,100%);margin:24px auto 12px;padding:0}
:scope[data-direction=presence] .toda-hero-panel{order:1}
:scope[data-direction=presence] .toda-hero-playback{top:-42px}
:scope[data-direction=presence] .toda-eyebrow-stage{display:flex;justify-content:center;align-items:center;gap:12px;max-width:none}
:scope[data-direction=presence] .toda-eyebrow{flex:0 1 auto;justify-content:center;text-align:center;min-height:40px;padding:8px 15px;font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.055em;color:var(--muted);background:var(--paper);border:1px solid var(--stone-200);white-space:nowrap}
:scope[data-direction=presence] .toda-eyebrow::before{width:5px;height:5px;opacity:.3}
:scope[data-direction=presence] .toda-eyebrow[aria-selected=true]{color:var(--ink);border-color:var(--action-line);box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 5%,transparent),0 0 22px color-mix(in srgb,var(--green-400) 28%,transparent)}
:scope[data-direction=presence] .toda-eyebrow[aria-selected=true]::before{background:var(--action);opacity:1;box-shadow:0 0 7px var(--green-400)}
:scope[data-direction=presence] .toda-eyebrow:hover{color:var(--ink);border-color:var(--action-line)}
:scope[data-direction=presence] .toda-cc-foot{align-items:center}
:scope[data-direction=presence] .toda-hero-ctas{width:min(600px,100%);justify-content:center;gap:14px}
:scope[data-direction=presence] .toda-hero-ctas .toda-cta{flex:1;max-width:230px;min-width:0;min-height:54px;padding:13px 24px;font:600 17px/1.4 var(--sans);background:var(--paper);color:var(--green-700);border-color:var(--action-line);box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 4%,transparent),0 6px 24px color-mix(in srgb,var(--green-400) 22%,transparent)}
@media(min-width:1101px){:scope[data-direction=presence] .toda-cc-h1{width:min(1400px,100%)}}
@media(max-width:1100px) and (min-width:601px){:scope[data-direction=presence] .toda-cc{padding-top:426px}:scope[data-direction=presence] .toda-hero-title{font-size:clamp(42px,5.1vw,56px)}}
/* A's body shares one outer measure and two equal columns. The Hero keeps its own center. */
:scope[data-direction=presence]{--body-gap:clamp(32px,5vw,64px)}
:scope[data-direction=presence] main h2{font-size:clamp(34px,3.6vw,52px)!important;line-height:1.1!important}
:scope[data-direction=presence] .toda-proof-grid,
:scope[data-direction=presence] .toda-scenes,
:scope[data-direction=presence] .toda-scene:first-child,
:scope[data-direction=presence] #system-proof>.toda-page-shell,
:scope[data-direction=presence] .toda-pricing-head,
:scope[data-direction=presence] .toda-pricing-lanes,
:scope[data-direction=presence] #closing>div,
:scope[data-direction=presence] footer>div:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--body-gap)}
:scope[data-direction=presence] .toda-proof-grid{row-gap:36px}
:scope[data-direction=presence] .toda-live-demo{width:100%;max-width:none;margin:0}
:scope[data-direction=presence] #why .toda-section-kicker,
:scope[data-direction=presence] #why h2{text-align:left}
:scope[data-direction=presence] #why h2 span{color:inherit}
:scope[data-direction=presence] .why-row{grid-template-columns:calc((100% + var(--body-gap))/2) repeat(2,minmax(0,1fr))}
:scope[data-direction=presence] .why-row>div:first-child{padding-right:var(--body-gap)}
:scope[data-direction=presence] #uses .toda-section-heading{max-width:880px!important;text-align:left;align-items:flex-start}
:scope[data-direction=presence] .toda-scenes{row-gap:48px}
:scope[data-direction=presence] .toda-scene:first-child{margin-bottom:0}
:scope[data-direction=presence] .toda-scene:first-child .toda-scene-art{aspect-ratio:1.5}
:scope[data-direction=presence] #system-proof>.toda-page-shell{row-gap:24px;align-items:start}
:scope[data-direction=presence] .toda-system-intro{grid-row:span 2;margin:0;text-align:left}
:scope[data-direction=presence] .toda-system-grid{grid-template-columns:1fr;gap:20px}
:scope[data-direction=presence] .toda-system-card{min-height:0;padding:30px}
:scope[data-direction=presence] .toda-system-summary{margin:0}
:scope[data-direction=presence] .toda-pricing-head{margin-bottom:44px}
:scope[data-direction=presence] #closing>div{max-width:1240px!important;text-align:left;row-gap:24px}
:scope[data-direction=presence] #closing h2{grid-row:span 2;margin:0!important;font-size:clamp(34px,3.6vw,52px)!important}
:scope[data-direction=presence] #closing p{align-self:end;margin:0!important}
:scope[data-direction=presence] #closing>div>div{justify-content:flex-start!important;align-self:start}
:scope[data-direction=presence] footer>div:first-child{display:grid!important;row-gap:32px!important;column-gap:var(--body-gap)!important}
/* B — Balance. Product-sized portrait and a compact, legible group of actions. */
:scope[data-direction=balance] #system-proof>.toda-page-shell{display:grid;grid-template-columns:1fr 1fr;gap:28px 80px}
:scope[data-direction=balance] .toda-system-intro{grid-row:span 2;margin:0}
:scope[data-direction=balance] .toda-system-grid{grid-template-columns:1fr;gap:18px}
:scope[data-direction=balance] .toda-system-summary{margin:0}
:scope[data-direction=balance] .toda-system-card{min-height:0;padding:28px}
/* C — Flow. Studio's broad type and full-width selector, in the clean palette. */
:scope[data-direction=flow] .toda-cc{grid-template-columns:1.4fr .8fr;align-items:center;gap:12px 36px;padding-top:30px;padding-bottom:60px}
:scope[data-direction=flow] .clean-hero-copy,:scope[data-direction=flow] #heroStory{display:contents}
:scope[data-direction=flow] .toda-hero-panel{grid-column:1;grid-row:1;align-self:center;padding-bottom:65px}
:scope[data-direction=flow] .toda-hero-title{font-size:clamp(58px,5.9vw,86px);letter-spacing:-.06em;line-height:1.02;text-wrap:initial}
:scope[data-direction=flow] .clean-portrait{grid-column:2;grid-row:1;height:560px;align-self:end;top:24px}
:scope[data-direction=flow] .toda-hero-selector{grid-row:2;grid-column:1/-1;margin:0;padding-top:28px}
:scope[data-direction=flow] .toda-eyebrow-stage{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
:scope[data-direction=flow] .toda-eyebrow{border-radius:0;border:0;border-top:1px solid var(--rule);padding:14px 0;background:transparent;font-size:10px}
:scope[data-direction=flow] .toda-eyebrow[aria-selected=true]{border-top-color:var(--accent);box-shadow:none}
:scope[data-direction=flow] .toda-cc-foot{grid-row:3;grid-column:1/-1;margin-top:16px}
:scope[data-direction=flow] #why>.toda-page-shell{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.7fr);grid-template-rows:min-content 1fr auto;gap:20px 58px}
:scope[data-direction=flow] #why .toda-section-kicker{grid-column:1;grid-row:1;align-self:end}
:scope[data-direction=flow] #why h2{grid-column:1;grid-row:2;margin:0;font-size:48px!important;align-self:start}
:scope[data-direction=flow] .why-matrix{grid-column:2;grid-row:1/span 2}
:scope[data-direction=flow] .why-scope{grid-column:2}
:scope[data-direction=flow] .why-row>div{padding:24px 16px}
:scope[data-direction=flow] .why-row>div:first-child{padding-left:0;padding-right:20px}
:scope[data-direction=flow] .why-row h3{font-size:22px}
:scope[data-direction=flow] .why-row .answer{font-size:13px}
:scope[data-direction=flow] .toda-scenes{display:flex;flex-direction:column;gap:65px}
:scope[data-direction=flow] .toda-scene,:scope[data-direction=flow] .toda-scene:first-child{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:70px;margin:0}
:scope[data-direction=flow] .toda-scene:nth-child(2){grid-template-columns:.8fr 1.2fr}
:scope[data-direction=flow] .toda-scene:nth-child(2) .toda-scene-art{order:2}
:scope[data-direction=flow] .toda-scene-copy{padding:0}
:scope[data-direction=flow] #closing>div{display:grid;grid-template-columns:1.2fr .8fr;gap:20px 70px;max-width:1240px!important;text-align:left}
:scope[data-direction=flow] #closing h2{grid-row:span 2;margin:0!important;font-size:64px!important}
:scope[data-direction=flow] #closing p{align-self:end;margin:0!important}
:scope[data-direction=flow] #closing>div>div{justify-content:flex-start!important;align-self:start}
@media(max-width:1100px){
 :scope[data-direction=presence] .toda-eyebrow-stage{gap:8px}
 :scope[data-direction=presence] .toda-eyebrow{padding-inline:9px}
 .toda-cc{gap:24px;min-height:600px}.toda-hero-title{font-size:58px}.clean-portrait{height:490px}
 .toda-hero-ctas .toda-cta{min-width:150px;padding:12px 18px;font-size:14px}
 .toda-eyebrow{font-size:9px;padding-inline:8px}
 .toda-proof-grid{gap:50px}.toda-scene:first-child{gap:35px}.toda-pricing-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 :scope[data-direction=flow] .toda-hero-title{font-size:64px}:scope[data-direction=flow] .clean-portrait{height:500px}
 :scope[data-direction=flow] #why>.toda-page-shell{display:block}:scope[data-direction=flow] #why h2{font-size:54px!important;margin:20px 0 40px}
 :scope[data-direction=flow] .toda-scene,:scope[data-direction=flow] .toda-scene:first-child{gap:36px}
 :scope[data-direction=balance] #system-proof>.toda-page-shell{gap:28px 40px}
}
@media(max-width:1000px){
 :scope[data-direction=presence] .toda-eyebrow-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;margin-inline:auto;gap:12px}
}
@media(max-width:800px){
 :scope{--section-space:56px;--section-space-compact:40px}
 .site-nav{min-height:78px}.toda-navlink-hide{display:none!important}
 .toda-cc{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding-top:20px;padding-bottom:45px;gap:20px;min-height:580px}
 .toda-hero-title{font-size:48px}.clean-portrait{height:450px}
 .toda-hero-ctas{gap:8px}.toda-hero-ctas .toda-cta{min-width:0;flex:1;padding-inline:12px;font-size:13px}
 .toda-eyebrow-stage{grid-template-columns:1fr;gap:2px}.toda-eyebrow{min-height:40px}
 .toda-hero-selector{margin-top:18px}
 .toda-proof-grid{gap:35px}.toda-scenes{gap:26px}.toda-scene:first-child{gap:28px}
 .toda-scene-copy h3{font-size:28px}.toda-scene-copy p{font-size:15px}
 .why-row>div{padding:24px 16px}.why-row>div:first-child{padding-right:24px}.why-row .answer{font-size:13px}
 .toda-pricing-lanes{grid-template-columns:1fr;gap:10px}
 :scope[data-direction=presence] .toda-proof-grid,
 :scope[data-direction=presence] .toda-scene:first-child,
 :scope[data-direction=presence] #system-proof>.toda-page-shell,
 :scope[data-direction=presence] .toda-pricing-head,
 :scope[data-direction=presence] .toda-pricing-lanes,
 :scope[data-direction=presence] #closing>div,
 :scope[data-direction=presence] footer>div:first-child{grid-template-columns:minmax(0,1fr);row-gap:32px}
 :scope[data-direction=presence] .toda-system-intro,:scope[data-direction=presence] #closing h2{grid-row:auto}
 :scope[data-direction=presence] .toda-live-demo{max-width:480px;justify-self:center}
 :scope[data-direction=presence] .toda-scene:first-child .toda-scene-copy{padding:0}
 :scope[data-direction=presence] .why-row{grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr))}
 :scope[data-direction=presence] .toda-pricing-lanes{row-gap:0}
 :scope[data-direction=balance] #system-proof>.toda-page-shell{display:block}
 :scope[data-direction=balance] .toda-system-intro{margin-bottom:36px}
 :scope[data-direction=balance] .toda-system-summary{margin-top:24px}
 :scope[data-direction=flow] .toda-hero-title{font-size:54px}:scope[data-direction=flow] .clean-portrait{height:460px}
 :scope[data-direction=flow] .toda-eyebrow-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px}
 :scope[data-direction=flow] #closing>div{gap:24px 36px}:scope[data-direction=flow] #closing h2{font-size:48px!important}
}
@media(max-width:600px){
 :scope{--page-gutter:22px;--section-space:48px;--section-space-compact:32px}
 .site-nav{padding:20px 22px!important;min-height:76px}.toda-brand{gap:10px!important}.toda-brand-word{font-size:25px!important}.site-nav .toda-brand img{width:30px!important;height:30px!important}.site-nav .toda-btn-sm{font-size:11px!important;padding:11px 12px!important}
 .toda-cc{display:flex;flex-direction:column;gap:0;padding:30px 22px 38px;min-height:0}
 .clean-hero-copy{gap:22px;width:100%}.toda-hero-title{font-size:clamp(42px,11vw,58px);line-height:1.07;letter-spacing:-.045em}
 .toda-hero-selector{margin-top:16px;padding-top:28px}.toda-eyebrow-stage{display:flex;flex-direction:column;gap:2px;align-items:stretch}.toda-eyebrow{font-size:10px;min-height:44px;padding:10px 14px}
 .toda-hero-ctas .toda-cta{flex:1;min-width:0;min-height:48px;font-size:13px;padding:12px}
 .clean-portrait{width:290px;height:385px;order:-1;margin-top:-32px;margin-bottom:-30px;align-self:center}
 .clean-portrait .toda-cc-vid{mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 48%,transparent 94%),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
 main h2{font-size:39px!important}.toda-section-heading{gap:18px}
 .toda-marquee .grp{gap:12px 22px}.toda-marquee span{font-size:10px!important}.toda-marquee i{display:none}
 .toda-proof-grid{gap:32px}.toda-live-demo{width:100%;max-width:480px;margin:auto;border-radius:20px}.toda-demo-preview{max-width:100%}
 .why-choice h2{margin:20px 0 32px}.why-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .why-row>[role=rowheader]{grid-column:1/-1;padding:24px 0 20px}
 .why-head>div:first-child{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0}
 .why-row>div{padding:20px 12px}.why-head>div{font-size:12px}
 .why-row h3{font-size:24px}.why-row .row-num{margin-bottom:10px}.why-row .row-benefit{font-size:14px;margin-top:10px}
 .why-row .answer{font-size:13px}.why-row>[role=cell]{padding-bottom:24px;gap:12px}
 .toda-scenes{display:flex;flex-direction:column;gap:42px}
 .toda-scene:first-child{display:block;margin:0}.toda-scene-copy,.toda-scene:first-child .toda-scene-copy{padding:24px 0 0}
 .toda-scene-copy h3{font-size:30px}.toda-scene-art,.toda-scene:first-child .toda-scene-art{aspect-ratio:1.5;border-radius:14px}
 .toda-system-grid{grid-template-columns:1fr}.toda-system-card{padding:28px;min-height:0}
 .toda-pricing-head{grid-template-columns:1fr;gap:22px}.toda-pricing-head h2{font-size:40px!important}
 .toda-pricing-lanes{gap:0}.toda-pricing-lane{padding:30px 0}.toda-pricing-options{grid-template-columns:1fr;gap:20px}
 .toda-pricing-option{min-height:0}.toda-pricing-summary{min-height:0}.toda-pricing-standard-heading{font-size:26px}
 #closing{padding-block:72px!important}#closing h2{font-size:47px!important}#closing .toda-btn,#closing .toda-btn-ghost{width:100%;justify-content:center}
 footer>div:first-child{gap:32px!important}
 :scope[data-direction=presence] .toda-cc{--portrait-top:80px;--portrait-height:720px;min-height:0;padding:344px var(--page-gutter) 24px;gap:20px}
 :scope[data-direction=presence] .clean-portrait .toda-cc-vid{width:480px;mask-image:linear-gradient(to bottom,#000 0%,#000 22%,rgba(0,0,0,.25) 36%,transparent 61%)}
 :scope[data-direction=presence] .toda-cc::before{background:linear-gradient(to bottom,transparent 244px,rgba(250,248,243,.45) 322px,rgba(250,248,243,.9) 442px,transparent 632px)}
 :scope[data-direction=presence] .toda-hero-title{font-size:clamp(36px,9.8vw,44px);line-height:1.15}
 :scope[data-direction=presence] .toda-eyebrow-stage{display:flex;flex-direction:column;align-items:center;gap:8px}
 :scope[data-direction=presence] .toda-eyebrow{width:auto;min-height:44px;white-space:normal;padding:8px 16px;font-size:10px}
 :scope[data-direction=presence] .toda-hero-ctas{gap:10px}
 :scope[data-direction=presence] .toda-hero-ctas .toda-cta{flex:1;min-height:50px;padding:12px 10px;font-size:14px}
 :scope[data-direction=presence] .toda-hero-selector{margin:16px auto 8px}
 :scope[data-direction=presence] .why-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 :scope[data-direction=presence] .why-row>div:first-child{padding-right:0}
 :scope[data-direction=presence] .toda-scenes{display:flex;gap:42px}
 :scope[data-direction=presence] .toda-scene:first-child{row-gap:24px}
 :scope[data-direction=presence] .toda-system-card{padding:28px}
 :scope[data-direction=presence] main h2,:scope[data-direction=presence] #closing h2{font-size:clamp(30px,8.7vw,36px)!important}
 :scope[data-direction=flow] .toda-cc{display:flex;padding:30px 22px 48px;gap:22px}
 :scope[data-direction=flow] .toda-hero-panel{order:0;width:100%;padding:0}
 :scope[data-direction=flow] .toda-hero-title{font-size:clamp(43px,11.6vw,60px);line-height:1.04;letter-spacing:-.05em}
 :scope[data-direction=flow] .clean-portrait{order:1;top:0;width:300px;max-width:100%;height:360px;margin:-10px auto -45px;align-self:center}
 :scope[data-direction=flow] .toda-hero-selector{order:2;width:100%;margin:0}
 :scope[data-direction=flow] .toda-eyebrow-stage{display:flex;gap:0}
 :scope[data-direction=flow] .toda-cc-foot{order:3;width:100%;margin-top:0}
 :scope[data-direction=flow] #why h2{font-size:39px!important;margin:20px 0 32px}
 :scope[data-direction=flow] .why-row>[role=rowheader]{padding:24px 0 20px}
 :scope[data-direction=flow] .why-row h3{font-size:24px}
 :scope[data-direction=flow] .toda-scenes{gap:42px}
 :scope[data-direction=flow] .toda-scene,:scope[data-direction=flow] .toda-scene:first-child,:scope[data-direction=flow] .toda-scene:nth-child(2){display:flex;flex-direction:column;gap:24px;align-items:stretch}
 :scope[data-direction=flow] .toda-scene:nth-child(2) .toda-scene-art{order:0}
 :scope[data-direction=flow] .toda-scene-copy,:scope[data-direction=flow] .toda-scene:first-child .toda-scene-copy{padding:0}
 :scope[data-direction=flow] #closing>div{display:block}
 :scope[data-direction=flow] #closing h2{font-size:47px!important;margin-bottom:24px!important}
 :scope[data-direction=flow] #closing p{margin-bottom:26px!important}
}
@media(max-width:520px){
 :scope[data-direction=presence] .site-nav{padding:14px 24px!important}
 :scope[data-direction=presence] .site-nav .toda-brand{gap:18px!important}
 :scope[data-direction=presence] .site-nav .toda-brand img{width:36px!important;height:36px!important}
 :scope[data-direction=presence] .site-nav .toda-brand-word{font-size:30px!important}
}
@media(max-width:360px){
 :scope[data-direction=presence] .site-nav{padding-inline:16px!important}
 :scope[data-direction=presence] .site-nav .toda-brand{gap:10px!important}
 :scope[data-direction=presence] .site-nav .toda-brand-word{font-size:26px!important}
 :scope[data-direction=presence] .site-nav .toda-btn-sm{font-size:12px!important;padding-inline:12px!important}
 :scope[data-direction=presence] .toda-eyebrow{padding:9px 12px}
}
@media(max-height:700px) and (min-width:601px){:scope[data-direction=presence] .toda-cc{--portrait-top:72px;--portrait-height:710px;padding-top:390px;min-height:100vh;min-height:100svh}}
@media(prefers-reduced-motion:reduce){:scope{scroll-behavior:auto!important}.site-shell *{animation:none!important;transition:none!important}}
@media(forced-colors:active){.toda-hero-keyword,:scope[data-direction=presence] .toda-hero-keyword{background:none!important;color:CanvasText!important}.toda-eyebrow[aria-selected=true]{border:2px solid Highlight}.review-options button[aria-pressed=true]{outline:2px solid Highlight}}

}

/* A shares one section label across both original and revised compositions. */
[data-direction=presence] .toda-section-kicker,
[data-direction=presence] #interaction .toda-proof-grid>div:first-child>span{
 display:inline-flex!important;align-items:center;gap:10px;
 font:700 12px/1 Archivo,sans-serif!important;
 letter-spacing:.13em!important;text-transform:uppercase;
 color:#1439a6!important;
}
[data-direction=presence] .toda-section-kicker::before,
[data-direction=presence] #interaction .toda-proof-grid>div:first-child>span::before{
 content:"";display:block;width:28px;height:1px;flex:none;
 background:currentColor;opacity:.55;
}
[data-direction=presence] #uses .toda-section-heading{gap:16px}
[data-direction=presence] #why h2{margin-top:16px}

/* Same-ground handoffs use one compact gap instead of two full section pads. */
#main-content #interaction{padding-bottom:var(--section-space-compact)!important;background:var(--paper)!important}
#main-content #why{padding-top:var(--section-space-compact)!important}
#main-content #uses{padding-bottom:var(--section-space-compact)!important}
#main-content #pricing{padding-top:var(--section-space-compact)!important}