/*
 * The public site in the Write page's look (D2), 2 Oct 2026, owner: "make the
 * other public pages match the new design" — the homepage (home-d2.css) went
 * first.
 *
 * Every public page shares header-public.php and the studio skin
 * (et-public-studio.css, public-studio-pages.css, home-space-header.css,
 * public-mobile-chrome.css). This sheet is registered after all of them and
 * moves the skin onto D2's vocabulary:
 *
 *   tokens   card #0F1013 / #16171B on #000, text #E4E6EA / #A1A6AE / #7C828B,
 *            teal #2DD4BF with #04201C ink
 *   type     the system face everywhere (as the signed-in app); the labels
 *            the skin set in IBM Plex Mono become small uppercase system text;
 *            code stays monospaced
 *   chrome   a flat 64px header, clear at rest and near-black once scrolled,
 *            no rule under it; the field is D2's dot grid and entangled pairs
 *            (public-d2-field.js), not the masthead scene
 *   controls flat teal and flat grey buttons, Write's fields (#08090A with a
 *            #26292E edge, teal on focus), flat sign-in buttons
 *
 * Scoped to body.et-public-site.et-public-studio so it outranks the skin's
 * body.et-public-studio rules without !important wherever it can.
 */

body.et-public-site.et-public-studio {
    --d2-page: #000;
    --d2-card: #0F1013;
    --d2-card-2: #16171B;
    --d2-raise: #1A1B1F;
    --d2-raise-hover: #24262B;
    --d2-tint: #0E2A26;
    --d2-field: #08090A;
    --d2-field-line: #26292E;
    --d2-line: #1C1E22;
    --d2-accent: #2DD4BF;
    --d2-accent-hover: #5EEAD4;
    --d2-accent-ink: #04201C;
    --d2-text: #E4E6EA;
    --d2-strong: #F4F5F7;
    --d2-soft: #A1A6AE;
    --d2-muted: #7C828B;
    --d2-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --d2-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    /* The skin's tokens, re-pointed. Components built on them follow. */
    --et-bg-secondary: var(--d2-card);
    --et-bg-tertiary: var(--d2-card);
    --et-bg-card: var(--d2-card);
    --et-bg-card-solid: var(--d2-card);
    --et-bg-elevated: var(--d2-card-2);
    --et-bg-input: var(--d2-field);
    --et-bg-hover: var(--d2-card-2);
    --et-accent-ink: var(--d2-accent-ink);
    --et-text-primary: var(--d2-text);
    --et-text-secondary: var(--d2-soft);
    --et-text-muted: var(--d2-muted);
    /* Card edges all but disappear on #0F1013, as D2's do; on the black page
       the same line still divides rows. */
    --et-hairline: #17181C;
    --et-hairline-strong: #26292E;
    --et-font-sans: var(--d2-font);
    --et-font-display: var(--d2-font);
    /* Labels were set in IBM Plex Mono through this token; D2 sets them in the
       system face. Real code is given a monospace face explicitly below. */
    --et-font-mono: var(--d2-font);
    --eh-font-sans: var(--d2-font);
    --eh-font-mono: var(--d2-font);
    --et-gdocs-font: var(--d2-font);
    /* Serif is for reading a long article (restored on its body below), not
       for the explanations on pricing, legal or landing pages. */
    --et-font-serif: var(--d2-font);
    --eh-font-serif: var(--d2-font);
    font-family: var(--d2-font);
    background: var(--d2-page);
    color: var(--d2-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Code, prompts and keys keep a monospace face. */
body.et-public-site.et-public-studio pre,
body.et-public-site.et-public-studio code,
body.et-public-site.et-public-studio kbd,
body.et-public-site.et-public-studio samp,
body.et-public-site.et-public-studio .prompt-example,
body.et-public-site.et-public-studio .prompt-example * {
    font-family: var(--d2-mono) !important;
}

/* Guide and news articles keep their reading face. */
body.et-public-site.et-public-studio .blog-content,
body.et-public-site.et-public-studio .et-article-body {
    --et-font-serif: 'Source Serif 4', Georgia, serif;
    --eh-font-serif: 'Source Serif 4', Georgia, serif;
}

body.et-public-site.et-public-studio h1,
body.et-public-site.et-public-studio h2,
body.et-public-site.et-public-studio h3,
body.et-public-site.et-public-studio h4,
body.et-public-site.et-public-studio h5,
body.et-public-site.et-public-studio h6 {
    font-family: var(--d2-font);
    color: var(--d2-strong);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* ── Chrome: flat, black, no masthead scene ─────────────────────────────── */
body.et-public-site .et-public-field:not(.et-pub-field),
body.et-public-site .et-masthead-sky,
body.et-public-site .et-masthead-limb,
body.et-public-site .et-site-footer__glow {
    display: none !important;
}
body.et-public-site .et-navbar {
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: var(--d2-font);
}
body.et-public-site .et-navbar .nav-link {
    color: var(--d2-soft) !important;
    font-size: 14px;
    border-radius: 0 !important;
}
body.et-public-site .et-navbar .nav-link:hover,
body.et-public-site .et-navbar .nav-link:focus-visible,
body.et-public-site .et-navbar .nav-link.active {
    color: var(--d2-strong) !important;
}
body.et-public-studio.et-public-site .et-navbar a.btn.btn-et-primary {
    background: var(--d2-accent) !important;
    color: var(--d2-accent-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600;
}
body.et-public-studio.et-public-site .et-navbar a.btn.btn-et-primary:hover { background: var(--d2-accent-hover) !important; }
body.et-public-studio.et-public-site footer.et-site-footer {
    background: var(--d2-page) !important;
    border-top: 1px solid var(--d2-line);
    font-family: var(--d2-font);
}
/* The masthead is a 124px scene that compacts on scroll and pulls the page
   up under it; here it is Write's plain 64px bar and the page starts below. */
body.et-public-site {
    --hh-open: 4rem;
    --hh-shut: 4rem;
    --hh-bleed: 0px;
}
/* No rule under the header. At rest it is clear, so the field runs up behind
   the logo; once the page moves it turns near-black, blurring what passes
   under it, which separates it from the page without an edge. */
body.et-public-site .et-navbar {
    background: transparent !important;
    background-image: none !important;
    transition: background-color 0.2s ease;
}
body.et-public-site .et-navbar.is-scrolled {
    background: rgba(0, 0, 0, 0.88) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
body.et-public-site .et-navbar::before,
body.et-public-site .et-navbar::after,
body.et-public-site .et-navbar > .container::before,
body.et-public-site .et-navbar > .container::after {
    display: none !important;
}

/* The phone menu button: Write's icon buttons have no ring, only a fill on
   hover. The skin drew a 1px inset hairline round a grey square. */
body.et-public-studio.et-public-site .et-navbar .navbar-toggler {
    width: 44px;
    height: 44px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--d2-text) !important;
    font-size: 22px;
}
body.et-public-studio.et-public-site .et-navbar .navbar-toggler:hover,
body.et-public-studio.et-public-site .et-navbar .navbar-toggler:focus {
    background: var(--d2-raise) !important;
    box-shadow: none !important;
}
body.et-public-studio.et-public-site .et-navbar .navbar-toggler[aria-expanded="true"] {
    background: var(--d2-tint) !important;
    color: var(--d2-accent) !important;
}
body.et-public-studio.et-public-site .et-navbar .navbar-toggler:focus-visible {
    outline: 2px solid var(--d2-accent) !important;
    outline-offset: -2px;
}
@media (max-width: 991.98px) {
    body.et-public-studio.et-public-site .et-navbar .navbar-collapse {
        background: var(--d2-card) !important;
        box-shadow: none !important;
    }
    /* The sheet's Sign In was an outlined, rounded button; here it is a flat
       raised fill beside the square teal one. */
    body.et-public-studio.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link[href="/login"] {
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--d2-raise) !important;
        color: var(--d2-strong) !important;
    }
    body.et-public-studio.et-public-site .et-navbar .et-navbar-nav > .nav-item > a.btn.btn-et-primary {
        border-radius: 0 !important;
    }
}
/* The header link that is the page you are on, and a quiet underline on hover,
   the way Write marks its tabs. */
@media (min-width: 992px) {
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link {
        position: relative;
    }
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link::before {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 2px;
        height: 2px;
        background: var(--d2-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.18s ease;
    }
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link:hover::before {
        transform: scaleX(1);
    }
}

/* Pages other than the homepage pull main up under the header; with a 64px
   header that is the whole of the offset (home-space-header.css). */

/* The header stays solid while the phone menu sheet is open. */
html.et-pub-menu-open body.et-public-site .et-navbar,
body.et-public-site .et-navbar:has(.navbar-collapse.show) {
    background: var(--d2-page) !important;
}

/* Header menus: one flat card, no rounded rim. */
@media (min-width: 992px) {
    body.et-public-studio.et-public-site .et-navbar .dropdown-menu {
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--d2-card) !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6) !important;
    }
    body.et-public-studio.et-public-site .et-navbar .dropdown-menu .dropdown-item {
        border-radius: 0 !important;
    }
}

/* ── The field (public-d2-field.js) ───────────────────────────────────────
 * A fixed canvas under the page. The square dot grid is the canvas's own CSS
 * background (one 2px square per 32px tile, centred on 16 + 32n, the points
 * the script draws its pairs on), so the script only draws what moves. The
 * grid fades towards the bottom of the viewport so reading stays quiet. */
.et-pub-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='15' width='2' height='2' fill='%232DD4BF' fill-opacity='0.11'/%3E%3C/svg%3E");
    background-position: 0 0;
    background-repeat: repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.45) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.45) 100%);
}
@media print { .et-pub-field { display: none; } }

