body .team-layout{align-items:start}
body .hub-stage{min-height:0;height:auto;align-self:start;justify-content:flex-start;gap:0;padding:24px 20px 22px;overflow:hidden;background:#f5f1ec;border:0;box-shadow:none;transform:none}
body .hub-stage:before{display:none}
body #hub-panel{position:relative;inset:auto;width:min(380px,100%);max-width:none;min-height:0;margin:-12px auto -30px;transform:none}
body .screen-open{position:static;display:block;width:100%;height:auto;max-width:none;margin:0;transform:none;padding:0;border:0;background:transparent;box-shadow:none;cursor:zoom-in;border-radius:6px;overflow:hidden}
body .screeny-capture{position:static;display:block;width:100%;height:auto;max-width:100%;object-fit:contain;transform:none}
body .screen-open .screeny-capture{max-height:none;aspect-ratio:auto}
body .app-capture-label{position:relative;inset:auto;margin:0;z-index:1;justify-content:center;font-size:10px;line-height:1.5}
body .capture-controls{position:relative;width:100%;max-width:none;z-index:1;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:11px;padding:0;margin:0}
body .capture-controls button{background:transparent;padding:8px 0;white-space:nowrap}
body #screen-dialog{width:min(760px,94vw);max-width:min(760px,94vw);max-height:94dvh;padding:22px;background:#f7f3ed}
body #screen-dialog-content{width:min(540px,100%);max-width:none;padding:0;margin:0 auto;transform:none}
body #screen-dialog-content .screeny-capture{max-height:none;width:100%;height:auto;object-fit:contain}
body .screen-dialog-header{position:sticky;top:-22px;z-index:2;background:#f7f3ed;padding:12px 0;margin-bottom:0}body .screen-dialog-header h2{font-size:25px}.capture-disclosure{font-size:11px;line-height:1.5}
.matching-screeny{margin:36px 0 45px;width:100%;overflow:hidden;border-radius:8px;background:#151a22}
.matching-screeny img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.matching-screeny figcaption{display:flex;justify-content:space-between;gap:20px;padding:16px 20px;font-size:10px;letter-spacing:.08em;color:#e0d9cf;border-top:1px solid #ffffff16}
.matching-screeny figcaption span{letter-spacing:0;color:#b1b9c6}
@media(max-width:760px){

 body .hub-stage{padding:18px 12px}body #hub-panel{width:min(360px,100%);margin:-6px auto -20px}body .screen-open .screeny-capture{max-height:none}body .capture-controls{font-size:10px;gap:10px}body .app-capture-label{font-size:9px}
 .matching-screeny{margin:25px 0 30px}.matching-screeny figcaption{padding:12px;font-size:8px;gap:12px;line-height:1.5}
 body #screen-dialog{padding:16px}body .screen-dialog-header{top:-16px}body .screen-dialog-header h2{font-size:22px}
}


/* A living page composition: the film contains only the Screeny device. */
.hero{background:#fff}.hero-atmosphere{opacity:0}
.screeny-showreel{position:relative;width:100%;max-width:none;margin:22px 0 0;padding:0 0 24px;background:#fff;color:var(--ink);border:0;border-radius:0;box-shadow:none;overflow:clip}
.demo-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1.06fr;align-items:center;gap:0;max-width:1320px;margin:auto;padding:0 6%;min-height:620px;background:#fff}
.demo-copy{container-type:inline-size;position:relative;z-index:2;padding:40px 0 50px;min-width:0;align-self:center}
.demo-eyebrow{display:flex;align-items:center;gap:18px;font-size:9px;line-height:1.5;font-weight:700;letter-spacing:.12em;color:#646b72;margin-bottom:26px}
#demo-count{color:#a3a5a7;font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap}
.demo-words{min-height:280px}.demo-words h2{font:750 clamp(46px,5.25vw,78px)/.98 var(--body);letter-spacing:-.055em;text-transform:uppercase;max-width:580px;overflow-wrap:normal;margin:0}
.demo-words h2 em{display:inline;color:var(--orange);font:inherit}.demo-words p{font:400 14px/1.7 var(--body);max-width:370px;color:#64707d;margin-top:28px}
.demo-copy-bottom{margin-top:25px;max-width:330px}.demo-phase{font-size:9px;line-height:1.6;letter-spacing:.06em;font-weight:650;color:#935021;display:block;min-height:15px}
.demo-progress{height:2px;width:100%;background:#ece7e2;margin-top:14px;overflow:hidden}.demo-progress>span{display:block;height:100%;background:var(--orange);transform:scaleX(var(--demo-progress,0));transform-origin:left}
.demo-device{position:relative;z-index:1;width:118%;max-width:720px;margin-left:-9%;pointer-events:none}
#sooho-demo{display:block;width:100%;height:auto;aspect-ratio:900/1018;object-fit:contain;background:#fff;border:0;border-radius:0;box-shadow:none}
.demo-court{position:absolute;pointer-events:none;z-index:0;left:-8%;top:0;width:63%;height:100%;overflow:visible;fill:none;stroke:#f37521;stroke-width:1;opacity:.13}
.demo-orbit{transform-origin:180px 300px;transform:rotate(var(--court-rotation,-14deg));transition:transform 1.2s ease}.demo-marks{stroke-width:1.5;opacity:.8}
.screeny-showreel[data-phase="concept"] .demo-court{opacity:.2}.screeny-showreel[data-phase="concept"] .demo-phase{color:#a14e14}.screeny-showreel[data-phase="concept"] .demo-progress{background:#e3e5e7}
.screeny-showreel[data-playing="true"] .demo-marks{animation:demo-marks-drift 7s ease-in-out infinite alternate}.demo-words.is-entering{animation:demo-words-enter .55s cubic-bezier(.16,1,.3,1) both}
.demo-toolbar{position:relative;z-index:3;max-width:1160px;margin:-8px auto 0;padding:0 3%;display:flex;align-items:center;gap:24px;font-size:11px;color:#68717c}
.demo-chapters{display:flex;align-items:center;gap:25px;margin-right:auto}.demo-chapters button{border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;font:600 10px var(--body);padding:10px 0;color:#89919b}.demo-chapters button[aria-pressed="true"]{color:#1f242b;border-color:var(--orange)}
.demo-play{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;min-width:106px;border:0;border-radius:0;background:transparent;padding:8px 0;font:600 10px var(--body);color:#4e5966}.demo-play-symbol{font-size:10px;min-width:12px}.demo-toolbar>a{font-size:10px;color:#7d8792;white-space:nowrap}
.demo-transcript{max-width:1160px;margin:12px auto 0;padding:0 3%;font-size:11px;line-height:1.7;color:#687486}.demo-transcript summary{font-size:10px;color:#7a838f;justify-content:flex-start;gap:7px;padding:7px 0}.demo-transcript summary:after{content:'+'}.demo-transcript[open] summary:after{content:'−'}.demo-transcript p{max-width:760px;margin:12px 0}
.demo-playback-error{max-width:1160px;margin:10px auto;padding:0 3%;font-size:12px;color:#8d3c09}
@keyframes demo-words-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes demo-marks-drift{from{transform:translate(0,0)}to{transform:translate(8px,-12px)}}
@media(min-width:1450px){.demo-stage{padding-inline:75px}.demo-words h2{font-size:78px}}
@media(max-width:760px){
 .screeny-showreel{margin-top:25px;padding-bottom:18px}.demo-stage{grid-template-columns:1fr;min-height:0;padding:0 7%;gap:0}.demo-copy{padding:24px 0 0;align-self:auto}.demo-eyebrow{font-size:8px;margin-bottom:17px;gap:15px}.demo-words{min-height:190px}.demo-words h2{font-size:clamp(39px,8.8vw,58px);max-width:600px;line-height:.99}.demo-words p{font-size:12px;line-height:1.6;margin-top:17px;max-width:320px}.demo-copy-bottom{margin-top:12px;max-width:270px}.demo-phase{font-size:8px}.demo-progress{margin-top:10px}
 .demo-device{width:104%;max-width:540px;justify-self:center;margin:0 -2%}.demo-court{left:-20%;top:0;width:105%;height:46%}.demo-toolbar{padding:0 7%;gap:14px;flex-wrap:wrap;margin-top:0}.demo-chapters{width:100%;justify-content:space-between;gap:14px;margin:0}.demo-chapters button{font-size:10px;padding:9px 0}.demo-play{justify-content:flex-start;min-width:100px}.demo-toolbar>a{margin-left:auto}.demo-transcript{padding:0 7%;margin-top:5px}.demo-transcript summary{font-size:9px}.demo-playback-error{padding:0 7%}
}
@media(max-width:360px){.demo-words h2{font-size:36px}.demo-words{min-height:192px}.demo-words p{font-size:11px}.demo-eyebrow{font-size:7px}.demo-device{margin-top:0}}
@media(prefers-reduced-motion:reduce){.demo-words.is-entering,.screeny-showreel .demo-marks{animation:none}.demo-orbit{transition:none}}
.motion-paused .demo-marks{animation-play-state:paused!important}

.demo-words h2[data-compact="true"]{font-size:clamp(40px,10cqw,68px)}
.screeny-showreel[data-playing="false"] .demo-marks,.screeny-showreel[data-playing="false"] .demo-words.is-entering{animation-play-state:paused}
.motion-paused .demo-words.is-entering{animation-play-state:paused!important}
#sooho-demo:focus{outline:none}
@media(max-width:760px){.demo-words h2[data-compact="true"]{font-size:clamp(32px,9.7cqw,50px)}}
.screeny-showreel[data-playing="false"] .demo-orbit,.motion-paused .demo-orbit{transition:none}

/* Each function has its own visual language, all driven by the film clock. */
.demo-court{opacity:0!important;transition:none}
[data-motion="brand"] .demo-court{opacity:.14!important}
.demo-orbit{transform:rotate(calc(-14deg + var(--scene-travel,.5)*10deg));transition:none}
.screeny-showreel .demo-marks{animation:none!important;transform:translateY(calc(var(--scene-travel,.5)*-14px))}
.demo-motif{position:absolute;z-index:0;pointer-events:none;left:-4%;top:0;width:59%;height:100%;overflow:visible;fill:none;stroke:var(--orange);stroke-width:1.5;opacity:.16}
.demo-motif [data-art]{display:none}
[data-motion="schedule"] [data-art="schedule"],[data-motion="rsvp"] [data-art="rsvp"],[data-motion="chat"] [data-art="chat"],[data-motion="bulletin"] [data-art="bulletin"],[data-motion="matching"] [data-art="matching"],[data-motion="discover"] [data-art="discover"],[data-motion="request"] [data-art="request"],[data-motion="review"] [data-art="review"],[data-motion="confirmed"] [data-art="confirmed"],[data-motion="share"] [data-art="share"]{display:block}
.demo-motif g,.demo-motif circle,.demo-motif rect,.demo-motif path{transform-box:fill-box;transform-origin:center}
.motif-draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--scene-draw,1))}
.motif-bold{stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.motif-accent{fill:#f3752118;stroke-width:3}
.motif-rise{transform:translateY(calc((1 - var(--scene-entry,1))*48px))}
.motif-ring{transform:scale(calc(.82 + var(--scene-entry,1)*.18));opacity:calc(.3 + var(--scene-entry,1)*.7)}
.motif-left{transform:translateX(calc((1 - var(--scene-entry,1))*-42px))}
.motif-right{transform:translateX(calc((1 - var(--scene-second,1))*42px))}
.motif-dots{opacity:var(--scene-second,1);transform:translateY(calc((1 - var(--scene-second,1))*12px))}
.motif-sheet-back{transform:rotate(calc(-3deg - var(--scene-entry,1)*8deg));opacity:.65}
.motif-sheet-front{transform:translateY(calc((1 - var(--scene-entry,1))*50px)) rotate(calc(3deg + var(--scene-travel,.5)*3deg))}
.motif-team-a{transform:translateX(calc((1 - var(--scene-entry,1))*-80px))}
.motif-team-b{transform:translateX(calc((1 - var(--scene-entry,1))*80px))}
.motif-sweep{transform-box:view-box!important;transform-origin:260px 325px!important;transform:rotate(calc(var(--scene-travel,.5)*120deg))}
.motif-pin{opacity:var(--scene-second,1);transform:scale(calc(.5 + var(--scene-second,1)*.5))}
.motif-rays{transform:scale(calc(.88 + var(--scene-second,1)*.12));opacity:var(--scene-second,1)}
.motif-nodes{opacity:var(--scene-second,1);transform:scale(calc(.9 + var(--scene-second,1)*.1))}
#demo-heading>span,#demo-heading>em{display:inline-block;opacity:var(--scene-entry,1);transform-origin:left center}
#demo-heading>em{opacity:var(--scene-second,1)}
#demo-description{opacity:var(--scene-second,1);transform:translateY(calc((1 - var(--scene-second,1))*8px))}
[data-motion="brand"] #demo-heading>span{transform:scale(calc(.95 + var(--scene-entry,1)*.05))}
[data-motion="brand"] #demo-heading>em{transform:scale(calc(.95 + var(--scene-second,1)*.05))}
[data-motion="schedule"] #demo-heading>span{transform:translateY(calc((1 - var(--scene-entry,1))*28px));clip-path:inset(0 0 0 0)}
[data-motion="schedule"] #demo-heading>em{transform:translateY(calc((1 - var(--scene-second,1))*28px))}
[data-motion="rsvp"] #demo-heading>span,[data-motion="confirmed"] #demo-heading>span{transform:scale(calc(.87 + var(--scene-entry,1)*.13))}
[data-motion="rsvp"] #demo-heading>em,[data-motion="confirmed"] #demo-heading>em{transform:scale(calc(.87 + var(--scene-second,1)*.13))}
[data-motion="chat"] #demo-heading>span,[data-motion="matching"] #demo-heading>span{transform:translateX(calc((1 - var(--scene-entry,1))*-24px))}
[data-motion="chat"] #demo-heading>em,[data-motion="matching"] #demo-heading>em{transform:translateX(calc((1 - var(--scene-second,1))*24px))}
[data-motion="bulletin"] #demo-heading>span,[data-motion="review"] #demo-heading>span{clip-path:inset(0 calc((1 - var(--scene-entry,1))*100%) 0 0)}
[data-motion="bulletin"] #demo-heading>em,[data-motion="review"] #demo-heading>em{clip-path:inset(0 calc((1 - var(--scene-second,1))*100%) 0 0)}
[data-motion="discover"] #demo-heading>span,[data-motion="request"] #demo-heading>span,[data-motion="share"] #demo-heading>span{transform:translateY(calc((1 - var(--scene-entry,1))*-18px))}
[data-motion="discover"] #demo-heading>em,[data-motion="request"] #demo-heading>em,[data-motion="share"] #demo-heading>em{transform:translateY(calc((1 - var(--scene-second,1))*18px))}
.demo-function-icon{width:34px;height:34px;flex:0 0 34px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.demo-function-icon .icon-draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--scene-draw,1))}
.demo-eyebrow{gap:12px;margin-bottom:22px;min-height:34px}#demo-count{margin-left:auto;padding-right:15px}
@media(max-width:760px){
 .demo-motif{left:-9%;top:0;width:98%;height:48%;opacity:.13}
 .demo-function-icon{width:28px;height:28px;flex-basis:28px}.demo-eyebrow{margin-bottom:17px;min-height:28px;gap:9px}#demo-count{padding-right:0}
 .demo-chapters{gap:12px;flex-wrap:wrap;justify-content:flex-start}.demo-chapters button{font-size:9px}.demo-words{min-height:190px}
}

/* Onboarding emphasis requested in the page review. */
.start-steps h3 .im-in{color:var(--orange);font-weight:800;font-size:1.25em;letter-spacing:-.045em;white-space:nowrap}
.start-steps li>span{font-size:clamp(38px,4.2vw,58px);line-height:1;font-weight:750;letter-spacing:-.055em;margin-bottom:19px;color:var(--orange)}
.start-steps{align-items:start}.start-steps h3{padding-top:8px}
@media(max-width:760px){.start-steps li{padding-left:69px;min-height:64px}.start-steps li>span{font-size:44px;top:0;line-height:1}.start-steps ol{gap:28px}.start-steps h3{padding-top:0;margin-bottom:30px}.start-steps h3 .im-in{font-size:1.2em}}
