/* ---------------------------------------------------------------------------
   ElixTechs Accessibility — public site
   ---------------------------------------------------------------------------
   The ElixTechs identity (the company site at elixtechs.com is the reference):
   navy #03045E, blue #0077B6, cyan #00B4D8, sky #90E0EF, ice #CAF0F8 ·
   IBM Plex Sans / Plex Mono / Plex Sans Arabic · square corners, 1px hairlines,
   mono uppercase labels, navy bands for the header, hero and footer.

   Three rules govern this file.

   1. Every directional property is logical: margin-inline, padding-inline,
      inset-inline, border-inline, text-align: start/end. There is no RTL
      stylesheet, because with logical properties the Arabic layout is the same
      layout — it just resolves the other way. The few .rtl rules below are
      typographic only. A `margin-left` anywhere in here is a bug.

   2. Nothing depends on colour alone, focus is always visible, and the type
      scale survives being doubled. This site sells an accessibility product;
      shipping it with the defects its own scanner reports would be absurd.

   3. Page rules read role tokens (--ink, --paper, --brand…), never the ramp
      directly. The roles are where this site decides which colour clears
      contrast on which ground — and they are the only thing the dark scheme
      has to redefine. Cyan is a fill, never text on a light ground (2.4:1):
      the primary action is cyan with navy text (6.8:1), and links and labels
      on light use blue (4.6:1 on the ground, 4.9:1 on white).
   --------------------------------------------------------------------------- */

:root {
    /* --- ElixTechs brand ramp (reference; components use the roles) -------- */
    --elx-navy: #03045e;
    --elx-blue: #0077b6;
    --elx-cyan: #00b4d8;
    --elx-sky: #90e0ef;
    --elx-ice: #caf0f8;

    /* Plex first, then Plex Sans Arabic: font fallback is per glyph, so Latin
       runs keep Plex and Arabic runs get a face that genuinely covers them.
       Tahoma stays as a last resort because it ships on Windows with real
       Arabic coverage, which most of the usual system stack does not. */
    --font-heading: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --space-1: 4.4px;
    --space-2: 8.8px;
    --space-3: 13.2px;
    --space-4: 17.6px;
    --space-6: 26.4px;
    --space-8: 35.2px;

    /* Square corners: the identity allows 2px at most. */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-card: 0;
    --radius-pill: 2px;

    /* Hairlines carry the structure; shadows are reserved for things that
       genuinely float (the mobile menu). */
    --shadow-sm: none;
    --shadow-md: 0 4px 14px rgb(3 4 94 / 12%);
    --shadow-lg: 0 14px 36px rgb(3 4 94 / 18%);

    /* --- Roles — light ------------------------------------------------------ */
    --ink: #03045e;
    --ink-soft: #4a5b76;
    /* #4a5b76 is 6.6:1 on the ground and 6.9:1 on white. */
    --ink-faint: #4a5b76;

    --paper: #f6f9fb;
    --paper-alt: #ffffff;
    --paper-raised: #ffffff;
    /* Form controls. */
    --field: #ffffff;

    --line: #dce7ee;
    /* Form-control boundaries. The hairline is ~1.2:1, which fails WCAG 1.4.11
       for the edge of an input; this clears 3:1 on the ground and on white. */
    --line-strong: #7a8ba3;
    --rule-strong: #03045e;

    /* The primary action: cyan fill, navy label. */
    --brand: #00b4d8;
    --brand-hover: #90e0ef;
    --brand-active: #caf0f8;
    --brand-contrast: #03045e;
    /* Links and labels on light grounds: blue, because cyan text fails. */
    --brand-ink: #0077b6;
    --brand-ink-hover: #03045e;
    --brand-wash: #caf0f8;

    /* The machine's own voice: counts, telemetry, identifiers. */
    --machine: #0077b6;
    --machine-ink: #03045e;
    --machine-wash: #caf0f8;

    --notice: #03045e;
    --notice-rule: #0077b6;

    --good: #0077b6;
    --good-wash: #eaf7fb;

    /* Errors need a colour of their own; the ✓/✕ glyphs and the words carry
       the meaning too. 6.5:1 on white. */
    --bad: #b3261e;
    --bad-wash: #fcefee;

    --focus: #0077b6;

    --code-bg: #03045e;
    --code-ink: #caf0f8;

    /* Navy bands (header, hero, featured plan, footer) keep the same colours
       in both schemes. */
    --band: #03045e;
    --band-ink: #ffffff;
    --band-body: #caf0f8;
    --band-label: #90e0ef;
    --band-accent: #00b4d8;
    --band-line: rgb(144 224 239 / 22%);
    --band-glow: #0077b6;
    --band-bad: #ff8a80;
    --header-bg: rgb(3 4 94 / 96%);

    --measure: 68ch;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    color-scheme: light;
}