/* ── Buttons ───────────────────────────────────────────────────────────── */
body.et-public-studio.et-public-site .btn-et-primary,
body.et-public-studio.et-public-site .et-btn-scifi {
    background: var(--d2-accent) !important;
    color: var(--d2-accent-ink) !important;
    font-family: var(--d2-font);
    font-weight: 600;
}
body.et-public-studio.et-public-site .btn-et-primary:hover,
body.et-public-studio.et-public-site .btn-et-primary:focus-visible,
body.et-public-studio.et-public-site .et-btn-scifi:hover {
    background: var(--d2-accent-hover) !important;
    color: var(--d2-accent-ink) !important;
}
/* Secondary buttons: a flat grey fill, no outline (D2's ghost). */
body.et-public-studio.et-public-site .btn-et-ghost,
body.et-public-studio.et-public-site .btn-et-secondary,
body.et-public-studio.et-public-site .btn-outline-secondary,
body.et-public-studio.et-public-site .btn-outline-light,
body.et-public-studio.et-public-site .btn-outline-primary,
body.et-public-studio.et-public-site .et-hs-btn--ghost {
    background: var(--d2-raise) !important;
    color: var(--d2-text) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.et-public-studio.et-public-site .btn-et-ghost:hover,
body.et-public-studio.et-public-site .btn-et-secondary:hover,
body.et-public-studio.et-public-site .btn-outline-secondary:hover,
body.et-public-studio.et-public-site .btn-outline-light:hover,
body.et-public-studio.et-public-site .btn-outline-primary:hover,
body.et-public-studio.et-public-site .et-hs-btn--ghost:hover {
    background: var(--d2-raise-hover) !important;
    color: var(--d2-strong) !important;
}
body.et-public-studio.et-public-site .btn:focus-visible,
body.et-public-studio.et-public-site a:focus-visible,
body.et-public-studio.et-public-site button:focus-visible {
    outline: 2px solid var(--d2-accent);
    outline-offset: 2px;
}

/* ── Fields: Write's, not the skin's teal inset box ────────────────────── */
body.et-public-studio.et-public-site select,
body.et-public-studio.et-public-site textarea,
body.et-public-studio.et-public-site .form-control,
body.et-public-studio.et-public-site .form-select,
body.et-public-studio.et-public-site .et-form-control,
body.et-public-studio.et-public-site input[type="text"],
body.et-public-studio.et-public-site input[type="search"],
body.et-public-studio.et-public-site input[type="email"],
body.et-public-studio.et-public-site input[type="url"],
body.et-public-studio.et-public-site input[type="number"],
body.et-public-studio.et-public-site input[type="password"],
body.et-public-studio.et-public-site input[type="tel"] {
    background-color: var(--d2-field) !important;
    box-shadow: inset 0 0 0 1px var(--d2-field-line) !important;
    color: var(--d2-text) !important;
}
body.et-public-studio.et-public-site select:focus,
body.et-public-studio.et-public-site textarea:focus,
body.et-public-studio.et-public-site .form-control:focus,
body.et-public-studio.et-public-site .form-select:focus,
body.et-public-studio.et-public-site .et-form-control:focus,
body.et-public-studio.et-public-site input[type="text"]:focus,
body.et-public-studio.et-public-site input[type="search"]:focus,
body.et-public-studio.et-public-site input[type="email"]:focus,
body.et-public-studio.et-public-site input[type="url"]:focus,
body.et-public-studio.et-public-site input[type="number"]:focus,
body.et-public-studio.et-public-site input[type="password"]:focus,
body.et-public-studio.et-public-site input[type="tel"]:focus {
    background-color: var(--d2-field) !important;
    box-shadow: inset 0 0 0 1px var(--d2-accent) !important;
    outline: none !important;
}
body.et-public-studio.et-public-site input::placeholder,
body.et-public-studio.et-public-site textarea::placeholder {
    color: #6B7179 !important;
    opacity: 1;
}
body.et-public-studio.et-public-site input[type="checkbox"],
body.et-public-studio.et-public-site input[type="radio"] {
    accent-color: var(--d2-accent);
}

/* ── Sign-in providers: flat grey, like the homepage's sign-up dialog ──── */
body.et-public-studio.et-public-site .et-auth-social .btn,
body.et-public-studio.et-public-site .et-auth-social a[class*="__btn"] {
    background: var(--d2-raise) !important;
    color: var(--d2-strong) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.et-public-studio.et-public-site .et-auth-social .btn:hover,
body.et-public-studio.et-public-site .et-auth-social a[class*="__btn"]:hover {
    background: var(--d2-raise-hover) !important;
}

/* ── Cards and panels: the D2 card tone, no inset rim ──────────────────── */
body.et-public-studio.et-public-site .card,
body.et-public-studio.et-public-site .et-card,
body.et-public-studio.et-public-site .kb-card,
body.et-public-studio.et-public-site .step-card {
    background: var(--d2-card) !important;
    box-shadow: none !important;
}

/* ── Labels and badges: D2 tints them, it does not ring them ───────────── */
body.et-public-studio.et-public-site .et-tool-nav-badge,
body.et-public-studio.et-public-site .et-tool-card-badge,
body.et-public-studio.et-public-site .et-badge-mono,
body.et-public-studio.et-public-site .et-tools-hero .et-badge,
body.et-public-studio.et-public-site .et-cc__count,
body.et-public-studio.et-public-site .cl-badge,
body.et-public-studio.et-public-site .step-num,
body.et-public-studio.et-public-site .et-kdp-progress__num {
    box-shadow: none !important;
}
body.et-public-studio.et-public-site .et-tool-nav-badge:not([class*="--"]),
body.et-public-studio.et-public-site .et-tool-card-badge:not([class*="--"]),
body.et-public-studio.et-public-site .cl-badge:not([class*="cl-badge-"]),
body.et-public-studio.et-public-site .step-num,
body.et-public-studio.et-public-site .et-kdp-progress__num {
    background: var(--d2-card-2) !important;
}
body.et-public-studio.et-public-site .et-tool-nav-badge--new,
body.et-public-studio.et-public-site .et-tool-card-badge--new,
body.et-public-studio.et-public-site .cl-badge-new,
body.et-public-studio.et-public-site .cl-badge-fix,
body.et-public-studio.et-public-site .et-cc__count {
    background: var(--d2-tint) !important;
    color: var(--d2-accent) !important;
}

body.et-public-studio.et-public-site .et-badge.et-badge-primary {
    background: var(--d2-tint) !important;
    color: var(--d2-accent) !important;
}
body.et-public-studio.et-public-site .et-badge-mono {
    font-family: var(--d2-font) !important;
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* The violet glow behind the newsletter card belonged to the old palette. */
body.et-public-studio.et-public-site .guide-newsletter-card::before,
body.et-public-studio.et-public-site .guide-newsletter-card::after {
    display: none !important;
}

/* The guides pages' violet washes (public-pages.css), flattened. */
body.et-public-studio.et-public-site .guides-index-hero,
body.et-public-studio.et-public-site.et-page-guide .guide-article-layout {
    background: transparent !important;
    background-image: none !important;
}
body.et-public-studio.et-public-site .guide-newsletter-card {
    background: var(--d2-card) !important;
    background-image: none !important;
}
/* A guide without a cover image: a flat card carrying the field's own grid. */
body.et-public-studio.et-public-site .guide-featured-placeholder {
    background: var(--d2-card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='15' y='15' width='2' height='2' fill='%232DD4BF' fill-opacity='0.22'/%3E%3C/svg%3E") repeat !important;
}
body.et-public-studio.et-public-site .guide-featured-placeholder__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0 !important;
    background: var(--d2-tint) !important;
    box-shadow: none !important;
    color: var(--d2-accent) !important;
    font-size: 22px;
}
body.et-public-studio.et-public-site .guide-featured-placeholder__threads {
    background: none !important;
    background-image: none !important;
}

/* Search boxes are fields, not teal-ringed boxes. */
body.et-public-studio.et-public-site .et-tool-nav-search,
body.et-public-studio.et-public-site .et-guides-search {
    background: var(--d2-field) !important;
    box-shadow: inset 0 0 0 1px var(--d2-field-line) !important;
}
body.et-public-studio.et-public-site .et-tool-nav-search:focus-within,
body.et-public-studio.et-public-site .et-guides-search:focus-within {
    box-shadow: inset 0 0 0 1px var(--d2-accent) !important;
}
body.et-public-studio.et-public-site .et-tool-nav-search input,
body.et-public-studio.et-public-site .et-guides-search input {
    box-shadow: none !important;
    background: transparent !important;
}

/* "You are here" and the featured plan: a tint and a teal top edge, the way
   the homepage marks the Chapter 1 step. */
body.et-public-studio.et-public-site .et-wl-path__link--here,
body.et-public-studio.et-public-site .pr-plan--featured {
    border-color: transparent !important;
    background: var(--d2-tint) !important;
    box-shadow: inset 0 2px 0 var(--d2-accent) !important;
}

/* Phone: the tool page's hero links were rounded outlined pills
   (public-mobile-chrome.css); here they are flat grey cells. */
@media (max-width: 991.98px) {
    body.et-public-studio.et-public-site .et-tool-page-hero__links > a {
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--d2-raise) !important;
        box-shadow: none !important;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}
/* The bottom bar's call to action is a square, like every D2 control. */
body.et-public-studio.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item--cta .bi,
body.et-public-studio.et-public-site .et-pub-bottom-nav .et-dash-bottom-nav__item--cta i {
    border-radius: 0 !important;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
body.et-public-studio.et-public-site footer.et-site-footer {
    background: var(--d2-page) !important;
    border-top: 1px solid var(--d2-line) !important;
    font-family: var(--d2-font);
}
body.et-public-studio.et-public-site footer.et-site-footer .et-footer-nav-title,
body.et-public-studio.et-public-site footer.et-site-footer .et-footer-tagline {
    font-family: var(--d2-font);
    font-size: 12px;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Page polish (2 Oct 2026, owner: "go through all public pages and polish
 * them to fit the new design"). Shared page parts first, then pages.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Letter-spacing the skin gave its IBM Plex Mono labels. On the system face
   it spread sentence-case text out ("N e w  t o  A I"). Uppercase labels keep
   a little; everything else sits at normal. */
body.et-public-studio.et-public-site :is(
    .et-badge, .et-badge-mono, .et-guide-tag,
    .et-wl-path__link, .et-wl-path__link *, .et-wl-hero__latest, .et-wl-hero__latest *,
    .et-wl-breadcrumb, .et-wl-breadcrumb *, nav[aria-label="Breadcrumb"], nav[aria-label="Breadcrumb"] *,
    .breadcrumb, .breadcrumb *, .et-breadcrumb, .et-breadcrumb *
) {
    letter-spacing: normal !important;
}
/* Small labels: D2's kicker (uppercase, 12px, muted, a little spaced). */
body.et-public-studio.et-public-site :is(.et-mono.text-muted-et, h2.et-mono, h3.et-mono, .et-wl-section-label, .et-wl-hero__latest-kicker) {
    font-family: var(--d2-font) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--d2-muted) !important;
}

/* Breadcrumbs: one size and tone everywhere. */
body.et-public-studio.et-public-site :is(.et-wl-breadcrumb, nav[aria-label="Breadcrumb"], .et-breadcrumb) {
    font-size: 13px;
    color: var(--d2-muted);
}
body.et-public-studio.et-public-site :is(.et-wl-breadcrumb, nav[aria-label="Breadcrumb"], .et-breadcrumb) a {
    color: var(--d2-soft) !important;
}
body.et-public-studio.et-public-site :is(.et-wl-breadcrumb, nav[aria-label="Breadcrumb"], .et-breadcrumb) a:hover {
    color: var(--d2-accent) !important;
}

/* The "Entangled Text — …" summary (et_llm_render_citation_box) carried a
   violet inline box. It is a one-line orientation, so it reads as one: muted
   text against a teal rule, no box. */
body.et-public-studio.et-public-site .et-llm-citation {
    max-width: 720px;
    margin-bottom: 20px !important;
    padding: 2px 0 2px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 2px 0 0 rgba(45, 212, 191, 0.55) !important;
    color: var(--d2-soft);
    font-size: 14px !important;
    line-height: 1.6 !important;
}
body.et-public-studio.et-public-site .et-llm-citation strong { color: var(--d2-strong); }

/* ── Writing library hero (/guides, /writing-tips) ─────────────────────────
 * Was a boxed panel with a long intro in a narrow column and a gap before
 * the Start here column. Now: on the page, an even split, the lead first and
 * the supporting copy quieter, compact path cards on the right. */
body.et-public-studio.et-public-site .et-wl-hero {
    padding: 48px 0 40px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
body.et-public-studio.et-public-site .et-wl-hero__split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
    margin-bottom: 36px;
}
body.et-public-studio.et-public-site .et-wl-hero__split:last-child { margin-bottom: 0; }
/* The handbook's body follows the hero closely; the hero carries the gap. */
body.et-public-studio.et-public-site .et-wl-handbook { padding-top: 24px !important; }
body.et-public-studio.et-public-site .et-wl-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: none;
    margin: 0;
    text-align: left;
}
body.et-public-studio.et-public-site .et-wl-hero__intro > * { margin: 0 !important; }
body.et-public-studio.et-public-site .et-wl-hero__more { display: flex; flex-direction: column; gap: 12px; }
body.et-public-studio.et-public-site .et-wl-hero__title {
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.08;
    font-weight: 700;
}
body.et-public-studio.et-public-site .et-wl-hero__lead,
body.et-public-studio.et-public-site .et-wl-hero--handbook .et-kb-hero-lead {
    max-width: 640px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1.6;
    color: var(--d2-soft) !important;
}
body.et-public-studio.et-public-site .et-wl-hero__body {
    max-width: 640px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--d2-muted) !important;
}
body.et-public-studio.et-public-site .et-wl-hero__body p { max-width: none; margin: 0 0 10px; }
body.et-public-studio.et-public-site .et-wl-hero__meta { font-size: 14px; color: var(--d2-muted) !important; }
body.et-public-studio.et-public-site .et-wl-hero--handbook .et-badge {
    align-self: flex-start;
}
body.et-public-studio.et-public-site .et-wl-hero__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
}
body.et-public-studio.et-public-site .et-wl-hero__split .et-wl-path,
body.et-public-studio.et-public-site .et-wl-path {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}
body.et-public-studio.et-public-site .et-wl-path__link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--d2-card) !important;
    box-shadow: none !important;
    color: var(--d2-text) !important;
    font-family: var(--d2-font) !important;
    text-decoration: none;
    transition: background 0.14s ease;
}
body.et-public-studio.et-public-site a.et-wl-path__link:hover { background: var(--d2-card-2) !important; }
body.et-public-studio.et-public-site .et-wl-path__step {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--d2-tint) !important;
    box-shadow: none !important;
    color: var(--d2-accent) !important;
    font-family: var(--d2-font) !important;
    font-size: 13px;
    font-weight: 700;
}
body.et-public-studio.et-public-site .et-wl-path__link--here .et-wl-path__step {
    background: var(--d2-accent) !important;
    color: var(--d2-accent-ink) !important;
}
body.et-public-studio.et-public-site .et-wl-path__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.et-public-studio.et-public-site .et-wl-path__body strong { font-size: 15px; font-weight: 600; color: var(--d2-strong); }
body.et-public-studio.et-public-site .et-wl-path__body span { font-size: 13px; line-height: 1.45; color: var(--d2-soft); }
body.et-public-studio.et-public-site .et-wl-hero__latest {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--d2-card) !important;
    box-shadow: none !important;
    color: var(--d2-text) !important;
    font-family: var(--d2-font) !important;
    text-decoration: none;
    transform: none !important;
}
body.et-public-studio.et-public-site a.et-wl-hero__latest:hover { background: var(--d2-card-2) !important; }
body.et-public-studio.et-public-site .et-wl-hero__latest-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--d2-strong) !important; }
body.et-public-studio.et-public-site .et-wl-hero__latest-meta { font-size: 13px; color: var(--d2-muted) !important; }
body.et-public-studio.et-public-site .et-wl-hero__panel-foot { font-size: 13px; color: var(--d2-muted); }

