/* ═══════════════════════════════════════════════════════════════════════════
 * ENTANGLED TEXT — Public site on a phone (26 Sep 2026)
 *
 * The owner: "Its very clunky in mobile … make sure there is a good header
 * menu and make the footer menu feel like an app like how it is on the
 * write / wizard / ship pages for logged in users."
 *
 * What was wrong, measured at 390×844 on every header destination:
 *
 *   - The hamburger opened Bootstrap's collapse *inside* the sticky strip.
 *     home-space-header.css painted a 100vmax box-shadow behind it so the
 *     panel would "sit on something solid", which blacked out the whole page
 *     while the panel itself stopped at 72vh. Half a screen of void.
 *   - Tools opened the desktop mega menu — all 53 tools, downloads and a
 *     "Popular" strip — into a 240px box that scrolled inside a panel that
 *     scrolled inside a page that scrolled.
 *   - Sign In and the CTA were two more rows at the bottom of that list.
 *   - The support chip floated bottom-right over whatever was last on
 *     screen: the Sign in button on /login, Get Pro on /pricing.
 *   - /register laid its heading out left-aligned for a split layout whose
 *     aside is hidden on a phone, so it did not match /login.
 *
 * What this sheet does, all below 992px and only on body.et-public-site:
 *
 *   1. The menu is a full-height sheet under the strip: fixed, solid, its
 *      own scroll, rows tall enough to tap, sections drawn as inset lists.
 *      Tools shows the featured five and one link per category into /tools;
 *      the whole catalogue is on that page. Sign In and the CTA sit at the
 *      bottom of the sheet as buttons.
 *   2. A bottom tab bar — the dashboard's .et-dash-bottom-nav, same classes,
 *      same height, so it is the bar a member already knows from Write and
 *      the wizard. Home · Tools · Library · Support · Start free (Dashboard
 *      once signed in). Support is the widget's own launcher, docked into
 *      the bar by public-studio-chrome.js the way the app docks it.
 *   3. Body and footer clear the bar; the support panel already clears a
 *      70px band.
 *
 * Registered after home-space-header.css, so it is the last word.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    body.et-public-site {
        --et-pub-bar-h: 3.65rem;
        --et-dash-bottom-nav-h: var(--et-pub-bar-h);
        /* support-chat.css lifts the chat by this; the sheet and the footer
           clear it too. */
        --et-dash-bottom-nav-stack: calc(var(--et-pub-bar-h) + env(safe-area-inset-bottom, 0px));
    }

    /* ── The strip ──────────────────────────────────────────────────────── */
    body.et-public-site .et-navbar > .container {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    /* The hamburger is a 44px target, and it becomes an × while the sheet is
       open — the sheet has no other close control. */
    body.et-public-site .navbar-toggler,
    body.et-public-studio .navbar-toggler {
        width: 2.75rem;
        height: 2.75rem;
        margin-right: -0.35rem;
    }
    body.et-public-site .navbar-toggler i {
        font-size: 1.35rem;
    }
    body.et-public-site .navbar-toggler[aria-expanded="true"] .bi-list::before {
        content: "\f659"; /* bi-x-lg */
        font-size: 1.05rem;
    }

    /* ── The sheet ──────────────────────────────────────────────────────── */
    /* Bootstrap's height animation is replaced by a fade: the sheet has a
       fixed size, so animating height from 0 read as a curtain falling. */
    body.et-public-site .et-navbar .navbar-collapse.collapsing {
        transition: none;
    }

    body.et-public-site .et-navbar .navbar-collapse.show,
    body.et-public-site .et-navbar .navbar-collapse.collapsing {
        position: fixed !important;
        top: var(--hh-h, 4rem);
        left: 0;
        right: 0;
        bottom: var(--et-dash-bottom-nav-stack, 0px);
        z-index: 5;
        display: flex !important;
        flex-direction: column;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0.35rem max(1rem, env(safe-area-inset-right, 0px)) 1.25rem max(1rem, env(safe-area-inset-left, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: var(--hh-void, #050508) !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        clip-path: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: etPubSheetIn 0.2s ease-out;
    }

    @keyframes etPubSheetIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }

    /* The strip goes solid while the sheet is open so the two read as one
       surface, and the masthead scene stands down behind it. */
    html.et-pub-menu-open body.et-public-site .et-navbar {
        background-image: linear-gradient(var(--hh-void, #050508), var(--hh-void, #050508)) !important;
    }
    html.et-pub-menu-open body.et-public-site .et-navbar .et-masthead-limb,
    html.et-pub-menu-open body.et-public-site .et-navbar .et-masthead-sky {
        opacity: 0;
    }
    html.et-pub-menu-open,
    html.et-pub-menu-open body {
        overflow: hidden;
    }

    /* Rows. One list, hairlines between, 3.1rem tall — the app's tab bar is
       3.65rem and the dashboard sidebar rows are 2.9rem. */
    body.et-public-site .et-navbar-nav {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
        min-height: 100%;
        width: 100%;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0;
    }

    body.et-public-site .et-navbar-nav > .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 3.1rem;
        padding: 0.7rem 0.25rem !important;
        font-size: 1.0625rem !important;
        font-weight: 500;
        color: #f4f4f5 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left;
    }

    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link.active {
        color: var(--et-accent-primary, #2dd4bf) !important;
    }

    /* The thread underline is a hover flourish for a pointer. */
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link::after {
        display: none !important;
    }

    body.et-public-site .et-navbar .et-nav-caret {
        margin-left: auto;
        font-size: 0.85rem;
        opacity: 0.6;
    }

    /* ── Dropdowns inside the sheet: inset lists, not floating panels ────── */
    body.et-public-site .et-navbar .et-navbar-nav .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none;
        display: none;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 0 0.75rem !important;
        padding: 0.25rem 0 !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }
    body.et-public-site .et-navbar .et-navbar-nav .dropdown-menu.show {
        display: block;
    }

    body.et-public-site .et-navbar .dropdown-menu .dropdown-item {
        min-height: 2.75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.55rem 0.9rem;
        font-size: 0.9375rem;
        color: var(--et-text-secondary, #c9c9d4);
        white-space: normal;
        border-radius: 0;
    }
    body.et-public-site .et-navbar .dropdown-menu .dropdown-item:active,
    body.et-public-site .et-navbar .dropdown-menu .dropdown-item:focus-visible {
        background: rgba(45, 212, 191, 0.1);
        color: #fff;
    }
    body.et-public-site .et-navbar .dropdown-menu .dropdown-header {
        padding: 0.7rem 0.9rem 0.25rem;
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
    }
    body.et-public-site .et-navbar .dropdown-menu .dropdown-divider {
        margin: 0.3rem 0.9rem;
        border-color: rgba(255, 255, 255, 0.07);
    }

    /* Writing Library: two desktop columns become one list. */
    body.et-public-site .et-nav-writing-menu__pane {
        display: block;
    }
    body.et-public-site .et-nav-writing-menu__col + .et-nav-writing-menu__col {
        box-shadow: none;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        margin-top: 0.25rem;
    }
    body.et-public-site .et-nav-writing-menu__title {
        font-size: 0.9375rem;
    }
    body.et-public-site .et-nav-writing-menu__desc {
        font-size: 0.75rem;
    }
    body.et-public-site .et-nav-genre-chips {
        max-width: none;
        gap: 0.45rem;
        padding: 0.25rem 0.9rem 0.6rem !important;
    }
    body.et-public-site .et-nav-genre-chips__chip {
        min-height: 2.1rem;
        padding: 0.3rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Tools: the featured five and one link per category. The catalogue
       is the /tools page; a 53-row list has no place inside a menu. */
    body.et-public-site .et-tools-nav-dropdown {
        position: static;
    }
    body.et-public-site .et-tools-mega-menu {
        padding: 0 !important;
    }
    body.et-public-site .et-tools-mega-wrap,
    body.et-public-site .et-tools-mega-panel {
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    body.et-public-site .et-tools-mega-grid,
    body.et-public-site .et-tools-mega-downloads {
        display: none !important;
    }
    body.et-public-site .et-tools-mega-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.7rem 0.9rem;
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    body.et-public-site .et-tools-mega-header-text {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
    }
    body.et-public-site .et-tools-mega-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #f4f4f5;
    }
    body.et-public-site .et-tools-mega-sub {
        font-size: 0.75rem;
        color: var(--et-text-muted, #8b8b99);
    }
    /* public-nav.css gives every .btn-et-primary under a .nav-item 100% width
       for the CTA row; this one is the header's "View all" beside a title. */
    body.et-public-site .et-navbar-nav > .nav-item .et-tools-mega-header .btn.btn-et-primary {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        min-height: 2.25rem;
        padding: 0.4rem 0.8rem;
        white-space: nowrap;
        border-radius: 8px !important;
    }

    /* An open section's row is tinted teal, not the desktop hover violet. */
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link.dropdown-toggle[aria-expanded="true"],
    body.et-public-site .et-navbar .et-tools-nav-dropdown > .nav-link.dropdown-toggle[aria-expanded="true"] {
        color: var(--et-accent-primary, #2dd4bf) !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.et-public-site .et-tools-mega-featured {
        display: block;
        padding: 0;
        background: transparent;
        border: 0;
        font-size: 0.9375rem;
    }
    body.et-public-site .et-tools-mega-featured__label {
        display: block;
        padding: 0.7rem 0.9rem 0.25rem;
        margin: 0;
    }
    body.et-public-site .et-tools-mega-featured__link {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-height: 2.75rem;
        padding: 0.55rem 0.9rem;
        font-weight: 500;
        color: var(--et-text-secondary, #c9c9d4);
        border-radius: 0;
    }
    body.et-public-site .et-tools-mega-featured__link i {
        width: 1.25rem;
        text-align: center;
        color: var(--et-accent-primary, #2dd4bf);
        opacity: 0.85;
    }
    body.et-public-site .et-tools-mega-featured__text {
        flex: 1 1 auto;
    }

    /* Category links: rendered by header-public.php, phone only. */
    body.et-public-site .et-tools-mega-cats {
        display: block;
        margin: 0;
        padding: 0 0 0.25rem;
        list-style: none;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
    body.et-public-site .et-tools-mega-cats__label {
        display: block;
        padding: 0.7rem 0.9rem 0.25rem;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--et-text-muted, #8b8b99);
    }
    body.et-public-site .et-tools-mega-cats a {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-height: 2.75rem;
        padding: 0.55rem 0.9rem;
        font-size: 0.9375rem;
        color: var(--et-text-secondary, #c9c9d4);
        text-decoration: none;
    }
    body.et-public-site .et-tools-mega-cats a i:first-child {
        width: 1.25rem;
        text-align: center;
        color: var(--et-accent-primary, #2dd4bf);
        opacity: 0.85;
    }
    body.et-public-site .et-tools-mega-cats a .bi-chevron-right {
        margin-left: auto;
        font-size: 0.7rem;
        opacity: 0.5;
    }
    body.et-public-site .et-tools-mega-cats__count {
        margin-left: auto;
        font-size: 0.75rem;
        color: var(--et-text-muted, #8b8b99);
        font-variant-numeric: tabular-nums;
    }
    body.et-public-site .et-tools-mega-cats a .bi-chevron-right + .et-tools-mega-cats__count,
    body.et-public-site .et-tools-mega-cats__count + .bi-chevron-right {
        margin-left: 0.5rem;
    }

    /* ── Account cluster: bottom of the sheet, as buttons ───────────────── */
    /* Guest: Sign In + the CTA. margin-top:auto on the first pushes both to
       the foot of the sheet; the list is min-height 100% so there is a foot
       to push to. */
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item:has(> .nav-link[href="/login"]) {
        margin-top: auto !important;
        padding-top: 1rem;
        border-bottom: 0;
        box-shadow: none !important;
    }
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link[href="/login"] {
        justify-content: center;
        min-height: 2.9rem;
        padding: 0.6rem 1rem !important;
        font-size: 1rem !important;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 10px;
        text-align: center;
    }
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item.ms-2 {
        margin: 0.6rem 0 0 !important;
        border-bottom: 0;
    }
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .btn-et-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.9rem;
        font-size: 1rem;
        padding: 0.6rem 1rem;
        border-radius: 10px !important;
        /* The strip's translucent CTA is right for a HUD bar over the page;
           here it is the one action at the foot of a solid sheet, so it is
           the hero's filled teal. */
        background: var(--et-accent-primary, #2dd4bf) !important;
        color: #06110f !important;
    }

    /* Member: Dashboard row, then the account menu at the foot. */
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item.et-nav-user {
        margin-top: auto !important;
        padding-top: 1rem;
        border-top: 0;
        border-bottom: 0;
    }
    body.et-public-site .et-navbar .et-nav-user-trigger {
        width: 100%;
        min-height: 3.1rem;
        justify-content: flex-start;
        padding: 0.5rem 0.25rem !important;
    }
    body.et-public-site .et-navbar .et-nav-user-name {
        display: inline !important;
        max-width: none;
        font-size: 1rem;
    }
    body.et-public-site .et-navbar .et-nav-user-chevron {
        margin-left: auto;
    }
    body.et-public-site .et-navbar .et-nav-user-menu .dropdown-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 0.6rem;
        padding-left: 1.1rem;
    }
    body.et-public-site .et-navbar .et-nav-user-menu .dropdown-item .bi {
        width: 1.1rem;
        text-align: center;
        color: var(--et-accent-primary);
    }

    /* ── The bar ────────────────────────────────────────────────────────── */
    /* app.css draws .et-dash-bottom-nav and shows it only inside
       .et-app-shell.et-dash-space; here it is shown for the public site.
       Everything else — height, tabs, the docked Support tab — is the
       dashboard's own CSS. */
    body.et-public-site .et-pub-bottom-nav {
        display: flex;
        z-index: 1025;
        background: rgba(5, 5, 8, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    body.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item {
        color: #e4e4ea;
    }
    body.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item.active,
    body.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item[aria-current="page"] {
        color: var(--et-accent-primary, #2dd4bf);
        background: rgba(45, 212, 191, 0.06);
        border-top-color: var(--et-accent-primary, #2dd4bf);
    }
    body.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item--cta {
        color: var(--et-accent-primary, #2dd4bf);
    }
    body.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item--cta i {
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        margin: -0.3rem 0 -0.25rem;
        border-radius: 8px;
        font-size: 0.95rem;
        color: #06110f;
        background: var(--et-accent-primary, #2dd4bf);
    }
    /* The docked Support tab keeps the launcher's teal glyph; its label is
       shown by support-chat.css. Make its colour match its neighbours. */
    body.et-public-site .et-pub-bottom-nav .et-support-chat__dock.et-dash-bottom-nav__support {
        flex: 1 1 0;
        min-width: 0;
    }
    body.et-public-site .et-pub-bottom-nav .et-support-chat__dock.et-dash-bottom-nav__support .et-support-chat__launcher {
        width: 100%;
        color: #e4e4ea;
        background: transparent !important;
        box-shadow: none !important;
        border: 0;
        border-top: 2px solid transparent;
        font-family: var(--et-font-sans, 'DM Sans', system-ui, sans-serif);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.15;
    }
    body.et-public-site .et-pub-bottom-nav .et-support-chat__dock.et-dash-bottom-nav__support .et-support-chat__launcher[aria-expanded="true"] {
        color: var(--et-accent-primary, #2dd4bf);
        border-top-color: var(--et-accent-primary, #2dd4bf);
    }
    body.et-public-site .et-pub-bottom-nav .et-support-chat__dock.et-dash-bottom-nav__support .et-support-chat__launcher-presence {
        display: none;
    }
    body.et-public-site .et-pub-bottom-nav .et-support-chat__dock.et-dash-bottom-nav__support .et-support-chat__launcher-label {
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em;
        color: inherit;
    }
    /* The bar has the button; the "show again" chip is redundant. */
    body.et-public-site.et-ws-support-docked .et-support-chat__show {
        display: none !important;
    }

    /* Page and footer clear the bar. The auth footer's own padding-bottom
       is the same weight; this file loads after it. */
    body.et-public-site footer.et-site-footer {
        padding-bottom: calc(1.5rem + var(--et-dash-bottom-nav-stack, 0px)) !important;
    }
    body.et-public-site .et-site-footer__legal {
        justify-content: center;
        text-align: center;
        gap: 0.35rem 1rem;
    }
    body.et-public-site .et-site-footer__legal p {
        font-size: 0.75rem;
    }

    /* Anchored jumps land under the strip and the bar is the fold. */
    body.et-public-site [id] {
        scroll-margin-top: calc(var(--hh-h, 4rem) + 0.5rem);
    }

    /* ── Auth pages: /register matches /login ───────────────────────────── */
    /* The split layout's aside is hidden here, so its left-aligned heading
       and 56rem inner were a different page from Sign in's centred one. */
    body.et-public-site .et-auth-page--split .et-auth-page__inner {
        max-width: 26rem;
    }
    body.et-public-site .et-auth-page--split .et-auth-page__head {
        text-align: center;
    }
    body.et-public-site .et-auth-page--split .et-auth-page__icon {
        margin-left: auto;
        margin-right: auto;
    }
    body.et-public-site .et-auth-page {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        min-height: 0;
    }

    /* ── Landing heroes (.et-kb-hero, 17 pages): left-set on a phone ─────── */
    /* The lead runs to eight centred lines at 390px. Left-set, the heading
       and lead share one edge with the card under them. */
    body.et-public-site .et-kb-hero,
    body.et-public-site .et-kb-hero.text-center {
        text-align: left !important;
        margin-bottom: 1.75rem !important;
    }
    body.et-public-site .et-kb-hero .display-heading,
    body.et-public-site .et-public-page-hero .display-heading {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        line-height: 1.15;
    }
    body.et-public-site .et-kb-hero-lead {
        font-size: 1rem;
        line-height: 1.6;
        margin-left: 0;
        margin-right: 0;
    }
    body.et-public-site .et-kb-hero .et-badge,
    body.et-public-site .et-kb-hero .et-breadcrumb {
        margin-left: 0;
        margin-right: 0;
    }

    /* ── Comparison tables (pricing, vs-pages): swipe, not squeeze ───────── */
    /* Three plan columns at 55px each ran twelve lines deep. Give the table
       room and pin the feature column so the reader can swipe across. */
    body.et-public-site .table-responsive > .cmp-table {
        min-width: 36rem;
        margin-top: 0.75rem;
    }
    body.et-public-site .table-responsive > .cmp-table th:first-child,
    body.et-public-site .table-responsive > .cmp-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 7.5rem;
        max-width: 9rem;
        background: var(--hh-void, #050508);
        box-shadow: 1px 0 0 var(--et-border);
    }
    body.et-public-site .table-responsive > .cmp-table thead th:first-child {
        z-index: 2;
    }
    /* The caption is part of the table; keep it in the viewport while the
       plan columns slide underneath. */
    body.et-public-site .table-responsive > .cmp-table caption {
        position: sticky;
        left: 0;
        width: calc(100vw - var(--cui-gutter-x, 1.5rem));
        box-sizing: border-box;
        padding-right: 0.5rem;
    }
    body.et-public-site .table-responsive > .cmp-table tr td:first-child {
        white-space: normal;
    }
    body.et-public-site .table-responsive {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        margin-right: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        padding: 0 calc(var(--cui-gutter-x, 1.5rem) * 0.5);
    }

    /* ── Tools hub: three centred paragraphs above the first tool ───────── */
    /* Centred running text is fine at one or two lines; at six it is a
       ragged column. Left-set on a phone, supporting copy a step smaller. */
    /* .text-center is !important in Bootstrap, so this is too. */
    body.et-public-site .et-tools-hero__copy,
    body.et-public-site .et-tools-hero__copy.text-center {
        text-align: left !important;
    }
    body.et-public-site .et-tools-hero__copy .mx-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.et-public-site .et-tools-hero__title {
        font-size: clamp(1.65rem, 7.5vw, 2rem);
    }
    body.et-public-site .et-tools-hero__intro {
        font-size: 1rem;
    }
    body.et-public-site .et-tools-hero__body,
    body.et-public-site .et-tools-hero__note {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    body.et-public-site .et-tools-quick-strip {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0.4rem;
        /* Bleed exactly to the container edge (half the gutter), no wider:
           a fixed -1rem overshot a 12px gutter and made the page 394px. */
        margin-left: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        margin-right: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        padding: 0 calc(var(--cui-gutter-x, 1.5rem) * 0.5) 0.35rem;
    }
    body.et-public-site .et-tools-quick-strip::-webkit-scrollbar {
        display: none;
    }
    body.et-public-site .et-tools-quick-strip__label,
    body.et-public-site .et-tools-quick-strip__link {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    body.et-public-site .et-tools-quick-strip__link {
        min-height: 2.1rem;
        display: inline-flex;
        align-items: center;
    }

    /* ── Form fields: 16px or iOS zooms the page on focus ───────────────── */
    /* Every form on the public site (sign-in, contact, tool inputs, search,
       newsletter, comments, the support chat) was 12.5–15px. */
    body.et-public-site input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
    body.et-public-site textarea,
    body.et-public-site select,
    body.et-public-site .form-control,
    body.et-public-site .form-select {
        font-size: 16px !important;
    }

    /* ── "Read more" on long intros (public-studio-chrome.js) ───────────── */
    body.et-public-site [data-et-phone-more]:not(.is-open) {
        max-height: 4.9em;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(#000 45%, transparent);
        mask-image: linear-gradient(#000 45%, transparent);
    }
    body.et-public-site .et-phone-more__toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        min-height: 2.5rem;
        margin: 0.1rem 0 0.5rem;
        padding: 0;
        border: 0;
        background: none;
        color: var(--et-accent-primary);
        font-size: 0.875rem;
        font-weight: 600;
    }
    body.et-public-site .et-phone-more__toggle::after {
        content: "\f282";
        font-family: "bootstrap-icons";
        font-size: 0.75rem;
        transition: transform 0.15s ease;
    }
    body.et-public-site .et-phone-more__toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* ── Link rows and lists: thumb-sized on a phone ────────────────────── */
    /* The 24px rules in writing-tools.css / public-pages.css are the WCAG
       floor and stay; these add room where a thumb is the pointer. */
    body.et-public-site .et-tool-page-hero__links {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.4rem;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        margin-right: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        padding: 0 calc(var(--cui-gutter-x, 1.5rem) * 0.5) 0.25rem;
    }
    body.et-public-site .et-tool-page-hero__links::-webkit-scrollbar {
        display: none;
    }
    body.et-public-site .et-tool-page-hero__links > span[aria-hidden="true"] {
        display: none;
    }
    body.et-public-site .et-tool-page-hero__links > a {
        flex: 0 0 auto;
        min-height: 2.25rem;
        padding: 0 0.8rem;
        border: 1px solid var(--et-border);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.03);
        white-space: nowrap;
        font-size: 0.8125rem;
        text-decoration: none;
    }
    body.et-public-site .et-jump-list li + li,
    body.et-public-site .et-kb-toc ul li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    body.et-public-site .et-jump-list a,
    body.et-public-site .et-kb-toc ul a {
        display: flex;
        align-items: center;
        min-height: 2.6rem;
    }
    body.et-public-site .et-kb-toc summary {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    body.et-public-site .et-guide-tag,
    body.et-public-site a.et-guide-tag {
        display: inline-flex;
        align-items: center;
        min-height: 2.1rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    body.et-public-site .et-guides-tag-filters__row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }
    body.et-public-site .et-guides-tag-filters__row::-webkit-scrollbar {
        display: none;
    }
    body.et-public-site .et-guides-tag-filters__row > * {
        flex: 0 0 auto;
    }
    body.et-public-site .et-tools-hub-controls .col-md-5 > .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0.4rem !important;
        margin-left: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        margin-right: calc(var(--cui-gutter-x, 1.5rem) * -0.5);
        padding: 0 calc(var(--cui-gutter-x, 1.5rem) * 0.5) 0.2rem;
    }
    body.et-public-site .et-tools-hub-controls .col-md-5 > .d-flex::-webkit-scrollbar {
        display: none;
    }
    body.et-public-site .et-tools-hub-controls .col-md-5 > .d-flex > .btn {
        flex: 0 0 auto;
        min-height: 2.25rem;
        white-space: nowrap;
    }
    body.et-public-site .guide-sidebar-see-all,
    body.et-public-site .et-auth-page a.form-link:not(label a):not(p a):not(.form-check a) {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }

    /* ── Support panel sits on the bar, not 12px above it ───────────────── */
    /* support-chat.css leaves 70px for the dashboard's taller bar; this
       one is 3.65rem, and the gap showed a strip of page between the two. */
    body.et-public-site.et-ws-support-docked .et-support-chat.is-open .et-support-chat__panel {
        bottom: calc(var(--et-dash-bottom-nav-stack) + 4px) !important;
    }

    /* ── Cover studio: the jump-to-preview thumb comes back ─────────────── */
    /* cover-studio.css hides it below 992px because on Ship it shared a
       corner with three other floating widgets. On a public tool page the
       support launcher is in the bar and the corner is free, and without the
       thumb the cover is ~4000px below the fields that change it. */
    body.et-public-site #etCoverStudio .et-bcc-float-preview:not([hidden]) {
        display: flex !important;
        right: 0.75rem;
        bottom: calc(var(--et-dash-bottom-nav-stack) + 0.75rem);
        z-index: 1020;
        padding: 0.3rem;
    }
    body.et-public-site #etCoverStudio .et-bcc-float-canvas {
        width: 52px;
    }

    /* ── Footer sections: list rows, not 17px lines ─────────────────────── */
    body.et-public-site .et-footer-sec {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
    body.et-public-site .et-footer-sec__toggle {
        min-height: 3rem;
    }
    body.et-public-site .et-footer-nav.et-footer-sec__body > li > a,
    body.et-public-site .et-footer-nav .et-footer-nav__branch a {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
    }
    body.et-public-site .et-footer-branch__toggle {
        min-height: 2.5rem;
    }
    body.et-public-site .et-footer-meta-links a {
        display: inline-flex;
        align-items: center;
        min-height: 2.25rem;
    }

    /* ── Callouts: label and text stack instead of splitting into columns ─ */
    body.et-public-site .et-alert {
        display: block;
    }
    body.et-public-site .et-alert > .bi:first-child {
        margin-right: 0.35rem;
    }

    /* ── Tool pages ─────────────────────────────────────────────────────── */
    /* No keyboard shortcut on a phone. */
    body.et-public-site .et-tool-kbd-hint {
        display: none;
    }
    /* The start-a-book bridge stays in the first screen (it converts there)
       but at half the height, so the tool itself does too. */
    body.et-public-site .et-signup-bridge {
        gap: 0.6rem;
        margin: 0.9rem 0;
        padding: 0.75rem 0.9rem;
    }
    body.et-public-site .et-signup-bridge p.et-signup-bridge__text {
        flex-basis: 100%;
        font-size: 0.875rem;
        line-height: 1.5;
    }
    body.et-public-site .et-signup-bridge__action {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.75rem;
    }
    body.et-public-site .et-signup-bridge__action .btn {
        white-space: nowrap;
    }
    body.et-public-site .et-tool-toolbar-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    body.et-public-site .et-tool-toolbar-actions .btn {
        min-height: 2.5rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    body.et-public-site .et-tool-auto-run.form-check {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 2.5rem;
        margin: 0 !important;
        padding-left: 0.15rem;
    }
    body.et-public-site .et-tool-auto-run .form-check-input {
        float: none;
        flex: 0 0 auto;
        width: 1.15rem;
        height: 1.15rem;
        margin: 0;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.et-public-site .et-tool-auto-run .form-check-input:not(:checked) {
        background-color: rgba(255, 255, 255, 0.08);
    }
    body.et-public-site .et-tool-account-nudge__actions .btn {
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
    }
    body.et-public-site .et-tool-card-badge,
    body.et-public-site .et-tool-nav-badge,
    body.et-public-site .et-mgc-template-btn__count,
    body.et-public-site .et-bcc-art-version__now {
        font-size: 0.6875rem;
    }
    body.et-public-site .et-tool-nav-group__title {
        font-size: 0.6875rem;
    }

    /* ── Touch targets across the marketing pages ───────────────────────── */
    body.et-public-site .btn:not(.btn-sm):not(.btn-lg) {
        min-height: 2.75rem;
    }
    body.et-public-site .btn-lg {
        min-height: 3.1rem;
    }
}

/* Below md the bar's six-tab worst case (member + Support) is tight; the
   label already ellipsises, this keeps the glyph and label from crowding. */
@media (max-width: 359.98px) {
    body.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item {
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        font-size: 0.625rem;
    }
}

/* Tablets: stretched across 600–990px the tabs sit 170px apart and read as
   a toolbar rather than a tab bar; hold them at phone spacing, centred. */
@media (min-width: 600px) and (max-width: 991.98px) {
    body.et-public-site .et-pub-bottom-nav {
        justify-content: center;
    }
    body.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item,
    body.et-public-site .et-pub-bottom-nav .et-support-chat__dock.et-dash-bottom-nav__support {
        flex: 0 1 7.5rem;
    }
}

/* Never on desktop: the bar is a phone control, and nothing above 992px
   should be reserving space for it. */
@media (min-width: 992px) {
    body.et-public-site .et-pub-bottom-nav,
    body.et-public-site .et-phone-more__toggle {
        display: none !important;
    }
    body.et-public-site .et-tools-mega-cats {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-site .et-navbar .navbar-collapse.show {
        animation: none !important;
    }
}