/*
 * The public site's design vocabulary.
 *
 * These are the tokens from the reference board the owner approved
 * ("لوحة اتجاهات سيرفيوتيك"), carried over verbatim: the paper ground, the
 * green accent, the three typefaces, the radius set, the two shadows. The board
 * was built on the rule it recommends — one accent, no decorative gradients, a
 * radius you can count on one hand — so adopting its values and adopting its
 * argument are the same act.
 *
 * Light is the default. Dark is a redefinition of the same tokens, guarded so
 * an explicit light choice still wins over a dark OS; nothing below paints a
 * colour outside this block.
 *
 * The --pm-* names are aliases kept from the previous pass so every public view
 * keeps resolving without a rewrite. They are one indirection, never a second
 * palette: change a value here and it changes everywhere.
 */
:root {
    /* ---- surfaces ---- */
    --paper: #F6F8F7;
    --surface: #FFFFFF;
    --sunk: #EDF1EF;

    /* ---- ink ---- */
    --ink: #0E1614;
    --ink-2: #38443F;
    /* The board's muted is #68746F, which clears 4.5:1 on --surface but lands at
       4.27:1 on --sunk — and our footer and the calculator stage both put small
       print on --sunk, which the board never did. Darkened by the minimum that
       passes there (4.73:1); indistinguishable at reading size. */
    --muted: #626E69;

    /* ---- lines ---- */
    --line: #DCE3E0;
    --line-2: #C3CDC9;

    /* ---- the one accent ---- */
    --accent: #0E7F5F;
    /* The board's accent reads 4.39:1 on its own wash and 4.37:1 on --sunk —
       fine for a border, a fill or a 34px figure, a hair under AA for 14px text
       on a chip. So the colour the board chose stays exactly as it is, and small
       text on a wash uses this compliant sibling (5.8:1). */
    --accent-ink: #0B6B51;
    --on-accent: #FFFFFF;
    --accent-bright: #18C890;
    --accent-wash: #E6F4EE;

    /* ---- the one semantic hue: something that needs flagging ---- */
    --flag: #A8431D;
    --flag-wash: #F7ECE6;

    /* ---- elevation: two, and the second is rare ---- */
    --shadow: 0 1px 2px rgba(14, 22, 20, .05);
    --shadow-lift: 0 8px 24px -12px rgba(14, 22, 20, .22);

    /* ---- type ---- */
    color-scheme: light;

    --display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    /* ---- radius: four values, and 999 is not one of them ---- */
    --pm-r-xs: 4px;
    --pm-r-sm: 8px;
    --pm-r: 10px;
    /* Kept only so older rules resolve. The reference language has no pills:
       a chip there is a soft rectangle, so this is deliberately not 999px. */
    --pm-r-pill: 8px;

    /* ---- layout ---- */
    /* Single source of truth for the sticky header's rendered height (nav bar
       plus the announcement bar when the operator has one configured). This
       is a first-paint estimate only: public/partials/header.blade.php
       measures the real, live header (including the bar, in either locale,
       at any breakpoint) with a ResizeObserver and overwrites this value the
       instant the DOM exists, because the bar is conditional per business and
       a fixed number here can never be correct for every page. Every
       consumer -- scroll-padding-top included -- reads the variable, never a
       literal, so there is exactly one number to get wrong. */
    --pm-header-h: 64px;

    /* ---- aliases used across the public views ---- */
    --pm-ground: var(--paper);
    --pm-surface: var(--surface);
    --pm-surface-2: var(--sunk);
    --pm-panel: var(--surface);
    --pm-line: var(--line);
    --pm-line-strong: var(--line-2);
    --pm-ink: var(--ink);
    --pm-ink-2: var(--ink-2);
    --pm-ink-3: var(--muted);
    --pm-accent: var(--accent);
    --pm-accent-ink: var(--accent-ink);
    --pm-accent-dark: var(--accent-ink);
    --pm-accent-line: var(--accent);
    --pm-accent-soft: var(--accent-wash);
    --pm-accent-wash: var(--accent-wash);
    --pm-accent-bright: var(--accent-bright);
    --pm-on-accent: var(--on-accent);
    --pm-shadow: var(--shadow);
    --pm-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*
 * No dark variant, by decision.
 *
 * The reference board shipped one because a board is read at a desk at any
 * hour. A marketing site is a shopfront: it should look the same in every
 * screenshot, every deck and every phone, and committing to one treatment is
 * what lets the section rhythm below carry meaning. The application keeps its
 * own dark mode; this is the public site only.
 */

/* =====================================================================
   Base typography — the board's three roles
   ===================================================================== */
.public-marketing-body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.public-marketing-body h1,
.public-marketing-body h2,
.public-marketing-body h3,
.public-marketing-body h4,
.public-marketing-body .plans-title,
.public-marketing-body .plan-public-name {
    font-family: var(--display);
    font-weight: 600;
    /* app.css gives headings #32325d. Without this the page reads correctly on
       paper and turns navy-on-near-black the moment the visitor's OS is dark. */
    color: var(--ink);
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* Figures are set in the mono face and line up column to column. */
.pm-num,
.public-marketing-body .plan-public-price,
.public-marketing-body .plan-modal__price {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* The small uppercase label the board uses for every field name. */
.pm-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* =====================================================================
   Controls
   ===================================================================== */
/* ui-unified.css paints .btn-primary with a blue gradient. That sheet is shared
   with the whole back office, so it is not ours to change — but it meant the
   loudest control on every public page was both a gradient and a second accent.
   Scoped to the public body; the application keeps its own button untouched. */
.public-marketing-body .btn-primary,
.public-marketing-body .btn-primary:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-family: var(--body);
    font-weight: 600;
    box-shadow: none;
}

/* Spec: hover/active/focus-visible must keep >= 4.5:1 against --on-accent.
   --accent-bright (#18C890) on white measures 2.16:1 -- fails even the 3:1
   large-text floor, and focus-visible is the state a keyboard user sits in.
   --accent-ink (#0B6B51) measures 6.49:1. */
.public-marketing-body .btn-primary:hover,
.public-marketing-body .btn-primary:active,
.public-marketing-body .btn-primary:focus-visible {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
    color: var(--on-accent);
    box-shadow: none;
}

/* The quiet action beside it: outlined, never a second filled button. */
.public-marketing-body .btn-default,
.public-marketing-body .btn-default:focus {
    background: var(--surface);
    border-color: var(--line-2);
    color: var(--ink);
    font-family: var(--body);
    font-weight: 600;
}

.public-marketing-body .btn-default:hover,
.public-marketing-body .btn-default:focus-visible {
    background: var(--sunk);
    border-color: var(--muted);
    color: var(--ink);
}

.public-marketing-body a:focus-visible,
.public-marketing-body button:focus-visible,
.public-marketing-body input:focus-visible,
.public-marketing-body select:focus-visible,
.public-marketing-body textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The board states what is included as a checked list, never as a row of pills.
   A pill says "tag"; a check says "you get this". */
.pm-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
    font-size: 14px;
    color: var(--ink-2);
}

.pm-checklist li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    align-items: start;
}