/* Search sits on the page's left edge with the hero, not centred under it. */
body.et-public-studio.et-public-site .et-guides-search-wrap {
    max-width: 760px;
    margin: 0 0 8px !important;
    text-align: left;
}
body.et-public-studio.et-public-site .et-guides-search { margin: 0 !important; }
body.et-public-studio.et-public-site .et-guides-search__hint { text-align: left !important; margin-top: 8px !important; font-size: 13px; }

/* The library's tab band under the header: aligned to the page container,
   on the page rather than a grey strip. */
body.et-public-studio.et-public-site .et-wl-chrome {
    background: transparent !important;
    box-shadow: inset 0 -1px 0 var(--d2-line) !important;
    border: 0 !important;
}

@media (max-width: 991.98px) {
    body.et-public-studio.et-public-site .et-wl-hero { padding: 28px 0 28px !important; }
    body.et-public-studio.et-public-site .et-wl-hero__split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    body.et-public-studio.et-public-site .et-wl-hero__lead,
    body.et-public-studio.et-public-site .et-wl-hero--handbook .et-kb-hero-lead { font-size: 16px !important; }
}

/* ── Long-form pages: one reading column ───────────────────────────────────
 * The explainers (write / edit / translate, the genre writers, best-of and
 * vs pages, pricing, about, legal, docs) used six container widths between
 * them (container, --narrow, --article, --wide, --changelog, py-4) and
 * alternated centred and left-aligned heroes. Every one is now the same
 * 880px column, its hero left-aligned, its sections filling the column. The
 * library and tool pages keep their own wider layouts. */
