:root{
  --ink:#14213b;
  --muted:#76869e;
  --line:rgba(116,142,176,.28);
  --blue:#4a8dff;
  --cyan:#62d7ff;
  --violet:#7563ee;
  --card:rgba(255,255,255,.48);
  --ease:cubic-bezier(.2,.8,.2,1);
  --app-height:100dvh;
  --app-width:100vw;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;overflow:hidden}

body{
  position:fixed;
  inset:0;
  width:100%;
  height:var(--app-height);
  min-height:var(--app-height);
  display:grid;
  place-items:center;
  background:#f8fbff;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

button,
input,
textarea{
  font:inherit;
}

button{
  border:0;
  cursor:pointer;
  outline:none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(74,141,255,.48);
  outline-offset:3px;
}

.intro-loader{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(95% 80% at 84% 8%, rgba(243,201,163,.78), transparent 58%),
    radial-gradient(90% 72% at 8% 6%, rgba(174,205,239,.86), transparent 58%),
    linear-gradient(180deg,#f6f8fb,#dde7f4 64%,#edf1f6);
  transition:opacity .55s ease, visibility .55s ease;
}

.intro-loader-grid{
  position:absolute;
  inset:-10%;
  background:
    linear-gradient(rgba(37,99,235,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 46%, #000 0 38%, transparent 72%);
  opacity:.48;
  transform:rotate(-5deg) scale(1.08);
  animation:introGridDrift 8s ease-in-out infinite alternate;
}

.intro-logo-stage{
  position:relative;
  display:grid;
  justify-items:center;
  gap:22px;
  width:min(calc(100% - 48px),360px);
  animation:introStageArrive .7s var(--ease) both;
}

.intro-mark{
  width:min(58vw,230px);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 14px 30px rgba(37,99,235,.28));
  animation:introLogoBreathe 2.8s ease-in-out 2.2s infinite;
}

.intro-pill{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  stroke-linecap:round;
  animation:introDraw 1.15s cubic-bezier(.65,0,.2,1) .25s forwards;
}

.intro-eye{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  opacity:0;
}

.intro-eye-l{
  animation:introPop .5s cubic-bezier(.34,1.56,.5,1) 1.15s forwards, introBlink 4.2s ease-in-out 2.4s infinite;
}

.intro-eye-r{
  animation:introPop .5s cubic-bezier(.34,1.56,.5,1) 1.35s forwards, introBlink 4.2s ease-in-out 2.55s infinite;
}

.intro-wordmark{
  display:block;
  width:min(70vw,286px);
  height:auto;
  opacity:0;
  transform:translateY(14px);
  animation:introRise .55s var(--ease) 1.55s forwards;
}

body.intro-complete .intro-loader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.app-shell{
  position:fixed;
  inset:0;
  width:100%;
  height:var(--app-height);
  min-height:var(--app-height);
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(1.025);
  transition:opacity .55s ease .12s, transform .75s var(--ease) .12s;
}

body.intro-complete .app-shell{
  opacity:1;
  transform:scale(1);
}

.mobile-frame{
  position:fixed;
  top:0;
  left:0;
  right:0;
  margin:0 auto;
  width:min(var(--app-width),480px);
  max-width:100vw;
  height:var(--app-height);
  max-height:960px;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  /* Fallback gradient behind the decorative videos; kept in the same warm-cool
     palette so loading frames do not flash against the glass UI. */
  background:
    radial-gradient(72% 56% at 92% 8%, rgba(255,160,143,.55), transparent 65%),
    radial-gradient(64% 52% at 0% 22%, rgba(128,211,255,.45), transparent 62%),
    linear-gradient(150deg,#eaf8ff 0%,#f6f1ff 46%,#fff0ea 100%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:32px;
  box-shadow:0 24px 70px rgba(70,92,128,.14);
}

/* Live background video. Two clips are stacked: v2 plays on the first four
   question screens, v1 plays on home, invite, and success. Both share the
   gradient palette, so the crossfade between them reads as one take. */
.agent-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  background:transparent;
  opacity:0;
  transition:opacity .6s var(--ease);
  /* Hidden until a `playing` event fires (intro.js adds .is-playing).
     This guarantees iOS Safari never renders its native play-button
     overlay — when autoplay is blocked, the element is invisible and
     the agent PNG / gradient backdrop fills in instead. */
  visibility:hidden;
}

.agent-video.is-playing{
  visibility:visible;
}

/* iOS Safari draws a center play-button overlay if it can't autoplay or if
   the user has tapped/long-pressed. We never want it for a decorative
   background video — hide every native control. */
.agent-video::-webkit-media-controls,
.agent-video::-webkit-media-controls-start-playback-button,
.agent-video::-webkit-media-controls-overlay-play-button,
.agent-video::-webkit-media-controls-panel{
  display:none !important;
  -webkit-appearance:none;
  appearance:none;
  pointer-events:none;
  opacity:0 !important;
}

body[data-screen="home"]        .agent-video-v1,
body[data-screen="invite"]      .agent-video-v1,
body[data-screen="success"]     .agent-video-v1,
body[data-screen="build"]       .agent-video-v2,
body[data-screen="orchestrate"] .agent-video-v2,
body[data-screen="workspace"]   .agent-video-v2,
body[data-screen="agents"]      .agent-video-v2{
  opacity:1;
}

.agent-video-v2{
  object-position:50% 0%;
}

body.video-fallback .agent-video{
  display:none;
}

/* TikTok WebView gets a static backdrop instead of the video. The
   inline script in index.html injects a .tiktok-bg <img> as the first
   child of .mobile-frame and swaps the .agent-stage img to the matching
   PNG, so the existing .agent-stage route-based positioning still
   drives where the agent character appears per screen. */
.tiktok-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* The TikTok agent overlay is a pre-finished transparent cutout, not the
   3D-render that the default .agent rules were tuned for. Strip every
   visual effect the surrounding shell applies — drop-shadow, mask,
   ground glow — so the cutout renders flat against the backdrop with
   no halo. !important + the -webkit- prefix because some WebKit builds
   keep the underlying drop-shadow active until both forms are cleared. */
body.is-tiktok .agent,
body.is-tiktok .agent-stage{
  -webkit-filter:none !important;
          filter:none !important;
  -webkit-box-shadow:none !important;
          box-shadow:none !important;
  -webkit-mask-image:none !important;
          mask-image:none !important;
}
body.is-tiktok .agent-shadow{
  display:none !important;
}

/* Show the static PNG agent until a background video has actually started
   playing. intro.js adds `bg-video-running` to <body> on the first
   `playing` event from any of the videos. Before that — and whenever
   `video-fallback` is set — the PNG fills in for the (invisible) video. */
.agent-stage{ visibility:visible; }

body.bg-video-running .agent-stage{
  visibility:hidden;
}

body.video-fallback .agent-stage{
  visibility:visible;
}

.brand-lockup{
  position:absolute;
  top:54px;
  left:50%;
  z-index:20;
  width:118px;
  transform:translateX(-50%);
  transition:top .54s var(--ease), transform .54s var(--ease), opacity .3s ease;
}

body.intro-complete .brand-lockup{
  animation:brandSettle 1s var(--ease) both;
}

.brand-lockup img{
  display:block;
  width:100%;
  height:auto;
}

.agent-stage{
  position:absolute;
  top:var(--agent-top);
  left:50%;
  z-index:4;
  width:var(--agent-width);
  transform:translateX(-50%);
  transition:top .72s var(--ease), width .72s var(--ease), transform .72s var(--ease), opacity .32s ease;
  pointer-events:none;
}

body.intro-complete .agent-stage{
  animation:agentEntrance 1.05s var(--ease) .12s both;
}

.agent{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  animation:agentFloat 4.2s ease-in-out 1.1s infinite;
  filter:drop-shadow(0 18px 32px rgba(64,122,205,.18));
}

body.is-routing .agent{
  animation:agentRouteBounce .72s var(--ease), agentFloat 4.2s ease-in-out .9s infinite;
}

/* On every step screen the agent sits in one consistent hero band and its lower
   body dissolves softly into the page rather than being hard-cropped by the card. */
body[data-screen="build"] .agent,
body[data-screen="orchestrate"] .agent,
body[data-screen="workspace"] .agent,
body[data-screen="agents"] .agent,
body[data-screen="invite"] .agent{
  -webkit-mask-image:linear-gradient(180deg,#000 54%,rgba(0,0,0,.5) 74%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 54%,rgba(0,0,0,.5) 74%,transparent 92%);
}

.agent-shadow{
  position:absolute;
  left:50%;
  bottom:7%;
  z-index:1;
  width:50%;
  height:9%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(91,220,255,.38),rgba(240,111,77,.38));
  filter:blur(10px);
  transform:translateX(-50%);
  opacity:.62;
  animation:shadowFloat 4.2s ease-in-out 1.1s infinite;
}

body[data-screen="build"] .agent-shadow,
body[data-screen="orchestrate"] .agent-shadow,
body[data-screen="workspace"] .agent-shadow,
body[data-screen="agents"] .agent-shadow,
body[data-screen="invite"] .agent-shadow{
  opacity:0;
}

body[data-screen="home"] .agent-stage{--agent-top:118px;--agent-width:276px}
body[data-screen="success"] .agent-stage{--agent-top:104px;--agent-width:288px}

/* Step screens share ONE agent size & position so the robot reads identically
   on every step and never collides with the stepper or card. */
body[data-screen="build"] .agent-stage,
body[data-screen="orchestrate"] .agent-stage,
body[data-screen="workspace"] .agent-stage,
body[data-screen="agents"] .agent-stage,
body[data-screen="invite"] .agent-stage{
  --agent-top:92px;
  --agent-width:212px;
}


.screen{
  position:absolute;
  inset:0;
  z-index:10;
  overflow-x:hidden;
  overflow-y:auto;
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
  transition:opacity .42s ease, transform .54s var(--ease);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.screen::-webkit-scrollbar{
  display:none;
}

body[data-screen="home"] .screen-home,
body[data-screen="build"] .screen-build,
body[data-screen="orchestrate"] .screen-orchestrate,
body[data-screen="workspace"] .screen-workspace,
body[data-screen="agents"] .screen-agents,
body[data-screen="invite"] .screen-invite,
body[data-screen="success"] .screen-success{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Step screens lay out as a column that fills the frame: stepper on top,
   card sized to its content, controls pinned below — all fitting without scroll. */
.screen-build,
.screen-orchestrate,
.screen-workspace,
.screen-agents,
.screen-invite{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:var(--step-top) 0 max(28px,env(safe-area-inset-bottom));
}

/* Cards start below the agent's head/upper-body band in the background
   video so the agent is never fully obscured; orchestrate sits a touch
   higher to fit its 6-row list without pushing controls off-screen. */
.screen-build{ --step-top:320px; }
.screen-orchestrate{ --step-top:270px; }
.screen-invite{ --step-top:310px; }
.screen-workspace{ --step-top:310px; }
.screen-agents{ --step-top:310px; }

/* Success screen flows as a column (signal → card → share link → divider) so
   the bottom-anchored share link can never overlap the bottom of the card on
   compressed in-app webviews. */
.screen-success{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: clamp(280px,42dvh,358px) 0 max(28px,env(safe-area-inset-bottom));
  gap:20px;
}

.home-content{
  position:absolute;
  left:50%;
  /* Cap top so the bottom of the stack (the "See what SAMS is" link) is never
     pushed under the visible viewport — covers the TikTok in-app webview zone
     where the address bar shrinks the available height below ~640px. */
  top:min(clamp(330px,52vh,438px), calc(var(--app-height) - 320px));
  top:min(clamp(330px,52dvh,438px), calc(var(--app-height) - 320px));
  width:min(calc(100% - 56px),320px);
  transform:translateX(-50%);
  text-align:center;
}

.access-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:34px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:rgba(255,255,255,.36);
  color:#5088e9;
  box-shadow:inset 0 0 0 1px rgba(116,160,225,.12),0 9px 24px rgba(89,125,176,.12);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
}

.access-pill svg,
.divider svg,
.card-note svg{
  width:17px;
  height:17px;
  fill:#4b8dff;
}

h1{
  margin-top:clamp(18px,3vh,28px);
  margin-top:clamp(18px,3dvh,28px);
  color:#14213b;
  font-size:clamp(40px,5.7vh,50px);
  font-size:clamp(40px,5.7dvh,50px);
  line-height:1.08;
  font-weight:500;
}

h1 span,
.success-card h2 span{
  background:linear-gradient(90deg,#736df2,#45bdf2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-content p{
  margin-top:clamp(16px,3vh,26px);
  margin-top:clamp(16px,3dvh,26px);
  color:#63738b;
  font-size:clamp(15px,2vh,18px);
  font-size:clamp(15px,2dvh,18px);
  font-weight:500;
}

.primary-action{
  width:100%;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  padding:0 26px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(105deg,#60d2fb 0%,#5b8df8 53%,#8268ef 100%);
  color:#fff;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.26),
    0 15px 28px rgba(82,126,232,.22),
    0 4px 0 rgba(255,255,255,.26);
  font-size:18px;
  font-weight:600;
  transition:transform .22s var(--ease), box-shadow .22s ease;
}

.primary-action svg,
.link-action svg,
.icon-nav svg,
.back-link svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.primary-action:hover,
.choice-card:hover,
.option-row:hover,
.icon-nav:hover,
.form-action:hover{
  transform:translateY(-2px);
}

.home-content .primary-action{
  margin-top:clamp(24px,4.5vh,42px);
  margin-top:clamp(24px,4.5dvh,42px);
}

.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:24px auto 18px;
  color:#99a8bb;
}

.divider span{
  width:70px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(116,142,176,.28));
}

.divider span:last-child{
  background:linear-gradient(90deg,rgba(116,142,176,.28),transparent);
}

.link-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#76869e;
  background:transparent;
  font-size:17px;
  font-weight:600;
}

/* Step indicator: a frosted pill of progress bars seated on the card's top edge. */
.card-stepper{
  position:absolute;
  top:0;
  left:50%;
  z-index:6;
  display:flex;
  align-items:center;
  padding:8px 14px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.92);
  border-radius:999px;
  background:rgba(255,255,255,.85);
  box-shadow:0 10px 26px rgba(74,95,140,.18),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
}

.mini-bars{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.mini-bars span{
  width:14px;
  height:6px;
  border-radius:999px;
  background:rgba(124,140,168,.28);
  transition:width .3s var(--ease), background .3s ease;
}

.mini-bars .is-active{
  width:24px;
  background:linear-gradient(90deg,#5aa0ff,#7d6bef);
  box-shadow:0 4px 10px rgba(74,141,255,.3);
}

.glass-card{
  position:relative;
  width:min(calc(100% - 62px),420px);
  border:1px solid rgba(255,255,255,.86);
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.28));
  border-radius:24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 24px 55px rgba(84,112,151,.12);
  backdrop-filter:blur(20px);
}

.build-card{
  padding:52px 26px 28px;
}

/* The card-stepper pill now occupies the card's top edge, so the decorative
   orb (which lived there) is retired on the build screen. */
.build-card .card-orb{
  display:none;
}

.card-orb{
  position:absolute;
  top:-24px;
  left:50%;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border-radius:15px;
  border:1px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.46);
  box-shadow:0 12px 26px rgba(91,141,255,.16), inset 0 0 18px rgba(255,255,255,.52);
}

.card-orb svg{
  width:25px;
  height:25px;
  fill:#4b8dff;
}

.glass-card h2{
  color:#14213b;
  text-align:center;
  font-size:29px;
  line-height:1.16;
  font-weight:600;
}

.choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:28px;
}

