/* ============================================================
   UV Labs — Glossary term pages
   Scoped under .gt-page. Pairs with /css/index-lab.css and
   mirrors the agentic-trading (.at-*) visual system.

   Layout: one centered rail. Every section-level block
   (breadcrumb, hero, sections, CTA) shares a 936px container
   (880px content + 2 x 28px gutter, border-box) centered with
   margin auto, so all left edges sit on the same line. Prose
   reads at a 720px measure inside the rail, matching blog posts.
   Radii: surfaces 8px, controls 4px, pills stay 999px.
   ============================================================ */

/* ---- Shared rail ---- */
.gt-page .gt-breadcrumb,
.gt-page .gt-hero,
.gt-page .gt-section,
.gt-page .gt-cta {
    width: 100%;
    max-width: 936px; /* 880px content + 2 x 28px gutter */
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 4vw, 28px);
    padding-right: clamp(20px, 4vw, 28px);
}

/* ---- Page rhythm ---- */
/* One background (--bg1, from .uv-page) across the whole page;
   sections separate with spacing + hairline rules, not banding. */
.gt-page .gt-section {
    padding-top: clamp(48px, 7vw, 76px);
    padding-bottom: clamp(48px, 7vw, 76px);
    border-top: 1px solid var(--border);
    position: relative;
}

/* ---- Breadcrumb ---- */
.gt-page .gt-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 22px;
    font: 500 12px/1.4 var(--mono);
    letter-spacing: 0.02em;
    color: var(--text-3);
}
.gt-page .gt-breadcrumb a {
    color: var(--text-3);
    transition: color 0.2s var(--ease);
}
.gt-page .gt-breadcrumb a:hover { color: var(--accent); }
.gt-page .gt-breadcrumb .gt-crumb-sep { color: var(--text-3); opacity: 0.55; }
.gt-page .gt-breadcrumb [aria-current] { color: var(--text); }

/* ---- Hero ---- */
.gt-page .gt-hero {
    padding-top: clamp(44px, 6vw, 76px);
    padding-bottom: clamp(40px, 6vw, 64px);
}
.gt-page .gt-title {
    font: 300 clamp(40px, 5.6vw, 68px)/1.04 var(--sans);
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 16px 0 28px;
}
/* Accent word — Bitter italic punch word, as on other heroes */
.gt-page .gt-title em,
.gt-page h1 em {
    font-family: 'Bitter', serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--accent-brand); /* brand teal: large/display use */
}

