/* ============================================================================
   PropEdge - PUBLIC LANDING PAGE (v2, 11 Oct 2026)
   File: design/css/propedge-landing.css
   LIVE COPY at PropEdge_UI/css/ - Ayaz, 11 Oct 2026, with index.aspx (layout
   v2). Rule-for-rule the approved design file below this header; the live
   site cannot reference design/. Change the design file first, then re-copy -
   never edit this copy on its own, or the two drift.
   Ayaz · 11 Oct 2026 · founders' feedback of 11 Oct (layout "very stretched and
   wide"; follow TurboTenant's STRUCTURE, none of its content). Approved by Zain,
   11 Oct (docs/design/layout-width-2026-10-11.md section 9). Preview:
   design/previews/landing-v2.html. Replaces the 1 Oct / 8 Oct full-width file.

   Load order (index.aspx): propedge-fonts.css -> propedge-tokens.css ->
   propedge-components.css -> this file. No Bootstrap.

   What changed from 8 Oct:
   - CONTAINER: one centred column, 1200px of content plus the side gutter
     (20 / 24 / 32px). Backgrounds stay full width (bands).
   - HERO: a full-width navy band, text start, the product mock end, and a
     three-fact strip (lpAssure1-3) across the bottom. The next band lifts
     over the hero with rounded top corners.
   - Section heads: centred, or split (title start, intro end), per section.
   - Type scale reaches its maximum at ~1150px and stays there: hero 48px,
     section titles 36px, item headings 22px, lead 18px, body 16px.
   - Closing call to action: a navy card inside the container, straddling the
     white page and the navy footer. Footer: navy band, three columns, then
     footer.ascx's copyright and support lines.

   Rules kept:
   - Every colour is a token. The rgba() values are measured where used.
   - Logical properties only, so the page mirrors for Arabic. The [dir=rtl]
     rules at the end are the only exceptions.
   - Breakpoints are Bootstrap 5.3's: 576 / 768 / 992 / 1200.
   - Nothing below 12px.
   ========================================================================= */

.pe-lp {
  /* Landing-only tokens. Proposed for tokens/typography.json (landing). */
  --pe-lp-hero:      clamp(2rem, 1.25rem + 2.4vw, 3rem);       /* 32px @375 -> 48px from ~1150px */
  --pe-lp-h2:        clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem);  /* 26px @375 -> 36px from ~1150px */
  --pe-lp-h3:        var(--pe-fs-h3);                          /* 22px */
  --pe-lp-lead:      1.125rem;                                 /* 18px */
  /* THE CONTAINER (11 Oct): 1200px of content, centred; gutters inside it. */
  --pe-lp-content:   75rem;                                    /* 1200px */
  --pe-lp-gutter:    var(--pe-space-20);                       /* 20px <576, 24px >=576, 32px >=992 */
  --pe-lp-section:   var(--pe-space-64);                       /* band padding: 64 / 80 / 96 */
  --pe-lp-head-gap:  var(--pe-space-40);                       /* section head -> its grid: 40 / 48 */
  --pe-lp-lift:      var(--pe-space-32);                       /* how far a band rises over the hero */
  background: var(--pe-surface);
  color: var(--pe-text);
}
@media (min-width: 576px)  { .pe-lp { --pe-lp-gutter: var(--pe-space-24); } }
@media (min-width: 768px)  { .pe-lp { --pe-lp-section: var(--pe-space-80); --pe-lp-head-gap: var(--pe-space-48); } }
@media (min-width: 992px)  { .pe-lp { --pe-lp-gutter: var(--pe-space-32); } }
@media (min-width: 1200px) { .pe-lp { --pe-lp-section: var(--pe-space-96); } }

body.pe-lp { margin: 0; }
.pe-lp *, .pe-lp *::before, .pe-lp *::after { box-sizing: border-box; }
.pe-lp img, .pe-lp svg { max-width: 100%; }

/* One container for every band, the header and the footer. */
.pe-lp__wrap {
  max-width: calc(var(--pe-lp-content) + 2 * var(--pe-lp-gutter));
  margin-inline: auto;
  padding-inline: var(--pe-lp-gutter);
}

/* Skip link: visible only on keyboard focus. */
.pe-lp__skip {
  position: absolute; inset-inline-start: var(--pe-space-16); inset-block-start: -100px;
  z-index: calc(var(--pe-z-sticky) + 1);
  background: var(--pe-brand-900); color: var(--pe-neutral-0);    /* 14.75:1 */
  padding: var(--pe-space-12) var(--pe-space-16); border-radius: var(--pe-radius-md);
  font-weight: var(--pe-fw-semibold); text-decoration: none;
}
.pe-lp__skip:focus { inset-block-start: var(--pe-space-8); }

/* ==========================================================================
   1. HEADER (publicheader.ascx, markup unchanged except Sign in: ghost -> secondary)
   ========================================================================== */
.pe-lp-head {
  position: sticky; inset-block-start: 0; z-index: var(--pe-z-sticky);
  background: var(--pe-surface);
  border-block-end: 1px solid var(--pe-border);
}
.pe-lp-head__bar { display: flex; align-items: center; gap: var(--pe-space-12); min-height: 64px; }
@media (min-width: 992px) { .pe-lp-head__bar { min-height: 72px; } }

