/* ═══════════════════════════════════════════════════════════════════════════
   RELAY AI — page components. Loaded after relay.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero ───────────────────────────────────────────────────────────────── */
/* The nav is fixed, so the hero must clear it — but it was clearing it by
   calc(72px + s7) = 216px, which on a 1280x800 laptop spent a quarter of the fold
   on nothing before the headline. s6 gives ~136px there and still breathes at 1920.
   var(--nav-h), not a literal 72px: the nav's height is defined once, in relay.css. */
.hero{padding-block:calc(var(--nav-h) + var(--s6)) var(--s6);position:relative;overflow:clip}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:var(--s5);align-items:center}
@media(max-width:960px){.hero__grid{grid-template-columns:1fr;gap:var(--s4)}
  .hero{padding-block:calc(72px + var(--s5)) var(--s5)}}
.hero h1{margin-top:var(--s3)}
.hero .lead{margin-top:var(--s3)}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--fg-mut);
  border:1px solid var(--line);border-radius:var(--r-full);padding:.4rem .85rem;background:var(--surface)}
.pip{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);
  animation:pip 2.4s var(--e-io) infinite}
@keyframes pip{0%,100%{opacity:1}50%{opacity:.35}}
.hero__note{margin-top:var(--s3);font-size:var(--t-sm);color:var(--fg-faint);max-width:52ch}

