/* ============================================================
   Audit landing: the homepage, with the copy switched per page.

   Every /iep-audit/<slug> and checker route (AuditLanding.jsx), the 51 state
   variants included. litPath.css (generated from the homepage) supplies the
   tokens, the two typefaces, `.btn`, `.lede`, the focus ring and the `.rv`
   reveals. This sheet adds the homepage's hero placement of the torch (its
   rules are not in the generated sheet, so they are carried here, scoped),
   the chrome, one reading column, the three steps, the rows (a state's
   deadlines, or what the review looks for on a task, each with its rule in
   mono), the ask card and the sources. Everything is scoped to `.lp.sa`.

   Held to social-ops/content/seo-visual-brief.md: near-white paper, warm
   cards, Newsreader headings with one italic teal em, Geist text, Geist Mono
   for citations only, no kickers, no uppercase labels, no stat tiles, no dark
   surfaces, one primary teal button. Composed at 375 first.
   ============================================================ */

.lp.sa {
    background: var(--paper);
    overflow-x: clip;
    --sa-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.sa-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: 700 15px/1 var(--sans);
    text-decoration: none;
    transition: top .2s var(--ease);
}

.sa-skip:focus-visible {
    top: 12px;
}

/* ---------- chrome: the app's nav, the homepage's footer ---------- */

.sa-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(14px);
}

.sa-nav__in {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp.sa .sa-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--ink);
    font: 600 16.5px/1 var(--serif);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.sa-brand__name {
    white-space: nowrap;
}

.sa-brand__mark {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand-tint);
    color: var(--brand);
}

.sa-brand__mark svg {
    width: 17px;
    height: 17px;
}

.lp.sa .sa-nav__btn {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0 14px;
    min-height: 40px;
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    background: var(--paper);
    text-decoration: none;
}

.lp.sa .sa-nav__btn:hover {
    color: var(--ink);
    background: var(--card);
}

@media (min-width: 560px) {
    .lp.sa .sa-brand {
        gap: 10px;
        font-size: 19px;
    }

    .sa-brand__mark {
        width: 36px;
        height: 36px;
    }

    .sa-brand__mark svg {
        width: 18px;
        height: 18px;
    }

    .lp.sa .sa-nav__btn {
        padding: 0 18px;
        min-height: 44px;
        font-size: 15px;
    }
}

@media (min-width: 860px) {
    .sa-nav__in {
        width: min(1200px, calc(100% - 48px));
        height: 72px;
    }

    .lp.sa .sa-brand {
        font-size: 22px;
        gap: 12px;
    }

    .sa-brand__mark {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .sa-brand__mark svg {
        width: 20px;
        height: 20px;
    }

    .lp.sa .sa-nav__btn {
        padding: 0 22px;
        min-height: 48px;
        font-size: 16px;
    }
}

.sa-foot {
    margin-top: 72px;
    padding: 34px 0 44px;
    background: var(--paper-2);
}

.sa-foot__in {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    gap: 16px;
    font-size: 14px;
    color: var(--muted);
}

.sa-foot__in ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp.sa .sa-foot__in a {
    color: var(--ink-2);
    text-decoration: none;
}

.lp.sa .sa-foot__in a:hover {
    color: var(--brand-2);
    text-decoration: underline;
}

@media (min-width: 860px) {
    .sa-foot {
        margin-top: 96px;
    }

    .sa-foot__in {
        width: min(1200px, calc(100% - 48px));
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 24px;
    }

    .sa-foot__in ul {
        justify-content: flex-end;
    }
}

/* ---------- type ---------- */

.lp.sa h1,
.lp.sa h2,
.lp.sa h3 {
    color: var(--ink);
}

.lp.sa h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.06;
}

.lp.sa h3 {
    font-size: clamp(20px, 1.9vw, 25px);
    line-height: 1.18;
}

.lp.sa a {
    color: var(--brand-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.lp.sa a:hover {
    color: var(--ink);
}

.lp.sa .btn,
.lp.sa .btn:hover {
    text-decoration: none;
}

.lp.sa .btn--primary,
.lp.sa .btn--primary:hover {
    color: #fff;
}

.lp.sa .btn--ghost,
.lp.sa .btn--ghost:hover {
    color: var(--ink);
}

/* ---------- breadcrumb ---------- */

.sa-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--faint);
}

.lp.sa .sa-crumbs a {
    color: var(--muted);
    text-decoration: none;
}

.lp.sa .sa-crumbs a:hover {
    color: var(--brand-2);
    text-decoration: underline;
}

/* ---------- the hero: the torch as the homepage places it ---------- */

/* The homepage's hero rules, carried here because the generated litPath.css
   leaves its hero section empty. Wide screens: the dithered torch fills the
   right of the stage behind the copy, a warm ember breathes over the flame,
   and a veil fades the left edge into the paper so the words sit on paper.
   Phones (below): the tall cut of the same torch, the copy packed at the foot
   of the first screen, the veil running top to bottom. */
