/*
 * GED CSS Bundle: pricing.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, pricing-base.css, shell-desktop.css, pricing-desktop.css, shell-tablet.css, pricing-tablet.css, shell-mobile.css, pricing-mobile.css, shell-landscape.css, pricing-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);
}


/* === pricing-base.css === */

/* GED pricing — BASE (no media query). The price sheet: one card per plan
   family, three term rows in each, every row's state set by the server
   (buy / upgrade / swap / held / locked). Scoped box-sizing on the page.

   ON THE CLASSROOM BRAND (2026-10-11), the teachers pricing page's look: the
   wash behind the page, Space Grotesk headings and prices, cards with a line
   border, the combined plan as the ink card with a gold rule (the class
   page's next-class block), gold primary buttons. The words and the markup
   are unchanged (`test brand`). */

.g-pricing-body {
    background:
        radial-gradient(900px 420px at 12% -140px, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
        radial-gradient(900px 480px at 88% -180px, rgba(253, 204, 5, 0.16) 0%, transparent 60%),
        var(--fc-bg);
}

.g-pricing,
.g-pricing * {
    box-sizing: border-box;
}

.g-pricing {
    max-width: var(--fc-max);
    margin: 0 auto;
    padding: 48px var(--fc-gutter) 72px;
}

.g-pricing-head {
    text-align: center;
    margin-bottom: 36px;
}

.g-pricing-head h1 {
    font-family: var(--fc-head);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.1;
    color: var(--fc-ink);
    margin: 0 0 10px;
    text-wrap: balance;
}

.g-pricing-lede {
    max-width: 640px;
    margin: 0 auto;
    color: var(--fc-soft);
    font-size: 1.05rem;
}

.g-pricing-notice {
    display: inline-block;
    margin: 18px auto 0;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--fc-gold-soft);
    border: 1px solid var(--fc-gold);
    color: var(--fc-ink);
    font-size: 0.92rem;
}

/* THE SALE CARD (the rebrand's checkpoint 5): the live sale's row above the
   plans, while the page prices its code. Ink on the soft gold, the gold rule,
   the clock at the right; the struck list price on a plain buy. */
.g-sale-card {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 760px;
    margin: 22px auto 0;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--fc-gold-soft);
    border: 1px solid var(--fc-gold);
    box-shadow: inset 4px 0 0 var(--fc-gold), var(--fc-shadow);
    text-align: left;
}

.g-sale-card[hidden] {
    display: none;
}

.g-sale-art {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.g-sale-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.g-sale-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--fc-gold);
    color: var(--fc-ink);
    font-family: var(--fc-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.g-sale-headline {
    margin: 6px 0 2px;
    font-family: var(--fc-head);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fc-ink);
}

.g-sale-sub,
.g-sale-line {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: var(--fc-soft);
}

.g-sale-code {
    font-family: var(--fc-head);
    font-weight: 700;
    color: var(--fc-ink);
    letter-spacing: 0.4px;
}

.g-sale-clock {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.g-sale-clock-label,
.g-sale-ends {
    font-size: 0.72rem;
    color: var(--fc-muted);
}

.g-sale-cells {
    display: flex;
    gap: 8px;
}

.g-sale-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 4px 6px;
    border-radius: 10px;
    background: var(--fc-ink);
}

.g-sale-num {
    font-family: var(--fc-head);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--fc-gold);
    font-variant-numeric: tabular-nums;
}

.g-sale-unit {
    font-size: 0.62rem;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.g-code-line {
    margin: 18px auto 0;
    color: var(--fc-soft);
    font-size: 0.95rem;
}

.g-plan-was {
    font-size: 0.9rem;
    color: #94a3b8;
    text-decoration: line-through;
}

/* The three family cards */
.g-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.g-plan-family {
    border: 1px solid var(--fc-line);
    border-radius: 18px;
    background: var(--fc-card);
    box-shadow: var(--fc-shadow);
    overflow: hidden;
}

.g-plan-family-both {
    border-color: var(--fc-ink);
    box-shadow: var(--fc-shadow-lg);
}

.g-plan-family-head {
    padding: 22px 22px 14px;
    border-bottom: 1px solid var(--fc-line-soft);
}

.g-plan-family-both .g-plan-family-head {
    background: var(--fc-ink);
    color: #fff;
    border-bottom: 4px solid var(--fc-gold);
}

.g-plan-family-head h2 {
    font-family: var(--fc-head);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--fc-ink);
    margin: 0 0 6px;
}

.g-plan-family-both .g-plan-family-head h2 {
    color: #fff;
}

.g-plan-family-sub {
    margin: 0;
    font-size: 0.88rem;
    color: var(--fc-muted);
}

.g-plan-family-both .g-plan-family-sub {
    color: rgba(255, 255, 255, 0.75);
}

