/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC MARKETING + LEGAL SURFACE  —  pub-* layer
   ═══════════════════════════════════════════════════════════════════════════

   Loaded ONLY by src/Public/views/public_layout.php, which serves the public
   marketing pages (/, /pricing) and the public legal pages (/privacy, /terms).
   The authenticated product shell (layout.php) never requests this file.

   WHY A FILE INSTEAD OF THE INLINE <style> BLOCK IT REPLACES
   public_layout.php carried ~200 lines of inline CSS and the marketing views
   carried several hundred inline style="" attributes. docs/UI_FOUNDATION.md §17
   forbids both for new markup, and an inline block cannot be cached or
   cache-busted. This file is versioned through asset_url() + DM_ASSET_VERSION
   like every other shared asset.

   ARCHITECTURE — this is NOT a second design system.
   Every colour, radius, shadow and transition below resolves to a canonical
   Device Monitor token declared in style.css (:root) and overridden for dark
   mode in dark-mode.css. No token is redefined globally here and no
   business-state token is introduced (UI_FOUNDATION §6).

   The ONE deliberate exception is the "control room" region (.pub-cr): a
   committed-dark surface that stays dark in BOTH themes, the way a product
   screenshot does. It declares its own custom properties LOCALLY on the block
   so they cannot leak into the global cascade or compete with the token layer.

   Direction: logical properties throughout (UI_FOUNDATION §7/§14), so Arabic
   RTL and English LTR mirror without a single physical override.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Page shell ───────────────────────────────────────────────────────── */

body {
    background: var(--bg-secondary);
}

[dir="rtl"] body {
    font-family: 'Tajawal', system-ui, sans-serif;
}

/* Nothing on the public surface may scroll the page sideways
   (UI_FOUNDATION §15). Wide children scroll inside their own container.
   This is a backstop, not the mechanism: every grid below sets min-inline-size
   on its children so nothing is silently clipped by it. */
.pub-page {
    overflow-x: hidden;
}

/* A grid/flex item's default min-width is auto, which is its CONTENT's minimum
   width — so one wide child (a table, a long token) inflates the whole column
   past the viewport instead of shrinking. Measured at 375 CSS px, the dashboard
   preview blew out to 398 px this way. Resetting it on every public grid child
   lets the column shrink and hands the overflow to the inner scroll container
   that is meant to own it. */
.pub-cardgrid > *,
.pub-split > *,
.pub-steps > *,
.pub-trust > *,
.pub-plans > *,
.pub-preview__body > * {
    min-inline-size: 0;
}

/* Keyboard users reach the content without tabbing the whole navbar. */
.pub-skip {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -100vh;
    z-index: 2000;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.pub-skip:focus {
    inset-block-start: 1rem;
    color: #fff;
}


/* ── 2. Navbar ───────────────────────────────────────────────────────────── */

.pub-navbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    padding-block: 0.65rem;
    background: var(--bg-primary);
    border-block-end: 1px solid var(--border-color);
    box-shadow: var(--navbar-shadow);
}

.pub-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pub-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-decoration: none;
}

.pub-brand:hover,
.pub-brand:focus-visible {
    color: var(--brand);
}

/* Official Device Monitor logo. The generic Ionicons pulse glyph that used to
   sit here was not brand identity — it was a stand-in. The asset is a true
   512x512 vector with a square viewBox, so a fixed square box preserves its
   aspect ratio exactly; it is never stretched and never recoloured. */
.pub-brand__mark {
    flex-shrink: 0;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 9px;          /* matches the artwork's own corner radius */
    display: block;
}

.pub-footer .pub-brand__mark {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 8px;
}

/* The navbar must not grow taller because of the logo: it is 38px inside a
   0.65rem block padding, which is the height the sign-in button already sets. */
@media (max-width: 575.98px) {
    .pub-brand__mark { inline-size: 32px; block-size: 32px; border-radius: 7px; }
}

