/* =============================================================================
   EnterraHost — enterrahost.css
   =============================================================================
   Site-specific layer. Loads AFTER enterra-theme.css and only adds what the
   Enterramon theme does not already provide (hero, domain search, plan cards,
   FAQ, footer bar).

   Rules:
   * Uses the exact CSS custom properties from enterra-theme.css. No new
     color, spacing or radius values are invented here.
   * Every class is prefixed `eh-` so it can never collide with a theme class.
   * Layout/utility work is delegated to the theme (.flex-grid, .gc-3, .p-8,
     .gap-6, .items-center, .max-w-container, .btn, .card-glass, ...).
   ============================================================================= */

/* --- Body copy -------------------------------------------------------------
   The theme paints p and li with --color-on-surface-variant, the SAME token used
   for hints, labels and captions, which is why ordinary paragraphs read as
   secondary text. Body copy gets its own token so it can be lifted without
   dragging the genuinely secondary text up with it.

   Contrast against --color-surface: 13.6:1 dark and 9.4:1 light, both past AAA. */
:root {
    --color-body: #d4d4d8;
}

html[data-theme="light"] {
    --color-body: #3f3f46;
}

/* --- Page frame: the theme header is position:fixed, so reserve its height -- */
/* Overrides the theme's `p, li` rule, which sets weight 300 at 1rem in the
   secondary colour. Same specificity, so load order decides and this wins. */
p,
li {
    color: var(--color-body);
    /* 16.5px. The theme's 1rem read a touch small and 17px read a touch large,
       so this sits between them. The colour above is what actually fixed
       readability, so the size only needed to move slightly. */
    font-size: 1.03125rem;
}

body {
    padding-top: 4.5rem;
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The header is fixed, so an in-page jump landed the target's own heading behind
   it. /domains/#tlds, #pricing and #domains each lost their first 76px, which is
   exactly the heading the anchor exists to show. scroll-padding-top moves every
   anchor jump down by the header height plus a little air, and it is derived
   from the same 4.5rem the frame above reserves so the two cannot drift apart.
   Measured at 79px on a 390px viewport, so the air covers mobile too. */
html {
    scroll-padding-top: calc(4.5rem + var(--space-6));
}

/* Buttons do NOT inherit `color` by default — they use the UA `buttontext`
   system color. The Enterramon reset sets `font: inherit` on <button> but
   never `color: inherit`, so with <meta name="color-scheme" content="dark light">
   that system color resolves to WHITE, which makes .icon-btn (the theme
   toggle and the burger) invisible on a light-theme header until hover, where
   .icon-btn:hover sets the color explicitly. Restore inheritance. */
button {
    color: inherit;
}

/* Match UA-rendered widgets (scrollbars, form controls, focus rings) to the
   theme the user has actually chosen, rather than to the OS preference. */
html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

/* The theme's faintest text token is too light to read.
   --color-on-surface-inverse ships as #6e6e6e on the dark ground and #a4a4a4 on
   the light one. On the light surface that is 2.3:1 against #f6f6f6, and an
   EnterraMon audit flagged it as a serious WCAG failure across 20 nodes, which
   is most of why accessibility scored 61.

   Raised HERE rather than in the theme, so a rebuild from build-theme.py cannot
   quietly put it back. Both values clear AA (4.5:1) with margin:
       dark   #8a8a8a on #050505   5.90:1
       light  #6b6b6b on #f6f6f6   4.85:1
   Both also stay a visible step lighter than --color-on-surface-variant, so the
   hierarchy the design leans on survives. This replaces an earlier one-off token
   that held these same two values for a single class; raising the real token
   fixes every class at once instead. */
:root {
    --color-on-surface-inverse: #8a8a8a;
}

html[data-theme="light"] {
    --color-on-surface-inverse: #6b6b6b;
}

::selection {
    background: var(--color-primary);
    color: var(--color-btn-primary-fg);
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.eh-skip {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 10100;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-btn-primary-fg);
    font-weight: 600;
    transition: top .2s ease;
}

.eh-skip:focus {
    top: var(--space-4);
}

.eh-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Sections ------------------------------------------------------------- */
.eh-section {
    position: relative;
    padding: var(--space-20) 0;
}

.eh-section--tight {
    padding-top: 0;
}

.eh-head {
    margin-bottom: var(--space-12);
}

.eh-head--center {
    text-align: center;
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

.eh-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-on-surface-inverse);
}

.eh-lede {
    color: var(--color-body);
    font-size: 1.1rem;
    line-height: 1.65;
}

/* --- Hero ----------------------------------------------------------------- */
.eh-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-20) 0 var(--space-12);
}

/* Interior pages open with a search or a heading rather than the full landing
   pitch, so they need less air above the fold. */
.eh-hero--compact {
    padding: var(--space-12) 0 var(--space-8);
}

/* The homepage hero is only the headline, the lede and the call to action, since
   the domain search moved into its own section below. It takes more air under it
   so the location strip reads as a deliberate band rather than a crowded edge.
   Kept as a modifier so the interior heroes, which still hold a search, are not
   stretched with it. */
.eh-hero--roomy {
    padding-bottom: var(--space-16);
}

/* Stacking context for the hero content so it sits above .blur-decal.
   Kept as classes rather than style="" attributes so the page can ship a
   Content-Security-Policy with style-src 'self' and no 'unsafe-inline'. */
.eh-hero-inner {
    position: relative;
    z-index: 1;
}

.eh-hero-decal {
    top: -8rem;
    left: -6rem;
}

.eh-hero h1 {
    margin: var(--space-6) 0 var(--space-5);
    max-width: 18ch;
}

.eh-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: .35rem var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-glow);
    background: var(--glass);
    font-size: .78rem;
    color: var(--color-on-surface-variant);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.eh-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-dim);
}

.eh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* On a handset the hero reads as a centred column, so the status pill centres
   with it. Left-aligned it looked stranded beside the headline. */
@media (max-width: 768px) {
    .eh-hero .eh-pill {
        display: flex;
        width: fit-content;
        margin-inline: auto;
        justify-content: center;
        text-align: center;
    }

    /* The hero CTAs wrapped as 1 + 2 + 1 on a handset, which left EnterraSEO
       stranded on a line of its own beside two half-width siblings. Going
       full-width and stacking gives one clean column of equal buttons instead
       of a ragged cluster. */
    .eh-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .eh-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.eh-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-8);
    font-size: .82rem;
    color: var(--color-on-surface-inverse);
    list-style: none;
    margin-left: 0;
}

.eh-trust li {
    display: flex;
    align-items: center;
    gap: .42rem;
}

.eh-tick {
    color: var(--color-primary);
    font-weight: 700;
}

/* --- Domain search -------------------------------------------------------- */
.eh-dsearch {
    margin-top: var(--space-10);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* In the domains section the heading already supplies the gap, so the search must
   not stack the hero's top margin on top of it. Only the placement differs, the
   card itself is the same component as the one in the interior heroes. */
.eh-dsearch--section {
    margin-top: 0;
}

.eh-dsearch-row {
    display: flex;
    gap: var(--space-2);
}

.eh-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-5);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* The resting border is already the brightest colour the theme has, so focus can
   no longer be signalled by making it brighter. The outline does that job, and
   it sits outside the border so it stays visible against the glass card. The
   global :focus-visible rule cannot cover this, because .eh-field input sets
   outline none and the ring has to wrap the whole pill rather than the input. */
.eh-field:focus-within {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--color-primary-dim);
}

.eh-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    outline: none;
    font-size: 1rem;
    color: var(--color-on-surface);
}

.eh-field input::placeholder {
    color: var(--color-on-surface-inverse);
}

/* Helper text under a form or a table. Secondary, but it is still a sentence the
   visitor is meant to read, so it has to clear AA rather than merely look quiet.
   The 500 weight is what lets it sit at this color without the stems thinning
   out at .8rem. */
.eh-hint {
    margin-top: var(--space-3);
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-on-surface-inverse);
}

/* The footnote under a block of prices. It keeps the .eh-hint color and weight
   so it reads like every other explanatory line, and only changes the rhythm,
   because it follows a card grid or a table rather than a form field. Centred
   to sit under the plan and comparison blocks, which are centred themselves. */
.eh-price-note {
    margin-top: var(--space-5);
    text-align: center;
}

.eh-error {
    margin-top: var(--space-3);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.eh-tlds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    list-style: none;
}

.eh-tld {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .4rem var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-surface-variant);
    font-size: .8rem;
    color: var(--color-on-surface-variant);
    transition: border-color .18s ease, color .18s ease;
}

.eh-tld:hover {
    border-color: var(--color-primary);
    color: var(--color-on-surface);
}

.eh-tld b {
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--color-on-surface);
}

.eh-tld--hot {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
}

/* --- Region strip --------------------------------------------------------- */
.eh-strip {
    border-top: 1px solid var(--color-surface-variant);
    border-bottom: 1px solid var(--color-surface-variant);
    background: var(--color-surface-elevated);
    padding: var(--space-5) 0;
}

.eh-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-8);
}

.eh-strip-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    color: var(--color-on-surface-variant);
}

.eh-strip-item b {
    color: var(--color-on-surface);
    font-family: var(--font-headline);
    font-weight: 800;
}

.eh-flag {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-on-surface-inverse);
}

/* --- Product cards (on top of the theme's .card-glass) -------------------- */
.eh-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eh-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-btn-primary-fg);
}

