/* Copied verbatim from Design: ambitions-design/mockups/agents/src/css/agents.css (Oct 17), minus the mockup-only .mk-example/.mk-hold badges. Production glue at the end. */
/* /agents page. ADD-ON to waitlist.css + voice.css + conn.css (Daylight / Molten tokens unchanged). */
.agents section{scroll-margin-top:16px}
.hero .eyebrow{display:flex;align-items:center;gap:8px;font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accentText);margin:8px 0 14px}
.hero h1{font:700 40px/43px var(--sans);letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance}
.hero .sub{font:400 18px/26px var(--sans);color:var(--text2);margin:0 0 24px;max-width:32em;text-wrap:pretty}
.hero .cta{width:100%;min-height:56px;font-size:18px}
.hero .cta .ic{width:18px;height:18px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>') center/18px no-repeat}
.works{margin:16px 0 0;justify-content:center}
.works .lab{font:500 12px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text2)}
.works .nm{padding:7px 14px}
.works .soon{font:400 13px/16px var(--sans);color:var(--text2)}
.sec{margin:56px 0 0}
.sec h2{font:700 28px/32px var(--sans);letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.sec .lede{font:400 17px/24px var(--sans);color:var(--text2);margin:0 0 20px}
.kicker{display:flex;align-items:center;gap:8px;font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accentText);margin:0 0 10px}
/* How it works */
.how{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.how li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.how .n{grid-row:span 2;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--inputBorder);display:grid;place-items:center;font:600 15px/1 var(--mono);color:var(--text)}
.how li:last-child .n{background:var(--text);color:var(--bg);border-color:var(--text)}
[data-theme=dark] .how li:last-child .n{background:linear-gradient(135deg,#FFA94D,#FF6247 55%,#F2307A);color:#0A0908;border:0}
.how b{font:600 18px/24px var(--sans);align-self:end}
.how p{font:400 16px/22px var(--sans);color:var(--text2);margin:0}
/* What your AI gets */
.gets{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:22px 20px 8px;box-shadow:var(--shadow)}
.gets h2{font:700 24px/29px var(--sans);letter-spacing:-.015em;margin:0 0 4px}
.gets .from{font:400 15px/20px var(--sans);color:var(--text2);margin:0 0 10px}
.gets ul{list-style:none;margin:0;padding:0}
.gets li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--border);align-items:baseline}
.gets .t{font:500 11px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accentText)}
.gets .d{font:400 16px/22px var(--sans);color:var(--text2)}
.gets .d b{font-weight:600;color:var(--text)}
/* Interview */
.iv .card{margin-top:20px}
.iv .privline{font:400 14px/20px var(--sans);color:var(--text2);margin:14px 4px 0;text-align:center}
.iv .privline a{display:inline-block;padding:12px 2px;margin:-12px 0}
/* Founder line (secondary benefit) */
.founder{display:flex;gap:14px;align-items:flex-start;margin:40px 0 0;padding:18px 20px;border-radius:20px;border:1px dashed var(--inputBorder)}
.founder .dia{margin-top:8px}
.founder b{display:block;font:600 16px/22px var(--sans)}
.founder p{margin:2px 0 0;font:400 15px/21px var(--sans);color:var(--text2)}
/* $5 recording (HOLD) */
.rec{margin:16px 0 0;padding:18px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--border)}
.rec .ey{font:500 11px/14px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin:0 0 6px}
.rec b{display:block;font:600 17px/23px var(--sans)}
.rec p{font:400 15px/21px var(--sans);color:var(--text2);margin:2px 0 12px}
.rec .btn{min-height:48px;font-size:16px;width:100%}
.rec small{display:block;font:400 13px/18px var(--sans);color:var(--text2);margin-top:8px;text-align:center}
/* Thank-you (/agents variant: connector first) */
.ty h2{font:700 30px/34px var(--sans);letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.ty > p.l{color:var(--text2);margin:0 0 20px}
.mapblock{margin:16px 0 0;padding:16px;border:1px solid var(--border);border-radius:20px;background:var(--bg)}
[data-theme=dark] .mapblock{background:#0A0908}
.mapblock .top{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.mapblock img{width:56px;height:72px;border-radius:4px;border:1px solid var(--border);flex:none;background:#fff;box-shadow:0 1px 2px rgba(17,18,20,.08),0 4px 10px rgba(17,18,20,.08)}
.mapblock b{display:block;font:600 17px/22px var(--sans)}
.mapblock .top span{font:400 15px/20px var(--sans);color:var(--text2)}
.mapblock .btn{width:100%;min-height:48px;font-size:16px}
.mapblock .pl{display:flex;align-items:center;gap:8px;margin:12px 0 0}
.mapblock .pl code{flex:1;min-width:0;font:500 13px/18px var(--mono);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapblock .pl button{flex:none;min-height:44px;padding:0 6px;background:none;border:0;font:600 15px/1 var(--sans);color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mapblock .who{font:400 13px/18px var(--sans);color:var(--text2);margin:2px 0 0}
.ty .fine{font:400 14px/20px var(--sans);color:var(--text2);margin:10px 0 0;text-align:center}
.ty .ref{border-top:1px solid var(--border);padding-top:20px;margin-top:24px}
.ty .ref .rl{font:600 17px/22px var(--sans);margin:0 0 10px;color:var(--text)}
.ty .ref .row{display:flex;gap:10px;margin-top:10px}.ty .ref .row .btn{flex:1;min-height:48px;font-size:16px}
.ty .founder{margin-top:20px}
.btn .ic{width:18px;height:18px;background:currentColor;flex:none;display:inline-block}
.ic-arrow{-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/18px no-repeat}
.typrev{display:none}
.foot{margin-top:24px}
/* desktop */
@media (min-width:960px){
  .agents .wrap{display:block;padding:40px 48px 64px}
  .hero{display:grid;grid-template-columns:1fr 500px;gap:80px;align-items:center;padding:24px 0 16px}
  .hero h1{font-size:68px;line-height:70px;letter-spacing:-.035em;margin-bottom:22px}
  .hero .sub{font-size:21px;line-height:31px;margin-bottom:32px}
  .hero .cta{width:auto;min-width:280px;padding:0 32px}
  .works{justify-content:flex-start;margin-top:22px}
  .gets{padding:30px 32px 12px}
  .gets li{grid-template-columns:120px 1fr}
  .sec{margin-top:104px}
  .sec h2{font-size:40px;line-height:44px}
  .how{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
  .how li{display:block;padding:28px}
  .how .n{margin:0 0 20px}
  .how b{display:block;margin:0 0 6px;font-size:20px;line-height:26px}
  .how p{font-size:17px;line-height:24px}
  .iv{display:grid;grid-template-columns:1fr 560px;gap:96px;align-items:start}
  .iv .card{margin-top:0}
  .iv .privline{text-align:left;margin:20px 0 0}
  .belowfold{max-width:1104px}
  .founder{max-width:640px}
  .rec{max-width:640px}
  .tywrap{display:grid;grid-template-columns:1fr 560px;gap:96px;align-items:start;padding-top:24px}
  .typrev{display:block;position:sticky;top:24px}
  .typrev .kicker{margin-bottom:16px}
  .typrev img{width:100%;max-width:420px;display:block;border-radius:6px;border:1px solid var(--border);box-shadow:0 2px 4px rgba(17,18,20,.06),0 18px 40px rgba(17,18,20,.12);background:#fff}
  [data-theme=dark] .typrev img{box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .typrev > p{font:400 16px/23px var(--sans);color:var(--text2);margin:16px 0 0;max-width:420px}
  .ty h2{font-size:36px;line-height:40px}
  .mapblock .top img{display:none}
}
.ty .mapblock .btn-secondary{flex:none}
.how p,.gets .d,.sec .lede,.founder p,.hint{text-wrap:pretty}
@media (max-width:959px){
  /* thank-you on phones: no card-in-card; the connector card gets the full width */
  .card.ty{background:transparent;border:0;box-shadow:none;padding:0 0 8px}
  .ty .mapblock{background:var(--surface)}
  [data-theme=dark] .ty .mapblock{background:var(--surface)}
  .ty .linkbox{background:var(--surface)}
}
@media (min-width:960px){
  .hero{grid-template-columns:1fr 460px;gap:64px}
  .hero h1{font-size:64px;line-height:66px}
}
@media (min-width:960px){.iv .founder{margin-top:32px}}

/* ---- production glue (Engineering) ---- */
/* Design renders "What your AI gets" once per layout (hero's right column on desktop, own section on phones). The
   static page ships both and shows one, so there is no layout script; the hidden copy is display:none (not read). */
.gets-desk{display:none}
@media (min-width:960px){.gets-desk{display:block}.gets-phone{display:none}.iv-phone{display:none}}
@media (max-width:959px){.iv-desk{display:none}}
.hero .cta{text-decoration:none}
.mapblock .mc-sm{width:56px;height:72px}
@media (min-width:960px){.mapblock .top .mc-sm{display:none}}
.typrev .mc-lg{max-width:420px}
.conn .conn-phone{font:400 14px/20px var(--sans);color:var(--text2);margin:8px 0 0}

/* Homepage (Oct 17): waitlist line under the "Works with" badges (Design QA: 13px like the badges, ink link,
   44px-tall tap target without moving the line). */
.applink{margin:6px 0 0;font:400 13px/16px var(--sans);color:var(--text2);text-align:center}
.applink a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-14px -4px;color:var(--text);text-decoration:underline;text-underline-offset:3px;vertical-align:middle}
.applink a:hover{text-decoration-thickness:2px}
@media (min-width:960px){.applink{text-align:left}}