.pub-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Icon-only control (theme toggle, mobile menu). 44px touch target. */
.pub-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pub-iconbtn:hover,
.pub-iconbtn:focus-visible {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.pub-iconbtn ion-icon {
    pointer-events: none;
}

.pub-navtoggle {
    display: none;
}

/* Mobile sheet: plain block flow, no transform, so it works with JS disabled
   once the <details>/checkbox-free toggle sets [hidden] off. */
.pub-mobilenav {
    display: none;
    padding-block: 0.75rem 1rem;
    border-block-start: 1px solid var(--border-color);
}

.pub-mobilenav[data-open="true"] {
    display: block;
}

.pub-mobilenav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pub-mobilenav__link {
    display: block;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
}

.pub-mobilenav__link:hover,
.pub-mobilenav__link:focus-visible {
    background: var(--bg-tertiary);
    color: var(--brand);
}

/* The navbar has no inline link list any more, so there is nothing to collapse
   at lg. The menu toggle now appears only where the dot rail does NOT (below
   1280px); above that the rail is the section navigator and the sheet would be
   redundant. The language label still hides on small screens for width. */
@media (max-width: 1279.98px) {
    .pub-navtoggle { display: inline-flex; }
}

@media (max-width: 991.98px) {
    .pub-nav__lang-label { display: none; }
}

/* Below 576 px the four controls (theme, language, sign-in, menu) plus the brand
   measured 396 px against a 351 px content box. Sign-in stays IN the navbar, as
   required, but drops to its icon with an accessible name; the mobile sheet
   carries the full-text link. Nothing is removed, only relabelled. */
@media (max-width: 575.98px) {
    .pub-nav__actions        { gap: 0.25rem; }
    .pub-nav__signin-label   { display: none; }
    .pub-nav__signin         { padding-inline: 0.6rem; }
    .pub-nav__signin ion-icon { margin: 0; }
    .pub-iconbtn             { inline-size: 38px; block-size: 38px; }
}

/* The sign-in entry in the mobile sheet mirrors the navbar button, so the text
   label is never lost — it moves. */
.pub-mobilenav__link--signin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    color: var(--brand);
    font-weight: 600;
}


/* ── 2b. Homepage section rail — DOTS ONLY ───────────────────────────────── */
/*
   A silent column of dots, rendered ONLY on the homepage (public_layout emits it
   only when the view supplies $sectionNav). There is no text inside it at all:
   no labels, no expanded state, no title tooltip. Each dot is a real anchor
   whose accessible name comes from aria-label, so screen readers announce
   "How it works" / "كيف يعمل" while nothing is drawn for sighted users.

   SIDE PLACEMENT IS DELIBERATE AND MIRRORED:
       English / LTR -> LEFT edge
       Arabic  / RTL -> RIGHT edge
   That is inset-inline-START, not -end. (The previous revision used -end, which
   put it on the right in English; the product owner asked for the mirror image.)
   Verified by measuring the rendered box against the viewport midpoint in both
   directions rather than trusting the keyword.

   WIDTH BUDGET — a measured constraint, not taste.
   Bootstrap's .container is 1140px from 1200px up and 1320px from 1400px up, so
   the free gutter is NOT monotonic; it collapses at every breakpoint:

       viewport 1280 -> container 1140 -> gutter  70px
       viewport 1399 -> container 1140 -> gutter 129px
       viewport 1400 -> container 1320 -> gutter  40px   <- worst case
       viewport 1600 -> container 1320 -> gutter 140px

   Dropping the labels removes the variable that used to threaten that budget:
   the rail is now a fixed ~30px column at every width, which fits inside even
   the 40px worst case. Nothing expands on hover, so the resting measurement is
   the only measurement.                                                        */

.pub-rail {
    --rail-offset: 5px;

    display: none;                       /* enabled by the width query below */
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: var(--rail-offset);
    z-index: 1020;                       /* under the sticky navbar (1030) */
    transform: translateY(-50%);
    padding: 0.45rem 0.3rem;
    border: 1px solid var(--card-border);
    /* A rounded rectangle. 999px on a tall narrow box renders as a lens/ellipse
       — it was tried and looked like a stray blob rather than a card. */
    border-radius: 14px;
    background: var(--bg-elevated);
    box-shadow: var(--card-shadow-hover);
}

.pub-rail__list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The anchor is the hit target, sized for comfortable clicking even though the
   dot it contains is small. It holds no text node — only the dot span. */