.eh-card p {
    color: var(--color-body);
    font-size: .92rem;
}

.eh-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: var(--space-5);
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.eh-more::after {
    content: "\2192";
    transition: transform .22s ease;
}

.eh-card:hover .eh-more::after {
    transform: translateX(4px);
}

/* Badge ("Popular" / "Best value").
   .eh-card and .eh-plan are flex columns, so a badge left in the flow becomes
   a flex item and stretches to the full card width. Taking it out of the flow
   into the top-right corner also keeps the card icons aligned across the row,
   which an in-flow badge breaks by pushing its own icon down. */
.eh-card,
.eh-plan {
    position: relative;
}

/* The muted variant, for a badge that flags availability rather than merit
   ("Coming soon" on the hosting plans). Same geometry as .eh-badge so the two
   line up when they appear together, but no glow: it is information, not a
   recommendation. */
.eh-badge--soon {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-on-surface-variant);
    box-shadow: none;
}

.eh-badge {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .34rem .62rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary);
    background: var(--color-primary-dim);
    color: var(--color-on-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Cards drop to --space-4 padding below 768px (the theme's .p-8 override),
   so the badge inset follows to stay aligned with the content box. */
@media (max-width: 768px) {
    .eh-badge {
        top: var(--space-4);
        right: var(--space-4);
    }
}

/* --- Icons ---------------------------------------------------------------
   Inline SVG sprite, not Unicode glyphs. The chips previously held characters
   like ◎ ▤ ✉ ◇ ▣ ◉ ☼ ⇄ ⋆ — they rendered at inconsistent weights and sizes,
   fell back to whatever font had the codepoint, and the feature chips used real
   emoji (⚡ 🛡 ☎) which render in COLOR on macOS and break the monochrome
   palette outright.

   Paint is set here rather than on the <symbol>s. fill/stroke are inherited
   properties, so they cascade into the <use> shadow tree and every icon themes
   from one rule. */
.eh-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.eh-icon {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eh-card-icon .eh-icon {
    width: 24px;
    height: 24px;
}

.eh-feature-icon .eh-icon {
    width: 20px;
    height: 20px;
}

.eh-dd-icon .eh-icon {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

/* The burger sits on a 17px glyph baseline; the icon needs the button's own
   color, which .icon-btn already sets. */
.eh-burger .eh-icon {
    width: 19px;
    height: 19px;
}

/* --- Product marks (real logos for individual products) -------------------
   Each product mark ships as a light/dark pair, used as a real <img> with the
   `src` holding the dark-theme artwork and a `content` swap for light theme.

   The two chips a mark can sit in invert in OPPOSITE directions:
     .eh-card-icon  light gradient in dark theme -> BLACK artwork
     .eh-dd-icon    dark translucent wash        -> WHITE artwork
   so the swap is keyed on both the context and the product. The product
   modifier matters: without it, the SEO swap would repaint the EnterraMon mark
   in light theme (and vice versa). */
.eh-product-mark {
    display: block;
    width: auto;
}

.eh-card-icon .eh-product-mark {
    height: 26px;
}

.eh-dd-icon .eh-product-mark {
    height: 18px;
}

/* EnterraSEO */
html[data-theme="light"] .eh-card-icon .eh-product-mark--seo {
    content: url(../img/seo-white.webp);
}

html[data-theme="light"] .eh-dd-icon .eh-product-mark--seo {
    content: url(../img/seo-black.webp);
}

/* EnterraMon */
html[data-theme="light"] .eh-card-icon .eh-product-mark--mon {
    content: url(../img/mon-white.webp);
}

html[data-theme="light"] .eh-dd-icon .eh-product-mark--mon {
    content: url(../img/mon-black.webp);
}

/* --- Plan comparison table ------------------------------------------------
   The theme's .enterra-table is built for the Enterramon DNS/ping result
   tables, which have THREE columns: a sequence label pinned to width:1% with
   white-space:nowrap, then two value columns split 50/50 and right-aligned.
   There is no rule for a 4th column at all.

   A four-column plan comparison inherits every bit of that and comes out
   wrong: the feature label squeezed, the plan values floating to the right of
   oversized columns, and the last plan column left unstyled and misaligned.

   This modifier restores ordinary table behavior. It is scoped to .eh-compare
   so the theme's own tool tables are untouched, and the doubled class is
   deliberate: the theme's rules are .enterra-table th:nth-child(n) at (0,2,1),
   so a single-class override would lose on specificity. */
.enterra-table.eh-compare th,
.enterra-table.eh-compare td {
    width: auto;
    text-align: center;
    white-space: normal;
}

.enterra-table.eh-compare th:first-child,
.enterra-table.eh-compare td:first-child {
    width: 40%;
    text-align: left;
}

/* Nudge the three plan columns to equal width. Auto table layout still gets
   the final say, so a long value widens its own column rather than wrapping
   awkwardly — but without this they come out visibly uneven, because "1" and
   "Unlimited" are very different widths. */
.enterra-table.eh-compare th:nth-child(n+2),
.enterra-table.eh-compare td:nth-child(n+2) {
    width: 20%;
}

/* Four columns get unreadable on a phone. Rather than leave it to a horizontal
   scroll the user may not notice, tighten the type and padding so all four fit
   down to ~360px. The container can still scroll as a last resort. */
@media (max-width: 560px) {
    .enterra-table.eh-compare table {
        min-width: 0;
        font-size: .78rem;
    }

    .enterra-table.eh-compare th,
    .enterra-table.eh-compare td {
        padding: .5rem .35rem;
    }

    .enterra-table.eh-compare th:first-child,
    .enterra-table.eh-compare td:first-child {
        width: 34%;
    }
}

/* --- Business email --------------------------------------------------------
   Two tiers, each in a 10 GB or 50 GB mailbox — so storage is NOT what
   separates them. The tier cards therefore price the two mailbox sizes
   inline rather than splitting into four near-identical cards, which keeps
   the Lite-vs-Pro feature difference as the thing you actually compare. */
.eh-tier-blurb {
    font-size: .9rem;
    margin-top: var(--space-2);
}

.eh-mail-prices {
    margin: var(--space-6) 0 var(--space-2);
    border-top: 1px solid var(--color-surface-variant);
}

/* EACH SIZE IS ITS OWN CHOICE, AND IT HAS TO LOOK LIKE ONE.
   -----------------------------------------------------------------
   The card lists 10 GB and 50 GB with their prices, and then offers a single
   "Choose Lite" button that always opened on 10 GB. So the natural gesture —
   click the price you want — did nothing at all, and the 50 GB option was
   reachable only by opening the dialog and noticing the pickers inside it. The
   owner asked "how do we add a lite and pro mailbox?" for exactly this reason.

   These rows are now BUTTONS: one per size, each opening the dialog on that
   size. The `.eh-mail-price` class stays on the button so every existing rule and
   every price hook (`data-mb-monthly` / `data-mb-annual`) keeps working.

   `width: 100%` and the reset below are what make a <button> lay out identically
   to the <div> it replaced — a button has its own font, padding and alignment
   unless they are cleared, and leaving them would shift the whole price column. */
.eh-mail-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: .7rem 0;
    border: 0;
    border-bottom: 1px solid var(--color-surface-variant);
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, padding-inline .15s ease;
}

/* THE AFFORDANCE. A row that responds to the pointer says so, and the chevron
   appears on hover rather than sitting there permanently — the card should read
   as a price list first and a control second. */
.eh-mail-price:hover,
.eh-mail-price:focus-visible {
    background-color: var(--color-surface-variant);
    padding-inline: var(--space-3);
}

.eh-mail-price::after {
    content: '';
    flex: none;
    width: .45rem;
    height: .45rem;
    margin-left: var(--space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .15s ease;
}

.eh-mail-price:hover::after,
.eh-mail-price:focus-visible::after {
    opacity: .7;
}

/* The price column keeps its own right edge while the row's padding animates. */
.eh-mail-price .eh-mail-fig {
    margin-left: auto;
}

.eh-mail-size {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-on-surface-variant);
}

.eh-mail-fig {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
    text-align: right;
}

.eh-mail-amount {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
}

.eh-mail-amount .eh-cur {
    font-size: .95rem;
    font-weight: 700;
}

.eh-mail-amount .eh-amount {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -.03em;
}

/* Unit labels ("/mailbox/mo", "/yr", "/mo"). These were on the faintest text
   token at weight 400, which at .74rem made the unit the hardest thing on the
   page to read. The unit is subordinate to the amount, but subordinate is not
   the same as illegible: on-surface-variant puts it level with the status tag
   and one step down from the price, which is the intent. */
.eh-mail-amount .eh-per,
.eh-price .eh-per,
.eh-dom-per {
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

.eh-mail-amount .eh-per {
    font-size: .76rem;
}

/* What twelve monthly payments would have cost, struck through beneath the
   annual amount. Hidden on the monthly term, and taken out of flow so the
   figure column does not reserve a blank row for it. */
.eh-equiv {
    font-size: .74rem;
    line-height: 1.3;
    color: var(--color-on-surface-inverse);
}

.eh-equiv s {
    font-weight: 600;
    text-decoration: line-through;
    color: var(--color-on-surface-variant);
}

.eh-annual-only {
    display: none;
}

[data-billing="annual"] .eh-annual-only {
    display: block;
}

.eh-mail-upgrade {
    margin-top: var(--space-6);
    text-align: center;
    font-size: .88rem;
    color: var(--color-on-surface-variant);
}

/* The long "included with every mailbox" list. Auto-fit columns so it reflows
   from four columns to one without a breakpoint per step. */
.eh-includes {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-surface-variant);
}

.eh-includes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: .6rem var(--space-6);
    margin: var(--space-5) 0 0;
    list-style: none;
}

.eh-includes-list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .86rem;
    color: var(--color-body);
}

.eh-includes-list li::before {
    content: "\2713";
    flex: none;
    font-weight: 700;
    color: var(--color-primary);
}

.eh-mail-security {
    margin-top: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-surface-variant);
}

