/* /start — "Meet ANCI" (screen 1 of the first-time experience). One thing per
   screen, big type, a little motion; one column on a phone. */
:root{
  --st-blue:#2f6bff; --st-blue-2:#1f56e6; --st-ink:#0f1a3d; --st-ink-2:#4f5d7a; --st-ink-3:#6b7690;
  --st-bg:#f4f6fb; --st-card:#ffffff; --st-line:#e6ebf5; --st-tint:#eef3ff; --st-tint-2:#e3ecff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--st-bg);color:var(--st-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.st{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:36px 16px 28px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.st-card{width:100%;max-width:1360px;background:var(--st-card);border:1px solid var(--st-line);border-radius:28px;
  box-shadow:0 30px 80px -40px rgba(31,86,230,.18),0 2px 6px rgba(15,26,61,.04);padding:26px 52px 36px}

/* top bar */
.st-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.st-logo img{width:124px;height:auto}
.st-nav{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--st-ink-2)}
.st-signin{display:inline-block;padding:10px 22px;border:1.5px solid var(--st-line);border-radius:999px;color:var(--st-blue);
  font-weight:600;text-decoration:none;background:#fff;transition:border-color .2s,box-shadow .2s}
.st-signin:hover{border-color:#c9d6f6;box-shadow:0 4px 14px rgba(47,107,255,.12)}

/* hero: text left, art right */
.st-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;margin-top:28px}
.st-copy{order:1;max-width:660px;padding-left:12px}
.st-art{order:2;margin:0}
.st-art img{width:100%;max-width:760px;margin:0 auto; /* no float animation — the art holds still (per Raj, 2026-10-07) */
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 58%,transparent 100%)}

.st-eyebrow{margin:0 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--st-blue)}
h1{margin:0;font-size:clamp(44px,6.6vw,88px);line-height:1;font-weight:800;letter-spacing:-.025em;color:var(--st-ink)}
h1 span{color:var(--st-blue)}
.st-sub{margin:12px 0 0;font-size:clamp(24px,2.8vw,38px);font-weight:500;letter-spacing:-.01em;color:var(--st-ink-2);text-wrap:balance}
.st-lede{margin:26px 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--st-ink-2)}