/* The dark scheme. Chosen by elx-theme.js, which puts data-theme="light|dark"
   on <html> before first paint (follow system → light → dark, shared across
   ElixTechs apps). The media-query copy below is the same block and applies
   only when that script did not run, so a visitor with scripts blocked still
   gets their OS setting. Keep the two blocks identical.

   Contrast on the dark ground / surface: ink 17 / 16, ink-soft 10.6 / 10,
   links and labels (sky) 13.8 / 12.9, bad 9 / 8.4, line-strong on a field 6.7. */
:root[data-theme="dark"] {
    --ink: #eaf7fb;
    --ink-soft: #a6bdd3;
    --ink-faint: #a6bdd3;

    --paper: #01022e;
    --paper-alt: #060a4c;
    --paper-raised: #060a4c;
    --field: #01022e;

    --line: #1d2c6b;
    --line-strong: #7d93c0;
    --rule-strong: #00b4d8;

    --brand-ink: #90e0ef;
    --brand-ink-hover: #ffffff;
    --brand-wash: rgb(0 180 216 / 16%);

    --machine: #90e0ef;
    --machine-ink: #90e0ef;
    --machine-wash: rgb(144 224 239 / 14%);

    --notice: #eaf7fb;
    --notice-rule: #00b4d8;

    --good: #90e0ef;
    --good-wash: rgb(144 224 239 / 12%);

    --bad: #ff8a80;
    --bad-wash: rgb(255 138 128 / 12%);

    --focus: #90e0ef;

    --code-bg: #000124;
    --code-ink: #caf0f8;

    --band-glow: #005f92;
    --header-bg: rgb(1 2 46 / 96%);

    --shadow-md: 0 0 0 1px #1d2c6b, 0 4px 14px rgb(0 0 0 / 35%);
    --shadow-lg: 0 0 0 1px #1d2c6b, 0 14px 36px rgb(0 0 0 / 45%);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --ink: #eaf7fb;
        --ink-soft: #a6bdd3;
        --ink-faint: #a6bdd3;

        --paper: #01022e;
        --paper-alt: #060a4c;
        --paper-raised: #060a4c;
        --field: #01022e;

        --line: #1d2c6b;
        --line-strong: #7d93c0;
        --rule-strong: #00b4d8;

        --brand-ink: #90e0ef;
        --brand-ink-hover: #ffffff;
        --brand-wash: rgb(0 180 216 / 16%);

        --machine: #90e0ef;
        --machine-ink: #90e0ef;
        --machine-wash: rgb(144 224 239 / 14%);

        --notice: #eaf7fb;
        --notice-rule: #00b4d8;

        --good: #90e0ef;
        --good-wash: rgb(144 224 239 / 12%);

        --bad: #ff8a80;
        --bad-wash: rgb(255 138 128 / 12%);

        --focus: #90e0ef;

        --code-bg: #000124;
        --code-ink: #caf0f8;

        --band-glow: #005f92;
        --header-bg: rgb(1 2 46 / 96%);

        --shadow-md: 0 0 0 1px #1d2c6b, 0 4px 14px rgb(0 0 0 / 35%);
        --shadow-lg: 0 0 0 1px #1d2c6b, 0 14px 36px rgb(0 0 0 / 45%);

        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    /* 17px base. The widget scales from here, and a small base means every
       visitor starts by needing the widget rather than by being comfortable. */
    font: 400 1.0625rem/1.65 var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.rtl { line-height: 1.8; }

::selection { background: var(--elx-sky); color: var(--elx-navy); }

/* Honour the OS setting without being asked. The widget offers this too, but a
   visitor who has already told their system should not have to tell us again. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Focus --------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* On the navy bands the blue ring would be 1.9:1, so it switches to sky. */
:where(.site-header, .site-footer, .hero, .plan-featured) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: var(--elx-sky);
}

/* Under Windows High Contrast the brand colour is discarded by the OS, so the
   outline is redrawn in a system colour that the OS will honour. */
@media (forced-colors: active) {
    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
    }
}

