/* ============================================
   WHMCS by Apple — Design System
   Cupertino / macOS Ventura+
   ============================================ */

/* --- Bundled font: Inter (self-hosted, SIL OFL) ---
   One variable file (weights 100-900) covers the whole type scale with no
   external request. Inter is the theme's default typeface (see --font-family)
   for a consistent SF-Pro-like look on every platform; the system stack stays
   as the fallback if the font fails to load. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2');
}

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --color-bg: #fbfbfd;
    --color-surface: #ffffff;
    --color-surface-secondary: #f5f5f7;
    --color-surface-tertiary: #fafafa;
    --color-border: #e8e8ed;
    --color-border-light: #f0f0f5;
    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #86868b;
    --color-text-quaternary: #aeaeb2;
    --color-accent: #0071e3;
    --color-accent-hover: #0077ED;
    --color-accent-light: rgba(0, 113, 227, 0.08);
    --color-link: #0066cc;
    --color-link-hover: #0071e3;
    --color-border-card: rgba(0, 0, 0, 0.04);
    --color-green: #30d158;
    --color-green-bg: rgba(48, 209, 88, 0.10);
    --color-green-text: #248a3d;
    --color-orange: #ff9f0a;
    --color-orange-bg: rgba(255, 159, 10, 0.10);
    --color-orange-text: #c27400;
    --color-red: #ff3b30;
    --color-red-bg: rgba(255, 59, 48, 0.10);
    --color-red-text: #d70015;
    --color-blue-bg: rgba(0, 113, 227, 0.08);
    --color-blue-text: #0071e3;
    --color-gray-bg: rgba(142, 142, 147, 0.12);
    --color-gray-text: #6e6e73;
    /* Sidebar icon tiles (Apple system-color palette) */
    --color-icon-blue: #007aff;
    --color-icon-purple: #af52de;
    --color-icon-orange: #ff9500;
    --color-icon-green: #34c759;
    --color-icon-red: #ff3b30;
    --color-icon-teal: #5ac8fa;
    --color-icon-gray: #8e8e93;
    --color-icon-indigo: #5856d6;
    --color-icon-pink: #ff2d55;
    /* Free slots the buyer sets on Styles > Colors, offered when painting a
       dashboard block. MUST mirror core/config/colors.php 'Block accents' or
       the admin panel's "is this an override?" comparison desyncs. */
    --color-block-1: #5856d6;
    --color-block-2: #0f9d58;
    --color-block-3: #d9480f;
    --sidebar-width: 260px;
    /* The admin's "Maximum width" writes THIS token (Hooks::buildLayoutHead
       emits :root{--content-max-width:Npx}). The container scale below derives
       from it -- see the CONTENT AREA section. Must stay a literal length: the
       scale reads it, so pointing it at --w-base would be circular and CSS
       would invalidate the whole chain to `none`. */
    --content-max-width: 1120px;
    --content-pad-x: 48px;
    --sidebar-bg: var(--_sb-bg, rgba(246, 246, 248, 0.80));
    --sidebar-item-hover: rgba(0, 0, 0, 0.04);
    --sidebar-item-active: rgba(0, 0, 0, 0.06);
    --sidebar-icon-bg: #e8e8ed;

    /* Ink that sits ON a saturated accent fill -- button labels, badge text,
       the avatar monogram. Its own token rather than --color-surface: they
       share #ffffff in light mode but are different ideas, and surface goes
       #2c2c2e in dark.
       MEASURED, AND CURRENTLY WRONG IN DARK MODE. The light accent #0071e3 has
       luminance 0.1736, just below the 0.179129 ink crossover, so white is
       correct there (4.70:1). The dark accent #2997ff is 0.2982, well above it,
       where white collapses to 3.02:1 and black would give 6.96.

       Deriving this from --color-accent with the crossover primitive fixes it
       in one line and would hold for any accent a buyer picks -- but it is NOT
       done here, for two reasons worth stating. First, --color-on-accent is
       redeclared in the dark block below, which scores (0,1,1) and beats a
       :root derivation, so the dark literal has to be deleted at the same time.
       Second, and the real blocker: it would flip the avatar monogram to black
       on the blue-purple gradient in dark mode, which is a visible design
       change rather than a contrast fix.

       Note this is NOT specific to this token: --btn-primary-color is #ffffff
       in both modes too, so every primary button in the theme measures 3.02:1
       in dark. Same root cause, same one-line fix, same design call. */
    --color-on-accent: #ffffff;

    /* The user monogram gradient. Was hardcoded in .sidebar-avatar and
       .topbar-avatar, with six html[data-palette] variants that CANNOT fire in
       production -- that attribute is set only from a ?palette= query param
       (header.tpl:183-189), never by the admin -- so every buyer has always
       seen exactly these two colours and had no way to change them. */
    --color-avatar-from: #007aff;
    --color-avatar-to: #5856d6;
    /* ===== Sidebar surface set ==========================================
       Every colour the sidebar / rail / mobile drawer paints, as its own
       token. Each DEFAULTS to the page token the rule used to name, so the
       render is unchanged today and dark mode still re-derives: a custom
       property computes on <html>, and [data-theme="dark"] below redeclares
       the page tokens on that SAME element. Do NOT copy these into the dark
       block -- that freezes them and breaks the derivation.

       Override any of them to recolour the nav WITHOUT touching the page.
       That is what a dark-sidebar style preset does. */
    --sidebar-text: var(--_sb-ink, var(--color-text-primary));
    --sidebar-text-secondary: var(--_sb-txt2, var(--color-text-secondary));
    --sidebar-text-muted: var(--_sb-txt3, var(--color-text-tertiary));
    --sidebar-text-faint: var(--_sb-txt4, var(--color-text-quaternary));
    --sidebar-border: var(--_sb-border, var(--color-border));
    --sidebar-panel-bg: var(--_sb-base, var(--color-surface));
    --sidebar-field-bg: var(--_sb-field, var(--color-surface-secondary));
    --sidebar-scroll-thumb: var(--_sb-thumb, rgba(0, 0, 0, 0.15));
    /* The two stops of the Gradient nav style. Fully transparent by default,
       which is what keeps the composing rule in core-layout.css inert: it
       paints a transparent-to-transparent image over --sidebar-bg and nothing
       shows until the style is picked. They are COLOURS, not a gradient value,
       because Hooks::isColorValue rejects linear-gradient() on save and on
       emit -- see the note beside 'gradient' in core/config/colors.php. */
    --sidebar-grad-angle: 180deg;
    --sidebar-grad-from: rgba(0, 0, 0, 0);
    --sidebar-grad-to: rgba(0, 0, 0, 0);
    /* Private aliases for the two interactive fills. --sidebar-item-hover and
       --sidebar-item-active are MISNAMED: 137 declarations across 48 files
       read them from OUTSIDE the sidebar -- .subnav-item on 45 page
       stylesheets, .topbar-btn, .filter-tab, the .btn-secondary box-shadow,
       the .homepage-nav border, and most hp-* marketing buttons. Darkening
       those two to suit a nav would tint the entire product. Only sidebar
       rules read the two below, so only these are safe to repaint. */
    /* Public sidebar tokens. Each takes the DERIVED value from the tint
       block below when the buyer has picked a --sidebar-color, and otherwise
       falls back to the literal that has always shipped. See the tint block
       for why the fallback is what makes this a no-op. */
    --sidebar-item-hover-bg: var(--_sb-hover, var(--sidebar-item-hover));
    --sidebar-item-active-bg: var(--_sb-active, var(--sidebar-item-active));
    --sidebar-badge-bg: var(--_sb-badge, var(--color-gray-bg));
    --topbar-height: 44px;
    --topbar-bg: rgba(251, 251, 253, 0.72);

    /* ===== Navigation geometry ==========================================
       Admin Layouts page > Containers. GEOMETRY ONLY -- nav COLOUR is the 16
       sidebar/topbar rows on Styles > Colors and nav TYPE is the text/weight
       scale on Styles > Typography. Nothing here is editable
       in a second panel; a standalone Navigation panel was removed in ee9b6ef
       for exactly that reason (it re-exposed --sidebar-bg, which Colors owns).

       Every value below was a hardcoded literal until now, so each rule keeps
       its original number as the var() fallback: an install that never touches
       these renders byte-identically. Pure lengths, so none of them differs in
       dark mode and none is redeclared in the dark block.

       Which layout each one shapes is declared by that layout's manifest
       (core/layouts/main-menu/<name>/layout.php 'sizes'), which is what lets
       the admin row say "Applies to the Sidebar and Icon Rail layouts"
       without hardcoding a list that goes stale. */

    /* All four layouts. Four separate rules shipped the same 28px, so this is
       genuinely one control, not four. */
    --nav-logo-height: 28px;
    /* Sidebar + rail: the coloured tile behind a menu icon, and the glyph in
       it. Identical literals in core-theme.css and core-layout.css. */
    --nav-icon-size: 26px;
    --nav-icon-glyph: 15px;
    /* Rail layout only. --rail-width has FIVE consumers (the rail, both
       content gutters, and the flyout's left/right edge) -- they must move
       together or the flyout detaches from the rail it belongs to. */
    --rail-width: 80px;
    --rail-panel-width: 240px;
    /* Top-nav layout only. NOT --topbar-height: that token styles .topbar,
       which no template emits; the top layout's bar is .homepage-nav-inner and
       has always been a separate 44px literal. The product subnav and the
       mega-menu hang off this height, so all three move together. */
    --topnav-height: 44px;
    --topnav-icon-size: 14px;
    /* Soft resting shadow stands in for the removed 1px outline — reads as a hairline edge against the page bg */
    --shadow-card: 0 0 0 0.5px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-card-hover: 0 0 0 0.5px rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.06);
    --shadow-dropdown: 0 4px 32px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 12px;
    --radius-pill: 980px;
    /* Element (component shape) tokens — admin Styles > Elements overrides. */
    --card-radius: var(--radius-lg);  --card-shadow: var(--shadow-card);  --card-pad: 24px;
    --pagination-radius: var(--radius-sm);
    --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-medium: 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --font-family: system-ui, 'Inter', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* ui-monospace leads: the standard generic resolves to whatever the visitor's
       own OS uses as its UI monospace face, so no vendor font name is listed. */
    --font-mono: ui-monospace, Menlo, monospace;

    /* ===== Ramp palette (Lagom-style) ====================================
       A base color per family + color-mix-derived shades. Change a base (e.g.
       --brand-primary) and its whole ramp recomputes live. The button tokens
       below + the admin Buttons panel consume these, so the theme cascades
       from a handful of bases. ASCII-only comments (see CSS-skip quirk). */
    --brand-primary:   var(--color-accent);
    --brand-primary-lighter:   color-mix(in srgb, var(--brand-primary), #fff 30%);
    --brand-primary-lighter-2: color-mix(in srgb, var(--brand-primary), #fff 70%);
    --brand-primary-lighter-3: color-mix(in srgb, var(--brand-primary), #fff 84%);
    --brand-primary-lighter-4: color-mix(in srgb, var(--brand-primary), #fff 92%);
    --brand-primary-darker:    color-mix(in srgb, var(--brand-primary), #000 22%);

    --brand-secondary: #64748b;
    --brand-secondary-lighter:   color-mix(in srgb, var(--brand-secondary), #fff 30%);
    --brand-secondary-lighter-2: color-mix(in srgb, var(--brand-secondary), #fff 70%);
    --brand-secondary-lighter-3: color-mix(in srgb, var(--brand-secondary), #fff 84%);
    --brand-secondary-lighter-4: color-mix(in srgb, var(--brand-secondary), #fff 92%);
    --brand-secondary-darker:    color-mix(in srgb, var(--brand-secondary), #000 22%);

    --brand-info:      #0a84ff;
    --brand-info-lighter:   color-mix(in srgb, var(--brand-info), #fff 30%);
    --brand-info-lighter-2: color-mix(in srgb, var(--brand-info), #fff 70%);
    --brand-info-lighter-3: color-mix(in srgb, var(--brand-info), #fff 84%);
    --brand-info-lighter-4: color-mix(in srgb, var(--brand-info), #fff 92%);
    --brand-info-darker:    color-mix(in srgb, var(--brand-info), #000 22%);

    --brand-success:   var(--color-green);
    --brand-success-lighter:   color-mix(in srgb, var(--brand-success), #fff 30%);
    --brand-success-lighter-2: color-mix(in srgb, var(--brand-success), #fff 70%);
    --brand-success-lighter-3: color-mix(in srgb, var(--brand-success), #fff 84%);
    --brand-success-lighter-4: color-mix(in srgb, var(--brand-success), #fff 92%);
    --brand-success-darker:    color-mix(in srgb, var(--brand-success), #000 22%);

    --brand-warning:   var(--color-orange);
    --brand-warning-lighter:   color-mix(in srgb, var(--brand-warning), #fff 30%);
    --brand-warning-lighter-2: color-mix(in srgb, var(--brand-warning), #fff 70%);
    --brand-warning-lighter-3: color-mix(in srgb, var(--brand-warning), #fff 84%);
    --brand-warning-lighter-4: color-mix(in srgb, var(--brand-warning), #fff 92%);
    --brand-warning-darker:    color-mix(in srgb, var(--brand-warning), #000 22%);

    --brand-danger:    var(--color-red);
    --brand-danger-lighter:   color-mix(in srgb, var(--brand-danger), #fff 30%);
    --brand-danger-lighter-2: color-mix(in srgb, var(--brand-danger), #fff 70%);
    --brand-danger-lighter-3: color-mix(in srgb, var(--brand-danger), #fff 84%);
    --brand-danger-lighter-4: color-mix(in srgb, var(--brand-danger), #fff 92%);
    --brand-danger-darker:    color-mix(in srgb, var(--brand-danger), #000 22%);

    /* ===== Readable-ink primitive ========================================
       Given ANY fill colour, which of black or white is legible on it. The
       ramp above answers "a lighter/darker shade of this"; this answers "text
       on this", which is the other half of using a palette colour as a
       background.

       Why it lives here at :root, in CSS, and not in PHP: a custom property
       resolves per element at computed-value time, so one declaration here
       re-derives through ALL FOUR places a colour can be changed -- the
       [data-theme="dark"] block below, html[data-palette] in core-layout.css,
       the buyer's Styles > Colors overrides injected as <style
       id="hadrian-colors">, and any future scope nobody has thought of. PHP
       can see only the second of those: buildColorsHead emits just the tokens
       a buyer overrode, and it has no idea data-palette exists, so a
       server-computed ink is stale the moment someone picks a palette.

       HOW IT WORKS. color(from X srgb-linear r g b) converts the origin into
       linear-light space first, so r/g/b are already gamma-decoded and WCAG
       relative luminance is a plain dot product. Compare that against the
       exact white/black crossover -- solve 1.05/(Y+0.05) = (Y+0.05)/0.05 for
       Y* = sqrt(0.0525) - 0.05 = 0.179129 -- and clamp the difference to 0 or
       1. Below the crossover white wins, above it black does.

       This is exact rather than approximate, which matters more than it
       sounds. A perceptual-lightness threshold (oklch L) cannot work at all:
       WCAG contrast is linear-light and the two spaces diverge most at high
       chroma, exactly where saturated fills live, so the white-needing and
       black-needing sets OVERLAP in oklch L. No threshold in that space is
       correct; the best possible one still mis-inks 2% of sRGB, and a naive
       0.62 mis-inks 8.5% -- including this theme's own --color-block-2 and
       --color-block-3 defaults.

       Black, not the theme's usual #1d1d1f: white clears 4.5:1 up to
       Y = 0.18333 and black down to Y = 0.175, and those ranges overlap, so
       #fff/#000 provably covers every sRGB colour. #1d1d1f only works above
       Y = 0.2307, which would leave 9.6% of the gamut with NO compliant ink.

       The multiplier is 100000, not 1000: a shallower ramp leaves a narrow
       band of colours resolving to mid-grey text, which fails against both.
       The / 1 forces opacity, because color(from ...) otherwise inherits the
       origin's alpha and isColorValue permits rgba() overrides.

       --*-shade is the ink's OPPOSITE, for shading a gradient's far stop away
       from the text rather than always toward black. Always-darkening leaves
       21.6% of sRGB with no ink that clears 4.5:1 at BOTH stops.

       Consumers must sit inside the same @supports gate, or provide their own
       unconditional floor first. A custom property is not parse-validated --
       it accepts almost any token stream -- so an unsupported value here does
       NOT fall back to a previous declaration; it fails later, at the
       consumer, as invalid-at-computed-value-time. For an inherited property
       that means the parent's colour; for background it means transparent.
       ASCII-only comments (see CSS-skip quirk). */
    --ink-crossover: 0.179129;

    /* ===== Button tokens (consume the ramp; admin Buttons panel overrides
       these via select-colors dropdowns). Size tokens reference the type scale
       + radius so buttons track Typography until explicitly overridden.
       Per-variant defaults MUST mirror core/config/buttons.php. ========== */
    /* Geometry: em-relative padding so a button's HEIGHT derives from its
       (Typography-defined) font size. Defaults reproduce the ~36/30/44px Apple
       heights; pick a bigger font size and the whole button scales. */
    --btn-pad-y: 0.65em;  --btn-pad-x: 1.43em;  --btn-radius: var(--radius-pill);
    --btn-font-size: var(--text-md);  --btn-font-weight: var(--fw-medium);  --btn-line-height: 1.2;
    --btn-sm-font-size: var(--text-sm);  --btn-sm-font-weight: var(--fw-medium);  --btn-sm-line-height: 1.2;  --btn-sm-radius: var(--radius-pill);
    --btn-lg-font-size: var(--text-xl);  --btn-lg-font-weight: var(--fw-medium);  --btn-lg-line-height: 1.2;  --btn-lg-radius: var(--radius-pill);

    --btn-default-bg: transparent;                       --btn-default-border: var(--color-border);           --btn-default-color: var(--color-text-primary);
    --btn-default-hover-bg: var(--color-surface-secondary); --btn-default-hover-border: var(--color-border);  --btn-default-hover-color: var(--color-text-primary);
    --btn-default-active-bg: var(--color-surface-secondary); --btn-default-active-border: transparent;

    --btn-primary-bg: var(--brand-primary);              --btn-primary-border: var(--brand-primary);          --btn-primary-color: #ffffff;
    --btn-primary-hover-bg: var(--color-accent-hover);   --btn-primary-hover-border: var(--color-accent-hover); --btn-primary-hover-color: #ffffff;
    --btn-primary-active-bg: var(--color-accent-hover);  --btn-primary-active-border: var(--color-accent-hover);

    --btn-primary-faded-bg: var(--brand-primary-lighter-3);   --btn-primary-faded-border: var(--brand-primary-lighter-3);   --btn-primary-faded-color: var(--brand-primary);
    --btn-primary-faded-hover-bg: var(--brand-primary-lighter-2); --btn-primary-faded-hover-border: var(--brand-primary-lighter-2); --btn-primary-faded-hover-color: var(--brand-primary);
    --btn-primary-faded-active-bg: var(--brand-primary-lighter-2); --btn-primary-faded-active-border: var(--brand-primary-lighter-2);

    --btn-secondary-bg: var(--color-surface-secondary);  --btn-secondary-border: var(--color-border);         --btn-secondary-color: var(--color-text-primary);
    --btn-secondary-hover-bg: var(--color-surface);      --btn-secondary-hover-border: var(--color-border);   --btn-secondary-hover-color: var(--color-text-primary);
    --btn-secondary-active-bg: var(--color-surface-secondary); --btn-secondary-active-border: var(--color-border);

    --btn-success-bg: var(--brand-success);              --btn-success-border: var(--brand-success);          --btn-success-color: #ffffff;
    --btn-success-hover-bg: var(--brand-success-darker); --btn-success-hover-border: var(--brand-success-darker); --btn-success-hover-color: #ffffff;
    --btn-success-active-bg: var(--brand-success-darker); --btn-success-active-border: var(--brand-success-darker);

    --btn-info-bg: var(--brand-info);                    --btn-info-border: var(--brand-info);                --btn-info-color: #ffffff;
    --btn-info-hover-bg: var(--brand-info-darker);       --btn-info-hover-border: var(--brand-info-darker);   --btn-info-hover-color: #ffffff;
    --btn-info-active-bg: var(--brand-info-darker);      --btn-info-active-border: var(--brand-info-darker);

    --btn-warning-bg: var(--brand-warning);              --btn-warning-border: var(--brand-warning);          --btn-warning-color: #ffffff;
    --btn-warning-hover-bg: var(--brand-warning-darker); --btn-warning-hover-border: var(--brand-warning-darker); --btn-warning-hover-color: #ffffff;
    --btn-warning-active-bg: var(--brand-warning-darker); --btn-warning-active-border: var(--brand-warning-darker);

    --btn-danger-bg: var(--color-red-bg);                --btn-danger-border: transparent;                    --btn-danger-color: var(--color-red-text);
    --btn-danger-hover-bg: var(--brand-danger);          --btn-danger-hover-border: var(--brand-danger);      --btn-danger-hover-color: #ffffff;
    --btn-danger-active-bg: var(--brand-danger);         --btn-danger-active-border: var(--brand-danger);

    --btn-light-bg: rgba(255,255,255,0.08);              --btn-light-border: rgba(255,255,255,0.16);          --btn-light-color: #ffffff;
    --btn-light-hover-bg: rgba(255,255,255,0.16);        --btn-light-hover-border: rgba(255,255,255,0.24);    --btn-light-hover-color: #ffffff;
    --btn-light-active-bg: rgba(255,255,255,0.24);       --btn-light-active-border: rgba(255,255,255,0.24);

    /* ===== Form tokens (consume base colours + scales; admin Forms panel
       overrides via select-colors + scale dropdowns). Defaults MUST mirror
       core/config/forms.php. ============================================ */
    --input-height: 40px;  --input-pad-x: 14px;
    --input-font-size: var(--text-lg);  --input-radius: var(--radius-sm);  --input-border-width: 0.5px;
    --input-bg: var(--color-surface);  --input-border-color: var(--color-border);  --input-color: var(--color-text-primary);
    --input-placeholder-color: var(--color-text-quaternary);
    --input-focus-border-color: var(--color-accent);  --input-focus-ring: var(--color-accent-light);
    --input-disabled-bg: var(--color-surface-secondary);
    --input-label-color: var(--color-text-primary);  --input-label-font-size: var(--text-base);  --input-label-font-weight: var(--fw-medium);
    --icheck-size: 18px;  --icheck-accent: var(--color-accent);

    /* ── Type scale ───────────────────────────────────────────────
       Semantic font-size tokens (admin-overridable via Typography settings).
       Values are the theme's canonical scale; the migration snaps every
       hardcoded px to the nearest step. Line-heights stay as unitless ratios. */
    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 13px;
    --text-md:   14px;
    --text-lg:   15px;
    --text-xl:   17px;
    --text-2xl:  20px;
    --text-3xl:  24px;
    --text-h6:   18px;
    --text-h5:   20px;
    --text-h4:   26px;
    --text-h3:   36px;
    --text-h2:   40px;
    --text-h1:   48px;
    --text-display-sm: 56px;
    --text-display:    72px;
    --text-display-lg: 96px;
    --text-display-xl: 120px;

    /* Font weights */
    --fw-light:    300;
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    900;
}

/* ===== Sidebar tint ==================================================
   ONE colour repaints the whole nav -- bar, rail, rail flyout, mobile
   drawer -- with label ink chosen by exact WCAG luminance so it stays
   legible whatever the buyer picks. Same primitive as the painted
   dashboard tiles in pages/clientareahome.css; the question is identical
   (given ANY fill, is black or white readable on it) so the maths is
   shared rather than re-derived. --ink-crossover lives at :root above.

   --sidebar-color IS DELIBERATELY NEVER DECLARED. Every token below
   references it, so with no buyer pick each one is
   invalid-at-computed-value-time, computes to guaranteed-invalid, and the
   var() fallback on the PUBLIC token restores the literal that ships.
   That absence is the entire "off" state: no PHP, no body attribute, no
   stored mode, nothing to get wrong on upgrade. Measured with no pick:
   bar 248,248,249 / text #1d1d1f / border #e8e8ed -- byte-identical to
   before this block existed.

   Private names are --_sb-* so a :root declaration can never be confused
   with the --_ink / --_anti pair scoped to .min-section on the dashboard.

   MEASURED CAVEAT: primary label ink is guaranteed by the crossover, but
   the SOFTENED steps are best-effort. A mid-luminance pick sits close to
   the crossover where neither black nor white has headroom -- #0071e3
   yields only 2.3:1 muted at any mix. Dark or light picks are fine
   (5.3-7.8 measured on slate, near-black and pale yellow). The admin
   shows a live contrast readout for exactly this reason.

   ASCII-only comment, per this install's CSS-skip quirk. */
@supports (color: color(from red srgb-linear r g b)) {
    :root {
        --_sink:  clamp(0, (var(--ink-crossover, 0.179129) - (0.2126*r + 0.7152*g + 0.0722*b)) * 100000, 1);
        /* Opaque form of the pick. The text ramp mixes INTO this, so it must
           not carry alpha or the labels would come out translucent. */
        --_sb-base: color(from var(--sidebar-color) srgb r g b / 1);
        --_sb-ink:  color(from var(--sidebar-color) srgb-linear var(--_sink) var(--_sink) var(--_sink) / 1);
        /* Text softens INTO the base; washes mix into TRANSPARENT so the
           frost still shows through. color-mix premultiplies, so white 6%
           gives rgba(255,255,255,0.06) and black 6% gives rgba(0,0,0,0.06):
           the direction flips with the ink, for free. */
        --_sb-bg:     color-mix(in srgb, var(--_sb-base) 94%, transparent);
        --_sb-txt2:   color-mix(in srgb, var(--_sb-ink) 70%, var(--_sb-base));
        --_sb-txt3:   color-mix(in srgb, var(--_sb-ink) 58%, var(--_sb-base));
        --_sb-txt4:   color-mix(in srgb, var(--_sb-ink) 42%, var(--_sb-base));
        --_sb-border: color-mix(in srgb, var(--_sb-ink) 10%, transparent);
        --_sb-field:  color-mix(in srgb, var(--_sb-ink)  7%, transparent);
        --_sb-hover:  color-mix(in srgb, var(--_sb-ink)  6%, transparent);
        --_sb-active: color-mix(in srgb, var(--_sb-ink) 12%, transparent);
        --_sb-thumb:  color-mix(in srgb, var(--_sb-ink) 18%, transparent);
        --_sb-badge:  color-mix(in srgb, var(--_sb-ink) 12%, transparent);
    }
}

/* --- Dark Mode ---
   Qualified with `html` on purpose. Bare [data-theme="dark"] scores (0,1,0) --
   identical to :root -- and the admin Colors panel emits its overrides as
   `:root{...}` in a <style> AFTER this file. So a token the buyer (or a style
   preset) set in the LIGHT scope only would beat these dark values on source
   order and leak into dark mode. Measured before this fix: a preset with a warm
   sidebar in light kept that warm panel in dark mode while the text correctly
   flipped to near-white -- 1.01:1, invisible.

   `html[data-theme="dark"]` scores (0,1,1), so it outranks an emitted :root
   while still losing to the panel's own emitted html[data-theme="dark"] block,
   which ties and wins on source order. That is the intended precedence:
   dark-scope override > stock dark > light-scope override. Relationship to
   html[data-palette] in core-layout.css is unchanged -- it already outranked
   the bare form and, being a later file, still ties-and-wins. */
html[data-theme="dark"] {
    --color-bg: #1c1c1e;
    --color-surface: #2c2c2e;
    --color-surface-secondary: #3a3a3c;
    --color-surface-tertiary: #252527;
    --color-border: #3a3a3c;
    --color-border-light: #2c2c2e;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-tertiary: #8e8e93;
    --color-text-quaternary: #636366;
    --color-accent: #2997ff;
    --color-accent-hover: #40a3ff;
    --color-accent-light: rgba(41, 151, 255, 0.12);
    --color-link: #2997ff;
    --color-link-hover: #40a3ff;
    --color-border-card: rgba(255, 255, 255, 0.06);
    --color-green-bg: rgba(48, 209, 88, 0.16);
    --color-green-text: #30d158;
    --color-orange-bg: rgba(255, 159, 10, 0.16);
    --color-orange-text: #ff9f0a;
    --color-red-bg: rgba(255, 59, 48, 0.16);
    --color-red-text: #ff453a;
    --color-blue-bg: rgba(41, 151, 255, 0.14);
    --color-blue-text: #2997ff;
    --color-gray-bg: rgba(142, 142, 147, 0.18);
    --color-gray-text: #a1a1a6;
    --sidebar-bg: var(--_sb-bg, rgba(28, 28, 30, 0.80));
    --sidebar-item-hover: rgba(255, 255, 255, 0.05);
    --sidebar-item-active: rgba(255, 255, 255, 0.08);
    --sidebar-icon-bg: #3a3a3c;
    /* The only sidebar token that is a LITERAL rather than a var() chain, so
       it is the only one that must be redeclared here -- every other one
       re-derives from the page tokens redeclared in this block. */
    --sidebar-scroll-thumb: var(--_sb-thumb, rgba(255, 255, 255, 0.15));
    /* The two stops of the Gradient nav style. Fully transparent by default,
       which is what keeps the composing rule in core-layout.css inert: it
       paints a transparent-to-transparent image over --sidebar-bg and nothing
       shows until the style is picked. They are COLOURS, not a gradient value,
       because Hooks::isColorValue rejects linear-gradient() on save and on
       emit -- see the note beside 'gradient' in core/config/colors.php. */
    --sidebar-grad-angle: 180deg;
    --sidebar-grad-from: rgba(0, 0, 0, 0);
    --sidebar-grad-to: rgba(0, 0, 0, 0);
    /* Same values as light on purpose -- the accent stays saturated in dark
       mode, so its ink stays white -- but they MUST be declared here anyway.
       This block outranks an emitted :root override, so a token absent from it
       would let a buyer's light-scope edit leak into dark. */
    --color-on-accent: #ffffff;
    --color-avatar-from: #0a84ff;
    --color-avatar-to: #6e6cff;
    --topbar-bg: rgba(44, 44, 46, 0.72);
    /* Dark mode: bg color contrast already separates cards (~6% lightness step), so no resting shadow needed */
    --shadow-card: none;
    --shadow-card-hover: 0 2px 12px rgba(0,0,0,0.20);
    --shadow-dropdown: 0 4px 32px rgba(0,0,0,0.30), 0 0 1px rgba(255,255,255,0.08);
    /* Lifted for dark surfaces. Mirrors core/config/colors.php 'Block accents'
       dark values -- a block accent that did not brighten here would sit as a
       muddy patch on #1c1c1e. */
    --color-block-1: #7d7bff;
    --color-block-2: #34c759;
    --color-block-3: #ff9500;
}

/* ==========================================================================
   ACCENT FAMILY, DERIVED
   --------------------------------------------------------------------------
   Change the Accent and its hover and link siblings follow. They were three
   independent literals, so recolouring a theme to green left the hover state
   and every link blue.

   MEASURED, the shipped family is a pure LIGHTNESS RAMP on one hue -- every
   value sits at H 210 (+/-1) and S 100, differing only in L -- so the
   relationship it always had can be written down exactly:

       light:  hover L+1.96   link L-4.51   link-hover L+0
       dark:   hover L+4.51   link L+0      link-hover L+4.51

   The offsets differ per scope, and that is not an inconsistency: on white a
   link needs to sit DARKER than the accent to carry text contrast, while on a
   dark surface the accent is already bright enough and hover lightens instead.

   Reproduction against the shipped literals is exact for four of the six and
   one channel-step (1/255) out on the other two, which is not a visible
   difference. A stock install renders as it always has.

   TWO THINGS THAT LOOK LIKE DETAILS AND ARE NOT:

   `l` is a NUMBER here, not a percentage. calc(l + 2%) is invalid -- verified,
   CSS.supports says false and the declaration falls back to inherited grey.

   The literals above stay, and this block is GATED rather than being written
   as a fallback pair. Custom properties are not parse-validated, so a second
   declaration always wins whether or not the browser understood it; the only
   fallback that works is a rule block a browser can decline whole.

   An admin override still wins: buildColorsHead emits stored colours in a
   <style> after this sheet, at the same specificity, so a typed value beats
   the derivation and an empty field means "follow the Accent".
   ========================================================================== */
@supports (color: hsl(from red h s calc(l + 2))) {
    :root {
        --color-accent-hover: hsl(from var(--color-accent) h s calc(l + 1.96));
        --color-link:         hsl(from var(--color-accent) h s calc(l - 4.51));
        --color-link-hover:   var(--color-accent);
    }
    html[data-theme="dark"] {
        --color-accent-hover: hsl(from var(--color-accent) h s calc(l + 4.51));
        --color-link:         var(--color-accent);
        --color-link-hover:   hsl(from var(--color-accent) h s calc(l + 4.51));
    }
}

html { font-size: var(--text-xl); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.47059;
    letter-spacing: -0.022em;
    display: flex;
    min-height: 100vh;
}

/* Full-bleed pages. A variant declaring `fullPage => true` makes header.tpl
   swap .client-area-layout for .mt-login-fullpage and suppress the nav,
   sidebar/rail, breadcrumb and footer — so the body must drop the app-shell
   flex row above, or the page content becomes a flex child of a missing shell.
   Global on purpose: this lived only in pages/login-split.css, so login/split
   was the only full-bleed page that actually worked. Any page can set the flag. */
body.mt-login-fullpage { display: block; min-height: 100vh; margin: 0; }

a { color: var(--color-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 0.5px solid var(--sidebar-border);
    display: flex; flex-direction: column; z-index: 100; overflow: hidden;
    /* Inherit guard. Nothing set a colour here, so any descendant WITHOUT its
       own rule fell back to the page text colour -- fine while the nav matched
       the page, dark-on-dark the moment it is tinted. A no-op today
       (--sidebar-text defaults to --color-text-primary, which is exactly what
       they inherited), and it means a future nav element cannot be added
       unreadable by omission. */
    color: var(--sidebar-text);
}
.sidebar-header { padding: 20px 16px 8px; display: flex; align-items: center; gap: 10px; }
.sidebar-home-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.sidebar-home-link:hover { opacity: 0.8; }
.sidebar-logo { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--sidebar-text); }
.sidebar-logo svg { width: 28px; height: 28px; }
.sidebar-brand { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--sidebar-text); letter-spacing: -0.01em; }
/* height, not max-height, on every uploaded logo.
   An SVG exported with a viewBox and no width/height attributes carries no
   intrinsic size -- and a cap has nothing to cap, so the image laid out at
   0x0 and the logo simply was not there. Measured on a live install: an
   Illustrator-exported square logo rendered 0x0 in the sidebar while the same
   file rendered 28x28 in the rail, whose rule sets width/height outright.
   Raster logos were unaffected, which is why this looked like "SVG logos are
   broken" rather than a CSS bug.
   A definite height plus width:auto resolves against the viewBox's aspect
   ratio, so SVG and PNG both size correctly; max-width still caps a very wide
   mark and object-fit keeps it undistorted when it does. Same shape as
   .hp-footer-brand-logo, which had it right all along and was the one logo on
   the page that kept working. */
.sidebar-brand-logo { height: var(--nav-logo-height, 28px); width: auto; max-width: 160px; object-fit: contain; display: block; }
.homepage-nav .nav-logo.img-logo { padding: 0; }
.homepage-nav .nav-logo.img-logo img { height: var(--nav-logo-height, 28px); width: auto; max-width: 180px; object-fit: contain; display: block; }
.brand-logo img { height: 32px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.sidebar-search { padding: 8px 12px 4px; }
.sidebar-search-input {
    width: 100%; height: 32px;
    background: var(--sidebar-field-bg);
    border: 0.5px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    padding: 0 10px 0 30px; font-size: var(--text-base); font-family: var(--font-family);
    color: var(--sidebar-text); outline: none;
    transition: all var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24' stroke='%23aeaeb2' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 10px center;
}
.sidebar-search-input::placeholder { color: var(--sidebar-text-faint); }
.sidebar-search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-scroll-thumb); border-radius: 3px; }
.sidebar-section-label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 16px 10px 6px; }
.sidebar-item, .sidebar-item:hover {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    cursor: pointer; transition: background var(--transition-fast);
    text-decoration: none; color: var(--sidebar-text);
    font-size: var(--text-base); font-weight: var(--fw-normal); letter-spacing: -0.008em; position: relative;
}
.sidebar-item:hover { background: var(--sidebar-item-hover-bg); color: var(--sidebar-text); }
.sidebar-item.active { background: var(--sidebar-item-active-bg); font-weight: var(--fw-medium); }
.sidebar-item-icon { width: var(--nav-icon-size, 26px); height: var(--nav-icon-size, 26px); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-item-icon svg { width: var(--nav-icon-glyph, 15px); height: var(--nav-icon-glyph, 15px); }
.sidebar-item-icon.blue { background: var(--color-icon-blue); color: white; }
.sidebar-item-icon.purple { background: var(--color-icon-purple); color: white; }
.sidebar-item-icon.orange { background: var(--color-icon-orange); color: white; }
.sidebar-item-icon.green { background: var(--color-icon-green); color: white; }
.sidebar-item-icon.red { background: var(--color-icon-red); color: white; }
.sidebar-item-icon.teal { background: var(--color-icon-teal); color: white; }
.sidebar-item-icon.gray { background: var(--color-icon-gray); color: white; }
.sidebar-item-icon.indigo { background: var(--color-icon-indigo); color: white; }
.sidebar-item-icon.pink { background: var(--color-icon-pink); color: white; }
.sidebar-item-badge { margin-left: auto; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--sidebar-text-muted); background: var(--sidebar-badge-bg); padding: 1px 7px; border-radius: var(--radius-pill); min-width: 20px; text-align: center; }
.sidebar-footer { padding: 12px; border-top: 0.5px solid var(--sidebar-border); }

/* Account block off (admin Layouts card -> body[data-nav-profile="hide"]).
   The whole footer goes, in BOTH auth states: the profile when signed in, the
   Login / Create-account buttons when signed out. It is one region of the nav
   and an admin switching it off means the region, not one of its two faces.

   Hiding the footer rather than its contents is deliberate -- .sidebar-footer
   carries 12px of padding and its own top border, so emptying it would leave a
   24px strip with a divider line hanging under the nav.

   Neither state loses its last affordance, which is what makes this safe to
   offer: header.tpl renders inner-topbar.tpl on every layout that is not
   `top`, and that topbar carries the account avatar when signed in and a Sign
   in link when signed out. */
body[data-nav-profile="hide"] .sidebar-footer { display: none; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast); }
.sidebar-user:hover { background: var(--sidebar-item-hover-bg); }
.sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-avatar-from), var(--color-avatar-to)); color: var(--color-on-accent); font-size: var(--text-base); font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-email { font-size: var(--text-xs); color: var(--sidebar-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================
   MAIN LAYOUT
   ============================================ */
.main, .main-content { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
/* Right-hand nav counterpart. Defensive: .main is emitted only by
   core/layouts/main-menu/sidebar/default.tpl, which nothing includes (header.tpl
   uses includes/partials/sidebar.tpl), so this is almost certainly dead -- but a
   half-flipped file is a trap for the next reader. */
body[data-sidebar-side="right"] .main,
body[data-sidebar-side="right"] .main-content { margin-left: 0; margin-right: var(--sidebar-width); }

/* --- Topbar --- */
.topbar {
    position: sticky; top: 0; z-index: 90;
    height: var(--topbar-height);
    background: var(--topbar-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--sidebar-item-active);
    display: flex; align-items: center; padding: 0 40px; gap: 16px;
}
.topbar-breadcrumb { font-size: var(--text-base); color: var(--color-text-tertiary); display: flex; align-items: center; gap: 6px; }
.topbar-breadcrumb a { color: var(--color-text-tertiary); }
.topbar-breadcrumb a:hover { color: var(--color-text-primary); }
.topbar-breadcrumb-sep { color: var(--color-text-quaternary); font-size: var(--text-xs); }
.topbar-breadcrumb-current { color: var(--color-text-primary); font-weight: var(--fw-medium); }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-btn {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: transparent; color: var(--color-text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast); position: relative; font-family: var(--font-family);
}
.topbar-btn:hover { background: var(--sidebar-item-hover); color: var(--color-text-primary); }
.topbar-btn svg { width: 18px; height: 18px; }
.topbar-notification-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; background: var(--color-red); border-radius: 50%; border: 2px solid var(--topbar-bg); }
/* Cart-count pill on the top-right cart icon. Rendered by topnav.tpl /
   inner-topbar.tpl whenever {$cartcount} > 0 -- WHMCS exposes the count
   globally on every page that loads cart state. The pill sits in the
   top-right corner of the icon box (matches .topbar-notification-dot's
   placement) and is a numeric counter rather than a binary indicator. */
.topbar-cart-btn { position: relative; }
.topbar-cart-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-accent, var(--color-accent));
    color: var(--color-surface);
    font-size: var(--text-xs); font-weight: var(--fw-semibold);
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px var(--topbar-bg, var(--color-bg, var(--color-surface)));
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--color-avatar-from), var(--color-avatar-to)); color: var(--color-on-accent); font-size: var(--text-sm); font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity var(--transition-fast); }
.topbar-avatar:hover { opacity: 0.85; }

/* --- Monogram ink, derived from the avatar's OWN colours -----------------
   The three avatars are painted with the avatar gradient but took their ink
   from --color-on-accent, which is the ink computed for --color-accent. Those
   are different colours: the generator rotates the avatar pair away from the
   accent deliberately, so the letter was being chosen against one colour and
   painted on another. A generated palette can land them on opposite sides of
   the crossover, and then the monogram is simply wrong.

   Derived from the MIDPOINT of the gradient, which is what sits under a
   centred glyph at 135deg -- deriving from either stop would be right at one
   corner of the circle and wrong at the other.

   Same crossover primitive as --blk-ink and --at-ink, and the same reason the
   floor comes first: custom properties are not parse-validated, so on a
   browser without relative colour the color(from ...) declaration would still
   win and leave the letter inheriting. The floor is the OLD value, so an
   unsupported browser renders exactly what it does today.

   The welcome band's avatar is handled in clientareahome.css instead: it only
   takes this gradient on the three neutral band styles, and on the saturated
   ones it is a translucent white disc that must keep its white ink. */
.topbar-avatar,
.sidebar-avatar {
    --_av-mid: color-mix(in srgb, var(--color-avatar-from), var(--color-avatar-to));
}
@supports (color: color(from red srgb-linear r g b)) {
    .topbar-avatar,
    .sidebar-avatar {
        --_av-ink: clamp(0, (var(--ink-crossover, 0.179129) - (0.2126*r + 0.7152*g + 0.0722*b)) * 100000, 1);
        color: color(from var(--_av-mid) srgb-linear var(--_av-ink) var(--_av-ink) var(--_av-ink) / 1);
    }
}

/* --- System Status Indicator --- */
.topbar-status { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.topbar-status-dot { width: 6px; height: 6px; background: var(--color-green); border-radius: 50%; flex-shrink: 0; }

/* --- Homepage-style Top Nav (for login/register) --- */
.homepage-nav { position: sticky; top: 0; z-index: 50; background: var(--topbar-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--sidebar-item-active); padding: 0 22px; }
.homepage-nav-inner { max-width: var(--w-prose); margin: 0 auto; display: flex; align-items: center; gap: 28px; height: var(--topnav-height, 44px); font-size: var(--text-sm); }
.homepage-nav a { color: var(--color-text-primary); opacity: 0.85; font-size: var(--text-sm); transition: opacity 0.15s ease; text-decoration: none; }
.homepage-nav a:hover { opacity: 1; text-decoration: none; }
.homepage-nav .nav-logo { font-size: var(--text-xl); opacity: 1; display: flex; align-items: center; margin-inline-end: 20px; }
.homepage-nav .nav-logo svg { width: 16px; height: 16px; }
.homepage-nav .nav-spacer { flex: 1; }
.homepage-nav .nav-signin { font-weight: var(--fw-medium); }
[data-theme="dark"] .homepage-nav { background: rgba(28,28,30,0.72); border-bottom: 1px solid rgba(255,255,255,0.06); }

/* Account for sticky nav when jumping to anchors */
#overview, #products, #features, #pricing, #faq, #templates, #compare { scroll-margin-top: 104px; }
html { scroll-behavior: smooth; }

/* Product subnav (Apple product-page TOC style) */
/* top/left offsets track the top nav's height -- it is sticky above them, so a
   taller bar must push both of these down or they overlap it. */
.homepage-subnav { position: sticky; top: var(--topnav-height, 44px); z-index: 49; background: rgba(251,251,253,0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.08); }
.homepage-subnav-inner { max-width: var(--w-prose); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 22px; height: 52px; }
.homepage-subnav .subnav-title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; color: var(--color-text-primary); text-decoration: none; white-space: nowrap; }
.homepage-subnav .subnav-title:hover { text-decoration: none; opacity: 0.85; }
.homepage-subnav .subnav-links { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.homepage-subnav .subnav-link { font-size: var(--text-base); color: var(--color-text-primary); opacity: 0.85; text-decoration: none; white-space: nowrap; transition: opacity 0.15s; }
.homepage-subnav .subnav-link:hover { opacity: 1; }
.homepage-subnav .subnav-link.active { opacity: 1; font-weight: var(--fw-medium); position: relative; }
.homepage-subnav .subnav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -18px; height: 2px; background: var(--color-text-primary); border-radius: 2px; }
.homepage-subnav .subnav-sep { width: 1px; height: 20px; background: rgba(0,0,0,0.12); margin: 0 4px; }
.homepage-subnav .subnav-btn { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 980px; font-size: var(--text-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.homepage-subnav .subnav-btn-outline { border: 1px solid rgba(0,0,0,0.35); color: var(--color-text-primary); background: transparent; }
.homepage-subnav .subnav-btn-outline:hover { background: rgba(0,0,0,0.05); }
.homepage-subnav .subnav-btn-fill { background: var(--color-accent); color: var(--color-surface); border: 1px solid var(--color-accent); }
.homepage-subnav .subnav-btn-fill:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

[data-theme="dark"] .homepage-subnav { background: rgba(28,28,30,0.82); border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .homepage-subnav .subnav-sep { background: rgba(255,255,255,0.14); }
[data-theme="dark"] .homepage-subnav .subnav-btn-outline { border-color: rgba(255,255,255,0.35); }
[data-theme="dark"] .homepage-subnav .subnav-btn-outline:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 820px) {
    .homepage-subnav-inner { gap: 14px; }
    .homepage-subnav .subnav-title { font-size: var(--text-xl); }
    .homepage-subnav .subnav-links { gap: 14px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .homepage-subnav .subnav-links::-webkit-scrollbar { display: none; }
    .homepage-subnav .subnav-btn-outline { display: none; }
}
[data-theme="dark"] .homepage-nav a { color: var(--color-text-primary); }

/* --- Nav Mega-Menu Dropdown (Apple-style on hover) --- */
.nav-item-dropdown { position: static; display: flex; align-items: center; align-self: stretch; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--color-text-primary); opacity: 0.85; font-size: var(--text-sm); transition: opacity 0.15s ease; text-decoration: none; height: 100%; }
.nav-dropdown-trigger:hover { opacity: 1; }
.nav-dropdown-trigger .chevron { width: 9px; height: 9px; transition: transform 0.2s ease; }
.nav-item-dropdown:hover .nav-dropdown-trigger .chevron { transform: rotate(180deg); }
.nav-mega-menu { position: absolute; top: var(--topnav-height, 44px); left: 0; right: 0; background: rgba(251,251,253,0.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--sidebar-item-active); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; pointer-events: none; z-index: 49; }
.nav-item-dropdown:hover .nav-mega-menu, .nav-mega-menu:hover { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-mega-inner { max-width: var(--w-prose); margin: 0 auto; padding: 40px 22px 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.nav-mega-col h4 { font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-tertiary); margin: 0 0 16px; opacity: 1; }
.nav-mega-item { display: block; padding: 8px 0; text-decoration: none; color: var(--color-text-primary) !important; opacity: 1 !important; }
.nav-mega-item .name { font-size: var(--text-xl); font-weight: var(--fw-medium); letter-spacing: -0.01em; color: var(--color-text-primary); margin-bottom: 2px; transition: color 0.15s ease; }
.nav-mega-item .tag { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.3; }
.nav-mega-item:hover .name { color: var(--color-accent); }

[data-theme="dark"] .nav-mega-menu { background: rgba(28,28,30,0.92); border-bottom: 1px solid rgba(255,255,255,0.06); }

@media (max-width: 820px) {
    .nav-mega-inner { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px 32px; }
    .nav-mega-col h4 { margin-bottom: 10px; }
}

/* --- Profile Dropdown --- */
.profile-dropdown-wrapper { position: relative; }
.profile-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; width: 240px;
    background: var(--color-surface); border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown); border: 0.5px solid var(--color-border);
    padding: 6px; opacity: 0; visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transition: all var(--transition-fast); z-index: 200;
}
.profile-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.profile-dropdown-header { padding: 8px 10px; border-bottom: 0.5px solid var(--color-border); margin-bottom: 4px; }
.profile-dropdown-name { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.profile-dropdown-email { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.profile-dropdown-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border-radius: 6px; font-size: var(--text-base); color: var(--color-text-primary);
    cursor: pointer; transition: background var(--transition-fast);
    border: none; background: none; width: 100%; text-align: left; font-family: var(--font-family);
}
.profile-dropdown-item:hover { background: var(--color-accent-light); color: var(--color-accent); text-decoration: none; }
.profile-dropdown-item svg { width: 16px; height: 16px; color: var(--color-text-secondary); flex-shrink: 0; }
.profile-dropdown-item:hover svg { color: var(--color-accent); }
.profile-dropdown-divider { height: 0.5px; background: var(--color-border); margin: 4px 0; }
.profile-dropdown-item.danger { color: var(--color-red-text); }
.profile-dropdown-item.danger svg { color: var(--color-red-text); }
/* Sidebar variant: opens upward from the user card pinned at the bottom of the sidebar */
.profile-dropdown.profile-dropdown--up {
    top: auto; bottom: calc(100% + 8px);
    left: 0; right: 0; width: auto;
    transform: translateY(4px) scale(0.98);
}
.profile-dropdown.profile-dropdown--up.open { transform: translateY(0) scale(1); }
.sidebar-user-chev { width: 12px; height: 12px; color: var(--sidebar-text-muted); flex-shrink: 0; margin-left: 4px; }

/* Language / Region selector (nav icon → floating menu) */
.nav-lang-wrapper { position: relative; }
.nav-lang-menu {
    position: absolute; top: calc(100% + 10px); right: 0; width: 260px;
    background: var(--color-surface); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 0.5px var(--color-border-card);
    padding: 8px; opacity: 0; visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transition: all var(--transition-fast); z-index: 200;
    max-height: 420px; overflow-y: auto;
}
.nav-lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nav-lang-menu-header { padding: 10px 12px 8px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.nav-lang-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: 10px; text-decoration: none; color: var(--color-text-primary);
    transition: background var(--transition-fast); cursor: pointer;
}
.nav-lang-item:hover { background: var(--color-border-card); text-decoration: none; }
.nav-lang-item .lang-flag { font-size: var(--text-3xl); line-height: 1; flex-shrink: 0; }
.nav-lang-item .lang-info { flex: 1; min-width: 0; }
.nav-lang-item .lang-name { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-primary); line-height: 1.25; }
.nav-lang-item .lang-region { font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: 1.3; margin-top: 1px; }
.nav-lang-item .lang-check { color: var(--color-accent); font-size: var(--text-md); font-weight: var(--fw-bold); opacity: 0; flex-shrink: 0; }
.nav-lang-item.active .lang-check { opacity: 1; }
.nav-lang-item.active .lang-name { color: var(--color-accent); }
[data-theme="dark"] .nav-lang-menu { background: rgba(40,40,42,0.96); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.06); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
[data-theme="dark"] .nav-lang-item:hover { background: rgba(255,255,255,0.06); }
.profile-dropdown-item.danger:hover { background: var(--color-red-bg); color: var(--color-red-text); }
.theme-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; }
.theme-toggle-label { font-size: var(--text-base); color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; }
.theme-toggle-label svg { width: 16px; height: 16px; color: var(--color-text-secondary); }
.toggle-switch { width: 38px; height: 22px; background: var(--color-surface-secondary); border: 0.5px solid var(--color-border); border-radius: 12px; cursor: pointer; position: relative; transition: background var(--transition-fast); flex-shrink: 0; }
.toggle-switch::after { content: ''; width: 18px; height: 18px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); position: absolute; top: 1.5px; left: 1.5px; transition: transform var(--transition-fast); }
.toggle-switch.active { background: var(--color-accent); border-color: var(--color-accent); }
.toggle-switch.active::after { transform: translateX(16px); }

/* ============================================
   CONTENT AREA
   ============================================ */
.content, .content-area { flex: 1; padding: 40px var(--content-pad-x) 60px; max-width: var(--content-max-width); }
/* Content width (admin: Layouts -> Containers). Overriding the custom property
   rather than max-width itself means every rule already reading
   --content-max-width follows along, and "boxed" needs no rule at all because
   it is the declared default -- an install that never touches the setting
   renders byte-identically to before.
     full:  edge to edge, gutter reduced to a comfortable minimum
     fluid: unbounded but keeps the full 48px gutter */
/* CONTAINER SCALE. Every page-level container derives from --w-base, so the one
   admin number (Layouts > Containers > Maximum width, or the same value at
   Styles > Layout > Content > Max width) moves the whole system in proportion
   instead of only the outer column.

   Ratios resolve to the exact values they replaced, so this changes zero pixels
   on an untouched install:
     1120 x 1.071429 = 1200   --w-wide    data-dense blocks, wide tables
     1120 x 0.914286 = 1024   --w-prose   marketing / long-form column
     1120 x 0.785714 =  880   --w-narrow  dense card column

   Declared on BODY, not :root, and this is load-bearing. A custom property is
   resolved against the element it is DECLARED on, so with the ratios on :root
   the body[data-content-width] overrides below would set --w-base and never
   recompute --w-wide/--w-prose/--w-narrow -- :root's already-computed values
   would just inherit down. Declaring both on body puts the override and the
   calc() on the same element, which is what makes the modes work.

   Widths BELOW 880px are deliberately NOT in this scale. Those are measure
   constraints -- form fields, modals, prose columns, empty states -- and
   stretching them is what makes a wide layout unreadable. Keeping them fixed is
   what keeps the setting's own promise ("boxed keeps long-form pages readable")
   true at any --w-base. */
body {
    --w-base:   var(--content-max-width);
    --w-wide:   calc(var(--w-base) * 1.071429);
    --w-prose:  calc(var(--w-base) * 0.914286);
    --w-narrow: calc(var(--w-base) * 0.785714);
}

/* Unbounded modes release the OUTER column only. --w-base is pinned to 1500px
   rather than inherited, for two reasons: `none` is not a number, so
   calc(none * 0.914286) would invalidate every container token; and letting
   inner containers follow the viewport puts an 880px card column at 2560px on a
   wide monitor, which is the unreadable case the boxed/full choice exists to
   avoid. 1500 lands the widest tier (--w-wide) at ~1607px -- full-bleed chrome,
   readable content.

   "fluid" is a LEGACY ALIAS for "full" and must keep matching. The two modes
   only ever differed by gutter (full hardcoded 24px, fluid inherited 48px);
   that is now the admin's own Padding X field, so they collapsed into one
   option. Any install still holding content_width=fluid keeps rendering as
   full instead of silently falling back to boxed.

   The old --content-pad-x:24px override is deliberately gone: hardcoding the
   gutter here would make the Padding X control dead in exactly the mode where
   a gutter matters most. */
body[data-content-width="full"],
body[data-content-width="fluid"] { --content-max-width: none; --w-base: 1500px; }
.page-actions { margin-top: 24px; }
.service-item-info { flex: 1; min-width: 0; }
.service-item-name { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); }
.service-item-domain { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: 1px; }
.service-item-meta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.service-item-date { font-size: var(--text-base); color: var(--color-text-tertiary); }
.service-item-action { font-size: var(--text-base); color: var(--color-accent); display: flex; align-items: center; gap: 2px; }
a.service-item { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 0.5px solid var(--color-border-light); text-decoration: none; color: inherit; transition: background var(--transition-fast); }
a.service-item:hover { background: var(--color-surface-tertiary); color: inherit; }
a.service-item:last-child { border-bottom: none; }
.file-drop-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: 32px; text-align: center; color: var(--color-text-tertiary); font-size: var(--text-md); cursor: pointer; transition: all var(--transition-fast); }
.file-drop-zone:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-light); }

/* --- Page Header --- */
.page-header { margin-bottom: 32px; }
.page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-eyebrow { font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 6px; }
.page-title { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.125; color: var(--color-text-primary); }
.page-subtitle { font-size: var(--text-xl); color: var(--color-text-secondary); margin-top: 6px; font-weight: var(--fw-normal); letter-spacing: -0.01em; }

/* --- Greeting (dashboard only) --- */
.greeting { margin-bottom: 36px; }
.greeting-title { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.125; color: var(--color-text-primary); }
.greeting-subtitle { font-size: var(--text-xl); color: var(--color-text-secondary); margin-top: 6px; font-weight: var(--fw-normal); letter-spacing: -0.01em; }

/* --- Summary Tiles --- */
.summary-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
.tile { background: var(--color-surface-secondary); border-radius: var(--radius-lg); padding: 14px; transition: all var(--transition-medium); cursor: pointer; text-decoration: none; color: inherit; display: block; }
.tile:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); color: inherit; text-decoration: none; }
.tile-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.tile-icon svg { width: 15px; height: 15px; }
.tile-icon.blue { background: var(--color-blue-bg); color: var(--color-blue-text); }
.tile-icon.green { background: var(--color-green-bg); color: var(--color-green-text); }
.tile-icon.orange { background: var(--color-orange-bg); color: var(--color-orange-text); }
.tile-icon.red { background: var(--color-red-bg); color: var(--color-red-text); }
.tile-value { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1; color: var(--color-text-primary); }
.tile-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; font-weight: var(--fw-normal); }

/* --- Cards --- */
.card { background: var(--color-surface); border-radius: var(--card-radius); box-shadow: var(--card-shadow); margin-bottom: 24px; overflow: hidden; }
.card-header { padding: 20px 24px 0; display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--color-text-primary); }
.card-action { font-size: var(--text-md); font-weight: var(--fw-normal); color: var(--color-link); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.card-action:hover { color: var(--color-link-hover); text-decoration: underline; }
.card-body { padding: 16px var(--card-pad) var(--card-pad); }

/* --- Services List (clickable rows) --- */
.service-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 0 -16px; border-radius: 10px; border-bottom: 1px solid var(--color-surface-secondary); transition: background var(--transition-fast); font-size: var(--text-base); text-decoration: none; color: inherit; cursor: pointer; }
.service-item:last-child { border-bottom: none; }
.service-item:hover { background: var(--color-surface-secondary); border-bottom-color: transparent; color: inherit; text-decoration: none; }
.service-item:hover + .service-item { border-top-color: transparent; }
.service-item:hover .service-chevron { transform: translateX(2px); color: var(--color-accent); }
.service-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--color-surface-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-fast); }
.service-item:hover .service-icon { background: var(--color-surface); }
.service-icon svg { width: 17px; height: 17px; color: var(--color-text-secondary); }
.service-info { flex: 1; min-width: 0; }
.service-name { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); letter-spacing: -0.008em; }
.service-domain { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: 1px; }
.service-meta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.service-due { font-size: var(--text-base); color: var(--color-text-tertiary); text-align: right; }
.service-due-label { font-size: var(--text-xs); color: var(--color-text-quaternary); }
.service-chevron { color: var(--color-text-quaternary); transition: transform var(--transition-fast), color var(--transition-fast); display: flex; align-items: center; flex-shrink: 0; }
.service-chevron svg { width: 14px; height: 14px; }
/* legacy .service-manage button — kept for pages that still use it */
.service-manage { font-size: var(--text-base); font-weight: var(--fw-normal); color: var(--color-link); display: flex; align-items: center; gap: 2px; white-space: nowrap; text-decoration: none; }
.service-manage:hover { text-decoration: underline; }

/* --- Status Pills --- */
.status-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: 0; }
.status-pill.active { background: var(--color-green-bg); color: var(--color-green-text); }
.status-pill.pending { background: var(--color-orange-bg); color: var(--color-orange-text); }
.status-pill.overdue { background: var(--color-red-bg); color: var(--color-red-text); }
.status-pill.paid { background: var(--color-green-bg); color: var(--color-green-text); }
.status-pill.unpaid { background: var(--color-orange-bg); color: var(--color-orange-text); }
.status-pill.cancelled { background: var(--color-gray-bg); color: var(--color-gray-text); }
.status-pill.open { background: var(--color-blue-bg); color: var(--color-blue-text); }
.status-pill.answered { background: var(--color-green-bg); color: var(--color-green-text); }
.status-pill.closed { background: var(--color-gray-bg); color: var(--color-gray-text); }
.status-pill.customer-reply { background: var(--color-orange-bg); color: var(--color-orange-text); }
.status-pill.suspended { background: var(--color-red-bg); color: var(--color-red-text); }

/* --- Tables --- */
.hadrian-table { width: 100%; border-collapse: collapse; }
.hadrian-table th { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0 10px; text-align: left; border-bottom: 0.5px solid var(--color-border-light); }
.hadrian-table th:last-child { text-align: right; }
.hadrian-table td { padding: 12px 0; font-size: var(--text-md); color: var(--color-text-primary); border-bottom: 0.5px solid var(--color-border-light); vertical-align: middle; }
.hadrian-table tr:last-child td { border-bottom: none; }
.hadrian-table tr:hover td { background: var(--color-surface-tertiary); }
.hadrian-table td:last-child { text-align: right; }
/* alias for backward compat */
.invoice-table { width: 100%; border-collapse: collapse; }
.invoice-table th { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0 10px; text-align: left; border-bottom: 0.5px solid var(--color-border-light); }
.invoice-table th:last-child { text-align: right; }
.invoice-table td { padding: 12px 0; font-size: var(--text-md); color: var(--color-text-primary); border-bottom: 0.5px solid var(--color-border-light); vertical-align: middle; }
.invoice-table tr:last-child td { border-bottom: none; }
.invoice-table tr:hover td { background: var(--color-surface-tertiary); }
.invoice-table td:last-child { text-align: right; }
.invoice-id { font-weight: var(--fw-medium); color: var(--color-link); font-variant-numeric: tabular-nums; }
.invoice-date { color: var(--color-text-secondary); font-size: var(--text-base); }
.invoice-amount { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

/* --- Invoice List (clickable rows, no table) --- */
.invoice-list { display: flex; flex-direction: column; }
.invoice-list-header { display: grid; grid-template-columns: 90px 1fr 100px 100px 20px; gap: 16px; padding: 0 16px 10px; margin: 0 -16px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 0.5px solid var(--color-border-light); }
.invoice-row { display: grid; grid-template-columns: 90px 1fr 100px 100px 20px; gap: 16px; padding: 14px 16px; margin: 0 -16px; border-radius: 10px; border-bottom: 0.5px solid var(--color-border-light); align-items: center; text-decoration: none; color: inherit; transition: background var(--transition-fast); cursor: pointer; }
.invoice-row:last-child { border-bottom: none; }
.invoice-row:hover { background: var(--color-surface-secondary); border-bottom-color: transparent; color: inherit; text-decoration: none; }
.invoice-row:hover .service-chevron { transform: translateX(2px); color: var(--color-accent); }
.invoice-row .invoice-id { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.invoice-row:hover .invoice-id { color: var(--color-accent); }
.invoice-row .invoice-date { font-size: var(--text-base); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.invoice-row .invoice-amount { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* Detailed variant — invoices full list page (6 cols with Due Date) */
.invoice-list.detailed .invoice-list-header,
.invoice-list.detailed .invoice-row { grid-template-columns: 1fr 1.2fr 1.2fr 1fr 1fr 20px; }

/* --- Domain List (clickable rows) --- */
.domain-list { display: flex; flex-direction: column; }
.domain-list-header { display: grid; grid-template-columns: 1.4fr 110px 110px 110px 90px 20px; gap: 16px; padding: 0 16px 10px; margin: 0 -16px; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 0.5px solid var(--color-border-light); }
.domain-row { display: grid; grid-template-columns: 1.4fr 110px 110px 110px 90px 20px; gap: 16px; padding: 14px 16px; margin: 0 -16px; border-radius: 10px; border-bottom: 0.5px solid var(--color-border-light); align-items: center; text-decoration: none; color: inherit; transition: background var(--transition-fast); cursor: pointer; }
.domain-row:last-child { border-bottom: none; }
.domain-row:hover { background: var(--color-surface-secondary); border-bottom-color: transparent; color: inherit; text-decoration: none; }
.domain-row:hover .service-chevron { transform: translateX(2px); color: var(--color-accent); }
.domain-row .domain-name { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); transition: color var(--transition-fast); }
.domain-row:hover .domain-name { color: var(--color-accent); }
.domain-row .domain-date { font-size: var(--text-base); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }

/* --- Filter Tabs --- */
.filter-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--color-surface-secondary); border-radius: var(--radius-sm); padding: 3px; width: fit-content; }
.filter-tab { padding: 6px 16px; border-radius: 6px; font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); border: none; background: none; font-family: var(--font-family); }
.filter-tab:hover { color: var(--color-text-primary); }
.filter-tab.active { background: var(--color-surface); color: var(--color-text-primary); box-shadow: 0 1px 3px var(--sidebar-item-active); }

/* --- Two-Column Split --- */
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* --- Announcements --- */
.announcement-tag { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: 6px; }
.announcement-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.announcement-excerpt { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.announcement-date { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 10px; }
/* Clickable announcement variant */
a.announcement-link { display: block; text-decoration: none; color: inherit; margin: -16px -24px -24px; padding: 16px 24px 24px; border-radius: 12px; transition: background var(--transition-fast); }
a.announcement-link:hover { background: var(--color-surface-secondary); color: inherit; text-decoration: none; }
a.announcement-link:hover .announcement-title { color: var(--color-accent); }
a.announcement-link .announcement-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
a.announcement-link .service-chevron { color: var(--color-text-quaternary); transition: transform var(--transition-fast), color var(--transition-fast); display: flex; align-items: center; }
a.announcement-link .service-chevron svg { width: 14px; height: 14px; }
a.announcement-link:hover .service-chevron { transform: translateX(2px); color: var(--color-accent); }
a.announcement-link .announcement-date { margin-top: 0; }

/* --- Help Card --- */
.help-card-inner { text-align: center; padding: 8px 0; }
.help-icon { width: 48px; height: 48px; background: var(--color-accent-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.help-icon svg { width: 22px; height: 22px; color: var(--color-accent); }
.help-title { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 4px; letter-spacing: -0.01em; }
.help-subtitle { font-size: var(--text-md); color: var(--color-text-secondary); margin-bottom: 18px; }

/* --- Quick Actions --- */
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-action { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--color-surface-secondary); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-primary); font-size: var(--text-base); font-weight: var(--fw-medium); transition: all var(--transition-fast); }
.quick-action:hover { background: var(--color-border); color: var(--color-text-primary); text-decoration: none; }
.quick-action svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

/* --- Ticket Items --- */
.ticket-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 -16px; border-radius: 10px; border-bottom: 0.5px solid var(--color-border-light); transition: background var(--transition-fast); text-decoration: none; color: inherit; cursor: pointer; }
.ticket-item:last-child { border-bottom: none; }
a.ticket-item:hover { background: var(--color-surface-secondary); border-bottom-color: transparent; color: inherit; text-decoration: none; }
a.ticket-item:hover .service-chevron { transform: translateX(2px); color: var(--color-accent); }
a.ticket-item:hover .ticket-subject { color: var(--color-accent); }
.ticket-priority { width: 4px; height: 32px; border-radius: 2px; flex-shrink: 0; }
.ticket-priority.high { background: var(--color-red); }
.ticket-priority.medium { background: var(--color-orange); }
.ticket-priority.low { background: var(--color-green); }
.ticket-info { flex: 1; min-width: 0; }
.ticket-subject { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); transition: color var(--transition-fast); }
.ticket-meta-text { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 2px; }

/* ============================================
   BUTTONS
   ============================================ */
/* Shared base — all 9 variants share geometry + typography (token-driven). */
.btn-default, .btn-primary, .btn-primary-faded, .btn-secondary,
.btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 0.5px solid transparent; border-radius: var(--btn-radius);
    font-size: var(--btn-font-size); font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height); font-family: var(--font-family);
    cursor: pointer; transition: all var(--transition-fast);
    letter-spacing: -0.008em; text-decoration: none; white-space: nowrap;
}
/* Per-variant — base */
.btn-default       { background: var(--btn-default-bg);        border-color: var(--btn-default-border);        color: var(--btn-default-color); }
.btn-primary       { background: var(--btn-primary-bg);        border-color: var(--btn-primary-border);        color: var(--btn-primary-color); }
.btn-primary-faded { background: var(--btn-primary-faded-bg);  border-color: var(--btn-primary-faded-border);  color: var(--btn-primary-faded-color); }
.btn-secondary     { background: var(--btn-secondary-bg);      border-color: var(--btn-secondary-border);      color: var(--btn-secondary-color); }
.btn-success       { background: var(--btn-success-bg);        border-color: var(--btn-success-border);        color: var(--btn-success-color); }
.btn-info          { background: var(--btn-info-bg);           border-color: var(--btn-info-border);           color: var(--btn-info-color); }
.btn-warning       { background: var(--btn-warning-bg);        border-color: var(--btn-warning-border);        color: var(--btn-warning-color); }
.btn-danger        { background: var(--btn-danger-bg);         border-color: var(--btn-danger-border);         color: var(--btn-danger-color); }
.btn-light         { background: var(--btn-light-bg);          border-color: var(--btn-light-border);          color: var(--btn-light-color); }
/* Per-variant — hover */
.btn-default:hover       { background: var(--btn-default-hover-bg);        border-color: var(--btn-default-hover-border);        color: var(--btn-default-hover-color); text-decoration: none; }
.btn-primary:hover       { background: var(--btn-primary-hover-bg);        border-color: var(--btn-primary-hover-border);        color: var(--btn-primary-hover-color); text-decoration: none; }
.btn-primary-faded:hover { background: var(--btn-primary-faded-hover-bg);  border-color: var(--btn-primary-faded-hover-border);  color: var(--btn-primary-faded-hover-color); text-decoration: none; }
.btn-secondary:hover     { background: var(--btn-secondary-hover-bg);      border-color: var(--btn-secondary-hover-border);      color: var(--btn-secondary-hover-color); box-shadow: 0 1px 3px var(--sidebar-item-active); text-decoration: none; }
.btn-success:hover       { background: var(--btn-success-hover-bg);        border-color: var(--btn-success-hover-border);        color: var(--btn-success-hover-color); text-decoration: none; }
.btn-info:hover          { background: var(--btn-info-hover-bg);           border-color: var(--btn-info-hover-border);           color: var(--btn-info-hover-color); text-decoration: none; }
.btn-warning:hover       { background: var(--btn-warning-hover-bg);        border-color: var(--btn-warning-hover-border);        color: var(--btn-warning-hover-color); text-decoration: none; }
.btn-danger:hover        { background: var(--btn-danger-hover-bg);         border-color: var(--btn-danger-hover-border);         color: var(--btn-danger-hover-color); text-decoration: none; }
.btn-light:hover         { background: var(--btn-light-hover-bg);          border-color: var(--btn-light-hover-border);          color: var(--btn-light-hover-color); text-decoration: none; }
/* Per-variant — active */
.btn-default:active       { background: var(--btn-default-active-bg);       border-color: var(--btn-default-active-border); }
.btn-primary:active       { background: var(--btn-primary-active-bg);       border-color: var(--btn-primary-active-border); }
.btn-primary-faded:active { background: var(--btn-primary-faded-active-bg); border-color: var(--btn-primary-faded-active-border); }
.btn-secondary:active     { background: var(--btn-secondary-active-bg);     border-color: var(--btn-secondary-active-border); }
.btn-success:active       { background: var(--btn-success-active-bg);       border-color: var(--btn-success-active-border); }
.btn-info:active          { background: var(--btn-info-active-bg);          border-color: var(--btn-info-active-border); }
.btn-warning:active       { background: var(--btn-warning-active-bg);       border-color: var(--btn-warning-active-border); }
.btn-danger:active        { background: var(--btn-danger-active-bg);        border-color: var(--btn-danger-active-border); }
.btn-light:active         { background: var(--btn-light-active-bg);         border-color: var(--btn-light-active-border); }
/* Sizes */
.btn-sm { font-size: var(--btn-sm-font-size); font-weight: var(--btn-sm-font-weight); line-height: var(--btn-sm-line-height); border-radius: var(--btn-sm-radius); }
.btn-lg { font-size: var(--btn-lg-font-size); font-weight: var(--btn-lg-font-weight); line-height: var(--btn-lg-line-height); border-radius: var(--btn-lg-radius); }
.btn-group { display: flex; gap: 10px; }

/* ============================================
   FORMS — Apple-style
   ============================================ */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: var(--input-label-font-size); font-weight: var(--input-label-font-weight); color: var(--input-label-color); margin-bottom: 6px; }
.form-input {
    width: 100%; height: var(--input-height); padding: 0 var(--input-pad-x);
    background: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-radius); font-size: var(--input-font-size); font-family: var(--font-family);
    color: var(--input-color); outline: none;
    transition: all var(--transition-fast);
}
.form-input:focus { border-color: var(--input-focus-border-color); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.form-input::placeholder { color: var(--input-placeholder-color); }
.form-textarea {
    width: 100%; min-height: 120px; padding: 12px var(--input-pad-x);
    background: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-radius); font-size: var(--input-font-size); font-family: var(--font-family);
    color: var(--input-color); outline: none; resize: vertical;
    transition: all var(--transition-fast); line-height: 1.5;
}
.form-textarea:focus { border-color: var(--input-focus-border-color); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.form-textarea::placeholder { color: var(--input-placeholder-color); }
.form-select {
    width: 100%; height: var(--input-height); padding: 0 var(--input-pad-x);
    background: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color);
    border-radius: var(--input-radius); font-size: var(--input-font-size); font-family: var(--font-family);
    color: var(--input-color); outline: none;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: all var(--transition-fast);
}
.form-select:focus { border-color: var(--input-focus-border-color); box-shadow: 0 0 0 3px var(--input-focus-ring); }
.form-input:disabled, .form-textarea:disabled, .form-select:disabled { background: var(--input-disabled-bg); cursor: not-allowed; opacity: 0.7; }
.form-hint { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-checkbox-row { display: flex; align-items: center; gap: 8px; }
.form-checkbox { width: var(--icheck-size); height: var(--icheck-size); accent-color: var(--icheck-accent); }
.password-wrapper { position: relative; }
.password-wrapper .form-input { padding-right: 44px; }
.password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-text-tertiary); padding: 4px; }
.password-toggle svg { width: 18px; height: 18px; }

/* ============================================
   GROUPED LIST — macOS Settings Style
   ============================================ */
.settings-group { background: var(--color-surface); border-radius: var(--radius-lg); margin-bottom: 24px; overflow: hidden; }
.settings-group-header { padding: 16px 24px 8px; }
.settings-group-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.settings-item { display: flex; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--color-surface-secondary); gap: 14px; transition: background var(--transition-fast); }
.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: var(--color-surface-tertiary); }
.settings-item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-item-icon svg { width: 16px; height: 16px; }
.settings-item-content { flex: 1; min-width: 0; }
.settings-item-label { font-size: var(--text-md); font-weight: var(--fw-normal); color: var(--color-text-primary); }
.settings-item-value { font-size: var(--text-md); color: var(--color-text-secondary); }
.settings-item-sublabel { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 1px; }
.settings-item-action { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.settings-item-chevron { color: var(--color-text-quaternary); }
.settings-item-chevron svg { width: 14px; height: 14px; }

/* ============================================
   CONVERSATION THREAD — Ticket View
   ============================================ */
.thread { display: flex; flex-direction: column; gap: 20px; }
.thread-message { max-width: 85%; }
.thread-message.staff { align-self: flex-start; }
.thread-message.client { align-self: flex-end; }
.thread-bubble { padding: 14px 18px; border-radius: 18px; font-size: var(--text-md); line-height: 1.55; }
.thread-message.staff .thread-bubble { background: var(--color-surface-secondary); color: var(--color-text-primary); border-bottom-left-radius: 6px; }
.thread-message.client .thread-bubble { background: var(--color-accent); color: white; border-bottom-right-radius: 6px; }
.thread-sender { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text-tertiary); margin-bottom: 4px; padding: 0 4px; }
.thread-message.client .thread-sender { text-align: right; }
.thread-time { font-size: var(--text-xs); color: var(--color-text-quaternary); margin-top: 4px; padding: 0 4px; }
.thread-message.client .thread-time { text-align: right; }

