/* What an agent gets (index.html #why): the plain description on one side and
   one source as the API returns it on the other. Tokens first, then layout. */
.gets{
  --gets-gap: clamp(32px, 6vw, 84px);
  --gets-space: clamp(84px, 11vw, 140px);
  --gets-pad: clamp(20px, 2.6vw, 30px);
  --gets-radius: 18px;
  --gets-title: 600 clamp(19px, 2vw, 23px)/1.2 "DM Sans", sans-serif;
  --gets-body: 400 14.5px/1.62 "DM Sans", sans-serif;
  --gets-mono: 500 11px/1.4 "DM Mono", monospace;
  --gets-link: var(--purple);
  --gets-rank: var(--coral);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--gets-gap);
  align-items: center;
  margin: var(--gets-space) 0;
}
.gets h2{font-size:clamp(38px,4.6vw,64px);line-height:.97;letter-spacing:-.075em;margin:19px 0 22px}
.gets h2 em{color:var(--coral)}
.gets-copy > p:not(.eyebrow):not(.gets-via){max-width:470px;margin:0;font-size:15px;line-height:1.65;color:var(--muted)}
/* The one technical fact, set apart as a chip so it does not read as a line of code. */
.gets-copy > .gets-via{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font:var(--gets-mono);letter-spacing:.03em;color:var(--ink)}
.gets-copy > .gets-via::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gets-rank)}
.gets-copy .underlink{display:table;margin-top:26px}
.gets-card{position:relative;margin:0;padding:var(--gets-pad);border:1px solid var(--card-line);border-radius:var(--gets-radius);background:var(--card);overflow:hidden}
/* The agent's query, then the ranked sources: the first one open with the
   paragraphs that answer it, the next two as address and title. */
.gets-query{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0 0 18px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* The query's head reads like the response's: what was asked, by which mode,
   how many sources came back and how long it took (the API's took_ms). */
.gets-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;font:var(--gets-mono)}
.gets-label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gets-took{color:var(--gets-rank)}
.gets-ask{margin:0;font:500 14.5px/1.45 "DM Sans",sans-serif;color:var(--ink)}
.gets-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0;padding:0;list-style:none}
.gets-hit{min-width:0}
.gets-hit + .gets-hit{padding-top:14px;border-top:1px solid var(--line)}
.gets-meta{display:flex;align-items:baseline;gap:12px;min-width:0;margin:0 0 6px;font:var(--gets-mono)}
.gets-rank{flex:none;color:var(--gets-rank)}
.gets-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gets-link)}
.gets-date{flex:none;margin-left:auto;color:var(--muted)}
.gets-hit h3{margin:0;font:600 15px/1.3 "DM Sans",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.gets-hit:first-child h3{margin-bottom:10px;font:var(--gets-title)}
.gets-text{font:var(--gets-body);color:var(--ink)}
.gets-text p{margin:0 0 .8em}
.gets-text p:last-child{margin-bottom:0}
.gets-text code{padding:.05em .3em;border-radius:4px;font:500 .9em "DM Mono",monospace;background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* Where the passage goes on between the two paragraphs that answer. */
.gets-text .gets-gap{margin:-.3em 0 .5em;color:var(--faint);letter-spacing:.2em}
@media (max-width: 900px){
  .gets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 420px){
  .gets{--gets-pad:18px;--gets-body:400 14px/1.6 "DM Sans", sans-serif}
  .gets-date{display:none}
}