.eh-mail-more {
    margin-top: var(--space-8);
    text-align: center;
}

.eh-mail-more a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.eh-mail-more a::after {
    content: "\2192";
    transition: transform .22s var(--ease);
}

.eh-mail-more a:hover::after {
    transform: translateX(4px);
}

/* --- Pricing -------------------------------------------------------------- */
.eh-billing {
    display: inline-flex;
    gap: var(--space-1);
    padding: .28rem;
    margin-bottom: var(--space-8);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-surface-variant);
    background: var(--color-secondary);
}

.eh-billing button {
    padding: .5rem var(--space-4);
    border-radius: var(--radius-full);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    transition: background-color .2s ease, color .2s ease;
}

/* THE PRESSED TAB PAIRS ITS FOREGROUND WITH ITS OWN BACKGROUND.
   -----------------------------------------------------------------
   This read `background: var(--color-primary); color: var(--color-white)` — the
   same defect as `.btn-primary` had, on a control nobody re-checked when that one
   was fixed. `--color-primary` and `--color-white` FLIP IN OPPOSITE DIRECTIONS
   between themes (#ffffff/#050505 in dark, #0a0a0a/#ffffff in light), so the
   pairing is only legible while the two happen to agree. The owner reported
   "black on black" on this toggle FOUR TIMES while I measured the inactive tab,
   which was never the broken half.

   `--color-btn-primary-fg` is the token that exists for exactly this: a
   foreground defined per theme to pair with `--color-primary`, whichever way it
   flips. Use it on any surface painted with `--color-primary` — this is the
   second one, and it is the reason the token is named for the pairing rather
   than for the button. */
.eh-billing button[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-btn-primary-fg);
}

/* AND THE HOVER MUST NOT DELETE THE GROUND.
   -----------------------------------------------------------------
   The theme carries a blunt `button:hover { background-color:
   var(--color-secondary) !important; }`. On a pressed tab that REPLACES the
   primary background with the surface colour and leaves the foreground paired
   with the background it no longer has — measured at 1.14:1, i.e. invisible.
   A hover state may change the ground; it must never remove it and leave the
   text sitting on something it was not chosen for.

   `!important` is needed here for the same reason the theme used it: this is the
   override of an override, and it must win in every state. */
.eh-billing button[aria-pressed="true"]:hover,
.eh-billing button[aria-pressed="true"]:focus-visible,
.eh-seg button[aria-pressed="true"]:hover,
.eh-seg button[aria-pressed="true"]:focus-visible {
    background: var(--color-primary) !important;
    color: var(--color-btn-primary-fg) !important;
}

/* The segmented control on the domain search reuses this shape but not the
   class, so it needs the same pairing explicitly — see the note above
   `.eh-searchopts` for why it is a separate class. */
.eh-searchopts button[aria-pressed="true"],
.eh-seg button[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-btn-primary-fg);
}

.eh-save {
    font-size: .72rem;
    opacity: .75;
}

.eh-plan {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eh-plan--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary) inset;
}

.eh-plan-name {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.1rem;
}

.eh-price {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin: var(--space-4) 0 var(--space-1);
}

.eh-price .eh-amount {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -.04em;
}

.eh-price .eh-cur {
    font-size: 1.1rem;
    font-weight: 700;
    align-self: flex-start;
    margin-top: .35rem;
}

.eh-price .eh-per {
    font-size: .85rem;
}

.eh-plan-note {
    font-size: .78rem;
    color: var(--color-on-surface-inverse);
    min-height: 1.1rem;
}

.eh-plan-list {
    display: grid;
    gap: .6rem;
    margin: var(--space-6) 0;
    list-style: none;
}

.eh-plan-list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--color-body);
}

.eh-plan-list li::before {
    content: "\2713";
    color: var(--color-primary);
    font-weight: 700;
    flex: none;
}

.eh-plan .btn {
    margin-top: auto;
}

/* --- Features and stats --------------------------------------------------- */
.eh-feature {
    display: flex;
    gap: var(--space-4);
}

.eh-feature-icon {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--color-primary-dim);
    border: 1px solid var(--color-surface-variant);
    font-size: .9rem;
}

.eh-feature h3 {
    font-size: 1rem;
    margin-bottom: .3rem;
}

.eh-feature p {
    font-size: .87rem;
    color: var(--color-body);
}

.eh-stat {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.eh-stat b {
    display: block;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.04em;
}

.eh-stat span {
    font-size: .8rem;
    color: var(--color-on-surface-inverse);
}

/* --- FAQ: native <details>, zero JS, crawlable ---------------------------- */
/* A heading that separates one product's questions from the next inside a
   single FAQ list. Reuses the eyebrow treatment rather than inventing a style,
   so a group label reads as the same kind of label as "Questions" above it.
   The list keeps its top border; each group after the first opens a new list,
   so the rule between groups is the list's own top border and nothing extra. */
.eh-faq-group {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-surface-variant);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-on-surface-inverse);
}

/* The first group sits directly under the section head, so it needs no rule of
   its own and no extra space above it. */
.eh-faq-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.eh-faq {
    border-top: 1px solid var(--color-surface-variant);
}

.eh-faq details {
    border-bottom: 1px solid var(--color-surface-variant);
}

.eh-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -.01em;
}

.eh-faq summary::-webkit-details-marker {
    display: none;
}

.eh-faq summary::after {
    content: "+";
    flex: none;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-on-surface-inverse);
    transition: transform .25s ease;
}

.eh-faq details[open] summary::after {
    transform: rotate(45deg);
    color: var(--color-on-surface);
}

.eh-answer {
    padding-bottom: var(--space-5);
    color: var(--color-on-surface-variant);
    font-size: .94rem;
    max-width: 75ch;
}

/* --- CTA ------------------------------------------------------------------ */
.eh-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(3rem, 7vw, 5rem) var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-brd);
    background: var(--glass-2);
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.eh-cta .eh-lede {
    max-width: 40rem;
    margin: var(--space-4) auto var(--space-8);
}

/* Buttons need air above them. Several calls to action put a lede or a trust
   list straight above this, and with no margin the buttons sat directly on the
   last line of it. */
.eh-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-8);
}

/* Inside a CENTERED call to action the trust list reads as one ragged run,
   because a centered flex row leaves uneven gaps once the items differ in width.
   A centered two-by-two grid gives them even columns and a consistent rhythm.
   Scoped to .eh-cta on purpose: the hero uses the same list left-aligned in a
   row, where it reads correctly and where a grid would make it taller. */
.eh-cta .eh-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: center;
    gap: var(--space-4) var(--space-8);
    text-align: left;
}

@media (max-width: 640px) {
    .eh-cta .eh-trust {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/* --- Footer extras (theme supplies .footer/.footer-grid/.footer-column) ---- */
.eh-footer-inner {
    width: 100%;
}

/* The Enterramon signature: an oversized brand mark above the link columns.
   Uses the real stacked lockup (mark above the lowercase wordmark). */
.eh-footer-brand {
    display: block;
    margin-bottom: var(--space-10);
}

/* 50% of the original clamp(190px, 26vw, 300px). The Enterramon footer uses a
   very large wordmark, but that was sized for a saturated accent block; on the
   toned-down surface a compact lockup sits better above the link columns. */
.eh-footer-brand .eh-logo {
    width: clamp(95px, 13vw, 150px);
    height: auto;
}

/* The footer is the accent surface, which means a full-width slab of pure
   #ffffff on an otherwise near-black page — blinding at that size. Toned down
   to a soft off-white. Scoped to the footer so --color-primary keeps its
   full-strength value for buttons and chips, where it needs the contrast. */
html {
    --eh-footer-bg: #e3e3e3;
}

html[data-theme="light"] {
    --eh-footer-bg: var(--color-primary);
}

.footer {
    background-color: var(--eh-footer-bg);
}

/* The footer is the one surface that inverts, so its own text colour has to be
   restated for anything carrying a direct colour rule. `p, li` above sets
   --color-body straight onto the element, and a colour on the element beats the
   value it would inherit from .footer however specific .footer is. That left the
   copyright line light grey on the light footer in dark mode and dark grey on
   the dark footer in light mode, around 1.2:1 and 3:1, both unreadable.

   --color-white is the inverted token, #050505 in dark and #ffffff in light, so
   it resolves to exactly the black-on-light and white-on-dark this needs and
   cannot drift from the rest of the footer. */
.footer p,
.footer li {
    color: var(--color-white);
}

/* The theme's .footer-grid is `repeat(4, auto)`, sized for short columns and
   laid out beside a wordmark. Full width here, so spread evenly.
   .footer-grid is only ever used in the footer, so this is safely scoped. */
.footer .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
    width: 100%;
}

.eh-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
    font-size: .8rem;
}