.pe-lp-head__brand { display: inline-flex; align-items: center; min-height: var(--pe-tap-min); flex: 0 0 auto; border-radius: var(--pe-radius-xs); }   /* 44px target (11 Oct) */
.pe-lp-head__brand img { display: block; height: 40px; width: auto; }
@media (min-width: 768px) { .pe-lp-head__brand img { height: 44px; } }

/* In-page anchors: desktop only, centred between brand and actions. */
.pe-lp-head__nav { display: none; }
@media (min-width: 992px) {
  .pe-lp-head__nav { display: block; margin-inline: auto; }
  .pe-lp-head__nav ul { display: flex; gap: var(--pe-space-4); list-style: none; margin: 0; padding: 0; }
  .pe-lp-head__nav a {
    display: inline-flex; align-items: center; min-height: var(--pe-tap-min);
    padding-inline: var(--pe-space-12); border-radius: var(--pe-radius-md);
    color: var(--pe-text-strong); font-weight: var(--pe-fw-semibold); font-size: var(--pe-fs-sm);   /* 17.15:1 */
    text-decoration: none;
  }
  .pe-lp-head__nav a:hover { background: var(--pe-neutral-50); color: var(--pe-brand-700); }
}

.pe-lp-head__end { display: flex; align-items: center; gap: var(--pe-space-4); margin-inline-start: auto; }
@media (min-width: 576px) { .pe-lp-head__end { gap: var(--pe-space-8); } }
@media (min-width: 992px) { .pe-lp-head__end { margin-inline-start: 0; } }

.pe-lp-head__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--pe-tap-min); min-width: var(--pe-tap-min); padding-inline: var(--pe-space-12);
  color: var(--pe-brand-700); font-weight: var(--pe-fw-semibold); text-decoration: none;   /* 9.31:1 */
  border-radius: var(--pe-radius-md);
}
.pe-lp-head__lang:hover { background: var(--pe-brand-50); color: var(--pe-brand-800); }
.pe-lp-head__lang:lang(ar) { font-family: var(--pe-font-arabic); }
.pe-lp-head__lang:lang(en) { font-family: var(--pe-font-latin); }
/* Header buttons are 44px tall (2.5.8 target size), not the 36px .pe-btn--sm. */
.pe-lp-head__end .pe-btn--sm { min-height: var(--pe-tap-min); padding-inline: var(--pe-space-16); }

/* COMPACT HEADER below 400px (11 Oct, Rahil's G8 Medium on db54d91). v2's 20px gutter
   and 44px buttons made the ARABIC bar 333px wide in a 320px column at 360 (Sign in
   started 9px inside the gutter). Below 400px: the 32px lockup (94px wide), a 14px
   language link and 12px button padding; below 360px the 8 Oct 16px gutter and 8px
   button padding. Measured after, AR (the wider language): 279px of 320 at 360,
   271px of 288 at 320. Every target stays 44px tall (min-height), the language
   link 44px wide. Tighten, never hide (Saima, 5 Oct). */
@media (max-width: 399.98px) {
  .pe-lp-head__bar { gap: var(--pe-space-8); }
  .pe-lp-head__brand img { height: 32px; }
  .pe-lp-head__lang { padding-inline: var(--pe-space-8); font-size: var(--pe-fs-sm); }
  .pe-lp-head__end .pe-btn--sm { padding-inline: var(--pe-space-12); }
}
@media (max-width: 359.98px) {
  .pe-lp { --pe-lp-gutter: var(--pe-space-16); }
  .pe-lp-head__end .pe-btn--sm { padding-inline: var(--pe-space-8); }
}
.pe-lp-head__trial { display: none; }
@media (min-width: 576px) { .pe-lp-head__trial { display: inline-flex; } }

/* ==========================================================================
   2. HERO - full-width navy band; text start, product mock end; fact strip
   MEASURED on --pe-brand-900 #0C2A41: white 14.76:1; --pe-brand-100 #D9EAF6
   11.98:1; --pe-accent-300 #5FBDBA 6.66:1 (eyebrow, fact ticks).
   ========================================================================== */
.pe-lp-hero {
  background: var(--pe-brand-900);
  color: var(--pe-neutral-0);
  padding-block: var(--pe-space-48) calc(var(--pe-space-48) + var(--pe-lp-lift));
  overflow: hidden;
}
@media (min-width: 992px)  { .pe-lp-hero { padding-block: var(--pe-space-80) calc(var(--pe-space-64) + var(--pe-lp-lift)); } }

/* DOM and reading order: text, facts, mock. Phones and tablets show them in
   that order; from 992px the mock moves beside the text and the facts run
   under both columns as a strip. */
.pe-lp-hero__grid { display: grid; gap: var(--pe-space-32); align-items: center;
                    grid-template-areas: "text" "facts" "shot"; }
.pe-lp-hero__text { grid-area: text; }
.pe-lp-hero__facts { grid-area: facts; }
.pe-lp-hero__grid > .pe-lp-shot { grid-area: shot; }
@media (min-width: 992px) {
  .pe-lp-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--pe-space-64); row-gap: 0;
                      grid-template-areas: "text shot" "facts facts"; }
}

