/* /agent/ — Build Your First AI Agent. Page styles on top of build-mode.css.
   The one loud thing on this page is Nelson standing out over the top of the roster
   panel; everything else stays quiet, wide, and readable. */

/* ---------- hero ---------- */
.ag-hero{padding-block:clamp(28px,4.4vw,64px) clamp(56px,7vw,110px);}
.ag-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy roster" "form roster";column-gap:clamp(28px,5vw,80px);row-gap:0;align-items:start;}
.ag-copy{grid-area:copy;}
.ag-sheet{grid-area:form;}
.ag-roster{grid-area:roster;}
.ag-copy h1{font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:-.034em;margin-top:14px;}
.ag-copy .lead{margin-top:20px;max-width:46ch;}
.ag-copy .lead b{color:var(--ink);font-weight:600;}

/* the roster panel — a paper card he stands in front of, head over the edge */
.ag-roster{position:relative;margin-top:clamp(60px,7vw,96px);background:#fff;border:1px solid var(--hair);border-radius:28px;box-shadow:var(--shadow-card);padding:0 clamp(18px,2.6vw,30px) clamp(18px,2.4vw,26px);}
.ag-roster::before{content:"";position:absolute;inset:0;border-radius:28px;background:
  radial-gradient(120% 70% at 50% 100%, #eef3ff 0, rgba(238,243,255,0) 60%);pointer-events:none;}
.ag-roster .ag-photo{position:relative;display:block;width:min(100%,420px);margin:clamp(-60px,-7vw,-96px) auto 0;filter:drop-shadow(0 26px 30px rgba(4,18,58,.22));}
.ag-roster .ag-photo img{width:100%;height:auto;display:block;}
.ag-roster .ag-plate{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:-6px;padding-top:16px;border-top:1px solid var(--hair-soft);}
.ag-plate .ag-logo{width:40px;height:40px;object-fit:contain;}
.ag-plate .ag-plate-h{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);letter-spacing:-.01em;}
.ag-plate .ag-plate-p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:2px 0 0;max-width:40ch;}
.ag-stamp{position:absolute;top:-14px;right:22px;background:var(--gold);color:var(--gold-ink);font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:8px 14px;border-radius:var(--pill);transform:rotate(3deg);box-shadow:0 8px 18px -10px rgba(74,55,0,.5);}

/* ---------- sign-up sheet ---------- */
.ag-form{margin-top:clamp(26px,3vw,40px);background:#fff;border:1px solid var(--hair);border-radius:24px;box-shadow:var(--shadow-card);padding:clamp(20px,2.6vw,30px);}
.ag-form .ag-form-h{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink);}
.ag-form .ag-form-p{font-size:14.5px;color:var(--muted);margin:5px 0 16px;line-height:1.55;}
.ag-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ag-fields .full{grid-column:1/-1;}
.ag-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px 4px;}
.ag-field label span{color:var(--muted);font-weight:500;}
.ag-field input,.ag-field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #c9d3e6;border-radius:14px;padding:13px 16px;outline:none;transition:border-color .16s var(--ease),box-shadow .16s var(--ease);}
.ag-field textarea{resize:vertical;min-height:72px;line-height:1.5;}
.ag-field input:focus,.ag-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,64,224,.12);}
.ag-field input::placeholder,.ag-field textarea::placeholder{color:#9aa7bd;}
.ag-seg{display:flex;flex-wrap:wrap;gap:8px;}
.ag-seg label{position:relative;margin:0;cursor:pointer;}
.ag-seg input{position:absolute;opacity:0;width:1px;height:1px;}
.ag-seg span{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--ink-2);border:1px solid #c9d3e6;border-radius:var(--pill);padding:9px 14px;background:#fff;transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);}
.ag-seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;}
.ag-seg input:focus-visible+span{box-shadow:0 0 0 4px rgba(11,64,224,.18);}
.ag-hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;}
.ag-submit{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ag-submit .btn{padding:15px 26px;}
.ag-submit .fine{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:26ch;}
.ag-form .err{display:none;margin-top:12px;font-size:14px;color:#b42318;background:#fff1f0;border:1px solid #f5c2c0;border-radius:12px;padding:10px 14px;}
.ag-form .err.show{display:block;}
.ag-done{display:none;}
.ag-form.is-done .ag-done{display:block;}
.ag-form.is-done .ag-live{display:none;}
.ag-done .n{font-family:var(--display);font-weight:700;font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.04em;color:var(--blue);}
.ag-done .n small{font-size:.42em;color:var(--muted);letter-spacing:-.01em;margin-left:6px;}
.ag-done h3{font-family:var(--display);font-size:22px;margin-top:10px;letter-spacing:-.02em;}
.ag-done p{font-size:15px;color:var(--ink-2);margin-top:8px;line-height:1.6;}
.ag-done .btn{margin-top:16px;}

/* ---------- what you walk out with (navy band) ---------- */
.ag-band{padding-block:clamp(56px,7vw,104px);}
.ag-band .ag-band-h{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;max-width:18ch;}
.ag-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(26px,3.6vw,54px);margin-top:clamp(28px,3.6vw,48px);align-items:start;}
.ag-out h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;color:#fff;}
.ag-out p{margin-top:8px;font-size:15.5px;line-height:1.62;color:#b7c4e3;max-width:40ch;}
.ag-out .ic{width:44px;height:44px;border-radius:12px;background:rgba(253,201,33,.12);display:grid;place-items:center;color:var(--gold);margin-bottom:14px;flex:0 0 auto;}
.ag-out-lead h3{font-size:clamp(24px,2.6vw,32px);}
.ag-out-lead p{font-size:clamp(16px,1.4vw,17.5px);max-width:46ch;}
.ag-out-rest{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);padding-top:6px;}
.ag-out-item{display:flex;gap:16px;align-items:flex-start;}
.ag-out-item .ic{width:38px;height:38px;margin-bottom:0;}
.ag-out-item h3{font-size:clamp(18px,1.7vw,20px);}
.ag-out-item p{margin-top:6px;font-size:14.8px;}
/* an honest little picture of what the thing you build actually does */
.ag-out-mock{margin-top:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px 16px;max-width:none;}
.ag-out-mock .ao-bar{display:flex;align-items:center;gap:6px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid rgba(255,255,255,.1);}
.ag-out-mock .ao-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);}
.ag-out-mock .ao-bar b{margin-left:8px;font-family:var(--display);font-size:13px;color:#dbe4f7;font-weight:600;}
.ag-out-mock .ao-line{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.5;color:#c7d3ec;padding:5px 0;}
.ag-out-mock .ao-line.done{color:#fff;}
.ag-out-mock .ao-tag{flex:0 0 auto;min-width:54px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--gold);}

/* ---------- what an agent is ---------- */
.ag-define{padding-block:clamp(56px,7vw,110px);}
.ag-define-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;}
.ag-define h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;max-width:16ch;}
.ag-define .ag-def{margin-top:18px;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:44ch;}
.ag-define .ag-def b{color:var(--ink);font-weight:600;}
.ag-define .ag-eg{margin-top:18px;padding:16px 18px;border-left:3px solid var(--gold);background:var(--bg-soft);border-radius:0 14px 14px 0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:46ch;}
.ag-diagram{background:#fff;border:1px solid var(--hair);border-radius:24px;padding:clamp(18px,2.6vw,30px);box-shadow:var(--shadow-sm);}
.ag-diagram svg{width:100%;height:auto;display:block;}
.ag-diagram .dg-v{display:none;max-width:360px;margin:0 auto;}

/* ---------- the night, in three parts ---------- */
.ag-night{padding-block:clamp(56px,7vw,110px);background:var(--bg-soft);}
.ag-night h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;}
.ag-night .lead{margin-top:14px;}
.ag-night-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start;}
.ag-night-intro .lead{margin-top:14px;}
@media(min-width:901px){.ag-night-intro{position:sticky;top:96px;}}
.ag-steps{list-style:none;margin:0;padding:0;position:relative;}
.ag-steps::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--gold) 0 46px,#d7deec 46px);border-radius:2px;}
.ag-step{position:relative;padding:0 0 clamp(28px,3.4vw,42px) 62px;}
.ag-step:last-child{padding-bottom:0;}
.ag-step .t{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);}
.ag-step .t b{position:absolute;left:0;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--hair);display:grid;place-items:center;font-size:16px;color:var(--ink);letter-spacing:0;}
.ag-step:first-child .t b{border-color:var(--gold);}
.ag-step h3{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.02em;margin-top:9px;max-width:22ch;}
.ag-step p{margin-top:10px;font-size:15.8px;line-height:1.62;color:var(--ink-2);max-width:56ch;}
@media(min-width:901px){
  .ag-step{padding-left:76px;}
  .ag-steps::before{left:26px;top:18px;background:linear-gradient(var(--gold) 0 56px,#d7deec 56px);}
  .ag-step .t b{width:54px;height:54px;font-size:19px;left:0;}
}
@media(max-width:900px){
  .ag-night-grid{grid-template-columns:minmax(0,1fr);}
  .ag-steps{margin-top:clamp(26px,3.4vw,40px);}
}

/* ---------- dates + seats (dynamic) ---------- */
.ag-dates{padding-block:clamp(56px,7vw,110px);}
.ag-dates h2,.ag-seats h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;}
.ag-datelist{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--hair);}
.ag-date{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,32px);align-items:center;padding:22px 0;border-bottom:1px solid var(--hair);}
.ag-date .cal{width:74px;text-align:center;border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:#fff;}
.ag-date .cal .m{display:block;background:var(--navy);color:var(--gold);font-size:11.5px;font-weight:700;letter-spacing:.1em;padding:5px 0;}
.ag-date .cal .d{display:block;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;padding:9px 0 8px;color:var(--ink);letter-spacing:-.03em;}
.ag-date h3{font-size:clamp(18px,1.9vw,23px);letter-spacing:-.02em;}
.ag-date p{margin-top:4px;font-size:14.5px;color:var(--muted);line-height:1.5;}
.ag-date .st{font-family:var(--display);font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;}
.ag-date .st.on{color:var(--blue);}
.ag-empty{margin-top:clamp(20px,2.6vw,32px);font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:52ch;}
.ag-empty b{color:var(--ink);font-weight:600;}

.ag-seats{padding-block:clamp(56px,7vw,110px);background:var(--bg-soft);}
.ag-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2.2vw,24px);margin-top:clamp(24px,3vw,40px);}
.ag-tier{background:#fff;border:1px solid var(--hair);border-radius:24px;padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;}
.ag-tier.locked{background:var(--bg-soft2);border-style:dashed;box-shadow:none;}
.ag-tier .nm{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);}
.ag-tier .pr{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.04em;line-height:1;color:var(--ink);}
.ag-tier .ds{font-size:14.5px;line-height:1.55;color:var(--ink-2);flex:1;}
.ag-tier .av{font-size:13px;color:var(--muted);}
.ag-tier .av.low{color:#b45309;font-weight:600;}
.ag-tier .btn{width:100%;margin-top:6px;}
.ag-tier .lockline{font-size:13.5px;color:var(--muted);line-height:1.5;}
.ag-early{margin-top:18px;padding:14px 18px;border-radius:14px;background:var(--gold-soft);border:1px solid #f3dfa0;color:var(--gold-ink);font-size:14.5px;line-height:1.5;display:none;}
.ag-early.show{display:block;}

/* buy dialog */
.ag-dialog{border:0;border-radius:24px;padding:0;max-width:min(92vw,480px);width:100%;box-shadow:var(--shadow-float);}
.ag-dialog::backdrop{background:rgba(4,18,58,.55);backdrop-filter:blur(4px);}
.ag-dialog .in{padding:28px;}
.ag-dialog h3{font-family:var(--display);font-size:22px;letter-spacing:-.02em;}
.ag-dialog .sub{margin:6px 0 18px;font-size:14.5px;color:var(--muted);line-height:1.5;}
.ag-dialog .ag-fields{grid-template-columns:1fr;}
.ag-dialog .qty{display:flex;align-items:center;gap:10px;}
.ag-dialog .qty button{width:44px;height:44px;border-radius:50%;border:1px solid #c9d3e6;background:#fff;font-size:18px;cursor:pointer;color:var(--ink);}
.ag-dialog .qty output{font-family:var(--display);font-weight:700;font-size:18px;min-width:24px;text-align:center;}
.ag-dialog .row{display:flex;gap:10px;margin-top:18px;}
.ag-dialog .row .btn{flex:1;}
.ag-dialog .tot{font-size:14px;color:var(--ink-2);margin-top:10px;}
.ag-dialog .bd-fine{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:8px;}
.ag-dialog .tot b{color:var(--ink);}

/* ---------- note from Nelson + FAQ ---------- */
.ag-note{padding-block:clamp(56px,7vw,110px);}
.ag-note-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;}
.ag-note h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;max-width:16ch;}
.ag-note .who{display:flex;align-items:center;gap:12px;margin-top:22px;}
.ag-note .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--hair);}
.ag-note .who b{display:block;font-family:var(--display);font-size:15px;color:var(--ink);}
.ag-note .who span{font-size:13px;color:var(--muted);}
.ag-note .letter p{font-size:clamp(16px,1.4vw,18px);line-height:1.66;color:var(--ink-2);max-width:52ch;}
.ag-note .letter p+p{margin-top:16px;}
.ag-faq{border-top:1px solid var(--hair);}
.ag-faq details{border-bottom:1px solid var(--hair);}
.ag-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.01em;}
.ag-faq summary::-webkit-details-marker{display:none;}
.ag-faq summary::after{content:"+";font-size:22px;color:var(--muted);flex:0 0 auto;transition:transform .2s var(--ease);}
.ag-faq details[open] summary::after{transform:rotate(45deg);}
.ag-faq details p{padding:0 0 18px;font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:60ch;}