.choice-card{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 18px;
  border:1px solid rgba(178,194,216,.46);
  border-radius:14px;
  background:rgba(255,255,255,.42);
  color:#213a63;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(74,95,125,.06);
  text-align:left;
  font-size:16px;
  font-weight:600;
  transition:transform .22s var(--ease), border-color .22s ease;
}

.choice-card svg{
  width:28px;
  height:28px;
  flex:none;
  padding:6px;
  border-radius:999px;
  background:rgba(74,106,231,.74);
  color:#fff;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transform:scale(.7);
  transition:opacity .18s ease, transform .22s var(--ease);
}

.choice-card.is-selected{
  color:#fff;
  border-color:rgba(255,255,255,.7);
  background:linear-gradient(105deg,#58d0f7,#4c8dff 55%,#8065ed);
  box-shadow:0 12px 28px rgba(82,126,232,.22),inset 0 0 0 4px rgba(255,255,255,.2);
}

.choice-card.is-selected svg{
  opacity:1;
  transform:scale(1);
}

.build-fields{
  display:grid;
  gap:12px;
  margin-top:26px;
}

.detail-field{
  display:grid;
  gap:7px;
  padding:12px 14px;
  border:1px solid rgba(170,191,218,.48);
  border-radius:15px;
  background:rgba(255,255,255,.42);
  color:#6f83a0;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 8px 18px rgba(74,95,125,.05);
}

.detail-field.is-invalid,
.field-row.is-invalid{
  border-color:rgba(255,91,122,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 0 3px rgba(255,91,122,.16),
    0 10px 24px rgba(158,55,82,.12);
  animation:fieldNudge .28s var(--ease);
}

.detail-field span{
  font-size:12px;
  font-weight:700;
}

.detail-field input,
.detail-field textarea{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#14213b;
  font-size:15px;
  font-weight:500;
}

.detail-field input::placeholder,
.detail-field textarea::placeholder{
  color:#93a5c0;
}

.detail-field textarea{
  min-height:92px;
  resize:none;
  line-height:1.35;
}

.mini-q-label{
  margin:18px 0 0;
  color:#6a7b94;
  font-size:13px;
  font-weight:700;
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.pill{
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(178,194,216,.46);
  border-radius:999px;
  background:rgba(255,255,255,.46);
  color:#324761;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 8px 18px rgba(74,95,125,.05);
  font-size:14px;
  font-weight:600;
  transition:transform .22s var(--ease), border-color .22s ease, background .22s ease, color .22s ease;
}

.pill.is-selected{
  border-color:rgba(255,255,255,.72);
  background:linear-gradient(105deg,#5fcff8,#4e8efe 56%,#7b69ef);
  color:#fff;
  box-shadow:0 10px 24px rgba(82,126,232,.18),inset 0 0 0 3px rgba(255,255,255,.2);
}

.pill:hover,
.env-card:hover{
  transform:translateY(-2px);
}

.stack-card{
  padding:42px 22px 22px;
}

.stack-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:20px;
}

.stack-tools .pill{
  width:100%;
  min-height:36px;
  padding:0 10px;
  border-radius:13px;
}

.stack-custom{
  margin-top:12px;
}

.stack-custom input{
  min-height:24px;
}

.count-card{
  width:min(calc(100% - 62px),420px);
  padding:54px 24px 38px;
  text-align:center;
}

.count-card h2{
  color:#14213b;
  font-size:29px;
  line-height:1.16;
  font-weight:600;
}

.count-row{
  justify-content:center;
  gap:10px;
  margin-top:26px;
}

.count-row .pill{
  min-width:68px;
}

.card-action{
  margin-top:26px;
  min-height:64px;
}

.back-link{
  margin-top:auto;
  padding-top:24px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#8796aa;
  background:transparent;
  font-size:17px;
  font-weight:600;
}

.list-card{
  padding:26px 22px 22px;
}

.list-card h2{
  font-size:25px;
}

.option-list{
  display:grid;
  gap:8px;
  margin-top:16px;
}

.option-list.is-invalid .option-row,
.pill-row.is-invalid .pill{
  border-color:rgba(255,91,122,.58);
}

.option-list.is-invalid,
.pill-row.is-invalid{
  animation:fieldNudge .28s var(--ease);
}

.option-row{
  min-height:50px;
  display:grid;
  grid-template-columns:44px 1fr 30px;
  align-items:center;
  gap:14px;
  padding:0 18px;
  border:1px solid rgba(178,194,216,.48);
  border-radius:15px;
  background:rgba(255,255,255,.5);
  color:#14213b;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 18px rgba(74,95,125,.05);
  font-size:16px;
  font-weight:600;
  transition:transform .22s var(--ease), border-color .22s ease;
}

.option-row.is-selected{
  border-color:#4a8dff;
  box-shadow:0 0 0 1px rgba(74,141,255,.34),inset 0 1px 0 rgba(255,255,255,.72);
}

.option-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.82);
  background:rgba(255,255,255,.5);
  color:#4a8dff;
}

.option-icon svg,
.field-row svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.check{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg,#6da7ff,#5d76e9);
  color:#fff;
  opacity:0;
  transform:scale(.7);
  transition:opacity .18s ease, transform .22s var(--ease);
}

.option-row.is-selected .check{
  opacity:1;
  transform:scale(1);
}

.check svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.card-note{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#4d73a9;
  font-size:16px;
  font-weight:600;
}

.bottom-nav{
  margin-top:auto;
  padding-top:18px;
  width:min(calc(100% - 80px),382px);
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
}

/* Back: a quiet pill with a label, sized to sit beside the primary Next. */
.icon-nav{
  flex:0 0 auto;
  height:60px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 22px 0 18px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:16px;
  background:rgba(255,255,255,.46);
  color:#6f84a5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 10px 24px rgba(72,94,128,.1);
  font-size:16px;
  font-weight:600;
  transition:transform .22s var(--ease);
}

.icon-nav svg{
  width:22px;
  height:22px;
}

/* Next: primary CTA that grows to fill the row beside Back. */
.nav-next{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  min-height:60px;
}

/* Inside the bottom nav, strip the vertical margins the Next button inherits
   from .card-action / .form-action — they push it down so Back appears higher. */
.bottom-nav .nav-next{
  margin-top:0;
  margin-bottom:0;
}

.form-card{
  padding:42px 22px 22px;
}

.form-card h2{
  font-size:29px;
}

.invite-form{
  display:grid;
  gap:11px;
  margin-top:22px;
}

.field-row{
  min-height:52px;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border:1px solid rgba(170,191,218,.48);
  border-radius:12px;
  background:rgba(255,255,255,.34);
  color:#7fa7eb;
}

.field-row input,
.field-row textarea{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#14213b;
  font-size:16px;
  font-weight:500;
}

.field-row input::placeholder,
.field-row textarea::placeholder{
  color:#94a6c2;
}

.textarea-row{
  min-height:84px;
  align-items:start;
  padding-top:14px;
}

.textarea-row textarea{
  min-height:52px;
  resize:none;
  line-height:1.35;
}

.form-action{
  margin-top:28px;
  margin-bottom:24px;
  width:min(calc(100% - 94px),360px);
  min-height:66px;
}

.success-signal{
  position:relative;
  width:120px;
  height:96px;
  display:grid;
  place-items:center;
}

.beacon{
  position:relative;
  z-index:2;
  width:48px;
  height:72px;
  display:grid;
  place-items:start center;
  padding-top:12px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.78);
  background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(117,230,244,.26));
  box-shadow:0 0 28px rgba(101,227,238,.5),inset 0 0 18px rgba(255,255,255,.64);
}

