/* Try-it preview for /features/getting-started/ (2026-09-19).
   Everything below the frame rules is the web app's own CSS (app.html: the
   :root tokens, the base controls it uses, the shared services editor and the
   "Sign-up onboarding flow" block), copied value for value and scoped under
   .gs-preview so the app markup renders the same inside a phone-sized box.
   The only edits: .obflow position:fixed;inset:0 -> absolute inside the frame,
   .obcol height:100dvh -> 100%, the >=700px desktop-column media query ->
   a container query on the 390px stage (phone-sized, so it never fires),
   and line-height:normal on the root so the site body's 1.6 does not leak in
   (app.html's body sets none). */
.gs-preview{display:block;margin-top:38px;color:var(--text);line-height:normal;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.gs-preview .gs-frame{margin-top:0}
.gs-preview .gs-screen{background:var(--bg)}
/* The app's 390×847 viewport, scaled to the screen (--gs-scale = screen width / 390, set by the script) the way the clips are. */
.gs-preview .gs-stage{container:gsframe / inline-size;position:absolute;left:0;top:0;width:390px;height:847px;transform-origin:0 0;transform:scale(var(--gs-scale,1))}
.gs-preview .gs-loading{position:absolute;left:18px;top:18px;margin:0}
.gs-preview .gs-home{position:absolute;inset:0;overflow:auto;padding:calc(10px + env(safe-area-inset-top)) 18px 10px;background:var(--bg)}
.gs-preview .gs-panel{position:absolute;inset:0;overflow:auto;padding:calc(10px + env(safe-area-inset-top)) 18px 10px;background:var(--bg);display:flex;flex-direction:column;justify-content:center}
.gs-preview .gs-panel h3{font-size:23px;line-height:1.2;letter-spacing:-.3px;margin:0 0 10px;color:var(--text)}
.gs-preview .gs-panel p{font-size:15px;line-height:1.55;color:var(--dim);margin:0 0 18px}
.gs-preview .gs-panel .btn{display:block;width:100%;text-align:center;text-decoration:none}
.gs-preview .gs-panel .btn + .btn{margin-top:10px}
.gs-preview .gs-fail{position:absolute;left:18px;right:18px;top:18px;margin:0}
/* On a phone (≤430px) the frame runs edge to edge with no chrome, so the screen is the
   app at its real width; the screen keeps the 390/847 aspect. Wider than that the
   footage rig's phone frame applies unchanged. */
@media(max-width:430px){
  .gs-preview .crewdemo.stack{margin-top:0}
  .gs-preview .cd-phone{width:calc(100% + 48px);margin:0 -24px}
  .gs-preview .cd-phone::before{display:none}  /* the glow would poke past the viewport */
  .gs-preview .phoneframe{width:100%;padding:0;border-radius:0;background:none;box-shadow:none}
  .gs-preview .phoneframe::after{display:none}
  .gs-preview .phoneframe .screen{border-radius:0;border-left:0;border-right:0}
}
/* ---- The web app's CSS, scoped (values unchanged) ---- */
.gs-preview{--bg:#05070b;--bg2:#080b11;--card:#0f141c;--card2:#0b0f16;--glass:rgba(255,255,255,.045);--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.055);--text:#f2f6fa;--dim:#8d9aa8;--dim2:#65707d;--cyan:#0dabff;--blue:#3b82f6;--purple:#a855f7;--magenta:#e05cf0;--emerald:#1ae694;--gold:#ffc238;--red:#ff6b6b;--orange:#fb923c;--silver:#c2d1e6;--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;--r-card:22px;--r-tile:15px;--r-chip:12px;--gutter:16px;--sect:18px;--hair:1px;}
.gs-preview *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.gs-preview h1{font-size:19px;font-weight:800;margin:0;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.gs-preview .linkbtn{margin-left:auto;background:none;border:0;color:var(--cyan);font:inherit;font-size:13px;font-weight:800;cursor:pointer;padding:0}
.gs-preview .linkbtn:disabled{color:var(--dim2);cursor:default}
.gs-preview .cmpsect{display:flex;flex-direction:column;gap:9px;margin:9px 0 15px}
.gs-preview .cmpinput{width:100%;padding:12px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.065);color:var(--text);font:inherit;font-size:15px;}
.gs-preview textarea.cmpinput{resize:vertical;margin:8px 0 13px}
.gs-preview .chips{display:flex;gap:9px;flex-wrap:wrap}
.gs-preview .chip{border:1px solid var(--line);background:var(--glass);color:var(--dim);border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.gs-preview .chip.on{border-color:rgba(58,200,245,.6);color:var(--cyan);background:rgba(58,200,245,.12)}
.gs-preview .btn{border:0;border-radius:15px;padding:14px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;letter-spacing:.2px}
.gs-preview .btn.primary{background:linear-gradient(120deg,#3b82f6,#a855f7);color:#fff;box-shadow:0 10px 26px rgba(99,102,241,.32)}
.gs-preview .btn.ghost{background:var(--glass);color:var(--text);border:1px solid var(--line)}
.gs-preview .rowbtns{display:flex;gap:10px}
.gs-preview .rowbtns .btn{flex:1}
.gs-preview .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;font-weight:800;color:var(--cyan);text-transform:uppercase}
.gs-preview .panel{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:20px;padding:17px;box-shadow:0 10px 26px rgba(0,0,0,.36)}
.gs-preview .btn:disabled{opacity:.45}
.gs-preview input,.gs-preview select,.gs-preview textarea{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:15px;color:var(--text);font-size:16px;padding:14px;outline:none;font-family:inherit;width:100%;}
.gs-preview input::placeholder,.gs-preview textarea::placeholder{color:var(--dim2)}
.gs-preview input:focus,.gs-preview select:focus,.gs-preview textarea:focus{border-color:rgba(58,200,245,.5)}
.gs-preview :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.gs-preview label.fld{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:700;margin:13px 0 6px;letter-spacing:1.2px}
.gs-preview b{color:#fff}
.gs-preview a{color:var(--cyan);text-decoration:none}
.gs-preview .note{font-size:12.5px;color:var(--dim);line-height:1.55}
.gs-preview .note.err{color:var(--red)}
.gs-preview .note.ok{color:var(--emerald)}
.gs-preview .hbanner{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:var(--r-tile);margin-bottom:14px;background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid rgba(13,171,255,.35);font-size:13px;color:var(--dim)}
.gs-preview .hbanner .ic{color:var(--orange);font-size:16px}
.gs-preview .hbanner .m{flex:1;min-width:0}
.gs-preview .hbanner .m b{display:block;font-size:13px;font-weight:600;color:var(--text)}
.gs-preview .hbanner .m small{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-preview .retry{min-height:44px;padding:0 14px;border-radius:var(--r-chip);border:1px solid rgba(13,171,255,.35);background:rgba(13,171,255,.1);color:var(--cyan);font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;flex-shrink:0}
.gs-preview .hourrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06)}
.gs-preview .hourtoggle{display:flex;align-items:center;gap:8px;min-width:118px;font-size:14px}
.gs-preview .hourtimes{margin-left:auto;display:flex;align-items:center;gap:6px}
.gs-preview .hourtimes em{font-style:normal;color:var(--dim);font-size:12px}
.gs-preview .hourtimes input{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 8px;font-family:inherit;font-size:13px}
.gs-preview .svchead,.gs-preview .svcrow{display:grid;grid-template-columns:1.7fr .75fr .6fr 26px;gap:6px;align-items:center}
.gs-preview .svchead{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:0 4px}
.gs-preview .svcrow{margin-top:6px}
.gs-preview .svcrow .svcx{font-size:20px;line-height:1;padding:0;margin:0;text-align:center}
.gs-preview .qhelp{margin:-4px 0 2px}
.gs-preview button,.gs-preview a,.gs-preview input,.gs-preview select,.gs-preview [role="switch"]{touch-action:manipulation}
.gs-preview .chips .chip{font-family:var(--mono);font-size:11px;letter-spacing:1px;font-weight:800;padding:8px 13px}
.gs-preview .obflow{position:absolute;inset:0;z-index:1;background:var(--bg);overflow:hidden;animation:obfade .25s ease both}
.gs-preview .obflow [hidden]{display:none!important}
@keyframes obfade{from{opacity:0}to{opacity:1}}
.gs-preview .obcol{max-width:560px;margin:0 auto;height:100%;display:flex;flex-direction:column}
.gs-preview .obtop{padding:calc(10px + env(safe-area-inset-top)) 18px 4px}
.gs-preview .obprog{height:4px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.gs-preview .obprog i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3b82f6,#a855f7);transition:width .35s cubic-bezier(.2,.8,.3,1)}
.gs-preview .obtoprow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;min-height:20px}
.gs-preview .obstep{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;font-weight:800;color:var(--dim);text-transform:uppercase}
.gs-preview .obtoprow .linkbtn{margin-left:auto}
.gs-preview .obunder{min-height:0;margin:10px 0 0;padding:0;font-size:13.5px;line-height:1.45;color:var(--cyan)}
.gs-preview .obunder:empty{display:none}
.gs-preview .obunder.obin{animation:obin .45s ease both}
@keyframes obin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.gs-preview .obbody{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:4px 18px 10px;overscroll-behavior:contain}
.gs-preview .obbody.kb{padding-bottom:330px}
.gs-preview .obbody{overflow-x:hidden}
.gs-preview .obbody .hourrow{gap:8px}
.gs-preview .obbody .hourtoggle{min-width:0;flex:1 1 auto;font-size:13px}
.gs-preview .obbody .hourtimes{flex:none;gap:5px}
.gs-preview .obbody .hourtoggle input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:0;padding:0}
.gs-preview .obbody .hourtimes input{width:106px;min-width:0;padding:6px 3px;text-align:center}
.gs-preview .obbody h1{font-size:23px;line-height:1.2;letter-spacing:-.3px;margin:4px 0 10px;text-align:left;white-space:normal;overflow:visible;text-overflow:clip;flex:none}
.gs-preview .obbody .cmpsect{margin:0 0 12px;gap:6px}
.gs-preview .obbody .chips{gap:7px}
.gs-preview .obbody label.fld{font-family:inherit;font-size:15px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--text);margin:0}
.gs-preview .obbody .qhelp{margin:-3px 0 0}
.gs-preview .obbody .chips .chip{font-family:inherit;font-size:14px;letter-spacing:0;font-weight:700;padding:8px 13px;min-height:38px}
.gs-preview .obbody .cmpinput{font-size:16px}
.gs-preview .obbody textarea.cmpinput{margin:0;min-height:88px}
.gs-preview .obbody select.cmpinput{appearance:none;-webkit-appearance:none}
.gs-preview .obex{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.gs-preview .obex .note{margin:0}
.gs-preview .obex .chips .chip{font-size:13px;font-weight:700;padding:8px 13px;min-height:38px;text-align:left}
.gs-preview .obex .chips .chip::before{content:"+ ";color:var(--emerald)}
.gs-preview [data-rulesbox]{display:flex;flex-direction:column;gap:6px}
.gs-preview [data-rulesbox] .cmpinput{margin:0!important}
.gs-preview .obnote{margin:0 0 8px}
.gs-preview .obnote:empty{display:none}
.gs-preview .obnote .linkbtn{margin-left:8px}
.gs-preview .obfoot{padding:8px 18px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.gs-preview .obbtns{display:flex;gap:10px}
.gs-preview .obbtns .btn{padding:12px 14px;min-height:46px}
.gs-preview .obbtns #obback{flex:0 0 auto;min-width:92px}
.gs-preview .obbtns #obnext{flex:1}
.gs-preview .obskip{display:block;margin:12px auto 0;font-size:13.5px}
.gs-preview .obbrief{font-size:15px;line-height:1.55}
.gs-preview .obbrief p{margin:0 0 10px}
.gs-preview .obbrief p:last-child{margin-bottom:0}
.gs-preview .obrows{margin-top:14px;border-top:1px solid var(--line)}
.gs-preview .obrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.gs-preview .obrow .m{flex:1;min-width:0}
.gs-preview .obrow .m b{display:block;font-size:14px;font-weight:800}
.gs-preview .obrow .m small{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.gs-preview .obrow .linkbtn{padding:6px 2px;min-height:32px}
.gs-preview .obneeds{color:var(--dim2)!important}
.gs-preview .obknows .obbrief{font-size:14px}
.gs-preview .obknows .rowbtns{margin-top:12px}
@container gsframe (min-width:700px){.gs-preview .obbody h1{font-size:26px}
.gs-preview .obtop{padding-top:34px}}
@media (prefers-reduced-motion:reduce){.gs-preview .obflow,.gs-preview .obunder.obin{animation:none!important}
.gs-preview .obprog i{transition:none}}