/* /start/ — the 30-day free trial sign-up (signup-funnel PLAN §4.1 S3-S6). Hand-written, committed.
   Tokens from site.css only; logical properties (mirrors under dir="rtl"); every looping animation
   stops under prefers-reduced-motion, where the waiting screen becomes a static list + <progress>. */

/* ------------------------------------------------------------ step indicator */
.start__progress{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:0 0 var(--s-5);padding:0}
.start__progress li{display:flex;align-items:center;gap:var(--s-2);color:var(--text-3);font-weight:600;font-size:15px}
.start__progress li span{display:inline-flex;align-items:center;justify-content:center;inline-size:28px;block-size:28px;border-radius:50%;
  border:2px solid var(--border-strong);font-size:14px;font-weight:700}
.start__progress li[aria-current="step"]{color:var(--text)}
.start__progress li[aria-current="step"] span{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.start__progress li.is-done span{border-color:var(--brand);color:var(--brand)}
.start__eyebrow{font-size:14px;font-weight:700;color:var(--brand);margin:0 0 4px;text-transform:uppercase;letter-spacing:.04em}
:lang(ar) .start__eyebrow{text-transform:none;letter-spacing:0}
.start__step > h2{margin:0 0 var(--s-2)}
/* step 1 heading row: the step bar above already says "1 Choose your apps", so the eyebrow is for screen readers only
   and the note sits beside the heading, keeping the quick starts and the first row of apps on the first screen */
.start__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin:0 0 var(--s-5)}
.start__head > h2{margin:0;font-size:clamp(24px,2.2vw,30px)}
.start__head > h2:focus{outline:none}
.start__head .start__note{margin:0}
.start__step > h2:focus{outline:none}
.start__note{display:inline-block;margin:0 0 var(--s-5);padding:8px 14px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--text);font-size:15px}
.start__step .quote__summary h3{font-size:20px;margin:0 0 var(--s-2)}
@media (max-width:959.98px){.start__step .quote__summary h3{display:none}}
.start__step[data-step="account"]{display:grid;gap:var(--s-4);max-inline-size:760px}
.start__step[data-step="account"][hidden]{display:none}
.start__picked{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-3);padding:10px 14px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--surface-1);font-size:15px}
.start__picked p{margin:0;flex:1 1 240px;min-inline-size:0}
.start__nojs p{margin:0}
/* "Your own servers" picked: the trial still runs in our cloud (R53) */
.start__own{margin:var(--s-3) 0 0;padding:10px 14px;border-radius:var(--r-sm);border-inline-start:4px solid var(--brand);
  background:var(--brand-soft);color:var(--text);font-size:15px;text-align:start}
.start__own:empty{display:none}
.ready .start__own{max-inline-size:560px;margin:var(--s-3) auto 0}

/* ------------------------------------------------------------ app picker (R69)
   A grid of app cards with the launcher's own tiles (one inline sprite); a native checkbox stays the
   focus target inside each card. Desktop 4-5 columns of upright cards, tablet 2 of wide cards, phone 2
   compact ones; the summary is the sticky side panel on desktop and the sticky bottom bar below 960 px. */
.appsprite{position:absolute;inline-size:0;block-size:0;overflow:hidden}
/* The picker is the page's job: a compact hero aligned with the full-width picker, so the quick starts and the
   first row of apps are on the first screen (1440 x 900) instead of below the fold. start.css loads on /start/ only. */