/* ---------- closing band ---------- */
.ag-close{padding-block:clamp(60px,8vw,120px);}
.ag-close h2{font-size:clamp(30px,4.4vw,56px);letter-spacing:-.034em;max-width:14ch;}
.ag-close .lead{margin-top:14px;}
.ag-close .ag-form{margin-top:28px;max-width:560px;}
.ag-close .ag-form{border-color:rgba(255,255,255,.14);}

/* ---------- thanks page ---------- */
.ag-thanks{padding-block:clamp(40px,6vw,90px);}
.ag-thanks .card{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--hair);border-radius:28px;box-shadow:var(--shadow-card);padding:clamp(24px,3.4vw,40px);}
.ag-thanks h1{font-size:clamp(32px,4.4vw,52px);letter-spacing:-.034em;margin-top:10px;}
.ag-thanks .when{margin-top:16px;padding:16px 18px;background:var(--bg-soft);border-radius:16px;font-size:15.5px;line-height:1.7;color:var(--ink-2);}
.ag-thanks .when b{color:var(--ink);}
.ag-codes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.ag-code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:700;font-size:22px;letter-spacing:.08em;color:var(--ink);border:2px dashed #c9d3e6;border-radius:14px;padding:12px 18px;}
.ag-thanks p{margin-top:14px;font-size:15.5px;line-height:1.62;color:var(--ink-2);}
.ag-thanks .btn{margin-top:20px;}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .ag-copy h1{max-width:14ch;}
}
@media(max-width:900px){
  .ag-grid,.ag-define-grid,.ag-note-grid{grid-template-columns:minmax(0,1fr);}
  .ag-grid{grid-template-areas:"copy" "roster" "form";}
  .ag-roster{margin-top:clamp(70px,14vw,96px);}
  .ag-roster .ag-photo{width:min(100%,340px);margin-top:clamp(-70px,-14vw,-96px);}
  .ag-out{grid-template-columns:minmax(0,1fr);}
  .ag-out p,.ag-step p{max-width:56ch;}
  .ag-out-mock{max-width:none;}
}
@media(max-width:640px){
  .ag-fields{grid-template-columns:1fr;}
  .ag-copy h1{font-size:clamp(36px,10.4vw,48px);}
  .ag-diagram .dg-h{display:none;}
  .ag-diagram .dg-v{display:block;}
  .ag-date{grid-template-columns:auto 1fr;}
  .ag-date .st{grid-column:2;justify-self:start;}
  .ag-stamp{right:10px;top:-14px;font-size:11.5px;padding:7px 12px;}
  .ag-field input,.ag-field textarea{font-size:16px;}
}
@media(prefers-reduced-motion:reduce){
  .ag-faq summary::after{transition:none;}
}
@media print{
  .ag-roster,.ag-dialog,.site-header,.site-footer,.ag-close{display:none;}
}