.pe-lp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--pe-space-8);
  margin: 0 0 var(--pe-space-16);
  font-size: var(--pe-fs-sm); font-weight: var(--pe-fw-semibold);
  color: var(--pe-accent-300);                                    /* 6.66:1 on brand-900 */
}
.pe-lp-eyebrow .pe-icon { width: 18px; height: 18px; }

.pe-lp-hero__title {
  margin: 0; font-size: var(--pe-lp-hero); line-height: var(--pe-lh-tight);
  font-weight: var(--pe-fw-bold); letter-spacing: var(--pe-ls-tight);
  color: var(--pe-neutral-0);                                     /* 14.75:1 */
  text-wrap: balance;
}
.pe-lp-hero__lead {
  margin: var(--pe-space-20) 0 0; max-width: 34rem;
  font-size: var(--pe-lp-lead); line-height: var(--pe-lh-relaxed);
  color: var(--pe-brand-100);                                     /* 11.98:1 */
}

.pe-lp-cta { display: flex; flex-wrap: wrap; gap: var(--pe-space-12); margin-block-start: var(--pe-space-32); }
.pe-lp-cta .pe-btn { flex: 1 1 100%; }
@media (min-width: 576px) { .pe-lp-cta .pe-btn { flex: 0 0 auto; } }

/* Buttons on navy, through the component's own variables (no new component):
   primary = teal fill, navy label (--pe-brand-900 on --pe-accent-300 6.66:1;
   hover --pe-accent-200 #9ED6D4 9.15:1); the fill against the navy band 6.66:1.
   secondary = outline, white label 14.75:1, 1px white border 14.75:1;
   hover fill rgba(255,255,255,.10) over #0C2A41 = #243F54, white on it 10.97:1. */
.pe-lp-hero .pe-btn { --_bg: var(--pe-accent-300); --_bg-hover: var(--pe-accent-200); --_fg: var(--pe-brand-900); --_bd: var(--pe-accent-300); }
.pe-lp-hero .pe-btn--secondary { --_bg: transparent; --_bg-hover: rgba(255, 255, 255, .10); --_fg: var(--pe-neutral-0); --_bd: var(--pe-neutral-0); }
.pe-lp-hero .pe-btn--secondary:hover { color: var(--pe-neutral-0); border-color: var(--pe-neutral-0); }
/* Focus ring on navy: white (14.75:1); the token ring #2A76AC is 3.01:1 there. */
.pe-lp-hero :focus-visible, .pe-lp-final :focus-visible, .pe-lp-foot :focus-visible { outline-color: var(--pe-neutral-0); }

/* The three facts. In the hero text on phones and tablets; from 992px a strip
   across the full container under the two columns (see 2b). */
.pe-lp-assure {
  display: flex; flex-wrap: wrap; gap: var(--pe-space-8) var(--pe-space-20);
  list-style: none; margin: var(--pe-space-24) 0 0; padding: 0;
  font-size: var(--pe-fs-sm); color: var(--pe-neutral-0);        /* 14.75:1 */
}
.pe-lp-assure li { display: inline-flex; align-items: center; gap: var(--pe-space-8); }
.pe-lp-assure .pe-icon { width: 18px; height: 18px; color: var(--pe-accent-300); stroke-width: 2.2; flex: 0 0 auto; }

/* 2b. Fact strip (>= 992px): the assurance list is moved out of the text
   column in the markup (index.aspx v2) into .pe-lp-hero__facts. */
.pe-lp-hero__facts .pe-lp-assure { margin: 0; display: grid; gap: var(--pe-space-12); }
.pe-lp-hero__facts .pe-lp-assure li { font-weight: var(--pe-fw-semibold); gap: var(--pe-space-12); }
.pe-lp-hero__facts .pe-lp-assure .pe-icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%;
                                            background: rgba(95, 189, 186, .16); }     /* tint of accent-300 = #194254; icon on it 4.86:1 */
@media (min-width: 768px) { .pe-lp-hero__facts .pe-lp-assure { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pe-space-24); } }
@media (min-width: 992px) {
  .pe-lp-hero__facts { margin-block-start: var(--pe-space-48); padding-block-start: var(--pe-space-32);
                       border-block-start: 1px solid rgba(255, 255, 255, .16); }   /* divider #334C5F, 1.64:1: decoration only */
  .pe-lp-hero__facts .pe-lp-assure li { font-size: var(--pe-lp-lead); }
}

/* ==========================================================================
   3. PRODUCT MOCK (CSS-drawn screen; unchanged from v1 except the frame)
   ========================================================================== */
.pe-lp-shot { margin: 0; }
.pe-lp-shot figcaption {
  margin-block-start: var(--pe-space-12);
  font-size: var(--pe-fs-caption); color: var(--pe-text-muted); text-align: center;  /* 6.78:1 */
}
.pe-lp-hero .pe-lp-shot figcaption { color: var(--pe-brand-100); }                   /* 11.98:1 */

