/* ============================================================================
   hub.css — the مستشار تك front page (mostashar.tech)
   ============================================================================
   Colours: Tibyan's ليموني design. This page cannot link the app's
   stylesheets, so the values are copied here as literals; each token names
   the lime.css token it came from (office: static/css/designs/lime.css).
   When the design moves, move both.

   Every colour on the page is a token below, and every token has a light and
   a dark value. Dark applies when hub.js (or the pre-paint script) stamps
   data-theme="dark", and — for a reader with no JavaScript, where nothing is
   stamped — when the OS prefers dark.

   Logical properties only (inline/block, start/end), so the one file serves
   the Arabic page (rtl) and the English one (ltr). Arrows that point "forward"
   carry .i-flip and are mirrored by :dir(rtl), which follows the element's own
   direction: the English offer bar on the Arabic page keeps its arrows.

   /hub/cairo.38b508fa5b.woff2 is replaced by build.mjs with the font's hashed file name.
   ============================================================================ */

@font-face {
    font-family: "Cairo";
    src: url("/hub/cairo.38b508fa5b.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --paper: #f3f6f4;       /* --bg */
    --card: #ffffff;        /* --card */
    --ink: #212e32;         /* --text */
    --ink-2: #576a6f;       /* --text-secondary */
    --line: #cddad2;        /* --border */
    --fill: #0b333d;        /* --primary-fill-solid: a button's background */
    --on-fill: #ffffff;     /* --on-primary-fill */
    --lime: #b6e561;        /* --nav-active-a: the brand as an ACCENT, never as text on light */
    --on-lime: #0f1419;     /* --nav-active-text */
    --brand: #4f6a06;       /* --primary: the brand as TEXT */
    --teal: #0b333d;        /* --accent */
    --teal-ink: #0b333d;    /* the accent as text */
    --logo-bg: #0b333d;     /* --logo-bg */
    --logo-fg: #b6e561;     /* --logo-fg */
    --band: #0b333d;        /* --sidebar-bg: the dark contact band, dark in both themes */
    --band-ink: #ffffff;    /* --sidebar-text */
    --band-ink-2: #d3e6ec;
    --ok-ink: #065f46;      /* office _variables.css --success-text */
    --warn-ink: #92400e;    /* office --warning-text */
    --danger: #dc2626;
    --focus: #0b333d;
    --shadow: 0 14px 40px rgb(11 51 61 / 0.10);
    --shadow-sm: 0 4px 14px rgb(11 51 61 / 0.08);
    --hl: color-mix(in srgb, var(--lime) 70%, transparent);  /* the headline's marker */
    --lime-mix: 40%;        /* how much lime tints a chip; far less on a dark surface */

    --r-lg: 24px;
    --r-md: 18px;
    --r-sm: 12px;
    --r-pill: 999px;
    --topbar-h: 68px;
    --gutter: 1rem;
    --font: "Cairo", "Segoe UI", "SF Arabic", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
}

/* Dark, stamped. The same block again under the media query below, for the
   no-JavaScript reader; keep the two in step. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0b333d;
    --card: #143a44;
    --ink: #ffffff;
    --ink-2: #f7f9f9;
    --line: #21525f;
    --fill: #b6e561;
    --on-fill: #0f1419;
    --brand: #b6e561;
    --teal: #8fd3e0;
    --teal-ink: #8fd3e0;
    --logo-bg: #072229;
    --band: #072229;
    --ok-ink: #34d399;
    --warn-ink: #fcd34d;
    --focus: #b6e561;
    --shadow: 0 14px 40px rgb(0 0 0 / 0.45);
    --shadow-sm: 0 4px 14px rgb(0 0 0 / 0.35);
    --hl: color-mix(in srgb, var(--lime) 38%, transparent);
    --lime-mix: 16%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #0b333d;
        --card: #143a44;
        --ink: #ffffff;
        --ink-2: #f7f9f9;
        --line: #21525f;
        --fill: #b6e561;
        --on-fill: #0f1419;
        --brand: #b6e561;
        --teal: #8fd3e0;
        --teal-ink: #8fd3e0;
        --logo-bg: #072229;
        --band: #072229;
        --ok-ink: #34d399;
        --warn-ink: #fcd34d;
        --focus: #b6e561;
        --shadow: 0 14px 40px rgb(0 0 0 / 0.45);
        --shadow-sm: 0 4px 14px rgb(0 0 0 / 0.35);
        --hl: color-mix(in srgb, var(--lime) 38%, transparent);
        --lime-mix: 16%;
    }
}

/* ── Base ───────────────────────────────────────────────────────────── */

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

html {
    scroll-padding-block-start: calc(var(--topbar-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    min-block-size: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
}

main:focus { outline: none; }
h1, h2, h3, p { overflow-wrap: break-word; }
/* No heading ends on a lone word («وقتك» alone on a third line). */
h1, h2, h3 { text-wrap: balance; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 6px;
}

.wrap {
    inline-size: 100%;
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (min-width: 576px) { :root { --gutter: 1.5rem; } }
@media (min-width: 1200px) { :root { --gutter: 2rem; } }

.skip {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -200px;
    z-index: 100;
    padding: 0.7rem 1rem;
    border-radius: var(--r-sm);
    background: var(--fill);
    color: var(--on-fill);
    font-weight: 700;
    text-decoration: none;
}
.skip:focus { inset-block-start: 1rem; }

/* The inline sprite holds the icon and mark <symbol>s. Never display:none —
   a gradient inside a display:none <svg> stops painting in Chromium. */
.sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
}

.i {
    block-size: 1em;
    inline-size: auto;
    flex: none;
    fill: currentColor;
    overflow: visible;
}
.i-flip:dir(rtl) { transform: scaleX(-1); }

.mk {
    display: block;
    flex: none;
    inline-size: 40px;
    block-size: 40px;
}
.mk-box { fill: var(--logo-bg); }
.mk-glyph { fill: var(--logo-fg); }

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-block-size: 46px;
    padding: 0.65rem 1.35rem;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-lg { min-block-size: 52px; padding-inline: 1.6rem; font-size: 1.05rem; }
.btn-sm { min-block-size: 40px; padding: 0.4rem 0.95rem; font-size: 0.92rem; border-radius: 10px; }

.btn-fill { background: var(--fill); color: var(--on-fill); box-shadow: var(--shadow-sm); }
.btn-fill:hover { background: color-mix(in srgb, var(--fill) 86%, #000); }

.btn-line { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--ink-2); }

.btn-lime { background: var(--lime); color: var(--on-lime); }
.btn-lime:hover { background: #a3d84e; }  /* --nav-active-b */

.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }

.icon-btn {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.icon-btn:hover { border-color: var(--ink-2); }

/* The theme button shows the theme it switches TO. Without JavaScript it can
   do nothing, so it is not drawn at all (nothing has stamped data-theme). */
:root:not([data-theme="dark"]) .t-sun,
:root[data-theme="dark"] .t-moon { display: none; }
:root:not([data-theme]) .theme-btn { display: none; }

/* ── Top bar ───────────────────────────────────────────────────────── */

.topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--line);
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: var(--topbar-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-inline-size: 0;
    margin-inline-end: auto;
    color: var(--ink);
    text-decoration: none;
}
.brand-name { font-size: 1.15rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }

.topnav { display: none; gap: 1.75rem; margin-inline-end: auto; }
.topnav a {
    padding-block: 0.5rem;
    color: var(--ink-2);
    font-weight: 600;
    text-decoration: none;
}
.topnav a:hover { color: var(--ink); }

.actions { display: flex; align-items: center; gap: 0.5rem; }
.signin-wrap { display: none; }
.top-demo { display: none; }

.lang-btn span { font-size: 1.05rem; }

/* ── Menus (disclosure: a button and the links it reveals) ─────────── */

.menu-wrap { position: relative; }

.menu {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: 60;
    inline-size: max-content;
    min-inline-size: 290px;
    max-inline-size: min(340px, calc(100vw - 2 * var(--gutter)));
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--shadow);
}
.menu[hidden] { display: none; }
.menu:focus { outline: none; }

.menu-head {
    margin: 0.35rem 0.6rem 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-2);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 52px;
    padding: 0.55rem 0.6rem;
    border-radius: var(--r-sm);
    color: var(--ink);
    text-decoration: none;
}
a.menu-item:hover { background: color-mix(in srgb, var(--lime) 18%, var(--card)); }
.menu-item .mk { inline-size: 36px; block-size: 36px; }
.menu-item-text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.35; }
.menu-item-text b { font-size: 0.98rem; }
.menu-item-text small { font-size: 0.8rem; color: var(--ink-2); }

.soon {
    margin-inline-start: auto;
    padding: 0.15rem 0.6rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--lime) var(--lime-mix), var(--card));
    color: var(--brand);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.menu-nav { display: grid; padding-block-end: 0.4rem; margin-block-end: 0.4rem; border-block-end: 1px solid var(--line); }