.pub-rail__link {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.pub-rail__link:hover {
    color: var(--brand);
    background: var(--brand-dim);
}

/* Keyboard focus must stay obvious now that there is no text to read. */
.pub-rail__link:focus-visible {
    color: var(--brand);
    background: var(--brand-dim);
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* Inactive: a small hollow ring. Visible in both themes because it is drawn in
   currentColor, which the token layer sets per theme. */
.pub-rail__dot {
    inline-size: 7px;
    block-size: 7px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
    transition: background var(--transition-fast),
                scale var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* Active: filled, larger, and haloed by a ring drawn with box-shadow so the
   change is unmistakable without any text. Set by the IntersectionObserver. */
.pub-rail__link[aria-current="true"] {
    color: var(--brand);
}

.pub-rail__link[aria-current="true"] .pub-rail__dot {
    background: var(--brand);
    border-color: var(--brand);
    scale: 1.25;
    box-shadow: 0 0 0 3px var(--brand-dim);
}

@media (min-width: 1280px) {
    .pub-rail { display: block; }
}

/* Anchored jumps glide instead of teleporting, and the sticky navbar no longer
   covers the heading that was jumped to. Both are switched off for users who
   asked for reduced motion (see the motion block at the end of this file). */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-block-start: 5rem;
}

/* Section links inside the mobile sheet — the mobile counterpart of the rail,
   which is hidden below 1280px. No extra floating button, no new touch surface,
   just a labelled group in the navigation the site already had. */
.pub-mobilenav__group {
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--border-color);
}

.pub-mobilenav__grouptitle {
    margin: 0 0 0.35rem;
    padding-inline: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ── 3. Section rhythm + shared headings ─────────────────────────────────── */

.pub-section {
    padding-block: 4.5rem;
}

.pub-section--tight {
    padding-block: 3rem;
}

/* Section that continues the one above it — no top gap. */
.pub-section--flush-top {
    padding-block-start: 0;
}

/* Direction-aware left/right alignment. Bootstrap's .text-start is physical in
   the LTR build this app ships (UI_FOUNDATION §14), so it would not mirror in
   Arabic; the logical `start` keyword does. Scoped to the public layer. */
.pub-align-start {
    text-align: start;
}

/* Alternating band. Uses --bg-primary so it inverts correctly in dark mode. */
.pub-section--band {
    background: var(--bg-primary);
    border-block: 1px solid var(--border-color);
}

.pub-sectionhead {
    max-inline-size: 640px;
    margin-inline: auto;
    margin-block-end: 3rem;
    text-align: center;
}

.pub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-block-end: 0.85rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--brand-dim);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pub-sectionhead__title {
    margin-block-end: 0.75rem;
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.pub-sectionhead__lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}


/* ── 4. Control room — the committed-dark region ─────────────────────────── */
/*
   .pub-cr is the hero and the dashboard-preview surface. It is dark in BOTH
   themes on purpose: it is the "operations console" moment of the page, the
   same way a screenshot of a dark product UI stays dark on a white page.

   All of its colours are declared as LOCAL custom properties on the block.
   They are scoped to .pub-cr and its descendants and never reach :root, so
   the global token layer is untouched and dark-mode.css keeps full control of
   every other section.                                                       */

.pub-cr {
    --cr-surface   : #0E1116;
    --cr-surface-2 : #151A22;
    --cr-line      : rgba(148, 178, 214, 0.14);
    --cr-line-soft : rgba(148, 178, 214, 0.07);
    --cr-text      : #E8EDF5;
    --cr-text-dim  : #98A6BC;
    --cr-accent    : #3B9EFF;
    --cr-accent-2  : #22D3EE;
    --cr-ok        : #34D399;
    --cr-warn      : #FBBF24;
    --cr-crit      : #F87171;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cr-surface);
    color: var(--cr-text);
}

/* Technical line motif: a faint grid + one wide radial lift behind the copy.
   Pure CSS, no image request, no animation. */
.pub-cr::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--cr-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--cr-line-soft) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 78%);
}

.pub-cr::after {
    content: "";
    position: absolute;
    inset-block-start: -35%;
    inset-inline-start: 50%;
    z-index: -1;
    inline-size: 120vw;
    block-size: 90%;
    translate: -50% 0;
    background: radial-gradient(ellipse at center,
                rgba(59, 158, 255, 0.16) 0%,
                rgba(34, 211, 238, 0.06) 42%,
                transparent 72%);
    pointer-events: none;
}