/* The header is translucent glass by default, which assumes dark content behind
   it. The footer is the opposite - a solid white slab in dark mode - so at the
   bottom of the page the near-white header text sat on white and vanished.
   Once the page is scrolled the bar turns solid, so it never depends on what is
   behind it. `is-scrolled` is set by site.js. */
.header.is-scrolled {
    background-color: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* On a handset the copyright and the social row wrap onto two lines, and
   space-between then pushes them to opposite edges instead of stacking them.
   Centre both, so the footer ends as one centred column rather than a stretched
   pair. Scoped to the same breakpoint the rest of the site uses for its phone
   layout. */
@media (max-width: 768px) {
    .eh-footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .eh-footer-bottom nav,
    .eh-footer-bottom .eh-social {
        justify-content: center;
        width: 100%;
    }
}

.eh-footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.eh-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.eh-social a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    color: var(--color-white);
    opacity: .68;
    transition: opacity .18s ease, background-color .18s ease;
}

.eh-social a:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--color-white) 12%, transparent);
}

.eh-social svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    display: block;
}

.eh-footer-lede {
    max-width: 34ch;
    margin-top: var(--space-4);
    font-size: .87rem;
    color: color-mix(in srgb, var(--color-white) 66%, transparent);
}

.footer .footer-title {
    color: color-mix(in srgb, var(--color-white) 55%, transparent);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: var(--font-headline);
    font-weight: 800;
}

/* --- Logo ----------------------------------------------------------------
   Real <img> assets, not a CSS mask. A mask that fails to load renders the
   element as nothing at all, which is indistinguishable from a missing logo;
   an <img> always paints something and degrades visibly.

   One <img> per slot. The theme swap is done with the CSS `content` property
   on the replaced element, so exactly one file is ever downloaded and there
   is no lazy-loading race when the theme is toggled. The `src` in the markup
   is the dark-theme artwork and acts as the fallback if `content` is
   unsupported.

   Header and footer invert in OPPOSITE directions, so the mapping differs:
     header  dark theme -> dark background  -> white artwork
     footer  dark theme -> white accent bg  -> black artwork
   Light theme flips both. */
.eh-logo {
    display: block;
    width: auto;
    height: auto;
}

.eh-brand-mark {
    width: 32px;
    height: 32px;
    flex: none;
}

html[data-theme="light"] .header .eh-brand-mark {
    content: url(../img/mark-black.webp);
}

html[data-theme="light"] .footer .eh-footer-brand .eh-logo {
    content: url(../img/lockup-white.webp);
}

.eh-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: -.02em;
    color: var(--color-on-surface);
}

.footer .eh-brand {
    color: var(--color-white);
}

/* --- Nav links (theme styles .dropdown, not a top-level nav) -------------- */
.eh-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
}

.eh-nav > li > a {
    display: block;
    padding: .5rem .8rem;
    border-radius: var(--radius-full);
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-on-surface-variant);
    transition: color .18s ease, background-color .18s ease;
}

.eh-nav > li > a:hover {
    color: var(--color-on-surface);
    background: var(--color-primary-dim);
}

/* --- Service status indicator --------------------------------------------
   Sits beside the Support nav item and links to the status page.

   This is the one place the palette leaves monochrome, and it does so on
   purpose. Green, amber and red are the entire point of a status badge and a
   visitor has to read it at a glance, so the usual traffic light is used here
   and nowhere else. Keep it that way.

   Colour is never the only signal. The label changes with the state, Status,
   Issues or Outage, the accessible name and the tooltip both spell the state
   out, and the dot keeps its slow radiating pulse, which stops under
   prefers-reduced-motion via the theme's global rule. A visitor who cannot
   separate the hues still gets the whole answer in words.

   $ehStatusState in inc/header.php is the single place the state is set. */
.eh-nav > li > a.eh-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background-color: var(--eh-tint, transparent);
    color: color-mix(in srgb, var(--eh-dot, var(--color-on-surface)) 55%, var(--color-on-surface));
}

/* Deepen the tint on hover rather than changing the hue, so the state never
   shifts under the pointer. Higher specificity than the bare nav hover rule,
   which would otherwise repaint this with the neutral primary wash. */
.eh-nav > li > a.eh-status:hover {
    background-color: var(--eh-tint, var(--color-primary-dim));
}

/* Deliberately no wash for the mobile panel. A full-width tint there reads as
   a selected row rather than as a status, so the phone gets the coloured dot
   and the changed label and no background. */
.mb-dropdown-menu a.eh-status {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Every other row in the mobile panel is bare text, so a leading dot would
   shunt the label out of the list's left alignment. Pull the dot back into the
   gutter instead; the offset is the gap plus the dot width. */
.mb-dropdown-menu a.eh-status .eh-status-dot {
    margin-left: calc(-1 * (.5rem + 7px));
}

/* The three states. Each one sets the dot colour and the translucent wash
   behind it, and hover only raises the alpha. These are the only saturated
   values in the stylesheet. */
a.eh-status--up {
    --eh-dot: #22c55e;
    --eh-tint: rgba(34, 197, 94, .14);
}

a.eh-status--up:hover {
    --eh-tint: rgba(34, 197, 94, .30);
}

a.eh-status--warn {
    --eh-dot: #f59e0b;
    --eh-tint: rgba(245, 158, 11, .16);
}

a.eh-status--warn:hover {
    --eh-tint: rgba(245, 158, 11, .34);
}

a.eh-status--down {
    --eh-dot: #ef4444;
    --eh-tint: rgba(239, 68, 68, .16);
}

a.eh-status--down:hover {
    --eh-tint: rgba(239, 68, 68, .34);
}

/* The dot takes the state colour, and falls back to the plain primary when no
   state is set, so an unknown value degrades to the old monochrome badge
   rather than losing its dot entirely. */
.eh-status-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--eh-dot, var(--color-primary));
    animation: eh-status-pulse 2.6s var(--ease) infinite;
}

@keyframes eh-status-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--eh-dot, var(--color-primary)) 55%, transparent);
    }
    70%, 100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

.header .dropdown-menu .eh-dd-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    white-space: normal;
    padding: .6rem .7rem;
    border-radius: var(--radius-md);
}

.eh-dd-icon {
    width: 30px;
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-primary-dim);
    font-size: .85rem;
}

.eh-dd-item strong {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    font-family: var(--font-headline);
    color: var(--color-on-surface);
}

.eh-dd-item span span {
    display: block;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--color-on-surface-inverse);
}

/* --- Dropdown menu width -------------------------------------------------
   The theme sets min-width:100% (sized for a short trigger) and
   white-space:nowrap. Product entries carry a description, so they need a
   real column. Scoped to .eh-nav so the theme's own usage is untouched. */
.eh-nav .dropdown-menu {
    min-width: 310px;
    padding: var(--space-2);
}

/* Click opens these menus, and the theme ALSO opens them on :hover.
   The two disagree the moment you move between triggers: with Products open by
   click, sliding across to Tools opens Tools on hover while Products is still
   .open, so both panels render and overlap. Hover-open is therefore dropped for
   the header nav only, leaving the click handler as the single source of truth
   for which menu is showing.

   Scoped to .eh-nav on purpose: the theme's hover behaviour is left intact for
   any other .dropdown on the site, and the mobile panel is a different element
   (.mb-dropdown-menu) entirely. */
.eh-nav .dropdown:hover .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
}

/* The open state must outrank the rule above. Same specificity, so it is stated
   after it — and with the trigger's own chevron so the open menu still reads as
   open rather than merely hovered. */
.eh-nav .dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* The chevron follows the same single source of truth as the panel. */
.eh-nav .dropdown:hover .dropdown-trigger .icon {
    transform: none;
}

.eh-nav .dropdown.open .dropdown-trigger .icon {
    transform: rotate(180deg);
}

/* --- Mobile nav -----------------------------------------------------------
   The theme's .mb-dropdown-menu is a fixed slide-down panel sized for a short
   menu (height:8rem) that opens at top:0, underneath the fixed header.

   The closed state uses a transform rather than top:-100vh. -100vh only moves
   the panel up by one viewport height, so a panel TALLER than the viewport
   (short or landscape screens) still leaves its lower half on screen.
   Translating by a percentage of the panel's own height always clears it. */
.mb-dropdown-menu {
    top: 4.5rem;
    height: auto;
    padding: 0 var(--space-6);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-surface-variant);
    box-shadow: var(--shadow-lg);
    z-index: 98;
    transform: translateY(calc(-100% - 4.5rem));
    visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s var(--ease);
    /* never let a tall panel push the page sideways */
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mb-dropdown-menu.open {
    transform: translateY(0);
    visibility: visible;
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
}

