/*
 * GED CSS Bundle: legal.bundle.css
 * Auto-generated by scripts/bundle_ged_css.py
 * DO NOT EDIT - Edit source files instead
 *
 * Sources: static/css/shared/brand/brand-tokens.css, shell-base.css, legal-base.css, shell-desktop.css, legal-desktop.css, shell-tablet.css, legal-tablet.css, shell-mobile.css, legal-mobile.css, shell-landscape.css, legal-landscape.css
 */

/* === static/css/shared/brand/brand-tokens.css === */

/* THE CLASSROOM BRAND'S TOKENS, for a site whose pages are not built on the
   free class page's stylesheet (the GED site, 2026-10-11). The values are the
   free class page's own (static/css/public/free-class/free-class-base.css
   :root), and `ged_site_env.sh test brand --case tokens` fails the moment the
   two differ, so the brand has one set of values.

   Ink and slate, GOLD as the one accent, Space Grotesk headings, Inter body.
   On :root, never on a page element: a modal renders outside the page root
   and must still resolve every var(). No media query: this opens a bundle. */

:root {
    --fc-ink: #0f172a;
    --fc-ink-2: #1e293b;
    --fc-soft: #475569;
    --fc-muted: #64748b;
    --fc-line: #e2e8f0;
    --fc-line-soft: #f1f5f9;
    --fc-bg: #f8fafc;
    --fc-card: #ffffff;
    --fc-gold: #fdcc05;
    --fc-gold-hover: #f59e0b;
    --fc-gold-deep: #b45309;
    --fc-gold-soft: #fef3c7;
    --fc-ar: #3b82f6;
    --fc-ar-deep: #1e3a8a;
    --fc-green: #047857;
    --fc-green-soft: #d1fae5;
    --fc-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    --fc-shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.12);
    --fc-head: 'Space Grotesk', sans-serif;
    --fc-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fc-gutter: 24px;
    --fc-max: 1120px;
}


/* === shell-base.css === */

/* GED page shell — BASE (no media query): the body reset, the topbar and
   the footer every page carries. Never linked on its own: the bundler
   interleaves the five shell tiers into each page's bundle
   (scripts/bundle_ged_css.py), so a page still has exactly ONE bundle.

   ON THE CLASSROOM BRAND (2026-10-11): every colour and face is a token of
   static/css/shared/brand/brand-tokens.css, which opens the bundle (ink and
   slate, gold as the one accent, Space Grotesk headings, Inter body). The
   markup and every word are unchanged (`test brand`). */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fc-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--fc-ink-2);
    background: var(--fc-bg);
}

.g-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-page > main {
    flex: 1;
    /* ⛔ A DEFINITE WIDTH IS LOAD-BEARING, measured 2026-09-13. Every page main
       centres itself with `margin: 0 auto` under its own max-width. `.g-page` is
       a COLUMN flex container, and in flexbox an auto margin on the CROSS axis
       cancels `align-items: stretch`: the item shrink-wraps to its content and
       the auto margins eat the slack. Without this, max-width only CAPPED a
       fit-content width and every page was as wide as its widest child — on
       /account a subscriber got a 526px column with the two component cards side
       by side while a lifetime buyer got 432px with the same cards STACKED.
       border-box keeps the page's own padding inside the 100% so a narrow
       viewport cannot overflow. Arms: pages suite case H. */
    width: 100%;
    box-sizing: border-box;
}

/* Topbar */
.g-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--fc-card);
    border-bottom: 1px solid var(--fc-line);
    /* Thin, because the controls set the height: every one is a 44px target. */
    padding: 6px 24px;
}

.g-topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* The row may wrap BETWEEN whole items when space runs out. Without this
       its only escape from a tight viewport was to break through a word. */
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ⛔ A TOPBAR LABEL IS ONE PHRASE AND MUST NEVER SPLIT, seen at 390px: the row
   ran out of width and the browser broke inside the words — "Duran / Learning"
   and "Sign / out", with the GED badge stranded between them. This is ONE
   shared component (templates/ged/shared/ged_topbar.html), so this one rule
   fixes every page. Arms: pages suite case I. */
.g-brand-name,
.g-brand-sub,
.g-topbar-link,
.g-topbar-signin,
.g-acct-label,
.g-acct-item {
    white-space: nowrap;
}

/* ⭐ EVERY CONTROL IN THE BAR IS A 44px TARGET (the touch minimum), on every
   tier: the bar's height comes from the controls, not from its padding. */
.g-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    text-decoration: none;
}

/* The d-mark. Sized in em so it tracks the wordmark at every tier instead of
   needing its own override in each one. */
.g-brand-mark {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    object-fit: contain;
}

/* --- the brand as a menu (pages that pass `brand_menu`) ------------------ */

.g-brand-wrap {
    position: relative;
}

.g-brand-button {
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    align-items: center;
}

.g-brand-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 200;
    min-width: 200px;
    padding: 6px;
    background: var(--fc-card);
    border: 1px solid var(--fc-line);
    border-radius: 12px;
    box-shadow: var(--fc-shadow-lg);
}