.menu-nav a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 0.6rem;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.menu-nav a:hover { background: color-mix(in srgb, var(--lime) 18%, var(--card)); }
.menu-demo { inline-size: 100%; margin-block-start: 0.5rem; }

/* ── The language offer: a floating card, so it never shifts the page ── */

.offer {
    position: fixed;
    inset-inline: var(--gutter);
    inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    max-inline-size: 560px;
    margin-inline: auto;
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    background: var(--band);
    color: var(--band-ink);
    box-shadow: var(--shadow);
    --focus: var(--lime);
}
.offer[hidden] { display: none; }
.offer-text { flex: 1 1 14rem; margin: 0; font-weight: 600; }
.offer-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.offer .btn-ghost { border-color: rgb(255 255 255 / 0.45); color: var(--band-ink); }

/* ── Hero ──────────────────────────────────────────────────────────── */

/* The copy column takes the larger share: the English headline is twice the
   Arabic one's length, and at an even split it broke into four short lines. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 3rem;
    align-items: center;
    padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.25rem, 5vw, 3.75rem);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--brand);
    font-size: 0.92rem;
    font-weight: 700;
}
.eyebrow::before {
    content: "";
    flex: none;
    inline-size: 22px;
    block-size: 3px;
    border-radius: 2px;
    background: var(--lime);
}

.hero h1 {
    margin: 0.8rem 0 1rem;
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.22;
}
/* A marker stroke behind the second half of the headline. As a background on
   the inline <em> it follows the words onto a second line, where a pseudo-
   element would not. The words keep the text colour: lime is never text. */