/* ============================================
   USAGE BARS
   ============================================ */
.usage-bar-container { margin-bottom: 14px; }
.usage-bar-header { display: flex; justify-content: space-between; font-size: var(--text-base); margin-bottom: 6px; }
.usage-bar-label { color: var(--color-text-primary); font-weight: var(--fw-medium); }
.usage-bar-value { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.usage-bar { height: 6px; background: var(--color-surface-secondary); border-radius: 3px; overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 3px; transition: width var(--transition-medium); }
.usage-bar-fill.blue { background: var(--color-accent); }
.usage-bar-fill.green { background: var(--color-green); }
.usage-bar-fill.orange { background: var(--color-orange); }
.usage-bar-fill.red { background: var(--color-red); }

/* ============================================
   CALLOUT / ALERT
   ============================================ */
.callout { padding: 16px 20px; border-radius: var(--radius-md); margin-bottom: 24px; display: flex; align-items: flex-start; gap: 12px; }
.callout.info { background: var(--color-blue-bg); color: var(--color-blue-text); }
.callout.warning { background: var(--color-orange-bg); color: var(--color-orange-text); }
.callout.success { background: var(--color-green-bg); color: var(--color-green-text); }
.callout.error { background: var(--color-red-bg); color: var(--color-red-text); }
.callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.callout-text { font-size: var(--text-md); line-height: 1.5; }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state-icon { width: 56px; height: 56px; background: var(--color-surface-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.empty-state-icon svg { width: 24px; height: 24px; color: var(--color-text-tertiary); }
.empty-state-title { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 4px; }
.empty-state-text { font-size: var(--text-md); color: var(--color-text-secondary); margin-bottom: 18px; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; }
.pagination-btn { width: 32px; height: 32px; border-radius: var(--pagination-radius); border: none; background: none; color: var(--color-text-secondary); font-size: var(--text-base); font-weight: var(--fw-medium); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); font-family: var(--font-family); }
.pagination-btn:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.pagination-btn.active { background: var(--color-accent); color: white; }
.pagination-btn:disabled { opacity: 0.3; cursor: default; }

/* ============================================
   KB CATEGORIES GRID
   ============================================ */
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kb-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; transition: all var(--transition-medium); text-decoration: none; color: inherit; display: block; }
.kb-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); color: inherit; text-decoration: none; }
.kb-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.kb-card-icon svg { width: 20px; height: 20px; }
.kb-card-title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 4px; }
.kb-card-count { font-size: var(--text-base); color: var(--color-text-secondary); }