/* ── instant demo ───────────────────────────────────────────────────────── */
.dform{display:flex;gap:.6rem;margin-top:var(--s4);max-width:520px}
.dform input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:.9rem 1.25rem;outline:none;transition:all var(--d1) var(--e)}
.dform input:focus{border-color:var(--accent-2);background:var(--surface-2)}
.dform input::placeholder{color:var(--fg-faint)}
.dform input.err{border-color:#e24b4a}
@media(max-width:560px){.dform{flex-direction:column}.dform .btn{width:100%}}
.dnote{margin-top:.75rem;font-size:var(--t-xs);color:var(--fg-faint)}
.dnote.bad{color:#ff9b9a}

/* ── agent panel ────────────────────────────────────────────────────────── */
.panel{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.85)}
.panel__top{padding:.95rem 1.1rem;display:flex;align-items:center;gap:.7rem;border-bottom:1px solid var(--line)}
.panel__av{width:36px;height:36px;border-radius:11px;background:var(--grad);display:grid;place-items:center;flex-shrink:0}
.panel__top b{font-size:.9rem;display:block;line-height:1.25}
.panel__top small{font-size:.72rem;color:var(--fg-faint)}
.tag{margin-left:auto;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r-full);padding:.2rem .55rem;color:var(--fg-faint);flex-shrink:0}
.tag--ok{color:#8fd9b6;border-color:rgba(57,224,161,.35)}
.stream{padding:.9rem 1rem 1.1rem;min-height:270px;display:flex;flex-direction:column;
  gap:.55rem;justify-content:flex-end}
.msg{max-width:85%;padding:.65rem .9rem;border-radius:15px;font-size:.86rem;line-height:1.5;
  opacity:0;transform:translateY(8px);animation:rise .5s var(--e) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.msg--in{background:var(--surface-2);align-self:flex-start;border-bottom-left-radius:5px}
.msg--out{background:var(--grad);align-self:flex-end;border-bottom-right-radius:5px}
.msg small{display:block;font-size:.62rem;opacity:.7;margin-top:.2rem}
.vtag{display:block;margin-top:.35rem;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#8fd9b6}
.vtag.off{color:var(--fg-faint)}
.typing{align-self:flex-start;background:var(--surface-2);border-radius:15px;border-bottom-left-radius:5px;
  padding:.8rem 1rem;display:flex;gap:.3rem}
.typing i{width:5px;height:5px;border-radius:50%;background:#8b97b3;animation:bnc 1.2s var(--e-io) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.panel__foot{display:flex;gap:.5rem;padding:.75rem .85rem;border-top:1px solid var(--line)}
.panel__foot[hidden]{display:none!important}
.panel__foot input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:.7rem .8rem;outline:none;font-size:.875rem}
.panel__foot input:focus{border-color:var(--accent-2)}
.panel__foot button{width:40px;height:40px;border-radius:12px;border:none;background:var(--grad);
  display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.sug{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 .85rem .75rem}
.sug[hidden]{display:none!important}
.sug button{font-size:.72rem;color:var(--fg-mut);border:1px solid var(--line);border-radius:var(--r-full);
  padding:.3rem .7rem;background:transparent;cursor:pointer;transition:all var(--d1) var(--e)}
.sug button:hover{color:var(--fg);border-color:var(--line-2)}

/* build progress */
.prog{padding:1.4rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;min-height:270px;justify-content:center}
.pstep{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--fg-mut);
  opacity:0;transform:translateY(6px);animation:rise .45s var(--e) forwards}
.pstep .dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(157,180,255,.3);
  flex-shrink:0;margin-top:2px;position:relative}
.pstep.run .dot{border-top-color:var(--accent);animation:spin .8s linear infinite}
.pstep.ok .dot{border-color:var(--mint);background:var(--mint)}
.pstep.ok .dot::after{content:"";position:absolute;left:3px;top:.5px;width:3px;height:6px;
  border:solid var(--ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.pstep.ok{color:var(--fg)}
.pstep.bad .dot{border-color:#e24b4a;background:#e24b4a}
.pstep small{display:block;color:var(--fg-faint);font-size:.72rem;margin-top:.15rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── section headers ────────────────────────────────────────────────────── */
.shead{max-width:64ch}
.shead h2{margin-top:var(--s2)}
.shead .lead{margin-top:var(--s3)}

/* ── credibility band (under hero) ──────────────────────────────────────────
   Deliberately NOT a customer-logo strip — there are no customers yet. It shows
   only what's verifiably true, so it can never read as invented social proof. */
.proofbar{border-block:1px solid var(--line);background:rgba(255,255,255,.012)}
.proofbar__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.75rem 2rem;padding-block:1rem;text-align:center}
.proofbar__i{font-family:var(--f-ui);font-size:var(--t-sm);letter-spacing:.01em;
  color:var(--fg-mut);position:relative;white-space:nowrap}
.proofbar__i:not(:last-child)::after{content:"";position:absolute;right:-1rem;top:50%;
  width:4px;height:4px;border-radius:50%;background:var(--line);transform:translateY(-50%)}
@media(max-width:640px){.proofbar__row{gap:.5rem 1.4rem}
  .proofbar__i:not(:last-child)::after{display:none}}

/* ── FAQ accordion ──────────────────────────────────────────────────────────
   Native <details>, deliberately zero JavaScript: after the blank-page episode,
   anything that can be done without JS is done without JS. It also means the
   answers are in the DOM for crawlers even with scripting off. */
.faq{max-width:760px;margin:var(--s5) auto 0;display:flex;flex-direction:column;gap:.55rem}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.faq__item[open]{border-color:rgba(120,150,255,.4)}
.faq summary{list-style:none;cursor:pointer;padding:1rem 1.15rem;font-family:var(--f-ui);
  font-weight:500;font-size:1.02rem;color:var(--fg);display:flex;align-items:center;
  justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--fg-faint);
  transition:transform var(--d2) var(--e);flex-shrink:0}
.faq__item[open] summary::after{transform:rotate(45deg);color:#9db4ff}
.faq__a{padding:0 1.15rem 1.1rem;color:var(--fg-mut);line-height:1.62;max-width:64ch}

/* ── bento / feature grid ───────────────────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-top:var(--s5)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.tile{padding:var(--s3);border-radius:var(--r-lg);transition:transform var(--d2) var(--e)}
.tile:hover{transform:translateY(-4px)}
.tile__ic{width:42px;height:42px;border-radius:12px;background:rgba(120,150,255,.13);
  display:grid;place-items:center;color:#9db4ff;margin-bottom:var(--s2)}
.tile h3{margin-bottom:.4rem}
.tile p{font-size:.9375rem;color:var(--fg-mut)}

/* ── pricing ────────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5);
  align-items:start}
@media(max-width:960px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.plan{padding:var(--s4) var(--s3);border-radius:var(--r-lg);display:flex;flex-direction:column;
  position:relative;transition:transform var(--d2) var(--e)}
.plan:hover{transform:translateY(-5px)}
.plan--hero{background:
  linear-gradient(180deg,rgba(92,124,250,.14),rgba(154,107,255,.05)),var(--surface);
  border-color:rgba(120,150,255,.28)}
.plan__flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .7rem;border-radius:var(--r-full);white-space:nowrap}
.plan__name{font-family:var(--f-ui);font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2)}
.plan__price{font-family:var(--f-display);font-size:3.4rem;font-weight:600;line-height:1;
  margin-top:var(--s2);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan__price sup{font-size:1.15rem;font-weight:500;vertical-align:super;margin-right:.08rem;
  letter-spacing:0;opacity:.7}
.plan__per{font-size:.85rem;font-weight:400;color:var(--fg-faint);margin-left:.25rem;letter-spacing:0}
.plan__price--ask{font-size:2.2rem;line-height:1.2;letter-spacing:-.03em}
.plan__desc{font-size:.9rem;color:var(--fg-mut);margin-top:var(--s2);min-height:3.2em}
.plan .btn{margin-top:var(--s3);width:100%}
.plan__list{list-style:none;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.6rem}
.plan__list li{font-size:.875rem;color:var(--fg-mut);padding-left:1.5rem;position:relative;line-height:1.45}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:9px;height:5px;
  border:solid var(--accent);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg);
}
.plan__list li.off{color:var(--fg-faint);opacity:.62}
.plan__list li.off::before{border-color:var(--fg-faint);transform:none;top:.62em;height:0;width:9px;
  border-width:0 0 1.6px 0}
.pnote{margin-top:var(--s4);font-size:var(--t-sm);color:var(--fg-faint);text-align:center}

/* ── voice / agent launcher ─────────────────────────────────────────────── */
.vlaunch{
  position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:.6rem;
  padding:.6rem 1.1rem .6rem .6rem;border-radius:var(--r-full);border:1px solid var(--line);
  background:rgba(12,14,24,.82);backdrop-filter:blur(16px);cursor:pointer;
  box-shadow:0 16px 44px -14px rgba(120,120,255,.5);
  transition:transform var(--d2) var(--e),box-shadow var(--d2) var(--e);
}
.vlaunch:hover{transform:translateY(-2px);box-shadow:0 22px 54px -14px rgba(120,120,255,.66)}
.vlaunch__o{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex-shrink:0}
.vlaunch__t{font-size:.875rem;font-weight:500}
.vlaunch__s{font-size:.68rem;color:var(--fg-faint);display:block;line-height:1.2}
@media(max-width:560px){.vlaunch__txt{display:none}.vlaunch{padding:.6rem;right:16px;bottom:16px}}

/* ── agent panel (voice-forward) ─────────────────────────────────────────
   Opens as chat (zero friction) with voice as a large primary action, not a
   mic icon in a corner. We sell a receptionist that answers the phone —
   hearing it is the convincing moment, so it can't be hidden. */
.ag{position:fixed;right:22px;bottom:22px;z-index:90;width:380px;max-width:calc(100vw - 28px);
  height:600px;max-height:calc(100vh - 40px);display:none;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:rgba(11,13,23,.94);backdrop-filter:blur(24px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.85)}
.ag.is-open{display:flex;animation:agup .42s var(--e)}
@keyframes agup{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.ag__top{display:flex;align-items:center;gap:.65rem;padding:.9rem 1rem;border-bottom:1px solid var(--line);flex-shrink:0}
.ag__av{width:34px;height:34px;border-radius:11px;background:var(--grad);display:grid;place-items:center;flex-shrink:0}
.ag__id b{font-size:.875rem;display:block;line-height:1.25}
.ag__id small{font-size:.7rem;color:#8fd9b6}
.ag__x{margin-left:auto;width:32px;height:32px;border:none;background:transparent;color:var(--fg-faint);
  cursor:pointer;font-size:1.3rem;line-height:1;border-radius:8px;transition:all var(--d1) var(--e)}
.ag__x:hover{color:var(--fg);background:var(--surface)}
.ag__body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;
  scrollbar-width:thin}
.ag__m{max-width:86%;padding:.6rem .85rem;border-radius:14px;font-size:.875rem;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word;animation:rise .42s var(--e) backwards}
.ag__m--bot{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:4px}
.ag__m--me{align-self:flex-end;background:var(--grad);border-bottom-right-radius:4px}

/* voice — the primary action */
.ag__voice{padding:.85rem 1rem;border-top:1px solid var(--line);flex-shrink:0}
.ag__mic{width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem;border-radius:var(--r-full);border:1px solid rgba(120,150,255,.3);
  background:linear-gradient(180deg,rgba(92,124,250,.16),rgba(154,107,255,.08));
  color:var(--fg);font-size:.9rem;font-weight:500;cursor:pointer;
  transition:all var(--d2) var(--e)}
.ag__mic:hover{border-color:rgba(120,150,255,.55);transform:translateY(-1px)}
.ag__mic.is-live{background:linear-gradient(180deg,rgba(226,75,74,.22),rgba(226,75,74,.1));
  border-color:rgba(226,75,74,.6);animation:aglive 1.3s var(--e-io) infinite}
@keyframes aglive{0%,100%{box-shadow:0 0 0 0 rgba(226,75,74,.4)}50%{box-shadow:0 0 0 10px rgba(226,75,74,0)}}
.ag__mic svg{flex-shrink:0}
.ag__or{display:flex;align-items:center;gap:.6rem;margin:.7rem 0 .55rem;color:var(--fg-faint);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.ag__or::before,.ag__or::after{content:"";flex:1;height:1px;background:var(--line)}
.ag__foot{display:flex;gap:.45rem}
.ag__foot input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:.65rem .75rem;outline:none;font-size:.875rem}
.ag__foot input:focus{border-color:var(--accent-2)}
.ag__foot button{width:38px;height:38px;border-radius:12px;border:none;background:var(--grad);
  display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.ag__foot button[disabled]{opacity:.5;cursor:default}
.ag__spk{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--fg-faint);cursor:pointer;flex-shrink:0;font-size:.95rem}
.ag__spk.on{color:#9db4ff;border-color:rgba(120,150,255,.45)}
.ag__typing{align-self:flex-start;background:var(--surface-2);border-radius:14px;
  border-bottom-left-radius:4px;padding:.7rem .9rem;display:flex;gap:.28rem}
.ag__typing i{width:5px;height:5px;border-radius:50%;background:#8b97b3;animation:bnc 1.2s var(--e-io) infinite}
.ag__typing i:nth-child(2){animation-delay:.15s}.ag__typing i:nth-child(3){animation-delay:.3s}
.ag.is-open ~ .vlaunch{display:none}
@media(max-width:560px){
  .ag{left:0;right:0;bottom:0;top:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .ag__foot input{font-size:16px}   /* iOS refuses to not zoom below 16px */
}
@media(prefers-reduced-motion:reduce){.ag.is-open{animation:none}.ag__mic.is-live{animation:none}}