.pub-hero {
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* SHARED CONTRACT — the checkout flow uses this shell too.
   src/Modules/Checkout/Views/checkout.php and checkout_payment.php each open
   with <section class="pub-hero">, and before this file existed .pub-hero was a
   LIGHT band (--bg-primary plus a bottom rule) defined inline in
   public_layout.php. On the landing page .pub-hero is now paired with .pub-cr
   and must stay dark, so the light treatment is restored only when .pub-cr is
   absent. :not() makes this (0,2,0), which outranks .pub-cr (0,1,0) regardless
   of source order — the two cannot fight. Those two checkout views therefore
   render exactly as they did, with no edit to the checkout module. */
.pub-hero:not(.pub-cr) {
    background: var(--bg-primary);
    border-block-end: 1px solid var(--border-color);
}

.pub-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-block-end: 1.35rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--cr-line);
    border-radius: 999px;
    background: rgba(59, 158, 255, 0.10);
    color: var(--cr-accent-2);
    font-size: 0.78rem;
    font-weight: 600;
}

.pub-hero__title {
    margin-block-end: 1.15rem;
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--cr-text);
}

.pub-hero__title em {
    font-style: normal;
    color: var(--cr-accent-2);
}

.pub-hero__lead {
    max-inline-size: 34em;
    margin-block-end: 2rem;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.75;
    color: var(--cr-text-dim);
}

.pub-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* The hero sits on a dark surface in light mode too, so its buttons cannot
   inherit .btn-outline-secondary's light-surface colours. */
.pub-btn-onbrand {
    border: 1px solid var(--cr-line);
    background: rgba(255, 255, 255, 0.06);
    color: var(--cr-text);
}

.pub-btn-onbrand:hover,
.pub-btn-onbrand:focus-visible {
    border-color: rgba(148, 178, 214, 0.32);
    background: rgba(255, 255, 255, 0.11);
    color: var(--cr-text);
}

.pub-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-block-start: 2rem;
    padding: 0;
    list-style: none;
    font-size: 0.83rem;
    color: var(--cr-text-dim);
}

.pub-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pub-hero__trust ion-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--cr-accent);
}


/* ── 5. Hero monitoring visual ───────────────────────────────────────────── */
/*
   A static SVG panel with one very small CSS pulse. No JS, no simulation
   engine, no library. Every label inside it is generic ("Branch A") — see
   the view for the sanitised-data rule.                                      */

.pub-scope {
    position: relative;
    border: 1px solid var(--cr-line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--cr-surface-2), rgba(14, 17, 22, 0.9));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.pub-scope__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-block-end: 1px solid var(--cr-line);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.74rem;
    color: var(--cr-text-dim);
}

.pub-scope__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--cr-ok);
    flex-shrink: 0;
}

.pub-scope__dot--warn { background: var(--cr-warn); }
.pub-scope__dot--crit { background: var(--cr-crit); }

.pub-scope__body {
    padding: 1rem;
}

.pub-scope__svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* The single moving element on the page: a soft pulse on the "live" marker. */
.pub-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: pub-pulse 2.6s ease-in-out infinite;
}

@keyframes pub-pulse {
    0%, 100% { opacity: 0.25; scale: 1; }
    50%      { opacity: 0.8;  scale: 1.55; }
}

.pub-scope__rows {
    display: grid;
    gap: 0.4rem;
    margin-block-start: 0.9rem;
}

.pub-scope__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cr-line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.78rem;
    color: var(--cr-text-dim);
}

.pub-scope__row strong {
    font-weight: 600;
    color: var(--cr-text);
}

.pub-scope__spacer {
    margin-inline-start: auto;
}


/* ── 6. Split: basic status vs operational context ───────────────────────── */

.pub-split {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .pub-split { grid-template-columns: 1fr 1fr; }
}

.pub-panel {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    block-size: 100%;
}

.pub-panel--muted {
    background: var(--bg-tertiary);
    border-style: dashed;
}

.pub-panel--accent {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-dim);
}