.sa-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: min(88vh, 840px);
    padding: clamp(56px, 9vh, 112px) 0 clamp(56px, 8vh, 96px);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--hair);
}

.sa-hero__art {
    position: absolute;
    inset: -4% -3% -8%;
    z-index: -1;
}

.sa-hero__art > picture,
.sa-hero__art > span {
    position: absolute;
    inset: 0;
}

.lp.sa .sa-hero__dither img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 78% 58%;
       object-position: 78% 58%;
    image-rendering: pixelated;
    transform: scale(1.04);
}

.sa-hero__ember {
    inset: auto;
    top: 8%;
    right: 21%;
    width: clamp(180px, 22vw, 340px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(249, 198, 76, .5) 0%, rgba(227, 156, 34, .18) 38%, transparent 68%);
    animation: ember 5.5s ease-in-out infinite;
    pointer-events: none;
}

.sa-hero__veil {
    background:
        linear-gradient(100deg, var(--paper) 6%, rgba(251, 247, 239, .95) 36%, rgba(251, 247, 239, .38) 60%, rgba(251, 247, 239, 0) 80%),
        linear-gradient(to bottom, rgba(251, 247, 239, .55) 0%, transparent 24%, transparent 72%, var(--paper) 100%);
}

.sa-hero__in {
    position: relative;
    z-index: 1;
    width: min(var(--shell), calc(100% - 48px));
    margin: 0 auto;
}

.sa-hero__in > * {
    max-width: 700px;
}

.lp.sa .sa-hero h1 {
    max-width: 740px;
    font-size: clamp(40px, 5.2vw, 72px);
    line-height: 1.02;
}

.lp.sa .sa-hero .lede {
    max-width: 560px;
    margin: 26px 0 0;
}

/* The line the homepage sets under its lede in small teal: here it names the
   agency behind the state's rules. */
.lp.sa .sa-hero__agency {
    margin: 16px 0 0;
    max-width: 560px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--brand-2);
}

.sa-hero__cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 30px;
}

.lp.sa .sa-hero__note {
    margin-top: 18px;
    font-size: 14px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    align-items: center;
}

.sa-hero__note svg {
    width: 16px;
    height: 16px;
    color: var(--brand);
    flex: none;
}

.lp.rm .sa-hero__ember {
    animation: none;
}

@media (max-width: 720px) {
    .sa-hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        min-height: calc(100svh - 64px);
        padding: 28px 0 24px;
    }

    .sa-hero__art {
        inset: 0;
    }

    .sa-hero__art > picture {
        top: 6vh;
        bottom: auto;
        height: 112%;
    }

    .lp.sa .sa-hero__dither img {
        -o-object-position: 54% 0;
           object-position: 54% 0;
        transform: none;
        mix-blend-mode: multiply;
        filter: contrast(1.18) saturate(1.08);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 100%);
    }

    .sa-hero__ember {
        top: calc(15vh - 9vw);
        right: auto;
        left: calc(56% - 18vw);
        width: 36vw;
        opacity: .85;
    }

    .sa-hero__veil {
        /* The copy block is taller than the homepage's, so the veil starts
           fading a little higher up the torch. */
        background: linear-gradient(to bottom, rgba(251, 247, 239, .2) 0%, transparent 8%, transparent 42%, rgba(251, 247, 239, .45) 51%, rgba(251, 247, 239, .74) 59%, rgba(251, 247, 239, .9) 67%, var(--paper) 78%, var(--paper) 100%);
    }

    .sa-hero__in {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: calc(100% - 48px);
    }

    .sa-hero__in > * {
        max-width: none;
        flex: none;
    }

    .sa-crumbs {
        margin-bottom: 14px;
    }

    .lp.sa .sa-hero h1 {
        font-size: clamp(31px, 8.6vw, 40px);
        line-height: 1.04;
        margin: 0 0 28px;
    }

    .lp.sa .sa-hero .lede {
        margin: auto 0 0;
        font-size: 15.5px;
        line-height: 1.5;
    }

    .sa-hero__agency {
        margin-top: 12px;
        font-size: 13.5px;
    }

    /* A task headline runs four or five lines where the state's runs three,
       so the torch starts lower and the type a step smaller: the last line of
       the H1 clears the flame instead of sitting on the gold. */
    .sa-hero--long .sa-hero__art > picture {
        top: 17vh;
    }

    .sa-hero--long .sa-hero__ember {
        top: calc(26vh - 9vw);
    }

    .lp.sa .sa-hero--long h1 {
        font-size: clamp(29px, 7.9vw, 37px);
    }

    .sa-hero__cta {
        margin-top: 20px;
    }

    .lp.sa .sa-hero__cta .btn {
        width: 100%;
        justify-content: center;
        min-height: 50px;
    }

    .sa-hero__note {
        justify-content: center;
        margin-top: 12px;
        font-size: 13px;
    }
}