.hero h1 em {
    font-style: normal;
    padding-inline: 0.08em;
    background-image: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.lead {
    margin: 0;
    color: var(--ink-2);
    font-size: 1.1rem;
    line-height: 1.85;
}
.hero .lead { max-inline-size: 36rem; font-size: 1.15rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.6rem; }

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-2);
    font-size: 0.93rem;
    font-weight: 600;
}
.trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.trust .i { color: var(--brand); }

.hero-art { position: relative; min-block-size: 360px; }
.hero-art::before {
    content: "";
    position: absolute;
    inset: 6% 10%;
    border-radius: 40%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--lime) 34%, transparent), transparent);
    filter: blur(12px);
}

.win {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    inline-size: 78%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--shadow);
}
.win .mk { inline-size: 46px; block-size: 46px; }
.win-text { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.win-text b { font-size: 1.02rem; line-height: 1.4; }
.win-text > span { color: var(--ink-2); font-size: 0.85rem; }
.win-tib { inset-inline-start: 0; inset-block-start: 8%; }
.win-mos { inset-inline-end: 0; inset-block-end: 8%; }
.pill {
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-start: -0.8rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--r-pill);
    background: var(--lime);
    color: var(--on-lime);
    font-size: 0.75rem;
    font-weight: 700;
}
.win-mos .pill { background: var(--teal); color: var(--card); }