.pub-panel__label {
    margin-block-end: 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pub-panel--accent .pub-panel__label {
    color: var(--brand);
}

.pub-panel__title {
    margin-block-end: 0.85rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-panel__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* Signal list inside a panel — icon + text, never colour alone. */
.pub-signals {
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.pub-signals li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.pub-signals ion-icon {
    flex-shrink: 0;
    margin-block-start: 0.15em;
    font-size: 1.05rem;
    color: var(--brand);
}

.pub-signals--muted ion-icon {
    color: var(--text-muted);
}


/* ── 7. Benefit cards ────────────────────────────────────────────────────── */

.pub-cardgrid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .pub-cardgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .pub-cardgrid--4 { grid-template-columns: repeat(4, 1fr); }
    .pub-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
}

.pub-card {
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    block-size: 100%;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.pub-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.pub-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    margin-block-end: 1.1rem;
    border-radius: 10px;
    background: var(--brand-dim);
    color: var(--brand);
    font-size: 1.3rem;
}

.pub-card__title {
    margin-block-end: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-card__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}


/* ── 8. How it works — three steps ───────────────────────────────────────── */

.pub-steps {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    counter-reset: pub-step;
}

@media (min-width: 768px) {
    .pub-steps { grid-template-columns: repeat(3, 1fr); }
}

.pub-step {
    position: relative;
    padding: 1.6rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.pub-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    margin-block-end: 1rem;
    border: 1px solid var(--brand);
    border-radius: 50%;
    background: var(--brand-dim);
    color: var(--brand);
    font-size: 0.9rem;
    font-weight: 700;
}

.pub-step__title {
    margin-block-end: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-step__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}


/* ── 9. Monitoring methods ───────────────────────────────────────────────── */

.pub-method {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    block-size: 100%;
}

.pub-method__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.pub-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 46px;
    block-size: 46px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--brand-dim);
    color: var(--brand);
    font-size: 1.4rem;
}

.pub-method__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-method__kicker {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}


/* ── 10. Dashboard preview (sanitised demo, not a real screenshot) ───────── */

.pub-preview {
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.pub-preview__chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-block-end: 1px solid var(--cr-line);
    background: rgba(255, 255, 255, 0.02);
}

.pub-preview__lights {
    display: inline-flex;
    gap: 0.3rem;
}

.pub-preview__lights span {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: rgba(148, 178, 214, 0.25);
}

.pub-preview__addr {
    padding: 0.15rem 0.7rem;
    border: 1px solid var(--cr-line);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--cr-text-dim);
}

.pub-preview__body {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .pub-preview__body { grid-template-columns: repeat(4, 1fr); }
    .pub-preview__wide { grid-column: span 4; }
    .pub-preview__half { grid-column: span 2; }
}

.pub-stat {
    padding: 0.9rem 1rem;
    border: 1px solid var(--cr-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.pub-stat__label {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cr-text-dim);
}

.pub-stat__value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cr-text);
}

.pub-stat__value--ok   { color: var(--cr-ok); }
.pub-stat__value--warn { color: var(--cr-warn); }
.pub-stat__value--crit { color: var(--cr-crit); }

.pub-stat__note {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    color: var(--cr-text-dim);
}

.pub-minitable {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    color: var(--cr-text-dim);
}

.pub-minitable th {
    padding: 0.45rem 0.6rem;
    border-block-end: 1px solid var(--cr-line);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: start;
    color: var(--cr-text-dim);
}

.pub-minitable td {
    padding: 0.5rem 0.6rem;
    border-block-end: 1px solid var(--cr-line-soft);
    text-align: start;
}

.pub-minitable td:first-child {
    font-weight: 600;
    color: var(--cr-text);
}

/* Status chip — dot AND label, never colour alone (UI_FOUNDATION §8). */
.pub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--cr-text);
}

.pub-chip__dot {
    inline-size: 7px;
    block-size: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.pub-chip--ok   { color: var(--cr-ok); }
.pub-chip--warn { color: var(--cr-warn); }
.pub-chip--crit { color: var(--cr-crit); }

/* Sparkline strip built from divs — no chart library on a marketing page. */
.pub-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    block-size: 46px;
    margin-block-start: 0.6rem;
}