.mb-dropdown-menu a {
    display: block;
    padding: .7rem 0;
    border-bottom: 1px solid var(--color-surface-variant);
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

.mb-dropdown-menu a:hover {
    color: var(--color-on-surface);
}

/* The theme's .icon-btn sets no color of its own, so make it explicit rather
   than relying on inheritance. Covers the theme toggle and the burger. */
.icon-btn {
    color: var(--color-on-surface);
    line-height: 1;
    font-size: 1.05rem;
}

.icon-btn:hover,
.icon-btn:focus-visible,
.icon-btn:active {
    color: var(--color-on-surface);
}

/* Above the mobile panel (z-index 98), both of which live inside .header and
   therefore share its stacking context. Without this the open panel painted over
   the button and the menu could be opened but not closed. position:relative is
   required for z-index to apply; relative rather than absolute so the header's
   flex row keeps its layout. */
.eh-burger {
    display: none;
    position: relative;
    z-index: 99;
}

@media (max-width: 900px) {
    .eh-nav,
    .eh-header-secondary {
        display: none;
    }

    .eh-burger {
        display: flex;
    }

    .eh-dsearch-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    /* A fixed 52px field was tight once the input sits alone on its own line:
       the text had almost no breathing room above and below. Let the field grow
       with its content and give the input real vertical padding instead. */
    .eh-field {
        height: auto;
        min-height: 56px;
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    /* The submit button follows the field full-width, so the card reads as one
       stacked column rather than a cramped row. */
    .eh-dsearch-row .btn {
        width: 100%;
    }
}

/* --- Search options: naming style + Creative -------------------------------

   The same segmented shape as .eh-billing (the site's existing two-way choice),
   reused rather than reinvented so the two controls read as the same component.
   Kept as its own class because .eh-billing is wired to the price toggles: two
   elements sharing it would both be driven by that script. */
/* The search field is a full-width pill with its own padding, so its TEXT sits
   inside the card's padding rather than at it. The options row and the hint
   follow the same inset, so the card reads as one content column instead of
   three different left edges with the hint hugging the rounded corner. */
.eh-searchopts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: 0 var(--space-5);
}

.eh-dsearch .eh-hint {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.eh-seg {
    display: inline-flex;
    gap: var(--space-1);
    padding: .28rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-surface-variant);
    background: var(--color-secondary);
}

.eh-seg button {
    padding: .5rem var(--space-5);
    border-radius: var(--radius-full);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    transition: background-color .2s ease, color .2s ease;
}

.eh-seg button[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-btn-primary-fg);
}

/* Toggle switch, same shape as the one on enterramon.com. The real checkbox
   stays in the accessibility tree and keeps its keyboard behavior; the track is
   drawn beside it and driven by :checked, so nothing here is a div pretending to
   be a control. */
.eh-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-on-surface);
    cursor: pointer;
}

.eh-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.eh-switch-track {
    position: relative;
    width: 2.6rem;
    height: 1.5rem;
    flex: none;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-surface-variant);
    background: var(--color-secondary);
    transition: background-color .18s ease, border-color .18s ease;
}

.eh-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--color-on-surface-variant);
    transition: transform .18s ease, background-color .18s ease;
}

.eh-switch input:checked + .eh-switch-track {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.eh-switch input:checked + .eh-switch-track::after {
    transform: translateX(1.1rem);
    background: var(--color-white);
}

.eh-switch input:focus-visible + .eh-switch-track {
    box-shadow: 0 0 0 4px var(--color-primary-dim);
}

/* Find more. Hidden until JavaScript confirms it can run: without it the button
   could not fetch anything, and a dead button is worse than no button. */
.eh-js-only {
    display: none;
}

.js .eh-js-only {
    display: block;
}

.eh-more-results {
    margin-top: var(--space-6);
    text-align: center;
}

.eh-more-results .eh-hint {
    margin-top: var(--space-3);
}

/* --- Domain results table --------------------------------------------------

   The theme's .enterra-table is built for the Enterramon DNS/ping tool tables,
   which have THREE columns: a sequence label pinned to width:1% and nowrap,
   then two value columns splitting 50/50 and right-aligned. There is no rule
   for a 4th column at all, so a wider table inherits that shape and comes out
   wrong: the domain name right-aligned, the columns lopsided, and the trailing
   checkbox column unstyled.

   This modifier restores ordinary table behavior for the domain list, which is
   what the reference tool on enterramon.com uses. Scoped to .eh-domtable so the
   theme's own tool tables are untouched, and doubled up on classes because the
   theme's rules are .enterra-table th:nth-child(n) at (0,2,1) — a single-class
   override would lose on specificity. Same reasoning as .eh-compare. */
.enterra-table.eh-domtable th,
.enterra-table.eh-domtable td {
    width: auto;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
}

/* Tick box. Narrow, and tighter on the right so it hugs the name. */
.enterra-table.eh-domtable th:nth-child(1),
.enterra-table.eh-domtable td:nth-child(1) {
    width: 1%;
    padding-right: 0;
    text-align: center;
}

/* The name absorbs the slack, so the fixed columns stay put. */
.enterra-table.eh-domtable th:nth-child(2),
.enterra-table.eh-domtable td:nth-child(2) {
    width: 100%;
    overflow-wrap: anywhere;
}

.enterra-table.eh-domtable th:nth-child(3),
.enterra-table.eh-domtable td:nth-child(3) {
    white-space: nowrap;
}

.enterra-table.eh-domtable th:nth-child(4),
.enterra-table.eh-domtable td:nth-child(4) {
    white-space: nowrap;
    text-align: right;
}

.enterra-table.eh-domtable th:last-child,
.enterra-table.eh-domtable td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.eh-dom-name {
    font-family: var(--font-headline);
    font-weight: 800;
    letter-spacing: -.01em;
}

.eh-dom-per {
    margin-left: .3rem;
    font-size: .74rem;
}

.eh-dom-price {
    font-family: var(--font-headline);
    font-weight: 800;
    white-space: nowrap;
}

.eh-dom-tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-on-surface-variant);
}

/* The second line of a cart row — the tier, the quantity and the term
   ("1 x Lite 10 GB . monthly"). A MAILBOX row needs it: the row's first line is
   only the domain, and without this the customer cannot tell 1 Lite 10 GB from
   20 Pro 50 GB.

   This class was used by cart.js from the day mailboxes were added and had NO
   RULE AT ALL, so the text inherited the row's font and wrapped mid-phrase. It
   is prose the customer reads before paying, so it takes --text-2-equivalent
   tone (--color-on-surface-variant) rather than the dimmer tag treatment, and it
   is NOT headline-weight: it must read as subordinate to the domain above it. */
.eh-dom-sub {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-on-surface-variant);
}

/* Every listed name is buyable, so the status reads as a positive label rather
   than as a muted one. Do not reintroduce a struck-through "taken" style here:
   taken rows are not rendered at all (see domain-search.php). */
.enterra-table.eh-domtable .eh-dom-tag {
    color: var(--color-on-surface);
}

.eh-pick {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-on-surface);
    cursor: pointer;
}

/* Cart table. Same override as .eh-domtable, but it has no leading tick column,
   so the name sits in column 1 and the theme's width:1% rule for column 1 would
   squash it. Kept as its own modifier rather than a shared one with a variant
   class, because getting the column map wrong here silently pins the domain
   name to one character wide. */
.enterra-table.eh-carttable th,
.enterra-table.eh-carttable td {
    width: auto;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
}

.enterra-table.eh-carttable th:nth-child(1),
.enterra-table.eh-carttable td:nth-child(1) {
    width: 100%;
    overflow-wrap: anywhere;
}

.enterra-table.eh-carttable th:nth-child(2),
.enterra-table.eh-carttable td:nth-child(2) {
    white-space: nowrap;
}

.enterra-table.eh-carttable th:nth-child(3),
.enterra-table.eh-carttable td:nth-child(3) {
    white-space: nowrap;
    text-align: right;
}

.enterra-table.eh-carttable th:last-child,
.enterra-table.eh-carttable td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Sortable headers. The arrow is drawn in CSS so there is no icon dependency
   and the header stays a single text node for screen readers. */
.eh-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.eh-sortable::after {
    content: "\2195";
    margin-left: .35rem;
    opacity: .35;
    font-size: .8em;
}

.eh-sortable[aria-sort="ascending"]::after {
    content: "\2191";
    opacity: 1;
}

.eh-sortable[aria-sort="descending"]::after {
    content: "\2193";
    opacity: 1;
}

/* --- Favorites & Cart ------------------------------------------------------
   Hidden until there is at least one pick, so a first-time visitor sees the
   results and nothing else. `hidden` is toggled from domains.js; the [hidden]
   rule is repeated because the flex display below would otherwise win. */
.eh-cart[hidden] {
    display: none;
}

.eh-cart {
    margin-top: var(--space-16);
}

.eh-cart-head {
    margin-bottom: var(--space-6);
}

.eh-cart-panel {
    padding: var(--space-8);
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
}

.eh-cart-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-surface-variant);
}

.eh-cart-total {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .9rem;
    color: var(--color-on-surface-variant);
}

.eh-cart-total b {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
}

.eh-cart-note {
    margin-top: var(--space-3);
    font-size: .8rem;
    color: var(--color-on-surface-inverse);
}

/* --- Free trial form -------------------------------------------------------
   Sits inside .eh-cta, which centers its text, so the form re-aligns itself to
   the left. */
.eh-trial {
    max-width: 34rem;
    margin: var(--space-6) auto 0;
    text-align: left;
}

.eh-trial-row {
    display: flex;
    gap: var(--space-2);
}

.eh-trial-row .eh-field {
    flex: 1;
    height: 52px;
}

.eh-check-inline {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: .85rem;
    line-height: 1.5;
    color: var(--color-on-surface-variant);
    cursor: pointer;
}

.eh-check-inline input {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    margin-top: .15rem;
    accent-color: var(--color-on-surface);
    cursor: pointer;
}

/* Honeypot. Off-screen rather than type="hidden": bots reliably skip hidden
   inputs and reliably fill visible-but-hidden ones. Mirrors the enterramon.com
   form so the same handler sees the same shape. */
.eh-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.eh-trial .eh-error {
    margin-top: var(--space-4);
}