.hero--page[data-hero]{padding-block:clamp(20px,3vw,40px) clamp(12px,2vw,24px)}
.hero--page[data-hero] > .container{max-inline-size:var(--container-wide)}
.hero--page[data-hero] .crumbs{margin-block-end:var(--s-2)}
.hero--page[data-hero] h1{font-size:clamp(28px,3vw,40px)}
.hero--page[data-hero] .hero__lead{margin-block:var(--s-2) 0;font-size:clamp(16px,1.4vw,18px)}
.start-band{padding-block-start:clamp(12px,2vw,24px)}
/* site.css caps every .form at 560 px (a contact form); the sign-up form holds the full-width grid, step 2 keeps its own 760 px */
.start__form{max-inline-size:none}
@media (min-width:960px){.picker{grid-template-columns:minmax(0,1fr) 280px}}
.picker h3{font-size:18px;margin:0 0 2px}
.picker__outcome{font-size:14.5px;color:var(--text-3);margin:0 0 var(--s-3)}
.picker__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-3);margin:0 0 var(--s-3)}
.picker__head > h3,.picker__head > .picker__outcome{margin:0}
.picker__more{margin-block:var(--s-6) var(--s-3)!important}

.picker__qs{margin:0 0 var(--s-5)}
.bundles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:var(--s-3)}
.bundles li{display:flex;min-inline-size:0}
.bundle{display:flex;flex-direction:column;align-items:flex-start;gap:4px;inline-size:100%;text-align:start;padding:var(--s-3) var(--s-4);
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-1);color:var(--text);font:inherit;cursor:pointer}
.bundle:hover{border-color:var(--border-strong);box-shadow:var(--shadow-raised)}
.bundle[aria-pressed="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
.bundle.is-some{border-color:var(--brand);border-style:dashed}
.bundle__icons{display:flex;align-items:center;gap:4px;margin-block-end:4px}
.bundle__more{font-size:12.5px;font-weight:700;color:var(--text-3);padding-inline-start:2px}
.bundle__title{font-weight:700;font-size:16px;line-height:1.3}
.bundle__line{font-size:14px;color:var(--text-2);line-height:1.4}
.bundle__n{margin-block-start:auto;padding-block-start:4px;font-size:13px;color:var(--text-3);font-weight:600}
.bundle[aria-pressed="true"] .bundle__n{color:var(--brand)}
.bundle[aria-pressed="true"] .bundle__n::before{content:"\2713\00a0"}

.picker__bar{display:grid;gap:var(--s-3);margin:0 0 var(--s-5)}
.picker__search{max-inline-size:440px}
.picker__chips{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:1200px){.picker__bar{grid-template-columns:minmax(240px,320px) minmax(0,1fr);align-items:start}.picker__search{max-inline-size:none}}
.picker__chip{gap:6px;min-block-size:36px;font:inherit;font-size:14px;cursor:pointer}
.picker__chip:hover{border-color:var(--brand);color:var(--brand)}
.picker__chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.picker__n{font-size:12.5px;font-weight:700;opacity:.75}

.picker__sec{margin:0 0 var(--s-6)}
.picker__sec[hidden],.appcard[hidden]{display:none!important}
.picker__iso > summary h3{margin:0;font-size:18px}
.picker__iso > div,.picker__iso > p,.picker__iso > .pickgrid{margin-inline:var(--s-4)}
.picker__iso > .pickgrid{margin-block-end:var(--s-4)}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(172px,100%),1fr));gap:var(--s-3)}
.appcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);min-inline-size:0;
  padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--text);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background-color .15s}