.pub-spark span {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--cr-accent), rgba(59, 158, 255, 0.25));
}

/* The bar heights are part of the illustration, so they live here rather than
   as inline style attributes on seven otherwise identical spans. They encode no
   real measurement — see the sanitised-data note on the preview section. */
.pub-spark span:nth-child(1) { block-size: 62%; }
.pub-spark span:nth-child(2) { block-size: 71%; }
.pub-spark span:nth-child(3) { block-size: 68%; }
.pub-spark span:nth-child(4) { block-size: 80%; }
.pub-spark span:nth-child(5) { block-size: 74%; }
.pub-spark span:nth-child(6) { block-size: 88%; }
.pub-spark span:nth-child(7) { block-size: 92%; }

.pub-preview__caption {
    margin-block-start: 1rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--text-muted);
}


/* ── 11. Operational intelligence ────────────────────────────────────────── */

.pub-insight {
    display: flex;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.pub-insight + .pub-insight {
    margin-block-start: 0.75rem;
}

.pub-insight__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--brand-dim);
    color: var(--brand);
    font-size: 1.1rem;
}

.pub-insight__title {
    margin: 0 0 0.25rem;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-insight__text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--text-secondary);
}


/* ── 12. Alerts strip ────────────────────────────────────────────────────── */

.pub-alertrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.pub-alertrow + .pub-alertrow {
    margin-block-start: 0.55rem;
}

.pub-alertrow__sev {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
}

.pub-alertrow__sev--crit {
    border-color: var(--status-danger-border);
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
}

.pub-alertrow__sev--warn {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.pub-alertrow__sev--info {
    border-color: var(--status-active-border);
    background: var(--status-active-bg);
    color: var(--status-active-text);
}

.pub-alertrow__time {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}


/* ── 13. Trust / security grid ───────────────────────────────────────────── */

.pub-trust {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .pub-trust { grid-template-columns: repeat(2, 1fr); }
}

.pub-trust__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.pub-trust__item ion-icon {
    flex-shrink: 0;
    margin-block-start: 0.1em;
    font-size: 1.3rem;
    color: var(--brand);
}

.pub-trust__title {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-trust__text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
}


/* ── 14. Saudi identity banner ───────────────────────────────────────────── */
/*
   The artwork is the message. It is never recoloured, never cropped and never
   theme-filtered — the same file renders identically in light and dark mode.  */

.pub-saudi {
    padding-block: 3.5rem;
}

.pub-saudi__frame {
    max-inline-size: 1100px;
    margin-inline: auto;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;              /* kills the inline-image baseline gap */
    box-shadow: var(--card-shadow);
}

.pub-saudi__img {
    display: block;
    inline-size: 100%;
    block-size: auto;            /* aspect ratio preserved at every width */
    max-inline-size: 100%;
}

.pub-saudi__caption {
    max-inline-size: 620px;
    margin-inline: auto;
    margin-block-start: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.75;
    text-align: center;
    color: var(--text-secondary);
}


/* ── 15. Pricing preview ─────────────────────────────────────────────────── */

.pub-pricing {
    max-inline-size: 720px;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    text-align: center;
}

.pub-pricing__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.5rem;
    margin: 1.25rem 0 1.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.pub-pricing__points li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pub-pricing__points ion-icon {
    flex-shrink: 0;
    color: var(--status-success);
}


/* ── 16. FAQ — native <details>, no JS ───────────────────────────────────── */

.pub-faq {
    max-inline-size: 800px;
    margin-inline: auto;
}

.pub-faq__item {
    margin-block-end: 0.6rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    overflow: hidden;
}

.pub-faq__q {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;               /* Firefox marker */
}

.pub-faq__q::-webkit-details-marker {
    display: none;                  /* Safari/Chrome marker */
}

.pub-faq__q:hover {
    background: var(--bg-tertiary);
}

.pub-faq__q:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.pub-faq__chev {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: rotate var(--transition-fast);
}

.pub-faq__item[open] .pub-faq__chev {
    rotate: 180deg;
}

.pub-faq__a {
    padding: 0 1.25rem 1.1rem;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-secondary);
}


/* ── 17. Final CTA ───────────────────────────────────────────────────────── */