.beacon svg{
  width:34px;
  height:34px;
  padding:7px;
  border-radius:999px;
  background:linear-gradient(135deg,#6fe1fb,#6d65f0);
  color:#fff;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ring{
  position:absolute;
  left:50%;
  bottom:0;
  border:2px solid rgba(150,245,249,.64);
  border-radius:50%;
  transform:translateX(-50%);
  animation:ringPulse 2.2s ease-in-out infinite;
}

.ring-one{width:70px;height:18px}
.ring-two{width:108px;height:28px;animation-delay:.25s}
.ring-three{width:144px;height:38px;animation-delay:.5s}

.success-card{
  position:relative;
  padding:60px 24px 34px;
  text-align:center;
}

.success-check{
  position:absolute;
  top:22px;
  left:50%;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(95,160,255,.16);
  color:#4a8dff;
}

.success-check svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.success-card h2{
  font-size:38px;
  line-height:1.1;
  font-weight:600;
}

.success-card p{
  margin-top:22px;
  color:#314562;
  font-size:17px;
  line-height:1.4;
  font-weight:500;
}

.success-card .muted{
  margin-top:18px;
  color:#667891;
}

.success-link{
  position:relative;
  color:#7e8ca2;
  transition:color .25s ease;
}

.success-link .share-icon{
  transition:transform .25s ease,color .25s ease;
}

.success-link:active{
  color:#aebbcf;
}

.success-link.is-shared{
  color:#5fd0a3;
}

.success-link.is-shared .share-icon{
  transform:scale(1.08);
}

.success-divider{
  position:relative;
  width:200px;
  margin:0;
}

@keyframes brandSettle{
  0%{top:42%;opacity:0;transform:translate(-50%,-50%) scale(1.85)}
  58%{opacity:1;transform:translate(-50%,-50%) scale(.86)}
  76%{top:50px;transform:translateX(-50%) scale(1.08)}
  100%{top:54px;transform:translateX(-50%) scale(1)}
}

@keyframes introStageArrive{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes introDraw{
  to{stroke-dashoffset:0}
}

@keyframes introPop{
  0%{transform:scale(0);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1);opacity:1}
}

@keyframes introBlink{
  0%,92%,100%{transform:scaleY(1)}
  95%{transform:scaleY(.1)}
}

@keyframes introRise{
  to{opacity:1;transform:translateY(0)}
}

@keyframes introLogoBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.015)}
}