body.et-public-studio.et-public-site:not(.et-page-guides):not(.et-page-writing-tips) :is(.et-public-content-section, .et-public-content-section--md, .et-public-legal-section, .et-public-page-hero) > .container {
    max-width: 904px !important;
}
body.et-public-studio.et-public-site :is(.et-public-content-section, .et-public-content-section--md, .et-public-legal-section) {
    padding: 40px 0 72px !important;
}
body.et-public-studio.et-public-site .et-public-page-hero { padding: 48px 0 8px !important; }
body.et-public-studio.et-public-site .et-public-page-hero + .et-public-content-section { padding-top: 24px !important; }

/* Heroes: left-aligned, like every other page. */
body.et-public-studio.et-public-site :is(.et-kb-hero, .et-public-page-hero .container, .et-tools-hero__copy) {
    text-align: left !important;
}
body.et-public-studio.et-public-site :is(.et-kb-hero, .et-public-page-hero, .et-tools-hero__copy) :is(.mx-auto, p, .et-kb-hero-lead) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.et-public-studio.et-public-site .et-kb-hero { margin-bottom: 40px !important; }
body.et-public-studio.et-public-site :is(.et-public-page-hero, .et-kb-hero, .et-tools-hero) .text-center { text-align: left !important; }
body.et-public-studio.et-public-site :is(.et-public-page-hero, .et-kb-hero) .et-signup-bridge,
body.et-public-studio.et-public-site .et-signup-bridge--center {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.et-public-studio.et-public-site :is(.et-kb-hero, .et-public-page-hero) h1 {
    font-size: clamp(32px, 3.6vw, 44px);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 16px;
}
body.et-public-studio.et-public-site :is(.et-kb-hero-lead, .et-kb-hero .prose-text, .et-public-page-hero .prose-text) {
    max-width: none !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: var(--d2-soft) !important;
}
body.et-public-studio.et-public-site :is(.et-kb-hero, .et-public-page-hero) .btn { margin-top: 8px; }
body.et-public-studio.et-public-site :is(.et-kb-hero, .et-public-page-hero) :is(.et-badge, .et-hero-badge) {
    display: inline-flex;
    padding: 6px 10px !important;
    background: var(--d2-tint) !important;
    color: var(--d2-accent) !important;
    font-size: 13px !important;
    margin-bottom: 14px !important;
}

/* Sections: a heading, then the content filling the column. The teal rule
   under every heading goes; sections are separated by space and a line. */
body.et-public-studio.et-public-site .kb-section {
    margin: 0 0 48px !important;
}
body.et-public-studio.et-public-site .kb-section + .kb-section {
    padding-top: 40px;
    border-top: 1px solid var(--d2-line);
}
body.et-public-studio.et-public-site :is(.kb-section > h2, .kb-section > h3:first-child, .et-public-content-section .container > h2, .et-public-legal-section .container > h2) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 24px !important;
    line-height: 1.25;
    font-weight: 700 !important;
    color: var(--d2-strong) !important;
}
body.et-public-studio.et-public-site .kb-section > h2 > i.bi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--d2-tint);
    color: var(--d2-accent) !important;
    font-size: 16px;
    margin: 0 !important;
}
body.et-public-studio.et-public-site #main-content h2:not(.et-mono):not(.h6):not(.h5):not(.visually-hidden) {
    font-weight: 700;
}
body.et-public-studio.et-public-site .kb-section .kb-card,
body.et-public-studio.et-public-site .kb-section > .et-card {
    padding: 24px 28px !important;
}
/* Prose fills the card: a 34em cap left the right half of every card empty. */
body.et-public-studio.et-public-site :is(.kb-card, .kb-section, .et-public-content-section, .et-public-legal-section) :is(p, ul, ol, .prose-text) {
    max-width: none !important;
}
body.et-public-studio.et-public-site .kb-card :is(p, li) { color: var(--d2-text); }
body.et-public-studio.et-public-site .kb-card > :last-child { margin-bottom: 0 !important; }
body.et-public-studio.et-public-site .kb-tip {
    background: var(--d2-tint) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 2px 0 0 var(--d2-accent) !important;
    color: var(--d2-text) !important;
}