@media (max-width: 560px) {
    .eh-trial-row {
        flex-direction: column;
    }
}

/* Small muted text, one step heavier.
   At .74 to .82rem a 400 stem on a mid gray is genuinely hard to read, which is
   the second half of what the accessibility pass picked up. The contrast fix
   makes it legible, this makes it comfortable. */
.eh-trust,
.eh-equiv,
.eh-plan-note,
.eh-stat span,
.eh-dd-item span span,
.eh-cart-note {
    font-weight: 500;
}

/* --- Cart: header button, drawer -------------------------------------------

   The drawer is the cart from anywhere on the site; the Favorites & Cart section
   on the search page is a second view of the same list. Both render from one
   function (see cart.js), so they cannot disagree. */
.eh-cart-btn {
    position: relative;
}

.eh-cart-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .28rem;
    border-radius: var(--radius-full);
    background: var(--color-on-surface);
    color: var(--color-surface);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.1rem;
    text-align: center;
    pointer-events: none;
}

.eh-cart-count[hidden] {
    display: none;
}

/* Lock the page behind the drawer. On <html> rather than <body> so it also stops
   the scroll chaining that body-only locking allows on iOS. */
html.eh-no-scroll,
html.eh-no-scroll body {
    overflow: hidden;
}

/* Above the site header, which is position:fixed at z-index 9999 — anything
   lower renders the drawer behind it, which clips the drawer's own header off
   the top of the panel. The skip link is raised further still so a keyboard
   user can always reach it. */
.eh-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.eh-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* The same scrim reads much heavier over a light page than a near-black one,
   washing everything behind it to flat gray. Lighten it so the drawer still
   separates without draining the page. */
html[data-theme="light"] .eh-drawer-backdrop {
    background: rgba(0, 0, 0, .35);
}

.eh-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10011;
    width: min(25rem, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--color-surface-elevated);
    border-left: 1px solid var(--color-surface-variant);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .28);
    transform: translateX(101%);
    /* `visibility` too, not just the transform: an off-screen panel is still
       focusable, so without this Tab walks into a closed drawer. */
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
}

.eh-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.eh-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-surface-variant);
}

.eh-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-4) var(--space-6);
}

.eh-drawer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eh-drawer-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-surface-variant);
}

/* The name/sub wrapper is the flex item; the two lines stack inside it. */
.eh-drawer-label {
    flex: 1 1 auto;
    min-width: 0;
}

.eh-drawer-item .eh-dom-name {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.eh-drawer-item .eh-dom-price {
    flex: 0 0 auto;
}

.eh-drawer-empty {
    padding: var(--space-10) 0;
    text-align: center;
    font-size: .9rem;
    color: var(--color-on-surface-variant);
}

.eh-drawer-empty[hidden] {
    display: none;
}

.eh-drawer-foot {
    flex: 0 0 auto;
    padding: var(--space-6);
    border-top: 1px solid var(--color-surface-variant);
}

.eh-drawer-foot .eh-cart-total {
    margin-bottom: var(--space-4);
}

/* Add to Cart is disabled until something is ticked. The theme ships no
   disabled state at all, so without this the button looks live and does
   nothing, which reads as a broken page rather than an empty selection. */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.eh-dom-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.eh-dom-count {
    font-size: .88rem;
    color: var(--color-on-surface-variant);
}

/* Icon-sized button for the per-row remove control. The border uses the
   inverse surface token rather than surface-variant: on the elevated cart
   panel the variant sits almost on top of the background and the control
   disappears.

   IT MUST NOT BE ALLOWED TO SHRINK OR STRETCH. It sits in a flex row
   (.eh-drawer-item / the cart table cell) beside a name that can be long, and a
   flex item defaults to `flex-shrink: 1` — so on a narrow drawer the row
   squeezed the 1.9rem circle down to 23.6x30.4 and it rendered as a squashed
   oval. `flex: none` holds the square, and `aspect-ratio` keeps it a circle
   even if a future rule changes one dimension, which is the failure that made
   it an oval rather than a smaller circle. */
.eh-row-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    aspect-ratio: 1 / 1;
    padding: 0;
    /* THE GLYPH IS DRAWN, NOT TYPED, AND THAT IS THE POINT.
       -----------------------------------------------------------------
       This held a text `&times;` at 1.05rem. A multiplication sign is a TYPOGRAPHIC
       character: it carries side bearings and sits on the maths axis, so its ink
       is not centred in its own em box — `align-items: center` centres the BOX,
       which is why the button measured a perfect 30.39 x 30.39 while the X inside
       it visibly sat low and left. The owner saw it immediately.

       So the mark is two strokes in an SVG instead. Geometry cannot be knocked off
       centre by font metrics, and it scales with the button rather than with a
       font-size that has to be re-tuned whenever the button is resized.

       `font-size` is kept at 0 so any stray text node cannot affect the layout. */
    font-size: 0;
    line-height: 1;
    border: 1px solid var(--color-on-surface-inverse);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.eh-row-remove svg {
    display: block;
    width: 45%;
    height: 45%;
    /* The stroke follows `color`, so :hover still recolours it in one place. */
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;
}

.eh-row-remove:hover {
    border-color: var(--color-on-surface);
    color: var(--color-on-surface);
}

/* Long extension catalog. Reuses the plan table so the two read the same. */
.eh-tld-table td:last-child {
    white-space: nowrap;
}

/* Popular extension cards under the price heading. */
.eh-tld-card-price {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.25rem;
}

/* Collapsible tail of the extension catalog. The list runs to hundreds of
   rows, so it stays closed until asked for rather than pushing the FAQ and the
   call to action a screen and a half down the page. */
.eh-more-ext {
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-surface-variant);
    padding-top: var(--space-5);
}

.eh-more-ext > summary {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.eh-more-ext > summary::after {
    content: " \2193";
}

.eh-more-ext[open] > summary::after {
    content: " \2191";
}

@media (max-width: 560px) {
    /* Below this the four columns cannot hold a long name and a price at once,
       so the status folds under the name rather than forcing a sideways
       scroll. */
    .enterra-table.eh-domtable th:nth-child(3),
    .enterra-table.eh-domtable td:nth-child(3) {
        display: none;
    }
    .eh-cart-foot {
        flex-direction: column;
        align-items: stretch;
    }
    .eh-cart-foot .btn {
        width: 100%;
    }
}

/* Four pricing tiers, always in an even row.
   The theme's .gc-4 drops to three columns at 1400px, which is fine for a grid
   of eleven extension cards but leaves an orphan on a second row when there are
   exactly four things. This keeps them 4 / 2 / 1 instead. Not a one-off on the
   page: a pricing row is a recurring shape, so it belongs with the other grid
   utilities. */
.eh-gc-tiers {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1180px) {
    .eh-gc-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .eh-gc-tiers {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Responsive mirrors of the theme's own breakpoints
   ============================================================================= */
@media (max-width: 1400px) {
    .eh-gc-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .eh-gc-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Four columns of links need room; drop to two before they get cramped. */
@media (max-width: 1200px) {
    .footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    body { padding-top: 4rem; }
    .eh-section { padding: var(--space-16) 0; }
    .eh-hero { padding: var(--space-16) 0 var(--space-10); }
    .eh-gc-3, .eh-gc-4 { grid-template-columns: 1fr; }
    .eh-stats { grid-template-columns: repeat(2, 1fr); }
    .eh-cta { border-radius: var(--radius-l); }
}

/* The theme's .text-6xl (3.75rem) is a desktop display size. Scale the hero
   heading down so it stays on three lines on a handset. */
@media (max-width: 560px) {
    .eh-hero h1 {
        font-size: clamp(2.15rem, 10vw, 2.85rem);
    }
    .eh-hero { padding-top: var(--space-12); }
    .eh-dsearch { padding: var(--space-4); }
    .eh-stats { grid-template-columns: 1fr 1fr; }
    .eh-billing button { padding: .5rem var(--space-3); }
}

/* =============================================================================
   TOOLS
   Shared shell for every mini-tool: the form row, the result summary grid and
   the detail table. One set of classes so ping, DNS, traceroute and the rest
   cannot drift into looking like different sites.
   ============================================================================= */

.eh-tool {
    margin: var(--space-8) 0 var(--space-4);
}

.eh-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

.eh-tool-row .eh-field {
    margin: 0;
}

.eh-field--grow {
    flex: 1 1 16rem;
    min-width: 0;
}

/* A select and an input must match, or the row looks broken. */
.eh-tool-row .input,
.eh-tool-row select.input,
.eh-tool-row input.input {
    width: 100%;
}

.eh-tool-run {
    flex: 0 0 auto;
    white-space: nowrap;
}

.eh-tool-error {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-surface-variant);
    border-left: 3px solid var(--color-on-surface);
    border-radius: var(--radius-sm);
    background: var(--color-surface-elevated);
    color: var(--color-on-surface);
    font-weight: 500;
}

.eh-tool-out {
    margin: var(--space-6) 0;
}

.eh-tool-sum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-3);
}

.eh-tool-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--space-4);
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
}

.eh-tool-k {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Same weight as the other fine print: this is small text on a raised
       surface and goes light without it. */
    font-weight: 500;
    color: var(--color-on-surface-inverse);
}

.eh-tool-v {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--color-on-surface);
    overflow-wrap: anywhere;
}

.eh-tool-detail {
    margin-top: var(--space-6);
}

.eh-tool-table-wrap {
    overflow-x: auto;
    margin: var(--space-6) 0;
}