@keyframes introGridDrift{
  from{transform:rotate(-5deg) scale(1.08) translate3d(-10px,-8px,0)}
  to{transform:rotate(-5deg) scale(1.08) translate3d(12px,10px,0)}
}

@keyframes agentEntrance{
  0%{opacity:0;transform:translate(-50%,26px) scale(.92)}
  66%{opacity:1;transform:translate(-50%,-6px) scale(1.035)}
  100%{opacity:1;transform:translateX(-50%) scale(1)}
}

@keyframes agentFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

@keyframes agentRouteBounce{
  0%{transform:translateY(0) scale(1)}
  44%{transform:translateY(-16px) scale(1.035)}
  100%{transform:translateY(0) scale(1)}
}

@keyframes shadowFloat{
  0%,100%{opacity:.58;transform:translateX(-50%) scale(1)}
  50%{opacity:.36;transform:translateX(-50%) scale(.82)}
}

@keyframes ringPulse{
  0%,100%{opacity:.85;transform:translateX(-50%) scale(.94)}
  50%{opacity:.35;transform:translateX(-50%) scale(1.08)}
}

@keyframes fieldNudge{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-4px)}
  70%{transform:translateX(4px)}
}

@media (max-width:420px){
  .mobile-frame{
    left:0;
    right:0;
    width:100%;
    border-radius:0;
    height:var(--app-height);
    min-height:0;
  }

  .brand-lockup{
    top:50px;
    width:112px;
  }

  body[data-screen="home"] .agent-stage{--agent-top:116px;--agent-width:254px}
  body[data-screen="success"] .agent-stage{--agent-top:96px;--agent-width:254px}

  body[data-screen="build"] .agent-stage,
  body[data-screen="orchestrate"] .agent-stage,
  body[data-screen="workspace"] .agent-stage,
  body[data-screen="agents"] .agent-stage,
  body[data-screen="invite"] .agent-stage{
    --agent-top:92px;
    --agent-width:198px;
  }

  .home-content{
    top:min(clamp(304px,51vh,410px), calc(var(--app-height) - 320px));
    top:min(clamp(304px,51dvh,410px), calc(var(--app-height) - 320px));
    width:calc(100% - 48px);
  }

  h1{
    font-size:clamp(36px,5.8vh,46px);
    font-size:clamp(36px,5.8dvh,46px);
  }

  .home-content p{
    font-size:clamp(14px,2vh,17px);
    font-size:clamp(14px,2dvh,17px);
    margin-top:clamp(12px,2.4vh,20px);
    margin-top:clamp(12px,2.4dvh,20px);
  }

  .home-content .primary-action{
    margin-top:clamp(18px,3.8vh,34px);
    margin-top:clamp(18px,3.8dvh,34px);
  }

  .divider{
    margin:clamp(12px,2.4vh,20px) auto clamp(8px,1.8vh,14px);
    margin:clamp(12px,2.4dvh,20px) auto clamp(8px,1.8dvh,14px);
  }

  .glass-card h2,
  .list-card h2,
  .form-card h2{
    font-size:26px;
  }

  .screen-build{ --step-top:240px; }
  .screen-orchestrate{ --step-top:184px; }
  .screen-invite{ --step-top:228px; }
  .screen-workspace{ --step-top:228px; }
  .screen-agents{ --step-top:228px; }

  .build-card{
    width:calc(100% - 64px);
    padding:46px 20px 20px;
  }

  .build-fields{
    gap:10px;
    margin-top:22px;
  }

  .detail-field{
    padding:10px 12px;
    border-radius:13px;
  }

  .detail-field textarea{
    min-height:82px;
  }

  .choice-grid{
    gap:12px;
    margin-top:22px;
  }

  .choice-card{
    min-height:52px;
    font-size:15px;
  }

  .mini-q-label{
    margin-top:14px;
    font-size:12px;
  }

  .pill-row{
    gap:8px;
    margin-top:8px;
  }

  .pill{
    min-height:34px;
    padding:0 12px;
    font-size:13px;
  }

  .card-action{
    min-height:58px;
    margin-top:18px;
  }

  .list-card{
    width:calc(100% - 64px);
    padding:38px 18px 18px;
  }

  .stack-card{
    padding:38px 18px 18px;
  }

  .stack-tools{
    gap:8px;
    margin-top:18px;
  }

  .stack-tools .pill{
    min-height:34px;
    font-size:12px;
  }

  .stack-custom{
    margin-top:10px;
  }

  .count-card{
    width:calc(100% - 64px);
    padding:46px 18px 30px;
  }

  .count-card h2{
    font-size:26px;
  }

  .count-row{
    gap:6px;
    margin-top:22px;
  }

  .count-row .pill{
    min-width:54px;
  }

  .form-card{
    width:calc(100% - 64px);
    padding:38px 18px 18px;
  }

  .success-card{
    width:calc(100% - 62px);
  }

  .option-list{
    gap:8px;
    margin-top:18px;
  }

  .option-row{
    min-height:48px;
    grid-template-columns:38px 1fr 30px;
    gap:10px;
    padding:0 14px;
    font-size:15px;
  }

  .option-icon{
    width:32px;
    height:32px;
  }

  .option-icon svg,
  .field-row svg{
    width:20px;
    height:20px;
  }

  .env-thumb{
    height:56px;
  }

  .env-name{
    font-size:14px;
  }

  .env-sub{
    font-size:11px;
  }

  .card-note{
    margin-top:16px;
    font-size:15px;
  }

  .bottom-nav{
    width:calc(100% - 74px);
  }

  .icon-nav{
    height:54px;
    padding:0 18px 0 14px;
    font-size:15px;
  }

  .nav-next{
    min-height:54px;
  }

  .invite-form{
    gap:10px;
    margin-top:20px;
  }

  .field-row{
    min-height:48px;
    padding:0 15px;
  }

  .textarea-row{
    min-height:78px;
    padding-top:12px;
  }

  .textarea-row textarea{
    min-height:54px;
  }

  .form-action{
    min-height:60px;
  }

  .success-card{
    padding:52px 20px 24px;
  }

  .success-card h2{
    font-size:32px;
  }

  .success-card p{
    margin-top:16px;
    font-size:15px;
  }

  .success-card .muted{
    margin-top:12px;
  }

  .screen-success{
    padding-top:clamp(258px,40dvh,334px);
  }
}