/* Tables on the long pages: header row on the card tone, rows divided by a
   line, the first column as the row label. */
body.et-public-studio.et-public-site #main-content table { border-collapse: collapse; width: 100%; }
body.et-public-studio.et-public-site #main-content thead th {
    background: var(--d2-card) !important;
    color: var(--d2-strong) !important;
    font-size: 13px;
    font-weight: 600;
}
body.et-public-studio.et-public-site #main-content :is(th, td) {
    border-color: var(--d2-line) !important;
    padding: 12px 14px !important;
    vertical-align: top;
}

/* Pages with a contents sidebar (best AI models, edit a book, how to edit)
   need room for it: a wider column, the sidebar and content side by side. */
body.et-public-studio.et-public-site:not(.et-page-guides):not(.et-page-writing-tips) :is(.et-public-content-section, .et-public-content-section--md) > .container:has(.kb-nav) {
    max-width: 1148px !important;
}
/* The 34em cap (public-pages.css) on card paragraphs left half of each card
   empty once cards span the column. */
body.et-public-studio.et-public-site :is(.dl-req, .dl-features, .dl-card > p, .et-card > p, .text-prose-sm) { max-width: none !important; }

/* Bootstrap's grey-blue table fill, replaced with the card tones. */
body.et-public-studio.et-public-site #main-content .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: var(--d2-card-2);
    --bs-table-color: var(--d2-text);
    --bs-table-border-color: var(--d2-line);
    color: var(--d2-text);
}
body.et-public-studio.et-public-site #main-content .table > :not(caption) > * > * { background-color: transparent !important; color: var(--d2-text); }
body.et-public-studio.et-public-site #main-content .table th { color: var(--d2-strong) !important; }