.eh-tool-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.eh-tool-table caption {
    text-align: left;
}

.eh-tool-table th,
.eh-tool-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--color-surface-variant);
}

.eh-tool-table thead th {
    border-bottom: 2px solid var(--color-on-surface-variant);
    font-weight: 500;
}

.eh-tool-table td:first-child {
    color: var(--color-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .eh-tool-row .eh-tool-run {
        width: 100%;
    }
}

/* .eh-field styles an input but a bare select keeps the browser chrome inside
   the 56px box, which looks broken next to it. Match them. */
.eh-field select {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    outline: none;
    color: var(--color-on-surface);
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 0.55rem center, right 0.3rem center;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
}

.eh-field select option {
    background: var(--color-surface-elevated);
    color: var(--color-on-surface);
}

/* Hub cards are links, so they must not inherit link underlines or the visited
   colour. Same raised surface as .eh-card, plus a hover that reads as clickable. */
.eh-tool-card {
    display: block;
    text-decoration: none;
    color: var(--color-on-surface);
    transition: border-color 120ms ease, transform 120ms ease;
}

.eh-tool-card:hover,
.eh-tool-card:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.eh-tool-card h3 {
    margin: var(--space-3) 0 var(--space-2);
}

.eh-tool-card p {
    margin: 0;
    color: var(--color-body);
}

/* Secondary text inside a tool table, e.g. a hop that did not reply. */
.eh-tool-muted {
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

/* The second step of a tool, shown once it has something to work with. */
.eh-tool-tester {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-surface-variant);
}

.eh-tool-tester h3 {
    margin-bottom: var(--space-4);
}

.eh-tool-tester h4 {
    margin: var(--space-5) 0 var(--space-2);
}

/* The result of a path test, given room to read as an answer. */
#robotsResult .eh-tool-cell {
    max-width: 32rem;
}

/* =============================================================================
   TOOL INFO STRIP
   A tool result is sometimes an explanation rather than a number: an address
   that has no vendor, or a special case with its own reason. It needs a surface
   that reads as information, not as an error the visitor should worry about.
   ============================================================================= */

.eh-tool-note {
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-surface-variant);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-surface-elevated);
    color: var(--color-body);
}

.eh-tool-note p {
    margin: 0 0 var(--space-3);
}

.eh-tool-note p:last-child {
    margin-bottom: 0;
}

.eh-tool-note ul {
    margin: var(--space-2) 0 0;
    padding-left: 1.15rem;
}

.eh-tool-note li {
    margin-bottom: var(--space-2);
}

.eh-tool-note strong {
    color: var(--color-on-surface);
}
/* TLD list controls. The pager and the search box are reading aids: every row is
   already in the markup, so these hide and reveal rather than fetch. */
.eh-tld-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0 var(--space-4);
}

.eh-tld-count {
    margin: 0;
    color: var(--color-on-surface-variant);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Without JavaScript nothing is hidden and the whole list shows, which is what a
   crawler wants. The rule only matters once the script starts setting the
   attribute, and it is explicit because a display rule on a table row would
   otherwise beat [hidden]. */
[data-tld][hidden] {
    display: none;
}

.eh-tld-pager {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.eh-page {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-sm);
    background: var(--color-surface-elevated);
    color: var(--color-on-surface);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.eh-page:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.eh-page:disabled {
    opacity: 0.45;
    cursor: default;
}

.eh-page-info {
    color: var(--color-on-surface-variant);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Label above the popular extension chips. Small, and in the body colour so it
   reads as a caption rather than as another heading competing with the h1. */
.eh-tlds-label {
    margin: var(--space-5) 0 var(--space-3);
    color: var(--color-body);
    font-weight: 500;
    font-size: 0.9375rem;
}

/* =============================================================================
   EXTENSION LIST
   Two short columns in a table left most of a wide container empty and doubled
   the page length. Tiles fill the row instead. Every value is one line, and the
   names are set in the headline face so the extension reads first and the price
   second, which is the order people scan them in.
   ============================================================================= */

.eh-tld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.eh-tld-cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-sm);
    background: var(--color-surface-elevated);
    transition: border-color 120ms ease;
}

.eh-tld-cell:hover {
    border-color: var(--color-primary);
}

/* One line each. Wrapping a long extension mid-word was what made the earlier
   attempt at this look broken. */
.eh-tld-name {
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--color-on-surface);
    white-space: nowrap;
}

.eh-tld-price {
    color: var(--color-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A link inside helper text. The hint is deliberately quiet, so the link needs
   its own underline to read as clickable rather than as emphasis. */
.eh-hint a,
.eh-lede a {
    color: var(--color-body);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.eh-hint a:hover,
.eh-lede a:hover {
    color: var(--color-on-surface);
}

/* --- Support page ---------------------------------------------------------
   Six product tiles, the article lists they open, and the ticket form. Kept
   together so the whole page can be read in one place. */

/* Six across on a wide screen. The theme's gc-6 collapses to three and stops,
   which is still cramped on a phone, so this keeps collapsing. */
.eh-support-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(6, 1fr);
}

.eh-support-tile {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--space-4);
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-md);
    background: var(--glass);
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.eh-support-tile:hover,
.eh-support-tile:focus-visible {
    border-color: var(--color-primary);
}

/* The open tile is the one whose panel is showing, so it reads as selected
   rather than as merely hovered. */
.eh-support-tile.is-open {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
}

.eh-support-tile-name {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-on-surface);
}

.eh-support-tile-count {
    font-size: .78rem;
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

.eh-support-panels {
    margin-top: var(--space-8);
}

/* The panel carries [hidden] when it is closed, so it must not be given a
   display value that beats the attribute. */
.eh-support-panel[hidden] {
    display: none;
}

.eh-support-panel-name,
.eh-support-group-name {
    margin-bottom: var(--space-3);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: .95rem;
    color: var(--color-on-surface-variant);
}

.eh-support-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    list-style: none;
}

.eh-support-list a {
    display: block;
    padding: .6rem var(--space-4);
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-sm);
    color: var(--color-body);
    font-size: .9rem;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.eh-support-list a:hover,
.eh-support-list a:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-on-surface);
}

.eh-support-results {
    display: grid;
    gap: var(--space-8);
}

/* --- Stacked form field ---------------------------------------------------
   .eh-field is the pill shell for a one line search box, and it cannot hold a
   textarea or sit under a label. This is the shell a stacked form needs. It
   keeps the same convention as .eh-field, a primary resting border and an
   offset focus ring, because the border is already the brightest colour the
   theme has and cannot get brighter on focus. */

.eh-form-row + .eh-form-row {
    margin-top: var(--space-4);
}

.eh-form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-on-surface);
}

.eh-form-input {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-surface-elevated);
    color: var(--color-on-surface);
    font: inherit;
    font-size: 1rem;
}

.eh-form-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

textarea.eh-form-input {
    min-height: 9rem;
    resize: vertical;
}

.eh-support-form .eh-error {
    margin-top: var(--space-2);
}

.eh-support-sent {
    padding: var(--space-4);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-dim);
    color: var(--color-on-surface);
    font-weight: 500;
}

/* Six across for as long as a desktop is a desktop. 1400 was the first value
   here, and it meant a 1380 laptop and most 1440 and 1366 screens got three
   across instead of the single row the design calls for. */
@media (max-width: 1100px) {
    .eh-support-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .eh-support-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .eh-support-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Legal page -----------------------------------------------------------
   A nav rail on the left and the documents on the right. Anchors rather than a
   switcher, so a link to one policy works for everyone and every document is in
   the HTML for search. */

.eh-legal {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
}

/* Rail, sticky under the fixed header. The offset is the same 4.5rem the body
   frame reserves for the header, plus the same space-6 the anchor offset uses,
   so the rail and an anchor jump land at the same line. */
.eh-legal-nav {
    position: sticky;
    top: calc(4.5rem + var(--space-6));
    display: grid;
    gap: 1px;
    align-content: start;
}

.eh-legal-nav a {
    display: block;
    padding: .5rem var(--space-4);
    border-left: 2px solid var(--color-surface-variant);
    color: var(--color-on-surface-variant);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease;
}

.eh-legal-nav a:hover,
.eh-legal-nav a.is-current {
    color: var(--color-on-surface);
    border-left-color: var(--color-primary);
}

.eh-legal-pending {
    margin-bottom: var(--space-12);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--color-body);
}

/* One document at a time, chosen by the hash. Every document stays in the markup
   so a crawler reads the whole page and an old link to /legal/#privacy still
   lands on the privacy policy, and :target decides which one gets a box. The
   :has() rule is what makes the default fall away once anything is targeted, so
   the first document is shown only while no hash is set. The :not(:target)
   stops that rule from switching off the very document that was asked for, and
   it is why the target rule can sit last and win on order rather than on
   weight. No script is involved, which is why this works with scripting off. */
.eh-legal-doc {
    display: none;
}

.eh-legal-doc:first-of-type {
    display: block;
}

.eh-legal:has(.eh-legal-doc:target) .eh-legal-doc:first-of-type:not(:target) {
    display: none;
}

.eh-legal-doc:target {
    display: block;
}

.eh-legal-doc-title {
    margin-bottom: var(--space-3);
}

.eh-legal-doc-scope {
    margin: 0;
}

/* The rail cannot be sticky once it is not beside anything, so it goes back into
   the flow above the documents. */