/* --- Utilities ----------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--gutter);
    z-index: 100;
    padding: 0.7rem 1.35rem;
    background: var(--brand);
    color: var(--brand-contrast);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    inset-block-start: 0.5rem;
}

/* Off-screen, not display:none — a hidden input is not submitted, and this one
   has to be submitted empty for the honeypot to mean anything. */
.honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 76.25rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container.narrow { max-width: 48rem; }
.center { text-align: center; }
.muted { color: var(--ink-faint); }

.rule {
    margin-block: 2.5rem;
    border: 0;
    border-block-start: 1px solid var(--line);
}

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, h4 {
    margin-block: 0 0.5em;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 1.1rem; }

/* Arabic script has no capitals and its letterforms are connected. So in RTL:
   no tracking, no all-caps labels, no monospace labels (Plex Mono has no
   Arabic, and its wide spaces would gap Arabic words), and a taller line. */
.rtl :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.35; }
.rtl .stat-label,
.rtl .footer-heading,
.rtl .data-table thead th,
.rtl .brand-sub { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }

p { margin-block: 0 1rem; max-width: var(--measure); text-wrap: pretty; }

.lead {
    font-size: 1.15rem;
    color: var(--ink-soft);
    max-width: var(--measure);
    text-wrap: pretty;
}

a { color: var(--brand-ink); text-underline-offset: 0.2em; }
a:hover { color: var(--brand-ink-hover); }

kbd {
    font: 500 0.8em var(--font-mono);
    padding: 0.2em 0.55em;
    border: 1px solid var(--line-strong);
    border-block-end-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
}

code {
    font: 0.86em var(--font-mono);
    background: var(--brand-wash);
    color: var(--ink);
    padding: 0.15em 0.45em;
    border-radius: var(--radius-sm);
}

/* The docs surface: code on navy, the one place the ground inverts on a light
   page. */
pre.code {
    margin-block: 0 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--code-bg);
    color: var(--code-ink);
    border: 1px solid var(--line);
    overflow-x: auto;
    line-height: 1.7;
    /* text-align is physical here on purpose: these blocks are dir="ltr" and
       code must read left to right even inside an Arabic page. */
    text-align: left;
}

pre.code code { background: none; padding: 0; font-size: 0.85rem; color: inherit; }

.prose > h2 { margin-block-start: 2.5rem; }
.prose > h3 { margin-block-start: 1.75rem; }

.numbered { padding-inline-start: 1.5rem; max-width: var(--measure); }
.numbered li { margin-block-end: 0.5rem; }
.numbered li::marker { font-family: var(--font-mono); color: var(--brand-ink); font-weight: 500; }

/* --- Brand lockup -------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--band-ink);
    flex: 0 0 auto;
}

.brand:hover { color: var(--band-ink); }

.brand-mark {
    display: block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
}

.brand-text { display: flex; flex-direction: column; gap: 0.2rem; line-height: 1.1; }

.brand-sub {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--band-label);
}

/* The wordmark is a logo: Plex Sans 600, tracked wide, always Latin and
   left-to-right, never recoloured. */
.wordmark {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.16em;
    color: var(--band-ink);
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--band-line);
    color: var(--band-body);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 4.25rem;
}

.site-nav { margin-inline-start: auto; }