.pe-lp-mock {
  container-type: inline-size;
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius-lg);
  box-shadow: var(--pe-shadow-xl);
  overflow: hidden;
  font-size: 13px; line-height: 1.4;
  color: var(--pe-text);
  text-align: start;
}
.pe-lp-hero .pe-lp-mock { border-color: transparent; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.pe-lp-mock__bar {
  display: flex; align-items: center; gap: var(--pe-space-12);
  padding: var(--pe-space-8) var(--pe-space-12);
  background: var(--pe-neutral-50); border-block-end: 1px solid var(--pe-border);
}
.pe-lp-mock__dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.pe-lp-mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--pe-neutral-300); }
.pe-lp-mock__url {
  flex: 1 1 auto; min-width: 0; max-width: 22rem; margin-inline: auto;
  padding: 3px var(--pe-space-12); border-radius: var(--pe-radius-pill);
  background: var(--pe-surface); border: 1px solid var(--pe-border);
  font-size: 12px; color: var(--pe-text-muted); text-align: center;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-lp-mock__app { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-height: 0; }
@container (min-width: 620px) { .pe-lp-mock__app { grid-template-columns: 150px minmax(0, 1fr); } }
.pe-lp-mock__nav {
  background: var(--pe-brand-800); color: var(--pe-brand-100);
  padding: var(--pe-space-12) var(--pe-space-8);
  display: flex; flex-direction: column; gap: 2px;
}
.pe-lp-mock__nav span {
  display: flex; align-items: center; gap: var(--pe-space-8);
  padding: 7px 6px; border-radius: var(--pe-radius-sm); white-space: nowrap; overflow: hidden;
  font-size: 12px; font-weight: var(--pe-fw-semibold);
}
.pe-lp-mock__nav span.is-on { background: var(--pe-brand-600); color: var(--pe-neutral-0); }
.pe-lp-mock__nav .pe-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.pe-lp-mock__nav em { font-style: normal; display: none; }
@container (min-width: 620px) { .pe-lp-mock__nav em { display: inline; } .pe-lp-mock__nav span { padding-inline: var(--pe-space-8); } }
.pe-lp-mock__main { padding: var(--pe-space-12); background: var(--pe-canvas); min-width: 0; }
@container (min-width: 620px) { .pe-lp-mock__main { padding: var(--pe-space-16); } }
.pe-lp-mock__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pe-space-8); margin-block-end: var(--pe-space-12); }
.pe-lp-mock__head b { font-size: 15px; color: var(--pe-text-strong); }
.pe-lp-mock__btn {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: var(--pe-radius-sm);
  background: var(--pe-brand-600); color: var(--pe-neutral-0);
  font-size: 12px; font-weight: var(--pe-fw-semibold);
}
.pe-lp-mock__btn .pe-icon { width: 14px; height: 14px; }
.pe-lp-mock__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pe-space-8);
                     list-style: none; margin: 0 0 var(--pe-space-12); padding: 0; }
@container (min-width: 460px) { .pe-lp-mock__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pe-lp-mock__stats li { background: var(--pe-surface); border: 1px solid var(--pe-border); border-radius: var(--pe-radius-md);
                        padding: var(--pe-space-8) var(--pe-space-12); }
.pe-lp-mock__stats b { display: block; font-size: 20px; line-height: 1.15; color: var(--pe-text-strong); font-variant-numeric: tabular-nums; }
.pe-lp-mock__stats span { font-size: 12px; color: var(--pe-text-muted); }
.pe-lp-mock__rows { list-style: none; margin: 0; padding: 0;
                    background: var(--pe-surface); border: 1px solid var(--pe-border); border-radius: var(--pe-radius-md); }
.pe-lp-mock__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--pe-space-8);
                   align-items: center; padding: var(--pe-space-8) var(--pe-space-12); border-block-start: 1px solid var(--pe-neutral-100); }