/* ── A product section ─────────────────────────────────────────────── */

.prod {
    --surface: var(--paper);
    padding-block: clamp(2.75rem, 6vw, 4.75rem);
}
.prod-alt {
    --surface: var(--card);
    background: var(--card);
    border-block: 1px solid var(--line);
}
[data-product="tibyan"] { --p: var(--lime); --pt: var(--brand); }
[data-product="mostashar"] { --p: var(--teal); --pt: var(--teal-ink); }

.prod-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 3rem;
    align-items: center;
}
.prod-flip .prod-copy { order: 2; }

.prod-head { display: flex; align-items: center; gap: 0.9rem; margin: 0.8rem 0 1rem; }
.prod-head .mk { inline-size: 56px; block-size: 56px; }
.prod h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.32;
}
.prod h2 small {
    display: block;
    margin-block-start: 0.3rem;
    color: var(--pt);
    font-size: 0.95rem;
    font-weight: 700;
}

.bens { display: grid; gap: 1.15rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ben { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.ben-ic {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--p) 26%, var(--surface));
    color: var(--pt);
    font-size: 1.05rem;
}
.ben h3 { margin: 0 0 0.15rem; font-size: 1.05rem; font-weight: 700; }
.ben p { margin: 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.75; }

.prod-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-block-start: 1.8rem; }
.prod-login { flex-basis: 100%; margin: 0.15rem 0 0; color: var(--ink-2); font-size: 0.93rem; }
.prod-login a { color: var(--pt); font-weight: 700; text-underline-offset: 3px; }

/* ── Drawn screens (decorative, aria-hidden) ───────────────────────── */

/* A screen sits on the section's surface in the OTHER surface colour, and its
   rows and tiles take the section's own again, so each layer reads. */
.shot {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow);
    --inner: var(--paper);
}
.prod-alt .shot { background: var(--paper); --inner: var(--card); }

.shot-tib { display: grid; grid-template-columns: 56px minmax(0, 1fr); min-block-size: 330px; }
.shot-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding-block: 1rem;
    background: var(--band);
    color: #bcdce4;   /* lime.css --sidebar-icon */
    font-size: 0.95rem;
}
.shot-rail .mk { inline-size: 30px; block-size: 30px; }
.shot-rail .mk-box { fill: #072229; }
.shot-body { padding: 1.1rem; min-inline-size: 0; }
.shot-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.9rem; font-weight: 700; }
.dots { display: flex; gap: 4px; }
.dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line); }
.shot-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-block-end: 0.9rem; }
.shot-stat {
    display: grid;
    gap: 0.1rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--inner);
}
.shot-stat .i { color: var(--brand); }
.shot-stat strong { font-size: 1.3rem; line-height: 1.15; }
.shot-stat span { color: var(--ink-2); font-size: 0.78rem; line-height: 1.35; }
.shot-rows { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.shot-rows li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--inner);
    font-size: 0.9rem;
}
.shot-time { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.shot-text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
    margin-inline-start: auto;
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-pill);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.tag-ok { background: color-mix(in srgb, var(--ok-ink) 14%, var(--inner)); color: var(--ok-ink); }
.tag-up { background: color-mix(in srgb, var(--lime) var(--lime-mix), var(--inner)); color: var(--brand); }