@media (max-width: 900px) {
    .eh-legal {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .eh-legal-nav {
        position: static;
        gap: 0;
        border-left: 0;
    }
}

/* --- Legal documents ------------------------------------------------------
   A document with real policy text. The scope line is replaced by the partial
   once a policy is written, so these only bite on documents that have one.

   The theme renders h3 at weight 200 in the secondary colour, which is a caption
   treatment rather than a heading, so the section headings of a policy have to
   be restated here. Paragraph and list margins are restated too, because the
   reset zeroes them and prose with no spacing between paragraphs is unreadable. */

.eh-legal-doc h3 {
    margin: var(--space-8) 0 var(--space-3);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--color-on-surface);
}

/* A section inside a section, which the cookie policy uses for its four cookie
   types. The theme colours h4 as secondary text, so it needs the same restating
   as h3, one step down. */
.eh-legal-doc h4 {
    margin: var(--space-6) 0 var(--space-2);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-on-surface);
}

.eh-legal-doc p {
    margin-bottom: var(--space-4);
}

.eh-legal-doc ul,
.eh-legal-doc ol {
    margin: 0 0 var(--space-4) 1rem;
}

.eh-legal-doc li + li {
    margin-top: var(--space-2);
}

/* The affiliate agreement opens with eighteen defined terms, which arrive as a
   two column table. The theme's .enterra-table is built for numeric result
   tables and right-aligns every column after the first, so a definition list is
   used instead and gets its own spacing. */
.eh-legal-defs {
    margin: 0 0 var(--space-4);
}

.eh-legal-defs dt {
    margin-top: var(--space-4);
    font-weight: 700;
    color: var(--color-on-surface);
}

.eh-legal-defs dt:first-child {
    margin-top: 0;
}

.eh-legal-defs dd {
    margin: var(--space-1) 0 0;
    color: var(--color-body);
}

/* The last thing in a document never adds a trailing gap, which would otherwise
   stack on top of the rule that separates one document from the next. */
.eh-legal-doc > :last-child {
    margin-bottom: 0;
}

.eh-legal-toc {
    margin: var(--space-6) 0 var(--space-8);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border: 1px solid var(--color-surface-variant);
    border-radius: var(--radius-sm);
}

.eh-legal-toc-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
}

.eh-legal-toc ol {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 0 1rem;
}

.eh-legal-toc a {
    color: var(--color-body);
}

.eh-legal-updated {
    margin-top: var(--space-8);
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-on-surface-inverse);
}

/* ==========================================================================
   MODAL — the house dialog, used by Business Email's mailbox picker.
   --------------------------------------------------------------------------
   There was no modal on this site before the mail work, so this is the first
   one. It follows the DRAWER's conventions rather than inventing a second set:
   the same `.is-open` class, the same scrim colour and the same z-index band
   above the fixed site header, so a dialog can never render behind it.

   `visibility` is toggled alongside opacity for the drawer's reason: an
   invisible-but-present panel is still focusable, so Tab would otherwise walk
   into a closed dialog.
   ========================================================================== */

.eh-modal-backdrop {
    position: fixed;
    inset: 0;
    /* ABOVE THE CART DRAWER (10010/10011). The mailbox editor is opened FROM a
       drawer row, so at equal z-index the drawer painted over the dialog and the
       dialog's right-hand side was unreachable — the plan pickers and the Save
       button sat underneath it. A dialog must always outrank the thing that
       opened it. */
    z-index: 10020;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.eh-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

html[data-theme="light"] .eh-modal-backdrop {
    background: rgba(0, 0, 0, .35);
}

.eh-modal {
    position: fixed;
    z-index: 10021;
    top: 50%;
    left: 50%;
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--color-surface-elevated);
    border: 1px solid var(--glass-brd);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    transform: translate(-50%, -48%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.eh-modal.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.eh-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem .75rem;
}

.eh-modal-body {
    padding: 0 1.5rem;
    overflow-y: auto;
}

.eh-modal-foot {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--color-surface-variant);
    margin-top: 1.25rem;
}

/* Spacing between stacked fields is `.eh-form-row + .eh-form-row`, which the site
   already owns. An earlier cut of this modal styled `.eh-field + .eh-field`
   instead — the wrong component — and that rule is DELETED rather than left
   here dead: a second spacing rule for the same thing is how two forms end up
   with two different rhythms. */

.eh-field-hint {
    margin: .45rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--color-on-surface-variant);
}

/* The running figure. Prose tone, not a label tone — this is a number the
   customer is meant to READ before they commit. */
.eh-modal-figure {
    margin: 1.25rem 0 0;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--color-on-surface);
    font-variant-numeric: tabular-nums;
}

/* A SAVE IN PROGRESS MUST LOOK LIKE ONE.
   The write is a network round trip and on a slow link it is seconds; the dialog
   used to sit completely unchanged until it returned, which reads as "nothing
   happened" and invites a second click. The button now disables and shows a
   spinner with its own label, so the wait is visible and the control cannot be
   pressed twice. */
.eh-btn-busy {
    position: relative;
    pointer-events: none;
}

.eh-btn-busy::before {
    content: '';
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-right: .5em;
    vertical-align: -.08em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ehSpin .7s linear infinite;
}

@keyframes ehSpin { to { transform: rotate(360deg); } }

/* Respect a stated preference for less motion: the label still changes, which is
   the part that carries the meaning. */
@media (prefers-reduced-motion: reduce) {
    .eh-btn-busy::before { animation-duration: 2.4s; }
}

.eh-modal-error {
    margin: 1rem 0 0;
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: .85rem;
    line-height: 1.5;
    background: rgba(220, 80, 80, .12);
    border: 1px solid rgba(220, 80, 80, .38);
    color: var(--color-on-surface);
}

/* Quantity stepper. The input keeps a real <input type="number"> so a keyboard
   user and a mobile numeric keypad both work; the buttons are conveniences on
   top, never the only way to set the value. */
.eh-qty {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* THE FOUR IN ONE DIALOG.
   Mailboxes mix — a domain can carry Lite and Pro, in either size — so the
   dialog shows every combination at once rather than a single radio choice, which
   could only ever express one. Four lines in two columns on a wide dialog, one
   column when it is narrow, so the counts stay thumb-sized instead of being
   squeezed into a row of eight controls. */
.eh-mb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
}

@media (max-width: 560px) {
    .eh-mb-grid { grid-template-columns: minmax(0, 1fr); }
}

.eh-mb-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: .35rem .5rem .35rem .75rem;
    border: 1px solid var(--color-surface-variant);
    border-radius: 12px;
    transition: border-color .15s ease, background-color .15s ease;
}

/* A line with mailboxes on it reads as SELECTED, so the set being built is
   visible at a glance rather than having to be added up from four numbers. */
.eh-mb-line.is-on {
    border-color: var(--color-primary);
    background: var(--color-surface-variant);
}

.eh-mb-line-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    white-space: nowrap;
}

.eh-mb-line.is-on .eh-mb-line-label {
    color: var(--color-on-surface);
}

/* The count field is narrower here than in the standalone stepper: it holds at
   most two digits and the row also carries its own label. */
.eh-mb-line .eh-qty input {
    width: 3.25rem;
}

.eh-mb-line .eh-qty button {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1rem;
}

.eh-qty button {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 10px;
    border: 1px solid var(--glass-brd);
    background: var(--color-surface-variant);
    color: var(--color-on-surface);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.eh-qty button:hover {
    border-color: var(--color-primary);
}

.eh-qty input {
    width: 4.5rem;
    height: 2.5rem;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--glass-brd);
    background: var(--color-surface);
    color: var(--color-on-surface);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* The native number spinner is a browser widget that ignores the theme, and
       with the +/− buttons beside it, it is also redundant. Removing it does NOT
       remove the number semantics: the field is still <input type="number">, so
       arrow keys and a numeric keypad both still work. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.eh-qty input::-webkit-outer-spin-button,
.eh-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 520px) {
    .eh-modal-foot {
        flex-direction: column-reverse;
    }
    .eh-modal-foot .btn {
        width: 100%;
    }
}

/* --- Mailbox picker: plan/size and term -----------------------------------
   The dialog's own radio groups. They are BUTTONS with role="radio" rather than
   real <input type="radio">, because the visual is a segmented pill and the
   native control cannot be styled to match without hiding it — and a hidden
   input is exactly how a control ends up unreachable by keyboard. Buttons keep
   focus, arrow-key semantics are provided by the group, and aria-checked carries
   the state. */
.eh-mb-pick,
.eh-term {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.eh-pick-btn {
    padding: .5rem .9rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-brd);
    background: var(--color-surface-variant);
    color: var(--color-on-surface);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.eh-pick-btn:hover {
    border-color: var(--color-primary);
}

/* Selected state must not rely on colour alone, or it is invisible to anyone who
   cannot distinguish it: the border goes primary AND the weight rises. */
.eh-pick-btn.is-on {
    border-color: var(--color-primary);
    background: var(--color-primary-dim);
    color: var(--color-on-surface);
    font-weight: 800;
}

.eh-pick-btn .eh-save {
    font-weight: 600;
    opacity: .85;
}

/* A locked field still has to LOOK locked, or it reads as broken. */
.eh-form-input.is-locked {
    opacity: .75;
    cursor: default;
}

.eh-row-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--color-on-surface-inverse);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.eh-row-edit:hover {
    border-color: var(--color-on-surface);
    color: var(--color-on-surface);
}