/* ⛔ Born hidden, and a `display` on the class would defeat the attribute.
   Same guard the practice page's clip player needs. */
.g-brand-menu[hidden] {
    display: none;
}

.g-brand-menu-item,
.g-acct-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fc-ink-2);
    text-decoration: none;
    white-space: nowrap;
}

.g-brand-menu-item:hover,
.g-brand-menu-item:focus,
.g-acct-item:hover,
.g-acct-item:focus {
    background: var(--fc-line-soft);
    color: var(--fc-ink);
}

/* --- the Account menu (a signed-in student's bar) ------------------------- */

.g-acct-wrap {
    position: relative;
}

.g-acct-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fc-soft);
    background: none;
    border: none;
    cursor: pointer;
}

.g-acct-button:hover {
    color: var(--fc-ink);
}

/* The student's initial in a circle: the account control people already
   know. The word beside it says what it is wherever there is room for it. */
.g-acct-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fc-ink);
    color: var(--fc-gold);
    font-family: var(--fc-head);
    font-size: 0.85rem;
    font-weight: 800;
}

.g-acct-button[aria-expanded="true"] .g-acct-initial {
    box-shadow: 0 0 0 3px var(--fc-gold-soft);
}

.g-acct-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 200px;
    padding: 6px;
    background: var(--fc-card);
    border: 1px solid var(--fc-line);
    border-radius: 12px;
    box-shadow: var(--fc-shadow-lg);
}

/* ⛔ Born hidden, and a `display` on the class would defeat the attribute. */
.g-acct-menu[hidden] {
    display: none;
}

.g-acct-who {
    display: block;
    max-width: 240px;
    padding: 6px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--fc-line-soft);
    font-size: 0.78rem;
    color: var(--fc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.g-acct-item[aria-current="page"] {
    font-weight: 700;
    color: var(--fc-ink);
    box-shadow: inset 3px 0 0 var(--fc-gold);
}

/* The wordmark in the brand's heading face, the tag in tracked uppercase:
   the free class page's lockup (.fc-brand-name / .fc-brand-tag). */
.g-brand-name {
    font-family: var(--fc-head);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--fc-ink);
}

.g-brand-sub {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--fc-muted);
}

.g-topbar-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.g-topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fc-soft);
    text-decoration: none;
}

.g-topbar-link:hover {
    color: var(--fc-ink);
}

