/* ArcSmith website: the page parts the brand kit wrote inline. The site's policy allows no inline style, so the
   kit's style attributes and <style> blocks live here as classes. After tokens.css, site.css and motion.css. */

/* ---------- arrival order (motion.css .rise reads --d) ---------- */
.d0{--d:0}.d1{--d:1}.d2{--d:2}.d3{--d:3}.d4{--d:4}.d5{--d:5}

/* ---------- home ---------- */
.photo{margin:0}
.section-tight{padding-top:0}
.section-head.flush{margin:0}
.stack{display:flex;flex-direction:column;gap:14px}
.pins>svg{width:100%;height:auto}
.pin-1{left:24%;top:18%}
.pin-2{left:57%;top:33%}
.band .eyebrow{color:#C9C1B5}
.nowrap{white-space:nowrap}

/* the questions: the heading holds still beside the answers on wide screens */
.faq-split{align-items:start}
.faq-split .section-head{position:sticky;top:120px}
.faq{margin:0;padding:8px 32px}
.qa{padding:22px 0;border-bottom:1px solid var(--as-line)}
.qa:last-child{border-bottom:0}
.qa dt{font-size:18px;font-weight:600;line-height:1.35;color:var(--as-ink)}
.qa dd{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--as-body)}

/* the top bar's short Sign in, shown only where the kit hides Beta sign in */
.nav .show-sm{display:none}

/* ---------- waitlist and apply ---------- */
.formpage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(32px,5vw,96px);padding:clamp(40px,6vw,96px) 0;align-items:start}
.formpage .aside{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
.formpage .aside svg.mk{width:min(100%,420px)}
.display-form{font-size:clamp(36px,3.6vw,60px)}
.formcard{padding:32px;animation:site-card 720ms var(--as-ease-settle) 120ms both}
.form .field label{font-size:14px;font-weight:500;color:var(--as-ink)}
.form .optional{font-weight:400;color:var(--as-muted)}
.form .input,.form .select{width:100%}
.form .select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6B70' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form .input[aria-invalid="true"]{border-color:var(--as-alert)}
.form .check{cursor:pointer}
.form .check span{font-size:16px;font-weight:500;color:var(--as-ink)}
.check-note{margin:2px 0 0 30px;font-size:14px;font-weight:400;color:var(--as-muted)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form>.btn{align-self:flex-start}
.status{font-size:15px;color:var(--as-body)}
.status:empty{display:none}
.status.error{color:var(--as-alert)}

/* after sending: the confirmation, then the two optional questions (followup.js) */
.success-card{padding:32px;display:flex;flex-direction:column;gap:22px;background:var(--as-surface);border:1px solid var(--as-line);border-radius:var(--as-radius-card);box-shadow:var(--as-shadow-card);animation:site-card 560ms var(--as-ease-settle) both}
.done{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--as-radius-field);background:#EDF7F0;color:#1E7F38;font-size:15px}
.done svg{flex:none;margin-top:1px}
.done .success{color:#1E7F38;font-weight:500}
.done .success:focus{outline:none}
.followup{display:flex;flex-direction:column;gap:18px}
.followup-intro{font-size:15px;color:var(--as-body)}
.followup fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px}
.followup legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--as-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--as-radius-pill);border:1px solid var(--as-line-firm);background:var(--as-surface);font-size:15px;color:var(--as-ink);transition:background-color var(--as-dur-quick) var(--as-ease-standard),border-color var(--as-dur-quick),color var(--as-dur-quick)}
.chip:hover span{border-color:var(--as-muted)}
.chip input:checked+span{background:var(--as-accent);border-color:var(--as-accent);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--as-accent);outline-offset:3px}
.followup .field{display:flex;flex-direction:column;gap:8px}
.followup .field label{font-size:14px;font-weight:500;color:var(--as-ink)}
.followup .field input{min-height:44px;padding:10px 14px;border-radius:var(--as-radius-field);border:1px solid var(--as-line-firm);background:var(--as-surface);font:400 16px/1.4 var(--as-font-ui);color:var(--as-ink)}
.followup .field input:focus{outline:none;border-color:var(--as-accent);box-shadow:0 0 0 4px rgba(0,113,227,.18)}
.followup button{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--as-radius-button);border:1px solid transparent;background:var(--as-accent);color:#fff;font:500 16px/1 var(--as-font-ui);cursor:pointer;transition:background-color var(--as-dur-quick) var(--as-ease-standard),transform var(--as-dur-small) var(--as-ease-settle)}
.followup button:hover{background:var(--as-accent-hover)}
.followup button:active{transform:translateY(1px)}
.followup button:disabled,.form .btn:disabled{opacity:.6;cursor:default}
.thanks{font-size:16px;color:var(--as-ink)}
.thanks:focus{outline:none}

/* ---------- reading pages ---------- */
.prose ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px}
.prose .updated{padding-top:24px}

/* ---------- 404 ---------- */
.lost{min-height:calc(100vh - 220px);display:grid;place-items:center;text-align:center;padding:48px 0}
.lost-inner{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:560px}
.lost-mark{width:min(100%,460px)}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .formpage{grid-template-columns:minmax(0,1fr)}
  .formpage .aside{position:static}
  .formpage .aside svg.mk{width:min(100%,280px)}
}
@media (max-width:900px){
  .faq-split .section-head{position:static}
}
@media (max-width:640px){
  .nav{gap:14px}
  .nav .show-sm{display:inline}
  .nav .btn-sm{padding:0 12px}
  .faq{padding:4px 20px}
  .qa{padding:18px 0}
  .qa dt{font-size:17px}
  .formcard,.success-card{padding:22px}
  .form>.btn{align-self:stretch}
}