@media (max-height:820px){
  body[data-screen="home"] .agent-stage{--agent-top:clamp(78px,13vh,104px);--agent-width:clamp(190px,31vh,236px)}
  body[data-screen="home"] .agent-stage{--agent-top:clamp(78px,13dvh,104px);--agent-width:clamp(190px,31dvh,236px)}
  body[data-screen="success"] .agent-stage{--agent-top:96px;--agent-width:242px}

  body[data-screen="build"] .agent-stage,
  body[data-screen="orchestrate"] .agent-stage,
  body[data-screen="workspace"] .agent-stage,
  body[data-screen="agents"] .agent-stage,
  body[data-screen="invite"] .agent-stage{
    --agent-top:82px;
    --agent-width:186px;
  }

  .home-content{top:min(clamp(286px,50vh,390px), calc(var(--app-height) - 300px))}
  .home-content{top:min(clamp(286px,50dvh,390px), calc(var(--app-height) - 300px))}
  .access-pill{min-height:30px;font-size:12px}
  h1{margin-top:clamp(12px,2.2vh,20px);font-size:clamp(34px,5.7vh,42px)}
  h1{margin-top:clamp(12px,2.2dvh,20px);font-size:clamp(34px,5.7dvh,42px)}
  .home-content p{margin-top:clamp(10px,2vh,18px);font-size:clamp(13px,2vh,15px)}
  .home-content p{margin-top:clamp(10px,2dvh,18px);font-size:clamp(13px,2dvh,15px)}
  .home-content .primary-action{margin-top:clamp(16px,3.5vh,28px)}
  .home-content .primary-action{margin-top:clamp(16px,3.5dvh,28px)}
  .primary-action{min-height:clamp(54px,8vh,60px);font-size:16px}
  .primary-action{min-height:clamp(54px,8dvh,60px);font-size:16px}
  .screen-build{--step-top:224px}
  .screen-orchestrate{--step-top:176px}
  .screen-invite{--step-top:214px}
  .screen-workspace{--step-top:214px}
  .screen-agents{--step-top:214px}
  .choice-card{min-height:55px;font-size:15px}
  .card-action{margin-top:20px}
  .option-list{gap:9px;margin-top:20px}
  .option-row{min-height:54px;font-size:15px}
  .invite-form{gap:10px;margin-top:22px}
  .field-row{min-height:52px}
  .textarea-row{min-height:88px}
  .screen-success{padding-top:clamp(238px,38dvh,314px)}
  .success-card{padding-bottom:28px}
  .success-card h2{font-size:32px}
  .success-card p{font-size:15px;margin-top:16px}
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }

  .intro-pill{
    stroke-dashoffset:0 !important;
  }

  .intro-eye,
  .intro-wordmark{
    opacity:1 !important;
    transform:none !important;
  }
}