.appcard:hover{border-color:var(--border-strong);box-shadow:var(--shadow-raised)}
.appcard__input{position:absolute;inset-block-start:var(--s-3);inset-inline-end:var(--s-3);inline-size:24px;block-size:24px;margin:0;opacity:0;cursor:pointer}
.appcard:has(.appcard__input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.appcard:has(.appcard__input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-soft)}
.appicon{display:block;flex:none;inline-size:44px;block-size:44px}
.appicon--mini{inline-size:22px;block-size:22px}
.appcard__body{display:flex;flex-direction:column;gap:2px;min-inline-size:0;inline-size:100%}
.appcard__name{font-weight:700;font-size:15.5px;line-height:1.3;padding-inline-end:22px;overflow-wrap:anywhere}
.appcard__line{font-size:13.5px;color:var(--text-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.appcard__check{position:absolute;inset-block-start:var(--s-3);inset-inline-end:var(--s-3);display:grid;place-items:center;inline-size:24px;block-size:24px;
  border-radius:50%;border:2px solid var(--border-strong);background:var(--bg);pointer-events:none}
.appcard__check::after{content:"";inline-size:6px;block-size:11px;margin-block-start:-3px;border:solid var(--on-brand);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);opacity:0}
.appcard:has(.appcard__input:checked) .appcard__check{border-color:var(--brand);background:var(--brand)}
.appcard:has(.appcard__input:checked) .appcard__check::after{opacity:1}
.appcard.is-included{cursor:default;background:var(--surface-1);border-style:dashed}
.appcard.is-included:hover{box-shadow:none;border-color:var(--border)}
.appcard__inc{margin-block-start:auto;font-size:12.5px;font-weight:700;padding:1px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2)}
.appcard__inc::before{content:"\2713\00a0";color:var(--success-text)}
.picker__none{display:grid;justify-items:start;gap:var(--s-2);padding:var(--s-4);margin:0 0 var(--s-5);border:1px dashed var(--border-strong);border-radius:var(--r-md)}
.picker__none[hidden]{display:none}
.picker__none p{margin:0}

.picker__picks{gap:6px;max-block-size:280px}
.picker__picks li{padding:0;border:0;background:none;border-radius:0}
.pick{display:inline-flex;align-items:center;gap:6px;min-block-size:32px;padding-block:3px;padding-inline:4px 9px;border:1px solid var(--border);
  border-radius:var(--r-pill);background:var(--bg);color:var(--text);font:inherit;font-size:13px;line-height:1.3;cursor:pointer;text-align:start}
.pick:hover{border-color:var(--danger-text)}
.pick__x{color:var(--text-3);font-size:16px;line-height:1}
.pick:hover .pick__x{color:var(--danger-text)}
.picker__empty{font-size:14px;color:var(--text-3);margin:0 0 var(--s-2)}
.picker__empty[hidden]{display:none}
.picker__always{font-size:13.5px;color:var(--text-3);margin:0 0 var(--s-3)}

@media (min-width:600px) and (max-width:959.98px){
  .pickgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .appcard{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:var(--s-3)}
  .appcard__inc{grid-column:2;justify-self:start}
}
@media (max-width:959.98px){.picker__empty,.picker__always{display:none!important}}
@media (max-width:599.98px){
  .pickgrid,.bundles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
  .appcard{padding:var(--s-3)}
  .appicon{inline-size:38px;block-size:38px}
  .appicon--mini{inline-size:20px;block-size:20px}
  .appcard__check,.appcard__input{inset-block-start:10px;inset-inline-end:10px}
  .appcard__name{font-size:14.5px}
  .appcard__line{font-size:13px}
  .bundle{padding:var(--s-3)}
  .bundle__line{display:none}
  .picker__search{max-inline-size:none}
  .picker__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:2px}
  .picker__chip{flex:none;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.appcard,.bundle{transition:none}}

/* ------------------------------------------------------- workspace address */
.slug__status{font-size:14px;line-height:1.45;color:var(--text-3);margin:0;overflow-wrap:anywhere}
.slug__status:empty{display:none}
.slug__status[data-state="ok"]{color:var(--success-text);font-weight:600}
.slug__status[data-state="ok"]::before{content:"✓ "}
.slug__status[data-state="bad"]{color:var(--danger-text);font-weight:600}

/* ---------------------------------------------------------------- password */
.pw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pw__toggle{min-inline-size:76px}
.pwrules{list-style:none;display:flex;flex-wrap:wrap;gap:4px var(--s-4);margin:0;padding:0;font-size:14px;color:var(--text-3)}
.pwrules li{display:flex;align-items:center;gap:6px}
.pwrules li::before{content:"";inline-size:14px;block-size:14px;border-radius:50%;border:2px solid var(--border-strong);flex:none}
.pwrules li.is-ok{color:var(--success-text)}
.pwrules li.is-ok::before{border-color:var(--success-text);background:var(--success-text);
  box-shadow:inset 0 0 0 2px var(--bg)}
