/* AgentLive.Events site-only styles. Requires tokens/fonts.css, tokens/tokens.css,
   components/components.css. Built from the tokens; never restyles the kit. */

/* The comparison table has a min-content width of ~506px. .section is a flex column and
   flex items default to min-width:auto, so that width propagated up and stretched every
   section on phones. Allow the flex/grid children to shrink, then scroll the table inside
   its own container. Without the min-width:0 chain the overflow container never shrinks. */
.section>*{min-width:0}
.split>*{min-width:0}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto}
.table-scroll>.table{min-width:560px}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--surface);
  font-family:var(--mono);font-size:14px;padding:12px 16px;z-index:10}
.skip:focus{left:0}

/* masthead additions: nav + uppercase strapline */
.masthead-nav{display:flex;gap:var(--s5);align-items:center}
.masthead-nav a{font-family:var(--mono);font-size:13px;color:var(--ink-soft);text-decoration:none}
.masthead-nav a:hover{color:var(--ticket-red)}
.masthead-nav a.here{color:var(--ink);font-weight:600}
.strapline{font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink-soft);padding:var(--s3) 0;border-bottom:var(--hairline) solid var(--rule)}
/* on phones the nav collapses to Why now only; the uppercase line stays */
@media (max-width:720px){.masthead-nav a:not(.keep){display:none}}

/* hero: two columns, left ~1.25 of the right */
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s7);align-items:start}
.hero-left{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--s6)}}

/* status line */
.status{display:flex;align-items:center;gap:var(--s2);font-family:var(--mono);font-size:13px;
  color:var(--ink-soft);flex-wrap:wrap}
.status .sq{width:8px;height:8px;background:var(--ink);display:inline-block;flex:none}
.status .count{font-weight:600;color:var(--ink)}

/* copy box */
.copybox-text .prompt{color:var(--ink);margin-right:.5em}
.copybox-text.soft-line{color:var(--ink-soft)}
.hero-left .small{margin:0}

/* conversation panel */
.convo{background:var(--surface);border:var(--hairline) solid var(--ink)}
.convo-bar{display:flex;justify-content:space-between;gap:var(--s4);padding:10px 14px;
  border-bottom:var(--hairline) solid var(--ink);font-family:var(--mono);font-size:12.5px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.convo-body{margin:0;padding:14px;font-family:var(--mono);font-size:14px;line-height:1.55}
.convo-body div{display:flex;gap:var(--s3)}
.convo-body div+div{margin-top:14px}
.convo-body dt{flex:0 0 64px;color:var(--ink-soft)}
.convo-body dd{margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.convo-body .strong{font-weight:600}

/* on the wire strip */
.wire{border-top:var(--hairline) solid var(--ink);border-bottom:var(--hairline) solid var(--ink);
  padding:var(--s3) 0;display:flex;gap:var(--s4);flex-wrap:wrap;align-items:baseline;
  font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase}
.wire .wire-label{color:var(--ink-soft)}

/* how it works cards */
.cards{border:var(--hairline) solid var(--ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cards>div{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.cards>div+div{border-left:var(--hairline) solid var(--ink)}
.cards p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.cards .tag{font-family:var(--mono);font-size:12.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-soft)}
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .cards>div+div{border-left:0;border-top:var(--hairline) solid var(--ink)}
}

/* never-do list */
.never{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s7);
  margin:0;padding:0;list-style:none}
.never li{font-size:15px;line-height:1.5;color:var(--ink-soft)}
@media (max-width:720px){.never{grid-template-columns:1fr}}

/* big numbers band */
.bignums{border-top:var(--heavy) solid var(--ink);border-bottom:var(--hairline) solid var(--ink);
  padding:var(--s6) 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.bignums .fig{font-family:var(--mono);font-size:56px;font-weight:500;line-height:1;
  letter-spacing:-1px;display:block}
.bignums p{margin:var(--s2) 0 0;font-size:15px;color:var(--ink-soft)}
@media (max-width:720px){
  .bignums{grid-template-columns:1fr;gap:var(--s5)}
  .bignums .fig{font-size:44px}
}

/* agents strip: nine cells */
.agents-strip{border:var(--hairline) solid var(--ink);display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr))}
.agents-strip span{padding:14px 6px;text-align:center;font-family:var(--mono);font-size:13px;
  overflow-wrap:anywhere}
.agents-strip span+span{border-left:var(--hairline) solid var(--rule)}
@media (max-width:860px){
  .agents-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .agents-strip span+span{border-left:0}
  .agents-strip span{border-top:var(--hairline) solid var(--rule)}
  .agents-strip span:nth-child(-n+3){border-top:0}
  .agents-strip span:not(:nth-child(3n+1)){border-left:var(--hairline) solid var(--rule)}
}

/* skill / mcp / api */
.soonrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.soonrow>div{border-top:var(--hairline) solid var(--rule);padding-top:var(--s3)}
.soonrow .head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.soonrow p{margin:4px 0 0;font-size:15px;color:var(--ink-soft)}
@media (max-width:720px){.soonrow{grid-template-columns:1fr;gap:var(--s5)}}

/* two-column split used by "what your agent reads" and contact */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:var(--s6)}}

/* The plaintext block ships with hard line breaks: its longest line is 67 characters.
   Inside the narrower .split column, pre-wrap re-wraps and orphans words, while plain
   `pre` clips (Willie caught the clipping on 2026-09-22). Keep the authored line breaks
   and size the type so all 67 characters sit squarely inside the box.
   IBM Plex Mono advance width is 0.6em, so 67 chars need 40.2em. Sizing against the
   container width (minus 36px padding) means the longest line always fits exactly. */