/* Step 3 — workspace / 3D environment picker */
.env-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
}

.env-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:10px 10px 12px;
  border:1px solid rgba(178,194,216,.46);
  border-radius:16px;
  background:rgba(255,255,255,.42);
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(74,95,125,.06);
  transition:transform .22s var(--ease), border-color .22s ease, box-shadow .22s ease;
}

.env-card.is-selected{
  border-color:#4a8dff;
  box-shadow:0 0 0 1px rgba(74,141,255,.34),0 12px 28px rgba(82,126,232,.18);
}

.env-thumb{
  width:100%;
  height:62px;
  border-radius:11px;
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

/* placeholder 3D-environment looks — swap for real renders/thumbnails later */
.env-nebula{background:radial-gradient(120% 90% at 20% 10%,#7b6cf0,transparent 60%),radial-gradient(120% 90% at 90% 90%,#3aa0ff,transparent 55%),linear-gradient(135deg,#1f2348,#3a2f73);}
.env-atrium{background:radial-gradient(120% 90% at 80% 0%,#ffffff,transparent 55%),linear-gradient(135deg,#dff0ff,#bcd6f5);}
.env-grid3d{background:linear-gradient(135deg,#0e1430,#212a5e),repeating-linear-gradient(0deg,rgba(95,200,255,.35) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,rgba(95,200,255,.35) 0 1px,transparent 1px 10px);}
.env-garden{background:radial-gradient(120% 90% at 25% 15%,#bff3d0,transparent 60%),linear-gradient(135deg,#8fdcb0,#5bb88a);}

.env-name{
  color:#14213b;
  font-size:15px;
  font-weight:700;
}

.env-sub{
  color:#5d6e8a;
  font-size:12px;
  font-weight:500;
}