/* the password's error line keeps its place while empty, so leaving the field never moves the terms box
   under the pointer (a first click on it was lost, R53); a longer, wrapped error waits for the press (start.js) */
.start__step #f-password-err[hidden]{display:block;visibility:hidden;min-block-size:calc(14px * 1.45)}
.start__step #f-password-err{min-block-size:calc(14px * 1.45)}
.start__terms{padding-inline:0;color:var(--text)}
.start__terms:hover{background:none}
.start__form .form__actions{margin-block-start:var(--s-2)}
.start__reassure{margin:calc(-1 * var(--s-2)) 0 0;font-size:14px;color:var(--text-2)}

/* ------------------------------------------------------------ waiting/ready */
.wait,.ready{position:relative;overflow:hidden;isolation:isolate;min-block-size:min(88vh,860px);display:grid;align-items:center;
  padding-block:clamp(40px,8vw,96px);background:var(--bg);border-block-start:1px solid var(--border)}
.wait[hidden],.ready[hidden]{display:none}
.wait__sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.wait__sky i{position:absolute;inline-size:60vmax;block-size:60vmax;border-radius:50%;filter:blur(70px);opacity:.22}
.wait__sky i:nth-child(1){background:radial-gradient(circle,#2f6bf6 0,transparent 65%);inset-block-start:-25vmax;inset-inline-start:-15vmax;animation:sky1 22s ease-in-out infinite alternate}
.wait__sky i:nth-child(2){background:radial-gradient(circle,#0bb6cf 0,transparent 65%);inset-block-end:-30vmax;inset-inline-end:-20vmax;animation:sky2 26s ease-in-out infinite alternate}
.wait__sky i:nth-child(3){background:radial-gradient(circle,#7c5cff 0,transparent 65%);inset-block-start:10%;inset-inline-start:35%;inline-size:40vmax;block-size:40vmax;opacity:.16;animation:sky3 30s ease-in-out infinite alternate}
@keyframes sky1{to{transform:translate(18vmax,10vmax) scale(1.15)}}
@keyframes sky2{to{transform:translate(-14vmax,-12vmax) scale(1.1)}}
@keyframes sky3{to{transform:translate(-10vmax,12vmax) scale(.85)}}
.wait__inner,.ready__inner{position:relative;text-align:center;max-inline-size:680px}
.wait h2,.ready h2{font-size:clamp(24px,3.2vw,36px);margin:0 0 var(--s-2)}
.wait h2:focus,.ready h2:focus{outline:none}
.wait__host{font-weight:700;color:var(--brand);margin:0 0 var(--s-2);overflow-wrap:anywhere}
.wait__host:empty{display:none}
.wait__usual{color:var(--text-2);margin:0 0 var(--s-5)}

/* brand mark: a ring tied to the real finished steps, three orbiting dots */
.wait__mark{position:relative;inline-size:132px;block-size:132px;margin:0 auto var(--s-5)}
.wait__ring{inline-size:100%;block-size:100%;transform:rotate(-90deg)}
.wait__track{fill:none;stroke:var(--border);stroke-width:6}
.wait__arc{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:339.29;
  transition:stroke-dashoffset .8s var(--ease)}
.wait__logo{position:absolute;inset:0;display:grid;place-items:center}
.wait__logo .logo-mark{inline-size:56px;block-size:56px;border-radius:16px;box-shadow:var(--shadow-overlay);animation:breathe 3.2s ease-in-out infinite}
.wait__orbit{position:absolute;inset:-10px;animation:orbit 7s linear infinite}
.wait__orbit i{position:absolute;inline-size:10px;block-size:10px;border-radius:50%;background:#0bb6cf;inset-block-start:0;inset-inline-start:calc(50% - 5px);
  box-shadow:0 0 12px #0bb6cf}
.wait__orbit i:nth-child(2){inset-block-start:auto;inset-block-end:12%;inset-inline-start:6%;background:var(--brand);box-shadow:0 0 12px var(--brand);inline-size:8px;block-size:8px}
.wait__orbit i:nth-child(3){inset-block-start:auto;inset-block-end:12%;inset-inline-start:auto;inset-inline-end:6%;background:#7c5cff;box-shadow:0 0 12px #7c5cff;inline-size:6px;block-size:6px}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.06)}}

/* the five steps the server reports */
.wait__steps{list-style:none;display:grid;gap:6px;margin:0 auto var(--s-4);padding:0;max-inline-size:520px;text-align:start}
.wstep{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:var(--s-3);padding:10px 14px;border-radius:var(--r-md);
  color:var(--text-3);background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid transparent;transition:color var(--dur-3),border-color var(--dur-3)}
.wstep__icon{position:relative;inline-size:24px;block-size:24px;border-radius:50%;border:2px solid var(--border-strong)}
.wstep[data-state="active"]{color:var(--text);font-weight:650;border-color:var(--border)}
.wstep[data-state="active"] .wstep__icon{border-color:var(--brand);border-block-start-color:transparent;animation:orbit .9s linear infinite}
.wstep[data-state="done"]{color:var(--text)}
.wstep[data-state="done"] .wstep__icon{border-color:var(--success-text);background:var(--success-text);animation:pop .4s var(--ease)}
.wstep[data-state="done"] .wstep__icon::after{content:"";position:absolute;inset-inline:0;margin-inline:auto;inset-block-start:2px;inline-size:6px;block-size:11px;
  border:solid var(--bg);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

.wait__bar{display:none}
.wait__bar progress{inline-size:min(100%,420px);block-size:10px;accent-color:var(--brand)}
.wait__lines{list-style:none;margin:var(--s-4) auto 0;padding:0;min-block-size:3.2em;max-inline-size:520px;color:var(--text-2)}
.wait__lines li{display:none}
.wait__lines li.is-on{display:block;animation:fadein .6s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wait__slow{margin:var(--s-4) auto 0;max-inline-size:520px;padding:12px 16px;border-radius:var(--r-md);background:var(--warn-soft);color:var(--text)}
.wait__net{margin:var(--s-3) 0 0;font-size:14px;color:var(--text-3)}
.wait__fail{max-inline-size:560px;margin:0 auto var(--s-5);padding:var(--s-5);border:1px solid var(--danger-text);border-radius:var(--r-lg);
  background:var(--danger-soft);text-align:start}
.wait__fail h2{font-size:clamp(20px,2.4vw,26px)}
.wait__fail .btn-row,.ready .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.ready .btn-row{justify-content:center;margin-block:var(--s-4) var(--s-2)}
.wait .form__privacy,.ready .form__privacy{margin-block-start:var(--s-5)}

/* ready: a check that draws itself */
.ready__check{inline-size:84px;block-size:84px;margin:0 auto var(--s-4)}
.ready__check svg{inline-size:100%;block-size:100%}
.ready__check circle{fill:var(--success-soft);stroke:var(--success-text);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s var(--ease) forwards}
.ready__check path{fill:none;stroke:var(--success-text);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;
  animation:draw .4s .5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

@media (max-width:479.98px){
  .wait,.ready{min-block-size:auto}
  .wait__mark{inline-size:108px;block-size:108px}
  .wstep{padding:8px 10px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .wait__sky,.wait__orbit,.wait__mark{display:none}
  .wait__bar{display:block;margin:0 auto var(--s-4)}
  .wstep,.wstep__icon,.wait__arc,.wait__lines li.is-on,.wait__logo .logo-mark{animation:none!important;transition:none!important}
  .wstep[data-state="active"] .wstep__icon{border-block-start-color:var(--brand)}
  .ready__check circle,.ready__check path{animation:none;stroke-dashoffset:0}
}