/* ============================================
   LOGIN / AUTH LAYOUT
   ============================================ */
.auth-layout { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg); }
.auth-layout .auth-container { flex: 1; display: flex; align-items: center; justify-content: center; }
.auth-layout body, .auth-layout .main, .auth-layout .sidebar { display: none; }
.auth-card { width: 100%; max-width: 400px; padding: 48px 40px; }
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo svg { width: 40px; height: 40px; color: var(--color-text-primary); }
.auth-title { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin-bottom: 6px; color: var(--color-text-primary); }
.auth-subtitle { font-size: var(--text-lg); color: var(--color-text-secondary); text-align: center; margin-bottom: 32px; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-link-row { text-align: center; margin-top: -4px; }
.auth-link-row .auth-link { font-size: var(--text-md); color: var(--color-link); text-decoration: none; }
.auth-link-row .auth-link:hover { text-decoration: underline; }
.form-row-inline { display: flex; align-items: center; justify-content: space-between; margin-top: -4px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-md); color: var(--color-text-secondary); cursor: pointer; }
.form-checkbox { width: var(--icheck-size); height: var(--icheck-size); accent-color: var(--icheck-accent); cursor: pointer; }
.btn-full { width: 100%; display: flex; justify-content: center; }
.auth-footer { text-align: center; margin-top: 24px; font-size: var(--text-base); color: var(--color-text-tertiary); }
.auth-footer a { color: var(--color-accent); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* ============================================
   INVOICE DETAIL
   ============================================ */
.invoice-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; gap: 20px; }
.invoice-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.invoice-address-label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.invoice-address-text { font-size: var(--text-md); color: var(--color-text-primary); line-height: 1.6; }
.invoice-total-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: var(--text-md); }
.invoice-total-row.grand { font-size: var(--text-h6); font-weight: var(--fw-semibold); border-top: 0.5px solid var(--color-border); padding-top: 14px; margin-top: 6px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .summary-tiles { grid-template-columns: repeat(2, 1fr); }
    .split-row { grid-template-columns: 1fr; }
    .kb-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sidebar { display: none; }
    .main, .main-content { margin-left: 0; }
    body[data-sidebar-side="right"] .main,
    body[data-sidebar-side="right"] .main-content { margin-right: 0; }
    .content, .content-area { width: 100%; max-width: none; padding: 24px 20px 40px; }
    .topbar { padding: 0 20px; }
    .page-header-row,
    .card-header { align-items: flex-start; flex-wrap: wrap; }
    .card-action { white-space: normal; }
    .filter-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab { flex: 0 0 auto; white-space: nowrap; }
    .card:has(.hadrian-table),
    .card:has(.invoice-table) { overflow-x: auto; }
    .hadrian-table,
    .invoice-table { min-width: 560px; }
    .service-item { align-items: flex-start; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
    .service-meta { width: 100%; margin-left: 48px; flex-wrap: wrap; gap: 8px; }
    .page-title, .greeting-title { font-size: var(--text-h4); }
    .quick-actions { grid-template-columns: 1fr; }
    .kb-grid { grid-template-columns: 1fr; }
    .invoice-addresses { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .invoice-list-header,
    .domain-list-header { display: none; }
    .invoice-row,
    .invoice-list.detailed .invoice-row,
    .domain-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-left: -8px;
        margin-right: -8px;
        padding: 14px 8px;
    }
    .invoice-row > *,
    .domain-row > * { min-width: 0; max-width: 100%; }
    .invoice-row .service-chevron,
    .domain-row .service-chevron { display: none; }
}

@media (max-width: 480px) {
    .content,
    .content-area { padding-left: 16px; padding-right: 16px; }
    .card-body { padding-left: 16px; padding-right: 16px; }
}

/* ============================================
   NOTIFICATION DROPDOWN
   ============================================ */
.notification-wrapper { position: relative; }
.notification-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; width: 320px;
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown); border: 0.5px solid var(--color-border);
    padding: 0; opacity: 0; visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transition: all var(--transition-fast); z-index: 200; overflow: hidden;
}
.notification-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.notification-dropdown-header { padding: 12px 16px; border-bottom: 1px solid var(--color-surface-secondary); display: flex; justify-content: space-between; align-items: center; }
.notification-dropdown-title { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.notification-dropdown-clear { font-size: var(--text-sm); color: var(--color-link); cursor: pointer; background: none; border: none; font-family: var(--font-family); }
.notification-dropdown-clear:hover { text-decoration: underline; }
.notification-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--color-surface-secondary); transition: background var(--transition-fast); text-decoration: none; color: inherit; }
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--color-surface-tertiary); text-decoration: none; color: inherit; }
.notification-dot-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.notification-dot-indicator.red { background: var(--color-red); }
.notification-dot-indicator.orange { background: var(--color-orange); }
.notification-dot-indicator.blue { background: var(--color-accent); }
.notification-dot-indicator.green { background: var(--color-green); }
.notification-content { flex: 1; min-width: 0; }
.notification-text { font-size: var(--text-base); color: var(--color-text-primary); line-height: 1.4; }
.notification-time { font-size: var(--text-xs); color: var(--color-text-quaternary); margin-top: 2px; }
[data-theme="dark"] .notification-dropdown-header { border-color: var(--color-border); }
[data-theme="dark"] .notification-item { border-color: var(--color-border); }

/* ============================================
   STORE / MARKETPLACE PAGES
   ============================================ */
.store-hero { text-align: center; padding: 20px 0 40px; }
.store-hero-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.store-hero-icon svg { width: 28px; height: 28px; }
.store-hero-title { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 8px; }
.store-hero-subtitle { font-size: var(--text-xl); color: var(--color-text-secondary); max-width: 540px; margin: 0 auto 24px; line-height: 1.5; }

.store-nav { display: flex; gap: 6px; margin-bottom: 32px; overflow-x: auto; padding-bottom: 4px; }
.store-nav a { padding: 6px 16px; border-radius: 980px; font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-secondary); background: var(--color-surface-secondary); border: 1px solid var(--color-border-card); transition: all var(--transition-fast); white-space: nowrap; text-decoration: none; }
.store-nav a:hover { color: var(--color-text-primary); background: var(--color-surface); text-decoration: none; }
.store-nav a.active { background: var(--color-accent); color: white; border-color: var(--color-accent); }

.store-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.store-plan-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; }
.store-plan-card.featured { box-shadow: 0 0 0 2px var(--color-accent); }
.store-plan-name { font-size: var(--text-base); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); margin-bottom: 4px; }
.store-plan-name .featured-badge { color: var(--color-accent); }
.store-plan-title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 12px; letter-spacing: -0.015em; }
.store-plan-price { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-text-primary); line-height: 1; }
.store-plan-price .period { font-size: var(--text-lg); font-weight: var(--fw-normal); color: var(--color-text-tertiary); }
.store-plan-desc { font-size: var(--text-md); color: var(--color-text-secondary); margin: 12px 0 20px; line-height: 1.5; }
.store-plan-features { list-style: none; padding: 0; margin: 0 0 24px; font-size: var(--text-base); line-height: 2; color: var(--color-text-secondary); flex: 1; }
.store-plan-features li::before { content: '\2713'; color: var(--color-green-text); margin-right: 8px; font-weight: var(--fw-semibold); }
.store-plan-cta { margin-top: auto; }
.store-plan-cta .btn-primary, .store-plan-cta .btn-secondary { width: 100%; justify-content: center; text-decoration: none; }

.store-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.store-feature { display: flex; gap: 14px; }
.store-feature-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.store-feature-icon svg { width: 18px; height: 18px; }
.store-feature-content { flex: 1; }
.store-feature-title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 2px; }
.store-feature-desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.5; }

.store-faq { margin-bottom: 32px; }
.store-faq details { border-bottom: 1px solid var(--color-surface-secondary); }
.store-faq details:last-child { border-bottom: none; }
.store-faq summary { padding: 14px 0; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.store-faq summary::-webkit-details-marker { display: none; }
.store-faq summary::after { content: '+'; font-size: var(--text-h6); color: var(--color-text-tertiary); font-weight: var(--fw-light); transition: transform var(--transition-fast); }
.store-faq details[open] summary::after { content: '\2212'; }
.store-faq .faq-answer { padding: 0 0 16px; font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.6; }

.store-cta-section { text-align: center; padding: 32px 0 8px; }
.store-cta-title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 6px; }
.store-cta-subtitle { font-size: var(--text-md); color: var(--color-text-secondary); margin-bottom: 18px; }

[data-theme="dark"] .store-faq details { border-color: var(--color-border); }

@media (max-width: 1200px) { .store-plans { grid-template-columns: 1fr; } .store-feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .store-hero-title { font-size: var(--text-h4); } .store-nav { flex-wrap: nowrap; } }

/* ============================================
   Homepage — Public-facing marketing page
   ============================================ */

/* Homepage layout */
.homepage-layout { background: var(--color-surface); min-height: 100vh; font-family: var(--font-family); color: var(--color-text-primary); -webkit-font-smoothing: antialiased; }

/* Nav icon buttons */
.homepage-nav .icon-btn { padding: 4px; cursor: pointer; color: var(--color-text-primary); opacity: 0.85; display: flex; align-items: center; }
.homepage-nav .icon-btn:hover { opacity: 1; }

/* Hero */
.hp-hero { text-align: center; padding: 60px 22px 20px; background: var(--color-surface); }
.hp-hero .hp-eyebrow { font-size: var(--text-2xl); font-weight: var(--fw-medium); color: var(--color-text-primary); letter-spacing: -0.003em; margin-bottom: 6px; }
.hp-hero h1 { font-size: var(--text-display); line-height: 1.05; font-weight: var(--fw-semibold); letter-spacing: -0.03em; margin: 0 0 18px; color: var(--color-text-primary); }
.hp-hero .hp-subhead { font-size: var(--text-h4); font-weight: var(--fw-normal); letter-spacing: -0.015em; color: var(--color-text-primary); max-width: 640px; margin: 0 auto 28px; line-height: 1.2; }
.hp-hero .hp-cta-row { display: flex; gap: 24px; justify-content: center; align-items: center; font-size: var(--text-xl); }
.hp-hero .hp-cta-row a { color: var(--color-link); font-weight: var(--fw-normal); text-decoration: none; }
.hp-hero .hp-cta-row a:hover { text-decoration: underline; }
.hp-hero .hp-buy-btn { background: var(--color-accent); color: var(--color-surface) !important; padding: 10px 24px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); display: inline-block; }
.hp-hero .hp-buy-btn:hover { background: var(--color-accent-hover); text-decoration: none !important; }
/* Generic hp-buy-btn fallback so it renders as a button outside hero contexts too */
.hp-buy-btn { background: var(--color-accent); color: var(--color-surface) !important; padding: 10px 24px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); display: inline-block; text-decoration: none; transition: background 0.15s; }
.hp-buy-btn:hover { background: var(--color-accent-hover); text-decoration: none !important; }

/* Hero visual — dashboard preview */
.hp-hero-visual { max-width: 980px; margin: 40px auto 0; padding: 0 22px; }
.hp-browser-frame { background: linear-gradient(135deg, var(--color-surface-secondary) 0%, var(--color-border) 100%); border-radius: 22px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.hp-browser-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px 10px; }
.hp-browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.hp-dash-shot { background: var(--color-surface); border-radius: 12px; padding: 24px; }
.hp-dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.hp-dash-title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.hp-dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.hp-dash-tile { background: var(--color-bg); border-radius: 12px; padding: 14px; border: 1px solid var(--color-border-card); }
.hp-dash-tile .n { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.hp-dash-tile .l { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.hp-dash-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-surface-secondary); font-size: var(--text-sm); }
.hp-dash-row:last-child { border: 0; }
.hp-status-pill { background: rgba(48,209,88,0.14); color: var(--color-green-text); padding: 2px 8px; border-radius: 980px; font-size: var(--text-xs); font-weight: var(--fw-medium); }

