/* Fixed text slots keep every setup in the same place at every viewport width. */
.setup-slot{display:grid;min-width:0}
.setup-slot>[data-setup-copy]{grid-area:1/1;visibility:hidden;pointer-events:none;min-width:0}
.setup-slot>[data-setup-copy][aria-hidden=false]{visibility:visible;pointer-events:auto}
.setup-status{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero,.hero .button,.hero .text-button,.hero-security,.scroll-hint,.requirements,.hero .eyebrow,.hero-description,.hero h1,.closing,.tour,.pricing,.setup-switch a,.setup-switch>span{transition:background-color .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1),border-color .7s cubic-bezier(.22,1,.36,1)}
.hero-copy .setup-slot{overflow:visible}
.hero-stage,.hero-app{contain:layout}
/* A screen leaves immediately. The next screen arrives whole, with no double exposure. */
@media(min-width:761px){
 .story .scene{opacity:1;visibility:hidden;transform:none;transition:none;pointer-events:none}
 .story .scene.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
 .story .scene.active .full-app-shot,.story .scene.active .phone{animation:story-arrive .58s cubic-bezier(.22,1,.36,1) both}
 .story .scene.active[data-direction=back] .full-app-shot,.story .scene.active[data-direction=back] .phone{animation-name:story-return}
 .story .scene.active .scene-description{animation:caption-arrive .48s cubic-bezier(.22,1,.36,1) both}
 .story-step{opacity:.5;transition:opacity .3s}
 .story-step.active{opacity:1}
}
@keyframes story-arrive{from{transform:translateY(18px);clip-path:inset(0 0 9% 0 round 10px)}to{transform:none;clip-path:inset(0 round 10px)}}
@keyframes story-return{from{transform:translateY(-18px);clip-path:inset(9% 0 0 0 round 10px)}to{transform:none;clip-path:inset(0 round 10px)}}
@keyframes caption-arrive{from{transform:translateY(8px)}to{transform:none}}
/* The guide has a consistent stage, moving only its content and the focus ring. */
.guide-bubble{overflow:visible}
.guide-bubble h3{min-height:2.1em}
.guide-bubble>p{min-height:6.2em}
.guide-action{min-height:40px;transition:background-color .3s,transform .2s}
.guide-action:disabled{cursor:progress;opacity:.75}
.guide-step-label{display:flex;gap:6px;align-items:center}
.guide-step-label:before{content:'';width:6px;height:6px;border:1px solid currentColor;border-radius:50%}
.guide-bubble[data-complete=true] .guide-step-label:before{background:#249e5c;border-color:#249e5c}
.guide-bubble[data-complete=true] .guide-step-label{color:#24834f!important}
@media(max-width:1200px) and (min-width:761px){.guide-bubble h3{min-height:2.1em}.guide-bubble>p{min-height:4.65em}}
@media(max-width:760px){.guide-bubble h3{min-height:2.1em}.guide-bubble>p{min-height:5.6em}.inline-tour-body .guide-bubble>p{min-height:6.2em}}
@media(prefers-reduced-motion:reduce){
 .hero,.hero .button,.hero .text-button,.hero-security,.scroll-hint,.requirements,.hero .eyebrow,.hero-description,.hero h1,.closing,.tour,.pricing,.setup-switch a,.setup-switch>span{transition:none}
 .story .scene.active .full-app-shot,.story .scene.active .phone,.story .scene.active .scene-description{animation:none}
}

/* Readable at actual browser size, including narrow Mac windows. */
.hero-mascot{pointer-events:auto;cursor:pointer;background:none;padding:0;border:0;z-index:4}
.hero-mascot:focus-visible{outline:3px solid white;outline-offset:10px;border-radius:50%}
.hero-mascot .mascot-hi{transition:transform .3s,box-shadow .3s}
.hero-mascot:hover .mascot-hi{transform:rotate(-3deg) translateY(-3px);box-shadow:0 8px 24px #00336b33}
.hero-security,.requirements,.scroll-hint,.setup-switch>span,.setup-switch a{color:#fff}
.hero-security,.requirements{font-size:14px;line-height:1.55}
.setup-switch{font-size:13px}
body[data-audience] .trust-strip{background:#edf5ff;color:#263b54;font-size:14px;line-height:1.5;border-color:#d0e2f6}
.trust-strip a:before,.trust-strip span:before{color:#0761ce}
.gather-caption{font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:#344b68;max-width:560px;padding:0 12px}
.guide-track .guide-stop{font-size:11px;color:#bec2cb}
.guide-speech{font-size:12px}
.poem-guide{overscroll-behavior-x:contain;touch-action:pan-y}
.guide-bubble h3,#demo-dialog .guide-bubble h3,.inline-tour-body .guide-bubble h3{font-size:25px;line-height:1.12;min-height:0;margin:10px 0 12px}
.guide-bubble>p,#demo-dialog .guide-bubble>p,.inline-tour-body .guide-bubble>p{font-size:15px;line-height:1.5;min-height:0;color:#505564}
.guide-step-label{font-size:10px;letter-spacing:.06em}
.guide-bubble .guide-action,.guide-bubble>#guide-action,.inline-tour-body .guide-bubble .guide-action{font-size:13px;line-height:1.3;min-height:44px;max-width:none;background:#0768df}
.guide-pagination,.inline-tour-body .guide-bubble .guide-pagination{font-size:12px;color:#606574;gap:10px}
.guide-pagination button{font-size:13px;min-height:40px;min-width:36px}
.demo-tour-note,#demo-dialog .demo-tour-note{font-size:12px;color:#505b70;line-height:1.4;margin-top:12px}
.demo-actions button,.demo-actions a{font-size:13px!important}
.tour-tabs button{font-size:13px;padding:11px 14px}
.tour-foot,.inline-tour-toolbar{font-size:14px}
.inline-tour-toolbar button:not(.sound-toggle){font-size:13px}
@media(min-width:1201px){.demo-body{grid-template-columns:minmax(0,1fr) 290px}.inline-tour-body{grid-template-columns:minmax(0,1fr) 280px}.poem-guide{padding:24px 18px}.guide-character{width:90px}}
@media(max-width:1200px) and (min-width:761px){.guide-bubble>p{min-height:0}.guide-bubble h3,#demo-dialog .guide-bubble h3,.inline-tour-body .guide-bubble h3{font-size:22px}.poem-guide{padding:14px 20px}.guide-bubble{max-width:850px}.guide-character{width:60px}}
@media(max-width:760px){
 .gather-caption{font-size:17px;max-width:340px}
 .hero-security,.requirements{font-size:13px}.setup-switch{font-size:13px}
 body[data-audience] .trust-strip{font-size:13px;gap:16px;padding:24px 20px}
 .hero-mascot .mascot-hi{font-size:13px}
 .guide-track .guide-stop{font-size:9px}.guide-speech{font-size:10px}
 .poem-guide,#demo-dialog .poem-guide,.inline-tour-body .poem-guide{position:relative;display:block;padding:12px;flex:none}
 .poem-guide .guide-character,#demo-dialog .guide-character,.inline-tour-body .guide-character{position:absolute;right:22px;top:0;width:46px;z-index:2;pointer-events:none}
 .guide-bubble,#demo-dialog .guide-bubble,.inline-tour-body .guide-bubble{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:14px 16px;max-width:none}
 .guide-bubble:before{left:auto;right:28px;top:-9px;transform:none}
 .guide-step-label{grid-column:1/-1;font-size:11px;min-height:16px;padding-right:40px;letter-spacing:.035em}
 .guide-bubble h3,#demo-dialog .guide-bubble h3,.inline-tour-body .guide-bubble h3{grid-column:1/-1;font-size:21px;line-height:1.15;margin:7px 0 8px;min-height:0}
 .guide-bubble>p,#demo-dialog .guide-bubble>p,.inline-tour-body .guide-bubble>p{grid-column:1/-1;font-size:14px;line-height:1.45;min-height:0}
 .guide-bubble .guide-action,.guide-bubble>#guide-action,.inline-tour-body .guide-bubble .guide-action{grid-column:1;grid-row:auto;width:100%;max-width:none;display:block;margin-top:12px;padding:9px 10px;font-size:13px;border-radius:22px}
 .guide-pagination,.inline-tour-body .guide-bubble .guide-pagination{grid-column:2;grid-row:auto;display:flex;float:none;min-width:110px;font-size:12px;padding:0;margin-top:12px;gap:7px;align-self:center}
 .guide-pagination button{font-size:13px;min-width:32px;padding:0}
 .guide-pagination:before{top:-7px}
 .demo-actions{gap:6px}.demo-actions button,.demo-actions a{font-size:12px!important}
 #demo-dialog .dialog-bar{padding:10px 12px}.demo-actions .demo-download{padding:10px 12px}
 .demo-actions .demo-close{width:34px;height:34px}
 .inline-tour-body .tour-window{height:clamp(370px,calc(100svh - 340px),600px)}
 .tour-tabs button{font-size:13px}.tour-foot{font-size:13px;line-height:1.5}
 .inline-tour-toolbar{font-size:13px}.inline-tour-toolbar button:not(.sound-toggle){font-size:12px}
}
@media(max-width:360px){.guide-bubble,#demo-dialog .guide-bubble,.inline-tour-body .guide-bubble{padding:12px;gap:0 8px}.guide-pagination,.inline-tour-body .guide-bubble .guide-pagination{min-width:96px;gap:4px}.guide-bubble h3,#demo-dialog .guide-bubble h3{font-size:20px}.demo-actions>button:not(.demo-close){padding:8px}.demo-actions{gap:4px}#demo-title img{width:46px}#demo-title>span{font-size:11px}}

/* Actual client vocabulary and terminal hierarchy, with safe sample projects. */
.terminal,.gather-terminal{background:#191919;color:#e6e6e6}
.terminal .terminal-bar,.gather-terminal .terminal-bar{background:#303030;color:#c0c0c0;padding:7px 9px;gap:4px}
.terminal-session{font-family:'B612 Mono',Menlo,monospace;font-size:8px;line-height:1.45;padding:9px 11px;white-space:nowrap;overflow:hidden;text-align:left;letter-spacing:0}
.terminal-client{display:flex;flex-direction:column;gap:2px;border:1px solid #5e5e5e;border-radius:6px;padding:5px 7px;margin-bottom:8px}
.terminal-client.claude{border-color:#b57752}
.terminal-client strong{font-size:10px;font-weight:650;color:#ededed}
.terminal-client.claude strong{color:#e6a07c}
.terminal-client>span{font-size:7px;color:#c4c4c4}
.terminal-prompt{background:#272727;padding:3px 5px;margin:0 -4px 6px;color:#efefef;overflow:hidden}
.terminal-prompt>span{color:#eee}.terminal-output{color:#e1e1e1;font-weight:600}
.terminal-output>span{color:#8ccf9a}.terminal-result{color:#b8b8b8;padding-left:5px;margin-top:3px;overflow:hidden}
.terminal-input{display:flex;gap:6px;border-top:1px solid #ffffff26;border-bottom:1px solid #ffffff26;padding:4px 0;margin-top:8px;height:18px}
.terminal-input i{height:9px;width:5px;background:#c6c6c6;display:block;margin-top:2px}
.terminal-foot{color:#9b9b9b;font-size:6px;padding-top:3px}
.gather-terminal{width:27%;height:47%;left:36.5%;top:26.5%;box-shadow:0 14px 26px #162a4826}
.gather-terminal .terminal-bar span{font-size:7px}
.hero-stage>.terminal{height:210px;width:290px}
.hero-stage>.terminal .terminal-session{font-size:10px;padding:12px 14px}
.hero-stage>.terminal .terminal-client strong{font-size:13px}
.hero-stage>.terminal .terminal-client>span{font-size:9px}
.hero-stage>.terminal .terminal-foot{font-size:8px}
.gather-app{will-change:transform;transform-origin:50% 50%}
.scroll-reveal{transition:opacity .65s,transform .8s cubic-bezier(.22,1,.36,1)}
@media(max-width:760px){
 .gather-art{height:72vw;min-height:260px;max-height:390px;overflow:hidden}
 .gather-terminal{width:42%;height:49%;left:29%;top:25.5%}
 .gather-terminal .terminal-bar{padding:5px 6px}.gather-terminal .terminal-bar span{font-size:5px}
 .terminal-session{font-size:5.5px;padding:6px 7px;line-height:1.4}
 .terminal-client{padding:4px;margin-bottom:5px;border-radius:4px}.terminal-client strong{font-size:7px}.terminal-client>span{font-size:5px}
 .terminal-prompt{padding:2px 3px;margin-bottom:4px}.terminal-result{margin-top:2px}.terminal-input{margin-top:5px;padding:2px 0;height:12px}.terminal-input i{height:6px;width:3px}.terminal-foot{font-size:4.5px}
 .hero-stage>.terminal{height:140px;width:175px}.hero-stage>.terminal .terminal-session{font-size:6px;padding:8px}.hero-stage>.terminal .terminal-client strong{font-size:8px}.hero-stage>.terminal .terminal-client>span{font-size:6px}.hero-stage>.terminal .terminal-foot{font-size:5px}
 .gather-app{width:96%;height:auto;top:50%;translate:-50% -50%}
}
@media(min-width:761px) and (max-height:800px){.gather-art{height:38vh;min-height:240px}.gather-terminal{height:66%;top:17%}.gather-sticky{padding-bottom:20px}.gather-heading h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;transform:none;transition:none}}
@media(prefers-reduced-motion:no-preference){
 .pain-list li.is-visible .circle-check{animation:check-arrive .6s cubic-bezier(.16,1,.3,1) both}
 .security-points article.is-visible .security-check{animation:check-arrive .6s cubic-bezier(.16,1,.3,1) both}
 @media(max-width:760px){.story .screen-in-view{animation:screen-arrive .9s cubic-bezier(.16,1,.3,1) both}}
}
@keyframes check-arrive{from{transform:scale(.7) rotate(-18deg)}to{transform:none}}
@keyframes screen-arrive{from{transform:translateY(22px) scale(.975)}to{transform:none}}

/* The hero grows to hold its words on a shorter window (10/25: at 1440x900 the scroll line crossed the plans line). */
@media (min-width:761px){.hero{height:auto;max-height:none;min-height:clamp(840px,100svh,1120px)}}

/* The trust row together in the middle, not spread across a wide window (10/25, Reza: "too spaced out"). */
@media (min-width:761px){body[data-audience] .trust-strip{justify-content:center;flex-wrap:wrap;gap:14px 46px}}
/* On a wide window the sections and the feature story are 15% bigger (10/25, Reza: "can this all be like 15% bigger?"):
   1240px of content becomes 1430px, and the story's words, pictures and guide grow with it. */
@media (min-width:1600px){.section{padding-left:calc((100vw - 1430px)/2);padding-right:calc((100vw - 1430px)/2)}}
@media (min-width:1600px) and (min-height:900px){
  .story-step{min-height:655px}
  .story-step h3{font-size:60px}
  .story-step>p{font-size:22px;max-width:450px}
  .story-step>.feature-note{font-size:16px}
  .story .step-number{font-size:12.5px}
  .story-visual{height:700px}
  .story .phone{width:265px}
  .story .scene-top{font-size:10.5px}
  .story .scene-description strong{font-size:1.15em}
  .story .scene-description p,.story .scene>p{font-size:15px}
  .guide-track{width:min(805px,94%)}
  .guide-track .guide-stop{font-size:12.5px}
}