.pe-lp-mock__row:first-child { border-block-start: 0; }
.pe-lp-mock__what { min-width: 0; }
.pe-lp-mock__what b { display: block; color: var(--pe-text-strong); font-weight: var(--pe-fw-semibold);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-lp-mock__what > span { display: block; font-size: 12px; color: var(--pe-text-muted);
                           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-lp-mock__ref { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.pe-lp-mock__tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pe-lp-mock__due { font-size: 12px; color: var(--pe-text-muted); white-space: nowrap; }
.pe-lp-mock .pe-badge, .pe-lp-mock .pe-sla-chip { font-size: 12px; }
.pe-lp-mock .pe-badge { padding: 1px 7px; }
.pe-lp-mock .pe-sla-chip__body { padding: 1px 6px; }
.pe-lp-mock .pe-sla-chip__cap { inline-size: 20px; flex-basis: 20px; }
@container (max-width: 460px) {
  .pe-lp-mock__row { grid-template-columns: minmax(0, 1fr); }
  .pe-lp-mock__tags { justify-content: flex-start; }
}

/* ==========================================================================
   4. SECTIONS (shared)
   ========================================================================== */
.pe-lp-sec { padding-block: var(--pe-lp-section); }
.pe-lp-sec--tint  { background: var(--pe-canvas); }        /* #F4F6F8 */
.pe-lp-sec--brand { background: var(--pe-brand-50); }     /* #EFF6FB */
/* The first band after the hero rises over it with rounded top corners. */
.pe-lp-sec--lift { position: relative; background: var(--pe-surface); margin-block-start: calc(-1 * var(--pe-lp-lift));
                   border-start-start-radius: var(--pe-radius-xl); border-start-end-radius: var(--pe-radius-xl); }
@media (min-width: 992px) { .pe-lp-sec--lift { border-start-start-radius: 32px; border-start-end-radius: 32px; } }

.pe-lp-sec__head { max-width: 46rem; margin-block-end: var(--pe-lp-head-gap); }
.pe-lp-sec__head--center { margin-inline: auto; text-align: center; }
/* Split head: title at the start, the intro at the end, from 992px. */
@media (min-width: 992px) {
  .pe-lp-sec__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
                            gap: var(--pe-space-64); align-items: end; }
  .pe-lp-sec__head--split .pe-lp-sec__sub { margin: 0; }
}
.pe-lp-sec__kicker {
  margin: 0 0 var(--pe-space-8);
  font-size: var(--pe-fs-sm); font-weight: var(--pe-fw-semibold); color: var(--pe-accent-700);   /* 8.15:1 white; 7.52:1 canvas; 7.47:1 brand-50 */
}
.pe-lp-sec__title {
  margin: 0; font-size: var(--pe-lp-h2); line-height: var(--pe-lh-heading);
  font-weight: var(--pe-fw-bold); letter-spacing: var(--pe-ls-tight); color: var(--pe-text-strong);
  text-wrap: balance;
}
.pe-lp-sec__sub { margin: var(--pe-space-12) 0 0; max-width: 40rem; font-size: var(--pe-lp-lead); line-height: var(--pe-lh-relaxed); color: var(--pe-text); }   /* 9.72:1 */
.pe-lp-sec__head--center .pe-lp-sec__sub { margin-inline: auto; }

/* ==========================================================================
   5. "TODAY vs WITH PROPEDGE" - three cards, centred head (unchanged grid)
   ========================================================================== */
.pe-lp-swap { display: grid; gap: var(--pe-space-16); list-style: none; margin: 0; padding: 0; }
@media (min-width: 992px) { .pe-lp-swap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pe-space-24); } }
.pe-lp-swap li { display: flex; flex-direction: column; background: var(--pe-surface); border: 1px solid var(--pe-border);
                 border-radius: var(--pe-radius-lg); overflow: hidden; box-shadow: var(--pe-shadow-xs); }
.pe-lp-swap__was, .pe-lp-swap__now { margin: 0; padding: var(--pe-space-24); }
.pe-lp-swap__was { color: var(--pe-text-muted); background: var(--pe-surface); flex: 1 1 auto; }   /* 6.78:1 */
.pe-lp-swap__now { color: var(--pe-text-strong); background: var(--pe-success-bg); font-weight: var(--pe-fw-semibold); }  /* 15.12:1 */
.pe-lp-swap__label { display: flex; align-items: center; gap: var(--pe-space-8); margin-block-end: var(--pe-space-8);
                     font-size: var(--pe-fs-caption); font-weight: var(--pe-fw-semibold); }
.pe-lp-swap__was .pe-lp-swap__label { color: var(--pe-text-muted); }
.pe-lp-swap__now .pe-lp-swap__label { color: var(--pe-success-fg); }      /* 7.16:1 */
.pe-lp-swap__label .pe-icon { width: 16px; height: 16px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 992px) { .pe-lp-swap li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; } }
}

/* ==========================================================================
   6. FEATURES - split head, six items in a 3-column grid, maintenance FIRST.
   Items are open (no card frame) like a feature list; the lead item keeps
   a tinted panel, a 2px brand border and the "Start here" tag (AC-M2).
   ========================================================================== */
.pe-lp-features { display: grid; gap: var(--pe-space-32) var(--pe-space-24); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px)  { .pe-lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pe-lp-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pe-space-40) var(--pe-space-32); } }

/* NO BLEED (11 Oct, Rahil's G8 on 40aee9d): the lead panel used to bleed 24px past
   its cell, which left 0px to the next column at 768-1199 and 8px at 1200+.
   Every item now has the same 24px padding and 2px border (transparent on the open
   items), so the text still lines up across columns and the lead panel sits wholly
   inside its cell: the full grid gap to every neighbour, the gutter to the edge. */
.pe-lp-feature { height: 100%; position: relative; padding: calc(var(--pe-space-24) - 2px);
                 border: 2px solid transparent; border-radius: var(--pe-radius-lg); }
.pe-lp-feature--lead { background: var(--pe-brand-50); border-color: var(--pe-brand-600); }
.pe-lp-feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--pe-radius-lg);
  background: var(--pe-brand-50); color: var(--pe-brand-600);
  margin-block-end: var(--pe-space-16);
}
.pe-lp-feature--lead .pe-lp-feature__icon { background: var(--pe-brand-600); color: var(--pe-neutral-0); }
.pe-lp-feature__icon .pe-icon { width: 24px; height: 24px; }
.pe-lp-feature__tag {
  position: absolute; inset-block-start: var(--pe-space-24); inset-inline-end: var(--pe-space-24);
  font-size: var(--pe-fs-overline); font-weight: var(--pe-fw-semibold);
  padding: 2px var(--pe-space-8); border-radius: var(--pe-radius-pill);
  background: var(--pe-surface); color: var(--pe-brand-700);       /* 9.31:1 */
}
.pe-lp-feature h3 { margin: 0 0 var(--pe-space-8); font-size: var(--pe-lp-h3); line-height: var(--pe-lh-snug);
                    font-weight: var(--pe-fw-semibold); color: var(--pe-text-strong); }
