/* The agent scoping call (/agent-scoping-call, concept 2026-09-28). Generated by scripts/agents/gen_scoping.py,
   prefix asc-. Second pass (Justin: the job list was too much, and too many things competed): the left column is
   the pitch in three pieces (headline and price, how it works, one quote); the card is the only thing with weight.
   The form is taps first (team, size), then two fields, then one full-width button. Phones read headline, card,
   how it works, quote, so the booking is never below a wall of copy. */
.asc{width:100%;--p:#6b52c9;--p-bg:#f5f2ff;--p-chip:#ddd4ff}
.asc-main{padding:56px 24px 104px}
.asc-wrap{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"intro book" "take book" "say book";grid-template-rows:auto auto 1fr;gap:0 80px;align-items:start}
.asc-intro{grid-area:intro}
.asc-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--p-chip);border:1.2px solid #000;font:500 11.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}
.asc-intro h1{margin:20px 0 0;font:500 54px/1.04 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.asc-intro h1 em{font-style:normal;color:var(--blue)}
.asc-lead{margin:18px 0 0;font:400 19px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333;max-width:440px;text-wrap:balance}
.asc-k{display:block;font:500 12px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--p)}

/* what the call hands you: four objects, not paragraphs. A light card so it never competes with the booking card */
.asc-take{grid-area:take;margin-top:40px;padding:22px 24px 8px;max-width:440px;border:1.2px solid rgba(0,0,0,.14);border-radius:18px;background:#fff}
.asc-take__list{list-style:none;margin:16px 0 0;padding:0}
.asc-take__list li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid rgba(0,0,0,.08);animation:asc-rise .6s var(--ease) both;animation-delay:calc(.15s + var(--i) * 90ms)}
.asc-take__list li:first-child{border-top:0;padding-top:4px}
.asc-take__list li > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.asc-take__list b{font:500 16px/1.25 "Neue Montreal",system-ui,sans-serif}
.asc-take__list small{font:400 14px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.asc-take__ic{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1.2px solid #000;border-radius:11px;background:var(--cream)}
.asc-take__ic svg{width:20px;height:20px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.asc-take__ic--agent{background:var(--p-chip)}
.asc-take__ic--agent svg{fill:#fff;stroke-width:1.3}
@keyframes asc-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Alexis, at the foot of the column */
.asc-say{grid-area:say;align-self:end;margin:40px 0 0;max-width:440px}
.asc-say blockquote{margin:0 0 14px;font:500 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:#222}
.asc-say figcaption{display:flex;align-items:center;gap:12px}
.asc-say figcaption > span:last-child{display:flex;flex-direction:column;gap:2px;font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.asc-say figcaption b{font-weight:500;font-size:14.5px;color:#000}
.asc-say__face{width:40px;height:40px;flex:none;border:1.5px solid #000;border-radius:50%;overflow:hidden}
.asc-say__face img{width:100%;height:100%;object-fit:cover;display:block}

/* the card */
.asc-book{grid-area:book}
.asc-card{background:#fdfcf8;border:1.5px solid #000;border-radius:20px;box-shadow:10px 10px 0 rgba(107,82,201,.26);overflow:hidden}
.asc-card__bar{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--p-bg);border-bottom:1.5px solid #000}
.asc-card__face{width:40px;height:40px;flex:none;border:1.5px solid #000;border-radius:50%;overflow:hidden;background:#fff}
.asc-card__face img{width:100%;height:100%;object-fit:cover;display:block}
.asc-card__who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.asc-card__title{font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif}
.asc-card__sub{font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.asc-card__step{flex:none;font:500 12px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;color:var(--p)}
.asc-card.is-booked .asc-card__step{color:#2f5a1f}

.asc-form[hidden]{display:none}
.asc-form{display:flex;flex-direction:column;gap:22px;padding:26px 26px 28px;transition:opacity .18s}
.asc-card.is-swap .asc-form{opacity:0}
.asc-q{margin:0;padding:0;border:0;min-width:0}
.asc-q legend,.asc-f > span{padding:0;margin-bottom:10px;font:500 15px/1.25 "Neue Montreal",system-ui,sans-serif}
.asc-f > span i{font-style:normal;font-weight:400;color:var(--muted);margin-left:4px}
.asc-chips{display:flex;flex-wrap:wrap;gap:8px}
.asc-chip{position:relative;cursor:pointer}
.asc-chip input{position:absolute;opacity:0;width:1px;height:1px}
.asc-chip span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border:1.2px solid rgba(0,0,0,.35);border-radius:999px;background:#fff;font:400 14.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000;transition:background-color .2s,border-color .2s,transform .15s}
.asc-chip span svg{width:0;height:12px;margin-right:0;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:width .25s var(--ease),margin-right .25s var(--ease)}
.asc-chip:hover span{border-color:#000}
.asc-chip:active span{transform:scale(.97)}
.asc-chip input:checked + span{background:var(--p-chip);border-color:#000}
.asc-chip input:checked + span svg{width:12px;margin-right:7px}
.asc-chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(107,82,201,.28)}
.asc-f--job{margin-top:-8px}
.asc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.asc-f{display:flex;flex-direction:column;min-width:0}
.asc-f input{width:100%;height:46px;padding:0 14px;border:1.3px solid rgba(0,0,0,.45);border-radius:11px;background:#fff;font:400 16px/1.2 "Neue Montreal",system-ui,sans-serif;color:#000;transition:box-shadow .2s,border-color .2s}
.asc-f input:hover{border-color:#000}
.asc-f input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(107,82,201,.2)}
.asc-f input::placeholder{color:#9a9a9c}
.asc-hint{margin-top:-12px;font:400 13px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.asc-hint[hidden]{display:none}
.asc-next{width:100%;justify-content:center;height:52px;font-size:17px}
.asc-arr{margin-left:8px;transition:transform .3s var(--ease)}
.asc-next:hover .asc-arr{transform:translateX(3px)}
.asc-err{margin:-6px 0 0;font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:#7a3a14;text-align:center}
.asc-err[hidden]{display:none}

.asc-cal[hidden]{display:none}
.asc-cal{animation:asc-in .4s var(--ease) both}
@keyframes asc-in{from{opacity:0}to{opacity:1}}
.asc-sum{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 22px;background:#fff;border-bottom:1px solid rgba(0,0,0,.1);font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.asc-sum__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asc-edit{flex:none;padding:0;background:none;border:0;cursor:pointer;font:500 14px/1 "Neue Montreal",system-ui,sans-serif;color:#000;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.3)}
.asc-cal__frame{min-height:700px}
.asc-cal__frame .calendly-inline-widget,.asc-cal__frame iframe{min-width:320px;height:700px}
.asc-cal__fail{padding:40px 26px;font:400 15px/1.5 "Neue Montreal",system-ui,sans-serif}
.asc-nojs{padding:26px}
@media (prefers-reduced-motion:reduce){ .asc-cal,.asc-take__list li{animation:none} .asc-chip span,.asc-chip span svg,.asc-form{transition:none} }

@media (max-width:1180px){ .asc-wrap{gap:0 48px} .asc-intro h1{font-size:46px} }
@media (max-width:980px){
  .asc-main{padding:32px 20px 72px}
  .asc-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "book" "take" "say";grid-template-rows:auto;max-width:640px}
  .asc-book{margin-top:32px}
  .asc-take{margin-top:44px}
}
@media (max-width:600px){
  .asc-intro h1{font-size:38px}
  .asc-lead{font-size:17px}
  .asc-card{box-shadow:6px 6px 0 rgba(107,82,201,.26)}
  .asc-card__bar,.asc-form,.asc-sum{padding-left:16px;padding-right:16px}
  .asc-row{grid-template-columns:minmax(0,1fr)}
  .asc-chip span{height:36px;padding:0 12px;font-size:14px}
}

/* third pass: the pill names the service (it read as a copy of the headline), a live dot in it */
.asc-pill i{width:7px;height:7px;border-radius:50%;background:var(--p);box-shadow:0 0 0 3px rgba(107,82,201,.18)}
/* Company-wide and Not sure yet are "or" answers, so they read a shade quieter, dashed until picked */
.asc-chip--solo span{border-style:dashed}
.asc-chip--solo input:checked + span{border-style:solid}
/* the takeaway card answering the form */
[data-take-agent].is-new{animation:asc-swap .45s var(--ease) both}
@keyframes asc-swap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
[data-take-agent]{display:inline-block;color:var(--p)!important}
/* the card arrives once, then stays put */
.asc-card{animation:asc-rise .7s var(--ease) both .05s}
/* booked */
.asc-done{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#eaf7e4;border-bottom:1px solid rgba(0,0,0,.1);font:400 14.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f}
.asc-done[hidden]{display:none}
.asc-done b{font-weight:500;color:#000}
.asc-done i{flex:none;width:26px;height:26px;border-radius:50%;border:1.2px solid #000;background:#caf0be;display:grid;place-items:center;animation:asc-pop .45s var(--ease) both}
.asc-done svg{width:12px;height:12px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes asc-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.asc-say blockquote{font-size:18px;line-height:1.45}
@media (prefers-reduced-motion:reduce){ .asc-card,[data-take-agent].is-new,.asc-done i{animation:none} }
.asc-say blockquote{text-wrap:balance}

/* balance (Justin: lopsided). The takeaway is a 2x2 of small tiles, not a tall list, and the card sits centred
   against the left column so the difference splits evenly above and below it. */
.asc-take{padding:0;border:0;background:none;max-width:460px}
.asc-take__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.asc-take__list li,.asc-take__list li:first-child{flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border:1.2px solid rgba(0,0,0,.13);border-radius:14px;background:#fff}
.asc-take__ic{width:36px;height:36px;border-radius:10px}
.asc-take__ic svg{width:18px;height:18px}
.asc-take__list b{font-size:15.5px}
.asc-take__list small{font-size:13.5px}
@media (max-width:420px){ .asc-take__list{gap:10px} .asc-take__list li,.asc-take__list li:first-child{padding:14px} }
/* tiles hold one line each: icon beside the words, so the column ends level with the card */
.asc-take__list li,.asc-take__list li:first-child{flex-direction:row;align-items:center;gap:12px;padding:14px}
.asc-take__list li > span{gap:2px}
.asc-take__list b{white-space:nowrap}
.asc-form{padding:30px 30px 30px;gap:24px}
@media (max-width:1180px){ .asc-take__list b{white-space:normal;font-size:15px} .asc-take__list li,.asc-take__list li:first-child{padding:12px;gap:10px} }
@media (max-width:980px){ .asc-take__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .asc-take__list{grid-template-columns:minmax(0,1fr)} }
/* company size is a dropdown (Justin): same field as the name and email, with a drawn chevron */
.asc-f select{width:100%;height:46px;padding:0 40px 0 14px;border:1.3px solid rgba(0,0,0,.45);border-radius:11px;appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/18px;font:400 16px/1.2 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer;transition:box-shadow .2s,border-color .2s}
.asc-f select:invalid{color:#9a9a9c}
.asc-f select:hover{border-color:#000}
.asc-f select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(107,82,201,.2)}
/* more air on desktop (Justin: compact at the top and bottom): the section breathes like the /agents bands, and the
   left column's three pieces get a little more space between them */
@media (min-width:981px){
  .asc-main{padding:120px 24px 168px}
  .asc-take{margin-top:56px}
  .asc-say{margin-top:56px}
  .asc-form{gap:28px;padding:34px 32px 34px}
}
/* loading: a calendar-shaped skeleton sits under the embed until Calendly reports it's showing, so the wait reads
   as the calendar arriving rather than an empty box */
.asc-cal{position:relative}
.asc-skel{position:absolute;left:0;right:0;top:47px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 26px 0;pointer-events:none;transition:opacity .35s}
.asc-card.is-ready .asc-skel{opacity:0}
.asc-skel i{display:block;border-radius:6px;background:linear-gradient(90deg,#efedf7 0%,#f8f7fc 50%,#efedf7 100%) 0 0/200% 100%;animation:asc-shim 1.4s linear infinite}
.asc-skel__t{width:180px;height:18px}
.asc-skel__m{width:140px;height:12px;margin-bottom:10px}
.asc-skel__g{display:grid;grid-template-columns:repeat(7,32px);gap:16px 22px}
.asc-skel__g i{width:32px;height:32px;border-radius:50%}
@keyframes asc-shim{to{background-position:-200% 0}}
.asc-cal__frame{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ .asc-skel i{animation:none} }
/* the quote holds one line from 981px up (Justin): 18px where the column allows, and a touch smaller where it's
   narrower. It measures 24.6px of width per px of type, so 3.95cqi keeps it inside the column with a little to spare */
@media (min-width:981px){
  .asc-say{container-type:inline-size;max-width:none}
  .asc-say blockquote{max-width:none;white-space:nowrap;text-wrap:nowrap;font-size:min(18px,3.95cqi)}
}