/* The check is drawn by CSS, not by an element per row. Rendering it as a
   partial cost one include per feature per plan — ~800 on the pricing page —
   and every view render fires the module-asset composer, so the page went from
   137 queries to 9,289. A mask keeps the accent colour with zero markup. */
.pm-checklist li::before {
    content: "";
    width: 13px;
    height: 13px;
    margin-top: 6px;
    background: var(--accent);
    -webkit-mask: var(--pm-check) center / contain no-repeat;
    mask: var(--pm-check) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .public-marketing-body *,
    .public-marketing-body *::before,
    .public-marketing-body *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* A link with no class of its own inherits AdminLTE's blue (#3c8dbc) from
   app.css — a second accent arriving from a stylesheet written for the back
   office. Scoped to classless anchors so every styled link keeps its own rule. */
.public-marketing-body a:not([class]) {
    color: var(--accent-ink);
}

/* app.css paints .text-muted #777 (4.48:1 on white — a hair under AA) and
   .text-danger #f5365c (3.54:1). Both are shared with the back office, so they
   are not ours to change there; scoped to the public body they become the two
   tokens that already mean "secondary" and "needs flagging". */
.public-marketing-body .text-muted {
    color: var(--muted);
}

/* vendor.css declares .text-danger, .text-red with !important, so matching it
   is the only way to win here without touching the shared sheet. */
.public-marketing-body .text-danger,
.public-marketing-body .help-block {
    color: var(--flag) !important;
}

/* =====================================================================
   Fields with a leading icon
   =====================================================================
   The positioning lives in ui-unified.css, which owns .input-group-addon for
   the whole application and now lifts a leading ICON out of its box on every
   screen. Duplicating it here is what let the two surfaces drift apart in the
   first place, so this block overrides only the two things the public palette
   actually says differently: the radius (8px, not the back office's 12px) and
   the ink. Everything else - the absolute placement, the :has(> i) guard that
   keeps a text suffix in its box, the RTL flip, the far-end squaring - is
   inherited from that one definition. */
.public-marketing-body .input-group > .input-group-addon:first-child:has(> i) {
    color: var(--muted);
}

.public-marketing-body .input-group > .input-group-addon:first-child:has(> i) ~ .form-control {
    border-radius: var(--pm-r-sm);
}

.public-marketing-body .input-group > .input-group-addon:first-child:has(> i) ~ .select2-container .select2-selection--single {
    border-radius: var(--pm-r-sm);
}

/* A dropdown with no leading icon still has to match the inputs beside it. */
.public-marketing-body .select2-selection--single {
    border-radius: var(--pm-r-sm);
}

.public-marketing-body a:not([class]):hover,
.public-marketing-body a:not([class]):focus {
    color: var(--accent);
}

/* =====================================================================
   Section rhythm
   =====================================================================
   A long page on one flat ground reads as one undifferentiated wall, and the
   reader loses track of where an idea starts and stops. So sections alternate
   across three grounds — paper, white, sunk — full bleed, with the same
   generous vertical rhythm. The band is the separator; there is no rule, no
   shadow and no gradient doing that job.

   Three grounds and not more: each one has to stay recognisable as "the same
   page", and a fourth starts reading as a different site.
*/
.pm-band {
    position: relative;
    padding: 72px 0;
}

/*
 * Full-bleed colour from inside a centred container.
 *
 * Not `left:50%; width:100vw` — 100vw counts the scrollbar, so the band lands a
 * few pixels off centre and leaves a sliver of the page ground down one edge,
 * which is exactly what it looked like. A ring of the same colour painted by
 * box-shadow and clipped to the horizontal axis has no such arithmetic: it is
 * the band's own colour continuing outwards for as far as the viewport goes.
 */
.pm-band--surface {
    background: var(--surface);
    box-shadow: 0 0 0 100vmax var(--surface);
    clip-path: inset(0 -100vmax);
}

.pm-band--sunk {
    background: var(--sunk);
    box-shadow: 0 0 0 100vmax var(--sunk);
    clip-path: inset(0 -100vmax);
}

.pm-band--tight { padding: 48px 0; }
.pm-band--lead { padding-top: 56px; }

/* A section's own heading block, so every band opens the same way. */
.pm-band__head {
    max-width: 62ch;
    margin: 0 0 32px;
}

.pm-band__eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin: 0 0 12px;
}

.pm-band__title {
    margin: 0 0 10px;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.3;
}

.pm-band__note {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

@media (max-width: 991px) {
    .pm-band { padding: 52px 0; }
    .pm-band--tight { padding: 36px 0; }
}

/* ---------------------------------------------------------------------------
 * Arabic needs more room between lines than Latin does.
 *
 * Arabic letters rise above the Latin ascender and drop below its descender, so
 * a line-height tuned on an English headline closes up on Arabic and the tail of
 * one line touches the head of the next. The public headings run between 1.02
 * and 1.25, which is correct for the Latin they were set against and unreadable
 * in Arabic.
 *
 * Every public title is a real heading element, so this raises the floor once
 * rather than restating it per class, and it cannot miss a heading a later page
 * adds. Body copy is already 1.7 to 1.8 and is left alone.
 * ------------------------------------------------------------------------- */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.45;
}