/* AgentLive.Events components. Requires ../tokens/fonts.css and ../tokens/tokens.css */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.55}
.wrap{max-width:calc(var(--max-width) + 2*var(--margin-desktop));margin:0 auto;padding:0 var(--margin-desktop)}
@media (max-width:720px){.wrap{padding:0 var(--margin-mobile)} body{font-size:17px}}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--ticket-red)}
:focus-visible{outline:2px solid var(--ticket-red);outline-offset:2px}

/* type */
.display{font-size:68px;line-height:1.02;font-weight:600;letter-spacing:-1.5px;margin:0}
h1,.h1{font-size:48px;line-height:1.08;font-weight:600;letter-spacing:-1px;margin:0}
h2,.h2{font-size:36px;line-height:1.1;font-weight:600;letter-spacing:-.5px;margin:0}
h3,.h3{font-size:24px;line-height:1.2;font-weight:600;margin:0}
.deck{font-size:23px;line-height:1.4;margin:0;max-width:860px}
.small{font-size:15px;line-height:1.5}
.soft{color:var(--ink-soft)}
.label{font-family:var(--mono);font-size:12.5px;line-height:1.4;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.mono{font-family:var(--mono);font-size:15px;line-height:1.5}
em{font-style:italic}
@media (max-width:720px){.display{font-size:40px;letter-spacing:-1px} h1,.h1{font-size:34px} h2,.h2{font-size:28px} .deck{font-size:20px}}

/* masthead */
.masthead{border-top:var(--heavy) solid var(--ink);margin-top:var(--s6)}
.masthead-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-bottom:var(--hairline) solid var(--ink)}
.masthead-row img{height:22px;display:block}
.masthead-row .mono{font-size:13px;color:var(--ink-soft)}
@media (max-width:720px){.masthead-row .mono{display:none}}

/* hero */
.hero{display:flex;flex-direction:column;gap:var(--s5);padding:var(--s7) 0}

/* copy box */
.copybox{display:flex;flex-direction:column;gap:var(--s2);max-width:900px}
.copybox-row{display:flex;align-items:stretch;border:var(--hairline) solid var(--ink);background:var(--surface)}
.copybox-text{flex:1;padding:16px 18px;font-family:var(--mono);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.btn{min-width:96px;min-height:44px;padding:0 18px;border:0;background:var(--ink);color:var(--surface);font-family:var(--mono);font-size:14px;cursor:pointer}
.btn:hover{background:#000}
@media (max-width:720px){.copybox-row{flex-direction:column}}

/* pillars: four across on desktop, two on tablets, one on phones. .threeup kept for three-column uses */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border-top:var(--hairline) solid var(--rule);padding-top:var(--s4)}
.pillars p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.pillars h3{font-size:20px}
@media (max-width:960px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* three-up */
.threeup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);border-top:var(--hairline) solid var(--rule);padding-top:var(--s4)}
.threeup p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.threeup h3{font-size:20px}
@media (max-width:720px){.threeup{grid-template-columns:1fr;gap:var(--s5)}}

/* article section */
.section{border-top:var(--hairline) solid var(--rule);padding:var(--s7) 0;display:flex;flex-direction:column;gap:var(--s5)}
.section .measure{max-width:68ch}
.section ol,.section ul{margin:0;padding-left:1.2em;max-width:68ch}
.section li{margin-bottom:var(--s3)}

/* table */
.table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.table th{font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:1px;text-transform:uppercase;text-align:left;color:var(--ink-soft);background:var(--surface)}
.table th,.table td{padding:12px 14px;border-bottom:var(--hairline) solid var(--rule);vertical-align:top}
.table td.us,.table th.us{font-weight:600;color:var(--ink)}
.table-scroll{overflow-x:auto}

/* plain-text block */
.plaintext{font-family:var(--mono);font-size:14px;line-height:1.6;padding:16px 18px;background:var(--paper);border:var(--hairline) dashed var(--rule-dashed);white-space:pre-wrap;margin:0;max-width:72ch}

/* values */
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}
.values p{margin:6px 0 0}
.values ul{margin:8px 0 0;padding-left:1.1em;font-size:15px;color:var(--ink-soft)}
@media (max-width:720px){.values{grid-template-columns:1fr}}

/* footer */
.footer{border-top:var(--hairline) solid var(--rule);padding:var(--s6) 0 var(--s8);display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap}
.footer img{height:18px}
.footer .mono{font-size:13px;color:var(--ink-soft)}

/* blinking ticket cursor, for live text contexts */
.cursor{display:inline-block;width:.35em;height:.85em;margin-left:.15em;vertical-align:baseline;background:var(--ticket-red);
  -webkit-mask:url('../logo/svg/agentlive-mark-ink.svg') center/100% 100% no-repeat;mask:url('../logo/svg/agentlive-mark-ink.svg') center/100% 100% no-repeat;
  animation:blink var(--cursor-blink) steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}

/* reference page chrome */
.ref{padding:var(--s7) 0;border-top:var(--hairline) solid var(--rule)}
.ref>.label{margin-bottom:var(--s4);display:block}