/* Tile grid */
.hp-tiles-section { padding: 80px 22px 14px; background: var(--color-bg); }
.hp-tiles-inner { max-width: var(--w-prose); margin: 0 auto; }
.hp-tiles-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* 3×2 rich grid variant (6 tiles with visuals) */
.hp-tiles-section.rich { padding: 48px 22px; }
.hp-tiles-section.rich .hp-tiles-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: var(--w-wide); }
.hp-tiles-section.rich .hp-tile { min-height: 440px; padding: 36px 30px; }
.hp-tiles-section.rich .hp-tile h2 { font-size: var(--text-h4); line-height: 1.12; letter-spacing: -0.02em; max-width: none; margin: 6px 0 10px; }
.hp-tiles-section.rich .hp-tile p { font-size: var(--text-lg); line-height: 1.45; max-width: 280px; margin: 0 0 18px; }
.hp-tiles-section.rich .hp-tile .hp-tile-eyebrow { font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.hp-tiles-section.rich .hp-tile .hp-tile-links { font-size: var(--text-md); margin-bottom: 0; }
.hp-tiles-section.rich .hp-tile .hp-tile-visual { margin-top: auto; padding-top: 20px; min-height: 140px; max-height: 180px; }
.hp-tiles-section.rich .hp-tile .hp-tile-visual .hp-server-rack,
.hp-tiles-section.rich .hp-tile .hp-tile-visual .hp-gauge,
.hp-tiles-section.rich .hp-tile .hp-tile-visual .hp-domain-cards { transform: scale(0.85); transform-origin: center bottom; }
.hp-tiles-section.rich .hp-tile .hp-tile-visual .hp-shield { transform: scale(0.72); transform-origin: center bottom; }
.hp-tiles-section.rich .hp-tile .hp-tile-visual .hp-globe { width: 150px; height: 150px; }

/* 3×3 medium grid variant */
.hp-tiles-section.grid-3 { padding: 48px 22px; }
.hp-tiles-section.grid-3 .hp-tiles-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: var(--w-wide); }
.hp-tiles-section.grid-3 .hp-tile { min-height: 280px; padding: 32px 28px; align-items: flex-start; text-align: left; }
.hp-tiles-section.grid-3 .hp-tile h2 { font-size: var(--text-h4); line-height: 1.15; letter-spacing: -0.02em; max-width: none; margin: 6px 0 8px; }
.hp-tiles-section.grid-3 .hp-tile p { font-size: var(--text-lg); line-height: 1.45; margin: 0 0 16px; max-width: none; }
.hp-tiles-section.grid-3 .hp-tile .hp-tile-eyebrow { font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.hp-tiles-section.grid-3 .hp-tile .hp-tile-links { margin-top: auto; font-size: var(--text-md); }
.hp-tile { position: relative; border-radius: 18px; overflow: hidden; min-height: 580px; padding: 52px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp-tile.tall { min-height: 640px; }
.hp-tile .hp-tile-eyebrow { font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: 0.02em; margin-bottom: 6px; }
.hp-tile h2 { font-size: var(--text-h1); line-height: 1.08; font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 10px; max-width: 440px; }
.hp-tile h2.smaller { font-size: var(--text-h2); }
.hp-tile p { font-size: var(--text-2xl); line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 24px; max-width: 440px; font-weight: var(--fw-normal); }
.hp-tile .hp-tile-links { display: flex; gap: 28px; font-size: var(--text-xl); }
.hp-tile .hp-tile-links a.blue { color: var(--color-link); text-decoration: none; }
.hp-tile .hp-tile-links a.blue:hover { text-decoration: underline; }
.hp-tile .pill-btn { background: var(--color-accent); color: var(--color-surface); padding: 8px 20px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; }
.hp-tile .pill-btn:hover { background: var(--color-accent-hover); }
.hp-tile-visual { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding-top: 28px; }

.hp-tile-light { background: var(--color-bg); color: var(--color-text-primary); border: 1px solid var(--color-border-card); }
.hp-tile-dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-tile-cream { background: #faf7f2; color: var(--color-text-primary); }
.hp-tile-sky { background: linear-gradient(180deg, #e8f2fb 0%, #d4e8f7 100%); color: var(--color-text-primary); }
.hp-tile-plum { background: #1a1735; color: var(--color-text-primary); }
.hp-tile-graphite { background: #2a2a2c; color: var(--color-text-primary); }

/* Tile visuals */
.hp-server-rack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 340px; }
.hp-server-unit { background: var(--color-border-card); border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 10px; }
.hp-server-unit .dot-g { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 8px rgba(48,209,88,0.5); }
.hp-server-unit .bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hp-server-unit .bar { height: 3px; background: rgba(0,0,0,0.1); border-radius: 2px; }
.hp-server-unit .bar.fill { background: var(--color-accent); }
.hp-tile-dark .hp-server-unit { background: rgba(255,255,255,0.06); }
.hp-tile-dark .hp-server-unit .bar { background: rgba(255,255,255,0.1); }
.hp-tile-dark .hp-server-unit .bar.fill { background: #2997ff; }

.hp-globe { width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #5ac8fa 0%, var(--color-accent) 60%, #003d80 100%); box-shadow: inset -20px -20px 60px rgba(0,0,0,0.3); position: relative; }
.hp-globe::before, .hp-globe::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); }
.hp-globe::before { transform: scale(0.7, 1); }
.hp-globe::after { transform: scale(1, 0.4); top: 50%; height: 1px; }

.hp-shield { width: 220px; height: 260px; position: relative; }
.hp-shield-body { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-green), #0a9c44); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; display: flex; align-items: center; justify-content: center; color: var(--color-surface); font-size: var(--text-display-lg); font-weight: var(--fw-bold); box-shadow: 0 20px 60px rgba(48,209,88,0.3); }

.hp-domain-cards { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; }
.hp-domain-card { background: rgba(0,0,0,0.05); padding: 12px 16px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; font-size: var(--text-md); }
.hp-domain-card .tld { color: var(--color-accent); font-weight: var(--fw-semibold); }
.hp-tile-sky .hp-domain-card { background: rgba(255,255,255,0.6); }

.hp-gauge { width: 260px; }
.hp-gauge-track { height: 10px; background: rgba(255,255,255,0.15); border-radius: 980px; margin-bottom: 8px; overflow: hidden; }
.hp-gauge-fill { height: 100%; background: linear-gradient(90deg, var(--color-green), #ffcc00, var(--color-red)); border-radius: 980px; }

/* Feature strip (horizontal scroll) */
.hp-strip-section { background: var(--color-surface); padding: 100px 0 80px; }
.hp-strip-header { max-width: var(--w-prose); margin: 0 auto 40px; padding: 0 22px; }
.hp-strip-header h2 { font-size: var(--text-h1); line-height: 1.08; font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0; color: var(--color-text-primary); }
.hp-strip-scroll { display: flex; gap: 18px; overflow-x: auto; padding: 0 22px 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hp-strip-scroll::-webkit-scrollbar { height: 8px; }
.hp-strip-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
.hp-strip-card { flex: 0 0 340px; min-height: 460px; border-radius: 18px; padding: 32px; scroll-snap-align: start; display: flex; flex-direction: column; }
.hp-strip-card.a { background: linear-gradient(180deg, #fff5d6 0%, #ffd66b 100%); color: #3a2c00; }
.hp-strip-card.b { background: linear-gradient(180deg, var(--color-text-primary) 0%, #3a3a3c 100%); color: var(--color-surface); }
.hp-strip-card.c { background: linear-gradient(180deg, #d4f0e4 0%, #7dd3a8 100%); color: #0c3d24; }
.hp-strip-card.d { background: linear-gradient(180deg, #fce4e4 0%, #f7b2b2 100%); color: #5a0e0e; }
.hp-strip-card.e { background: linear-gradient(180deg, #e6d9f7 0%, #b89fe8 100%); color: #2d1055; }
.hp-strip-card .tag { font-size: var(--text-base); font-weight: var(--fw-medium); opacity: 0.7; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.hp-strip-card h3 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 12px; }
.hp-strip-card p { font-size: var(--text-xl); line-height: 1.4; margin: 0; opacity: 0.85; }
.hp-strip-card .strip-visual { margin-top: auto; padding-top: 32px; display: flex; justify-content: center; }

/* Pricing teaser */
.hp-pricing-section { background: var(--color-bg); padding: 110px 22px 100px; text-align: center; }
.hp-pricing-section h2 { font-size: var(--text-display-sm); line-height: 1.05; font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 14px; color: var(--color-text-primary); }
.hp-pricing-section .sub { font-size: var(--text-2xl); color: var(--color-text-secondary); max-width: 600px; margin: 0 auto 48px; }
.hp-pricing-grid { max-width: var(--w-prose); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Same story as .hp-feature-cards — modifiers, never an inline override. */
.hp-pricing-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.hp-pricing-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.hp-price-card { background: var(--color-surface); border-radius: 18px; padding: 36px 28px; text-align: left; border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.hp-price-card.highlight { border: 2px solid var(--color-accent); }
.hp-price-card .label { font-size: var(--text-base); color: var(--color-text-secondary); font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; }
.hp-price-card h3 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.015em; margin: 0 0 14px; color: var(--color-text-primary); }
.hp-price-card .price { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-text-primary); }
.hp-price-card .per { font-size: var(--text-lg); color: var(--color-text-secondary); }
.hp-price-card .price-row { display: block; }
.hp-price-card ul { list-style: none; padding: 0; margin: 24px 0; font-size: var(--text-md); line-height: 1.9; color: var(--color-text-primary); }
.hp-price-card ul li::before { content: '\2713'; color: var(--color-green); margin-right: 8px; font-weight: var(--fw-semibold); }
.hp-price-card .buy { display: block; text-align: center; padding: 10px; background: var(--color-accent); color: var(--color-surface); border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; margin-top: auto; }
.hp-price-card .buy:hover { background: var(--color-accent-hover); }
.hp-price-card.dim .buy { background: rgba(0,0,0,0.05); color: var(--color-text-primary); }
.hp-price-card.dim .buy:hover { background: rgba(0,0,0,0.08); }
.hp-compare-link { text-align: center; margin-top: 40px; font-size: var(--text-xl); }
.hp-compare-link a { color: var(--color-link); text-decoration: none; }
.hp-compare-link a:hover { text-decoration: underline; }

/* Final CTA band */
.hp-final-cta { background: var(--color-text-primary); color: var(--color-surface); padding: 110px 22px; text-align: center; }
.hp-final-cta h2 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 14px; line-height: 1.05; color: var(--color-surface); }
.hp-final-cta p { font-size: var(--text-2xl); color: #a1a1a6; max-width: 560px; margin: 0 auto 32px; }
.hp-final-cta .btn { display: inline-block; background: var(--color-accent); color: var(--color-surface); padding: 12px 28px; border-radius: 980px; font-size: var(--text-lg); font-weight: var(--fw-medium); text-decoration: none; }
.hp-final-cta .btn:hover { background: var(--color-accent-hover); }
.hp-final-cta .second-link { color: #2997ff; margin-left: 20px; font-size: var(--text-lg); text-decoration: none; }
.hp-final-cta .second-link:hover { text-decoration: underline; }

/* Footer */
.hp-footer { background: var(--color-surface-secondary); padding: 30px 22px 20px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.hp-footer-inner { max-width: var(--w-prose); margin: 0 auto; }
.hp-footer-legal { border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 14px; margin-bottom: 14px; line-height: 1.5; }
.hp-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 40px; padding: 10px 0 24px; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 14px; }
.hp-footer-col h4 { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 10px; }
.hp-footer-col ul { list-style: none; padding: 0; margin: 0; line-height: 1.8; }
.hp-footer-col a { color: var(--color-text-secondary); text-decoration: none; }
.hp-footer-col a:hover { text-decoration: underline; color: var(--color-text-primary); }
.hp-footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 10px; gap: 10px 24px; }
.hp-footer-copyright { justify-self: start; }
.hp-footer-bottom-links { display: flex; flex-wrap: wrap; justify-content: center; }
.hp-footer-bottom-links a { color: var(--color-text-secondary); text-decoration: none; padding: 0 12px; position: relative; }
.hp-footer-bottom-links a + a::before { content: ""; position: absolute; left: 0; top: 50%; height: 12px; width: 1px; background: rgba(0,0,0,0.18); transform: translateY(-50%); }
.hp-footer-bottom-links a:hover { text-decoration: underline; }
.hp-footer-bottom > .locale-btn { justify-self: end; }
/* Brand block — Apple-style wordmark + tagline + Trustpilot chip + socials + payments */
.hp-footer-legal { color: var(--color-text-secondary); }
.hp-footer-brand-mark { display: flex; align-items: center; gap: 7px; width: max-content; font-size: var(--text-lg); font-weight: var(--fw-medium); letter-spacing: -0.01em; color: var(--color-text-primary); margin-bottom: 14px; }
.hp-footer-brand-mark svg { width: 18px; height: 18px; flex-shrink: 0; }
.hp-footer-brand-logo { height: 22px; width: auto; max-width: 200px; display: inline-block; }
/* Theme-aware logo swap — both <img> tags are rendered in the TPL when
   the admin has uploaded both light and dark variants; CSS picks which
   one to show. When only one is uploaded, that single tag renders and
   neither rule hides it. */
.hp-footer-brand-mark .hp-footer-brand-logo.is-dark { display: none; }
[data-theme="dark"] .hp-footer-brand-mark .hp-footer-brand-logo.is-light { display: none; }
[data-theme="dark"] .hp-footer-brand-mark .hp-footer-brand-logo.is-dark { display: inline-block; }
.hp-footer-tagline { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 12px; max-width: 320px; }
.hp-footer-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.hp-footer-rating-stars { color: var(--color-green); letter-spacing: 1.5px; font-size: var(--text-xs); }
.hp-footer-legal .hp-footer-socials,
.hp-footer-legal .hp-footer-payments { margin-top: 18px; }
.hp-footer-socials { display: flex; gap: 6px; }
.hp-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--color-text-secondary); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.hp-footer-social svg { width: 14px; height: 14px; }
.hp-footer-social:hover { background: var(--sidebar-item-active); color: var(--color-text-primary); }
.hp-footer-payments { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-footer-payment { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 28px; background: var(--color-surface); border: 0.5px solid rgba(0,0,0,0.12); border-radius: 5px; overflow: hidden; }
.hp-footer-payment svg { max-width: 82%; max-height: 16px; }
/* Footer layout — default = split (brand left, menu cols right). The
   border + outer padding move to the .hp-footer-top wrapper so the brand
   block and menus sit cleanly in the same row. The body[data-footer]
   chip toggle (below) flips between this and "menu-only" mode. */
.hp-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 40px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.hp-footer-top .hp-footer-legal,
.hp-footer-top .hp-footer-cols { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.hp-footer-top .hp-footer-cols { gap: 24px; padding: 0; }
/* Menu-only mode — hide brand block; menus span the full row and recover
   their original border, padding, and gap so the footer keeps a clean
   horizontal divider above the copyright row. */
body[data-footer="menu-only"] .hp-footer-legal { display: none; }
body[data-footer="menu-only"] .hp-footer-top {
    display: block;
    padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
body[data-footer="menu-only"] .hp-footer-top .hp-footer-cols {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 10px 0 24px;
    margin-bottom: 14px;
    gap: 40px;
}
[data-theme="dark"] .hp-footer-top,
[data-theme="dark"] body[data-footer="menu-only"] .hp-footer-top .hp-footer-cols { border-color: rgba(255,255,255,0.1); }
/* Floating footer-layout preview chip — Apple-style dark pill, bottom-center */
.fp-chip {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
    z-index: 1000;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(28,28,30,0.78); color: var(--color-text-primary);
    padding: 6px 10px; border-radius: 980px;
    font-size: var(--text-sm); font-weight: var(--fw-medium); font-family: inherit;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    user-select: none;
}
.fp-chip-tag { font-size: var(--text-xs); opacity: 0.55; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 6px; border-right: 1px solid rgba(255,255,255,0.15); }
.fp-chip-label { opacity: 0.65; font-size: var(--text-xs); }
.fp-chip-group { display: flex; background: rgba(255,255,255,0.12); border-radius: 980px; padding: 2px; }
.fp-chip-group button { border: 0; background: transparent; color: rgba(255,255,255,0.65); font-size: var(--text-xs); font-weight: var(--fw-medium); padding: 4px 12px; border-radius: 980px; cursor: pointer; font-family: inherit; }
.fp-chip-group button.active { background: var(--color-surface-secondary); color: var(--color-text-primary); }
/* Compact footer layout — single horizontal row with three zones. */
.hp-footer-compact { padding: 20px 22px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.hp-footer-compact-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hp-footer-compact-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hp-footer-compact-brand .hp-footer-brand-mark { margin-bottom: 0; }
.hp-footer-compact-desc { font-size: var(--text-sm); color: var(--color-text-tertiary); max-width: 320px; line-height: 1.45; }
.hp-footer-compact-nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; justify-content: center; }
.hp-footer-compact-nav a { color: var(--color-text-secondary); text-decoration: none; }
.hp-footer-compact-nav a:hover { color: var(--color-text-primary); text-decoration: underline; }
.hp-footer-compact-nav-label { color: var(--color-text-tertiary); }
.hp-footer-compact-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.hp-footer-compact-copy { color: var(--color-text-tertiary); }
[data-theme="dark"] .hp-footer-compact { background: #1c1c1e; }
@media (max-width: 720px) {
    .hp-footer-bottom { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
    .hp-footer-copyright, .hp-footer-bottom > .locale-btn { justify-self: center; }
    .hp-footer-top { grid-template-columns: 1fr; gap: 20px; }
    .hp-footer-compact-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hp-footer-compact-nav { justify-content: flex-start; }
    .hp-footer-compact-end { margin-left: 0; }
}

/* Homepage dark mode */
[data-theme="dark"] .homepage-layout { background: #000; color: var(--color-text-primary); }
[data-theme="dark"] .hp-hero { background: #000; }
[data-theme="dark"] .hp-hero h1, [data-theme="dark"] .hp-hero .hp-subhead, [data-theme="dark"] .hp-hero .hp-eyebrow { color: var(--color-text-primary); }
[data-theme="dark"] .hp-browser-frame { background: linear-gradient(135deg, #2a2a2c 0%, var(--color-text-primary) 100%); }
[data-theme="dark"] .hp-dash-shot { background: #1c1c1e; }
[data-theme="dark"] .hp-dash-title { color: var(--color-text-primary); }
[data-theme="dark"] .hp-dash-tile { background: #2a2a2c; border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .hp-dash-tile .n { color: var(--color-text-primary); }
[data-theme="dark"] .hp-dash-row { border-color: #2a2a2c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-tiles-section { background: #000; }
[data-theme="dark"] .hp-tile-light { background: #1c1c1e; color: var(--color-text-primary); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .hp-tile-cream { background: #1c1c1e; color: var(--color-text-primary); }
[data-theme="dark"] .hp-strip-section { background: #000; }
[data-theme="dark"] .hp-strip-header h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-section { background: #1c1c1e; }
[data-theme="dark"] .hp-pricing-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-price-card { background: #2a2a2c; border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .hp-price-card h3, [data-theme="dark"] .hp-price-card .price { color: var(--color-text-primary); }
[data-theme="dark"] .hp-price-card ul { color: var(--color-text-primary); }
[data-theme="dark"] .hp-price-card.highlight { border-color: #2997ff; }
[data-theme="dark"] .hp-price-card.dim .buy { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="dark"] .hp-footer { background: #1c1c1e; }
[data-theme="dark"] .hp-footer-legal { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .hp-footer-cols { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .hp-footer-col h4 { color: var(--color-text-primary); }

/* Homepage responsive */
@media (max-width: 820px) {
    .hp-hero h1 { font-size: var(--text-display-sm); }
    .hp-hero .hp-subhead { font-size: var(--text-3xl); }
    .hp-tiles-row { grid-template-columns: 1fr; }
    .hp-tiles-section.grid-3 .hp-tiles-inner { grid-template-columns: 1fr; }
    .hp-tiles-section.grid-3 .hp-tile { min-height: 220px; }
    .hp-tiles-section.rich .hp-tiles-inner { grid-template-columns: 1fr 1fr; }
    .hp-tiles-section.rich .hp-tile { min-height: 380px; padding: 28px 24px; }
}
@media (max-width: 600px) {
    .hp-tiles-section.rich .hp-tiles-inner { grid-template-columns: 1fr; }
    .hp-tile { min-height: 500px; }
    .hp-tile h2 { font-size: var(--text-h3); }
    .hp-strip-card { flex: 0 0 280px; }
    .hp-pricing-grid,
    .hp-pricing-grid.cols-1,
    .hp-pricing-grid.cols-2,
    .hp-pricing-grid.cols-4 { grid-template-columns: 1fr; }
    .hp-footer-cols { grid-template-columns: repeat(2, 1fr); }
    .hp-final-cta h2 { font-size: var(--text-h1); }
    .hp-dash-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   Public Page Blocks — Reusable Marketing Sections
   ============================================ */

/* --- Hero Split (text left + visual right) --- */
.hp-hero-split { max-width: var(--w-prose); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 100px 22px; }
.hp-hero-split .hp-split-text .hp-eyebrow { font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.hp-hero-split .hp-split-text h1 { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.07; margin: 0 0 16px; color: var(--color-text-primary); }
.hp-hero-split .hp-split-text p { font-size: var(--text-2xl); color: var(--color-text-secondary); line-height: 1.35; margin: 0 0 28px; }
.hp-hero-split .hp-split-text .hp-cta-row { display: flex; gap: 20px; align-items: center; font-size: var(--text-xl); }
.hp-hero-split .hp-split-text .hp-cta-row a { color: var(--color-link); text-decoration: none; }
.hp-hero-split .hp-split-text .hp-cta-row a:hover { text-decoration: underline; }
.hp-hero-split .hp-split-visual { display: flex; align-items: center; justify-content: center; }

/* --- Hero Dark Stats --- */
.hp-hero-dark { background: var(--color-text-primary); color: var(--color-surface); padding: 120px 22px; text-align: center; }
.hp-hero-dark h1 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 12px; color: var(--color-surface); }
.hp-hero-dark .hp-hero-sub { font-size: var(--text-3xl); color: #a1a1a6; max-width: 560px; margin: 0 auto 48px; }
.hp-hero-dark .hp-hero-stats { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; }
.hp-hero-stat { text-align: center; }
.hp-hero-stat .stat-num { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-text-primary); }
.hp-hero-stat .stat-label { font-size: var(--text-md); color: #a1a1a6; margin-top: 4px; }

/* --- Hero Gradient with Floating Cards --- */
.hp-hero-gradient { padding: 120px 22px 80px; text-align: center; position: relative; overflow: hidden; background: linear-gradient(160deg, #eaf2ff 0%, #dbe9fc 40%, #b9d3f7 100%); }
.hp-hero-gradient.blue { background: linear-gradient(160deg, #eaf2ff 0%, #dbe9fc 40%, #b9d3f7 100%); }
.hp-hero-gradient.green { background: linear-gradient(160deg, #ebf7ef 0%, #d4efdd 40%, #a9dfbe 100%); }
.hp-hero-gradient.purple { background: linear-gradient(160deg, #f2ecfb 0%, #e0d0f4 40%, #c5afe4 100%); }
.hp-hero-gradient.rose { background: linear-gradient(160deg, #fbecf1 0%, #f5d4df 40%, #ebadc3 100%); }
.hp-hero-gradient.graphite { background: linear-gradient(160deg, var(--color-surface-secondary) 0%, var(--color-border) 40%, #d2d2d7 100%); }
.hp-hero-gradient h1 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.07; margin: 0 0 12px; color: var(--color-text-primary); }
.hp-hero-gradient .hp-hero-sub { font-size: var(--text-2xl); color: var(--color-text-primary); opacity: 0.7; max-width: 540px; margin: 0 auto 40px; }
.hp-hero-gradient .hp-floating-cards { display: flex; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.hp-floating-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-radius: 16px; padding: 24px; min-width: 180px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.hp-floating-card .card-icon { font-size: var(--text-h3); margin-bottom: 8px; }
.hp-floating-card .card-label { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.hp-floating-card .card-sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* --- Alternating Left-Right Sections --- */
.hp-alternating { max-width: var(--w-prose); margin: 0 auto; padding: 40px 22px; }
.hp-alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 60px 0; }
.hp-alt-row.reverse { direction: rtl; }
.hp-alt-row.reverse > * { direction: ltr; }
.hp-alt-text .hp-eyebrow { font-size: var(--text-md); font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; }
.hp-alt-text h3 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; color: var(--color-text-primary); }
.hp-alt-text p { font-size: var(--text-xl); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.hp-alt-visual { display: flex; align-items: center; justify-content: center; }
.hp-alt-visual .visual-box { background: var(--color-surface-secondary); border-radius: 18px; width: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; }
.hp-alt-visual .visual-box.dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-alt-visual .visual-box.accent { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
.hp-alt-visual .visual-box.green { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }

/* --- Icon Grid (3-col) --- */
.hp-icon-grid { max-width: var(--w-prose); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 80px 22px; }
.hp-icon-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* 4-up variant. The base grid is 3-wide, so a section with 4 items strands the
   fourth alone on row two — which is what the homepage did. Collapses with the
   others at 820px (see the override in that media block; without it this
   higher-specificity rule would beat the collapse and overflow on phones). */
.hp-icon-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.hp-icon-item { text-align: center; padding: 32px 20px; }
.hp-icon-item .icon-circle { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: var(--text-h4); }
.hp-icon-item .icon-circle svg { width: 30px; height: 30px; }
.hp-icon-item .icon-circle.blue { background: rgba(0,113,227,0.1); color: var(--color-accent); }
.hp-icon-item .icon-circle.green { background: var(--color-green-bg); color: var(--color-green); }
.hp-icon-item .icon-circle.orange { background: var(--color-orange-bg); color: var(--color-orange); }
.hp-icon-item .icon-circle.purple { background: rgba(175,130,255,0.1); color: #af82ff; }
.hp-icon-item .icon-circle.red { background: var(--color-red-bg); color: var(--color-red); }
.hp-icon-item .icon-circle.teal { background: rgba(90,200,250,0.1); color: #5ac8fa; }
.hp-icon-item h4 { font-size: var(--text-h6); font-weight: var(--fw-semibold); margin: 0 0 6px; color: var(--color-text-primary); }
.hp-icon-item p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.hp-icon-grid-header { text-align: center; max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px 0; }
.hp-icon-grid-header h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-icon-grid-header p { font-size: var(--text-2xl); color: var(--color-text-secondary); }

/* --- Stats Strip --- */
.hp-stats-strip { background: var(--color-surface-secondary); padding: 56px 22px; }
.hp-stats-strip .stats-inner { max-width: var(--w-prose); margin: 0 auto; display: flex; justify-content: center; gap: 0; }
.hp-stat { flex: 1; text-align: center; padding: 0 32px; border-right: 1px solid rgba(0,0,0,0.08); }
.hp-stat:last-child { border-right: none; }
.hp-stat .stat-num { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-text-primary); }
.hp-stat .stat-label { font-size: var(--text-md); color: var(--color-text-secondary); margin-top: 4px; }

/* --- Comparison Table --- */
.hp-compare-section { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-compare-section h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 40px; color: var(--color-text-primary); }
.hp-compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.hp-compare-table thead th { padding: 16px 20px; text-align: left; font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); border-bottom: 2px solid var(--color-border); }
.hp-compare-table thead th:first-child { color: var(--color-text-secondary); font-weight: var(--fw-medium); }
.hp-compare-table thead th.highlight { color: var(--color-accent); }
.hp-compare-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--color-border-light); color: var(--color-text-primary); }
.hp-compare-table tbody td:first-child { font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.hp-compare-table tbody tr:last-child td { border-bottom: none; }
.hp-compare-table .check { color: var(--color-green); font-weight: var(--fw-semibold); }
.hp-compare-table .dash { color: #d2d2d7; }
.hp-compare-table tfoot td { padding: 20px; }
.hp-compare-table tfoot a { display: inline-block; padding: 8px 20px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; }
.hp-compare-table tfoot a.primary { background: var(--color-accent); color: var(--color-surface); }
.hp-compare-table tfoot a.secondary { background: rgba(0,0,0,0.05); color: var(--color-text-primary); }

/* --- Pricing Table with Toggle --- */
.hp-pricing-toggle-section { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; text-align: center; }
.hp-pricing-toggle-section h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-pricing-toggle-section .sub { font-size: var(--text-2xl); color: var(--color-text-secondary); margin-bottom: 32px; }
.hp-billing-toggle { display: inline-flex; background: var(--color-surface-secondary); border-radius: 980px; padding: 3px; margin-bottom: 40px; }
.hp-billing-toggle button { border: none; background: none; padding: 8px 20px; font-size: var(--text-md); font-weight: var(--fw-medium); border-radius: 980px; cursor: pointer; color: var(--color-text-secondary); transition: all 0.2s ease; }
.hp-billing-toggle button.active { background: var(--color-surface); color: var(--color-text-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* --- Starting-At Pricing Hero --- */
.hp-pricing-hero { text-align: center; padding: 80px 22px; background: var(--color-bg); }
.hp-pricing-hero .price-label { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.hp-pricing-hero .price-big { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; color: var(--color-text-primary); }
.hp-pricing-hero .price-big .per { font-size: var(--text-3xl); color: var(--color-text-secondary); font-weight: var(--fw-normal); }
.hp-pricing-hero .price-sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin: 8px 0 32px; }
.hp-pricing-hero .feature-list { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.hp-pricing-hero .feature-list li { font-size: var(--text-lg); color: var(--color-text-primary); list-style: none; padding-left: 24px; position: relative; }
.hp-pricing-hero .feature-list li::before { content: '\2713'; color: var(--color-green); font-weight: var(--fw-semibold); position: absolute; left: 0; }

/* --- Logo Bar --- */
.hp-logo-bar { padding: 56px 22px; }
.hp-logo-bar-inner { max-width: var(--w-prose); margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; }
.hp-logo-bar-inner .logo-item { color: var(--color-text-tertiary); opacity: 0.65; transition: opacity 0.2s, color 0.2s; display: inline-flex; align-items: center; justify-content: center; height: 32px; }
.hp-logo-bar-inner .logo-item:hover { opacity: 1; color: var(--color-text-primary); }
.hp-logo-bar-inner .logo-item svg { height: 28px; width: auto; max-width: 120px; }

/* --- Trust Bar --- */
.hp-trust-bar { background: var(--color-surface-secondary); padding: 40px 22px; border-top: 1px solid var(--color-border-card); border-bottom: 1px solid var(--color-border-card); }
.hp-trust-bar .trust-inner { max-width: var(--w-prose); margin: 0 auto; display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.hp-trust-stat { text-align: center; }
.hp-trust-stat .stat-num { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.hp-trust-stat .stat-label { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* --- Split CTA --- */
.hp-split-cta { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--w-prose); margin: 0 auto; border-radius: 24px; overflow: hidden; }
.hp-split-cta .cta-panel { padding: 80px 48px; text-align: center; }
.hp-split-cta .cta-panel.dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-split-cta .cta-panel.light { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.hp-split-cta .cta-panel h3 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 10px; }
.hp-split-cta .cta-panel p { font-size: var(--text-lg); opacity: 0.7; margin: 0 0 24px; }
.hp-split-cta .cta-panel .btn-primary-pill { display: inline-block; background: var(--color-accent); color: var(--color-surface); padding: 12px 28px; border-radius: 980px; font-size: var(--text-lg); font-weight: var(--fw-medium); text-decoration: none; }
.hp-split-cta .cta-panel .btn-primary-pill:hover { background: var(--color-accent-hover); }
.hp-split-cta .cta-panel .btn-outline-pill { display: inline-block; border: 1.5px solid rgba(0,0,0,0.2); color: var(--color-text-primary); padding: 11px 28px; border-radius: 980px; font-size: var(--text-lg); font-weight: var(--fw-medium); text-decoration: none; }
.hp-split-cta .cta-panel .btn-outline-pill:hover { background: var(--color-border-card); }
.hp-split-cta-wrapper { padding: 80px 22px; }

/* --- Dark Mode Overrides for New Blocks --- */
[data-theme="dark"] .hp-hero-split .hp-split-text h1 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-hero-split .hp-split-text p { color: #a1a1a6; }
[data-theme="dark"] .hp-hero-gradient,
[data-theme="dark"] .hp-hero-gradient.blue { background: linear-gradient(160deg, #0a1628 0%, #0d1f3e 40%, #081224 100%); }
[data-theme="dark"] .hp-hero-gradient.green { background: linear-gradient(160deg, #0a1f14 0%, #092b18 40%, #05160d 100%); }
[data-theme="dark"] .hp-hero-gradient.purple { background: linear-gradient(160deg, #1a0f2e 0%, #241241 40%, #130828 100%); }
[data-theme="dark"] .hp-hero-gradient.rose { background: linear-gradient(160deg, #2a0f1e 0%, #3d122a 40%, #1a0811 100%); }
[data-theme="dark"] .hp-hero-gradient.graphite { background: linear-gradient(160deg, #1c1c1e 0%, #2a2a2c 40%, #1a1a1c 100%); }
[data-theme="dark"] .hp-hero-gradient h1 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-hero-gradient .hp-hero-sub { color: var(--color-text-primary); }
[data-theme="dark"] .hp-floating-card { background: rgba(44,44,46,0.85); }
[data-theme="dark"] .hp-floating-card .card-label { color: var(--color-text-primary); }
[data-theme="dark"] .hp-floating-card .card-sub { color: #a1a1a6; }
[data-theme="dark"] .hp-alt-text h3 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-alt-text p { color: #a1a1a6; }
[data-theme="dark"] .hp-alt-visual .visual-box { background: #2a2a2c; }
[data-theme="dark"] .hp-alt-visual .visual-box.accent { background: linear-gradient(135deg, #1a2a3d, #0d1f2e); }
[data-theme="dark"] .hp-alt-visual .visual-box.green { background: linear-gradient(135deg, #1a2e1a, #0d1f0d); }
[data-theme="dark"] .hp-icon-item h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-icon-item p { color: #a1a1a6; }
[data-theme="dark"] .hp-icon-grid-header h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-stats-strip { background: #1c1c1e; }
[data-theme="dark"] .hp-stat .stat-num { color: var(--color-text-primary); }
[data-theme="dark"] .hp-stat { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .hp-compare-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-compare-table thead th { color: var(--color-text-primary); border-color: #3a3a3c; }
[data-theme="dark"] .hp-compare-table tbody td { color: var(--color-text-primary); border-color: #2a2a2c; }
[data-theme="dark"] .hp-compare-table tbody td:first-child { color: #a1a1a6; }
[data-theme="dark"] .hp-compare-table .dash { color: #48484a; }
[data-theme="dark"] .hp-compare-table tfoot a.secondary { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-toggle-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-billing-toggle { background: #2a2a2c; }
[data-theme="dark"] .hp-billing-toggle button.active { background: #3a3a3c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-hero { background: #1c1c1e; }
[data-theme="dark"] .hp-pricing-hero .price-big { color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-hero .feature-list li { color: var(--color-text-primary); }
[data-theme="dark"] .hp-logo-bar-inner .logo-item { color: var(--color-text-secondary); }
[data-theme="dark"] .hp-trust-bar { background: #1c1c1e; border-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .hp-trust-stat .stat-num { color: var(--color-text-primary); }
[data-theme="dark"] .hp-split-cta .cta-panel.light { background: #2a2a2c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-split-cta .cta-panel .btn-outline-pill { border-color: rgba(255,255,255,0.2); color: var(--color-text-primary); }
[data-theme="dark"] .hp-split-cta .cta-panel .btn-outline-pill:hover { background: rgba(255,255,255,0.06); }

/* --- Responsive for New Blocks --- */
@media (max-width: 820px) {
    .hp-hero-split { grid-template-columns: 1fr; gap: 40px; padding: 60px 22px; text-align: center; }
    .hp-hero-split .hp-split-text .hp-cta-row { justify-content: center; }
    .hp-hero-dark h1 { font-size: var(--text-h1); }
    .hp-hero-dark .hp-hero-stats { gap: 32px; }
    .hp-hero-stat .stat-num { font-size: var(--text-h2); }
    .hp-hero-gradient h1 { font-size: var(--text-h1); }
    .hp-alt-row { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
    .hp-alt-row.reverse { direction: ltr; }
    .hp-alt-text h3 { font-size: var(--text-h3); }
    .hp-icon-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 48px 22px; }
    /* Must repeat the modifier here: .hp-icon-grid.cols-4 outranks the bare
       .hp-icon-grid above, so without this the 4-up stays 4 wide on phones. */
    .hp-icon-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .hp-stats-strip .stats-inner { flex-wrap: wrap; }
    .hp-stat { flex: 0 0 50%; border-right: none; padding: 16px; }
    .hp-stat .stat-num { font-size: var(--text-h3); }
    .hp-compare-section { overflow-x: auto; }
    .hp-compare-table { min-width: 600px; }
    .hp-pricing-hero .price-big { font-size: var(--text-display-sm); }
    .hp-pricing-hero .feature-list { grid-template-columns: 1fr; }
    .hp-split-cta { grid-template-columns: 1fr; }
    .hp-split-cta .cta-panel { padding: 48px 32px; }
}

/* ============================================
   Additional Blocks — FAQ, Server Locations, Features
   ============================================ */

/* --- FAQ Accordion (public pages) --- */
.hp-faq-section { max-width: 720px; margin: 0 auto; padding: 80px 22px; }
.hp-faq-section h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-faq-section .faq-sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin-bottom: 40px; }
.hp-faq-item { border-bottom: 1px solid var(--color-border); }
.hp-faq-item:last-child { border-bottom: none; }
.hp-faq-item summary { padding: 20px 0; font-size: var(--text-xl); font-weight: var(--fw-medium); color: var(--color-text-primary); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary::after { content: '+'; font-size: var(--text-3xl); color: var(--color-text-tertiary); font-weight: var(--fw-light); transition: transform 0.2s; }
.hp-faq-item[open] summary::after { content: '\2212'; }
.hp-faq-item .faq-body { padding: 0 0 20px; font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.6; }

/* FAQ Variant B — two-column grid */
.hp-faq-grid { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-faq-grid h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 40px; color: var(--color-text-primary); }
.hp-faq-grid .faq-grid-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hp-faq-card { background: var(--color-surface-secondary); border-radius: 16px; padding: 28px; }
.hp-faq-card h4 { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 8px; }
.hp-faq-card p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.55; margin: 0; }

/* --- Server Locations / Data Center Map --- */
.hp-locations-section { padding: 80px 22px; text-align: center; background: var(--color-bg); }
.hp-locations-section h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-locations-section .loc-sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 48px; }
.hp-locations-map { max-width: 900px; margin: 0 auto 48px; position: relative; }
.hp-locations-map svg { width: 100%; height: auto; }
.hp-loc-grid { max-width: var(--w-prose); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hp-loc-card { background: var(--color-surface); border-radius: 14px; padding: 24px 16px; text-align: center; border: 1px solid var(--color-border-card); }
.hp-loc-card .loc-flag { font-size: var(--text-h4); margin-bottom: 8px; }
.hp-loc-card h4 { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 4px; }
.hp-loc-card p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

/* Locations Variant B — dark with glowing dots */
.hp-locations-dark { padding: 80px 22px; text-align: center; background: var(--color-text-primary); color: var(--color-surface); }
.hp-locations-dark h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 10px; color: var(--color-surface); }
.hp-locations-dark .loc-sub { font-size: var(--text-xl); color: #a1a1a6; margin-bottom: 48px; }
.hp-locations-dark .hp-loc-grid { max-width: var(--w-prose); margin: 0 auto; }
.hp-locations-dark .hp-loc-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.06); }
.hp-locations-dark .hp-loc-card h4 { color: var(--color-surface); }
.hp-locations-dark .hp-loc-card p { color: #a1a1a6; }

/* --- Features Showcase (large feature cards) --- */
.hp-features-section { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-features-section h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-features-section .feat-sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin-bottom: 48px; }
.hp-feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Column-count modifiers. The store pages used to set grid-template-columns
   INLINE on this component, which outranks the max-width:820px collapse below —
   so a 5-up feature row stayed 5-up on a phone and pushed the page hundreds of
   px wide. Use these instead; they collapse with everything else. */
.hp-feature-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.hp-feature-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.hp-feature-cards.cols-5 { grid-template-columns: repeat(5, 1fr); }
/* .step-flow-row shipped with no CSS at all — sitelock drew it entirely from an
   inline grid, so it could never collapse. Give it a real responsive rule. */
.step-flow-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* .hp-onboarding-steps had no CSS — marketgoo drew it from an inline grid. */
.hp-onboarding-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Mock-UI panes (socialbee) and the SSL comparison rows: fixed px tracks that
   cannot fit a phone (180+260, and 80+120+120). Stack them instead. */
.hp-mock-panes { display: grid; grid-template-columns: 180px 1fr 260px; gap: 12px; }
/* Generic 2-up content split (text beside a visual). Replaces bare inline
   "1.1fr 1fr" / "1fr 1fr" grids that could never collapse. */
.hp-split-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hp-compare-row { display: grid; grid-template-columns: 80px 1fr 120px 120px; align-items: center; gap: 16px; }

@media (max-width: 820px) {
    .hp-onboarding-steps-row { grid-template-columns: 1fr; }
    .hp-mock-panes { grid-template-columns: 1fr; }
    .hp-compare-row { grid-template-columns: 1fr; gap: 8px; }
    .hp-split-2 { grid-template-columns: 1fr; gap: 32px; }
    /* A grid item defaults to min-width:auto, so a track can refuse to shrink
       below its content and blow past the viewport even after the grid has
       collapsed to one column — .hp-hero-split's text column measured 440px
       inside a 360px viewport. Explicit min-width:0 lets these shrink. */
    .hp-hero-split > *,
    .hp-split-2 > *,
    .hp-stat-callout > *,
    .hp-tab-switcher > * { min-width: 0; }
    /* .hp-hero-split shipped with no collapse at all: a hard 1fr 1fr meant its
       text column stayed ~440px wide inside a 360px viewport. */
    .hp-hero-split { grid-template-columns: 1fr; gap: 32px; padding: 60px 22px; }
    /* An inline-flex pill with no wrap ran ~380px wide on a 360px screen. */
    .hp-billing-toggle { display: flex; flex-wrap: wrap; max-width: 100%; justify-content: center; }
}

/* Tablet band only — below 601px the collapse above must win. */
@media (min-width: 601px) and (max-width: 820px) {
    .hp-pricing-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) { .step-flow-row { grid-template-columns: 1fr; } }
.hp-feature-card { background: var(--color-surface-secondary); border-radius: 18px; padding: 32px 24px; text-align: center; }
.hp-feature-card .feat-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: var(--text-3xl); }
.hp-feature-card .feat-icon svg { width: 26px; height: 26px; }
.hp-feature-card .feat-icon.blue { background: rgba(0,113,227,0.1); color: var(--color-accent); }
.hp-feature-card .feat-icon.green { background: var(--color-green-bg); color: var(--color-green); }
.hp-feature-card .feat-icon.purple { background: rgba(175,130,255,0.1); color: #af82ff; }
.hp-feature-card .feat-icon.orange { background: var(--color-orange-bg); color: var(--color-orange); }
.hp-feature-card .feat-icon.red { background: var(--color-red-bg); color: var(--color-red); }
.hp-feature-card .feat-icon.teal { background: rgba(90,200,250,0.1); color: #5ac8fa; }
.hp-feature-card h4 { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 6px; }
.hp-feature-card p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }

/* Features Variant B — horizontal feature strip with numbers */
.hp-features-numbered { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-features-numbered h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 48px; color: var(--color-text-primary); }
.hp-numbered-list { display: flex; flex-direction: column; gap: 0; }
.hp-numbered-item { display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.hp-numbered-item:last-child { border-bottom: none; }
.hp-numbered-item .num { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--color-accent); }
.hp-numbered-item h4 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 6px; }
.hp-numbered-item p { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }

/* --- Dark Mode for new blocks --- */
[data-theme="dark"] .hp-faq-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-faq-item { border-color: #3a3a3c; }
[data-theme="dark"] .hp-faq-item summary { color: var(--color-text-primary); }
[data-theme="dark"] .hp-faq-item .faq-body { color: #a1a1a6; }
[data-theme="dark"] .hp-faq-grid h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-faq-card { background: #2a2a2c; }
[data-theme="dark"] .hp-faq-card h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-faq-card p { color: #a1a1a6; }
[data-theme="dark"] .hp-locations-section { background: #1c1c1e; }
[data-theme="dark"] .hp-locations-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-loc-card { background: #2a2a2c; border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .hp-loc-card h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-loc-card p { color: #a1a1a6; }
[data-theme="dark"] .hp-features-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-feature-card { background: #2a2a2c; }
[data-theme="dark"] .hp-feature-card h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-feature-card p { color: #a1a1a6; }
[data-theme="dark"] .hp-features-numbered h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-numbered-item { border-color: #3a3a3c; }
[data-theme="dark"] .hp-numbered-item h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-numbered-item p { color: #a1a1a6; }

/* --- Server Locations Variant C — Compact inline pills --- */
.hp-locations-compact { padding: 60px 22px; text-align: center; }
.hp-locations-compact h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 8px; color: var(--color-text-primary); }
.hp-locations-compact .loc-sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 32px; }
.hp-locations-compact .loc-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 800px; margin: 0 auto; }
.hp-locations-compact .loc-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface-secondary); padding: 10px 18px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-primary); }
.hp-locations-compact .loc-pill .flag { font-size: var(--text-xl); }

/* --- Server Locations Variant D — Map visual + stats row --- */
.hp-locations-visual { padding: 80px 22px; text-align: center; background: var(--color-text-primary); color: var(--color-surface); overflow: hidden; }
.hp-locations-visual h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 8px; color: var(--color-surface); }
.hp-locations-visual .loc-sub { font-size: var(--text-xl); color: #a1a1a6; margin-bottom: 48px; }
.hp-locations-visual .loc-map-wrap { max-width: 800px; margin: 0 auto 48px; position: relative; }
.hp-locations-visual .loc-map-dots { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hp-loc-dot { display: flex; align-items: center; gap: 6px; font-size: var(--text-base); color: #a1a1a6; }
.hp-loc-dot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); box-shadow: 0 0 8px rgba(48,209,88,0.4); }
.hp-locations-visual .loc-stats-row { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; }
.hp-locations-visual .loc-stat { text-align: center; }
.hp-locations-visual .loc-stat .num { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--color-surface); }
.hp-locations-visual .loc-stat .label { font-size: var(--text-base); color: #a1a1a6; margin-top: 4px; }

/* --- Features Variant C — Bento Grid (mixed sizes) --- */
.hp-bento-section { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-bento-section h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 48px; color: var(--color-text-primary); }
.hp-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 16px; }
.hp-bento-card { background: var(--color-surface-secondary); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; }
.hp-bento-card.span-2 { grid-column: span 2; }
.hp-bento-card.tall { grid-row: span 2; }
.hp-bento-card.accent { background: var(--color-accent); color: var(--color-surface); }
.hp-bento-card.accent p { color: rgba(255,255,255,0.8); }
.hp-bento-card.dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-bento-card.dark p { color: #a1a1a6; }
.hp-bento-card .bento-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0,113,227,0.1); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hp-bento-card .bento-icon svg { width: 22px; height: 22px; }
.hp-bento-card.accent .bento-icon { background: rgba(255,255,255,0.18); color: var(--color-surface); }
.hp-bento-card.dark .bento-icon { background: rgba(255,255,255,0.08); color: var(--color-surface); }
.hp-bento-card h4 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); margin: 0 0 8px; color: inherit; }
.hp-bento-card p { font-size: var(--text-lg); line-height: 1.5; margin: 0; color: var(--color-text-secondary); }
.hp-bento-card.accent p, .hp-bento-card.dark p { color: rgba(255,255,255,0.78); }
.hp-bento-card .bento-visual { margin-top: auto; padding-top: 24px; text-align: center; }
.hp-bento-card .bento-tag { display: inline-block; margin-top: auto; padding: 6px 12px; border-radius: 980px; font-size: var(--text-sm); font-weight: var(--fw-medium); background: rgba(0,113,227,0.1); color: var(--color-accent); align-self: flex-start; margin-top: 16px; }
.hp-bento-card .bento-tag.muted { background: var(--sidebar-item-active); color: var(--color-text-primary); }
.hp-bento-card.dark .bento-tag.muted { background: rgba(255,255,255,0.08); color: var(--color-surface); }
.hp-bento-card .bento-row-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hp-bento-card .bento-stat-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.08); }
.hp-bento-card.accent .bento-stat-bar, .hp-bento-card.dark .bento-stat-bar { border-color: rgba(255,255,255,0.15); }
.hp-bento-card .bento-stat .n { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; color: inherit; line-height: 1.05; }
.hp-bento-card .bento-stat .l { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.hp-bento-card.accent .bento-stat .l, .hp-bento-card.dark .bento-stat .l { color: rgba(255,255,255,0.7); }
.hp-bento-card .bento-mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 32px; margin-top: 18px; }
.hp-bento-card .bento-mini-chart span { flex: 1; background: currentColor; opacity: 0.4; border-radius: 2px; min-height: 20%; }
.hp-bento-card .bento-mini-chart span:nth-child(1) { height: 30%; }
.hp-bento-card .bento-mini-chart span:nth-child(2) { height: 55%; }
.hp-bento-card .bento-mini-chart span:nth-child(3) { height: 40%; }
.hp-bento-card .bento-mini-chart span:nth-child(4) { height: 75%; }
.hp-bento-card .bento-mini-chart span:nth-child(5) { height: 60%; }
.hp-bento-card .bento-mini-chart span:nth-child(6) { height: 90%; opacity: 0.85; }
.hp-bento-card .bento-mini-chart span:nth-child(7) { height: 70%; }
.hp-bento-card .bento-mini-chart span:nth-child(8) { height: 100%; opacity: 1; }

/* --- Features Variant D — Checklist with two columns --- */
.hp-features-checklist { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-features-checklist h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-features-checklist .feat-sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin-bottom: 48px; }
.hp-checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; }
.hp-check-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
.hp-check-item:last-child { border-bottom: none; }
.hp-check-item .check-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(48,209,88,0.12); color: var(--color-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--text-md); font-weight: var(--fw-semibold); }
.hp-check-item .check-text h4 { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 2px; }
.hp-check-item .check-text p { font-size: var(--text-base); color: var(--color-text-secondary); margin: 0; line-height: 1.4; }

/* --- Features Variant E — Tabs (interactive) --- */
.hp-feature-tabs { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-feature-tabs h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-feature-tabs .feat-sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin-bottom: 32px; }
.hp-ft-tabs { display: flex; justify-content: center; gap: 6px; background: var(--color-surface-secondary); border-radius: 980px; padding: 4px; margin: 0 auto 40px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.hp-ft-tab { padding: 10px 20px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--color-text-secondary); cursor: pointer; border: none; background: none; transition: all 0.2s ease; font-family: inherit; white-space: nowrap; }
.hp-ft-tab.active { background: var(--color-surface); color: var(--color-text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.hp-ft-panel { display: none; background: var(--color-surface-secondary); border-radius: 20px; padding: 48px; align-items: center; gap: 56px; grid-template-columns: 1fr 1fr; }
.hp-ft-panel.active { display: grid; }
.hp-ft-panel .ft-text h3 { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 12px; color: var(--color-text-primary); }
.hp-ft-panel .ft-text p { font-size: var(--text-xl); color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 20px; }
.hp-ft-panel .ft-list { list-style: none; padding: 0; margin: 0; }
.hp-ft-panel .ft-list li { padding: 8px 0; font-size: var(--text-md); color: var(--color-text-primary); display: flex; gap: 10px; align-items: center; }
.hp-ft-panel .ft-list li::before { content: '\2713'; color: var(--color-green); font-weight: var(--fw-bold); }
.hp-ft-panel .ft-visual { background: var(--color-surface); border-radius: 14px; min-height: 240px; display: flex; align-items: center; justify-content: center; font-size: var(--text-display); box-shadow: 0 8px 32px var(--sidebar-item-active); }

/* --- Features Variant F — Spotlight (single hero feature) --- */
.hp-feature-spotlight { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
/* 1fr 1.2fr / 60px mirror the inline style this rule replaced, so desktop is unchanged. */
.hp-feature-spotlight .spotlight-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; background: linear-gradient(135deg, var(--color-surface-tertiary) 0%, var(--color-border-light) 100%); border-radius: 24px; padding: 56px; }
.hp-feature-spotlight .spotlight-text .hp-eyebrow { font-size: var(--text-base); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-accent); margin-bottom: 12px; }
.hp-feature-spotlight .spotlight-text h3 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 14px; color: var(--color-text-primary); }
.hp-feature-spotlight .spotlight-text p { font-size: var(--text-xl); color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 24px; }
.hp-feature-spotlight .spotlight-stats { display: flex; gap: 32px; }
.hp-feature-spotlight .sp-stat { }
.hp-feature-spotlight .sp-stat .num { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--color-accent); }
.hp-feature-spotlight .sp-stat .label { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 2px; }
.hp-feature-spotlight .spotlight-visual { background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-border) 100%); border-radius: 20px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 28px; box-shadow: 0 16px 48px rgba(0,0,0,0.08); overflow: hidden; }
.hp-feature-spotlight .spotlight-visual svg { width: 100%; height: auto; max-width: 320px; filter: drop-shadow(0 8px 24px rgba(10,132,255,0.25)); }

/* --- Features Variant G — Columns with dividers (compact, text-focused) --- */
.hp-feature-columns { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-feature-columns h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-feature-columns .feat-sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin-bottom: 48px; }
.hp-columns-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hp-column-item { padding: 0 32px; border-left: 1px solid var(--color-border); }
.hp-column-item:first-child { border-left: none; padding-left: 0; }
.hp-column-item:last-child { padding-right: 0; }
.hp-column-item .col-num { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-accent); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.hp-column-item h4 { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0 0 10px; line-height: 1.2; }
.hp-column-item p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.6; margin: 0; }
.hp-column-item .col-link { display: inline-block; margin-top: 14px; font-size: var(--text-md); color: var(--color-link); text-decoration: none; }
.hp-column-item .col-link:hover { text-decoration: underline; }

/* --- Features Variant H — Masonry Grid (varied heights) --- */
.hp-feature-masonry { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-feature-masonry h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-feature-masonry .feat-sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin-bottom: 48px; }
.hp-masonry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; grid-auto-rows: 180px; grid-auto-flow: dense; }
.hp-masonry-card { background: var(--color-surface-secondary); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.hp-masonry-card.tall { grid-row: span 2; padding: 32px; }
.hp-masonry-card.accent { background: linear-gradient(135deg, var(--color-accent) 0%, #5ac8fa 100%); color: var(--color-surface); }
.hp-masonry-card.accent p { color: rgba(255,255,255,0.85); }
.hp-masonry-card.dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-masonry-card.dark p { color: #a1a1a6; }
.hp-masonry-card.cream { background: #faf7f2; }
.hp-masonry-card .m-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--sidebar-item-active); color: var(--color-text-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hp-masonry-card .m-icon svg { width: 22px; height: 22px; }
.hp-masonry-card.accent .m-icon { background: rgba(255,255,255,0.18); color: var(--color-surface); }
.hp-masonry-card.dark .m-icon { background: rgba(255,255,255,0.08); color: var(--color-surface); }
.hp-masonry-card.cream .m-icon { background: rgba(0,0,0,0.05); color: var(--color-text-primary); }
.hp-masonry-card h4 { font-size: var(--text-h6); font-weight: var(--fw-semibold); color: inherit; margin: 0 0 4px; letter-spacing: -0.01em; }
.hp-masonry-card p { font-size: var(--text-md); line-height: 1.5; margin: 0; color: var(--color-text-secondary); }
.hp-masonry-card .m-visual { margin-top: auto; padding-top: 24px; display: flex; justify-content: center; opacity: 0.5; }
.hp-masonry-card .m-visual svg { width: 90px; height: 90px; }
.hp-masonry-card.accent .m-visual { opacity: 0.85; color: var(--color-surface); }
.hp-masonry-card.dark .m-visual { opacity: 0.7; color: var(--color-surface); }

/* Dark mode */
[data-theme="dark"] .hp-feature-tabs h2,
[data-theme="dark"] .hp-feature-spotlight .spotlight-text h3,
[data-theme="dark"] .hp-feature-columns h2,
[data-theme="dark"] .hp-feature-columns .hp-column-item h4,
[data-theme="dark"] .hp-feature-masonry h2,
[data-theme="dark"] .hp-ft-panel .ft-text h3,
[data-theme="dark"] .hp-ft-panel .ft-list li { color: var(--color-text-primary); }
[data-theme="dark"] .hp-ft-tabs { background: #2a2a2c; }
[data-theme="dark"] .hp-ft-tab.active { background: #3a3a3c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-ft-panel { background: #2a2a2c; }
[data-theme="dark"] .hp-ft-panel .ft-visual { background: #3a3a3c; }
[data-theme="dark"] .hp-feature-spotlight .spotlight-inner { background: linear-gradient(135deg, #2a2a2c 0%, #1c1c1e 100%); }
[data-theme="dark"] .hp-feature-spotlight .spotlight-visual { background: #3a3a3c; }
[data-theme="dark"] .hp-column-item { border-color: #3a3a3c; }
[data-theme="dark"] .hp-masonry-card { background: #2a2a2c; }
[data-theme="dark"] .hp-masonry-card.cream { background: #2a2a2c; }

/* Responsive */
@media (max-width: 820px) {
    .hp-ft-panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
    .hp-feature-spotlight .spotlight-inner { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
    .hp-columns-row { grid-template-columns: 1fr; gap: 32px; }
    .hp-column-item { padding: 0; border-left: none; border-top: 1px solid var(--color-border); padding-top: 28px; }
    .hp-column-item:first-child { border-top: none; padding-top: 0; }
    .hp-masonry-grid { grid-template-columns: 1fr; }
    .hp-masonry-card.tall { grid-row: span 1; }
}

/* --- Testimonials Variant A — Large centered single quote --- */
.hp-testimonial-hero { padding: 100px 22px; text-align: center; background: var(--color-bg); }
.hp-testimonial-hero .quote-mark { font-size: var(--text-display); line-height: 1; color: var(--color-accent); font-family: Georgia, serif; margin-bottom: 16px; }
.hp-testimonial-hero blockquote { font-size: var(--text-h4); font-weight: var(--fw-normal); letter-spacing: -0.01em; line-height: 1.35; color: var(--color-text-primary); max-width: 720px; margin: 0 auto 24px; font-style: italic; }
.hp-testimonial-hero .quote-author { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hp-testimonial-hero .quote-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: var(--text-h6); color: var(--color-surface); }
.hp-testimonial-hero .quote-info .name { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.hp-testimonial-hero .quote-info .role { font-size: var(--text-md); color: var(--color-text-secondary); }

/* --- Testimonials Variant B — 3-column card grid --- */
.hp-testimonials-grid { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-testimonials-grid h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 48px; color: var(--color-text-primary); }
.hp-testimonial-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-testimonial-card { background: var(--color-surface-secondary); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; }
.hp-testimonial-card .stars { color: var(--color-orange); font-size: var(--text-xl); margin-bottom: 12px; letter-spacing: 2px; }
.hp-testimonial-card .quote { font-size: var(--text-lg); color: var(--color-text-primary); line-height: 1.55; flex: 1; margin-bottom: 20px; font-style: italic; }
.hp-testimonial-card .author { display: flex; align-items: center; gap: 10px; }
/* Default avatar fill so the initial is legible without a per-card inline style. */
.hp-testimonial-card .author-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: var(--text-md); color: var(--color-surface); background: var(--color-accent); flex-shrink: 0; }
.hp-testimonial-card .author-name { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.hp-testimonial-card .author-role { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* --- Testimonials Variant C — Horizontal scroll strip --- */
.hp-testimonials-scroll { padding: 80px 0; background: var(--color-text-primary); }
.hp-testimonials-scroll h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 48px; color: var(--color-surface); padding: 0 22px; }
.hp-testimonials-strip { display: flex; gap: 16px; overflow-x: scroll; padding: 0 22px 20px; scroll-snap-type: x mandatory; cursor: grab; user-select: none; scrollbar-width: none; -ms-overflow-style: none; }
.hp-testimonials-strip::-webkit-scrollbar { display: none; }
.hp-testimonials-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.hp-testi-slide { flex: 0 0 360px; scroll-snap-align: start; background: rgba(255,255,255,0.06); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; }
.hp-testi-slide .stars { color: var(--color-orange); font-size: var(--text-md); margin-bottom: 12px; letter-spacing: 2px; }
.hp-testi-slide .quote { font-size: var(--text-lg); color: var(--color-text-primary); line-height: 1.55; flex: 1; margin-bottom: 20px; }
.hp-testi-slide .author { display: flex; align-items: center; gap: 10px; }
.hp-testi-slide .author-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semibold); font-size: var(--text-md); color: var(--color-surface); flex-shrink: 0; }
.hp-testi-slide .author-name { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.hp-testi-slide .author-role { font-size: var(--text-sm); color: #a1a1a6; }

/* --- Dark Mode for new blocks --- */
[data-theme="dark"] .hp-locations-compact h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-locations-compact .loc-pill { background: #2a2a2c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-bento-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-bento-card { background: #2a2a2c; }
[data-theme="dark"] .hp-bento-card.accent { background: linear-gradient(135deg, #0a84ff 0%, var(--color-accent) 100%); }
[data-theme="dark"] .hp-bento-card.dark { background: #0a0a0d; }
[data-theme="dark"] .hp-bento-card h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-bento-card p { color: #a1a1a6; }
[data-theme="dark"] .hp-bento-card .bento-tag { background: rgba(41,151,255,0.18); color: #7fb7ff; }
[data-theme="dark"] .hp-bento-card .bento-tag.muted { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="dark"] .hp-bento-card.accent .bento-tag,
[data-theme="dark"] .hp-bento-card.accent .bento-tag.muted { background: rgba(255,255,255,0.2); color: var(--color-surface); }
[data-theme="dark"] .hp-bento-card .bento-stat-bar { border-top-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .hp-bento-card .bento-stat .l { color: #a1a1a6; }
[data-theme="dark"] .hp-features-checklist h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-check-item { border-color: #3a3a3c; }
[data-theme="dark"] .hp-check-item .check-text h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-check-item .check-text p { color: #a1a1a6; }
[data-theme="dark"] .hp-testimonial-hero { background: #1c1c1e; }
[data-theme="dark"] .hp-testimonial-hero blockquote { color: var(--color-text-primary); }
[data-theme="dark"] .hp-testimonial-hero .quote-info .name { color: var(--color-text-primary); }
[data-theme="dark"] .hp-testimonials-grid h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-testimonial-card { background: #2a2a2c; }
[data-theme="dark"] .hp-testimonial-card .quote { color: var(--color-text-primary); }
[data-theme="dark"] .hp-testimonial-card .author-name { color: var(--color-text-primary); }

/* --- Testimonial profile pictures (real photos via UI avatars) --- */
.hp-testimonial-hero .quote-avatar,
.hp-testimonial-card .author-avatar,
.hp-testi-slide .author-avatar { background-size: cover; background-position: center; }

/* --- Testimonial scroll strip --- */
.hp-testimonials-scroll .hp-testimonials-strip { scroll-behavior: smooth; }

/* --- Testimonial Card Carousel (variant B) --- */
.hp-testimonials-grid .hp-testimonial-cards { overflow-x: scroll; display: flex; gap: 20px; scroll-snap-type: x mandatory; cursor: grab; user-select: none; scrollbar-width: none; -ms-overflow-style: none; }
.hp-testimonials-grid .hp-testimonial-cards::-webkit-scrollbar { display: none; }
.hp-testimonials-grid .hp-testimonial-cards.dragging { cursor: grabbing; scroll-snap-type: none; }
.hp-testimonials-grid .hp-testimonial-card { flex: 0 0 340px; scroll-snap-align: start; }
.hp-testimonials-grid .carousel-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; }
.hp-testimonials-grid .carousel-dots { display: flex; gap: 8px; }
.hp-testimonials-grid .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: #d2d2d7; border: none; cursor: pointer; padding: 0; transition: background 0.2s; }
.hp-testimonials-grid .carousel-dot.active { background: var(--color-accent); }
.hp-testimonials-grid .carousel-arrow { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--sidebar-item-active); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s, transform 0.15s; color: var(--color-text-primary); padding: 0; }
.hp-testimonials-grid .carousel-arrow:hover { background: rgba(0,0,0,0.12); }
.hp-testimonials-grid .carousel-arrow:active { transform: scale(0.94); }
.hp-testimonials-grid .carousel-arrow svg { width: 14px; height: 14px; stroke-width: 2.4; }
[data-theme="dark"] .hp-testimonials-grid .carousel-arrow { background: rgba(255,255,255,0.1); color: var(--color-text-primary); }
[data-theme="dark"] .hp-testimonials-grid .carousel-arrow:hover { background: rgba(255,255,255,0.18); }

/* Scroll carousel arrows for dark strip variant */
.hp-testimonials-scroll .carousel-scroll-nav { display: flex; justify-content: center; gap: 12px; padding: 20px 22px 0; }
.hp-testimonials-scroll .carousel-arrow { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s, transform 0.15s; color: var(--color-surface); padding: 0; }
.hp-testimonials-scroll .carousel-arrow:hover { background: rgba(255,255,255,0.18); }
.hp-testimonials-scroll .carousel-arrow:active { transform: scale(0.94); }
.hp-testimonials-scroll .carousel-arrow svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* Testimonials — Masonry Wall */
.hp-testi-masonry { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-testi-masonry h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-testi-masonry .hp-testi-masonry-sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin: 0 0 48px; }
/* CSS multi-column masonry: each tile sizes to its own content (no fixed-height
   rows that clip longer testimonials), and columns auto-balance. */
.hp-testi-masonry-grid { columns: 4; column-gap: 16px; }
.hp-testi-tile { background: var(--color-surface-secondary); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; color: var(--color-text-primary); break-inside: avoid; margin-bottom: 16px; }
.hp-testi-tile.tall { padding: 32px; }
.hp-testi-tile.accent { background: linear-gradient(135deg, var(--color-accent) 0%, #5ac8fa 100%); color: var(--color-surface); }
.hp-testi-tile.dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-testi-tile.cream { background: #faf7f2; }
.hp-testi-tile .stars { font-size: var(--text-base); letter-spacing: 2px; color: var(--color-orange); }
.hp-testi-tile.accent .stars,
.hp-testi-tile.dark .stars { color: #ffd60a; }
.hp-testi-tile .quote { font-size: var(--text-lg); line-height: 1.5; flex: 1; margin: 0; color: inherit; }
.hp-testi-tile.tall .quote { font-size: var(--text-xl); line-height: 1.5; }
.hp-testi-tile.accent .quote,
.hp-testi-tile.dark .quote { color: rgba(255,255,255,0.95); }
.hp-testi-tile .author { display: flex; align-items: center; gap: 10px; }
.hp-testi-tile .author .avatar { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; }
.hp-testi-tile .author .name { font-size: var(--text-md); font-weight: var(--fw-semibold); color: inherit; }
.hp-testi-tile .author .role { font-size: var(--text-sm); color: var(--color-text-secondary); }
.hp-testi-tile.accent .author .role,
.hp-testi-tile.dark .author .role { color: rgba(255,255,255,0.7); }

[data-theme="dark"] .hp-testi-masonry h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-testi-tile { background: #2a2a2c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-testi-tile .author .role { color: #a1a1a6; }
[data-theme="dark"] .hp-testi-tile.cream { background: #2a2a2c; }

@media (max-width: 1024px) {
    .hp-testi-masonry-grid { columns: 2; }
}
@media (max-width: 600px) {
    .hp-testi-masonry-grid { columns: 1; }
}

/* --- Server Locations: SVG World Map --- */
.hp-locations-map-section { padding: 80px 22px; text-align: center; }
.hp-locations-map-section h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 8px; color: var(--color-text-primary); }
.hp-locations-map-section .loc-sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 48px; }
.hp-world-map { max-width: 900px; margin: 0 auto 40px; position: relative; aspect-ratio: 784 / 459; }
.hp-world-map svg { width: 100%; height: auto; }
.hp-world-map .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: opacity(0.12); }
.hp-locations-map-section.dark .hp-world-map .map-bg { filter: invert(1) opacity(0.25); }
.hp-world-map .map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-map-pin { position: absolute; transform: translate(-50%, -50%); }
.hp-map-pin .pin-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(0,113,227,0.2); }
.hp-map-pin .pin-pulse { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-accent); animation: pin-pulse 2s ease-out infinite; opacity: 0; }
@keyframes pin-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }
.hp-map-pin .pin-label { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-primary); background: var(--color-surface); padding: 3px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.hp-map-legend { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.hp-map-legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); color: var(--color-text-secondary); }
.hp-map-legend-item .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.hp-map-legend-item .legend-dot.active { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.hp-map-legend-item .legend-dot.coming { background: #d2d2d7; }

/* --- Dark variant for map --- */
.hp-locations-map-section.dark { background: var(--color-text-primary); }
.hp-locations-map-section.dark h2 { color: var(--color-surface); }
.hp-locations-map-section.dark .loc-sub { color: #a1a1a6; }
.hp-locations-map-section.dark .hp-map-pin .pin-label { background: #2a2a2c; color: var(--color-surface); }
.hp-locations-map-section.dark .hp-map-legend-item { color: #a1a1a6; }

/* --- "Our Values" Block (Apple iPad style — cards with icon top-left, left-aligned) --- */
.hp-values-section { max-width: var(--w-prose); margin: 0 auto; padding: 100px 22px; }
.hp-values-section h2 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; margin: 0 0 48px; color: var(--color-text-primary); text-align: left; line-height: 1.05; }
.hp-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-value-item { background: var(--color-surface-secondary); border-radius: 20px; padding: 36px 32px; text-align: left; display: flex; flex-direction: column; }
.hp-value-item .value-icon { width: 48px; height: 48px; margin: 0 0 24px; display: flex; align-items: center; justify-content: center; }
.hp-value-item .value-icon svg { width: 40px; height: 40px; color: var(--color-text-primary); }
.hp-value-item h3 { font-size: var(--text-3xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 10px; letter-spacing: -0.01em; }
.hp-value-item p { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 20px; flex: 1; }
.hp-value-item .value-link { font-size: var(--text-lg); color: var(--color-link); text-decoration: none; }
.hp-value-item .value-link:hover { text-decoration: underline; }

/* --- "Worth the Upgrade?" Block (Apple iPhone Air style) --- */
.hp-upgrade-section { padding: 100px 22px; background: var(--color-bg); }
.hp-upgrade-section h2 { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.025em; text-align: center; margin: 0 0 12px; color: var(--color-text-primary); }
.hp-upgrade-section .upgrade-sub { font-size: var(--text-2xl); color: var(--color-text-secondary); text-align: center; max-width: 560px; margin: 0 auto 56px; }
.hp-upgrade-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.hp-upgrade-item { padding: 32px 40px; border-bottom: 1px solid var(--color-border); }
.hp-upgrade-item:nth-child(odd) { border-right: 1px solid var(--color-border); }
.hp-upgrade-item .upgrade-metric { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-accent); margin-bottom: 6px; }
.hp-upgrade-item h4 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 6px; }
.hp-upgrade-item p { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.hp-upgrade-grid .hp-upgrade-item:nth-last-child(-n+2) { border-bottom: none; }

/* --- Dark mode for new blocks --- */
[data-theme="dark"] .hp-locations-map-section { background: #1c1c1e; }
[data-theme="dark"] .hp-locations-map-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-map-pin .pin-label { background: #2a2a2c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-map-legend-item { color: #a1a1a6; }
[data-theme="dark"] .hp-values-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-value-item { background: #2a2a2c; }
[data-theme="dark"] .hp-value-item h3 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-value-item .value-icon svg { color: var(--color-text-primary); }
[data-theme="dark"] .hp-upgrade-section { background: #1c1c1e; }
[data-theme="dark"] .hp-upgrade-section h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-upgrade-item { border-color: #3a3a3c; }
[data-theme="dark"] .hp-upgrade-item h4 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-testimonials-grid .hp-testimonial-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* --- Responsive for new blocks --- */
@media (max-width: 820px) {
    .hp-faq-grid .faq-grid-inner { grid-template-columns: 1fr; }
    .hp-loc-grid { grid-template-columns: repeat(2, 1fr); }
    /* Modifiers repeated: .cols-N is more specific than the bare selector. */
    .hp-feature-cards,
    .hp-feature-cards.cols-2,
    .hp-feature-cards.cols-4,
    .hp-feature-cards.cols-5 { grid-template-columns: 1fr; }
    .hp-numbered-item { grid-template-columns: 40px 1fr; gap: 16px; }
    .hp-numbered-item .num { font-size: var(--text-3xl); }
    .hp-bento-grid { grid-template-columns: 1fr; }
    .hp-bento-card.span-2 { grid-column: span 1; }
    .hp-checklist-grid { grid-template-columns: 1fr; }
    .hp-testimonial-hero blockquote { font-size: var(--text-3xl); }
    .hp-testimonial-cards { grid-template-columns: 1fr; }
    .hp-testi-slide { flex: 0 0 300px; }
    .hp-values-grid { grid-template-columns: 1fr; gap: 48px; }
    .hp-values-section h2 { font-size: var(--text-h2); }
    .hp-upgrade-grid { grid-template-columns: 1fr; }
    .hp-upgrade-item:nth-child(odd) { border-right: none; }
    .hp-upgrade-section h2 { font-size: var(--text-h2); }
    .hp-upgrade-item .upgrade-metric { font-size: var(--text-h3); }
}

/* ============================================
   Apple-Inspired Additions (20 new blocks)
   ============================================ */

/* === HEROES === */

/* Hero — Ticker (scrolling marquee) */
.hp-hero-ticker { padding: 80px 0; text-align: center; overflow: hidden; }
.hp-hero-ticker h1 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; margin: 0 0 12px; color: var(--color-text-primary); padding: 0 22px; }
.hp-hero-ticker .ticker-sub { font-size: var(--text-2xl); color: var(--color-text-secondary); margin: 0 0 40px; padding: 0 22px; }
.hp-ticker-track { display: flex; gap: 48px; animation: ticker-scroll 30s linear infinite; width: max-content; font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--color-text-primary); letter-spacing: -0.02em; white-space: nowrap; }
.hp-ticker-track span { opacity: 0.3; transition: opacity 0.3s; }
.hp-ticker-track span.accent { color: var(--color-accent); opacity: 1; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Hero — Full-Bleed Image (with overlay) */
.hp-hero-bleed { position: relative; min-height: 580px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-text-primary); overflow: hidden; background: #000; }
.hp-hero-bleed::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(10,132,255,0.18) 0%, transparent 60%); pointer-events: none; }
.hp-hero-bleed::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(175,130,255,0.12) 0%, transparent 60%); pointer-events: none; }
.hp-hero-bleed .bleed-inner { position: relative; z-index: 2; padding: 96px 22px; max-width: var(--w-narrow); }
.hp-hero-bleed .hp-eyebrow { color: #a1a1a6; text-transform: none; letter-spacing: -0.005em; font-size: var(--text-xl); font-weight: var(--fw-semibold); margin-bottom: 18px; }
.hp-hero-bleed h1 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 22px; color: var(--color-text-primary); }
.hp-hero-bleed p { font-size: var(--text-2xl); color: #a1a1a6; max-width: 600px; margin: 0 auto 36px; line-height: 1.4; letter-spacing: -0.005em; }
.hp-hero-bleed .hp-cta-row { display: inline-flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hp-hero-bleed .hp-cta-row a:not(.hp-buy-btn) { color: #2997ff; }
.hp-hero-bleed .hp-cta-row a:not(.hp-buy-btn) { color: #64d2ff; font-size: var(--text-xl); text-decoration: none; }
.hp-hero-bleed .hp-cta-row a:not(.hp-buy-btn):hover { text-decoration: underline; }
.hp-hero-bleed .hp-buy-btn { background: var(--color-surface) !important; color: var(--color-text-primary) !important; padding: 12px 28px; font-size: var(--text-lg); }
.hp-hero-bleed .hp-buy-btn:hover { background: rgba(255,255,255,0.92) !important; }

/* === PRICING === */

/* Pricing — Financing (monthly + upfront side by side) */
.hp-pricing-finance { max-width: 720px; margin: 0 auto; padding: 80px 22px; text-align: center; }
.hp-pricing-finance h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-pricing-finance .sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 36px; }
.hp-finance-card { background: var(--color-surface-secondary); border-radius: 24px; padding: 48px; }
.hp-finance-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.hp-finance-opt { background: var(--color-surface); border-radius: 16px; padding: 28px 20px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.hp-finance-opt.active { border-color: var(--color-accent); }
.hp-finance-opt .label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.hp-finance-opt .price { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--color-text-primary); }
.hp-finance-opt .price .per { font-size: var(--text-lg); color: var(--color-text-secondary); font-weight: var(--fw-normal); }
.hp-finance-opt .note { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: 6px; }
.hp-finance-card .finance-cta { background: var(--color-accent); color: var(--color-surface); padding: 14px 32px; border-radius: 980px; font-size: var(--text-lg); font-weight: var(--fw-medium); text-decoration: none; display: inline-block; }

/* Pricing — Segmented Comparison Bar */
.hp-pricing-segmented { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; text-align: center; }
/* Shown via body[data-data="empty"] when the catalogue query returns no
   visible product groups. */
.hp-pricing-empty { padding: 32px 22px; }
.hp-pricing-empty p { font-size: var(--text-lg); color: var(--color-text-secondary); margin: 0 0 20px; }
.hp-pricing-segmented h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-pricing-segmented .sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 36px; }
.hp-segmented-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 20px; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); }
/* Column count follows the number of product groups rendered. Deliberately CSS
   modifiers, not an inline grid-template-columns on the element: an inline value
   outranks the max-width:820px collapse below and would keep the bar
   multi-column on phones. */
.hp-segmented-bar.count-1 { grid-template-columns: 1fr; }
.hp-segmented-bar.count-2 { grid-template-columns: repeat(2, 1fr); }
.hp-segmented-bar.count-3 { grid-template-columns: repeat(3, 1fr); }
.hp-segmented-bar.count-4 { grid-template-columns: repeat(4, 1fr); }
.hp-seg-col { padding: 36px 20px 28px; border-right: 1px solid var(--color-border); text-align: center; display: flex; flex-direction: column; }
.hp-seg-col:last-child { border-right: none; }
.hp-seg-col.highlight { background: linear-gradient(180deg, rgba(0,113,227,0.06), transparent); position: relative; }
.hp-seg-col.highlight::before { content: 'POPULAR'; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--color-accent); }
.hp-seg-col .tier { font-size: var(--text-base); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); margin-bottom: 10px; }
.hp-seg-col.highlight .tier { color: var(--color-accent); margin-top: 8px; }
.hp-seg-col .price { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-text-primary); }
.hp-seg-col .price .per { font-size: var(--text-md); color: var(--color-text-secondary); font-weight: var(--fw-normal); }
.hp-seg-col .desc { font-size: var(--text-base); color: var(--color-text-secondary); margin: 6px 0 18px; line-height: 1.45; }
/* "Starting at" label + spelled-out billing cycle around the price, mirroring
   Lagom's product-group block. .desc now sits above these, so the price group
   is pushed to the bottom of the column and the CTAs line up across cards. */
/* --- Homepage product categories (.pc-*) ---------------------------------
   Rides .hp-price-card, the card the store pages already use. Centred rather
   than the card's default left-align, because each card carries only a name,
   a tagline and one price — left-aligning that little content in a wide card
   looks unbalanced. Generous leading, one accent (the price), everything else
   quiet: the Apple pricing-card shape.                                      */
.hp-price-card.pc-group { text-align: center; align-items: stretch; padding: 40px 28px 32px; }
.hp-price-card.pc-group h3 { font-size: var(--text-h4); letter-spacing: -0.02em; margin: 0 0 8px; }
.hp-price-card.pc-group .pc-tagline { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 28px; }
.hp-price-card.pc-group .pc-from { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: 2px; }
.hp-price-card.pc-group .price { font-size: var(--text-display-sm); letter-spacing: -0.03em; line-height: 1.05; }
/* margin-bottom guarantees a gap between the price block and the CTA. The
   button's margin-top:auto only pushes it down in a card that is taller than
   its content, so in the tallest card — the one setting the row height — the
   button ended up sitting directly under "Monthly" with nothing between them. */
.hp-price-card.pc-group .pc-cycle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 4px; margin-bottom: 28px; }
/* Anchor the CTA, not the price block: a group with no priced product renders
   no pc-from/price/pc-cycle at all, so hanging the auto margin off those left
   that card short and its button ~98px higher than its neighbour.

   Quiet text link rather than the filled pill the base .hp-price-card .buy
   gives it. On a browse step the category name and price should lead; two
   solid accent slabs outweighed the names they sat under. Apple reserves the
   filled button for the one action it actually wants and uses a chevron link
   for everything else.

   Scoped to .pc-group, which only the homepage category cards carry — the
   seven store pages use bare .hp-price-card and keep their filled buttons. */
.hp-price-card.pc-group .buy {
    margin-top: auto;
    padding: 8px 0 0;
    background: none;
    border-radius: 0;
    color: var(--color-accent);
    font-weight: var(--fw-medium);
}
.hp-price-card.pc-group .buy::after { content: '\00a0\203A'; }
.hp-price-card.pc-group .buy:hover { background: none; text-decoration: underline; }
/* Single visible group shouldn't stretch to a full-width slab. */
.hp-pricing-grid.cols-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.hp-seg-col .seg-features { list-style: none; padding: 16px 0; margin: 0 0 18px; border-top: 1px solid var(--color-border); text-align: left; flex: 1; }
.hp-seg-col .seg-features li { padding: 6px 0; font-size: var(--text-base); color: var(--color-text-primary); display: flex; gap: 8px; align-items: center; }
.hp-seg-col .seg-features li::before { content: '\2713'; color: var(--color-green); font-weight: var(--fw-bold); flex-shrink: 0; }
.hp-seg-col .buy { display: block; padding: 10px 16px; border-radius: 980px; font-size: var(--text-base); font-weight: var(--fw-medium); background: var(--sidebar-item-active); color: var(--color-text-primary); text-decoration: none; transition: background 0.15s; }
.hp-seg-col .buy:hover { background: rgba(0,0,0,0.1); }
.hp-seg-col.highlight .buy { background: var(--color-accent); color: var(--color-surface); }
.hp-seg-col.highlight .buy:hover { background: var(--color-accent-hover); }

/* === Pricing — Compare Table (full feature matrix) === */
.hp-pricing-compare-table { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-pricing-compare-table .cmp-header { text-align: center; margin-bottom: 40px; }
.hp-pricing-compare-table .cmp-header h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-pricing-compare-table .cmp-sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin: 0; }
.hp-pricing-compare-table .cmp-scroll { overflow-x: auto; overflow-y: visible; border-radius: 18px; border: 1px solid var(--color-border); background: var(--color-surface); position: relative; }
.hp-pricing-compare-table .cmp-grid { width: 100%; min-width: 860px; border-collapse: collapse; font-size: var(--text-md); }
.hp-pricing-compare-table .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Header row */
.hp-pricing-compare-table thead th { padding: 56px 20px 24px; text-align: center; background: var(--color-surface); border-bottom: 1px solid var(--color-border); vertical-align: top; position: sticky; top: 0; z-index: 2; }
.hp-pricing-compare-table thead th.cmp-corner { background: var(--color-surface); padding-top: 28px; }
.hp-pricing-compare-table thead th.cmp-featured-col { background: linear-gradient(180deg, #eaf2ff 0%, #f5f9ff 100%); position: relative; }
.hp-pricing-compare-table .cmp-plan-ribbon { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 980px; white-space: nowrap; }
.hp-pricing-compare-table .cmp-plan-name { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: 6px; letter-spacing: -0.005em; }
.hp-pricing-compare-table .cmp-plan-price { font-size: var(--text-h4); font-weight: var(--fw-semibold); color: var(--color-text-primary); letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1; }
.hp-pricing-compare-table .cmp-plan-price span { font-size: var(--text-md); color: var(--color-text-secondary); font-weight: var(--fw-normal); margin-left: 2px; }
.hp-pricing-compare-table .cmp-price-custom { font-size: var(--text-2xl); color: var(--color-text-primary); }
.hp-pricing-compare-table .cmp-plan-btn { display: inline-block; padding: 8px 18px; border-radius: 980px; font-size: var(--text-base); font-weight: var(--fw-medium); background: var(--sidebar-item-active); color: var(--color-text-primary); text-decoration: none; transition: background 0.15s; }
.hp-pricing-compare-table .cmp-plan-btn:hover { background: rgba(0,0,0,0.1); }
.hp-pricing-compare-table .cmp-plan-btn.primary { background: var(--color-accent); color: var(--color-surface); }
.hp-pricing-compare-table .cmp-plan-btn.primary:hover { background: var(--color-accent-hover); }

/* Section divider row */
.hp-pricing-compare-table .cmp-section-row th { padding: 0; text-align: left; background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.hp-pricing-compare-table .cmp-section-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 20px 20px 18px; background: transparent; border: 0; cursor: pointer; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-primary); text-align: left; transition: background 0.15s; font-family: inherit; }
.hp-pricing-compare-table .cmp-section-toggle:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.hp-pricing-compare-table .cmp-section-toggle .chev { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: var(--text-xs); transition: transform 0.2s ease; opacity: 0.7; }
.hp-pricing-compare-table .cmp-section-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.hp-pricing-compare-table tr[data-group].cmp-hidden { display: none; }

/* Tooltip on feature labels */
.hp-pricing-compare-table .cmp-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #c7c7cc; color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--fw-bold); font-family: ui-serif, Georgia, 'Times New Roman', serif; font-style: italic; margin-left: 6px; cursor: help; vertical-align: middle; position: relative; user-select: none; transition: background 0.15s; }
.hp-pricing-compare-table .cmp-tip:hover,
.hp-pricing-compare-table .cmp-tip:focus { background: var(--color-text-secondary); outline: none; }
.hp-pricing-compare-table .cmp-tip::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--color-text-primary); color: var(--color-surface); padding: 10px 14px; border-radius: 10px; font-size: var(--text-sm); font-style: normal; font-weight: var(--fw-normal); font-family: var(--font-family); letter-spacing: -0.005em; line-height: 1.45; width: 240px; white-space: normal; text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; }
.hp-pricing-compare-table .cmp-tip::after { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--color-text-primary); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; }
.hp-pricing-compare-table .cmp-tip:hover::before,
.hp-pricing-compare-table .cmp-tip:focus::before,
.hp-pricing-compare-table .cmp-tip:hover::after,
.hp-pricing-compare-table .cmp-tip:focus::after { opacity: 1; }
/* Flip tooltip to stay on screen near left edge */
.hp-pricing-compare-table tbody th[scope="row"] .cmp-tip::before { left: 0; transform: translateX(0); }
.hp-pricing-compare-table tbody th[scope="row"] .cmp-tip::after { left: 8px; transform: translateX(0); }

/* Data rows */
.hp-pricing-compare-table tbody tr:not(.cmp-section-row) { border-bottom: 1px solid var(--color-border-light); }
.hp-pricing-compare-table tbody tr:not(.cmp-section-row):last-child { border-bottom: none; }
.hp-pricing-compare-table tbody th[scope="row"] { padding: 14px 20px; text-align: left; font-size: var(--text-md); font-weight: var(--fw-normal); color: var(--color-text-primary); background: var(--color-surface); }
.hp-pricing-compare-table tbody td { padding: 14px 20px; text-align: center; color: var(--color-text-primary); font-size: var(--text-md); }
.hp-pricing-compare-table tbody td.cmp-featured { background: rgba(0,113,227,0.04); font-weight: var(--fw-medium); }

/* Check / dash */
.hp-pricing-compare-table .cmp-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-green); color: var(--color-surface); font-size: var(--text-sm); font-weight: var(--fw-bold); }
.hp-pricing-compare-table .cmp-dash { color: #c7c7cc; font-size: var(--text-xl); }

/* Dark mode */
[data-theme="dark"] .hp-pricing-compare-table .cmp-header h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-scroll { background: #1c1c1e; border-color: #3a3a3c; }
[data-theme="dark"] .hp-pricing-compare-table thead th,
[data-theme="dark"] .hp-pricing-compare-table thead th.cmp-corner { background: #1c1c1e; border-color: #3a3a3c; }
[data-theme="dark"] .hp-pricing-compare-table thead th.cmp-featured-col { background: linear-gradient(180deg, rgba(10,132,255,0.15) 0%, rgba(10,132,255,0.05) 100%); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-plan-name,
[data-theme="dark"] .hp-pricing-compare-table .cmp-plan-price,
[data-theme="dark"] .hp-pricing-compare-table .cmp-price-custom,
[data-theme="dark"] .hp-pricing-compare-table tbody th[scope="row"],
[data-theme="dark"] .hp-pricing-compare-table tbody td { color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-section-row th { background: #2a2a2c; color: #a1a1a6; border-color: #3a3a3c; }
[data-theme="dark"] .hp-pricing-compare-table tbody tr:not(.cmp-section-row) { border-color: #3a3a3c; }
[data-theme="dark"] .hp-pricing-compare-table tbody th[scope="row"] { background: #1c1c1e; }
[data-theme="dark"] .hp-pricing-compare-table tbody td.cmp-featured { background: rgba(10,132,255,0.08); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-plan-btn { background: rgba(255,255,255,0.1); color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-plan-btn:hover { background: rgba(255,255,255,0.16); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-section-toggle { color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-section-toggle:hover { background: #3a3a3c; }
[data-theme="dark"] .hp-pricing-compare-table .cmp-tip { background: #48484a; color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-tip:hover,
[data-theme="dark"] .hp-pricing-compare-table .cmp-tip:focus { background: var(--color-text-secondary); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-tip::before { background: var(--color-surface-secondary); color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-compare-table .cmp-tip::after { border-top-color: var(--color-surface-secondary); }

/* === FEATURES === */

/* Features — Marquee Strip (infinite scroll of feature tags) */
.hp-feature-marquee { padding: 80px 0; background: var(--color-bg); text-align: center; overflow: hidden; }
.hp-feature-marquee h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 40px; color: var(--color-text-primary); padding: 0 22px; }
.hp-marq-track { display: flex; gap: 16px; animation: marq-scroll 40s linear infinite; width: max-content; }
.hp-marq-tag { padding: 12px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 980px; font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--color-text-primary); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.hp-marq-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-green); }
@keyframes marq-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Features — Big Number Highlight */
.hp-feature-bignum { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-feature-bignum h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 10px; color: var(--color-text-primary); }
.hp-feature-bignum .sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 56px; max-width: 640px; }
.hp-bignum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.hp-bignum-item { border-top: 1px solid var(--color-border); padding-top: 28px; }
.hp-bignum-item .num { font-size: var(--text-display-lg); font-weight: var(--fw-semibold); letter-spacing: -0.04em; line-height: 1; color: var(--color-text-primary); margin-bottom: 12px; }
.hp-bignum-item h4 { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 6px; letter-spacing: -0.01em; }
.hp-bignum-item p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }

/* === LOCATIONS === */

/* Locations — Animated Globe */
.hp-locations-globe { padding: 80px 22px; text-align: center; background: var(--color-text-primary); color: var(--color-surface); overflow: hidden; position: relative; }
.hp-locations-globe h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--color-surface); margin: 0 0 12px; }
.hp-locations-globe .sub { font-size: var(--text-xl); color: #a1a1a6; margin-bottom: 48px; max-width: 560px; margin-left: auto; margin-right: auto; }
.hp-globe-wrap { width: 260px; height: 260px; margin: 0 auto 40px; position: relative; perspective: 800px; }
.hp-globe-sphere { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #5ac8fa 0%, var(--color-accent) 55%, #002e5c 100%); box-shadow: inset -30px -30px 80px rgba(0,0,0,0.4), 0 0 80px rgba(0,113,227,0.3); animation: globe-rotate 20s linear infinite; position: relative; overflow: hidden; }
.hp-globe-sphere::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); transform: scaleY(0.2); top: 50%; }
.hp-globe-sphere::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); transform: scaleX(0.5); }
@keyframes globe-rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
.hp-globe-stats { display: flex; justify-content: center; gap: 48px; }
.hp-globe-stat .n { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--color-surface); }
.hp-globe-stat .l { font-size: var(--text-base); color: #a1a1a6; margin-top: 2px; }

/* Locations — Connection Map (animated lines) */
.hp-locations-connect { padding: 80px 22px; text-align: center; background: var(--color-bg); }
.hp-locations-connect h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 12px; color: var(--color-text-primary); }
.hp-locations-connect .sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 40px; }
.hp-connect-viz { max-width: 800px; margin: 0 auto; position: relative; }
.hp-connect-viz svg { width: 100%; height: auto; }
.hp-connect-viz .map-bg { filter: opacity(0.08) !important; }
.hp-connect-viz .line { animation: dash-flow 8s linear infinite; }
[data-theme="dark"] .hp-connect-viz .map-bg { filter: invert(1) opacity(0.18) !important; }
[data-theme="dark"] .hp-connect-viz .map-overlay text { fill: var(--color-surface-secondary) !important; }
[data-theme="dark"] .hp-connect-viz .map-overlay circle[fill="#fff"] { fill: #1c1c1e !important; }
@keyframes dash-flow { to { stroke-dashoffset: -80; } }
.hp-connect-viz .hub { fill: var(--color-accent); }
.hp-connect-viz .node { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 2; }

/* === TESTIMONIALS === */

/* Testimonials — Video Card (with play button overlay) */
.hp-testi-video { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-testi-video h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 40px; color: var(--color-text-primary); }
.hp-testi-vid-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 24px; overflow: hidden; background: var(--color-text-primary); color: var(--color-surface); align-items: center; }
.hp-testi-vid-card .vid-thumb { background: linear-gradient(135deg, #3a3a3c, var(--color-text-primary)); height: 360px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.hp-testi-vid-card .vid-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,113,227,0.3), transparent); }
.hp-testi-vid-card .play-btn { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.hp-testi-vid-card .play-btn:hover { transform: scale(1.08); }
.hp-testi-vid-card .play-btn svg { width: 24px; height: 24px; color: var(--color-text-primary); margin-left: 4px; }
.hp-testi-vid-card .vid-text { padding: 48px; }
.hp-testi-vid-card .vid-text blockquote { font-size: var(--text-3xl); font-weight: var(--fw-normal); line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 24px; color: var(--color-surface); }
.hp-testi-vid-card .vid-author { display: flex; align-items: center; gap: 12px; }
.hp-testi-vid-card .vid-author .avatar { width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; }
.hp-testi-vid-card .vid-author .name { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-surface); }
.hp-testi-vid-card .vid-author .role { font-size: var(--text-base); color: #a1a1a6; }

/* Testimonials — Review Stars Block */
.hp-testi-reviews { max-width: 720px; margin: 0 auto; padding: 80px 22px; text-align: center; }
.hp-testi-reviews .big-stars { font-size: var(--text-h2); color: var(--color-orange); letter-spacing: 4px; margin-bottom: 12px; }
.hp-testi-reviews .rating-num { font-size: var(--text-display-lg); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1; color: var(--color-text-primary); margin-bottom: 8px; }
.hp-testi-reviews .rating-of { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 32px; }
.hp-testi-reviews .review-sources { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.hp-testi-reviews .rev-src { text-align: center; }
.hp-testi-reviews .rev-src .stars { color: var(--color-orange); font-size: var(--text-md); margin-bottom: 2px; }
.hp-testi-reviews .rev-src .src-name { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-primary); }
.hp-testi-reviews .rev-src .src-count { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* === FAQ === */

/* FAQ — Tabbed Categories */
.hp-faq-tabs-section { max-width: 900px; margin: 0 auto; padding: 80px 22px; }
.hp-faq-tabs-section h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 8px; color: var(--color-text-primary); }
.hp-faq-tabs-section .sub { font-size: var(--text-xl); color: var(--color-text-secondary); text-align: center; margin-bottom: 32px; }
.hp-faq-cat-tabs { display: flex; justify-content: center; gap: 6px; background: var(--color-surface-secondary); border-radius: 980px; padding: 4px; margin: 0 auto 32px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.hp-faq-cat { padding: 8px 18px; border-radius: 980px; font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-secondary); cursor: pointer; border: none; background: none; transition: all 0.2s; font-family: inherit; }
.hp-faq-cat.active { background: var(--color-surface); color: var(--color-text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.hp-faq-cat-panel { display: none; }
.hp-faq-cat-panel.active { display: block; }

/* FAQ — With Contact CTA */
.hp-faq-contact { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.hp-faq-contact h2 { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 20px; color: var(--color-text-primary); }
.hp-faq-contact-card { background: var(--color-surface-secondary); border-radius: 18px; padding: 32px; position: sticky; top: 80px; }
.hp-faq-contact-card .icon-lg { width: 48px; height: 48px; border-radius: 12px; background: rgba(0,113,227,0.1); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hp-faq-contact-card .icon-lg svg { width: 24px; height: 24px; }
.hp-faq-contact-card h4 { font-size: var(--text-h6); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin: 0 0 6px; }
.hp-faq-contact-card p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 20px; }
.hp-faq-contact-card .contact-btn { display: block; text-align: center; padding: 12px 24px; background: var(--color-accent); color: var(--color-surface); border-radius: 10px; font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; margin-bottom: 10px; }
.hp-faq-contact-card .contact-link { display: block; text-align: center; font-size: var(--text-base); color: var(--color-link); text-decoration: none; }

/* === TRUST & STATS === */

/* Trust — Badge Grid (compliance) */
.hp-trust-badges { max-width: var(--w-prose); margin: 0 auto; padding: 64px 22px; text-align: center; }
.hp-trust-badges h2 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0 0 8px; color: var(--color-text-primary); }
.hp-trust-badges .sub { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: 40px; }
.hp-badges-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.hp-badge { background: var(--color-surface-secondary); border-radius: 14px; padding: 24px 12px; text-align: center; }
.hp-badge .ic { font-size: var(--text-h3); margin-bottom: 8px; }
.hp-badge .name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); }

/* Trust — Award Strip (publication logos) */
.hp-trust-awards { padding: 56px 22px; background: var(--color-surface-secondary); text-align: center; }
.hp-trust-awards .award-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 28px; }
.hp-awards-row { display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; max-width: 980px; margin: 0 auto; }
.hp-award { color: var(--color-text-secondary); opacity: 0.7; transition: opacity 0.2s, color 0.2s; display: inline-flex; align-items: center; gap: 8px; height: 32px; }
.hp-award:hover { opacity: 1; color: var(--color-text-primary); }
.hp-award.tc { font-family: var(--font-family); font-weight: var(--fw-bold); font-size: var(--text-3xl); letter-spacing: -0.04em; }
.hp-award.tc .tc-c { color: #0a9163; opacity: 0.9; }
.hp-award:hover.tc .tc-c { color: #0a9163; opacity: 1; }
.hp-award.wired { font-family: Georgia, serif; font-weight: var(--fw-black); font-size: var(--text-3xl); font-style: italic; letter-spacing: -0.02em; }
.hp-award.verge { font-family: var(--font-family); font-weight: var(--fw-bold); font-size: var(--text-2xl); letter-spacing: 0.02em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.hp-award.verge::before { content: ''; display: inline-block; width: 14px; height: 14px; background: currentColor; mask: linear-gradient(45deg, transparent 50%, currentColor 50%); -webkit-mask: linear-gradient(45deg, transparent 50%, currentColor 50%); border-radius: 2px; }
.hp-award.forbes { font-family: Georgia, serif; font-weight: var(--fw-bold); font-size: var(--text-3xl); letter-spacing: -0.01em; }
.hp-award.gtm { font-family: var(--font-family); font-weight: var(--fw-bold); font-size: var(--text-h6); letter-spacing: 0.01em; }
.hp-award.gtm .stars-sm { color: var(--color-orange); font-size: var(--text-base); }

/* === CTA === */

/* CTA — Newsletter Signup */
.hp-cta-newsletter { max-width: 720px; margin: 0 auto; padding: 80px 22px; text-align: center; }
.hp-cta-newsletter h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 12px; color: var(--color-text-primary); }
.hp-cta-newsletter .sub { font-size: var(--text-xl); color: var(--color-text-secondary); margin-bottom: 32px; }
.hp-newsletter-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.hp-newsletter-form input { flex: 1; padding: 14px 18px; border: 1px solid #d2d2d7; border-radius: 12px; font-size: var(--text-lg); font-family: inherit; background: var(--color-surface); color: var(--color-text-primary); }
.hp-newsletter-form input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
.hp-newsletter-form button { padding: 14px 28px; background: var(--color-accent); color: var(--color-surface); border: none; border-radius: 12px; font-size: var(--text-lg); font-weight: var(--fw-medium); cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.2s; }
.hp-newsletter-form button:hover { background: var(--color-accent-hover); }
.hp-cta-newsletter .note { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 16px; }

/* CTA — Full-Bleed Image */
.hp-cta-immersive { min-height: 400px; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-surface); overflow: hidden; background: linear-gradient(135deg, #1a7f4e 0%, #0a9c44 50%, var(--color-accent) 100%); }
.hp-cta-immersive::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.3) 100%); }
.hp-cta-immersive .inner { position: relative; z-index: 2; padding: 80px 22px; max-width: 680px; }
.hp-cta-immersive h2 { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-surface); margin: 0 0 14px; line-height: 1.05; }
.hp-cta-immersive p { font-size: var(--text-2xl); color: rgba(255,255,255,0.9); margin: 0 0 28px; }
.hp-cta-immersive .btn { background: var(--color-surface); color: var(--color-text-primary); padding: 14px 32px; border-radius: 980px; font-size: var(--text-lg); font-weight: var(--fw-medium); text-decoration: none; display: inline-block; transition: transform 0.2s; }
.hp-cta-immersive .btn:hover { transform: translateY(-1px); }

/* === APPLE-INSPIRED === */

/* Environment Pledge (like apple.com/environment) */
.hp-eco-section { max-width: var(--w-prose); margin: 0 auto; padding: 100px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hp-eco-visual { width: 100%; aspect-ratio: 1; background: radial-gradient(circle at 35% 35%, #7dd3a8 0%, #0a9c44 60%, #054e23 100%); border-radius: 50%; box-shadow: inset -30px -30px 80px rgba(0,0,0,0.3), 0 20px 80px rgba(10,156,68,0.3); position: relative; overflow: hidden; animation: globe-rotate 30s linear infinite; }
.hp-eco-visual::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); transform: scaleY(0.3); top: 50%; }
.hp-eco-text h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--color-text-primary); margin: 0 0 16px; line-height: 1.1; }
.hp-eco-text p { font-size: var(--text-xl); color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 24px; }
.hp-eco-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.hp-eco-stat .n { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: #0a9c44; letter-spacing: -0.02em; }
.hp-eco-stat .l { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: 2px; }

/* Compare at a Glance (spec matrix) */
.hp-compare-glance { max-width: var(--w-prose); margin: 0 auto; padding: 80px 22px; }
.hp-compare-glance h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; text-align: center; margin: 0 0 40px; color: var(--color-text-primary); }
.hp-glance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hp-glance-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 28px 24px; text-align: center; }
.hp-glance-card.featured { border-color: var(--color-accent); border-width: 2px; }
.hp-glance-card .tier-name { font-size: var(--text-base); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); margin-bottom: 10px; }
.hp-glance-card.featured .tier-name { color: var(--color-accent); }
.hp-glance-card .prod-name { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--color-text-primary); margin-bottom: 20px; }
.hp-glance-specs { text-align: left; list-style: none; padding: 0; margin: 0 0 20px; }
.hp-glance-specs li { padding: 10px 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--text-base); display: flex; justify-content: space-between; }
.hp-glance-specs li:last-child { border-bottom: none; }
.hp-glance-specs .spec-label { color: var(--color-text-secondary); }
.hp-glance-specs .spec-val { color: var(--color-text-primary); font-weight: var(--fw-medium); }
.hp-glance-card .price-line { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-top: 16px; }

/* === PRODUCT TILES === */

/* Tiles — Hero Pair (2 big 50/50 tiles) */
.hp-tiles-hero-pair { max-width: var(--w-wide); margin: 0 auto; padding: 48px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-hero-tile { border-radius: 24px; min-height: 420px; padding: 56px 44px; display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: flex-start; gap: 10px; }
.hp-hero-tile.tile-sky { background: linear-gradient(180deg, #e8f2fb 0%, #d4e8f7 100%); color: var(--color-text-primary); }
.hp-hero-tile.tile-graphite { background: #2a2a2c; color: var(--color-text-primary); }
.hp-hero-tile .ht-eyebrow { font-size: var(--text-base); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.hp-hero-tile h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0; line-height: 1.05; color: inherit; }
.hp-hero-tile p { font-size: var(--text-xl); max-width: 360px; line-height: 1.35; margin: 4px 0 18px; opacity: 0.85; }
.hp-hero-tile .ht-ctas { display: flex; gap: 16px; font-size: var(--text-xl); }
.hp-hero-tile .ht-ctas a { color: var(--color-link); text-decoration: none; font-weight: var(--fw-normal); }
.hp-hero-tile.tile-graphite .ht-ctas a { color: #64d2ff; }
.hp-hero-tile .ht-visual { margin-top: auto; font-size: var(--text-display-lg); opacity: 0.9; }

/* Tiles — Magazine Mixed (one big + 4 small) */
.hp-tiles-magazine { max-width: var(--w-wide); margin: 0 auto; padding: 48px 22px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.hp-tiles-magazine .mag-big { background: linear-gradient(180deg, var(--color-bg), var(--color-border)); border-radius: 24px; min-height: 520px; padding: 56px 48px; display: flex; flex-direction: column; gap: 10px; }
.hp-tiles-magazine .mag-big .eb { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.04em; }
.hp-tiles-magazine .mag-big h2 { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.02; margin: 0; color: var(--color-text-primary); }
.hp-tiles-magazine .mag-big p { font-size: var(--text-2xl); color: var(--color-text-secondary); max-width: 420px; line-height: 1.3; }
.hp-tiles-magazine .mag-big .link { color: var(--color-link); font-size: var(--text-xl); text-decoration: none; margin-top: 10px; }
.hp-tiles-magazine .mag-big .mag-visual { margin-top: auto; font-size: var(--text-display-xl); text-align: center; opacity: 0.9; }
.hp-mag-small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-mag-small { border-radius: 20px; padding: 28px 24px; min-height: 250px; display: flex; flex-direction: column; }
.hp-mag-small.mag-cream { background: #faf7f2; color: var(--color-text-primary); }
.hp-mag-small.mag-plum { background: #1a1735; color: var(--color-text-primary); }
.hp-mag-small.mag-light { background: var(--color-bg); color: var(--color-text-primary); border: 1px solid var(--color-border); }
.hp-mag-small.mag-dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-mag-small .eb-sm { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; margin-bottom: 6px; }
.hp-mag-small h3 { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.15; color: inherit; }
.hp-mag-small p { font-size: var(--text-md); margin: 0; line-height: 1.45; opacity: 0.85; }
.hp-mag-small .mvsm { margin-top: auto; padding-top: 12px; font-size: var(--text-h2); text-align: center; opacity: 0.9; }

/* === Alive Heroes — animated Apple-style backgrounds === */

/* Aurora — drifting mesh gradient */
.hp-hero-aurora { position: relative; min-height: 560px; padding: 120px 22px 100px; text-align: center; overflow: hidden; background: var(--color-bg); }
.hp-hero-aurora .aurora-layer { position: absolute; inset: -20%; border-radius: 50%; filter: blur(80px); opacity: 0.85; pointer-events: none; will-change: transform; }
.hp-hero-aurora .aurora-1 { background: radial-gradient(circle at 30% 40%, #a1c4fd 0%, transparent 55%); animation: aurora-drift-1 18s ease-in-out infinite alternate; }
.hp-hero-aurora .aurora-2 { background: radial-gradient(circle at 70% 60%, #c2a8ff 0%, transparent 50%); animation: aurora-drift-2 22s ease-in-out infinite alternate; }
.hp-hero-aurora .aurora-3 { background: radial-gradient(circle at 50% 20%, #ffc8d3 0%, transparent 45%); animation: aurora-drift-3 26s ease-in-out infinite alternate; }
.hp-hero-aurora .aurora-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hp-hero-aurora .hp-eyebrow { color: var(--color-link); font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.005em; margin-bottom: 18px; text-transform: none; }
.hp-hero-aurora h1 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.05; color: var(--color-text-primary); margin: 0 0 20px; }
.hp-hero-aurora p { font-size: var(--text-2xl); color: var(--color-text-primary); opacity: 0.7; max-width: 560px; margin: 0 auto 32px; line-height: 1.4; }
.hp-hero-aurora .hp-cta-row { display: inline-flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }

@keyframes aurora-drift-1 { 0% { transform: translate(-8%, -4%) scale(1); } 100% { transform: translate(12%, 8%) scale(1.15); } }
@keyframes aurora-drift-2 { 0% { transform: translate(6%, 10%) scale(1.1); } 100% { transform: translate(-10%, -6%) scale(0.95); } }
@keyframes aurora-drift-3 { 0% { transform: translate(10%, -8%) scale(0.95); } 100% { transform: translate(-6%, 12%) scale(1.1); } }

[data-theme="dark"] .hp-hero-aurora { background: #000; }
[data-theme="dark"] .hp-hero-aurora .aurora-1 { background: radial-gradient(circle at 30% 40%, #1e3a8a 0%, transparent 55%); opacity: 0.55; }
[data-theme="dark"] .hp-hero-aurora .aurora-2 { background: radial-gradient(circle at 70% 60%, #6b21a8 0%, transparent 50%); opacity: 0.5; }
[data-theme="dark"] .hp-hero-aurora .aurora-3 { background: radial-gradient(circle at 50% 20%, #9d174d 0%, transparent 45%); opacity: 0.35; }
[data-theme="dark"] .hp-hero-aurora h1 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-hero-aurora p { color: #a1a1a6; opacity: 1; }
[data-theme="dark"] .hp-hero-aurora .hp-eyebrow { color: #2997ff; }

/* Orb — pulsing gradient sphere behind text */
.hp-hero-orb { position: relative; min-height: 560px; padding: 120px 22px 100px; text-align: center; overflow: hidden; background: var(--color-bg); }
.hp-hero-orb .orb-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #4facfe 0%, #7b8cff 40%, #a855f7 80%, transparent 100%); filter: blur(40px); opacity: 0.55; animation: orb-pulse 6s ease-in-out infinite alternate; pointer-events: none; }
.hp-hero-orb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, var(--color-bg) 80%); pointer-events: none; }
.hp-hero-orb .orb-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hp-hero-orb .hp-eyebrow { color: var(--color-link); font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.005em; margin-bottom: 18px; text-transform: none; }
.hp-hero-orb h1 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.05; color: var(--color-text-primary); margin: 0 0 20px; }
.hp-hero-orb p { font-size: var(--text-2xl); color: var(--color-text-primary); opacity: 0.7; max-width: 560px; margin: 0 auto 32px; line-height: 1.4; }
.hp-hero-orb .hp-cta-row { display: inline-flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }

@keyframes orb-pulse {
    0% { transform: translate(-50%, -50%) scale(0.95); filter: blur(40px); opacity: 0.55; }
    100% { transform: translate(-50%, -50%) scale(1.08); filter: blur(48px); opacity: 0.7; }
}

[data-theme="dark"] .hp-hero-orb { background: #000; }
[data-theme="dark"] .hp-hero-orb::after { background: radial-gradient(ellipse at center, transparent 40%, #000 82%); }
[data-theme="dark"] .hp-hero-orb .orb-bg { opacity: 0.75; }
[data-theme="dark"] .hp-hero-orb h1 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-hero-orb p { color: #a1a1a6; opacity: 1; }
[data-theme="dark"] .hp-hero-orb .hp-eyebrow { color: #2997ff; }

/* Starfield — dark hero with slowly drifting dots */
.hp-hero-starfield { position: relative; min-height: 560px; padding: 120px 22px 100px; text-align: center; overflow: hidden; background: radial-gradient(ellipse 90% 60% at 50% 30%, #0b1f3a 0%, #000 80%); color: var(--color-text-primary); }
.hp-hero-starfield .starfield-canvas { position: absolute; inset: 0; pointer-events: none; }
.hp-hero-starfield .starfield-canvas span { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--color-surface); opacity: 0.4; box-shadow: 0 0 8px rgba(255,255,255,0.5); animation: star-twinkle var(--d) ease-in-out infinite alternate; }
.hp-hero-starfield .starfield-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hp-hero-starfield .hp-eyebrow { color: #2997ff; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.005em; margin-bottom: 18px; text-transform: none; }
.hp-hero-starfield h1 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.05; color: var(--color-text-primary); margin: 0 0 20px; }
.hp-hero-starfield p { font-size: var(--text-2xl); color: #a1a1a6; max-width: 560px; margin: 0 auto 32px; line-height: 1.4; }
.hp-hero-starfield .hp-cta-row { display: inline-flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hp-hero-starfield .hp-cta-row a:not(.hp-buy-btn) { color: #2997ff; }

@keyframes star-twinkle {
    0% { opacity: 0.2; transform: translate(0, 0) scale(0.9); }
    100% { opacity: 0.9; transform: translate(8px, -6px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .hp-hero-aurora .aurora-layer,
    .hp-hero-orb .orb-bg,
    .hp-hero-starfield .starfield-canvas span { animation: none !important; }
}

@media (max-width: 820px) {
    .hp-hero-aurora, .hp-hero-orb, .hp-hero-starfield { min-height: 440px; padding: 80px 22px 60px; }
    .hp-hero-aurora h1, .hp-hero-orb h1, .hp-hero-starfield h1 { font-size: var(--text-h1); }
    .hp-hero-orb .orb-bg { width: 420px; height: 420px; }
}

/* === Silicon Hero (huge AI-style headline on black) === */
.hp-silicon-hero { background: #000; color: var(--color-text-primary); padding: 120px 22px; }
.hp-silicon-hero-inner { max-width: var(--w-prose); margin: 0 auto; }
.hp-silicon-hero .eyebrow { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: var(--color-text-primary); margin: 0 0 24px; }
.hp-silicon-hero h1 { font-size: var(--text-display-lg); font-weight: var(--fw-semibold); letter-spacing: -0.035em; line-height: 1; margin: 0 0 40px; color: var(--color-text-primary); }
.hp-silicon-hero .lead { font-size: var(--text-2xl); line-height: 1.45; letter-spacing: -0.01em; color: var(--color-text-tertiary); max-width: 780px; margin: 0; }
.hp-silicon-hero .lead strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

/* === Duo Dark Feature Cards (apple.com AI duo) === */
.hp-duo-feature { max-width: var(--w-prose); margin: 0 auto; padding: 48px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-duo-card { background: var(--color-text-primary); border-radius: 24px; padding: 32px 32px 0; color: var(--color-surface); overflow: hidden; display: flex; flex-direction: column; min-height: 480px; }
.hp-duo-card .duo-text { font-size: var(--text-lg); line-height: 1.5; color: #a1a1a6; margin: 0 0 28px; }
.hp-duo-card .duo-text strong { color: var(--color-surface); font-weight: var(--fw-semibold); }
.hp-duo-card .duo-visual { margin-top: auto; min-height: 260px; overflow: hidden; display: flex; align-items: flex-end; }
.hp-duo-card .duo-visual img { display: block; max-width: none; height: auto; }
/* Left card: screenshot shifted right, overflows right edge */
.hp-duo-card .duo-visual--left { justify-content: flex-start; margin-right: -40px; margin-left: 40px; }
.hp-duo-card .duo-visual--left img { width: 120%; transform: translateX(8%); }
/* Right card: screenshot shifted left, overflows left edge */
.hp-duo-card .duo-visual--right { justify-content: flex-end; margin-left: -40px; margin-right: 40px; }
.hp-duo-card .duo-visual--right img { width: 120%; transform: translateX(-8%); }

/* === Chip + Spec Callout (M5 / M5 Pro layout) === */
.hp-chip-spec { max-width: 1100px; margin: 0 auto; padding: 48px 22px; display: flex; flex-direction: column; gap: 64px; }
.hp-chip-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: center; }
.hp-chip-row.reverse { grid-template-columns: 1fr 1.6fr; }
.hp-chip-visual { background: #0c0c0e; border-radius: 16px; min-height: 300px; display: flex; align-items: center; justify-content: center; color: #48484a; font-size: var(--text-base); letter-spacing: 0.01em; overflow: hidden; }
.hp-chip-visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hp-chip-copy .chip-badge { display: inline-flex; align-items: center; gap: 8px; background: #eaf4ef; color: #1d5d35; font-size: var(--text-base); font-weight: var(--fw-semibold); padding: 6px 12px; border-radius: 8px; margin-bottom: 18px; }
.hp-chip-copy .chip-badge.pro { background: #eaf0ff; color: #1e3a8a; }
.hp-chip-copy .chip-lead { font-size: var(--text-xl); font-weight: var(--fw-normal); color: var(--color-text-primary); line-height: 1.45; margin: 0 0 22px; }
.hp-chip-copy .chip-lead strong { font-weight: var(--fw-semibold); }
.hp-chip-copy .chip-meta { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.5; }
.hp-chip-copy .chip-meta strong { display: block; color: var(--color-text-primary); font-weight: var(--fw-semibold); margin-bottom: 2px; }

/* === Intelligence + Privacy Duo === */
.hp-intel-duo { max-width: var(--w-prose); margin: 0 auto; padding: 48px 22px; display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; }
.hp-intel-big { background: var(--color-text-primary); color: var(--color-surface); border-radius: 24px; padding: 48px 48px 0; display: flex; flex-direction: column; min-height: 560px; overflow: hidden; }
.hp-intel-big .eyebrow { font-size: var(--text-base); font-weight: var(--fw-semibold); letter-spacing: 0.02em; color: #0a84ff; margin-bottom: 12px; }
.hp-intel-big h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 18px; color: var(--color-text-primary); }
.hp-intel-big p { font-size: var(--text-lg); color: #a1a1a6; line-height: 1.55; margin: 0 0 20px; max-width: 540px; }
.hp-intel-big p strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.hp-intel-big .link { color: #0a84ff; font-size: var(--text-md); text-decoration: none; }
.hp-intel-big .link:hover { text-decoration: underline; }
.hp-intel-big .intel-visual { margin: 28px -48px 0; flex: 1; background: linear-gradient(135deg, #2a2a2c 0%, #1c1c1e 100%); border-radius: 10px 10px 0 0; min-height: 240px; display: flex; align-items: flex-end; justify-content: center; color: #48484a; font-size: var(--text-base); overflow: hidden; }
.hp-intel-big .intel-visual img { width: 100%; height: auto; display: block; object-fit: cover; }
.hp-intel-small { background: var(--color-text-primary); color: var(--color-surface); border-radius: 24px; padding: 0; display: flex; flex-direction: column; min-height: 560px; overflow: hidden; }
.hp-intel-small .intel-small-shot { width: 100%; height: 220px; background: #2a2a2c; overflow: hidden; flex-shrink: 0; }
.hp-intel-small .intel-small-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-intel-small .intel-small-content { flex: 1; padding: 36px 32px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hp-intel-small .icon-badge { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #a855f7, #3b82f6); display: flex; align-items: center; justify-content: center; font-size: var(--text-3xl); margin-bottom: 22px; color: var(--color-surface); }
.hp-intel-small h3 { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 14px; color: var(--color-text-primary); max-width: 240px; }
.hp-intel-small p { font-size: var(--text-md); color: #a1a1a6; line-height: 1.55; margin: 0; max-width: 260px; }
.hp-intel-small p strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

/* === Intelligence - Full Stacked === */
.hp-hadrian-intel-full { max-width: 980px; margin: 0 auto; padding: 100px 22px; background: var(--color-bg); }
.hp-hadrian-intel-full .intel-top { padding: 0 0 80px; }
.hp-hadrian-intel-full .intel-eyebrow { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.015em; color: var(--color-text-primary); margin: 0 0 6px; }
.hp-hadrian-intel-full h2 { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 28px; color: var(--color-text-primary); max-width: 820px; }
.hp-hadrian-intel-full .intel-top p { font-size: var(--text-2xl); line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 22px; max-width: 760px; }
.hp-hadrian-intel-full .intel-top p strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.hp-hadrian-intel-full .inline-link { color: var(--color-link); text-decoration: none; }
.hp-hadrian-intel-full .inline-link:hover { text-decoration: underline; }
.hp-hadrian-intel-full .intel-link { display: inline-block; color: var(--color-link); font-size: var(--text-xl); text-decoration: none; margin-bottom: 48px; }
.hp-hadrian-intel-full .intel-link:hover { text-decoration: underline; }
.hp-hadrian-intel-full .intel-shot { width: 100%; max-width: 980px; margin: 0 auto; }
.hp-hadrian-intel-full .intel-shot img { display: block; width: 100%; height: auto; border-radius: 0; }
.hp-hadrian-intel-full .intel-divider { height: 1px; background: #d2d2d7; margin: 0; }
.hp-hadrian-intel-full .intel-bottom { padding: 80px 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hp-hadrian-intel-full .intel-star { margin-bottom: 28px; }
.hp-hadrian-intel-full .intel-bottom h3 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text-primary); margin: 0 0 22px; max-width: 720px; }
.hp-hadrian-intel-full .intel-bottom p { font-size: var(--text-xl); line-height: 1.55; color: var(--color-text-secondary); margin: 0; max-width: 720px; }
.hp-hadrian-intel-full .intel-bottom p strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

/* === Security - No Compromises === */
.hp-hadrian-security-full { background: #000; color: var(--color-text-primary); padding: 100px 22px; }
.hp-hadrian-security-full .sec-inner { max-width: 980px; margin: 0 auto; }
.hp-hadrian-security-full .sec-eyebrow { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); letter-spacing: 0; margin: 0 0 12px; }
.hp-hadrian-security-full h2 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.05; color: var(--color-text-primary); margin: 0 0 48px; }
.hp-hadrian-security-full .sec-shot { width: 100%; border-radius: 14px; overflow: hidden; margin-bottom: 40px; background: #0c0c0e; }
.hp-hadrian-security-full .sec-shot img,
.hp-hadrian-security-full .sec-shot svg { display: block; width: 100%; height: auto; }
.hp-hadrian-security-full .sec-lead { font-size: var(--text-2xl); line-height: 1.55; color: #a1a1a6; margin: 0 0 48px; max-width: 820px; }
.hp-hadrian-security-full .sec-lead strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.hp-hadrian-security-full .sec-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hp-hadrian-security-full .sec-feature p { font-size: var(--text-lg); line-height: 1.5; color: #a1a1a6; margin: 0; }
.hp-hadrian-security-full .sec-feature p strong { display: block; color: var(--color-text-primary); font-weight: var(--fw-semibold); font-size: var(--text-xl); margin-bottom: 4px; }

/* === Value Packed — "Say hello to a good buy." (iPhone 17e style) === */
.hp-hadrian-value-packed { background: var(--color-surface); padding: 100px 22px 0; }
.hp-hadrian-value-packed .vp-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.hp-hadrian-value-packed .vp-eyebrow { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: #b073e7; margin: 0 0 14px; letter-spacing: -0.005em; }
.hp-hadrian-value-packed h2 { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.05; color: #b073e7; margin: 0 0 28px; }
.hp-hadrian-value-packed p { font-size: var(--text-xl); line-height: 1.55; color: var(--color-text-primary); margin: 0 auto 40px; max-width: 620px; }
.hp-hadrian-value-packed p strong { font-weight: var(--fw-semibold); }
.hp-hadrian-value-packed .vp-shot { max-width: 340px; margin: 0 auto; }
.hp-hadrian-value-packed .vp-shot img,
.hp-hadrian-value-packed .vp-shot svg { display: block; width: 100%; height: auto; }

/* === Durable Design — "Designed to go the distance." === */
.hp-hadrian-durable-design { background: var(--color-surface); padding: 100px 22px; }
.hp-hadrian-durable-design .dd-inner { max-width: 1100px; margin: 0 auto; }
.hp-hadrian-durable-design .dd-eyebrow { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); text-align: center; margin: 0 0 14px; letter-spacing: -0.005em; }
.hp-hadrian-durable-design h2 { font-size: var(--text-display); font-weight: var(--fw-semibold); letter-spacing: -0.035em; line-height: 1.03; color: #b073e7; text-align: center; margin: 0 0 56px; }
.hp-hadrian-durable-design .dd-shot { max-width: 720px; margin: 0 auto 56px; display: flex; justify-content: center; }
.hp-hadrian-durable-design .dd-shot img { display: block; height: 520px; width: auto; max-width: 100%; }
.hp-hadrian-durable-design .dd-bottom { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: flex-start; max-width: 980px; margin: 0 auto; }
.hp-hadrian-durable-design .dd-copy { font-size: var(--text-xl); line-height: 1.55; color: var(--color-text-primary); margin: 0; }
.hp-hadrian-durable-design .dd-copy strong { font-weight: var(--fw-semibold); }
.hp-hadrian-durable-design .dd-copy sup { font-size: 0.7em; vertical-align: super; color: var(--color-text-secondary); }
.hp-hadrian-durable-design .dd-highlight { text-align: left; }
.hp-hadrian-durable-design .dd-icon { margin-bottom: 12px; }
.hp-hadrian-durable-design .dd-highlight h3 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.15; color: #b073e7; margin: 0 0 8px; }
.hp-hadrian-durable-design .dd-note { font-size: var(--text-base); color: var(--color-text-secondary); }
.hp-hadrian-durable-design .dd-note sup { font-size: 0.85em; vertical-align: super; }

/* === Announcements === */

/* Variation 1 — Thin promo strip */
.hp-announce-strip { background: var(--color-text-primary); color: var(--color-surface); width: 100%; }
.hp-announce-strip-inner { max-width: var(--w-prose); margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: var(--text-md); line-height: 1.3; }
.hp-announce-strip .announce-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 980px; background: #0a84ff; color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em; line-height: 1; flex-shrink: 0; }
.hp-announce-strip .announce-msg { color: #a1a1a6; font-size: var(--text-md); }
.hp-announce-strip .announce-msg strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.hp-announce-strip .announce-link { color: #2997ff; font-size: var(--text-md); text-decoration: none; font-weight: var(--fw-medium); white-space: nowrap; }
.hp-announce-strip .announce-link:hover { text-decoration: underline; }

/* Variation 2 — Launch card with CTAs */
.hp-announce-card { max-width: var(--w-prose); margin: 0 auto; padding: 48px 22px; }
.hp-announce-card-inner { background: linear-gradient(135deg, var(--color-bg) 0%, #e8f2ff 100%); border-radius: 24px; padding: 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; overflow: hidden; }
.hp-announce-card .announce-card-eyebrow { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-accent); letter-spacing: -0.005em; margin-bottom: 12px; }
.hp-announce-card h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.05; color: var(--color-text-primary); margin: 0 0 16px; }
.hp-announce-card p { font-size: var(--text-xl); line-height: 1.5; color: var(--color-text-primary); margin: 0 0 28px; max-width: 480px; }
.hp-announce-card-inner .announce-card-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hp-announce-card .announce-card-btn { padding: 10px 22px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background 0.15s; }
.hp-announce-card .announce-card-btn.primary { background: var(--color-accent); color: var(--color-surface); }
.hp-announce-card .announce-card-btn.primary:hover { background: var(--color-accent-hover); }
.hp-announce-card .announce-card-btn-link { color: var(--color-link); font-size: var(--text-lg); text-decoration: none; }
.hp-announce-card .announce-card-btn-link:hover { text-decoration: underline; }
.hp-announce-card .announce-card-visual { display: flex; justify-content: center; align-items: center; }
.hp-announce-card .announce-card-visual svg { width: 100%; max-width: 240px; height: auto; }

/* Variation 3 — Dismissible inline pill */
.hp-announce-notice-wrap { padding: 32px 22px; display: flex; justify-content: center; }
.hp-announce-notice { display: inline-flex; align-items: center; gap: 12px; background: var(--color-surface-secondary); border: 1px solid var(--color-border); border-radius: 980px; padding: 6px 6px 6px 16px; max-width: 100%; flex-wrap: wrap; }
.hp-announce-notice .announce-tag.compact { background: #0a84ff; color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: 3px 10px; border-radius: 980px; line-height: 1; flex-shrink: 0; }
.hp-announce-notice .announce-msg { font-size: var(--text-md); color: var(--color-text-primary); }
.hp-announce-notice .announce-msg strong { font-weight: var(--fw-semibold); }
.hp-announce-notice .announce-notice-btn { background: var(--color-accent); color: var(--color-surface); font-size: var(--text-base); font-weight: var(--fw-medium); padding: 7px 16px; border-radius: 980px; text-decoration: none; transition: background 0.15s; white-space: nowrap; }
.hp-announce-notice .announce-notice-btn:hover { background: var(--color-accent-hover); }
.hp-announce-notice .announce-notice-close { background: transparent; border: 0; color: var(--color-text-secondary); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, color 0.15s; }
.hp-announce-notice .announce-notice-close:hover { background: var(--sidebar-item-active); color: var(--color-text-primary); }
.hp-announce-notice .announce-notice-close svg { width: 14px; height: 14px; }

/* Variation 4 — Card Grid (WHMCS news feed) */
.hp-announce-grid { max-width: var(--w-prose); margin: 0 auto; padding: 64px 22px; }
.hp-announce-grid-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.hp-announce-grid-header h2 { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 6px; color: var(--color-text-primary); }
.hp-announce-grid-header p { font-size: var(--text-lg); color: var(--color-text-secondary); margin: 0; }
.hp-announce-grid .announce-view-all { color: var(--color-link); font-size: var(--text-md); text-decoration: none; font-weight: var(--fw-medium); white-space: nowrap; }
.hp-announce-grid .announce-view-all:hover { text-decoration: underline; }
.hp-announce-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Column count follows the announcement count (Lagom does the same: 1 item gets
   a full-width row, 2 get halves). Without this a lone announcement sat at a
   third of the width with dead space beside it. */
.hp-announce-cards.count-1 { grid-template-columns: 1fr; }
.hp-announce-cards.count-2 { grid-template-columns: repeat(2, 1fr); }
.hp-announce-item-card { text-decoration: none; color: inherit; }
.hp-announce-item-card { background: var(--color-surface-secondary); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: background 0.15s; }
.hp-announce-item-card:hover { background: #ebebf0; }
.hp-announce-item-card h3 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.25; margin: 0; color: var(--color-text-primary); }
.hp-announce-item-card p { font-size: var(--text-md); line-height: 1.5; color: var(--color-text-secondary); margin: 0; flex: 1; }
.hp-announce-item-card .announce-cat-wrap { display: flex; }
.hp-announce-item-card .announce-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; font-size: var(--text-base); }
.hp-announce-item-card .announce-foot time { color: var(--color-text-secondary); }
.hp-announce-item-card .announce-foot .announce-read { color: var(--color-link); text-decoration: none; font-weight: var(--fw-medium); }
.hp-announce-item-card .announce-foot .announce-read:hover { text-decoration: underline; }

/* Category tag — shared styles for grid + list */
.announce-cat { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em; line-height: 1.4; background: rgba(0,113,227,0.1); color: var(--color-link); }
.announce-cat.new { background: rgba(48,209,88,0.12); color: #1a7f4e; }
.announce-cat.maintenance { background: rgba(255,159,10,0.12); color: #b76500; }
.announce-cat.security { background: var(--color-red-bg); color: #c32b22; }
.announce-cat.product { background: rgba(175,130,255,0.14); color: #7a4ccf; }

/* Variation 5 — Stacked list with date rail */
.hp-announce-list { max-width: 840px; margin: 0 auto; padding: 64px 22px; }
.hp-announce-list-header { text-align: center; margin-bottom: 40px; }
.hp-announce-list-header h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.025em; margin: 0 0 8px; color: var(--color-text-primary); }
.hp-announce-list-header p { font-size: var(--text-lg); color: var(--color-text-secondary); margin: 0; }
.hp-announce-list-items { display: flex; flex-direction: column; gap: 4px; }
.hp-announce-item { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 24px 20px; border-radius: 14px; transition: background 0.15s; }
.hp-announce-item:hover { background: var(--color-surface-secondary); }
.hp-announce-item + .hp-announce-item { border-top: 1px solid var(--color-border); }
.hp-announce-item:hover + .hp-announce-item,
.hp-announce-item:hover { border-top-color: transparent; }
.hp-announce-item .announce-item-date { text-align: center; padding-top: 2px; }
.hp-announce-item .announce-item-date .day { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--color-text-primary); line-height: 1; }
.hp-announce-item .announce-item-date .month { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.hp-announce-item .announce-item-meta { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: 8px; flex-wrap: wrap; }
.hp-announce-item .announce-dot { color: #c7c7cc; }
.hp-announce-item h3 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 6px; color: var(--color-text-primary); }
.hp-announce-item p { font-size: var(--text-md); line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 10px; }
.hp-announce-item .announce-read { color: var(--color-link); font-size: var(--text-base); text-decoration: none; font-weight: var(--fw-medium); }
.hp-announce-item .announce-read:hover { text-decoration: underline; }
.hp-announce-list .announce-view-all-btn { display: block; width: fit-content; margin: 40px auto 0; padding: 10px 22px; border-radius: 980px; background: var(--sidebar-item-active); color: var(--color-text-primary); font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; transition: background 0.15s; }
.hp-announce-list .announce-view-all-btn:hover { background: rgba(0,0,0,0.1); }

/* Dark mode for new list + grid */
[data-theme="dark"] .hp-announce-grid-header h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-announce-item-card { background: #2a2a2c; }
[data-theme="dark"] .hp-announce-item-card:hover { background: #3a3a3c; }
[data-theme="dark"] .hp-announce-item-card h3 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-announce-list-header h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-announce-item:hover { background: #2a2a2c; }
[data-theme="dark"] .hp-announce-item + .hp-announce-item { border-color: #3a3a3c; }
[data-theme="dark"] .hp-announce-item .announce-item-date .day,
[data-theme="dark"] .hp-announce-item h3 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-announce-list .announce-view-all-btn { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="dark"] .hp-announce-list .announce-view-all-btn:hover { background: rgba(255,255,255,0.14); }
[data-theme="dark"] .announce-cat.new { background: rgba(48,209,88,0.2); color: #7dd3a8; }
[data-theme="dark"] .announce-cat.maintenance { background: rgba(255,159,10,0.2); color: #ffc078; }
[data-theme="dark"] .announce-cat.security { background: rgba(255,59,48,0.18); color: #ff9a93; }
[data-theme="dark"] .announce-cat.product { background: rgba(175,130,255,0.22); color: #cfb3ff; }

/* Responsive */
@media (max-width: 820px) {
    /* The .count-N modifiers above are more specific than the bare selector, so
       they must be repeated here or a 2-up would stay 2-up on phones. */
    .hp-announce-cards,
    .hp-announce-cards.count-1,
    .hp-announce-cards.count-2 { grid-template-columns: 1fr; }
    .hp-announce-item { grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 12px; }
    .hp-announce-item .announce-item-date .day { font-size: var(--text-h4); }
    .hp-announce-list-header h2 { font-size: var(--text-h4); }
    .hp-announce-grid-header h2 { font-size: var(--text-h4); }
}

/* Dark mode (announce card + notice) */
[data-theme="dark"] .hp-announce-card-inner { background: linear-gradient(135deg, #1c1c1e 0%, #1a2a4a 100%); }
[data-theme="dark"] .hp-announce-card h2,
[data-theme="dark"] .hp-announce-card p { color: var(--color-text-primary); }
[data-theme="dark"] .hp-announce-card .announce-card-eyebrow { color: #0a84ff; }
[data-theme="dark"] .hp-announce-card .announce-card-btn-link { color: #2997ff; }
[data-theme="dark"] .hp-announce-notice { background: #2a2a2c; border-color: #3a3a3c; }
[data-theme="dark"] .hp-announce-notice .announce-msg { color: var(--color-text-primary); }
[data-theme="dark"] .hp-announce-notice .announce-notice-close { color: #a1a1a6; }
[data-theme="dark"] .hp-announce-notice .announce-notice-close:hover { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }

@media (max-width: 820px) {
    .hp-announce-card-inner { grid-template-columns: 1fr; padding: 40px 32px; gap: 24px; }
    .hp-announce-card h2 { font-size: var(--text-h3); }
    .hp-announce-card .announce-card-visual { order: -1; }
    .hp-announce-card .announce-card-visual svg { max-width: 180px; }
    .hp-announce-notice { flex-direction: column; padding: 12px 16px 12px 16px; gap: 8px; text-align: center; border-radius: 18px; }
    .hp-announce-notice .announce-notice-close { position: absolute; top: 8px; right: 8px; }
}

/* === Worth the Upgrade — Compare Grid (iPhone Pro style) === */
.hp-hadrian-upgrade-compare { background: #000; padding: 60px 22px; }
.hp-upgrade-card { max-width: 1080px; margin: 0 auto; background: var(--color-text-primary); border-radius: 28px; padding: 44px 44px 44px; color: var(--color-surface); }
.hp-upgrade-header { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; margin-bottom: 36px; align-items: start; }
.hp-upgrade-head-text h2 { font-size: var(--text-h2); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.06; margin: 0 0 14px; color: var(--color-text-primary); }
.hp-upgrade-sub { font-size: var(--text-lg); color: #a1a1a6; margin: 0; line-height: 1.4; }
.hp-upgrade-sub strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.hp-upgrade-select-wrap { margin-top: 6px; }
.hp-upgrade-select-label { display: block; font-size: var(--text-base); color: #a1a1a6; line-height: 1.35; margin-bottom: 10px; }
.hp-upgrade-select { position: relative; background: #2a2a2c; border-radius: 10px; border: 1px solid #3a3a3c; }
.hp-upgrade-select select { width: 100%; background: transparent; color: var(--color-text-primary); padding: 11px 36px 11px 14px; border: 0; outline: none; font: inherit; font-size: var(--text-md); appearance: none; -webkit-appearance: none; cursor: pointer; color-scheme: dark; }
.hp-upgrade-select select option { background: #2a2a2c; color: var(--color-text-primary); }
.hp-upgrade-select-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #a1a1a6; font-size: var(--text-xs); pointer-events: none; }
.hp-upgrade-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hp-upgrade-tile { background: #2a2a2c; border-radius: 18px; padding: 26px 20px 24px; min-height: 240px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; color: var(--color-text-primary); }
.hp-upgrade-tile .tile-caption { font-size: var(--text-md); color: #a1a1a6; line-height: 1.35; max-width: 220px; }
.hp-upgrade-tile .tile-stat { font-size: var(--text-h4); font-weight: var(--fw-semibold); color: var(--color-text-primary); line-height: 1.1; display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.02em; flex-wrap: wrap; justify-content: center; }
.hp-upgrade-tile .tile-stat.large { font-size: var(--text-h2); line-height: 1; }
.hp-upgrade-tile .tile-stat .stat-badge { background: #34c759; color: #0a2e14; font-size: var(--text-md); padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: var(--fw-bold); line-height: 1; }
.hp-upgrade-tile .tile-foot { font-size: var(--text-base); color: #a1a1a6; line-height: 1.45; max-width: 240px; }
.hp-upgrade-tile .tile-visual { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; }
.hp-upgrade-tile .tile-visual img,
.hp-upgrade-tile .tile-visual svg { max-width: 140px; max-height: 120px; filter: brightness(0.95); }
.hp-upgrade-tile .tile-visual img { opacity: 0.85; }
.hp-upgrade-migrate { text-align: center; margin-top: 40px; padding-top: 36px; border-top: 1px solid #3a3a3c; }
.hp-upgrade-migrate .migrate-logo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xl); font-weight: var(--fw-medium); color: var(--color-text-primary); margin-bottom: 10px; }
.hp-upgrade-migrate .migrate-logo svg { width: 14px; height: 16px; }
.hp-upgrade-migrate p { font-size: var(--text-base); color: #a1a1a6; margin: 0 0 8px; }
.hp-upgrade-migrate .migrate-link { font-size: var(--text-md); color: #0a84ff; text-decoration: none; }
.hp-upgrade-migrate .migrate-link:hover { text-decoration: underline; }

/* === Dark mode for new blocks === */
[data-theme="dark"] .hp-hero-ticker h1 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-ticker-track { color: var(--color-text-primary); }
[data-theme="dark"] .hp-pricing-finance h2,
[data-theme="dark"] .hp-pricing-segmented h2,
[data-theme="dark"] .hp-feature-bignum h2,
[data-theme="dark"] .hp-feature-bignum .hp-bignum-item .num,
[data-theme="dark"] .hp-feature-bignum .hp-bignum-item h4,
[data-theme="dark"] .hp-locations-connect h2,
[data-theme="dark"] .hp-testi-video h2,
[data-theme="dark"] .hp-testi-reviews .rating-num,
[data-theme="dark"] .hp-testi-reviews .rev-src .src-name,
[data-theme="dark"] .hp-faq-tabs-section h2,
[data-theme="dark"] .hp-faq-contact h2,
[data-theme="dark"] .hp-faq-contact-card h4,
[data-theme="dark"] .hp-trust-badges h2,
[data-theme="dark"] .hp-badge .name,
[data-theme="dark"] .hp-cta-newsletter h2,
[data-theme="dark"] .hp-eco-text h2,
[data-theme="dark"] .hp-compare-glance h2,
[data-theme="dark"] .hp-glance-card .prod-name,
[data-theme="dark"] .hp-glance-specs .spec-val { color: var(--color-text-primary); }
[data-theme="dark"] .hp-finance-card,
[data-theme="dark"] .hp-badge,
[data-theme="dark"] .hp-faq-contact-card { background: #2a2a2c; }
[data-theme="dark"] .hp-finance-opt { background: #1c1c1e; }
[data-theme="dark"] .hp-finance-opt .price,
[data-theme="dark"] .hp-glance-card .price-line { color: var(--color-text-primary); }
[data-theme="dark"] .hp-segmented-bar { background: #1c1c1e; border-color: #3a3a3c; }
[data-theme="dark"] .hp-seg-col { border-color: #3a3a3c; }
[data-theme="dark"] .hp-seg-col .price { color: var(--color-text-primary); }
[data-theme="dark"] .hp-seg-col .seg-features { border-color: #3a3a3c; }
[data-theme="dark"] .hp-seg-col .seg-features li { color: var(--color-text-primary); }
[data-theme="dark"] .hp-seg-col .buy { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="dark"] .hp-seg-col .buy:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .hp-seg-col.highlight { background: linear-gradient(180deg, rgba(0,113,227,0.15), transparent); }
[data-theme="dark"] .hp-feature-marquee { background: #1c1c1e; }
[data-theme="dark"] .hp-marq-tag { background: #2a2a2c; border-color: #3a3a3c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-bignum-item { border-color: #3a3a3c; }
[data-theme="dark"] .hp-locations-connect { background: #1c1c1e; }
[data-theme="dark"] .hp-faq-cat-tabs { background: #2a2a2c; }
[data-theme="dark"] .hp-faq-cat.active { background: #3a3a3c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-trust-awards { background: #1c1c1e; }
[data-theme="dark"] .hp-newsletter-form input { background: #2a2a2c; border-color: #3a3a3c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-glance-card { background: #2a2a2c; border-color: #3a3a3c; }
[data-theme="dark"] .hp-glance-specs li { border-color: #3a3a3c; }
[data-theme="dark"] .hp-tiles-magazine .mag-big { background: linear-gradient(180deg, #2a2a2c, #1c1c1e); }
[data-theme="dark"] .hp-tiles-magazine .mag-big h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-mag-small.mag-light { background: #2a2a2c; border-color: #3a3a3c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-chip-copy .chip-lead,
[data-theme="dark"] .hp-chip-copy .chip-meta strong { color: var(--color-text-primary); }
[data-theme="dark"] .hp-chip-copy .chip-meta { color: #a1a1a6; }
[data-theme="dark"] .hp-chip-copy .chip-badge { background: #1f3a2a; color: #7dd3a8; }
[data-theme="dark"] .hp-chip-copy .chip-badge.pro { background: #1e2a4a; color: #93c5fd; }
[data-theme="dark"] .hp-hadrian-intel-full { background: #1c1c1e; }
[data-theme="dark"] .hp-hadrian-intel-full .intel-eyebrow,
[data-theme="dark"] .hp-hadrian-intel-full h2,
[data-theme="dark"] .hp-hadrian-intel-full .intel-bottom h3,
[data-theme="dark"] .hp-hadrian-intel-full .intel-top p strong,
[data-theme="dark"] .hp-hadrian-intel-full .intel-bottom p strong { color: var(--color-text-primary); }
[data-theme="dark"] .hp-hadrian-intel-full .intel-top p,
[data-theme="dark"] .hp-hadrian-intel-full .intel-bottom p { color: #a1a1a6; }
[data-theme="dark"] .hp-hadrian-intel-full .intel-link,
[data-theme="dark"] .hp-hadrian-intel-full .inline-link { color: #0a84ff; }
[data-theme="dark"] .hp-hadrian-intel-full .intel-divider { background: #3a3a3c; }
[data-theme="dark"] .hp-hadrian-value-packed { background: #000; }
[data-theme="dark"] .hp-hadrian-value-packed p { color: var(--color-text-primary); }
[data-theme="dark"] .hp-hadrian-durable-design { background: #000; }
[data-theme="dark"] .hp-hadrian-durable-design .dd-eyebrow,
[data-theme="dark"] .hp-hadrian-durable-design .dd-copy { color: var(--color-text-primary); }
[data-theme="dark"] .hp-hadrian-durable-design .dd-copy sup,
[data-theme="dark"] .hp-hadrian-durable-design .dd-note { color: #a1a1a6; }

/* Responsive */
@media (max-width: 820px) {
    .hp-hero-ticker h1 { font-size: var(--text-h1); }
    .hp-ticker-track { font-size: var(--text-3xl); gap: 24px; }
    .hp-hero-bleed h1 { font-size: var(--text-h1); }
    .hp-finance-options { grid-template-columns: 1fr; }
    /* count-N above is more specific, so repeat it here or a multi-column bar
       stays multi-column on phones. */
    .hp-segmented-bar,
    .hp-segmented-bar.count-1,
    .hp-segmented-bar.count-2,
    .hp-segmented-bar.count-3,
    .hp-segmented-bar.count-4 { grid-template-columns: 1fr; }
    .hp-seg-col { border-right: none; border-bottom: 1px solid var(--color-border); }
    .hp-seg-col:last-child { border-bottom: none; }
    .hp-bignum-grid { grid-template-columns: 1fr; gap: 28px; }
    .hp-bignum-item .num { font-size: var(--text-display); }
    .hp-testi-vid-card { grid-template-columns: 1fr; }
    .hp-testi-vid-card .vid-thumb { height: 240px; }
    .hp-testi-vid-card .vid-text { padding: 32px 28px; }
    .hp-faq-contact { grid-template-columns: 1fr; gap: 32px; }
    .hp-faq-contact-card { position: static; }
    .hp-badges-grid { grid-template-columns: repeat(3, 1fr); }
    .hp-newsletter-form { flex-direction: column; }
    .hp-eco-section { grid-template-columns: 1fr; gap: 32px; }
    .hp-eco-visual { max-width: 280px; margin: 0 auto; }
    .hp-glance-grid { grid-template-columns: 1fr; }
    .hp-tiles-hero-pair { grid-template-columns: 1fr; }
    .hp-tiles-magazine { grid-template-columns: 1fr; }
    .hp-mag-small-grid { grid-template-columns: 1fr; }
    .hp-hero-tile h2 { font-size: var(--text-h3); }
    .hp-hero-tile { min-height: 340px; padding: 40px 28px; }
    .hp-tiles-magazine .mag-big h2 { font-size: var(--text-h2); }
    .hp-tiles-magazine .mag-big { min-height: 360px; padding: 40px 28px; }
    .hp-silicon-hero h1 { font-size: var(--text-h1); letter-spacing: -0.025em; }
    .hp-silicon-hero { padding: 72px 22px; }
    .hp-silicon-hero .lead { font-size: var(--text-xl); }
    .hp-duo-feature { grid-template-columns: 1fr; }
    .hp-duo-card { min-height: 400px; }
    .hp-duo-card .duo-visual--left,
    .hp-duo-card .duo-visual--right { margin-left: 0; margin-right: 0; justify-content: center; }
    .hp-duo-card .duo-visual--left img,
    .hp-duo-card .duo-visual--right img { width: 100%; transform: none; }
    .hp-chip-row, .hp-chip-row.reverse { grid-template-columns: 1fr; gap: 24px; }
    .hp-chip-row.reverse .hp-chip-visual { order: -1; }
    .hp-intel-duo { grid-template-columns: 1fr; }
    .hp-intel-big { padding: 36px 32px 0; min-height: 440px; }
    .hp-intel-big h2 { font-size: var(--text-h4); }
    .hp-intel-big .intel-visual { margin: 24px -32px 0; }
    .hp-intel-small { padding: 40px 28px; min-height: 360px; }
    .hp-hadrian-intel-full { padding: 60px 22px; }
    .hp-hadrian-intel-full h2 { font-size: var(--text-h3); }
    .hp-hadrian-intel-full .intel-top { padding-bottom: 48px; }
    .hp-hadrian-intel-full .intel-bottom { padding-top: 48px; }
    .hp-hadrian-intel-full .intel-bottom h3 { font-size: var(--text-h4); }
    .hp-hadrian-intel-full .intel-eyebrow { font-size: var(--text-3xl); }
    .hp-hadrian-intel-full .intel-top p { font-size: var(--text-xl); }
    .hp-hadrian-security-full { padding: 60px 22px; }
    .hp-hadrian-security-full h2 { font-size: var(--text-h1); margin-bottom: 32px; }
    .hp-hadrian-security-full .sec-features { grid-template-columns: 1fr; gap: 24px; }
    .hp-hadrian-security-full .sec-lead { font-size: var(--text-xl); margin-bottom: 36px; }
    .hp-pricing-compare-table { padding: 48px 16px; }
    .hp-pricing-compare-table .cmp-header h2 { font-size: var(--text-h3); }
    .hp-pricing-compare-table .cmp-plan-price { font-size: var(--text-3xl); }
    .hp-pricing-compare-table thead th { padding: 24px 12px 20px; }
    .hp-pricing-compare-table tbody th[scope="row"],
    .hp-pricing-compare-table tbody td { padding: 12px 10px; font-size: var(--text-base); }
    .hp-hadrian-value-packed { padding: 60px 22px 0; }
    .hp-hadrian-value-packed h2 { font-size: var(--text-h3); }
    .hp-hadrian-value-packed .vp-shot { max-width: 240px; }
    .hp-hadrian-durable-design { padding: 60px 22px; }
    .hp-hadrian-durable-design h2 { font-size: var(--text-h1); }
    .hp-hadrian-durable-design .dd-bottom { grid-template-columns: 1fr; gap: 32px; }
    .hp-hadrian-durable-design .dd-highlight h3 { font-size: var(--text-3xl); }
    .hp-upgrade-card { padding: 32px 24px 32px; }
    .hp-upgrade-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
    .hp-upgrade-head-text h2 { font-size: var(--text-h4); }
    .hp-upgrade-tiles { grid-template-columns: 1fr 1fr; }
    .hp-upgrade-tile { min-height: 200px; }
    .hp-upgrade-tile .tile-stat { font-size: var(--text-3xl); }
    .hp-upgrade-tile .tile-stat.large { font-size: var(--text-h3); }
}
@media (max-width: 520px) {
    .hp-upgrade-tiles { grid-template-columns: 1fr; }
}

/* =============================================
   DOMAIN SEARCH / REGISTER PAGE
   ============================================= */

/* Hero + search */
.ds-hero { padding: 72px 22px 48px; text-align: center; background: var(--color-bg); }
.ds-hero-inner { max-width: 720px; margin: 0 auto; }
.ds-hero h1 { font-size: var(--text-display-sm); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.05; color: var(--color-text-primary); margin: 0 0 14px; }
.ds-hero .ds-hero-sub { font-size: var(--text-2xl); color: var(--color-text-secondary); margin: 0 0 36px; line-height: 1.4; }

.ds-search-form { width: 100%; }
.ds-search-box { position: relative; display: flex; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 6px 6px 6px 18px; gap: 6px; box-shadow: 0 12px 32px var(--sidebar-item-active); transition: box-shadow 0.2s, border-color 0.2s; }
.ds-search-box:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.12), 0 12px 32px var(--sidebar-item-active); }
.ds-search-icon { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }
.ds-search-input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--text-xl); color: var(--color-text-primary); padding: 14px 0; min-width: 0; }
.ds-search-input::placeholder { color: #a1a1a6; }
.ds-filters-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 10px 14px; border-radius: 10px; color: var(--color-text-secondary); font: inherit; font-size: var(--text-md); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.ds-filters-btn:hover { background: var(--color-border-card); color: var(--color-text-primary); }
.ds-filters-btn svg { width: 12px; height: 12px; }
.ds-generate-btn { background: var(--color-accent); color: var(--color-surface); border: 0; border-radius: 12px; padding: 12px 24px; font: inherit; font-size: var(--text-md); font-weight: var(--fw-medium); cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.ds-generate-btn:hover { background: var(--color-accent-hover); }

.ds-mode-tabs { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 980px; padding: 4px; margin-top: 24px; gap: 2px; }
.ds-mode-tab { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 8px 18px; border-radius: 980px; font: inherit; font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; }
.ds-mode-tab:hover { color: var(--color-text-primary); }
.ds-mode-tab.active { background: var(--color-accent); color: var(--color-surface); box-shadow: 0 1px 3px rgba(0,113,227,0.3); }
.ds-mode-tab svg { width: 14px; height: 14px; }

/* Sections */
.ds-section { max-width: 980px; margin: 0 auto; padding: 32px 22px; }
.ds-section-head { margin-bottom: 20px; }
.ds-section-head h2 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 4px; color: var(--color-text-primary); }
.ds-section-head p { font-size: var(--text-md); color: var(--color-text-secondary); margin: 0; }

/* Primary result card */
.ds-result-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; padding: 24px 28px; box-shadow: 0 4px 16px var(--color-border-card); flex-wrap: wrap; }
.ds-result-card.available { border-color: rgba(48,209,88,0.4); background: linear-gradient(180deg, #fbfef9 0%, var(--color-surface) 100%); }
.ds-result-left { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 280px; }
.ds-check-badge { width: 44px; height: 44px; border-radius: 50%; background: rgba(48,209,88,0.12); color: #1a7f4e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-check-badge svg { width: 22px; height: 22px; }
.ds-result-name { font-size: var(--text-3xl); color: var(--color-text-secondary); letter-spacing: -0.01em; }
.ds-result-name strong { color: #1a7f4e; font-weight: var(--fw-semibold); }
.ds-available-text { font-size: var(--text-h6); }
.ds-result-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ds-result-price { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.ds-result-price .per { font-size: var(--text-md); color: var(--color-text-secondary); font-weight: var(--fw-normal); }
.ds-result-dot { color: #c7c7cc; }
.ds-result-note { font-size: var(--text-base); color: var(--color-text-secondary); }

.ds-add-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 980px; font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; border: 1px solid transparent; }
.ds-add-btn.primary { background: var(--color-accent); color: var(--color-surface); }
.ds-add-btn.primary:hover { background: var(--color-accent-hover); }
.ds-add-btn.primary.large { padding: 14px 30px; font-size: var(--text-lg); }
.ds-add-btn.outline { background: var(--color-accent-light); color: var(--color-accent); }
.ds-add-btn.outline:hover { background: rgba(0,113,227,0.14); }

/* Popular TLDs grid */
.ds-popular-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ds-tld-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 170px; transition: border-color 0.15s, transform 0.15s; }
.ds-tld-card:hover:not(:has(.disabled)) { border-color: #c7c7cc; transform: translateY(-1px); }
.ds-tld-tag { position: absolute; top: 14px; right: 14px; background: rgba(48,209,88,0.14); color: #1a7f4e; font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: 3px 10px; border-radius: 980px; line-height: 1.3; }
.ds-tld-name { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--color-text-primary); letter-spacing: -0.02em; line-height: 1; }
.ds-tld-price { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-top: auto; }
.ds-tld-price span { font-size: var(--text-base); color: var(--color-text-secondary); font-weight: var(--fw-normal); }
.ds-tld-status { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: auto; }
.ds-tld-status.unavailable { color: #c7c7cc; }
.ds-tld-btn { display: block; width: 100%; text-align: center; padding: 10px; border-radius: 10px; background: var(--color-accent-light); color: var(--color-accent); font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.ds-tld-btn:hover { background: rgba(0,113,227,0.14); }
.ds-tld-btn.disabled { background: var(--color-surface-secondary); color: #c7c7cc; cursor: not-allowed; }
.ds-tld-btn.disabled:hover { background: var(--color-surface-secondary); }

/* Suggested domains list */
.ds-suggested-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; }
.ds-sug-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--color-border-light); transition: background 0.12s; }
.ds-sug-row:last-child { border-bottom: 0; }
.ds-sug-row:hover { background: var(--color-bg); }
.ds-sug-name { font-size: var(--text-xl); color: var(--color-text-secondary); font-weight: var(--fw-medium); display: flex; align-items: center; gap: 10px; letter-spacing: -0.005em; flex: 1; min-width: 0; }
.ds-sug-name .tld { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.ds-sug-chip { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: 3px 10px; border-radius: 980px; line-height: 1.3; }
.ds-sug-chip.sale { background: rgba(175,130,255,0.14); color: #7a4ccf; }
.ds-sug-chip.new { background: rgba(48,209,88,0.14); color: #1a7f4e; }
.ds-sug-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ds-sug-term { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 28px 7px 12px; font: inherit; font-size: var(--text-base); color: var(--color-text-primary); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; min-width: 140px; }
.ds-sug-term:hover { border-color: #c7c7cc; }
.ds-sug-term:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }

.ds-more-wrap { text-align: center; margin-top: 28px; }
.ds-more-link { color: var(--color-link); font-size: var(--text-lg); font-weight: var(--fw-medium); text-decoration: none; }
.ds-more-link:hover { text-decoration: underline; }

/* Transfer CTA */
.ds-transfer-cta { max-width: 980px; margin: 40px auto 80px; }
.ds-transfer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, #eaf2ff 0%, #dbe9fc 100%); border-radius: 24px; padding: 40px 48px; flex-wrap: wrap; }
.ds-transfer-eyebrow { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-accent); margin-bottom: 6px; }
.ds-transfer-inner h2 { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0 0 8px; color: var(--color-text-primary); line-height: 1.1; }
.ds-transfer-inner p { font-size: var(--text-lg); color: var(--color-text-primary); opacity: 0.75; margin: 0; max-width: 460px; }

/* ============ Dark mode ============ */
[data-theme="dark"] .ds-hero { background: #000; }
[data-theme="dark"] .ds-hero h1 { color: var(--color-text-primary); }
[data-theme="dark"] .ds-hero .ds-hero-sub { color: #a1a1a6; }
[data-theme="dark"] .ds-search-box { background: #1c1c1e; border-color: #3a3a3c; color: var(--color-text-primary); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
[data-theme="dark"] .ds-search-input { color: var(--color-text-primary); }
[data-theme="dark"] .ds-search-input::placeholder { color: var(--color-text-secondary); }
[data-theme="dark"] .ds-search-icon { color: #2997ff; }
[data-theme="dark"] .ds-filters-btn { color: #a1a1a6; }
[data-theme="dark"] .ds-filters-btn:hover { background: rgba(255,255,255,0.08); color: var(--color-text-primary); }
[data-theme="dark"] .ds-mode-tabs { background: #1c1c1e; border-color: #3a3a3c; }
[data-theme="dark"] .ds-mode-tab { color: #a1a1a6; }
[data-theme="dark"] .ds-mode-tab:hover { color: var(--color-text-primary); }
[data-theme="dark"] .ds-section-head h2,
[data-theme="dark"] .ds-transfer-inner h2 { color: var(--color-text-primary); }
[data-theme="dark"] .ds-result-card { background: #1c1c1e; border-color: #3a3a3c; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
[data-theme="dark"] .ds-result-card.available { background: linear-gradient(180deg, #0f1c11 0%, #1c1c1e 100%); border-color: rgba(48,209,88,0.3); }
[data-theme="dark"] .ds-result-name { color: #a1a1a6; }
[data-theme="dark"] .ds-result-name strong { color: #4cd97f; }
[data-theme="dark"] .ds-check-badge { background: rgba(48,209,88,0.2); color: #4cd97f; }
[data-theme="dark"] .ds-result-price { color: var(--color-text-primary); }
[data-theme="dark"] .ds-tld-card { background: #1c1c1e; border-color: #3a3a3c; }
[data-theme="dark"] .ds-tld-name { color: var(--color-text-primary); }
[data-theme="dark"] .ds-tld-price { color: var(--color-text-primary); }
[data-theme="dark"] .ds-tld-btn { background: rgba(41,151,255,0.18); color: #2997ff; }
[data-theme="dark"] .ds-tld-btn:hover { background: rgba(41,151,255,0.28); }
[data-theme="dark"] .ds-tld-btn.disabled { background: #2a2a2c; color: #48484a; }
[data-theme="dark"] .ds-tld-btn.disabled:hover { background: #2a2a2c; }
[data-theme="dark"] .ds-suggested-list { background: #1c1c1e; border-color: #3a3a3c; }
[data-theme="dark"] .ds-sug-row { border-bottom-color: #2a2a2c; }
[data-theme="dark"] .ds-sug-row:hover { background: #2a2a2c; }
[data-theme="dark"] .ds-sug-name { color: #a1a1a6; }
[data-theme="dark"] .ds-sug-name .tld { color: var(--color-text-primary); }
[data-theme="dark"] .ds-sug-term { background: #2a2a2c; border-color: #3a3a3c; color: var(--color-text-primary); color-scheme: dark; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
[data-theme="dark"] .ds-sug-term option { background: #2a2a2c; color: var(--color-text-primary); }
[data-theme="dark"] .ds-add-btn.outline { background: rgba(41,151,255,0.18); color: #2997ff; }
[data-theme="dark"] .ds-add-btn.outline:hover { background: rgba(41,151,255,0.28); }
[data-theme="dark"] .ds-more-link { color: #2997ff; }
[data-theme="dark"] .ds-sug-chip.sale { background: rgba(175,130,255,0.22); color: #cfb3ff; }
[data-theme="dark"] .ds-sug-chip.new { background: rgba(48,209,88,0.2); color: #7dd3a8; }
[data-theme="dark"] .ds-tld-tag { background: rgba(48,209,88,0.2); color: #7dd3a8; }
[data-theme="dark"] .ds-transfer-inner { background: linear-gradient(135deg, #0c1e3b 0%, #1a2a4a 100%); }
[data-theme="dark"] .ds-transfer-inner p { color: #a1a1a6; opacity: 1; }
[data-theme="dark"] .ds-transfer-eyebrow { color: #2997ff; }

/* Responsive */
@media (max-width: 820px) {
    .ds-hero { padding: 48px 22px 32px; }
    .ds-hero h1 { font-size: var(--text-h2); }
    .ds-hero .ds-hero-sub { font-size: var(--text-xl); }
    .ds-search-box { padding: 4px 4px 4px 14px; flex-wrap: wrap; }
    .ds-filters-btn { display: none; }
    .ds-popular-grid { grid-template-columns: repeat(2, 1fr); }
    .ds-sug-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ds-sug-actions { width: 100%; justify-content: space-between; }
    .ds-result-card { flex-direction: column; align-items: stretch; text-align: center; }
    .ds-result-left { flex-direction: column; }
    .ds-transfer-inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
    .ds-transfer-inner h2 { font-size: var(--text-h4); }
}
@media (max-width: 520px) {
    .ds-popular-grid { grid-template-columns: 1fr; }
}

/* =============================================
   BLOG TILES (story cards w/ illustrations)
   ============================================= */
.hp-blog-tiles { max-width: var(--w-wide); margin: 0 auto; padding: 80px 22px; background: var(--color-bg); }
.hp-blog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.hp-blog-head h2 { font-size: var(--text-h1); font-weight: var(--fw-semibold); letter-spacing: -0.025em; line-height: 1.05; color: var(--color-text-primary); margin: 0 0 8px; }
.hp-blog-head p { font-size: var(--text-xl); color: var(--color-text-secondary); margin: 0; }
.hp-blog-head .hp-blog-all-link { color: var(--color-link); font-size: var(--text-lg); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
.hp-blog-head .hp-blog-all-link:hover { text-decoration: underline; }

.hp-blog-inner { display: flex; flex-direction: column; gap: 14px; }
.hp-blog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp-blog-row.three { grid-template-columns: repeat(3, 1fr); }

.hp-blog-card { position: relative; border-radius: 22px; padding: 36px 36px 32px; overflow: hidden; display: flex; flex-direction: column; min-height: 460px; }
.hp-blog-card.compact { min-height: 420px; padding: 28px; }
.hp-blog-card.hp-tile-light { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.hp-blog-card.hp-tile-dark { background: var(--color-text-primary); color: var(--color-surface); }
.hp-blog-card.hp-tile-sky { background: linear-gradient(160deg, #eaf2ff 0%, #cfe0f7 100%); color: var(--color-text-primary); }
.hp-blog-card.hp-tile-cream { background: #faf7f2; color: var(--color-text-primary); }
.hp-blog-card.hp-tile-plum { background: #1a1735; color: var(--color-text-primary); }

.hp-blog-meta { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: 12px; flex-wrap: wrap; }
.hp-blog-card.hp-tile-dark .hp-blog-meta,
.hp-blog-card.hp-tile-plum .hp-blog-meta { color: rgba(255,255,255,0.65); }
.hp-blog-meta .dot { color: currentColor; opacity: 0.5; }

.hp-blog-cat { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 980px; background: rgba(0,113,227,0.1); color: var(--color-link); }
.hp-blog-cat.blue { background: rgba(41,151,255,0.18); color: #64d2ff; }
.hp-blog-cat.green { background: rgba(48,209,88,0.14); color: #1a7f4e; }
.hp-blog-cat.purple { background: rgba(175,130,255,0.2); color: #cfb3ff; }

.hp-blog-card h3 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; color: inherit; max-width: 420px; }
.hp-blog-card h3.smaller { font-size: var(--text-3xl); }
.hp-blog-card > p { font-size: var(--text-lg); line-height: 1.5; color: inherit; opacity: 0.7; margin: 0 0 auto; max-width: 400px; }
.hp-blog-card.compact > p { font-size: var(--text-md); }

.hp-blog-visual { margin: 24px 0 20px; min-height: 140px; display: flex; align-items: center; justify-content: center; }
.hp-blog-visual.compact { min-height: 120px; margin: 20px 0 16px; }
.hp-blog-visual svg { max-width: 100%; height: auto; }

.hp-blog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.08); }
.hp-blog-card.hp-tile-dark .hp-blog-footer,
.hp-blog-card.hp-tile-plum .hp-blog-footer { border-top-color: rgba(255,255,255,0.1); }

.hp-blog-author { display: flex; align-items: center; gap: 10px; }
.hp-blog-author .avatar { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; }
.hp-blog-author .name { font-size: var(--text-md); font-weight: var(--fw-semibold); color: inherit; line-height: 1.2; }
.hp-blog-author .meta { font-size: var(--text-sm); color: inherit; opacity: 0.65; margin-top: 2px; }
.hp-blog-author.compact { gap: 8px; }
.hp-blog-author.compact .avatar { width: 26px; height: 26px; }
.hp-blog-author.compact .meta { font-size: var(--text-sm); }

.hp-blog-read { color: var(--color-link); font-size: var(--text-md); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
.hp-blog-read:hover { text-decoration: underline; }

/* Dark mode */
[data-theme="dark"] .hp-blog-tiles { background: #000; }
[data-theme="dark"] .hp-blog-head h2 { color: var(--color-text-primary); }
[data-theme="dark"] .hp-blog-head p { color: #a1a1a6; }
[data-theme="dark"] .hp-blog-head .hp-blog-all-link { color: #2997ff; }
[data-theme="dark"] .hp-blog-card.hp-tile-light { background: #1c1c1e; color: var(--color-text-primary); }
[data-theme="dark"] .hp-blog-card.hp-tile-sky { background: linear-gradient(160deg, #0a1628 0%, #122038 100%); color: var(--color-text-primary); }
[data-theme="dark"] .hp-blog-card.hp-tile-cream { background: #2a2a2c; color: var(--color-text-primary); }
[data-theme="dark"] .hp-blog-card.hp-tile-light .hp-blog-meta { color: #a1a1a6; }
[data-theme="dark"] .hp-blog-card.hp-tile-sky .hp-blog-meta,
[data-theme="dark"] .hp-blog-card.hp-tile-cream .hp-blog-meta { color: #a1a1a6; }
[data-theme="dark"] .hp-blog-card.hp-tile-light .hp-blog-footer,
[data-theme="dark"] .hp-blog-card.hp-tile-sky .hp-blog-footer,
[data-theme="dark"] .hp-blog-card.hp-tile-cream .hp-blog-footer { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .hp-blog-cat { background: rgba(41,151,255,0.18); color: #7fb7ff; }
[data-theme="dark"] .hp-blog-cat.green { background: rgba(48,209,88,0.2); color: #7dd3a8; }
[data-theme="dark"] .hp-blog-cat.purple { background: rgba(175,130,255,0.24); color: #cfb3ff; }
[data-theme="dark"] .hp-blog-read { color: #2997ff; }

/* Responsive */
@media (max-width: 980px) {
    .hp-blog-row { grid-template-columns: 1fr; }
    .hp-blog-row.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .hp-blog-row.three { grid-template-columns: 1fr; }
    .hp-blog-head h2 { font-size: var(--text-h3); }
    .hp-blog-card { min-height: 380px; padding: 28px; }
    .hp-blog-card h3 { font-size: var(--text-3xl); }
    .hp-blog-card h3.smaller { font-size: var(--text-2xl); }
}

/* =============================================
   LIGHT-MODE OVERRIDES for always-dark Apple sections
   These blocks were designed dark-first. Adapt them so they
   also work cleanly on light pages.
   ============================================= */

/* Trust - No Compromises (hp-hadrian-security-full) */
[data-theme="light"] .hp-hadrian-security-full { background: var(--color-surface-secondary); color: var(--color-text-primary); }
[data-theme="light"] .hp-hadrian-security-full .sec-eyebrow { color: var(--color-text-secondary); }
[data-theme="light"] .hp-hadrian-security-full h2 { color: var(--color-text-primary); }
[data-theme="light"] .hp-hadrian-security-full .sec-shot { background: var(--color-surface); border: 1px solid var(--color-border); }
[data-theme="light"] .hp-hadrian-security-full .sec-lead { color: var(--color-text-secondary); }
[data-theme="light"] .hp-hadrian-security-full .sec-lead strong { color: var(--color-text-primary); }
[data-theme="light"] .hp-hadrian-security-full .sec-feature p { color: var(--color-text-secondary); }
[data-theme="light"] .hp-hadrian-security-full .sec-feature p strong { color: var(--color-text-primary); }

/* Locations — Animated Globe (hp-locations-globe) */
[data-theme="light"] .hp-locations-globe { background: var(--color-surface-secondary); color: var(--color-text-primary); }
[data-theme="light"] .hp-locations-globe h2 { color: var(--color-text-primary); }
[data-theme="light"] .hp-locations-globe .sub { color: var(--color-text-secondary); }
[data-theme="light"] .hp-locations-globe .hp-globe-stat .n { color: var(--color-text-primary); }
[data-theme="light"] .hp-locations-globe .hp-globe-stat .l { color: var(--color-text-secondary); }

/* Locations — Map Section (default light; .dark modifier stays dark by intent) */
/* (base already light — no override needed) */

/* Features — Intelligence + Privacy Duo (hp-intel-big / hp-intel-small) */
[data-theme="light"] .hp-intel-big {
    background: var(--color-surface-secondary); color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
[data-theme="light"] .hp-intel-big h2 { color: var(--color-text-primary); }
[data-theme="light"] .hp-intel-big p { color: var(--color-text-secondary); }
[data-theme="light"] .hp-intel-big p strong { color: var(--color-text-primary); }
[data-theme="light"] .hp-intel-big .eyebrow { color: var(--color-accent); }
[data-theme="light"] .hp-intel-big .link { color: var(--color-accent); }
[data-theme="light"] .hp-intel-big .intel-visual {
    background: linear-gradient(135deg, #eaf4ff 0%, #dbeafe 100%);
    color: var(--color-text-tertiary);
}
[data-theme="light"] .hp-intel-small {
    background: var(--color-surface-secondary); color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
[data-theme="light"] .hp-intel-small .intel-small-shot { background: #eaf4ff; }
[data-theme="light"] .hp-intel-small h3 { color: var(--color-text-primary); }
[data-theme="light"] .hp-intel-small p { color: var(--color-text-secondary); }
[data-theme="light"] .hp-intel-small p strong { color: var(--color-text-primary); }

/* Features - Upgrade Compare (hp-hadrian-upgrade-compare) */
[data-theme="light"] .hp-hadrian-upgrade-compare { background: var(--color-bg); }
[data-theme="light"] .hp-upgrade-card {
    background: var(--color-surface); color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
[data-theme="light"] .hp-upgrade-head-text h2 { color: var(--color-text-primary); }
[data-theme="light"] .hp-upgrade-sub { color: var(--color-text-secondary); }
[data-theme="light"] .hp-upgrade-sub strong { color: var(--color-text-primary); }
[data-theme="light"] .hp-upgrade-select-label { color: var(--color-text-secondary); }
[data-theme="light"] .hp-upgrade-select {
    background: var(--color-surface-secondary); border-color: var(--color-border);
}
[data-theme="light"] .hp-upgrade-select select {
    color: var(--color-text-primary); color-scheme: light;
}
[data-theme="light"] .hp-upgrade-select select option {
    background: var(--color-surface); color: var(--color-text-primary);
}
[data-theme="light"] .hp-upgrade-select-chev { color: var(--color-text-secondary); }
[data-theme="light"] .hp-upgrade-tile {
    background: var(--color-surface-secondary); color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
[data-theme="light"] .hp-upgrade-tile .tile-stat { color: var(--color-text-primary); }
[data-theme="light"] .hp-upgrade-tile .tile-stat.large { color: var(--color-text-primary); }
[data-theme="light"] .hp-upgrade-tile .tile-caption,
[data-theme="light"] .hp-upgrade-tile .tile-foot { color: var(--color-text-secondary); }
[data-theme="light"] .hp-upgrade-tile .tile-visual img,
[data-theme="light"] .hp-upgrade-tile .tile-visual svg { filter: none; }
[data-theme="light"] .hp-upgrade-tile .tile-visual img { opacity: 1; }
[data-theme="light"] .hp-upgrade-migrate { border-top-color: var(--color-border); }
[data-theme="light"] .hp-upgrade-migrate .migrate-logo { color: var(--color-text-primary); }
[data-theme="light"] .hp-upgrade-migrate p { color: var(--color-text-secondary); }
[data-theme="light"] .hp-upgrade-migrate .migrate-link { color: var(--color-accent); }

/* ─────────────────────────────────────────────────────────────
   Menu-manager-driven nav (sidebar + topnav)
   These complement the existing .sidebar-item / .homepage-nav rules.
   ───────────────────────────────────────────────────────────── */

/* Sidebar: extras for menu-manager item types */
.sidebar-divider { border: 0; border-top: 1px solid var(--sidebar-border); margin: 8px 12px; }
.sidebar-group-divider { border: 0; border-top: 1px solid var(--sidebar-border); margin: 6px 10px; }
.sidebar-group-section { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px 4px; }

.sidebar-item-switcher { cursor: pointer; }
.sidebar-item-login { background: var(--color-accent-light); }
.sidebar-item-login .sidebar-item-icon { background: var(--color-accent); color: var(--color-surface); }

/* Topnav item icons */
.homepage-nav .nav-item-icon { display: inline-flex; align-items: center; margin-right: 6px; color: currentColor; opacity: 0.75; }
/* topnav.tpl also stamps width="14" height="14" as presentational attributes on
   each icon. CSS beats a presentational attribute, so this token still wins --
   but the attribute is a second source of truth worth knowing about. */
.homepage-nav .nav-item-icon svg { width: var(--topnav-icon-size, 14px); height: var(--topnav-icon-size, 14px); }
.homepage-nav .nav-dropdown-item-icon { display: inline-flex; align-items: center; margin-right: 8px; color: var(--color-text-tertiary); }
.homepage-nav .nav-dropdown-item-icon svg { width: 12px; height: 12px; }
.homepage-nav .nav-chevron { width: 10px; height: 10px; margin-left: 2px; opacity: 0.6; }

/* Topnav: items driven by $primaryNavbar */
.homepage-nav .nav-item { display: inline-flex; align-items: center; color: var(--color-text-primary); opacity: 0.85; font-size: var(--text-sm); text-decoration: none; transition: opacity 0.15s; padding: 0; }
.homepage-nav .nav-item:hover { opacity: 1; text-decoration: none; }
.homepage-nav .nav-item-right { margin-left: auto; }
.homepage-nav .nav-cta { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--color-accent); color: var(--color-surface) !important; font-weight: var(--fw-medium); font-size: var(--text-sm); text-decoration: none; opacity: 1; transition: opacity 0.15s; }
.homepage-nav .nav-cta:hover { opacity: 0.9; text-decoration: none; }
.homepage-nav .nav-switcher { color: var(--color-text-tertiary); font-size: var(--text-sm); text-decoration: none; }
.homepage-nav .nav-switcher:hover { color: var(--color-text-primary); text-decoration: none; }
.homepage-nav .nav-section { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); pointer-events: none; }
/* Header items in the admin menu tree are sidebar-only groupers — hide
   them entirely on the top-nav layout so they don't render alongside
   the actual nav-items they group (e.g. "HOME Home SERVICES Services"). */
.homepage-nav.only-top .nav-section { display: none; }
.homepage-nav .nav-divider { width: 1px; height: 16px; background: var(--color-border); }

/* Topnav: classic dropdown — Apple-style frosted floating panel, hover-triggered.
   Default state for any dropdown_parent item with config.dropdown_style empty or
   "default". Icons are only rendered when admin's topnav_show_icons toggle is on
   AND the item has a config.icon set (handled in the TPL). */
.homepage-nav .nav-dropdown-wrap { position: relative; display: inline-flex; align-items: center; align-self: stretch; }
.homepage-nav .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-primary); opacity: 0.85; font-size: var(--text-sm); text-decoration: none; cursor: pointer; height: 100%; transition: opacity 0.15s ease; }
.homepage-nav .nav-dropdown-toggle svg { width: 10px; height: 10px; transition: transform 0.2s ease; }
.homepage-nav .nav-dropdown-toggle:hover { opacity: 1; }
.homepage-nav .nav-dropdown-wrap:hover .nav-dropdown-toggle .nav-chevron { transform: rotate(180deg); }
.homepage-nav .nav-dropdown-menu {
    position: absolute; top: 100%; left: 0;
    min-width: 220px;
    background: rgba(251,251,253,0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 0.5px solid var(--sidebar-item-active);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 0.5px var(--color-border-card);
    padding: 6px;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 51;
}
/* Transparent hover bridge -- defensive cover for any future animation
   that might re-introduce a transient gap during the panel's entry
   transition. The ::before extends the panel's hover-capture area 8px
   upward so the cursor never falls into dead space. */
.homepage-nav .nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px; left: 0; right: 0;
    height: 8px;
}
.homepage-nav .nav-dropdown-wrap:hover .nav-dropdown-menu,
.homepage-nav .nav-dropdown-wrap:focus-within .nav-dropdown-menu,
.homepage-nav .nav-dropdown-menu:hover { opacity: 1; pointer-events: auto; transform: translateY(0); }
.homepage-nav .nav-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    color: var(--color-text-primary); font-size: var(--text-base); font-weight: var(--fw-medium);
    text-decoration: none; opacity: 1;
    transition: background 0.12s ease;
}
.homepage-nav .nav-dropdown-item:hover { background: var(--color-border-card); text-decoration: none; }
.homepage-nav .nav-dropdown-divider { height: 0.5px; background: rgba(0,0,0,0.08); margin: 4px 8px; }
.homepage-nav .nav-dropdown-section { padding: 8px 10px 4px; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); }

[data-theme="dark"] .homepage-nav .nav-dropdown-menu {
    background: rgba(28,28,30,0.92);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.04);
}
[data-theme="dark"] .homepage-nav .nav-dropdown-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .homepage-nav .nav-dropdown-divider { background: rgba(255,255,255,0.08); }

/* Topnav: MEGA dropdown — full-width frosted panel with column grid.
   Toggle via admin (dropdown_style="mega"). TPL adds .nav-dropdown-wrap--mega
   on the wrap and .nav-dropdown-menu--mega on the panel. Children rendered
   into .nav-mega-col groups (one per "header" item; items without a preceding
   header fall into the first auto-opened column). */
.homepage-nav .nav-dropdown-wrap--mega { position: static; }
.homepage-nav .nav-dropdown-menu--mega {
    left: 0; right: 0;
    min-width: 0; max-width: none;
    padding: 0;
    border-radius: 16px;
}
.homepage-nav .nav-mega-inner {
    max-width: 960px; margin: 0 auto;
    padding: 32px 24px 36px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
.homepage-nav .nav-mega-col h4 {
    font-size: var(--text-xs); font-weight: var(--fw-semibold);
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0 0 12px;
}
.homepage-nav .nav-mega-item {
    display: block; padding: 8px 0;
    text-decoration: none;
    color: var(--color-text-primary);
    opacity: 1;
}
.homepage-nav .nav-mega-item .name {
    font-size: var(--text-lg); font-weight: var(--fw-medium); letter-spacing: -0.01em;
    color: var(--color-text-primary);
    transition: color 0.15s ease;
}
.homepage-nav .nav-mega-item:hover { text-decoration: none; }
.homepage-nav .nav-mega-item:hover .name { color: var(--color-accent); }

/* Mega item — icon variant: tinted square tile + label. Only used when
   topnav_show_icons is on AND the item has config.icon. */
.homepage-nav .nav-mega-item--icon {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
}
.homepage-nav .nav-mega-icon {
    width: 34px; height: 34px;
    background: var(--color-accent-light);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.homepage-nav .nav-mega-icon svg { width: 18px; height: 18px; color: var(--color-accent); }
.homepage-nav .nav-mega-item--icon:hover .nav-mega-icon { background: rgba(0,113,227,0.16); }
.homepage-nav .nav-mega-text { flex: 1; min-width: 0; }

[data-theme="dark"] .homepage-nav .nav-mega-icon { background: rgba(10,132,255,0.16); }
[data-theme="dark"] .homepage-nav .nav-mega-item--icon:hover .nav-mega-icon { background: rgba(10,132,255,0.24); }

@media (max-width: 820px) {
    .homepage-nav .nav-mega-inner { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px 26px; }
}

/* ============================================
   Cart view-page chrome (.vc-*)
   --------------------------------------------
   Wraps the nexus_cart Vue SPA at /cart.php?a=view with the Apple
   mockup's page header + 5-step strip. Lives here (not inline in
   hadrian_cart/viewcart.tpl) because WHMCS strips <style>/<link>
   from cart TPL output. .vc- prefix prevents collisions with the
   .ct-* classes used inside the mockups and the .cp-* classes on
   the configure-product page.
   ============================================ */
.vc-page-header {
    margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; flex-wrap: wrap;
}
.vc-page-header h1 {
    font-size: var(--text-h3); font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    margin: 0 0 6px;
}
.vc-page-header .vc-sub {
    font-size: var(--text-md); color: var(--color-text-tertiary);
    letter-spacing: -0.008em;
    margin: 0;
}
.vc-page-header .vc-browse-btn {
    height: 36px; padding: 0 16px;
    font-size: var(--text-base); font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    background: transparent;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-pill, 999px);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    letter-spacing: -0.008em;
    transition: all var(--transition-fast, 0.15s);
}
.vc-page-header .vc-browse-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.vc-steps {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: var(--text-base); color: var(--color-text-tertiary);
    letter-spacing: -0.008em;
}
.vc-step { display: inline-flex; align-items: center; gap: 8px; }
.vc-step-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-surface-secondary); color: var(--color-text-tertiary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--fw-semibold); flex-shrink: 0;
}
.vc-step.done .vc-step-num { background: var(--color-green-bg, #e8f5e8); color: var(--color-green-text, #34c759); }
.vc-step.active .vc-step-num { background: var(--color-accent); color: var(--color-surface); }
.vc-step.active { color: var(--color-text-primary); font-weight: var(--fw-medium); }
.vc-step-sep { color: var(--color-text-quaternary, #c7c7cc); }

/* Built-in image CAPTCHA label (shared includes/captcha.tpl). The image + code
   box are styled by each page's own .X-captcha container rules. */
.mt-captcha-verify { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; text-align: center; line-height: 1.4; }

/* ── CAPTCHA: reCAPTCHA/hCaptcha ship a fixed 304px widget that can crowd very
   narrow phones. Scale it down on small screens so it sits comfortably inside
   the auth/register cards (whose overflow:hidden contains any residual box). ── */
@media (max-width: 360px) {
    .g-recaptcha,
    .h-captcha { transform: scale(0.86); transform-origin: center top; }
}

/* ── intl-tel-input (phone country-code picker) — Apple-styled, applied wherever
   the widget is used (register, contacts). body-prefixed so these win over the
   CDN intlTelInput.css regardless of stylesheet load order. ── */
/* :not(.iti--container) is load-bearing. With dropdownContainer:document.body the
   widget appends a SECOND .iti element (.iti.iti--container) straight to <body>,
   absolutely positioned at the input's x-offset. width:100% there resolves against
   body, not the input, so it spills past the right edge and gives the page a
   horizontal scrollbar on open. Only the inline wrapper should stretch. */
body .iti:not(.iti--container) { display: block; width: 100%; }
body .iti__tel-input,
body input.iti__tel-input { width: 100%; box-sizing: border-box; }
body .iti--separate-dial-code .iti__selected-flag {
    background: var(--color-surface-secondary);
    border-right: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding: 0 10px 0 12px;
}
body .iti--separate-dial-code .iti__selected-flag:hover,
body .iti--separate-dial-code .iti__selected-flag:focus { background: var(--color-surface-tertiary); }
body .iti--separate-dial-code .iti__selected-dial-code { font-size: var(--text-base); color: var(--color-text-secondary); margin-left: 6px; font-variant-numeric: tabular-nums; }
body .iti__arrow { border-top-color: var(--color-text-tertiary); margin-left: 6px; }
body .iti__country-list {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.18);
    padding: 6px 0; max-height: 260px; margin-top: 6px;
}
body .iti__country { padding: 7px 14px; font-size: var(--text-base); color: var(--color-text-primary); display: flex; align-items: center; gap: 10px; }
body .iti__country:hover,
body .iti__country.iti__highlight { background: var(--color-surface-secondary); }
body .iti__dial-code { color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; margin-left: auto; font-size: var(--text-sm); }
body .iti__divider { border-bottom: 0.5px solid var(--color-border); margin: 4px 0; }

/* ── Shared list search box (invoices / tickets / quotes default tables) ── */
.mt-list-search { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; margin-left: auto; background: var(--color-surface); border: 0.5px solid var(--color-border); border-radius: var(--radius-pill); min-width: 200px; max-width: 280px; }
.mt-list-search svg { width: 14px; height: 14px; color: var(--color-text-tertiary); flex-shrink: 0; }
.mt-list-search input { border: 0; background: transparent; outline: none; font-size: var(--text-base); color: var(--color-text-primary); font-family: inherit; width: 100%; }
.mt-list-search input::placeholder { color: var(--color-text-tertiary); }
@media (max-width: 600px) { .mt-list-search { margin-left: 0; max-width: none; width: 100%; } }

/* ── Email-verification banner (includes/verifyemail.tpl) — top of the content area ── */
.mt-verify-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin: 0 0 18px;
    background: var(--color-orange-bg, rgba(255, 159, 10, 0.10));
    color: var(--color-orange-text, #c27400);
    border-radius: var(--radius-md);
    font-size: var(--text-base); line-height: 1.45;
}
.mt-verify-ico { display: inline-flex; flex-shrink: 0; }
.mt-verify-ico svg { width: 18px; height: 18px; }
.mt-verify-text { flex: 1; min-width: 0; }
.mt-verify-resend {
    flex-shrink: 0; height: 30px; padding: 0 14px;
    background: var(--color-orange-text, #c27400); color: #fff;
    border: 0; border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: var(--fw-medium); font-family: inherit; cursor: pointer;
    transition: filter var(--transition-fast);
}
.mt-verify-resend:hover { filter: brightness(0.95); }
.mt-verify-resend:disabled { opacity: 0.65; cursor: default; }
.mt-verify-close {
    flex-shrink: 0; width: 28px; height: 28px;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 50%;
    color: inherit; cursor: pointer; opacity: 0.65;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.mt-verify-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.mt-verify-close svg { width: 15px; height: 15px; }
@media (max-width: 600px) {
    .mt-verify-banner { flex-wrap: wrap; }
    .mt-verify-text { flex-basis: calc(100% - 42px); }
    .mt-verify-resend { margin-left: 30px; }
}