/* Guide and news articles: the serif body set at a reading measure (it ran
   ~110 characters a line across the article column). */
body.et-public-studio.et-public-site :is(.blog-content, .et-article-body) :is(p, li) { font-size: 18px !important; line-height: 1.75 !important; }
body.et-public-studio.et-public-site :is(.blog-content, .et-article-body) :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: 760px !important; }
body.et-public-studio.et-public-site :is(.blog-content, .et-article-body) .et-signup-bridge { max-width: 760px !important; }

/* Step cards read left-aligned like every other card. */
body.et-public-studio.et-public-site :is(.step-card, .step-card *, .export-item, .genre-item, .depth-card, .ab-stat, .ab-stat *) { text-align: left !important; }
body.et-public-studio.et-public-site .step-card .step-num { margin-left: 0 !important; margin-right: 0 !important; }

@media (max-width: 700px) {
    body.et-public-studio.et-public-site .kb-section .kb-card,
    body.et-public-studio.et-public-site .kb-section > .et-card { padding: 18px 16px !important; }
    body.et-public-studio.et-public-site .kb-card :is(.step-card, .export-item, .genre-item, .depth-card) { padding-left: 0 !important; padding-right: 0 !important; }
    body.et-public-studio.et-public-site .kb-section > h2 { font-size: 20px !important; }
    body.et-public-studio.et-public-site :is(.et-public-content-section, .et-public-content-section--md, .et-public-legal-section) { padding: 24px 0 48px !important; }
}