/* ---------- the reading column ---------- */

.sa-block {
    width: min(var(--shell), calc(100% - 32px));
    margin: 0 auto;
    padding-top: 52px;
}

.sa-block > * {
    max-width: 820px;
}

.sa-block > h2 {
    margin-bottom: 18px;
}

.lp.sa .sa-lead {
    margin-bottom: 22px;
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--ink-2);
}

@media (min-width: 860px) {
    .sa-block {
        width: min(var(--shell), calc(100% - 48px));
        padding-top: 76px;
    }

    .sa-block > h2 {
        margin-bottom: 24px;
    }
}

/* ---------- the three steps ---------- */

/* Numbered because the order is the point. The counter is the serif in gold
   ink, not a badge and not a tile. One column on a phone; three across from
   900px, the way the homepage's explainer walks left to right. */
.sa-steps {
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sa-step;
}

.sa-steps li {
    counter-increment: sa-step;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    -moz-column-gap: 12px;
         column-gap: 12px;
}

.sa-steps li::before {
    content: counter(sa-step);
    grid-row: 1 / span 2;
    font: 500 19px/1.3 var(--serif);
    color: var(--gold-ink);
}

.sa-steps h3 {
    margin: 0;
}

.lp.sa .sa-steps p {
    margin-top: 8px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

@media (min-width: 900px) {
    .sa-block > .sa-steps {
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 36px;
    }
}

/* The homepage's honest line, under the steps. */
.lp.sa .sa-honest {
    margin-top: 26px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

/* ---------- the rows: what the state requires, what the review looks for ---------- */

/* Each row is a deadline a parent can hold the district to: the number in the
   serif, what it counts in Geist, the rule it was read from in Geist Mono.
   A list, not a table: three facts per row, self-describing, so nothing needs
   a head. Row lines carry the row, as the state page's table does. */
.sa-rows {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair);
}

.sa-rows li {
    display: grid;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hair);
}

.sa-row__deadline {
    order: -1;
    font: 500 clamp(21px, 2vw, 24px)/1.2 var(--serif);
    color: var(--brand-2);
}

.sa-row__label {
    font: 600 15.5px/1.4 var(--sans);
    color: var(--ink);
}

.lp.sa .sa-row__cite {
    font: 500 12.5px/1.5 var(--sa-mono);
    font-style: normal;
    color: var(--muted);
    word-break: break-word;
}

@media (min-width: 720px) {
    .sa-rows li {
        grid-template-columns: 210px minmax(0, 1fr) auto;
        align-items: baseline;
        -moz-column-gap: 24px;
             column-gap: 24px;
        padding: 18px 0;
    }

    .lp.sa .sa-row__cite {
        text-align: right;
        white-space: nowrap;
    }
}

/* On a task page each row is one thing the review looks for and the rule it
   is checked against: the sentence in Geist, the citation in mono, linked to
   the regulation. Same lines as the state's deadline rows, two facts not
   three. */
.sa-looks li {
    gap: 6px;
}

.sa-look__text {
    font: 400 16.5px/1.55 var(--sans);
    color: var(--ink);
}

.lp.sa .sa-looks .sa-row__cite a {
    color: inherit;
    text-decoration: none;
}

.lp.sa .sa-looks .sa-row__cite a:hover {
    color: var(--brand-2);
    text-decoration: underline;
}

@media (min-width: 720px) {
    .sa-looks li {
        grid-template-columns: minmax(0, 1fr) auto;
        -moz-column-gap: 28px;
             column-gap: 28px;
    }
}

.lp.sa .sa-req__more {
    margin-top: 22px;
    font-size: 16.5px;
    line-height: 1.55;
}

/* ---------- the ask, the byline, the sources ---------- */

.sa-ask {
    padding: 26px 20px 24px;
    border-radius: 18px;
    background: var(--card);
}

.lp.sa .sa-ask h2 {
    font-size: clamp(23px, 2.5vw, 31px);
    margin-bottom: 0;
}

.lp.sa .sa-ask p {
    margin-top: 14px;
    color: var(--ink-2);
}

.lp.sa .sa-ask .btn {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    background: var(--paper);
}

.lp.sa .sa-ask .btn:hover {
    background: var(--paper-2);
}

.lp.sa .sa-ask__micro {
    font-size: 14.5px;
    color: var(--muted);
}

@media (min-width: 720px) {
    .sa-ask {
        padding: 34px 32px 30px;
    }

    .lp.sa .sa-ask .btn {
        width: auto;
    }
}

.lp.sa .sa-byline {
    margin-top: 30px;
    font-size: 13.5px;
    color: var(--faint);
}

.sa-sources {
    display: grid;
    gap: 14px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
}

.sa-sources span {
    display: block;
    margin-top: 2px;
}