/* Where am I: the page you are on reads as chosen, underlined in the gold. */
.g-topbar-link[aria-current="page"] {
    color: var(--fc-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--fc-gold);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* The one action in the bar: the brand's primary button (.fc-btn-primary),
   gold with ink words. */
.g-topbar-signin {
    font: inherit;
    font-family: var(--fc-head);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--fc-ink);
    background: var(--fc-gold);
    border: none;
    border-radius: 10px;
    min-height: 44px;
    padding: 0 18px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(253, 204, 5, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.g-topbar-signin:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(253, 204, 5, 0.45);
}

/* Footer: names the business on every page (Twilio 30506, the end business
   must be obvious), and links every legal page. The ink block the class
   page closes on. */
.g-footer {
    background: var(--fc-ink);
    color: rgba(255, 255, 255, 0.6);
    padding: 32px 24px;
}

.g-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.g-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.g-footer-name {
    font-family: var(--fc-head);
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.g-footer-llc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.g-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.g-footer-links a {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.g-footer-links a:hover {
    color: var(--fc-gold);
}

.g-footer-copy {
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}


/* === legal-base.css === */

/* GED legal pages — BASE (no media query): Terms, Privacy, Text Message
   Terms. Public, no login, HTML not PDF: the Toll-Free Verification
   reviewer opens these and compares them to the hosted screenshots.

   ON THE CLASSROOM BRAND (2026-10-11): the document on a white card over the
   brand's background, Space Grotesk headings, ink links with the gold
   underline. The words are unchanged (`test brand`). */

.g-legal {
    max-width: 760px;
    margin: 32px auto 56px;
    padding: 40px 36px 48px;
    box-sizing: border-box;
    background: var(--fc-card);
    border: 1px solid var(--fc-line);
    border-radius: 18px;
    box-shadow: var(--fc-shadow);
}

.g-legal h1 {
    font-family: var(--fc-head);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--fc-ink);
    margin: 0 0 4px;
}

.g-legal-updated {
    font-size: 0.85rem;
    color: var(--fc-muted);
    margin: 0 0 32px;
}

.g-legal h2 {
    font-family: var(--fc-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin: 28px 0 8px;
    scroll-margin-top: 80px;
}

.g-legal h3 {
    font-family: var(--fc-head);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--fc-ink-2);
    margin: 16px 0 6px;
}

.g-legal p {
    font-size: 0.92rem;
    color: var(--fc-soft);
    line-height: 1.7;
    margin: 0 0 12px;
}

.g-legal ul {
    margin: 0 0 12px 20px;
    padding: 0;
}

.g-legal li {
    font-size: 0.92rem;
    color: var(--fc-soft);
    line-height: 1.7;
    margin-bottom: 4px;
}

.g-legal a {
    color: var(--fc-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--fc-gold);
    text-underline-offset: 2px;
}

.g-legal a:hover {
    color: var(--fc-gold-deep);
}

/* Hosted opt-in evidence on /legal/sms-terms (the Toll-Free Verification
   screenshots): full column width, framed, never cropped. */
.g-legal-shot {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 12px auto 20px;
    border: 1px solid var(--fc-line);
    border-radius: 12px;
    box-shadow: var(--fc-shadow);
}


/* === shell-desktop.css === */

/* GED page shell — DESKTOP (the default tier; the base describes it). */


/* === legal-desktop.css === */

/* GED legal pages — DESKTOP (the default tier; the base describes it). */


/* === shell-tablet.css === */

/* GED page shell — TABLET (769 to 1024). */
@media (max-width: 1024px) and (min-width: 769px) {
    .g-topbar {
        padding: 6px 20px;
    }

    .g-footer {
        padding: 28px 20px;
    }
}


/* === legal-tablet.css === */

/* GED legal pages — TABLET (769 to 1024). */
@media (max-width: 1024px) and (min-width: 769px) {
    /* the gutter is the width, never a side margin: the shell gives every page
       column width 100%, and a margin on top of it pins the card left (page-fit) */
    .g-legal {
        width: calc(100% - 40px);
        margin: 28px auto 48px;
        padding: 36px 32px 44px;
    }
}


/* === shell-mobile.css === */

/* GED page shell — MOBILE PORTRAIT (<= 768). */
@media (max-width: 768px) and (orientation: portrait) {
    /* ⛔ THE TOPBAR IS ONE ROW. `flex-wrap` is still on as the last-resort
       escape — without it a tight viewport breaks through a word instead —
       but nothing here may be big enough to NEED it. It was wrapping onto two
       rows at 390px and 375px, which on a §10 locked page costs the content a
       whole row of permanent frame. Everything below is sized so the brand and
       the links fit beside each other on the narrowest screen served.
       Asserted, not eyeballed: contract SAME_ROW + the viewport suite. */
    .g-topbar {
        padding: 4px 10px;
    }

    /* Measured, not eyeballed (test topbar, 2026-10-04): the visitor's bar
       needed 365px of the 355px an iPhone SE leaves, so the spacing gives
       here while every control keeps its 44px target. */
    .g-topbar-inner {
        gap: 8px;
    }

    .g-topbar-links {
        gap: 6px;
    }

    .g-topbar-link {
        padding: 0 2px;
    }

    /* The initial alone on a phone: the circle is the account control people
       already know, and the button keeps its name ("Account menu") for a
       screen reader. Every other label in the bar stays visible. */
    .g-acct-label {
        display: none;
    }

    .g-brand {
        gap: 5px;
    }

    /* The d-mark costs real width on a 375px bar, and the bar has to stay one
       row. Smaller than its em default rather than dropped: the mark is the
       brand, and the wordmark beside it can afford to be the thing that gives. */
    .g-brand-mark {
        width: 1.35em;
        height: 1.35em;
    }

    .g-brand-name {
        font-size: 0.94rem;
    }

    .g-brand-sub {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .g-topbar-link,
    .g-topbar-signin {
        font-size: 0.82rem;
    }

    .g-topbar-signin {
        padding: 0 10px;
    }

    .g-footer {
        padding: 28px 16px;
    }

    .g-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .g-footer-links {
        gap: 14px;
    }
}


/* === legal-mobile.css === */

/* GED legal pages — MOBILE PORTRAIT (<= 768). */
@media (max-width: 768px) and (orientation: portrait) {
    /* the gutter is the width, never a side margin: the shell gives every page
       column width 100%, and a margin on top of it overflows the phone (page-fit) */
    .g-legal {
        width: calc(100% - 24px);
        margin: 16px auto 40px;
        padding: 26px 18px 36px;
        border-radius: 16px;
    }

    .g-legal h1 {
        font-size: 1.6rem;
    }

    .g-legal h2 {
        font-size: 1.05rem;
    }
}


/* === shell-landscape.css === */

/* GED page shell — MOBILE LANDSCAPE (<= 768, landscape). */
@media (max-width: 768px) and (orientation: landscape) {
    .g-topbar {
        padding: 4px 16px;
    }

    .g-footer {
        padding: 20px 16px;
    }

    .g-footer-inner {
        gap: 10px;
    }
}


/* === legal-landscape.css === */

/* GED legal pages — MOBILE LANDSCAPE (<= 768, landscape). */
@media (max-width: 768px) and (orientation: landscape) {
    /* the gutter is the width, never a side margin (page-fit) */
    .g-legal {
        width: calc(100% - 32px);
        margin: 16px auto 32px;
        padding: 22px 20px 32px;
    }

    .g-legal h1 {
        font-size: 1.5rem;
    }
}