.pe-lp-feature p { margin: 0; line-height: var(--pe-lh-base); color: var(--pe-text); max-width: 36rem; }
.pe-lp-feature__more { display: inline-flex; align-items: center; gap: 4px; margin-block-start: var(--pe-space-12);
                       min-height: var(--pe-tap-min); font-weight: var(--pe-fw-semibold);
                       color: var(--pe-text-link); text-decoration: underline; text-underline-offset: 3px; }   /* 6.91:1 white; 6.33:1 brand-50 */
.pe-lp-feature__more .pe-icon { width: 16px; height: 16px; }
.pe-lp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: var(--pe-space-16); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .pe-lp-features > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .pe-lp-feature { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .pe-lp-feature--lead { height: auto; }
    .pe-lp-feature__icon, .pe-lp-feature__more { justify-self: start; }
  }
}

/* ==========================================================================
   7. MAINTENANCE DESK - a feature row: text start, ticket mock end
   ========================================================================== */
.pe-lp-desk { display: grid; gap: var(--pe-space-40); align-items: center; }
@media (min-width: 992px) { .pe-lp-desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pe-space-64); } }
.pe-lp-desk .pe-lp-sec__head { margin-block-end: var(--pe-space-32); }

.pe-lp-steps { list-style: none; margin: 0; padding: 0; counter-reset: pe-step; display: grid; gap: var(--pe-space-24); }
.pe-lp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--pe-space-16); counter-increment: pe-step; }
.pe-lp-steps li::before {
  content: counter(pe-step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--pe-brand-600); color: var(--pe-neutral-0);       /* 6.91:1 */
  font-weight: var(--pe-fw-bold); font-variant-numeric: tabular-nums;
}
.pe-lp-steps h3 { margin: 6px 0 4px; font-size: var(--pe-fs-h4); line-height: var(--pe-lh-snug); color: var(--pe-text-strong); }
.pe-lp-steps p { margin: 0; max-width: 34rem; color: var(--pe-text); line-height: var(--pe-lh-base); }

.pe-lp-ticket { background: var(--pe-surface); border: 1px solid var(--pe-border); border-radius: var(--pe-radius-lg);
                box-shadow: var(--pe-shadow-lg); overflow: hidden; text-align: start; }
.pe-lp-ticket__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pe-space-8);
                      padding: var(--pe-space-16) var(--pe-space-20); border-block-end: 1px solid var(--pe-border); }
.pe-lp-ticket__ref { font-size: var(--pe-fs-sm); font-weight: var(--pe-fw-semibold); color: var(--pe-text-muted);
                     direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.pe-lp-ticket__title { margin: 4px 0 0; font-size: var(--pe-fs-h4); line-height: var(--pe-lh-snug); color: var(--pe-text-strong); font-weight: var(--pe-fw-semibold); }
.pe-lp-ticket__body { padding: var(--pe-space-16) var(--pe-space-20); }
.pe-lp-ticket__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pe-space-12) var(--pe-space-16); margin: 0; }
.pe-lp-ticket__meta dt { font-size: var(--pe-fs-caption); color: var(--pe-text-muted); font-weight: var(--pe-fw-regular); }
.pe-lp-ticket__meta dd { margin: 2px 0 0; font-weight: var(--pe-fw-semibold); color: var(--pe-text-strong); min-width: 0; overflow-wrap: anywhere; }
.pe-lp-ticket__photos { display: flex; gap: var(--pe-space-8); margin-block: var(--pe-space-16); }
.pe-lp-ticket__photo { width: 88px; height: 66px; border-radius: var(--pe-radius-md);
                       background: linear-gradient(135deg, var(--pe-neutral-100), var(--pe-neutral-200));
                       border: 1px solid var(--pe-border); color: var(--pe-neutral-600);
                       display: inline-flex; align-items: center; justify-content: center; }
.pe-lp-ticket__photo .pe-icon { width: 24px; height: 24px; }
.pe-lp-ticket__tl { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--pe-border); padding-block-start: var(--pe-space-12); }
.pe-lp-ticket__tl li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--pe-space-12);
                       padding-block: 6px; font-size: var(--pe-fs-sm); }
.pe-lp-ticket__tl time { color: var(--pe-text-muted); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
.pe-lp-ticket__tl span { color: var(--pe-text); }

/* ==========================================================================
   8. WHO IT IS FOR - split head row + three items
   ========================================================================== */
.pe-lp-fit { display: grid; gap: var(--pe-space-24); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .pe-lp-fit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pe-space-32); } }
.pe-lp-fit li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--pe-space-16); align-items: start; align-content: start;
                background: var(--pe-surface); border-radius: var(--pe-radius-lg); padding: var(--pe-space-24); box-shadow: var(--pe-shadow-xs); }
@media (min-width: 768px) { .pe-lp-fit li { grid-template-columns: 1fr; } }
.pe-lp-fit h3 { margin: 0 0 6px; font-size: var(--pe-lp-h3); line-height: var(--pe-lh-snug); color: var(--pe-text-strong); }
.pe-lp-fit p { margin: 0; color: var(--pe-text); line-height: var(--pe-lh-base); }   /* 9.72:1 on white */
.pe-lp-fit .pe-lp-feature__icon { margin: 0; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .pe-lp-fit li { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .pe-lp-fit li > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .pe-lp-fit .pe-lp-feature__icon { margin-block-end: var(--pe-space-16); }
  }
}

