/*
 * The legal hub at /legal-information.
 *
 * Same palette and rhythm as the team and About pages (tm-*, ab-*): almost
 * monochrome, orange reserved for the one thing you are meant to click.
 *   #FF6A00 orange · #111214 ink · #EDE3D5 milk
 *
 * Headlines are set in Jost, self-hosted like everywhere else in the redesign;
 * body copy stays Roboto.
 */

@font-face {
    font-family: 'LegalDisplay';
    src: url('/fonts/oc/Jost-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --lg-orange: #FF6A00;
    /* Brand orange is 2.9:1 on milk. Small text and hairlines use this deeper
       tone (>= 4.5:1 on milk, paper and white); #FF6A00 stays for the accent. */
    --lg-orange-text: #AE4600;
    --lg-ink: #111214;
    --lg-milk: #EDE3D5;
    --lg-paper: #FAF7F2;
    --lg-body: #33353a;
    --lg-muted: #6a6a6a;
    --lg-line: rgba(17, 18, 20, .12);

    --lg-display: 'LegalDisplay', 'Jost-Bold', Roboto, Arial, sans-serif;

    --lg-gap-section: clamp(52px, 5.6vw, 80px);
    --lg-gap-tight: clamp(32px, 3.4vw, 48px);
}

/* Visually hidden, still read out and still crawled. */
.lg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- hero ---------------------------------------------------- */

.lg-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lg-orange-text);
}

/* Milk, like every other hero on the site. The page declares header_pinned, so
   the top padding clears the *scrolled* header — which is fixed and therefore
   out of flow. Same figure as the team profile. */
.lg-hero {
    padding: 124px 24px var(--lg-gap-tight);
    background: var(--lg-milk);
}

.lg-hero__inner {
    max-width: 1140px;
    margin: 0 auto;
}

.lg-hero__title {
    margin: 0 0 16px;
    font-family: var(--lg-display);
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--lg-ink);
}

.lg-hero__lede {
    margin: 0;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.65;
    color: var(--lg-muted);
}

/* ---------- the six cards ------------------------------------------- */

.lg-grid-section {
    padding: var(--lg-gap-section) 24px;
    background: var(--lg-paper);
}

.lg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.lg-card {
    margin: 0;
}

/* The whole card is the link: one target, no second clickable thing inside it. */
.lg-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 24px 22px;
    background: #fff;
    border: 1px solid var(--lg-line);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lg-card__link:hover,
.lg-card__link:focus-visible {
    border-color: var(--lg-orange);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 18, 20, .08);
    text-decoration: none;
}

.lg-card__link:focus-visible {
    outline: 2px solid var(--lg-orange);
    outline-offset: 3px;
}

.lg-card__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-family: var(--lg-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--lg-ink);
}

.lg-card__ext {
    font-size: 12px;
    color: var(--lg-muted);
}

.lg-card__desc {
    /* Pushes the CTA to the bottom so every card's button sits on one line. */
    flex: 1 1 auto;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lg-body);
}

.lg-card__cta {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lg-orange-text);
}

.lg-card__cta::after {
    content: ' \2192';
    transition: margin-left .18s ease;
}

.lg-card__link:hover .lg-card__cta::after {
    margin-left: 4px;
}

/* ---------- who is behind the pages --------------------------------- */

.lg-operator {
    padding: 0 24px var(--lg-gap-section);
    background: var(--lg-paper);
}

.lg-operator__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: var(--lg-gap-tight);
    border-top: 1px solid var(--lg-line);
}

.lg-operator__label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lg-muted);
}

.lg-operator__lines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--lg-ink);
}

.lg-operator__note {
    margin: 0;
    font-size: 14px;
    color: var(--lg-muted);
}

/* ---------- narrower ------------------------------------------------- */

@media (max-width: 1024px) {
    .lg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    /* The nav wraps into a column below 600px, so the pinned header is taller. */
    .lg-hero { padding: 132px 20px var(--lg-gap-tight); }
    .lg-grid { grid-template-columns: 1fr; gap: 16px; }
    .lg-card__link { padding: 22px 20px 20px; }
}