.split .plaintext{white-space:pre;max-width:100%;overflow:hidden;
  /* The pre is a direct grid child of .split, so size against the grid track itself.
     67 chars of Plex Mono need 40.2em. The content column stops growing at --max-width,
     so clamp the effective page width to that cap before halving, or the type keeps
     scaling past 1168px and overflows the now-fixed track. */
  --track: calc((min(100vw - 2 * var(--margin-desktop), var(--max-width)) - var(--s7)) / 2);
  font-size:clamp(10px, calc((var(--track) - 40px) / 40.2), 14px)}
/* Below ~1000px the two-column track would force the type under 10px to fit 67 chars.
   Readability wins there: drop to one column early so the block gets full width. */
@media (min-width:861px) and (max-width:1000px){
  .split{grid-template-columns:1fr}
  .split .plaintext{--track: calc(min(100vw - 2 * var(--margin-desktop), var(--max-width)))}
}
@media (max-width:860px){
  /* single column below 860px: full width is available again */
  .split .plaintext{
    --track: calc(100vw - 2 * var(--margin-mobile));
    font-size:min(14px, calc((var(--track) - 40px) / 40.2))}
}

/* why now rows */
.whynow-row{display:grid;grid-template-columns:64px 1fr 1.6fr;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:var(--hairline) solid var(--rule)}
.whynow-row .num{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
.whynow-row p{margin:0}
.whynow-list{border-top:var(--hairline) solid var(--ink)}
@media (max-width:860px){.whynow-row{grid-template-columns:1fr;gap:var(--s3)}}

/* footer additions */
.footer-links{display:flex;gap:var(--s5);flex-wrap:wrap}
.footer-links a{font-family:var(--mono);font-size:13px;color:var(--ink-soft);text-decoration:none}
.footer-links a:hover{color:var(--ticket-red)}
.footer-copy{width:100%;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}

/* small pages */
.pagebody{padding:var(--s7) 0;display:flex;flex-direction:column;gap:var(--s5)}
.pagebody .measure{max-width:68ch}

/* Pricing in the masthead. Below 880px the full link row no longer fits beside
   the wordmark, so the nav wraps onto its own line and stays right-aligned,
   at the same 24px gap as desktop. Below 720px the old rule still hides every
   link except .keep (now Pricing and Why now). Below 480px those two sit on
   their own line so they are not squeezed against the wordmark. */
@media (max-width:880px){
  .masthead-row{flex-wrap:wrap;row-gap:var(--s3)}
  .masthead-nav{margin-left:auto}
}
@media (max-width:480px){
  .masthead-nav{flex-basis:100%;justify-content:flex-end}
}

/* Pricing study only. Other pages keep the shared .pagebody rhythm.
   .pagebody is a flex column, so the browser's paragraph and list margins
   do not collapse into its gap and the sections were opening up. The prose
   also sat at 68ch under a full-width headline; it now uses the same 860px
   measure as the deck under why-now's headline. Wide tables scroll inside
   .table-scroll instead of stretching the page. */
.page-pricing .hero .small{margin:0;max-width:860px}
.page-pricing .pagebody{padding-top:var(--s5);gap:0;border-top:var(--hairline) solid var(--ink)}
.page-pricing .pagebody>*{margin:0;min-width:0}
.page-pricing .pagebody>*+*{margin-top:var(--s5)}
.page-pricing .pagebody h2,
.page-pricing .pagebody h3,
.page-pricing .pagebody .measure{max-width:860px}
.page-pricing .pagebody>h2:not(:first-child){margin-top:var(--s7);padding-top:var(--s5);border-top:var(--hairline) solid var(--rule)}
.page-pricing .pagebody>h3{margin-top:var(--s6)}
.page-pricing .pagebody ul{padding-left:1.2em}
.page-pricing .pagebody li+li{margin-top:var(--s3)}
.page-pricing .pagebody a,
.page-pricing .table td,
.page-pricing .table th{overflow-wrap:anywhere}
.page-pricing .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.page-pricing .table-scroll>.table{min-width:0;width:100%}
.page-pricing .table-scroll:has(.nums){scrollbar-color:var(--ink-soft) var(--surface)}
.page-pricing .table-scroll:has(.nums)::-webkit-scrollbar{height:10px}
.page-pricing .table-scroll:has(.nums)::-webkit-scrollbar-track{background:var(--surface)}
.page-pricing .table-scroll:has(.nums)::-webkit-scrollbar-thumb{background:var(--ink-soft)}
.page-pricing .table-scroll>.table.nums{table-layout:fixed;width:100%;min-width:64rem}
.page-pricing .table.nums th,
.page-pricing .table.nums td{white-space:normal;overflow-wrap:break-word;padding:10px 8px}
/* Equal fixed columns wrap the long headers onto four lines, and the row
   grows to that height. At phone width only the short headers are on screen,
   so the row looks like an empty band. Keep every header on one line, and
   cap the first three columns so Marketplace, Match and Cheaper still fit. */
@media (max-width:720px){
  .page-pricing .table-scroll>.table.nums{table-layout:auto;width:max-content;min-width:100%}
  .page-pricing .table.nums th{white-space:nowrap}
  .page-pricing .table.nums td:nth-child(-n+3){max-width:7.5rem}
}
.page-pricing .table.nums th:first-child,
.page-pricing .table.nums td:first-child{position:sticky;left:0;z-index:1;background:var(--paper)}
.page-pricing .table.nums th:first-child{background:var(--surface);z-index:2}

/* TicketNetwork policy block (document.write output) inside our layout */
.tn-policy{border-top:1px solid var(--rule,currentColor);padding-top:var(--s6)}
.tn-policy .tn_service_policies_container{max-width:68ch;font:inherit;color:inherit;width:auto}
.tn-policy .tn_service_policies_container *{font-family:inherit;max-width:100%;overflow-wrap:anywhere}