/* ==========================================================================
   9. HOW THE TRIAL WORKS - centred head, three numbered steps joined by a line
   ========================================================================== */
.pe-lp-trial { display: grid; gap: var(--pe-space-16); list-style: none; margin: 0; padding: 0; counter-reset: pe-trial; }
@media (min-width: 768px) { .pe-lp-trial { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pe-space-24); } }
.pe-lp-trial li { position: relative; counter-increment: pe-trial; background: var(--pe-surface); border: 1px solid var(--pe-border);
                  border-radius: var(--pe-radius-lg); padding: var(--pe-space-24); }
.pe-lp-trial li::before {
  content: counter(pe-trial);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-block-end: var(--pe-space-16);
  background: var(--pe-brand-900); color: var(--pe-neutral-0);    /* 14.75:1 */
  font-weight: var(--pe-fw-bold); font-variant-numeric: tabular-nums;
}
.pe-lp-trial h3 { margin: 0 0 6px; font-size: var(--pe-lp-h3); line-height: var(--pe-lh-snug); color: var(--pe-text-strong); }
.pe-lp-trial p { margin: 0; color: var(--pe-text); line-height: var(--pe-lh-base); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .pe-lp-trial li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .pe-lp-trial li::before { justify-self: start; }
  }
}
.pe-lp-trial__foot { display: flex; flex-direction: column; align-items: center; gap: var(--pe-space-12);
                     margin-block-start: var(--pe-space-40); text-align: center; }
.pe-lp-trial__foot p { margin: 0; color: var(--pe-text-muted); }    /* 6.78:1 */
@media (max-width: 575.98px) { .pe-lp-trial__foot .pe-btn { width: 100%; } }

/* ==========================================================================
   10. FAQ - head start (1/3), questions end (2/3) from 992px
   ========================================================================== */
.pe-lp-faq { display: grid; gap: var(--pe-space-12); max-width: 52rem; margin-inline: auto; }
.pe-lp-faq details { background: var(--pe-surface); border: 1px solid var(--pe-border); border-radius: var(--pe-radius-lg); }
.pe-lp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pe-space-16);
  min-height: 60px; padding: var(--pe-space-12) var(--pe-space-20); cursor: pointer; list-style: none;
  font-size: var(--pe-fs-lg); font-weight: var(--pe-fw-semibold); color: var(--pe-text-strong);
  border-radius: var(--pe-radius-lg);
}
.pe-lp-faq summary::-webkit-details-marker { display: none; }
.pe-lp-faq summary .pe-icon { flex: 0 0 auto; color: var(--pe-brand-600); transition: transform var(--pe-dur-base) var(--pe-ease); }
.pe-lp-faq details[open] summary .pe-icon { transform: rotate(180deg); }
.pe-lp-faq details p { margin: 0; padding: 0 var(--pe-space-20) var(--pe-space-20); max-width: 46rem; color: var(--pe-text); line-height: var(--pe-lh-relaxed); }
@media (prefers-reduced-motion: reduce) { .pe-lp-faq summary .pe-icon { transition: none; } }
@media (min-width: 992px) {
  .pe-lp__wrap:has(> .pe-lp-faq) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
                                   gap: var(--pe-space-64); align-items: start; }
  .pe-lp__wrap:has(> .pe-lp-faq) > .pe-lp-sec__head { margin: 0; text-align: start; position: sticky;
                                                      inset-block-start: calc(72px + var(--pe-space-32)); }
  .pe-lp__wrap > .pe-lp-faq { max-width: none; margin: 0; }
}

/* ==========================================================================
   11. CLOSING CALL TO ACTION - a navy card inside the container, straddling
   the white page and the navy footer (the band is white above, navy below).
   MEASURED on --pe-brand-800 #103957: white 12.04:1; --pe-brand-100 9.77:1.
   The card edge against the footer: #103957 vs #0C2A41 is 1.23:1, so the
   card is separated by a 1px --pe-brand-700 border, 1.58:1 against the footer (decoration, not
   information; nothing in it depends on seeing the edge).
   ========================================================================== */
.pe-lp-final { background: linear-gradient(to bottom, var(--pe-surface) 50%, var(--pe-brand-900) 50%); padding-block-start: var(--pe-lp-section); }
.pe-lp-final__card { background: var(--pe-brand-800); color: var(--pe-neutral-0); border: 1px solid var(--pe-brand-700);
                     border-radius: var(--pe-radius-xl); padding: var(--pe-space-32) var(--pe-space-24);
                     display: grid; gap: var(--pe-space-24); align-items: center; }
@media (min-width: 992px) { .pe-lp-final__card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--pe-space-48);
                                                 padding: var(--pe-space-48) var(--pe-space-64); border-radius: 24px; } }
/* Phones (11 Oct, same gate): a large button may wrap to two lines instead of
   pushing past its card. At 320 the closing card's "Start a 30-day free trial"
   (nowrap, 32px padding) was wider than the card's 230px content box and widened
   the page (EN 323px, AR 341px). Grid children may shrink (min-width: 0). */