.nav-list {
    display: flex;
    gap: clamp(0.25rem, 1.2vw, 1.1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list a {
    display: block;
    padding: 0.45rem 0.35rem;
    border-block-end: 2px solid transparent;
    text-decoration: none;
    color: var(--band-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.nav-list a:hover { color: #fff; }

/* The current page is marked with aria-current and styled from that attribute,
   so the visual state and the announced state cannot drift apart. The
   underline carries it, not the colour alone. */
.nav-list a[aria-current="page"] {
    color: #fff;
    border-block-end-color: var(--elx-cyan);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.lang-switch {
    padding: 0.42rem 0.75rem;
    border: 1px solid rgb(144 224 239 / 30%);
    text-decoration: none;
    color: var(--band-body);
    font-size: 0.9rem;
}

.lang-switch:hover { border-color: var(--elx-sky); color: #fff; }

/* The shared ElixTechs theme toggle (see elx-theme.js). The icon shown is the
   visitor's choice, read from data-theme-choice on <html>. */
.elx-theme-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 1px solid rgb(144 224 239 / 30%);
    background: transparent;
    color: var(--band-body);
    cursor: pointer;
}
.elx-theme-toggle:hover { border-color: var(--elx-sky); color: #fff; }
.elx-ti { inline-size: 1.1rem; block-size: 1.1rem; display: none; }
html:not([data-theme-choice]) .elx-ti-system,
html[data-theme-choice="system"] .elx-ti-system,
html[data-theme-choice="light"] .elx-ti-light,
html[data-theme-choice="dark"] .elx-ti-dark { display: block; }

.nav-toggle { display: none; }

/* --- Buttons ------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 0;
    font: 500 0.95rem/1.2 var(--font-body);
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.button-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.button-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-contrast); }
.button-primary:active { background: var(--brand-active); border-color: var(--brand-active); }

.button-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.button-ghost:hover { border-color: var(--rule-strong); color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.button-ghost:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* Ghost buttons on a navy band. */
:where(.site-header, .hero, .plan-featured) .button-ghost {
    color: var(--band-body);
    border-color: rgb(144 224 239 / 45%);
}
:where(.site-header, .hero, .plan-featured) .button-ghost:hover {
    color: #fff;
    border-color: var(--elx-sky);
    background: transparent;
}

.button-large { padding: 0.9rem 1.75rem; font-size: 1.02rem; }

.button:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Sections ------------------------------------------------------------ */

.section { padding-block: clamp(2.75rem, 6vw, 4.75rem); }
.section-alt { background: var(--paper-alt); border-block: 1px solid var(--line); }

.page-head {
    padding-block: clamp(2.25rem, 5vw, 3.75rem) 0;
}

/* The home hero is a navy band with a single blue glow, as on elixtechs.com. */
.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 8vw, 6rem);
    color: var(--band-ink);
    background:
        radial-gradient(68.75rem 32.5rem at 12% -20%, var(--band-glow) 0%, rgb(3 4 94 / 0%) 62%),
        var(--band);
    border-block-end: 1px solid var(--band-line);
}

.rtl .hero {
    background:
        radial-gradient(68.75rem 32.5rem at 88% -20%, var(--band-glow) 0%, rgb(3 4 94 / 0%) 62%),
        var(--band);
}

.hero h1 { color: var(--band-ink); }
.hero .lead { color: var(--band-body); }

.hero-inner { display: grid; gap: 2.5rem; }
.hero-copy .lead { font-size: 1.2rem; max-width: 50ch; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-block: 2rem 1.25rem;
}

.hero-hint { color: var(--band-label); font-size: 0.9rem; }

.hero kbd {
    background: transparent;
    color: var(--band-body);
    border-color: rgb(144 224 239 / 45%);
}

/* Hero figures: a hairline grid, 1px gaps over the line colour. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
}

.stat-row li {
    padding: 1.25rem 1.35rem;
    background: var(--paper-alt);
    color: var(--ink-soft);
}

.hero .stat-row { background: var(--band-line); border-color: var(--band-line); }
.hero .stat-row li { background: var(--band); color: var(--band-body); }

.stat-value {
    display: block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--machine);
    margin-block-end: 0.35rem;
}

.hero .stat-value { color: var(--band-accent); }

.stat-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* The honesty section. Deliberately styled as a notice rather than hidden in
   body copy — it is the product's central claim about its own limits: a white
   panel on the ground with a strong rule on its start edge. */
.section-notice > .container {
    width: calc(100% - 2 * var(--gutter));
    padding: clamp(1.5rem, 4vw, 2.6rem);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--notice-rule);
    color: var(--ink);
}

.section-notice h2 { color: var(--notice); }
.section-notice .muted { color: var(--ink-soft); }

.split { display: grid; gap: 2.5rem; }

/* A grid item's automatic minimum width is its content's width, so one long
   unbreakable line — the install snippet — would stretch its column past the
   viewport and scroll the whole page sideways on a phone. With a zero minimum
   the column keeps its track size and pre.code scrolls inside itself. */
.split > *,
.hero-inner > * { min-width: 0; }

/* --- Cards --------------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-block-start: 1.75rem;
}

.card-grid-tight { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* A white card with a hairline border and a navy rule on top that turns cyan
   on hover, as the product cards on elixtechs.com do. */
.card {
    padding: 1.6rem 1.5rem 1.75rem;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-block-start: 3px solid var(--rule-strong);
    transition: border-color 0.15s;
}

.card:hover { border-block-start-color: var(--elx-cyan); }

/* On a surface band a surface card would vanish, so it drops to the ground. */
.section-alt .card { background: var(--paper); }

.card h3 { margin-block-start: 0; }
.card p { color: var(--ink-soft); }
.card p:last-child { margin-block-end: 0; }
.card-compact { padding: 1.1rem 1.25rem; }
.card-compact h3 { font-size: 1.05rem; margin-block-end: 0.35rem; }

/* --- Feature list -------------------------------------------------------- */

.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0 1.75rem;
    margin-block: 0 2.25rem;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--line);
}

.feature-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-block: 0.6rem;
    border-block-end: 1px solid var(--line);
}

.feature-name { font-weight: 500; }
.feature-id { font-size: 0.76rem; color: var(--ink-faint); background: none; padding: 0; }

.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.12rem 0.5rem;
    border: 1px solid var(--line);
    background: var(--machine-wash);
    color: var(--machine-ink);
}