.pub-finalcta {
    max-inline-size: 640px;
    margin-inline: auto;
    text-align: center;
}

.pub-finalcta__title {
    margin-block-end: 0.85rem;
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    font-weight: 700;
    color: var(--text-primary);
}

.pub-finalcta__text {
    margin-block-end: 1.75rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}


/* ── 18. Footer ──────────────────────────────────────────────────────────── */

.pub-footer {
    padding-block: 3rem 1.5rem;
    background: var(--bg-primary);
    border-block-start: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.pub-footer__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    margin-block-end: 2rem;
}

@media (min-width: 768px) {
    .pub-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

.pub-footer__tag {
    max-inline-size: 30ch;
    margin-block: 0.75rem 0;
    line-height: 1.7;
    color: var(--text-muted);
}

.pub-footer__title {
    margin-block-end: 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pub-footer__list li + li {
    margin-block-start: 0.55rem;
}

.pub-footer__link {
    color: var(--text-muted);
    text-decoration: none;
}

.pub-footer__link:hover,
.pub-footer__link:focus-visible {
    color: var(--brand);
    text-decoration: underline;
}

.pub-footer__bottom {
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border-color);
    font-size: 0.78rem;
    text-align: center;
}


/* ── 19. Legal document pages (/privacy, /terms) ─────────────────────────── */
/*
   Presentation only. The wording rendered inside .pub-legal comes verbatim
   from the lawyer-approved source documents via
   src/Modules/Marketing/Legal/*.php and is never edited here or in the view.  */

.pub-legal {
    max-inline-size: 820px;
    margin-inline: auto;
}

.pub-legal__doc {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
}

.pub-legal__header {
    padding-block-end: 1.75rem;
    margin-block-end: 2rem;
    border-block-end: 1px solid var(--border-color);
    text-align: center;
}

.pub-legal__title {
    margin-block-end: 0.5rem;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 700;
    color: var(--text-primary);
}

.pub-legal__meta {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.pub-legal__h2 {
    margin-block: 2.25rem 0.9rem;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-primary);
}

.pub-legal__h2:first-of-type {
    margin-block-start: 0;
}

.pub-legal__h3 {
    margin-block: 1.5rem 0.7rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-secondary);
}

.pub-legal__p {
    margin-block-end: 1rem;
    font-size: 0.95rem;
    line-height: 2;
    color: var(--text-secondary);
}

.pub-legal__list {
    margin-block-end: 1.25rem;
    padding-inline-start: 1.4rem;
}

.pub-legal__list li {
    margin-block-end: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.95;
    color: var(--text-secondary);
}

/* Long strings inside legal prose (URLs, e-mail) must wrap, not overflow. */
.pub-legal__doc a {
    color: var(--brand);
    overflow-wrap: anywhere;
}

.pub-legal__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-block-start: 2rem;
}


/* ── 20. Pricing page components ─────────────────────────────────────────── */
/*
   /pricing renders whatever rows the plans table returns. These classes carry
   the presentation only — every price, limit and feature flag on that page is
   read from the database by PricingController + PlanRepository, which this
   initiative did not touch.                                                   */

.pub-cycle {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--bg-tertiary);
}

.pub-cycle__btn {
    padding: 0.4rem 1.2rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pub-cycle__btn.is-active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pub-plans {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 768px) {
    .pub-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .pub-plans { grid-template-columns: repeat(3, 1fr); }
}

.pub-plan {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    block-size: 100%;
    transition: box-shadow var(--transition-base);
}

.pub-plan:hover {
    box-shadow: var(--card-shadow-hover);
}

.pub-plan--featured {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-dim);
}

.pub-plan__badge {
    align-self: flex-start;
    margin-block-end: 0.75rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
}