.pe-lp-final__card > * { min-width: 0; }
@media (max-width: 575.98px) {
  .pe-lp .pe-btn--lg { white-space: normal; padding-inline: var(--pe-space-20); }
  .pe-lp-final__card { padding-inline: var(--pe-space-20); }
}
.pe-lp-final h2 { margin: 0; max-width: 36rem; font-size: var(--pe-lp-h2); line-height: var(--pe-lh-heading);
                  font-weight: var(--pe-fw-bold); color: var(--pe-neutral-0); text-wrap: balance; }   /* 12.04:1 */
.pe-lp-final__text p { margin: var(--pe-space-12) 0 0; max-width: 34rem; color: var(--pe-brand-100); font-size: var(--pe-lp-lead); }  /* 9.77:1 */
.pe-lp-final__act .pe-lp-cta { margin: 0; }
@media (min-width: 992px) { .pe-lp-final__act { justify-self: end; text-align: end; } .pe-lp-final__act .pe-lp-cta { justify-content: flex-end; } }
.pe-lp-final .pe-btn--onDark { --_bg: var(--pe-accent-300); --_bg-hover: var(--pe-accent-200); --_fg: var(--pe-brand-900); --_bd: var(--pe-accent-300); }  /* 6.66:1 */
.pe-lp-final .pe-lp-final__signin { margin: var(--pe-space-12) 0 0; color: var(--pe-neutral-0); }
.pe-lp-final .pe-lp-final__signin a { color: var(--pe-neutral-0); font-weight: var(--pe-fw-semibold);
                                      text-decoration: underline; text-underline-offset: 3px;
                                      display: inline-flex; align-items: center; min-height: var(--pe-tap-min); }

/* ==========================================================================
   12. FOOTER - navy band: three columns (brand, on this page, the trial),
   then footer.ascx's copyright and support lines (markup unchanged).
   MEASURED on --pe-brand-900 #0C2A41: white 14.75:1; --pe-brand-100 11.98:1;
   --pe-brand-200 #B3D5EC 9.59:1; --pe-accent-300 6.66:1.
   ========================================================================== */
.pe-lp-foot { background: var(--pe-brand-900); color: var(--pe-brand-100); padding-block: var(--pe-space-48) 0; }
.pe-lp-foot__cols { display: grid; gap: var(--pe-space-32); padding-block-end: var(--pe-space-40); }
@media (min-width: 768px) { .pe-lp-foot__cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--pe-space-48); } }
.pe-lp-foot__brand img { display: block; height: 44px; width: auto; }
.pe-lp-foot__brand p { margin: var(--pe-space-16) 0 0; max-width: 22rem; color: var(--pe-brand-100); }
.pe-lp-foot__h { margin: 0 0 var(--pe-space-12); font-size: var(--pe-fs-sm); font-weight: var(--pe-fw-semibold); color: var(--pe-accent-300); }   /* 6.66:1 */
.pe-lp-foot ul { list-style: none; margin: 0; padding: 0; }
.pe-lp-foot li a { display: inline-flex; align-items: center; min-height: var(--pe-tap-min); color: var(--pe-neutral-0); text-decoration: none; }
.pe-lp-foot li a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* footer.ascx inside the band: one rule line, then copyright and support. */
.pe-lp-foot .pe-pubfoot { max-width: calc(var(--pe-lp-content) + 2 * var(--pe-lp-gutter)); margin-inline: auto;
                          padding: var(--pe-space-20) var(--pe-lp-gutter) var(--pe-space-24);
                          display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pe-space-4) var(--pe-space-24);
                          font-size: var(--pe-fs-caption); line-height: 1.6;
                          border-block-start: 1px solid rgba(255, 255, 255, .16); }   /* divider, decorative */
.pe-lp-foot .pe-pubfoot p { margin: 0; }
.pe-lp-foot .pe-pubfoot__id { color: var(--pe-brand-200); }                         /* 9.59:1 */
.pe-lp-foot .pe-pubfoot__support { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--pe-space-8); color: var(--pe-brand-200); }
.pe-lp-foot .pe-pubfoot a { display: inline-flex; align-items: center; min-height: var(--pe-tap-min);
                            color: var(--pe-neutral-0); font-weight: var(--pe-fw-semibold);
                            text-decoration: underline; text-underline-offset: 3px; }   /* 14.75:1 */
@media (max-width: 767.98px) { .pe-lp-foot .pe-pubfoot { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   13. RTL - the only direction-specific rules on the page
   ========================================================================== */
[dir="rtl"] .pe-lp-hero__title, [dir="rtl"] .pe-lp-sec__title { letter-spacing: 0; }
/* The FAQ chevron points down in both directions (open/closed, not reading order). */

/* Look-and-feel #9 (14 Oct): on a touch screen every text link on the landing page has a
   44 x 44 px tap area (short Arabic words such as the footer links were 33 px wide). An
   invisible ::after around the text; layout unchanged. No landing anchor uses ::after. */
@media (pointer: coarse) {
  .pe-lp a:not(.pe-btn):not(.pe-lp__skip) { position: relative; }
  .pe-lp a:not(.pe-btn):not(.pe-lp__skip)::after {
    content: ""; position: absolute;
    inset-block: min(0px, calc((100% - var(--pe-tap-min)) / 2));
    inset-inline: min(0px, calc((100% - var(--pe-tap-min)) / 2));
  }
}