/* A page with a contents sidebar: its hero takes the same wider column, so
   the hero and the sidebar start on the same edge. */
body.et-public-studio.et-public-site:has(.kb-nav):not(.et-page-writing-tips) .et-public-page-hero > .container { max-width: 1148px !important; }

/* Headings at one weight scale: h2 bold, h3/h4 semibold, whatever utility
   size class they carry (featured-on's h2.h5 and the KDP steps were 400). */
body.et-public-studio.et-public-site #main-content h2:not(.et-mono):not(.visually-hidden) { font-weight: 700 !important; }
body.et-public-studio.et-public-site #main-content :is(h3, h4):not(.et-mono) { font-weight: 600 !important; }

/* Hero badges in every hero shape are the tinted chip. */
body.et-public-studio.et-public-site #main-content p.et-badge,
body.et-public-studio.et-public-site #main-content .container > .et-badge:first-child {
    display: inline-flex;
    padding: 6px 10px !important;
    background: var(--d2-tint) !important;
    color: var(--d2-accent) !important;
    font-size: 13px !important;
}
body.et-public-studio.et-public-site .text-lead { max-width: none !important; }

/* Info boxes: Bootstrap's blue was the one colour off the palette. */
body.et-public-studio.et-public-site :is(.alert-info, .et-alert-info) {
    background: var(--d2-card-2) !important;
    border: 0 !important;
    box-shadow: inset 2px 0 0 var(--d2-accent) !important;
    color: var(--d2-text) !important;
}
body.et-public-studio.et-public-site :is(.alert-info, .et-alert-info) :is(strong, b, a, .bi, p, span) { color: inherit !important; }
body.et-public-studio.et-public-site :is(.alert-info, .et-alert-info) :is(strong, b) { color: var(--d2-strong) !important; }
body.et-public-studio.et-public-site :is(.alert-info, .et-alert-info) .bi { color: var(--d2-accent) !important; }
body.et-public-studio.et-public-site :is(.alert-warning, .et-alert-warning) {
    background: #241C0E !important;
    border: 0 !important;
    box-shadow: inset 2px 0 0 #F5B454 !important;
    color: #F4E3C3 !important;
}

/* ── Tools hub ───────────────────────────────────────────────────────────── */
body.et-public-studio.et-public-site .et-tools-hero { padding: 40px 0 8px !important; background: transparent !important; }
body.et-public-studio.et-public-site .et-tools-hero__copy { max-width: 880px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px !important; }
body.et-public-studio.et-public-site .et-tools-hero__copy > * { margin: 0 !important; }
body.et-public-studio.et-public-site .et-tools-hero__copy .et-badge { align-self: flex-start; }
body.et-public-studio.et-public-site .et-tools-hero__title { font-size: clamp(32px, 3.6vw, 44px) !important; line-height: 1.1; font-weight: 700; }
body.et-public-studio.et-public-site .et-tools-hero__intro { max-width: 760px !important; font-size: 17px !important; line-height: 1.6; color: var(--d2-soft) !important; }
body.et-public-studio.et-public-site :is(.et-tools-hero__body, .et-tools-hero__note) { max-width: 760px !important; font-size: 14px !important; line-height: 1.6; color: var(--d2-muted) !important; }
body.et-public-studio.et-public-site .et-tools-hero__more { display: flex; flex-direction: column; gap: 8px; }
body.et-public-studio.et-public-site .et-tools-featured { background: var(--d2-tint) !important; box-shadow: inset 2px 0 0 var(--d2-accent) !important; padding: 24px 28px !important; }
body.et-public-studio.et-public-site .et-tools-featured h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--d2-strong); }
body.et-public-studio.et-public-site .et-tools-featured .et-badge-success {
    background: transparent !important;
    padding: 0 !important;
    color: var(--d2-accent) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}