.g-plan-terms {
    list-style: none;
    margin: 0;
    padding: 0;
}

.g-plan-term {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main price" "action action";
    gap: 6px 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--fc-line-soft);
}

.g-plan-term:last-child {
    border-bottom: none;
}

.g-plan-term-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.g-plan-term-name {
    font-family: var(--fc-head);
    font-weight: 700;
    color: var(--fc-ink);
}

.g-plan-term-note {
    font-size: 0.8rem;
    color: var(--fc-muted);
}

.g-plan-term-price {
    grid-area: price;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.g-plan-amount {
    font-family: var(--fc-head);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--fc-ink);
}

.g-plan-suffix {
    font-size: 0.78rem;
    color: var(--fc-muted);
}

.g-plan-strike {
    font-size: 0.9rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.g-plan-credit {
    font-size: 0.75rem;
    color: var(--fc-green);
    max-width: 200px;
}

.g-plan-term-action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

/* The brand's buttons: gold primary, ghost secondary */
.g-btn {
    font: inherit;
    font-family: var(--fc-head);
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.g-btn-plan {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--fc-ink);
    background: var(--fc-gold);
    box-shadow: 0 6px 18px rgba(253, 204, 5, 0.3);
}

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

.g-btn-plan-secondary {
    color: var(--fc-ink);
    background: var(--fc-card);
    border-color: var(--fc-line);
    box-shadow: none;
}

.g-btn-plan-secondary:hover {
    border-color: var(--fc-gold);
    box-shadow: none;
}

.g-plan-badge {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--fc-head);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}

.g-plan-badge-held {
    background: var(--fc-green-soft);
    color: var(--fc-green);
}

.g-plan-locked,
.g-plan-swap-note {
    font-size: 0.8rem;
    color: var(--fc-muted);
}

.g-plan-term-locked .g-plan-term-name,
.g-plan-term-locked .g-plan-amount {
    color: #94a3b8;
}

/* Trust bar */
.g-pricing-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.g-trust-item {
    font-size: 0.85rem;
    color: var(--fc-soft);
    padding: 14px 16px;
    border: 1px solid var(--fc-line);
    border-radius: 14px;
    background: var(--fc-card);
}

.g-trust-item strong {
    font-family: var(--fc-head);
    color: var(--fc-ink);
}

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


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

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


/* === pricing-desktop.css === */

/* GED pricing — DESKTOP (> 1024). Nothing beyond base today; the file exists
   so the tier ladder is complete and a desktop-only override has a home. */
@media (min-width: 1025px) {
    .g-pricing-head h1 {
        font-size: 2.2rem;
    }
}


/* === 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;
    }
}


/* === pricing-tablet.css === */

/* GED pricing — TABLET (769 to 1024). Two cards per row, the combined card
   full width underneath; the trust bar in two columns. */
@media (max-width: 1024px) and (min-width: 769px) {
    .g-pricing {
        padding: 40px 20px 56px;
    }

    .g-plans {
        grid-template-columns: 1fr 1fr;
    }

    .g-plan-family-both {
        grid-column: 1 / -1;
    }

    .g-pricing-trust {
        grid-template-columns: 1fr 1fr;
    }
}


/* === 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;
    }
}


/* === pricing-mobile.css === */

/* GED pricing — MOBILE PORTRAIT (<= 768). One card per row, the combined
   card first (it is the one most people want); the trust bar stacks. */
@media (max-width: 768px) and (orientation: portrait) {
    .g-pricing {
        padding: 28px 16px 48px;
    }

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

    .g-pricing-lede {
        font-size: 0.98rem;
    }

    .g-plans {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .g-plan-family-both {
        order: -1;
    }

    .g-plan-term {
        padding: 14px 16px;
    }

    .g-plan-amount {
        font-size: 1.2rem;
    }

    /* the sale card stacks: the words, then the clock under them */
    .g-sale-card {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }

    .g-sale-clock {
        flex: 1 1 100%;
        align-items: flex-start;
    }

    /* the badge picture is wide and short: on a phone it took a row of its own
       with empty ground around it (the visual pass, 2026-10-11) */
    .g-sale-art {
        display: none;
    }

    .g-pricing-trust {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 28px;
    }
}


/* === 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;
    }
}


/* === pricing-landscape.css === */

/* GED pricing — MOBILE LANDSCAPE (<= 768, landscape). Two cards per row so
   the short viewport is not one long column; the combined card full width. */
@media (max-width: 768px) and (orientation: landscape) {
    .g-pricing {
        padding: 24px 16px 40px;
    }

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

    .g-plans {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .g-plan-family-both {
        grid-column: 1 / -1;
    }

    .g-pricing-trust {
        grid-template-columns: 1fr 1fr;
    }
}