.pub-plan__name {
    margin-block-end: 0.35rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pub-plan__desc {
    margin-block-end: 1rem;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Only one of the two price blocks is shown; the cycle toggle swaps them. */
.pub-plan__price { display: none; }
.pub-plan__price.is-active { display: block; }

.pub-plan__amount {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

.pub-plan__unit {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pub-plan__note {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.pub-plan__rule {
    margin-block: 1.35rem;
    border: 0;
    border-block-start: 1px solid var(--border-color);
}

.pub-plan__features {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.pub-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.pub-plan__features ion-icon {
    flex-shrink: 0;
    margin-block-start: 0.15em;
    font-size: 1rem;
    color: var(--brand);
}

.pub-plan__features .pub-plan__yes { color: var(--status-success); }
.pub-plan__features .pub-plan__no  { color: var(--text-muted); }

.pub-plan__cta {
    margin-block-start: auto;
    padding-block-start: 0.75rem;
}

.pub-assure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.pub-assure li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pub-assure ion-icon {
    flex-shrink: 0;
    color: var(--brand);
}

.pub-compare {
    inline-size: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    font-size: 0.9rem;
}

.pub-compare th,
.pub-compare td {
    padding: 0.75rem 1rem;
    text-align: start;
}

.pub-compare thead th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
}

.pub-compare tbody tr {
    border-block-start: 1px solid var(--border-color);
}

.pub-compare tbody th {
    font-weight: 600;
    color: var(--text-secondary);
}

.pub-compare td {
    color: var(--text-primary);
}

.pub-compare__center {
    text-align: center;
}


/* ── 21. Dark-mode link-colour reclaim ───────────────────────────────────── */
/*
   dark-mode.css carries a deliberately broad rule:

       [data-theme="dark"] a:not(.btn):not(.dropdown-item)
                            :not(.list-group-item):not(.nav-link) { color: … }

   It gives prose links a readable blue in dark mode, and its :not() list is the
   opt-out for components that own their own colour. At (0,5,1) it outranks every
   single-class component here, so MEASURED in dark mode the navbar links, footer
   links, mobile-sheet links and the section rail were all being painted brand
   blue — which also made the rail's active state invisible, since the active and
   inactive links were already the same colour.

   These selectors are (0,6,0) — six class-level components, which beats (0,5,1)
   — so the components take their colour back without touching the shared
   stylesheet, without affecting a single authenticated page, and without one
   !important (UI_FOUNDATION §17). Prose links inside legal text, the FAQ and the
   security note are deliberately NOT listed: brand blue is correct for those.

   The .pub-page ancestor is load-bearing here, not decoration — it supplies the
   sixth class. Do not "simplify" these selectors.
*/

[data-theme="dark"] .pub-page .pub-footer .pub-footer__link:not(.btn):not(.nav-link) {
    color: var(--text-muted);
}

[data-theme="dark"] .pub-page .pub-footer .pub-footer__link:not(.btn):not(.nav-link):hover,
[data-theme="dark"] .pub-page .pub-footer .pub-footer__link:not(.btn):not(.nav-link):focus-visible {
    color: var(--brand);
}

[data-theme="dark"] .pub-page .pub-mobilenav .pub-mobilenav__link:not(.btn):not(.nav-link) {
    color: var(--text-primary);
}

[data-theme="dark"] .pub-page .pub-mobilenav .pub-mobilenav__link--signin:not(.btn):not(.nav-link) {
    color: var(--brand);
}

[data-theme="dark"] .pub-page .pub-rail .pub-rail__link:not(.btn):not(.nav-link) {
    color: var(--text-secondary);
}

[data-theme="dark"] .pub-page .pub-rail .pub-rail__link:not(.btn):not(.nav-link):hover,
[data-theme="dark"] .pub-page .pub-rail .pub-rail__link:not(.btn):not(.nav-link):focus-visible,
[data-theme="dark"] .pub-page .pub-rail .pub-rail__link[aria-current="true"]:not(.btn):not(.nav-link) {
    color: var(--brand);
}


/* ── 22. Motion preferences ──────────────────────────────────────────────── */
/*
   Everything above degrades to a static page: the only animation is the hero
   pulse and the FAQ chevron rotation, and both are switched off here.        */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;      /* section links jump instead of gliding */
    }

    .pub-rail,
    .pub-rail__dot,
    .pub-rail__link {
        transition: none;
    }

    .pub-pulse {
        animation: none;
        opacity: 0.55;
    }

    .pub-card,
    .pub-faq__chev,
    .pub-mobilenav__link,
    .pub-iconbtn {
        transition: none;
    }

    .pub-card:hover {
        transform: none;
    }
}