body.et-public-studio.et-public-site .et-tools-featured .btn-lg.w-100 { width: auto !important; padding: 12px 22px !important; font-size: 15px !important; }
body.et-public-studio.et-public-site .et-tools-quick-strip {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 6px 4px;
}
body.et-public-studio.et-public-site .et-tools-quick-strip__link {
    padding: 8px 12px !important;
    background: var(--d2-card) !important;
    box-shadow: none !important;
    color: var(--d2-text) !important;
    font-size: 14px;
    font-weight: 500 !important;
}
body.et-public-studio.et-public-site .et-tools-quick-strip__link:hover { background: var(--d2-card-2) !important; color: var(--d2-strong) !important; }
body.et-public-studio.et-public-site .et-tool-card::before { display: none !important; }
body.et-public-studio.et-public-site .et-tool-card { box-shadow: none !important; }
body.et-public-studio.et-public-site .et-tool-card:hover { box-shadow: inset 2px 0 0 var(--d2-accent) !important; }
body.et-public-studio.et-public-site .et-tool-card :is(.et-tool-card-icon, .et-tool-card__icon) {
    background: var(--d2-tint) !important;
    box-shadow: none !important;
    color: var(--d2-accent) !important;
}
body.et-public-studio.et-public-site .et-tools-cat-section > h3,
body.et-public-studio.et-public-site .et-tools-cat-section h2 { font-size: 18px !important; font-weight: 700 !important; }

/* ── Tool page ───────────────────────────────────────────────────────────
 * The hero's right half was empty; the "Fixing a whole draft?" card sits
 * there now. The about/FAQ band and its CTA box become rows on the page,
 * and comments line up with the page instead of a centred column. */
@media (min-width: 1100px) {
    body.et-public-studio.et-public-site .et-tool-page-hero > .container:has(> .et-signup-bridge) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 56px;
        align-items: start;
    }
    /* Subjects named, not `> *`: a :has() above an unnamed subject is tried on
       every element (tests/js/css-has-subject.test.js). */
    body.et-public-studio.et-public-site .et-tool-page-hero > .container:has(> .et-signup-bridge) > :is(.et-breadcrumb, .et-tool-page-hero__inner, .et-tool-page-hero__links) { grid-column: 1; }
    body.et-public-studio.et-public-site .et-tool-page-hero > .container:has(> .et-signup-bridge) > .et-signup-bridge {
        grid-column: 2;
        grid-row: 2 / span 3;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px;
        max-width: none !important;
        margin: 0 !important;
    }
    body.et-public-studio.et-public-site .et-tool-page-hero > .container > .et-signup-bridge > :is(.et-signup-bridge__text, .et-signup-bridge__action) { width: 100%; max-width: none !important; flex: none !important; }
    body.et-public-studio.et-public-site .et-tool-page-hero > .container:has(> .et-signup-bridge) > .et-signup-bridge { align-self: start; }
}
body.et-public-studio.et-public-site .et-tool-page-title { font-weight: 700 !important; }
body.et-public-studio.et-public-site .et-tool-page-title__icon { background: var(--d2-tint) !important; box-shadow: none !important; color: var(--d2-accent) !important; }
body.et-public-studio.et-public-site .et-tool-page-lead { color: var(--d2-soft) !important; font-size: 17px !important; line-height: 1.6; max-width: 720px; }
body.et-public-studio.et-public-site .et-tool-page-meta__pill { color: var(--d2-muted) !important; font-size: 13px; }
body.et-public-studio.et-public-site .et-tool-related__title {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--d2-muted) !important;
}
body.et-public-studio.et-public-site .et-tool-page-learn {
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid var(--d2-line);
    padding: 48px 0 !important;
}
body.et-public-studio.et-public-site .et-tool-learn { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
body.et-public-studio.et-public-site .et-tool-learn-acc {
    background: var(--d2-card) !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 0 2px !important;
}
body.et-public-studio.et-public-site .et-tool-learn-acc[open] { background: var(--d2-card-2) !important; box-shadow: inset 2px 0 0 var(--d2-accent) !important; }
body.et-public-studio.et-public-site .et-tool-learn-acc__summary { padding: 16px 20px !important; }
body.et-public-studio.et-public-site .et-tool-learn-acc__summary .et-tool-learn__title { font-size: 17px !important; font-weight: 600 !important; margin: 0 !important; }
body.et-public-studio.et-public-site .et-tool-learn__footer {
    background: transparent !important;
    box-shadow: none !important;
    padding: 24px 0 0 !important;
    margin: 0 !important;
}
body.et-public-studio.et-public-site .et-tool-learn__footer a:not(.btn) { font-size: 14px; }
body.et-public-studio.et-public-site .et-tool-page-comments { border-top: 1px solid var(--d2-line); }
body.et-public-studio.et-public-site .et-tool-page-comments .et-cc__inner {
    max-width: 760px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.et-public-site .et-navbar .et-navbar-nav > .nav-item > .nav-link::before { transition: none; }
}