.rtl .tag { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 0.75rem; }

/* --- Plans --------------------------------------------------------------- */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-block-start: 3px solid var(--rule-strong);
}

/* The featured plan is a navy band in both schemes, so it is marked by
   lightness and depth — not by hue alone. Fixed band colours rather than
   roles, because it is the same dark panel either way. */
.plan-featured {
    background: var(--band);
    color: var(--band-body);
    border-color: var(--band);
    border-block-start-color: var(--band-accent);
}

.plan h2 { margin: 0; font-size: 1.4rem; }
.plan-featured h2 { color: var(--band-ink); }
.plan-price { margin: 0; }
.plan-amount { font-family: var(--font-mono); font-size: 2.3rem; line-height: 1.1; }
.plan-price-text { font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem; }
.plan-period { color: var(--ink-faint); font-size: 0.9rem; }
.plan-featured .plan-amount { color: var(--band-ink); }
.plan-featured .plan-period { color: var(--band-label); }

.plan-features {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    font-size: 0.95rem;
}

/* Included and excluded carry a text glyph as well as a colour, because a
   colour-only distinction is invisible in greyscale and to many readers. */
.plan-features .yes::before,
.plan-features .no::before {
    content: "✓ ";
    font-weight: 700;
    color: var(--good);
}

.plan-features .no {
    color: var(--ink-faint);
    text-decoration: line-through;
}

.plan-features .no::before { content: "✕ "; color: var(--bad); }

.plan-featured .plan-features .yes::before { color: var(--band-accent); }
.plan-featured .plan-features .no { color: var(--band-label); }
.plan-featured .plan-features .no::before { color: var(--band-bad); }

.plan .button { margin-block-start: auto; }

/* --- Tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-block-end: 1.5rem; }

.data-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.data-table th,
.data-table td {
    padding: 0.65rem 0.75rem;
    border-block-end: 1px solid var(--line);
    /* Logical, so the Arabic table aligns from the right without a second rule. */
    text-align: start;
    vertical-align: top;
}

.data-table thead th {
    border-block-end: 1px solid var(--rule-strong);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-ink);
}

.data-table tbody tr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* --- Forms --------------------------------------------------------------- */

.form { max-width: 34rem; margin-block-end: 1rem; }

.field { margin-block-end: 1.15rem; }

.field label {
    display: block;
    margin-block-end: 0.35rem;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--ink);
}

.field input,
.field select,
.field textarea {
    inline-size: 100%;
    min-block-size: 2.9rem;
    padding: 0.6rem 0.9rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    caret-color: var(--brand-ink);
    background: var(--field);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-soft); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--elx-cyan) 25%, transparent);
    outline-offset: 1px;
}

.field textarea { resize: vertical; min-block-size: 7rem; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field .input-validation-error { border-color: var(--bad); background: var(--bad-wash); }

.field-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
}

.field .field-check input,
.field-check input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    min-block-size: 0;
    margin: 0.25rem 0 0;
    padding: 0;
    accent-color: var(--brand-ink);
}

.field-check label { margin: 0; font-weight: 400; color: var(--ink); }

.hint { font-size: 0.86rem; color: var(--ink-faint); font-weight: 400; margin-block: 0.35rem 0; }

.field-error { display: block; color: var(--bad); font-size: 0.88rem; margin-block-start: 0.35rem; font-weight: 600; }
.field-error:empty { display: none; }

.notice {
    padding: 1rem 1.25rem;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--elx-cyan);
    margin-block-end: 1.5rem;
}

.notice h2 { font-size: 1.1rem; margin-block-start: 0; }
.notice ul { margin: 0; padding-inline-start: 1.2rem; }
.notice-error { background: var(--bad-wash); color: var(--ink); border-inline-start: 4px solid var(--bad); }
.notice-success { background: var(--good-wash); color: var(--ink); border-inline-start: 4px solid var(--good); }