.st-benefits{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-content:start;gap:22px 36px} /* columns share the width; a long title wraps inside its own column instead of running into the next icon (per Raj, 2026-10-14) */ /* two columns while they fit, one when the art squeezes the text column (per Raj, 2026-10-07) */
.st-benefits li{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center}
.st-ico{grid-row:1/3;width:56px;height:56px;border-radius:50%;background:var(--st-tint);display:flex;align-items:center;justify-content:center}
.st-ico svg{width:26px;height:26px;fill:none;stroke:var(--st-blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.st-benefits b{font-size:16px;font-weight:600;color:var(--st-ink);white-space:normal;line-height:1.3}
.st-benefits small{font-size:14px;color:var(--st-ink-3)}
.st-benefits .st-phone{display:none}

.st-cta{display:flex;align-items:center;justify-content:center;gap:14px;margin:44px 0 0;width:100%;max-width:600px;
  padding:22px 28px;border-radius:18px;background:var(--st-blue);color:#fff;font-size:22px;font-weight:600;text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(47,107,255,.55);transition:transform .18s,box-shadow .18s,background .18s}
.st-cta svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.st-cta:hover{background:var(--st-blue-2);transform:translateY(-1px);box-shadow:0 18px 34px -10px rgba(47,107,255,.6)}
.st-cta:hover svg{transform:translateX(4px)}
.st-cta:active{transform:translateY(0)}
.st-copy{padding-bottom:8px}
.st-have-m{display:none}
/* welcome, every width: no logo bar and no lede — the page opens on the hero; Sign in moves under the CTA (per Raj, 2026-10-07) */
body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-lede,body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-eyebrow{display:none} /* no lede and no "Welcome to ANCI" eyebrow on any width (per Raj, 2026-10-07) */
body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-have-m{display:block;margin:18px 0 0;font-size:15px;color:var(--st-ink-2)}
body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-have-m a{color:var(--st-blue);font-weight:600;text-decoration:none}


/* motion: a staged fade-in, and the mascot's gentle float */
.st-in{animation:st-up .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes st-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes st-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion: reduce){.st-in{animation:none}.st-art img{animation:none}}

/* phone: one column — logo + Sign in, the art, then the words, the CTA, the sign-in line */
@media (max-width: 1023px){
  body.st{padding:0;align-items:stretch}
  .st-card{max-width:800px;margin:0 auto;border:0;border-radius:0;box-shadow:none;padding:18px 20px 36px;min-height:100vh} /* the phone layout is capped at 800px and centred on a tablet (per Raj, 2026-10-07) */
  .st-logo img{width:104px}
  .st-have{display:none}
  .st-hero{grid-template-columns:1fr;gap:6px;margin-top:6px;text-align:center}
  .st-art{order:1}
  .st-art img{max-width:420px}
  .st-copy{order:2;max-width:none;padding:0}
  .st-eyebrow{margin-top:4px}
  h1{font-size:clamp(46px,13vw,64px)}
  .st-sub{font-size:clamp(22px,6vw,30px)}
  .st-lede{margin-top:18px;font-size:17px}
  .st-benefits{margin-top:30px;gap:22px 14px;grid-template-columns:1fr 1fr;justify-content:stretch}
  .st-benefits b{font-size:15px;white-space:normal}
  .st-benefits small,.st-benefits .st-desk{display:none} /* phone: no subtext — the title carries the essentials (per Raj, 2026-10-07) */
  .st-benefits .st-phone{display:inline}
  .st-benefits li{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;row-gap:4px;text-align:center}
  .st-ico{grid-row:auto;margin-bottom:6px}
  .st-cta{margin-top:34px;max-width:none;padding:20px}
  .st-have-m{display:block;margin:18px 0 0;font-size:15px;color:var(--st-ink-2)}
  .st-have-m a{color:var(--st-blue);font-weight:600;text-decoration:none}
}

/* steps (Hi, …): a segmented progress bar, a form in place of the benefits */
.st-progress{list-style:none;display:flex;gap:10px;margin:30px 0 0;padding:0 0 0 12px}
.st-progress li{width:72px;height:5px;border-radius:3px;background:#e6ebf5}
.st-progress li.on{background:var(--st-blue)}
.st-step-label{margin:12px 0 0;padding-left:12px;font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--st-blue)}
.st-step .st-hero{margin-top:18px;align-items:center}
.st-step .st-art img{max-width:540px;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 52%,#000 58%,transparent 100%)}
.st-step .st-lede{max-width:560px}
.st-step h1{font-size:clamp(42px,5.8vw,78px)}
.st-step h1 span{color:var(--st-blue)}
.st-q{display:block;margin:40px 0 12px;font-size:21px;font-weight:600;color:var(--st-ink)}
.st-field{position:relative;max-width:600px}
.st-field input{width:100%;height:66px;padding:0 54px 0 22px;border:2px solid var(--st-blue);border-radius:14px;background:#fff;color:var(--st-ink);
  font:inherit;font-size:21px;outline:none;box-shadow:0 0 0 4px rgba(47,107,255,.10);transition:box-shadow .15s}
.st-field input:focus{box-shadow:0 0 0 5px rgba(47,107,255,.18)}
.st-clear{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:#dfe6f3;color:#5c6b8a;
  font-size:18px;line-height:28px;cursor:pointer;padding:0}
.st-clear:hover{background:#cbd6ec;color:var(--st-ink)}
@media (max-width: 1023px){
  .st-step .st-top{justify-content:center}
  .st-progress{justify-content:center;padding:0;margin-top:16px}
  .st-progress li{width:60px}
  .st-step-label{text-align:center;padding:0}
  .st-step .st-hero{margin-top:4px}
  .st-step .st-art img{max-width:400px}
  .st-step h1{font-size:clamp(44px,12vw,60px)}
  .st-q{margin-top:32px;text-align:left;font-size:19px}
  .st-field{max-width:none}
  .st-field input{height:62px;font-size:19px}
  .st-step .st-cta{margin-top:22px}
}

/* step 2: the calendar — two provider cards and a quiet "Maybe later" */
.st-h1-two{line-height:1.05}
.st-providers{display:flex;flex-direction:column;gap:14px;margin:34px 0 0;max-width:600px}
.st-provider{display:flex;align-items:center;gap:18px;padding:18px 22px;border:1.5px solid var(--st-line);border-radius:16px;background:#fff;color:var(--st-ink);
  text-decoration:none;font-size:19px;font-weight:600;box-shadow:0 1px 2px rgba(15,26,61,.04);transition:border-color .18s,box-shadow .18s,transform .18s}
.st-provider .st-pico{width:28px;height:28px;flex:0 0 28px}
.st-line,.st-step h1 .st-line{display:block;color:inherit}
.st-provider span{flex:1}
.st-provider svg{width:22px;height:22px;fill:none;stroke:#8a94ad;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s,stroke .18s}
.st-provider:hover{border-color:#c9d6f6;box-shadow:0 10px 26px -12px rgba(47,107,255,.35);transform:translateY(-1px)}
.st-provider:hover svg{stroke:var(--st-blue);transform:translateX(3px)}
.st-later{display:inline-block;margin:26px 0 0;font-size:16px;font-weight:500;color:var(--st-blue);text-decoration:none;opacity:.85}
.st-later:hover{text-decoration:underline;opacity:1}
@media (max-width: 1023px){
  .st-line{display:inline}
  .st-providers{max-width:none;margin-top:26px;text-align:left}
  .st-provider{padding:17px 18px;font-size:17px}
  .st-later{margin-top:22px}
}

/* step 3: the people — two choices with counts, a quiet skip, and the skip confirm */
.st-choice{width:100%;text-align:left;cursor:pointer;font-family:inherit}
.st-choice:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.st-provider .st-pic{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--st-tint);display:flex;align-items:center;justify-content:center}
.st-pic svg{width:22px;height:22px;fill:none;stroke:var(--st-blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.st-choice-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.st-choice-text b{font-size:18px;font-weight:600;color:var(--st-ink)}
.st-choice-text small{font-size:13.5px;font-weight:500;color:var(--st-ink-3)}
.st-choice .st-chev{width:22px;height:22px;fill:none;stroke:#8a94ad;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px}
.st-choice:hover:not(:disabled) .st-chev{stroke:var(--st-blue);transform:translateX(3px)}
.st-later-btn{border:0;background:none;cursor:pointer;font-family:inherit;padding:0;display:block;margin-top:22px}
.st-hero-one{grid-template-columns:minmax(0,680px);justify-content:start}
.st-confirm .st-hero{margin-top:40px}
.st-h1-one{white-space:nowrap;font-size:clamp(40px,5.2vw,72px)}
@media (max-width: 1023px){
  .st-choice-text b{font-size:16px}
  .st-choice-text small{font-size:12.5px}
  .st-hero-one{grid-template-columns:1fr}
  .st-h1-one{white-space:normal;font-size:clamp(40px,11vw,56px)}
  .st-confirm .st-hero{margin-top:16px}
  .st-confirm .st-copy{text-align:left}
  .st-confirm .st-later-btn{margin:20px auto 0;display:block}
}
.st-known{margin:18px 0 0;font-size:14px;color:var(--st-ink-3)}

/* the account page, "Setting Up ANCI": the four jobs, drawn as part of the steps */
.st-top-center{justify-content:center}
.st-progress-center{justify-content:center;padding:0}
.st-center{text-align:center;padding-left:0}
.st-setup-body{max-width:900px;margin:10px auto 0}
.st-setup h1{font-size:clamp(36px,4.6vw,56px)}
.st-setup .st-lede{margin:12px auto 0;max-width:560px}
.st-jobs{margin:28px auto 0;padding:14px;background:#fff;border:1px solid var(--st-line);border-radius:20px;box-shadow:0 20px 50px -30px rgba(31,86,230,.25)}
.st-job{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--st-line);border-radius:14px;background:#fff;margin-bottom:10px;transition:border-color .2s,background .2s}
.st-job-busy{border-color:#c9d6f6;background:#f8faff}
.st-job-done{border-color:#d9efe1}
.st-job-ico{width:56px;height:56px;flex:0 0 56px;border-radius:14px;background:var(--st-tint);display:flex;align-items:center;justify-content:center}
.st-job-ico img{width:30px;height:30px}
.st-job-ico svg{width:28px;height:28px;fill:none;stroke:var(--st-blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.st-job-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.st-job-text b{font-size:17px;font-weight:600;color:var(--st-ink)}
.st-job-text small{font-size:14px;color:var(--st-ink-3)}
.st-job-state{width:32px;height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:center}
.st-job-state svg{width:32px;height:32px;border-radius:50%;background:#2fb862;padding:7px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.st-spin{width:28px;height:28px;border-radius:50%;border:3px solid #dbe6ff;border-top-color:var(--st-blue);animation:st-spin .8s linear infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
.st-bar{position:relative;height:10px;margin:18px 70px 0 4px;background:#e6ebf5;border-radius:5px}
.st-bar span{display:block;height:100%;width:0;background:var(--st-blue);border-radius:5px;transition:width .5s ease}
.st-bar b{position:absolute;right:-62px;top:-6px;font-size:16px;font-weight:600;color:var(--st-blue)}
.st-bar-note{margin:14px 4px 4px;font-size:15px;color:var(--st-ink-2)}
.st-bar-err{color:#c0392b}
@media (max-width: 1023px){
  .st-setup h1{font-size:clamp(34px,9vw,44px)}
  .st-jobs{padding:10px;border-radius:16px}
  .st-job{gap:12px;padding:12px}
  .st-job-ico{width:48px;height:48px;flex-basis:48px}
  .st-job-text b{font-size:15.5px}
  .st-job-text small{font-size:13px}
  .st-bar{margin-right:60px}
}

/* step 2 when a calendar is already connected: show it, one Continue, a quiet way to switch */
.st-provider-on{border-color:#cfe9d8;background:#f6fcf8;cursor:default}
.st-provider-on span{display:flex;flex-direction:column;gap:1px}
.st-provider-on small{font-size:13.5px;font-weight:500;color:var(--st-ink-3)}
.st-tick,.st-provider .st-tick{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#2fb862;padding:7px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box;transform:none}
.st-switch{margin-top:22px;max-width:600px}
.st-switch summary{cursor:pointer;font-size:16px;font-weight:500;color:var(--st-blue);opacity:.85;list-style:none}
.st-switch summary::-webkit-details-marker{display:none}
.st-switch summary:hover{text-decoration:underline;opacity:1}
.st-switch .st-providers{margin-top:14px}
.st-note{margin:18px 0 0;font-size:14px;color:var(--st-ink-3);max-width:600px}
.st-note + .st-later{margin-top:14px}

/* the sign-in: Google or Microsoft, "New to ANCI? Start here", three trust marks */
.st-login .st-hero{margin-top:40px}
.st-login h1{font-size:clamp(42px,5.8vw,78px)}
.st-login .st-providers{margin-top:30px}
.st-login .st-provider span{font-size:19px}
/* /user/start (per Raj, 2026-10-14): room between the lede and the email box; the alert, when shown, keeps the same gap below it. */
.st-email .st-field{margin-top:30px}
.st-email .st-alert{margin-bottom:0}
.st-email .st-alert+.st-field{margin-top:22px}
.st-email .st-cta{margin-top:26px}
@media (max-width:1023px){.st-email .st-field{margin-top:22px}}
.st-new{display:flex;align-items:center;gap:10px;margin:26px 0 0;max-width:600px;padding:18px 26px;border-radius:14px;background:var(--st-tint);color:var(--st-ink-2);text-decoration:none;font-size:17px}
.st-new b{color:var(--st-blue);font-weight:600}
.st-new svg{width:22px;height:22px;fill:none;stroke:var(--st-blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.st-new:hover svg{transform:translateX(4px)}
.st-trust{list-style:none;display:flex;gap:28px;margin:34px 0 0;padding:0}
.st-trust li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;color:var(--st-ink-2)}
.st-trust li+li{padding-left:28px;border-left:1px solid var(--st-line)}
.st-trust svg{width:30px;height:30px;fill:none;stroke:#5c6b8a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 30px}
@media (max-width: 1023px){
  .st-login .st-hero{margin-top:6px}
  .st-login .st-art img{max-width:440px}
  .st-login h1{font-size:clamp(44px,12vw,60px)}
  .st-login .st-providers{margin-top:24px;text-align:left}
  .st-new{justify-content:center;margin-top:22px;max-width:none}
  .st-trust{justify-content:space-between;gap:10px;margin-top:28px;text-align:left}
  .st-trust li{font-size:12.5px;gap:8px}
  .st-trust li+li{padding-left:10px}
  .st-trust svg{width:26px;height:26px;flex-basis:26px}
}


/* welcome, phone: the hero runs edge to edge — the card's side padding is given back to the image (per Raj, 2026-10-07) */
@media (max-width: 1023px){
  body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-hero{margin-top:0}
  body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-art img{width:calc(100% + 40px);max-width:none;margin:-36px -20px 0;pointer-events:none} /* the artwork's own blank band is pulled above the fold (per Raj, 2026-10-07) */
}



/* the ANCI logo sits at the bottom right of every onboarding card and nothing stays in the top bar (per Raj, 2026-10-07) */
body.st .st-card{position:relative}
body.st .st-top .st-nav{display:none}
@media (min-width: 1024px){
  body.st .st-top{display:block;position:absolute;right:52px;bottom:34px;margin:0}
  body.st .st-logo img{width:104px;height:auto}
}
@media (max-width: 1023px){
  body.st .st-card{display:flex;flex-direction:column}
  body.st .st-top{display:none} /* phone: no logo at all (per Raj, 2026-10-07) */
  body.st .st-logo img{width:88px;height:auto}
}

/* the logo blue (#3B97ED) on the ANCI word in every headline and on the buttons (per Raj, 2026-10-07) */
/* ONE blue on the start screens — the ANCI logo's (per Raj, 2026-10-14): icons, links, the highlighted word and the button all share it. */
:root{--st-brand:#3b97ed;--st-brand-2:#2a86dc;--st-blue:#3b97ed;--st-blue-2:#2a86dc}
h1 span,.st-step h1 span{color:var(--st-brand)}
.st-cta{background:var(--st-brand);box-shadow:0 14px 28px -10px rgba(59,151,237,.55)}
.st-cta:hover{background:var(--st-brand-2);box-shadow:0 18px 34px -10px rgba(59,151,237,.6)}

/* desktop layout for every onboarding screen (per Raj, 2026-10-07): the card grows with the window; its children lay out on one grid —
   text column up to 660px on the left, the art taking all the width to its right and the full height down to just above the logo
   (object-fit: cover, never stretched); the step bar sits bottom left. The hero's own box dissolves (display: contents). */
@media (min-width: 1024px){
  .st-card{max-width:1280px;min-height:760px;padding:32px 52px} /* the standard desktop frame: 1280 content width, 80px margins at 1440, first screen inside ~900px */
  body.st .st-card{display:grid;grid-template-columns:minmax(0,1fr) 500px;grid-template-rows:1fr auto auto;column-gap:32px;align-items:start} /* the art column is 500px (per Raj, 2026-10-07); the text takes the rest */
  .st-hero:not(.st-hero-one){display:contents}
  .st-copy{grid-column:1;grid-row:1;align-self:center;margin:0;max-width:none;padding-right:8px}
  .st-progress{grid-column:1;grid-row:2;margin:28px 0 0}
  .st-step-label{grid-column:1;grid-row:3}
  .st-hero:not(.st-hero-one) .st-art{position:relative;grid-column:2;grid-row:1 / 4;align-self:stretch;width:auto;margin:0 0 58px;min-height:320px}
  .st-art img,.st-step .st-art img,.st-login .st-art img,body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;object-fit:contain;object-position:center;pointer-events:auto}
  body.st.st-confirm .st-card,body.st.st-setup .st-card{display:flex;flex-direction:column;justify-content:center;align-items:center} /* outranks the 7/5 grid rule above */
  body.st.st-setup .st-setup-body,body.st.st-confirm .st-hero-one{width:100%}
  body.st.st-setup .st-progress{margin:0}
  body.st .st-top{bottom:32px}
}


/* one button on every screen — the welcome's Get Started is the reference: same size, radius, colour and shadow, whether it is a link or a <button> (per Raj, 2026-10-07) */
.st-cta,button.st-cta{margin:44px 0 0;max-width:600px;padding:22px 28px;font:inherit;font-size:22px;font-weight:600;line-height:normal;border:0;border-radius:18px;cursor:pointer;-webkit-appearance:none;appearance:none}
.st-step .st-cta{margin-top:30px}
@media (max-width: 1023px){.st-cta,button.st-cta{margin-top:34px;max-width:none;padding:20px}}

/* single-column (phone and tablet): the art is never wider than 560px on any screen (per Raj, 2026-10-07) */
@media (max-width: 1023px){
  .st-art img,.st-step .st-art img,.st-login .st-art img,body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-art img{max-width:560px}
  body.st:not(.st-step):not(.st-login):not(.st-confirm) .st-art{display:flex;justify-content:center} /* the welcome art stays centred once the cap bites on a tablet */
}

/* the calendar step: a "nothing is saved" note and the same trust bar as the login (per Raj, 2026-10-07) */
.st-trust-note{margin:30px 0 0;max-width:560px;font-size:14px;line-height:1.5;color:var(--st-ink-3)}
.st-step .st-trust{margin-top:16px}
@media (max-width: 1023px){.st-trust-note{margin-top:24px;max-width:none;text-align:center}.st-step .st-trust{margin-top:14px}}

/* the card sits in the middle of a tall window, keeps 32px margins on a 1280 laptop, and grows 1.5× on an unscaled very-wide monitor (per Raj, 2026-10-07) */
@media (min-width: 1024px){
  body.st{align-items:center;padding:36px 32px}
}
@media (min-width: 2400px){
  body.st .st-card{transform:scale(1.5);transform-origin:center}
}

/* the sign-in's "already logged in as …" line */
.st-who{font-weight:600;color:var(--st-ink)}
.st-login .st-later{margin-top:18px}

/* the calendar step's "work email needed" notice */
.st-alert{display:flex;gap:12px;align-items:flex-start;margin:22px 0 -6px;padding:14px 16px;border-radius:14px;background:#fff4f0;border:1px solid #ffd4c6;color:#8a3b1f;font-size:14.5px;line-height:1.5}
.st-alert svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:#d9532b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}

/* phone (per Raj, 2026-10-07): the logo sits centred at the bottom; the Hi and Calendar steps open on their art with the
   artwork's own blank top band clipped away (hi 238/1102, calendar 88/1004 of its width); their ledes are desktop-only;
   the calendar note is a few words */
.st-trust-note .st-phone{display:none}
@media (max-width: 1023px){
  .st-desk-only{display:none}
  .st-trust-note .st-desk{display:none}
  .st-trust-note .st-phone{display:inline}
  .st-step .st-hero{margin-top:0}
  .st-hi .st-art,.st-cal .st-art,.st-people .st-art{overflow:hidden;line-height:0}
  .st-people .st-art img{margin-top:-2.5%;margin-bottom:0} /* people-mobile bands: 34 top / 0 bottom of 1338 */
  .st-hi .st-art img{margin-top:-20%;margin-bottom:-17.6%} /* hi-art bands: 220 top / 194 bottom of 1102 */
  .st-cal .st-art img{margin-top:-7.3%;margin-bottom:-4.4%} /* calendar-art bands: 112 top / 67 bottom of 1536 */
}

/* the People step on a phone: short copy, every line a single line (per Raj, 2026-10-07) */
.st-people .st-phone{display:none}
.st-people h1 .st-desk{color:inherit} /* the hidden-on-phone "Your" is not the accent */
@media (max-width: 1023px){
  .st-people .st-desk{display:none}
  .st-people .st-phone{display:inline}
  .st-people .st-choice-text b,.st-people .st-choice-text small,.st-people .st-note,.st-people .st-known,.st-people .st-lede{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .st-people .st-choice-text{min-width:0}
}

/* the People step's three options (per Raj, 2026-10-07): a clearer border and a soft shadow on every width; an option with
   nothing to add shows a "not available" mark instead of the chevron; on a phone the group sits tight between its lines */
.st-people .st-choice{border:1.5px solid #c5d2ee;box-shadow:0 2px 10px -4px rgba(47,107,255,.18)}
.st-people .st-choice:hover:not(:disabled){border-color:#9db5ec;box-shadow:0 10px 26px -12px rgba(47,107,255,.4)}
.st-people .st-choice:disabled{opacity:1;background:#f8f9fc;border-color:#dfe5f1;box-shadow:none;color:var(--st-ink-3)}
.st-people .st-choice:disabled .st-choice-text b{color:var(--st-ink-3)}
.st-na{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:#b3bccf;stroke-width:2;stroke-linecap:round}
@media (max-width: 1023px){
  .st-people .st-providers{margin-top:12px;gap:10px}
  .st-people .st-note{margin-top:12px}
  .st-people .st-cta,.st-people .st-later{margin-top:14px}
}

/* /start/preferences — "Personalization" (per Raj, 2026-10-14): the hour grid, the length pills,
   the place and autonomy choices, one Looks good. Single column; the art column is not used. */
.st-prefs .st-prefs-form{grid-column:1/-1;grid-row:1;align-self:start;max-width:860px;padding:0 12px} /* row 1 of the desktop grid, so the step bar (rows 2–3) sits at the bottom like every other step */
.st-prefs h1{margin-top:22px}
.st-pref{margin-top:30px}
.st-pref h2{font-size:18px;font-weight:700;color:var(--st-ink);margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.st-pref h2 small{font-size:13.5px;font-weight:500;color:var(--st-ink-3)}
.st-grid{display:grid;gap:4px;overflow-x:auto;padding-bottom:4px}
.st-grid-head,.st-grid-row{display:grid;grid-template-columns:44px repeat(17,minmax(26px,1fr));gap:3px;align-items:center}
.st-grid-head span{font-size:10.5px;font-weight:600;color:var(--st-ink-3);text-align:center;letter-spacing:.02em}
.st-grid-day{font-size:13px;font-weight:600;color:var(--st-ink-2)}
.st-hour{height:26px;border:0;border-radius:6px;background:#e3e9f6;cursor:pointer;padding:0;transition:background .12s,transform .12s}
.st-hour[aria-pressed=true]{background:var(--st-blue)}
.st-hour:hover{transform:scale(1.08)}
.st-hour:focus-visible{outline:2px solid var(--st-ink);outline-offset:1px}
.st-zone{margin:14px 0 0;font-size:14.5px;color:var(--st-ink-2)}
.st-zone b{color:var(--st-ink)}
.st-zone a{margin-left:8px;color:var(--st-blue);font-weight:600;text-decoration:none}
.st-zone a:hover{text-decoration:underline}
.st-pills{display:flex;flex-wrap:wrap;gap:10px}
.st-pill input{position:absolute;opacity:0;width:0;height:0}
.st-pill span{display:inline-block;padding:10px 18px;border:1.5px solid var(--st-line);border-radius:999px;font-size:15px;font-weight:600;color:var(--st-ink);cursor:pointer;background:#fff}
.st-pill input:checked+span{border-color:var(--st-blue);background:var(--st-blue);color:#fff}
.st-pill input:focus-visible+span{outline:2px solid var(--st-ink);outline-offset:2px}
.st-choices{display:flex;flex-direction:column;gap:10px;max-width:600px}
.st-radio{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1.5px solid var(--st-line);border-radius:14px;background:#fff;cursor:pointer;color:var(--st-ink);text-decoration:none;position:relative}
.st-radio:has(input:checked){border-color:var(--st-blue);box-shadow:0 0 0 3px rgba(59,151,237,.15)}
.st-radio input{width:18px;height:18px;margin:0;accent-color:var(--st-blue);flex:0 0 18px}
.st-radio img{width:24px;height:24px;flex:0 0 24px}
.st-radio-ico{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--st-tint);color:var(--st-blue);font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.st-radio>span:not(.st-radio-ico){display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.st-radio b{font-size:16px;font-weight:600}
.st-radio small{font-size:13.5px;color:var(--st-ink-3)}
.st-radio-link svg{width:22px;height:22px;fill:none;stroke:#8a94ad;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-radio-link:hover{border-color:#c9d6f6}.st-radio-link:hover svg{stroke:var(--st-blue)}
.st-radio-off{opacity:.55;cursor:default}
.st-rec,.st-soon{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.st-rec{background:#e6f7ec;color:#1f7a3f}.st-soon{background:#eef1f7;color:var(--st-ink-3)}
.st-field-sm input{height:52px;font-size:16px;padding:0 16px}
.st-place-text{margin-top:2px}
.st-prefs .st-cta{margin-top:34px}
@media (max-width:1023px){
  .st-prefs .st-prefs-form{padding:0}
  .st-pref{margin-top:24px}
}

/* /start/people — "Whose calendars do you manage?" (per Raj, 2026-10-14) */
.st-principals{border:0;margin:26px 0 0;padding:0;max-width:600px}
.st-principals legend{font-size:16px;font-weight:700;color:var(--st-ink);padding:0;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.st-principals legend small{font-size:13px;font-weight:500;color:var(--st-ink-3)}
.st-principal-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-bottom:10px}
.st-principal{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--st-line);border-radius:10px;background:#fff;cursor:pointer;min-width:0}
.st-principal:has(input:checked){border-color:var(--st-blue);background:var(--st-tint)}
.st-principal input{width:16px;height:16px;margin:0;accent-color:var(--st-blue);flex:0 0 16px}
.st-principal span{display:flex;flex-direction:column;min-width:0}
.st-principal b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-principal small{font-size:12px;color:var(--st-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-principal-new{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.st-principal-new input{height:44px;padding:0 14px;border:1.5px solid var(--st-line);border-radius:10px;font:inherit;font-size:14.5px;color:var(--st-ink);background:#fff}
.st-principal-new input:focus{outline:none;border-color:var(--st-blue);box-shadow:0 0 0 3px rgba(59,151,237,.15)}
.st-principals .st-note{margin-top:8px;font-size:13px}
@media (max-width:1023px){.st-principal-list,.st-principal-new{grid-template-columns:1fr}}

/* /start/people — "I manage other people's calendars" (per Raj, 2026-10-14) */
.st-manage{display:flex;align-items:center;gap:14px;margin:22px 0 0;padding:14px 18px;border:1.5px solid var(--st-line);border-radius:14px;background:#fff;cursor:pointer;max-width:600px}
.st-manage:has(input:checked){border-color:var(--st-blue);background:var(--st-tint)}
.st-manage input{width:18px;height:18px;margin:0;accent-color:var(--st-blue);flex:0 0 18px}
.st-manage span{display:flex;flex-direction:column;gap:2px}
.st-manage b{font-size:16px;font-weight:600;color:var(--st-ink)}
.st-manage small{font-size:13.5px;color:var(--st-ink-3)}
.st-executives .st-principals{margin-top:26px}
.st-executives .st-principals>.st-note{margin:0 0 14px} /* "Nobody from your calendar yet" keeps clear of the inputs below it */
.st-executives .st-cta{margin-top:30px}

/* Back / Next between steps (per Raj, 2026-10-14) — under the step label, quiet. */
.st-stepnav{display:flex;align-items:center;gap:18px;margin:10px 0 0;padding-left:12px;font-size:13.5px;font-weight:600}
.st-stepnav a{display:inline-flex;align-items:center;gap:6px;color:var(--st-ink-3);text-decoration:none}
.st-stepnav a:hover{color:var(--st-blue)}
.st-stepnav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-progress-center+.st-step-label+.st-stepnav{justify-content:center;padding-left:0}

/* /start/people as a checklist (per Raj, 2026-10-14): a row does its work and comes back ticked. */
.st-items .st-item{position:relative}
.st-item .st-pic svg{width:22px;height:22px;fill:none;stroke:#9aa5bd;stroke-width:1.8}
.st-item-done{border-color:#bfe8cb;background:#f6fcf8;opacity:1;cursor:default}
.st-item-done .st-pic{background:#e6f7ec}
.st-item .st-pic .st-check{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center} /* .st-provider span{flex:1} would push it left */
.st-check svg{width:24px;height:24px;fill:none;stroke:#1f9d55;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.st-item .st-done-word{flex:none;margin-left:auto;text-align:right;font-size:13px;font-weight:700;color:#1f9d55;letter-spacing:.04em;text-transform:uppercase} /* sits where the arrow sits on an open row */
.st-actions{display:flex;align-items:stretch;gap:18px;margin-top:26px;max-width:600px}
.st-actions>*,.st-step .st-actions>*,.st-step .st-actions .st-cta-inline{box-sizing:border-box;height:62px;margin:0} /* outranks .st-step .st-cta{margin-top:30px} */
.st-cta-inline{margin:0;flex:1;max-width:none;padding:0 24px;font-size:19px}
.st-btn-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:128px;padding:0 20px;border:1.5px solid var(--st-line);border-radius:18px;color:var(--st-ink-2);font-weight:600;font-size:17px;text-decoration:none;background:#fff}
.st-btn-back:hover{border-color:#c9d6f6;color:var(--st-blue)}
.st-btn-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-people:not(.st-executives) .st-stepnav{display:none} /* the people page has real Back / Next buttons */
@media (max-width:1023px){.st-actions{flex-direction:column-reverse;align-items:stretch}.st-btn-back{justify-content:center}}

/* /start/calendar — a real Back button beside Continue / Maybe later (per Raj, 2026-10-14) */
.st-cal .st-stepnav{display:none}
.st-actions-back{justify-content:flex-start;align-items:center}
.st-actions-back .st-later-inline{margin:0;height:auto}

/* /start/hi — a real Back button beside Continue (per Raj, 2026-10-14) */
.st-hi .st-stepnav{display:none}
.st-step .st-actions button.st-cta-inline{margin:0;height:62px;padding:0 24px;font-size:19px;max-width:none}

/* /start/preferences as one column of dropdowns (per Raj, 2026-10-14) */
.st-prefs .st-stepnav{display:none}
.st-prefrows{display:flex;flex-direction:column;gap:14px;margin-top:26px;max-width:720px}
.st-prefrow{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:center;padding:14px 18px;border:1.5px solid var(--st-line);border-radius:14px;background:#fff}
.st-prefrow>label,.st-preflabel{font-size:15.5px;font-weight:600;color:var(--st-ink)}
.st-prefctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0}
.st-select{height:44px;padding:0 36px 0 14px;border:1.5px solid var(--st-line);border-radius:10px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b8a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center/16px;font:inherit;font-size:15px;color:var(--st-ink);-webkit-appearance:none;appearance:none;max-width:100%}
.st-select:focus{outline:none;border-color:var(--st-blue);box-shadow:0 0 0 3px rgba(59,151,237,.15)}
.st-hours .st-select{min-width:120px}
.st-to{color:var(--st-ink-3);font-size:14px}
.st-adv{font-size:13.5px;font-weight:600;color:var(--st-blue);text-decoration:none;margin-left:auto}
.st-adv:hover{text-decoration:underline}
.st-zone-row{font-size:15px;color:var(--st-ink-2)}.st-zone-row b{color:var(--st-ink)}.st-zone-row a{color:var(--st-blue);font-weight:600;text-decoration:none}.st-zone-row a:hover{text-decoration:underline}
.st-prefctl .st-place-text{flex:1 1 100%;margin-top:4px}
.st-prefs .st-actions{margin-top:28px;max-width:720px}
@media (max-width:1023px){
  .st-prefrow{grid-template-columns:1fr;gap:8px;padding:12px 14px}
  .st-adv{margin-left:0}
}
.st-select-wide{min-width:260px;max-width:100%}
.st-prefs .st-prefrows{margin-top:26px}

/* Phones (per Raj, 2026-10-14): the new screens fit a 360px-wide screen without horizontal scroll.
   The hour grid shrinks to the width (17 cells share it, each at least 14px, taller for the thumb);
   the day labels stay; the head shows every other hour so the labels do not collide. */
@media (max-width:767px){
  .st-prefs .st-prefs-form{max-width:none}
  .st-prefs h1{font-size:28px}
  .st-pref h2{font-size:16px}
  .st-pref h2 small{display:block;margin-top:2px}
  .st-grid{gap:3px;overflow:visible}
  .st-grid-head,.st-grid-row{grid-template-columns:34px repeat(17,minmax(12px,1fr));gap:2px}
  .st-grid-head span{font-size:9px;letter-spacing:0;overflow:hidden;white-space:nowrap}
  .st-grid-head span:nth-child(2n+1){visibility:hidden} /* every other hour label; the first (blank) one stays hidden too */
  .st-grid-day{font-size:12px}
  .st-hour{height:30px;border-radius:5px}
  .st-hour:hover{transform:none}
  .st-prefrows{margin-top:22px;gap:10px}
  .st-prefrow{padding:12px}
  .st-prefrow>label,.st-preflabel{font-size:14.5px}
  .st-select,.st-select-wide{min-width:0;width:100%}
  .st-pills{gap:8px}
  .st-pill span{padding:10px 14px;font-size:14.5px}
  .st-choices{max-width:none}
  .st-radio{padding:12px 14px;gap:12px}
  .st-radio b{font-size:15px}.st-radio small{font-size:13px}
  .st-rec,.st-soon{display:block;width:max-content;margin:4px 0 0}
  .st-field-sm input{height:48px;font-size:15px}
  .st-prefs .st-actions{margin-top:22px;max-width:none}
  .st-actions{gap:12px}
  .st-actions>*,.st-step .st-actions>*,.st-step .st-actions .st-cta-inline,.st-step .st-actions button.st-cta-inline,.st-step .st-actions a.st-cta-inline{
    width:100%;max-width:none;flex:none;height:auto;min-height:60px;margin:0;padding:18px 20px;font-size:19px;line-height:1.2;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
  .st-btn-back{min-width:0;font-size:17px;min-height:54px;padding:14px 20px}
  /* the people checklist and the executives page */
  .st-items .st-item{padding:14px 14px}
  .st-done-word{font-size:12px}
  .st-principal-new input{height:46px}
  .st-manage{padding:12px 14px}
}

/* /start/executives on phones (per Raj, 2026-10-14) */
@media (max-width:767px){
  .st-executives .st-principals{margin-top:18px;max-width:none}
  .st-executives .st-principals legend{font-size:15px}
  .st-executives .st-principal-list{grid-template-columns:1fr;gap:6px;margin-bottom:10px}
  .st-executives .st-principal{padding:10px 12px}
  .st-executives .st-principal b{font-size:14.5px;white-space:normal}
  .st-executives .st-principal small{white-space:normal}
  .st-executives .st-principal-new{grid-template-columns:1fr;gap:8px}
  .st-executives .st-principal-new input{height:48px;font-size:15px}
  .st-executives .st-cta,.st-executives button.st-cta{width:100%;max-width:none;min-height:60px;height:auto;margin-top:22px;padding:18px 20px;font-size:19px;line-height:1.2;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
  .st-executives .st-later{display:block;text-align:center;margin-top:16px;font-size:15px}
}

/* Small phones — iPhone SE (375px, and the 320px first generation) (per Raj, 2026-10-14):
   nothing wider than the screen, tighter card padding, the hour grid down to 10px cells. */
@media (max-width:420px){
  html,body.st{overflow-x:hidden}
  body.st .st-card{padding:16px 14px 32px;min-width:0}
  .st-card *{min-width:0}
  .st-prefs h1,.st-people h1,.st-executives h1{font-size:25px}
  .st-lede{font-size:15.5px}
  .st-grid-head,.st-grid-row{grid-template-columns:30px repeat(17,minmax(10px,1fr));gap:2px}
  .st-grid-day{font-size:11px}
  .st-hour{height:26px}
  .st-pill span{padding:9px 12px;font-size:14px}
  .st-prefrow{padding:10px}
  .st-radio{gap:10px;padding:11px 12px}
  .st-radio img,.st-radio-ico{width:22px;height:22px;flex-basis:22px}
  .st-items .st-item,.st-provider{padding:12px 12px;gap:12px}
  .st-provider .st-pic{width:38px;height:38px;flex-basis:38px}
  .st-choice-text b{font-size:15.5px}
  .st-choice-text small{font-size:12.5px}
  .st-manage{padding:11px 12px;gap:10px}
  .st-principal-new input,.st-field-sm input{height:46px;font-size:15px}
  .st-actions>*,.st-step .st-actions>*,.st-executives .st-cta,.st-executives button.st-cta{min-height:56px;padding:16px;font-size:18px}
  .st-btn-back{min-height:50px}
  .st-alert{padding:12px;font-size:13.5px}
  .st-stepnav{padding-left:0}
  .st-progress li{width:52px}
}
.st-executives .st-stepnav{display:none} /* a real Back button beside Add Executives */

/* /start/executives — several typed rows (per Raj, 2026-10-14) */
.st-principal-rows{display:flex;flex-direction:column;gap:8px}
.st-add-row{margin-top:10px;border:1.5px dashed var(--st-line);background:#fff;border-radius:10px;padding:10px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--st-blue);cursor:pointer}
.st-add-row:hover{border-color:var(--st-blue);background:var(--st-tint)}
@media (max-width:767px){.st-prefs .st-lede.st-desk-only{display:none}} /* the Personalization lede is desktop-only (per Raj, 2026-10-14) */
.st-prefs .st-phone{display:none}
@media (max-width:767px){.st-prefs .st-desk{display:none}.st-prefs .st-phone{display:inline}} /* short card copy on phones (per Raj, 2026-10-14) */