/* Definition box — the snippet / LLM-answer target (mirrors .at-definition) */
.gt-page .gt-definition {
    background: var(--bg0);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 26px 30px;
    margin: 0 0 22px;
}
.gt-page .gt-definition-label {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.gt-page .gt-definition p {
    font: 500 18px/1.5 var(--sans);
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}
.gt-page .gt-lead {
    font: 500 16px/1.6 var(--sans);
    color: var(--text-2);
    max-width: 720px;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ---- Section headings & prose (mirrors .at-prose) ---- */
.gt-page .gt-h2 {
    font: 300 clamp(24px, 2.6vw, 32px)/1.2 var(--sans);
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 24px;
}
.gt-page .gt-prose { max-width: 720px; }
.gt-page .gt-prose p {
    font: 500 15px/1.7 var(--sans);
    color: var(--text-2); /* #5e5e5e — same body gray as blog posts */
    margin: 0 0 18px;
}
.gt-page .gt-prose p:last-child { margin-bottom: 0; }
.gt-page .gt-prose strong { color: var(--text); font-weight: 700; }
.gt-page .gt-prose a {
    color: var(--accent);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
}
.gt-page .gt-prose a:hover { border-bottom-color: var(--accent); }
.gt-page .gt-prose em { font-family: 'Bitter', serif; font-style: italic; }
.gt-page .gt-prose ul { margin: 0 0 18px; padding-left: 20px; }
.gt-page .gt-prose li {
    font: 500 15px/1.7 var(--sans);
    color: var(--text-2);
    margin: 0 0 8px;
}
.gt-page .gt-prose code {
    font: 400 13px/1 var(--mono);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--text);
}

/* ---- Example block (dark code) ---- */
.gt-page .gt-example {
    max-width: 760px;
    background: #1d1d1d;
    border-radius: 8px;
    margin: 26px 0 0;
    overflow: hidden;
}
.gt-page .gt-example-label {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mint);
    padding: 16px 22px 0;
}
.gt-page .gt-example pre {
    margin: 0;
    padding: 16px 22px 22px;
    overflow-x: auto;
    font: 400 13px/1.65 var(--mono);
    color: #d6d6d6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Comparison (two-column contrast) ---- */
.gt-page .gt-compare-label {
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 26px 0 0;
    max-width: 860px;
}
.gt-page .gt-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    max-width: 860px;
    margin: 26px 0 0;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.gt-page .gt-compare-label + .gt-compare { margin-top: 12px; }
.gt-page .gt-compare-col { background: var(--bg0); padding: 24px 26px; }
/* Solid teal-tinted surface (7% teal composited over --bg0) so
   --text-2 body copy holds >= 4.5:1 */
.gt-page .gt-compare-col.is-accent { background: #e4ebec; }
.gt-page .gt-compare-col h3 {
    font: 500 15px/1.3 var(--sans);
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 14px;
}
.gt-page .gt-compare-col.is-accent h3 { color: var(--accent); }
.gt-page .gt-compare-col ul { margin: 0; padding: 0; list-style: none; }
.gt-page .gt-compare-col li {
    font: 500 13.5px/1.6 var(--sans);
    color: var(--text-2);
    padding: 7px 0 7px 18px;
    position: relative;
}
/* Teal dot marker — matches the site bullet device */
.gt-page .gt-compare-col li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* ---- FAQ ---- */
.gt-page .gt-faq { max-width: 720px; }
.gt-page .gt-faq-item { padding: 24px 0; border-top: 1px solid var(--border); }
.gt-page .gt-faq-item:last-child { padding-bottom: 0; }
.gt-page .gt-faq-item h3 {
    font: 500 17px/1.4 var(--sans);
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 10px;
}
.gt-page .gt-faq-item p {
    font: 500 15px/1.65 var(--sans);
    color: var(--text-2);
    margin: 0;
}

/* ---- Related terms row ---- */
.gt-page .gt-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: 860px;
}
.gt-page .gt-related-tag {
    font: 500 13px/1 var(--sans);
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 999px; /* pill — keep */
    color: var(--text-2);
    background: var(--bg0);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.gt-page .gt-related-tag:hover { border-color: var(--accent); color: var(--accent); }
.gt-page .gt-deep-dive {
    font: 500 13px/1.4 var(--sans);
    color: var(--accent);
    margin-left: 8px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
}
.gt-page .gt-deep-dive:hover { border-bottom-color: var(--accent); }

/* ---- CTA strip ---- */
.gt-page .gt-cta {
    border-top: 1px solid var(--border);
    padding-top: 36px;
    padding-bottom: 36px;
}
.gt-page .gt-cta p {
    font: 500 14px/1.6 var(--sans);
    color: var(--text-2);
    margin: 0;
}
.gt-page .gt-cta a {
    color: var(--accent);
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
}
.gt-page .gt-cta a:hover { border-bottom-color: var(--accent); }

/* ---- Mobile ---- */
@media (max-width: 860px) {
    .gt-page .gt-breadcrumb { padding-top: 18px; }
    .gt-page .gt-hero { padding-top: clamp(32px, 8vw, 52px); padding-bottom: 36px; }
    .gt-page .gt-section { padding-top: clamp(40px, 9vw, 56px); padding-bottom: clamp(40px, 9vw, 56px); }
    .gt-page .gt-cta { padding-top: 28px; padding-bottom: 28px; }
    .gt-page .gt-title { font-size: clamp(34px, 10.5vw, 52px); }
    .gt-page .gt-definition { padding: 20px 22px; }
    .gt-page .gt-definition p { font-size: 16px; }
    .gt-page .gt-compare { grid-template-columns: 1fr; }
}