.summary { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin-block-end: 1.5rem; }
.summary dt { color: var(--ink-faint); font-size: 0.9rem; }
.summary dd { margin: 0; font-weight: 600; }

/* --- Auth ---------------------------------------------------------------- */

.auth-section { padding-block: clamp(2rem, 6vw, 4rem); }

.auth-card {
    max-width: 30rem;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-block-start: 3px solid var(--rule-strong);
}

.auth-card-wide { max-width: 38rem; }
.auth-card h1 { font-size: 2rem; }
.auth-card .lead { font-size: 1.02rem; }
.auth-card .button-large { inline-size: 100%; }
.auth-alt { font-size: 0.95rem; color: var(--ink-soft); margin-block-end: 0; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
    margin-block-start: 2rem;
    padding-block: 3rem 1.5rem;
    background: var(--band);
    border-block-start: 1px solid var(--band-line);
    color: var(--band-body);
    font-size: 0.94rem;
}

.site-footer a { color: var(--band-body); }
.site-footer a:hover { color: #fff; }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2rem;
}

.footer-brand { margin-block-end: 0.75rem; }
.footer-muted { color: var(--band-label); margin-block-end: 0.25rem; }

.footer-heading {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--band-label);
    margin-block-end: 0.8rem;
}

.footer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    margin-block-start: 2rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--band-line);
    color: var(--band-label);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.rtl .footer-bottom { font-family: var(--font-body); letter-spacing: 0; font-size: 0.84rem; }

.footer-bottom p { margin: 0; }

/* --- Wider screens ------------------------------------------------------- */

@media (min-width: 52rem) {
    .hero-inner { grid-template-columns: 1.35fr 1fr; align-items: center; }
    .hero .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 60rem) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        background: transparent;
        border: 1px solid rgb(144 224 239 / 30%);
        cursor: pointer;
    }

    .nav-toggle:hover { border-color: var(--elx-sky); }

    .nav-toggle-bars,
    .nav-toggle-bars::before,
    .nav-toggle-bars::after {
        display: block;
        inline-size: 1.1rem;
        block-size: 2px;
        background: var(--band-body);
        content: "";
        position: relative;
    }

    .nav-toggle-bars::before { inset-block-start: -6px; position: absolute; }
    .nav-toggle-bars::after { inset-block-start: 6px; position: absolute; }

    .site-nav { margin-inline-start: auto; order: 3; }

    .nav-list {
        display: none;
        position: absolute;
        inset-inline: var(--gutter);
        inset-block-start: 4.25rem;
        flex-direction: column;
        gap: 0;
        padding: 0.4rem 1rem;
        background: var(--band);
        border: 1px solid var(--band-line);
        box-shadow: var(--shadow-lg);
    }

    .nav-list a { padding-block: 0.7rem; border-block-end: 1px solid var(--band-line); }
    .nav-list li:last-child a { border-block-end-color: transparent; }
    .nav-list a[aria-current="page"] { border-block-end-color: var(--elx-cyan); }

    /* Driven by the button's aria-expanded rather than a class, so the state a
       screen reader is told is the same state that shows the menu. */
    .nav-toggle[aria-expanded="true"] + .nav-list { display: flex; }

    .header-actions .button-ghost { display: none; }
}

@media (max-width: 30rem) {
    .brand-sub { display: none; }
    .header-inner { gap: 0.4rem; }
    .header-actions { gap: 0.25rem; }
    .header-actions .lang-switch { padding-inline: 0.5rem; }
    .header-actions .button { padding-inline: 0.9rem; }
    .footer-bottom { flex-direction: column; }
}

/* A phone has no room for the wordmark beside the theme toggle, the language
   switch, the trial button and the menu. The mark stays, and it carries the
   brand name as its alt text, so the link keeps its name. */
@media (max-width: 26rem) {
    .site-header .brand-text { display: none; }
}

@media (max-width: 22rem) {
    .header-actions .lang-switch { padding-inline: 0.4rem; }
    .header-actions .button { padding-inline: 0.7rem; font-size: 0.9rem; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
    .site-header, .site-footer, .skip-link, .hero-actions { display: none; }
    .hero { background: #fff; color: #000; border: 0; }
    .hero h1, .hero .lead, .hero .stat-value, .hero .stat-row li { color: #000; background: #fff; }
    body { font-size: 11pt; color: #000; background: #fff; }
    pre.code { background: #fff; color: #000; border: 1px solid #999; }
    a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}