.shot-mos { display: grid; align-content: start; gap: 0.75rem; min-block-size: 330px; padding: 1.1rem; }
.chat-doc {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 0.9rem;
    font-weight: 600;
}
.chat-doc .i { color: var(--danger); }
.chat-doc small { margin-inline-start: auto; font-weight: 500; }
.msg { max-inline-size: 88%; padding: 0.7rem 0.95rem; border-radius: 14px; font-size: 0.95rem; line-height: 1.7; }
.msg p { margin: 0; }
.msg-user { margin-inline-start: auto; border-end-end-radius: 4px; background: var(--fill); color: var(--on-fill); }
.msg-ai { border: 1px solid var(--line); border-end-start-radius: 4px; background: var(--inner); }
.cites { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.6rem; }
.cite {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--teal) 14%, var(--inner));
    color: var(--teal-ink);
    font-size: 0.78rem;
    font-weight: 700;
}
.cite-warn { background: color-mix(in srgb, #f59e0b 22%, var(--inner)); color: var(--warn-ink); }
.chat-meta { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--ink-2); font-size: 0.82rem; }
.chat-meta .i { color: var(--brand); }

/* ── Why us ────────────────────────────────────────────────────────── */

.why { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.sec-title {
    margin: 0.7rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.32;
}
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-block-start: 1.6rem; }
.why-card {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
}
.why-card > .i { color: var(--brand); font-size: 1.35rem; }
.why-card h3 { margin: 0.6rem 0 0.3rem; font-size: 1.1rem; font-weight: 700; }
.why-card p { margin: 0; color: var(--ink-2); font-size: 0.96rem; line-height: 1.75; }

/* ── Contact band — dark in both themes ────────────────────────────── */

.contact { padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2.75rem, 6vw, 4.75rem); }
.band {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2rem;
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--r-lg);
    background: var(--band);
    color: var(--band-ink);
    --focus: var(--lime);
}
.band::before {
    content: "";
    position: absolute;
    inset-inline-end: -10%;
    inset-block-start: -40%;
    inline-size: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    /* 20%, not more: the contact labels sit over this glow, and at 28% their
       pale text measured 4.29:1 on its brightest point. */
    background: radial-gradient(closest-side, color-mix(in srgb, var(--lime) 20%, transparent), transparent);
    pointer-events: none;
}
.band-copy, .contact-items { position: relative; }
.band .eyebrow { color: var(--lime); }
.band h2 { margin: 0.6rem 0; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.32; }
.band p { margin: 0; color: var(--band-ink-2); line-height: 1.85; }
.band .btn-lime { margin-block-start: 1.35rem; }
.contact-items { display: grid; gap: 0.75rem; }
.contact-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.08);
    color: var(--band-ink);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.contact-item:hover { background: rgb(255 255 255 / 0.14); }
.contact-item > .i { inline-size: 1.4rem; color: var(--lime); font-size: 1.1rem; }
.contact-item small { display: block; color: var(--band-ink-2); font-size: 0.78rem; }
.contact-item b { font-size: 1.02rem; }

/* ── Footer ────────────────────────────────────────────────────────── */

.footer { border-block-start: 1px solid var(--line); }
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 1.25rem;
    color: var(--ink-2);
    font-size: 0.92rem;
}
.footer-copy { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-links a { padding-block: 0.35rem; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* ── Widths ────────────────────────────────────────────────────────── */

@media (min-width: 576px) {
    .top-demo { display: inline-flex; }
}

@media (min-width: 992px) {
    .topnav { display: flex; }
    .signin-wrap { display: block; }
    .more-wrap { display: none; }
}

@media (max-width: 991.98px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .hero-art { display: none; }
}

@media (max-width: 860px) {
    .prod-grid, .band { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .prod-flip .prod-copy { order: 0; }
    .why-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .brand .mk { inline-size: 36px; block-size: 36px; }
    .cta-row .btn, .prod-ctas .btn { inline-size: 100%; }
    .shot-rows li { flex-wrap: wrap; }
    /* Wrap rather than cut: an ellipsis sliced "17-2026" down to "…-2026". */
    .shot-text { flex: 1 1 60%; white-space: normal; overflow: visible; }
}

/* A finger needs a 44px target; the floor follows the input device, not the
   width, so a tablet gets it too. */
@media (pointer: coarse) {
    .icon-btn { inline-size: 44px; block-size: 44px; }
    .btn-sm { min-block-size: 44px; }
    .brand { min-block-size: 44px; }
    .footer-links a, .topnav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: 44px;
        min-inline-size: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .icon-btn, .contact-item { transition: none; }
}