@charset "UTF-8";
/* ==========================================================================
   GUARIP LANDING PAGE SKIN (lp-)
   --------------------------------------------------------------------------
   Scoped stylesheet for the first-aid course landing page.
   This theme serves exactly one page, and this file loads LAST in the head
   (after core.css and styles.css), so it wins the cascade without leaks.

   Token contract: every var() used anywhere in this theme resolves against
   the --lp- token block below. The base values are copied from the course
   player's Phase A tokens (gamify-lite styles.scss.liquid). Two accent
   extensions (amber, coral) come from the ui-ux-pro-max palette data.
   No shared token file is referenced or edited.

   Sections: 1 tokens, 2 page base, 3 TEMP hide block, 4 hero, 5 footer,
   6 glass fallbacks, 7 reduced motion.
   ========================================================================== */
/* COMPILED AS SCSS, NOT SERVED AS CSS.
   Kajabi runs this file through a Sass compiler, and Sass evaluates
   arithmetic inside a normal property value instead of leaving it for the
   browser. A bare "2.6vw + 0.9rem" therefore aborts the WHOLE file and the
   page is served with no stylesheet at all. That shipped once, on
   2026-08-31, from a clamp() on .lp-syl__title.
   RULE: every arithmetic expression in a value goes inside calc(), which
   Sass passes through untouched. This applies even though it looks like
   plain CSS everywhere else in the file.
   Custom property values (--lp-*) are opaque to Sass and are not evaluated,
   which is the only reason the token at the top of this block survived.
   Do not rely on that: wrap them too. */
/* 1. Tokens ------------------------------------------------------------- */
:root {
  /* Sky background family. The page default is sky, white is an
     occasional break. Values derived from colour sampled off the
     reference work, then regularised into a scale. */
  --lp-sky-pale: #F0F7FF;
  --lp-sky-tint: #E3EFFF;
  --lp-sky-mid: #C7DFFF;
  --lp-sky-deep: #A9CEFF;
  /* ROUND 4: the field inverts. The hero used to be palest at the top,
     which is exactly where the light originates, so the light had nothing
     to be bright against and the glass CTA had nothing to refract. These
     two deeper steps carry the body and the edges of the hero so a bright
     pool poured from top centre actually reads as light.
     --lp-white is the core of that pool. It is a token rather than a bare
     #FFF because every colour in this file resolves through the token
     block, with no exceptions.
     --lp-sky-pale-0 is the fully transparent twin of --lp-sky-pale, used
     as a gradient end stop so the fade dies into nothing rather than into
     a grey that some engines interpolate through. */
  --lp-sky-field: #9BC3F7;
  --lp-sky-edge: #86B4F2;
  --lp-white: #FFFFFF;
  --lp-sky-pale-0: rgba(240, 247, 255, 0);
  --lp-mist: #E9EDF3;
  /* Brand blue, replacing the former teal entirely.
     Unlike the old teal, white IS safe on --lp-brand: it measures 5.17.
     --lp-brand-dark measures 6.70 and --lp-brand-deep 10.36.
     --lp-brand-dark also serves as the CTA outer definition ring, where
     it measures 4.14 to 6.21 against the sky and 5.70 to 6.53 against
     the frosted button fill. A translucent ring fails, so it is solid. */
  --lp-brand: #2563EB;
  --lp-brand-dark: #1D4ED8;
  --lp-brand-deep: #1E3A8A;
  --lp-brand-soft: #DBEAFE;
  /* Transparent twin of --lp-brand-deep, so the countdown band can fade
     into the hero at both edges without interpolating through grey. */
  --lp-brand-deep-0: rgba(30, 58, 138, 0);
  /* Countdown band, round 5. The core is a light brand tint rather than the
     brand itself: ink on --lp-brand measures 3.9, ink on this measures 7.4,
     and the band has to carry small caption text as well as the digits.
     --lp-sky-tint-0 is the transparent twin of --lp-sky-tint so the ramp
     dies into nothing at both ends rather than through a grey. */
  --lp-cd-core: #9DC4F5;
  /* The six card accents for the "why this course" section, which is the
     one place on the page allowed noticeably more colour variety. They
     colour ILLUSTRATIONS AND A HAIRLINE ONLY, never text and never a card
     surface, so the threshold that applies to them is the 3:1 for non-text
     rather than 4.5:1. Every one of them clears that comfortably on the
     white card. They are deliberately all dark and saturated so the set
     reads as one family rather than as six unrelated colours. */
  --lp-a-1: #2563EB;
  --lp-a-2: #0E7490;
  --lp-a-3: #6D28D9;
  --lp-a-4: #B45309;
  --lp-a-5: #BE123C;
  --lp-a-6: #15803D;
  /* The bed each illustration sits on: neutral, so the accent on top of it
     is the only colour the eye reads. */
  /* The interface panels sit on their own quiet surface so they read as a
     separate object inside the card rather than as part of its body. */
  --lp-panel-bed: rgba(11, 27, 58, 0.035);
  --lp-panel-edge: rgba(11, 27, 58, 0.10);
  --lp-panel-edge-strong: rgba(11, 27, 58, 0.22);
  --lp-sky-tint-0: rgba(227, 239, 255, 0);
  --lp-navy-700: #16305F;
  --lp-ink: #0B1B3A;
  /* Opaque, not alpha: an opaque muted ink keeps contrast deterministic
     over a gradient background. Measures 5.46 at its worst (sky-deep). */
  --lp-ink-muted: #3A4A6B;
  --lp-surface: #F0F7FF;
  --lp-surface-elev: #FFFFFF;
  --lp-border: rgba(11, 27, 58, 0.10);
  /* Accent extensions (ui-ux-pro-max colors.csv) */
  --lp-amber: #D97706;
  /* Price tag label. 5.21 to 7.09 on our grounds, but only 4.38 on
     --lp-sky-deep, so the tag must never sit on the deepest band. */
  --lp-amber-deep: #92400E;
  --lp-amber-soft: rgba(217, 119, 6, 0.12);
  /* --lp-coral is DECORATIVE ONLY: as text it measures 1.66 to 2.69 and
     fails everywhere. Any coral wording uses --lp-coral-deep (4.62+). */
  --lp-coral: #FB7185;
  --lp-coral-deep: #BE123C;
  --lp-coral-soft: rgba(251, 113, 133, 0.16);
  /* Footer brass, darkened for a light ground. The main site value
     #B89860 measures 1.68 to 2.73 here and fails the 3:1 non-text
     minimum; #8A6A2F keeps the identity and measures 3.10 to 5.02. */
  --lp-brass: #8A6A2F;
  --lp-brass-soft: rgba(138, 106, 47, 0.35);
  --lp-brass-tint: rgba(138, 106, 47, 0.08);
  /* Typography */
  --lp-font: 'Zain', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lp-fs-sm: 15px;
  --lp-fs-base: 17px;
  --lp-fs-lg: 19px;
  --lp-fs-xl: 22px;
  /* ROUND 4 type scale. The old pair measured 60px against 22px, a ratio
     of 2.7 to 1, which is why headline and subtitle read as the same
     weight. Target is 84px against 18px at desktop, a ratio of 4.7 to 1.
     At 375 the ratio is deliberately lower, 42 against 15 or 2.8 to 1:
     holding 4.7 there would mean a 70px headline and this Arabic line
     cannot carry that on a 375px screen.
     Both arms are inside calc(). See the SCSS rule at the top of the file. */
  --lp-fs-title: clamp(2.625rem, calc(5.2vw + 0.9rem), 5.25rem);
  --lp-fs-sub: clamp(0.9375rem, calc(0.35vw + 0.82rem), 1.125rem);
  /* Rounded geometry (deliberately softer than the square main site) */
  --lp-r-sm: 10px;
  --lp-r-md: 16px;
  --lp-r-lg: 24px;
  --lp-r-xl: 32px;
  --lp-r-pill: 999px;
  /* Spacing */
  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 24px;
  --lp-space-6: 32px;
  --lp-space-7: 48px;
  --lp-space-8: 64px;
  --lp-space-9: 96px;
  /* Elevation: blue tinted ambient lift, never a hard drop shadow */
  --lp-shadow-md: 0 8px 24px rgba(11, 27, 58, 0.07), 0 2px 6px rgba(11, 27, 58, 0.04);
  --lp-shadow-lg: 0 24px 64px rgba(11, 27, 58, 0.10), 0 8px 16px rgba(11, 27, 58, 0.05);
  --lp-shadow-cta: 0 10px 28px rgba(37, 99, 235, 0.30);
  /* Motion */
  --lp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lp-dur-1: 120ms;
  --lp-dur-2: 240ms;
  /* Reference surface. The faint square grid is the most distinctive
     element of the reference, so it gets real tokens rather than a
     one-off value. Ink family at very low alpha: texture, not a table. */
  --lp-grid-line: rgba(11, 27, 58, 0.045);
  --lp-grid-size: 56px;
  /* On the deep blue countdown bar, where the ink tokens cannot be used. */
  --lp-on-deep-soft: rgba(255, 255, 255, 0.72);
  --lp-box-on-deep: rgba(255, 255, 255, 0.14);
  --lp-box-on-deep-edge: rgba(255, 255, 255, 0.26);
  /* ROUND 4 GLASS.
     Glass is not a material, it is a relationship between a surface and
     what is behind it. The previous recipe was a flat 65 percent white
     fill with a 14px blur, and it read as a white pill because it sat
     over the smoothest part of a near uniform gradient: a blur with
     nothing to blur. The ground above is what makes this work; these
     tokens only describe the surface.

     The fill is THREE stops, not one alpha. The middle stop is the most
     transparent, and that is what makes the top and bottom edges read as
     curvature rather than as a sticker.

     Edge treatment: a bright specular on the top edge, a subtler
     counter-highlight on the bottom, and an inner glow that reads as
     glass thickness. The top edge carries the specular rather than the
     leading edge because "light from above" is direction neutral and
     therefore needs no RTL branch.

     --lp-glass-ring is the outer definition and --lp-glass-halo the
     coloured ambient shadow that seats the button on the page. */
  --lp-glass-fill-top: rgba(255, 255, 255, 0.58);
  --lp-glass-fill-mid: rgba(255, 255, 255, 0.12);
  --lp-glass-fill-bot: rgba(255, 255, 255, 0.30);
  --lp-glass-rim: rgba(255, 255, 255, 0.92);
  --lp-glass-rim-lo: rgba(255, 255, 255, 0.34);
  --lp-glass-inner: rgba(255, 255, 255, 0.22);
  /* MEASURED: the glass fill composites to about 1.34 against the
     deepened ground, far under the 3:1 a component boundary needs, so the
     ring is doing real accessibility work and cannot be decorative.
     What changes is its colour. Round 3 used a 1.5px --lp-brand-dark
     hairline, which is the blue ring the client rejected. Ink at 0.55
     measures 3.20 against --lp-sky-field and reads as a glass edge
     rather than as a coloured stroke. Re-measure if the ground moves. */
  --lp-glass-ring: rgba(11, 27, 58, 0.55);
  --lp-glass-halo: rgba(37, 99, 235, 0.30);
  /* Round 5: the ring came off, so these carry the boundary instead.
     The contact shadow triples and gains a tight second layer that sits
     right against the edge, which is what actually reads as a border. */
  --lp-glass-contact: rgba(11, 27, 58, 0.30);
  --lp-glass-contact-tight: rgba(11, 27, 58, 0.22);
  /* MEASURED ON SCREEN: at 0.62 with a three stop band the sweep was
     technically present and visually almost nothing, because a white band
     over an already light button has very little to work with. Raised to
     0.88 with soft shoulders either side of the core, which is what makes
     it read as a specular highlight travelling across a surface rather
     than as a faint wash. */
  --lp-glass-sheen: rgba(255, 255, 255, 0.88);
  --lp-glass-sheen-lo: rgba(255, 255, 255, 0.30);
  --lp-blur: 20px;
  --lp-blur-mobile: 10px;
  /* Mobile raises the fill slightly because it has half the blur to work
     with. MEASURED AND PULLED BACK: the first pass used 0.54 / 0.26 / 0.38
     and at 375 the button went back to reading as a white pill, which is
     the exact complaint this round exists to fix. These values keep enough
     body for a 10px blur while still letting the ground through. */
  --lp-glass-fill-top-m: rgba(255, 255, 255, 0.46);
  --lp-glass-fill-mid-m: rgba(255, 255, 255, 0.20);
  --lp-glass-fill-bot-m: rgba(255, 255, 255, 0.32);
  /* Retained: the @supports fallback fill and the old border token are
     still referenced by the no-backdrop-filter branch in section 6. */
  --lp-glass-bg: rgba(255, 255, 255, 0.92);
  --lp-glass-border: rgba(255, 255, 255, 0.92);
  --lp-glass-highlight: rgba(255, 255, 255, 0.30);
  /* Top navigation. The premier theme has no --site-header-h, which the
     main site navs rely on, so the landing page declares its own. */
  /* Card finish. MEASURED COMPLAINT: the round 3 card was a flat
     rgba(255,255,255,0.65) on an #F0F7FF ground, which separates at about
     1.05 to 1. That is not a subtle card, it is very nearly no card, and
     it is exactly what "flat, no gradation, no depth" was describing.
     A card now has a real vertical fill, a bright top rim and a contact
     shadow, so it reads as a raised surface rather than as a rectangle of
     the same colour as the page. */
  --lp-card-top: rgba(255, 255, 255, 0.96);
  --lp-card-bot: rgba(255, 255, 255, 0.62);
  --lp-card-top-h: rgba(255, 255, 255, 1);
  --lp-card-bot-h: rgba(255, 255, 255, 0.78);
  --lp-card-rim: rgba(255, 255, 255, 0.9);
  --lp-card-edge: rgba(11, 27, 58, 0.10);
  --lp-card-edge-h: rgba(37, 99, 235, 0.34);
  --lp-card-shadow: 0 1px 2px rgba(11, 27, 58, 0.05), 0 6px 14px rgba(11, 27, 58, 0.06);
  --lp-card-shadow-h: 0 2px 4px rgba(11, 27, 58, 0.07), 0 12px 26px rgba(37, 99, 235, 0.16);
  /* The accordion duration is a hard value rather than a token so an
     accessibility token sweep cannot silently zero it. The reduced motion
     block makes that decision explicitly instead. */
  --lp-accordion: 320ms cubic-bezier(0.32, 0.72, 0, 1);
  --lp-nav-h: 64px;
  --lp-nav-h-mobile: 56px;
  /* ROUND 7. THE VERTICAL RHYTHM, four steps. Every gap between two
     elements on this page is one of these, chosen by relationship rather
     than by eye:
       1  within a group: a figure and its caption, a row and its note
       2  a label and its body: heading to paragraph, row to disclaimer
       3  a destination: the copy above a call to action
       4  group to group inside one section
     Section padding stays on --lp-space-9 / --lp-space-8. The phone
     values are in the 767px block below. */
  --lp-rhythm-1: 12px;
  --lp-rhythm-2: 24px;
  --lp-rhythm-3: 40px;
  --lp-rhythm-4: 64px;
  /* ROUND 7. The mobile call to action bar. Its reserved height is a
     token because three things must agree on it: the bar's own padding,
     the footer's bottom reserve, and the lift applied to the
     accessibility trigger and the cookie widget. Measured: 12px padding,
     a 56px button, 12px padding. The safe area inset is added by each
     consumer, never baked in here. */
  --lp-bar-h: 80px;
  --lp-bar-shadow: 0 -10px 30px rgba(11, 27, 58, 0.10), 0 -1px 0 rgba(11, 27, 58, 0.06);
  /* ROUND 7. The two device shells in card 3, and the dark video ground
     in cards 3 and 6. Ink family, so a device reads as an object rather
     than as a coloured drawing; the accent is reserved for the progress
     it carries. */
  --lp-device-shell: #24324F;
  --lp-device-screen: #FFFFFF;
  --lp-video-ground: #16305F;
  /* ROUND 7. Review cards on the band. */
  --lp-rev-card-bg: rgba(255, 255, 255, 0.92);
  --lp-rev-edge-0: rgba(240, 247, 255, 0);
  /* ROUND 8. The closing offer card: the one place on the page that earns
     real depth. Three shadow layers, the deepest blue tinted, so the card
     sits above the ground rather than on it, and a soft light behind it. */
  --lp-offer-shadow: 0 2px 4px rgba(11, 27, 58, 0.06), 0 18px 40px rgba(11, 27, 58, 0.10), 0 40px 90px rgba(37, 99, 235, 0.14);
  --lp-offer-glow: rgba(37, 99, 235, 0.10);
  /* Accessibility */
  --lp-focus: #1D4ED8;
  --lp-font-readable: 'Segoe UI', Tahoma, Arial, sans-serif; }

/* THE ANCESTOR THAT WAS KILLING position: sticky.
   --------------------------------------------------------------------------
   MEASURED: across 17 scroll positions through the syllabus, the sticky
   aside was pinned at ZERO of them. Its top travelled 296, 196, 96, -4,
   -104, -204, straight down with the page. It had never stuck at all.

   The cause was not in our CSS. Kajabi wraps the whole page in
   .container.container--main.container--full, and that wrapper has
   overflow: hidden, which makes it a scroll container. A scroll container
   ANYWHERE in the ancestor chain silently disables position: sticky on
   everything inside it. Round 5 changed .lp-syl to overflow: clip, which
   was correct, landed, and was irrelevant, because the real one was a
   level above it.

   clip clips identically to hidden and does NOT create a scroll container.
   Proven on the live page before this was written: with this single change
   the aside pins at 88px and holds for about 400px of travel.

   This theme serves exactly one page, so scoping this to a stock Kajabi
   class is safe here and would not be in a multi-page theme. */
.container--main {
  overflow: clip; }

/* 2. Page base ----------------------------------------------------------- */
/* ==========================================================================
   THE KAJABI TAG MARGIN RESET. READ THIS BEFORE TOUCHING IT.
   --------------------------------------------------------------------------
   MEASURED ON THE LIVE PAGE by injecting bare elements into the live
   document and reading their computed style. Kajabi's own stylesheet puts
   a 16px vertical margin on a WHOLE FAMILY of content tags, not on one:

       a  img  p  ul  ol  li  h1  h2  h3  h4     margin: 16px 0
       figure                                    margin: 0 0 16px

   Round 5 found this on img alone and reset img alone. That was too narrow,
   and the same rule was silently causing FOUR separate faults:

     the nav brand is an <a>, so its margin box was 44+32 = 76px, the nav
       grid row became 76px inside a 63.2px container, and every bar item
       sat EXACTLY 6px below the bar midline in both states
     the syllabus cards are <li>, so a 2px authored gap rendered as 34px
     the drawer items are <li>, so a 4px authored gap rendered as 36px
     the footer's p, ul, li and a all carried it, inflating its height

   SPECIFICITY, MEASURED RATHER THAN ASSUMED. A :where() reset computes to
   0,0,1 and LOSES to Kajabi's rule; that was tested on the live page and
   failed. These selectors are ".root tag", which is 0,1,1: high enough to
   beat Kajabi, low enough that every one of our own class rules (0,1,0 and
   above) still wins, so no intentional margin we set is disturbed.

   Written out longhand rather than with :is(). This file is compiled by
   LibSass on Kajabi, and a selector feature dart-sass accepts is exactly
   the class of thing that took this page down once.
   ========================================================================== */
.lp-nav a,
.lp-nav img,
.lp-nav p,
.lp-nav ul,
.lp-nav ol,
.lp-nav li,
.lp-nav h1,
.lp-nav h2,
.lp-nav h3,
.lp-nav h4,
.lp-nav figure,
.lp-nav__drawer a,
.lp-nav__drawer img,
.lp-nav__drawer p,
.lp-nav__drawer ul,
.lp-nav__drawer ol,
.lp-nav__drawer li,
.lp-nav__drawer h1,
.lp-nav__drawer h2,
.lp-nav__drawer h3,
.lp-nav__drawer h4,
.lp-nav__drawer figure,
.lp-hero a,
.lp-hero img,
.lp-hero p,
.lp-hero ul,
.lp-hero ol,
.lp-hero li,
.lp-hero h1,
.lp-hero h2,
.lp-hero h3,
.lp-hero h4,
.lp-hero figure,
.lp-cd a,
.lp-cd img,
.lp-cd p,
.lp-cd ul,
.lp-cd ol,
.lp-cd li,
.lp-cd h1,
.lp-cd h2,
.lp-cd h3,
.lp-cd h4,
.lp-cd figure,
.lp-why a,
.lp-why img,
.lp-why p,
.lp-why ul,
.lp-why ol,
.lp-why li,
.lp-why h1,
.lp-why h2,
.lp-why h3,
.lp-why h4,
.lp-why figure,
.lp-syl a,
.lp-syl img,
.lp-syl p,
.lp-syl ul,
.lp-syl ol,
.lp-syl li,
.lp-syl h1,
.lp-syl h2,
.lp-syl h3,
.lp-syl h4,
.lp-syl figure,
.lp-preview a,
.lp-preview img,
.lp-preview p,
.lp-preview ul,
.lp-preview ol,
.lp-preview li,
.lp-preview h1,
.lp-preview h2,
.lp-preview h3,
.lp-preview h4,
.lp-preview figure,
.lp-rev a,
.lp-rev img,
.lp-rev p,
.lp-rev ul,
.lp-rev ol,
.lp-rev li,
.lp-rev h1,
.lp-rev h2,
.lp-rev h3,
.lp-rev h4,
.lp-rev figure,
.lp-offer a,
.lp-offer img,
.lp-offer p,
.lp-offer ul,
.lp-offer ol,
.lp-offer li,
.lp-offer h1,
.lp-offer h2,
.lp-offer h3,
.lp-offer h4,
.lp-offer figure,
.lp-faq a,
.lp-faq img,
.lp-faq p,
.lp-faq ul,
.lp-faq ol,
.lp-faq li,
.lp-faq h1,
.lp-faq h2,
.lp-faq h3,
.lp-faq h4,
.lp-faq figure,
.lp-bar a,
.lp-footer a,
.lp-footer img,
.lp-footer p,
.lp-footer ul,
.lp-footer ol,
.lp-footer li,
.lp-footer h1,
.lp-footer h2,
.lp-footer h3,
.lp-footer h4,
.lp-footer figure {
  margin-top: 0;
  margin-bottom: 0; }

/* ==========================================================================
   ROUND 7. TWO THINGS THE RESET ABOVE WAS SILENTLY DOING.
   --------------------------------------------------------------------------
   1. IT WAS ZEROING OUR OWN SPACING. ".lp-hero a" is 0,1,1 and
      ".lp-cta--hero" is 0,1,0, so the reset beat every authored margin on
      an a, p, h2 or ul inside a landing section. Measured on the live page
      2026-09-02: hero CTA margin-top 0 (authored 32), syllabus CTA 0,
      why title margin-bottom 0 (authored 48), stats note 0, cards 0, hero
      subtitle 0, syllabus text 0, preview lead 0, footer disclaimer 0.
      Every "sits too close" complaint in round 7 was this one rule. Only
      div margins survived, which is why the video frame kept its 48.
      THE ANSWER IS THE RHYTHM BLOCK BELOW: every inter-element gap on the
      page is declared in one place, at ".lp-section .lp-element" (0,2,0),
      which beats the reset. Component rules no longer carry margins.

   2. IT WAS NOT RESETTING THE FAMILY. Kajabi's styles.css sets a heading
      family on h1 to h6 from the theme settings (Montserrat). Round 4 hit
      this on the syllabus titles and fixed that one selector; round 6
      then added six h3 card headings with no family declaration and they
      shipped in Montserrat. This rule makes every heading inside a landing
      section inherit the page face, so a future heading cannot fall
      through to the stock font whatever class it carries.
   ========================================================================== */
.lp-nav h1, .lp-nav h2, .lp-nav h3, .lp-nav h4,
.lp-hero h1, .lp-hero h2, .lp-hero h3, .lp-hero h4,
.lp-cd h1, .lp-cd h2, .lp-cd h3, .lp-cd h4,
.lp-why h1, .lp-why h2, .lp-why h3, .lp-why h4,
.lp-syl h1, .lp-syl h2, .lp-syl h3, .lp-syl h4,
.lp-rev h1, .lp-rev h2, .lp-rev h3, .lp-rev h4,
.lp-preview h1, .lp-preview h2, .lp-preview h3, .lp-preview h4,
.lp-offer h1, .lp-offer h2, .lp-offer h3, .lp-offer h4,
.lp-faq h1, .lp-faq h2, .lp-faq h3, .lp-faq h4,
.lp-footer h1, .lp-footer h2, .lp-footer h3, .lp-footer h4 {
  font-family: inherit; }

/* ==========================================================================
   THE VERTICAL RHYTHM. One block, one scale, every relationship named.
   Step 1 within a group, 2 label to body, 3 destination, 4 group to group.
   See the tokens. Phone values are set in the 767px block at the end of
   this section. Nothing below this block may declare a margin between
   two sibling elements; that belongs here.
   ========================================================================== */
/* Hero: heading, then its body (2), then the destination (3). */
.lp-hero .lp-hero__title {
  margin-block-start: var(--lp-rhythm-2); }

.lp-hero .lp-hero__subtitle {
  margin-block-start: var(--lp-rhythm-2); }

.lp-hero .lp-cta--hero {
  margin-block-start: var(--lp-rhythm-3); }

/* Why: heading to the stats group (3); inside the group the numerals sit
   on their labels (1 within the stat); then the cards are the next group
   (4). ROUND 8: the note line beneath the row is gone, its sentence is
   now the second figure's label. */
.lp-why .lp-why__title {
  margin-block-end: var(--lp-rhythm-3); }

.lp-why .lp-why__cards {
  margin-block-start: var(--lp-rhythm-4); }

/* Inside a card: title to paragraph is tighter than step 1 because the
   two are one thought; paragraph to panel is step 2. The panel itself is
   pushed to the card's foot with an auto margin, so this is a minimum. */
.lp-why .lp-why__h {
  margin-block-end: 8px; }

.lp-why .lp-why__p {
  margin-block-end: var(--lp-rhythm-2); }

/* Syllabus aside: heading, body (2), destination (3), proof (2). */
.lp-syl .lp-syl__text {
  margin-block-start: var(--lp-rhythm-2); }

.lp-syl .lp-syl__aside .lp-cta {
  margin-block-start: var(--lp-rhythm-3); }

.lp-syl .lp-syl__proof {
  margin-block-start: var(--lp-rhythm-2); }

/* Reviews: heading to the band (3). */
.lp-rev .lp-rev__title {
  margin-block-end: var(--lp-rhythm-3); }

/* Preview: heading, lead (2), frame (3 plus a little, the frame is the
   section's whole point and earns the extra air). */
.lp-preview .lp-preview__lead {
  margin-block-start: var(--lp-rhythm-2); }

.lp-preview .lp-preview__frame {
  margin-block-start: var(--lp-space-7); }

/* Offer (round 8): heading, lead (2), then the card, which is the
   section's object and earns the group step (4). */
.lp-offer .lp-offer__lead {
  margin-block-start: var(--lp-rhythm-2); }

.lp-offer .lp-offer__card {
  margin-block-start: var(--lp-rhythm-4); }

/* The questions (round 9): heading to the list (3). */
.lp-faq .lp-faq__list {
  margin-block-start: var(--lp-rhythm-3); }

/* Footer: the row, then the small print, as close as the small print can
   sit and still read as its own line (1). ROUND 8, third footer pass. */
.lp-footer .lp-footer__disclaimer {
  margin-block-start: var(--lp-rhythm-1); }

@media (max-width: 767px) {
  :root {
    --lp-rhythm-3: 32px;
    --lp-rhythm-4: 48px; }

  .lp-preview .lp-preview__frame {
    margin-block-start: var(--lp-rhythm-3); } }
html[dir="rtl"] body {
  font-family: var(--lp-font);
  background: var(--lp-surface);
  color: var(--lp-ink); }

/* ==========================================================================
   THE FOCUS RING THAT APPEARS AFTER A MOUSE CLICK
   --------------------------------------------------------------------------
   MEASURED on the live page by clicking an opened syllabus card with a real
   mouse and reading the button:

       outline               rgb(16, 16, 16) auto 4.8px
       matches :focus        true
       matches :focus-visible FALSE

   So the dark ring is the USER AGENT's own outline: auto, not anything in
   this file. Round 5 chased :focus-within, which was not drawing it. The
   same outline is what draws the dark rounded box around a clicked nav
   item: the link is an <a> with a border-radius, so the ring follows it.

   The fix is the precise one rather than a blunt one.
   ":focus:not(:focus-visible)" means "focused, but not in the way a
   keyboard user focuses", so it removes the pointer ring and CANNOT affect
   a keyboard user at all. Every one of these elements keeps, and below
   this block still declares, its own :focus-visible indicator.
   Do not replace this with a bare ":focus { outline: none }". That would
   take the keyboard indicator with it.
   ========================================================================== */
.lp-nav__link:focus:not(:focus-visible),
.lp-nav__drawer-link:focus:not(:focus-visible),
.lp-nav__brand:focus:not(:focus-visible),
.lp-nav__burger:focus:not(:focus-visible),
.lp-nav__close:focus:not(:focus-visible),
.lp-cta:focus:not(:focus-visible),
.lp-syl__head:focus:not(:focus-visible),
.lp-faq__q:focus:not(:focus-visible),
.lp-footer__social:focus:not(:focus-visible),
.lp-footer__wm:focus:not(:focus-visible),
.lp-footer__line a:focus:not(:focus-visible),
.lp-preview__play:focus:not(:focus-visible) {
  outline: none; }

/* ROUND 8: the TEMP HIDE BLOCK that lived here since phase 2 is gone.
   Every stock instance it hid has been rewritten in place (the fourth,
   the stock Testimonials block, became the closing offer in round 8), and
   the stock header section is no longer rendered by templates/index.liquid,
   so there is nothing left to hide by CSS. Residue is removed at source
   now, never painted out. */
/* 4. Hero ---------------------------------------------------------------- */
/* SCROLL COST, PART 2 ITEM 8. One scroll-padding-top on the scrolling
   element replaces four per-section scroll-margin-top rules. It applies to
   EVERY scroll into view rather than to the four sections someone
   remembered to list, which also fixes #lp-main, the skip link target,
   which was landing underneath the fixed bar. */
html {
  scroll-padding-top: calc(var(--lp-nav-h) + 16px); }

.lp-hero {
  position: relative;
  overflow: hidden;
  /* ROUND 4: the hero is a complete screen. 100vh first so browsers that
     do not know dvh still get a full screen, then 100dvh so mobile
     browsers with a collapsing address bar do not leave a strip of the
     next section showing. Two declarations, not a fallback chain: the
     second simply overrides the first where it is understood. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-block-start: calc(var(--lp-nav-h) + var(--lp-space-4));
  padding-block-end: var(--lp-space-8);
  padding-inline: var(--lp-space-5);
  text-align: center;
  /* THE INVERTED FIELD.
     The old gradient ran pale at the top to deep at the bottom, which put
     the palest ground exactly where the light originates. There was
     nothing for the light to be bright against, so it read as nothing,
     and the CTA sat over the smoothest part of it, so the blur had
     nothing to blur. Both complaints, one cause.

     Three layers, painted in this order:
       1. THE LIGHT. A pool from top centre, white at the core, dying into
          --lp-sky-pale-0 at about 64 percent. It is symmetric about the
          centre, so it is direction neutral and needs no RTL branch.
          MEASURED AND MOVED. The source started at 50% -8%, off the top
          edge, which is the textbook place for it. On this page it was
          wrong: the countdown band occupies the top of the hero, so the
          brightest part of the pool landed behind the band and the whole
          effect was invisible. It now pools at 50% 12%, just UNDER the
          band. That reads better than the original intent did, because
          the band gets a deeper seat and the light gains a hard edge to
          be bright against instead of fading into the page border.
          THIS LAYER NEVER ANIMATES, in any state, at any breakpoint.
       2. The seat: --lp-sky-edge pooled up from the bottom.
       3. The body: mid at the top through field to edge at the bottom.

     The CTA lands on the falloff between 1 and 3, which is the whole
     point: real tonal variation passes beneath it, and the faint square
     grid on .lp-hero__grid keeps running under it rather than stopping
     at its edge, so the blur has geometry to bend as well as tone. */
  background: radial-gradient(120% 88% at 50% 12%, var(--lp-white) 0%, var(--lp-sky-pale) 26%, var(--lp-sky-pale-0) 64%), radial-gradient(140% 120% at 50% 120%, var(--lp-sky-edge) 0%, var(--lp-sky-pale-0) 55%), linear-gradient(to bottom, var(--lp-sky-mid) 0%, var(--lp-sky-field) 46%, var(--lp-sky-edge) 100%); }

/* Lively colour field: soft radial washes, pure gradients, no blur.
   CENTRED horizontally. The previous build positioned these at 82%,
   12% and 78%, which are measured from the physical left edge and
   therefore do not mirror: a wash sitting behind the start of the text
   in Latin sits behind the end of it in Arabic. Centred washes are
   direction neutral and correct in both. */
.lp-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* ROUND 4: the coral wash at 42 percent and the amber wash at 104 percent
     were added when the ground was pale and needed warmth. On the inverted
     field they sit directly in the path of the light and mute it, which is
     the opposite of what this round is for. Both are removed. What remains
     is a single cool wash that reinforces the pool rather than competing
     with it. */
  background: radial-gradient(620px 420px at 50% -8%, rgba(37, 99, 235, 0.1), transparent 72%); }

.lp-hero__inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Second row of the hero grid, so the stack centres itself in whatever
     height is left after the countdown band.
     ROUND 5: padding-block-start pushes the whole stack down a little so
     the band has more room above it. It is padding rather than a change to
     justify-content, so the stack still centres in what remains and cannot
     overflow the row. Re-measured for no overflow at 360, 375 and 414. */
  justify-content: center;
  padding-block-start: clamp(24px, 5vh, 56px); }

/* The launch price tag. NOT glass: the page glass budget is two
   elements and both are spent on the CTA and the later price card.
   A solid white pill on the pale top of the gradient reads clean and
   costs nothing. It sits high in the hero, over --lp-sky-pale, which
   also keeps --lp-amber-deep off the deepest band where it would
   measure 4.38. Here it measures 6.57. */
.lp-hero__tag {
  display: inline-block;
  padding: var(--lp-space-2) var(--lp-space-5);
  border-radius: var(--lp-r-pill);
  background: var(--lp-surface-elev);
  border: 1px solid var(--lp-border);
  box-shadow: var(--lp-shadow-md);
  color: var(--lp-amber-deep);
  font-size: var(--lp-fs-base);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.6; }

/* The title gets a wider measure than the 760px copy column, capped the
   same way the illustration frame is so it can never create horizontal
   scroll. At the approved copy length that is the difference between one
   line and a line of four words followed by an orphan. text-wrap:balance
   handles the narrower viewports where it must wrap anyway; where it is
   unsupported the text simply wraps normally. */
.lp-hero__title {
  margin: 0;
  width: min(max(100%, calc(100vw - 72px)), 900px);
  font-family: var(--lp-font);
  font-size: var(--lp-fs-title);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lp-ink);
  text-wrap: balance; }

.lp-hero__title .lp-w {
  display: inline-block; }

/* The accent words in the headline, matching the syllabus heading.
   MEASURED: --lp-brand-dark on the bright pool the headline sits in gives
   about 6.6, comfortably past 4.5 even before the size bonus that an 84px
   headline would earn. --lp-brand-deep was the fallback if it fell short;
   it did not, and brand-deep sits close enough to --lp-ink that it would
   have read as a shade of the ink rather than as an accent.
   The word splitter recurses into this span, so the two words inside stay
   two separately animated words and the Arabic in each is never cut. */
.lp-hero__accent {
  color: var(--lp-brand-dark); }

/* ROUND 4: the subtitle steps back hard. It was --lp-fs-xl (22px), against
   a 60px headline, a ratio of only 2.7 to 1, which is exactly why the two
   read as the same weight. It is now --lp-fs-sub (18px desktop, 15px at
   375) against an 84px headline, a ratio of 4.7 to 1.
   The colour moves from --lp-ink-muted to --lp-ink as well. On the old pale
   ground the muted token measured comfortably; on the deepened field it is
   marginal, and the honest fix is to darken the text rather than lighten
   the ground the whole round was spent deepening. */
.lp-hero__subtitle {
  margin: 0;
  max-width: 560px;
  font-size: var(--lp-fs-sub);
  font-weight: 400;
  line-height: 1.7;
  color: var(--lp-ink); }

/* Data line: wraps gracefully, a separator dot can never start a line
   because each dot is glued to its preceding item inside a nowrap span */
.lp-hero__meta {
  margin: var(--lp-space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--lp-space-3);
  row-gap: var(--lp-space-2);
  font-size: var(--lp-fs-lg);
  line-height: 1.7;
  color: var(--lp-ink); }

.lp-hero__meta-item {
  white-space: nowrap; }

.lp-hero__dot {
  color: var(--lp-coral);
  font-weight: 800;
  margin-inline-start: var(--lp-space-3); }

/* ==========================================================================
   THE GLASS CALL TO ACTION
   --------------------------------------------------------------------------
   Round 4 rebuild. The round 3 button was a flat 65 percent white fill, a
   14px blur and a 1.5px brand-blue ring, and it read as a white pill with a
   blue ring because that is what it was. Three things were missing, and the
   FIRST of them is not on this element at all:

     1. SOMETHING TO SEE THROUGH. Glass only reads as glass when real
        variation passes beneath it. The hero field was inverted (see
        .lp-hero above) so the button now sits on a genuine tonal falloff,
        with the faint square grid running underneath it rather than
        stopping at its edge. Without that change nothing below would help.
     2. A FILL WITH CURVATURE. Three stops, most transparent in the middle.
        That gradient is what makes the top and bottom edges read as a
        curved surface instead of a sticker.
     3. AN EDGE. Bright specular on the top, subtler counter-highlight on
        the bottom, inner glow for thickness, ring for definition, coloured
        halo to seat it on the page.

   RTL: the specular sits on the TOP edge, not the leading edge, because
   light from above is direction neutral. Nothing here needs a dir branch.

   THE RING IS NOT DECORATION. Measured, the fill composites to about 1.34
   against the deepened ground, well under the 3:1 a component boundary
   requires. What changed from round 3 is its colour, not its presence:
   --lp-glass-ring is ink at 0.55, which measures 3.20, instead of the
   brand blue the client was reacting to.
   ========================================================================== */
.lp-cta {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: var(--lp-space-4) var(--lp-space-8);
  border-radius: var(--lp-r-pill);
  border: 0;
  background: linear-gradient(180deg, var(--lp-glass-fill-top) 0%, var(--lp-glass-fill-mid) 46%, var(--lp-glass-fill-bot) 100%);
  -webkit-backdrop-filter: blur(var(--lp-blur)) saturate(180%);
  backdrop-filter: blur(var(--lp-blur)) saturate(180%);
  color: var(--lp-ink);
  font-size: var(--lp-fs-xl);
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
  /* ROUND 5: THE RING IS GONE FROM EVERY VARIANT, at the client's request.
     It was carrying a real 3:1 component boundary requirement, so removing
     it means the material has to work harder. What replaced it:
       the top specular goes to full white rather than 0.92
       the contact shadow triples in weight and gains a second, tighter layer
       the fill gradient's top-to-middle gap widens (see the tokens)
       the coloured halo deepens
     Measured separation after the change is reported in the round 5 notes.
     Do not reintroduce a ring. :focus-visible is a different thing and is
     untouched below. */
  box-shadow: inset 0 1px 0 var(--lp-white), inset 0 -1px 0 var(--lp-glass-rim-lo), inset 0 0 24px var(--lp-glass-inner), 0 16px 38px var(--lp-glass-halo), 0 3px 10px var(--lp-glass-contact), 0 1px 2px var(--lp-glass-contact-tight);
  transition: box-shadow var(--lp-dur-2) var(--lp-ease-out), transform var(--lp-dur-2) var(--lp-ease-out); }

/* The sheen. One band swept across the surface by GSAP on
   background-position, which is paint only and never touches layout.
   It sits UNDER the label, which carries .lp-cta__t and its own stacking
   position, so a 62 percent white band can never wash over the ink and dip
   its contrast mid sweep.
   The tween lives in landing.js and is gated four ways: only while the
   button is in the viewport, only while the tab is visible, only above
   768px, and never under reduced motion. It is the one repeating tween on
   the page and it is not a free-running loop. */
.lp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, var(--lp-glass-sheen-lo) 41%, var(--lp-glass-sheen) 50%, var(--lp-glass-sheen-lo) 59%, transparent 72%);
  background-size: 250% 100%;
  /* GSAP tweens --lp-sheen-x on the BUTTON; the pseudo element reads it
     here. A pseudo element cannot be tweened directly, and a custom
     property avoids pulling in CSSRulePlugin for one effect. The fallback
     keeps the band parked off the trailing edge when nothing sets it. */
  background-position: var(--lp-sheen-x, 200%) 0;
  background-repeat: no-repeat; }

.lp-cta__t {
  position: relative;
  z-index: 1; }

.lp-cta:hover,
.lp-cta:focus {
  color: var(--lp-ink);
  text-decoration: none;
  /* The specular brightens and the halo grows, so the button reads as
     lifting toward the light rather than merely glowing. */
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--lp-white), inset 0 -1px 0 var(--lp-glass-rim-lo), inset 0 0 28px var(--lp-glass-inner), 0 22px 48px var(--lp-glass-halo), 0 5px 14px var(--lp-glass-contact), 0 1px 2px var(--lp-glass-contact-tight); }

.lp-cta:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 4px; }

/* Mobile: half the blur, no saturate, and the fill raised to compensate.
   backdrop-filter on a wide pill is the expensive part on a phone, and the
   sheen does not run here at all. */
@media (max-width: 767px) {
  .lp-cta {
    -webkit-backdrop-filter: blur(var(--lp-blur-mobile));
    backdrop-filter: blur(var(--lp-blur-mobile));
    background: linear-gradient(180deg, var(--lp-glass-fill-top-m) 0%, var(--lp-glass-fill-mid-m) 46%, var(--lp-glass-fill-bot-m) 100%); }

  .lp-cta::before {
    display: none; } }
/* The faint square grid, shared by the hero and the syllabus.
   Two repeating gradients, never an image. It is painted once and is never
   transformed or animated, so it costs nothing at scroll time.
   A square grid is symmetric, so "to right" and "to bottom" carry no
   direction and there is nothing to mirror in RTL. */
.lp-hero__grid,
.lp-syl__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)), repeating-linear-gradient(to bottom, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)); }

/* 4a. Top navigation ------------------------------------------------------
   Behaviour, and which parts of the main site's two navs it reuses, is
   documented in snippets/lp_nav.liquid. This is placement only.

   The bar is fixed and starts transparent over the hero, then picks up the
   glass fill and a hairline once scrolled past it. That state change is one
   of the round's motion beats and costs one class toggle. */
.lp-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1700;
  height: var(--lp-nav-h);
  background: transparent; }

/* SCROLL COST, PART 2 ITEM 4. This used to transition background,
   border-color AND box-shadow on a fixed bar, and switch on
   blur(20px) saturate(180%) at the same instant, all triggered by the
   first scroll gesture. Three non-compositable properties plus a second
   filter pass, exactly when the reader starts moving.

   Now: the whole tint, hairline and shadow live on a pseudo-element and
   only its OPACITY transitions, which is compositable. The blur drops
   from 20px to 12px and saturate is gone, so one filter pass instead of
   two. The visual result is the same bar. */
.lp-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--lp-glass-fill-top);
  border-block-end: 1px solid var(--lp-border);
  box-shadow: 0 1px 0 var(--lp-glass-rim) inset, var(--lp-shadow-md);
  opacity: 0;
  transition: opacity var(--lp-dur-2) var(--lp-ease-out); }

.lp-nav.is-scrolled::before {
  opacity: 1; }

.lp-nav.is-scrolled {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); }

.lp-nav__skip-anchor {
  position: absolute;
  inset-block-start: 0;
  width: 1px;
  height: 1px; }

.lp-nav__inner {
  position: relative;
  /* above the ::before tint layer */
  z-index: 1;
  height: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--lp-space-5);
  display: grid;
  /* ROUND 8: 1fr auto 1fr, not auto 1fr auto. With the outer columns
     sized by their content the item list was centred in whatever was
     left, so a wider CTA pushed it off the viewport centre (measured 7px
     with the short label, 39px with the long one). Two equal outer
     tracks keep the list on the viewport centre whatever the CTA weighs. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--lp-space-4); }

.lp-nav__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none; }

/* ROUND 6: 44px to 52px, which is 81 percent of the 64px bar. That is as
   far as it goes without the mark touching the bar edges: 6px of clearance
   above and below is the minimum that still reads as a bar rather than as a
   logo with a line under it. */
.lp-nav__brand img {
  display: block;
  height: 52px;
  width: auto; }

.lp-nav__nav {
  justify-self: center; }

.lp-nav__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--lp-space-2);
  margin: 0;
  padding: 0;
  list-style: none; }

.lp-nav__list li {
  margin: 0;
  padding: 0; }

/* ROUND 5: THE SLIDING MARKER IS GONE, not hidden. The element, the
   placeMarker() function, the resize re-measurement and these rules were
   all deleted. Active state is now carried by emphasis alone, below.
   aria-current is untouched and is still how the state reaches assistive
   technology, which is the part that actually mattered. */
/* OPTICAL rather than merely mathematical centring. With the tag margin
   reset in place every item is now mathematically centred on the bar
   midline, but Arabic sits low inside its own line box because the
   ascender and descender space is not distributed evenly. A 1px lift puts
   the perceived centre of the text on the midline rather than the centre
   of its box. Judged on a zoomed screenshot, not only on the number. */
.lp-nav__link {
  display: inline-flex;
  align-items: center;
  transform: translateY(-1px);
  min-height: 40px;
  padding: 0 var(--lp-space-3);
  font-size: var(--lp-fs-base);
  font-weight: 700;
  line-height: 1.4;
  color: var(--lp-ink-muted);
  text-decoration: none;
  border-radius: var(--lp-r-sm);
  transition: color var(--lp-dur-2) var(--lp-ease-out); }

.lp-nav__link:hover {
  color: var(--lp-ink);
  text-decoration: none; }

/* Weight and colour together, so the active item still reads in greyscale
   and does not depend on hue alone. */
.lp-nav__link.is-active {
  color: var(--lp-ink);
  font-weight: 800;
  text-decoration: none; }

.lp-nav__link:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px; }

.lp-nav__cta {
  justify-self: end; }

/* The compact CTA. Material comes from .lp-cta; this only sizes it. */
.lp-cta--nav {
  padding: var(--lp-space-2) var(--lp-space-5);
  font-size: var(--lp-fs-sm);
  white-space: nowrap; }

/* Hamburger. PHYSICALLY left, not inline-start: the brief specifies the
   left of the screen, and on an RTL page a logical property would put it
   on the right. This is the one deliberate physical property in the theme.
   Absolutely positioned rather than placed in the grid so its side does
   not depend on the writing direction of the row. */
.lp-nav__burger {
  position: absolute;
  left: var(--lp-space-3);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--lp-r-sm);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px; }

.lp-nav__burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--lp-ink); }

.lp-nav__burger:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px; }

.lp-nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 1750;
  background: rgba(11, 27, 58, 0.45);
  opacity: 0;
  transition: opacity var(--lp-dur-2) var(--lp-ease-out); }

html.lp-nav-open .lp-nav__scrim {
  opacity: 1; }

/* The drawer slides from the PHYSICAL left, for the same reason as the
   hamburger. z-index 1800 keeps it under the accessibility trigger at
   1900, and left anchoring keeps it clear of that trigger at the bottom
   right and of CookieYes at the bottom left. */
.lp-nav__drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1800;
  width: min(82vw, 320px);
  padding: var(--lp-space-4) var(--lp-space-5) var(--lp-space-6);
  background: var(--lp-surface-elev);
  box-shadow: var(--lp-shadow-lg);
  transform: translateX(-100%);
  transition: transform var(--lp-dur-2) var(--lp-ease-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column; }

html.lp-nav-open .lp-nav__drawer {
  transform: translateX(0); }

/* THE hidden ATTRIBUTE HAS TO BE RESTORED EXPLICITLY.
   The browser default is [hidden] { display: none }, which lives in the UA
   stylesheet and loses to any author rule with a class selector. The
   display:flex above is exactly such a rule, so the closed drawer was
   still laid out: off screen, because of the translate, but STILL IN THE
   TAB ORDER and still in the accessibility tree. Tabbing through the page
   with the menu closed walked into the menu.
   Caught on screen, not in review. Any component that sets display and
   also uses hidden needs this pair. */
.lp-nav__drawer[hidden],
.lp-nav__scrim[hidden] {
  display: none !important; }

.lp-nav__drawer-head {
  display: flex;
  justify-content: flex-start; }

.lp-nav__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--lp-r-sm);
  background: transparent;
  color: var(--lp-ink);
  cursor: pointer; }

.lp-nav__close svg {
  width: 22px;
  height: 22px; }

.lp-nav__close:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px; }

.lp-nav__drawer-list {
  list-style: none;
  margin: var(--lp-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px; }

/* 1D. The type comes down from --lp-fs-lg (19px) to --lp-fs-base (17px)
   and the rhythm tightens, but min-height stays at 48px so the tap target
   is untouched: what shrinks is the type and the gaps, not the target.
   The 36px gaps that made this read as a list of oversized buttons were
   the Kajabi li margin, removed by the reset near the top of this file. */
.lp-nav__drawer-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--lp-space-3);
  border-radius: var(--lp-r-sm);
  font-size: var(--lp-fs-base);
  font-weight: 700;
  color: var(--lp-ink);
  text-decoration: none; }

/* Same treatment in the drawer: emphasis, no bar and no tinted block. */
.lp-nav__drawer-link.is-active {
  color: var(--lp-ink);
  font-weight: 800; }

.lp-nav__drawer-link:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px; }

.lp-nav__drawer-cta {
  margin-block-start: auto;
  padding-block-start: var(--lp-space-6); }

@media (max-width: 767px) {
  :root {
    --lp-nav-h: var(--lp-nav-h-mobile); }

  .lp-nav__burger {
    display: flex; }

  .lp-nav__inner {
    grid-template-columns: 1fr;
    padding-inline: 64px; }

  .lp-nav__brand {
    justify-self: center; }

  /* 1C. 28px to 44px, which is 79 percent of the 56px mobile bar and the
     same proportion the desktop bar now runs. This override was missed in
     round 5, which is why the logo grew on desktop and not on a phone. */
  .lp-nav__brand img {
    height: 44px; }

  /* The bar keeps only the brand on a phone. The nav row lives in the
     drawer and the CTA is carried by the sticky pill, which already
     appears once the hero button scrolls away. Two call to action pills
     on one small screen is one too many. */
  .lp-nav__nav,
  .lp-nav__cta {
    display: none; } }
/* 4c. Countdown band ------------------------------------------------------
   Full bleed inside the hero, which carries a padding-inline, so it takes
   an equal and opposite negative margin. It is the hero grid's first row;
   the copy stack centres itself in the second.

   The colour is strongest at the centre and fades to nothing at both
   edges. It is built with "to right", which is physical, but the gradient
   is symmetric about its centre so there is nothing to mirror in RTL.

   THE FADE IS A PLATEAU, NOT A RAMP. White text over a stop that has
   faded most of the way to the sky would fail contrast, so the strong
   region is wide enough to hold the whole of .lp-cd__inner and only the
   empty outer fifth of the band actually fades.

   ROUND 9 recomposed the contents (see the block after .lp-cd below);
   the strip itself, its gradient and its bleed are unchanged. */
.lp-cd {
  position: relative;
  z-index: 1;
  margin-inline: calc(-1 * var(--lp-space-5));
  padding-block: var(--lp-space-3);
  padding-inline: var(--lp-space-5);
  /* ROUND 5. The first version was designed in isolation and came out as a
     dark bar sitting on a light page. It now belongs to the sky family:
     --lp-sky-deep at the shoulders rising to --lp-brand at the centre, at a
     far lighter weight, and the text goes to --lp-ink rather than white
     because ink on this range measures far better than white does.

     THE FADE IS A PROGRESSION, NOT A PLATEAU. The old version held a solid
     colour from 20 to 80 percent and then dropped, which is why it read as
     a bar with ends. Seven stops now step continuously from fully
     transparent at each edge through two intermediate tones to the
     strongest point at dead centre, so there is no hard start or finish
     anywhere along it.
     "to right" is physical, but the ramp is symmetric about its centre, so
     there is nothing to mirror in RTL. */
  color: var(--lp-ink);
  background: linear-gradient(to right, var(--lp-sky-tint-0) 0%, var(--lp-sky-tint) 14%, var(--lp-sky-mid) 30%, var(--lp-sky-deep) 42%, var(--lp-cd-core) 50%, var(--lp-sky-deep) 58%, var(--lp-sky-mid) 70%, var(--lp-sky-tint) 86%, var(--lp-sky-tint-0) 100%); }

/* ROUND 9: THE BAND RECOMPOSED.
   Round 8 put three tokens of nearly equal weight in a row, a 17px label,
   a 19px price and 19px boxes, with a clock icon as a fourth voice, and
   nothing led. The hierarchy is now decided: the launch price is the
   primary element, the countdown is secondary and steady, the label is
   the caption.
     the price pair is ONE UNIT: a white chip holding 179$ at 22px 800 in
       brand-deep, then بدل at 13px, then 269$ struck at 15px in the muted
       ink, on one baseline. The strike sits inside the same chip as the
       price it is measured against, which is what binds before and after
     the countdown boxes share the chip's surface and edge so the two read
       as one family, but their figures are 17px and their words 11px, a
       clear step below the chip
     the label is 15px 700 ink, the caption
     the icon is gone; three units, days, hours, minutes, the same three
       the offer card shows (2B), so the two countdowns can never disagree
       on what they display
   The reading order, 179$ بدل 269$, is approved copy and is unchanged;
   each figure is dir="ltr" in the markup so the dollar sign stays after
   its digits. Brand-deep on white 12.6, muted ink on white 8.85, ink on
   the sky-deep shoulder 13.3: the weakest point passes with room. */
.lp-cd__inner {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--lp-space-4);
  row-gap: var(--lp-space-2); }

.lp-cd__label {
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-ink); }

.lp-cd__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 12px 4px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-white);
  border: 1px solid var(--lp-card-edge);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow);
  line-height: 1.2;
  white-space: nowrap; }

.lp-cd__new {
  font-size: var(--lp-fs-xl);
  font-weight: 800;
  color: var(--lp-brand-deep);
  font-variant-numeric: tabular-nums; }

.lp-cd__instead {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-ink-muted); }

.lp-cd__old {
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  color: var(--lp-ink-muted);
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums; }

.lp-cd__boxes {
  display: inline-flex;
  align-items: stretch;
  gap: 6px; }

/* ROUND 10: 46px, not 44: MEASURED, the minutes caption is the widest
   word and pushed its box to 45 while the other three sat at 44, so the
   four boxes were not equal. 46 holds the widest caption with room and
   makes the four identical; same reasoning for the 42 on phones below. */
.lp-cd__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  padding: 3px 6px 2px;
  border-radius: var(--lp-r-sm);
  background: var(--lp-white);
  border: 1px solid var(--lp-card-edge);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow); }

/* Tabular figures and a fixed minimum width, so a digit changing every
   second (round 10: the seconds box is back in both countdowns) can
   never reflow the row next to it: the box reserves 44px and the figure
   reserves two digits, so 09 to 10 and 59 to 00 move nothing. */
.lp-cd__num {
  min-width: 2ch;
  text-align: center;
  font-size: var(--lp-fs-base);
  font-weight: 800;
  line-height: 1.2;
  color: var(--lp-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; }

.lp-cd__cap {
  font-size: 11px;
  line-height: 1.3;
  color: var(--lp-ink-muted); }

/* THE WRAP ON PHONES IS DESIGNED, NOT SUFFERED. Row 1 is the label alone,
   centred. Row 2 is the price chip and the three boxes side by side. The
   label is what compresses (it already sits at the small size); the chip
   and the boxes keep their figures, only their padding tightens. MEASURED
   in the round 9 preview at 360: see the report for the chip and boxes
   widths against the harness's 291 and a real phone's 312. Should a
   narrower phone ever fail to hold row 2, flex-wrap drops the countdown
   alone to a third row and the chip keeps its own row under the label,
   which is the order that keeps the price ahead of the clock.
   ROUND 10: WITH FOUR BOXES THAT THIRD ROW IS THE RULE, NOT THE FALLBACK.
   Four boxes at 40px plus three 5px gaps are 175px; the chip is 142; at
   360 the row has 312, so chip, gap and boxes come to 327 and no longer
   hold, and at 375 they meet the edge exactly, which is a wrap that
   would depend on font rendering. So on phones the boxes always take
   their own row, centred, under the chip: label, price, clock, the
   order round 9 designed for exactly this case. Deterministic at 360,
   375 and 414 rather than different on each. */
@media (max-width: 767px) {
  .lp-cd__label {
    flex-basis: 100%;
    text-align: center; }

  .lp-cd__boxes {
    flex-basis: 100%;
    justify-content: center; }

  .lp-cd__inner {
    column-gap: 10px; }

  .lp-cd__price {
    padding: 2px 10px 3px;
    gap: 5px; }

  .lp-cd__new {
    font-size: 20px; }

  .lp-cd__boxes {
    gap: 5px; }

  .lp-cd__unit {
    min-width: 42px;
    padding-inline: 4px; }

  .lp-cd__num {
    font-size: 16px; } }
/* 4b. The call to action, now reusable ------------------------------------
   The glass treatment above is approved and unchanged. Placement margins
   live in the rhythm block near the top of this file, not here. Variants
   come from snippets/lp_cta.liquid. */
/* ==========================================================================
   THE MOBILE CALL TO ACTION BAR, ROUND 7
   --------------------------------------------------------------------------
   What shipped before was a floating pill over the content, colliding
   with the drawer and the sections. This is a different kind of thing: a
   full width band fixed to the very bottom of the viewport, with its own
   opaque ground and its own top edge, that the whole page scrolls above.

   ALWAYS PRESENT ON PHONES, from first paint, never toggled. Its height
   is reserved under the footer regardless, so hiding it gains nothing,
   and a band that blinks in at the hero fold is exactly the jump this
   page keeps being asked to remove. The labels differ from the hero
   button, so it never reads as a duplicate.

   THE GROUND is an opaque sky gradient rather than flat white, because
   the approved glass button needs tone beneath it to read as glass; on
   flat white it collapsed to a white pill.

   Z ORDER, all four chrome layers, lowest first:
       1600  this bar
       1700  the top navigation
       1750  the drawer scrim       covers the bar when the menu opens
       1800  the drawer
       1900  the accessibility trigger, 1901 its panel
     999999  the CookieYes widget, third party, untouched
   The accessibility trigger and the cookie widget are LIFTED above the
   bar on phones: the trigger in lp_accessibility.liquid (its own style
   block wins on order), the cookie widget in section 8l below.
   ========================================================================== */
.lp-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1600;
  padding: var(--lp-space-3) var(--lp-space-4);
  padding-block-end: calc(var(--lp-space-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, var(--lp-sky-mid) 0%, var(--lp-sky-deep) 100%);
  border-block-start: 1px solid var(--lp-border);
  box-shadow: var(--lp-bar-shadow);
  /* ROUND 8: it slides in and out rather than snapping. Transform and
     opacity are compositor properties; visibility follows them with a
     delay on the way out so the button cannot be tabbed to while it is
     off screen, and with no delay on the way in. The a11y motion-off rule
     flattens these durations to nothing, as it does for every transition. */
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.35s var(--lp-ease-out), opacity 0.35s var(--lp-ease-out), visibility 0s linear 0s; }

/* Hidden while the hero or the closing offer is in view (landing.js). */
.lp-bar.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s var(--lp-ease-out), opacity 0.35s var(--lp-ease-out), visibility 0s linear 0.35s; }

/* The drawer's own button (round 8): full width, the long label. */
.lp-cta--drawer {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px var(--lp-space-4);
  font-size: 17px;
  line-height: 1.55;
  white-space: nowrap; }

.lp-bar .lp-cta {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px var(--lp-space-4);
  font-size: 18px;
  line-height: 1.55;
  text-align: center;
  /* The label must never wrap or clip: one clipped label has already
     shipped on this estate. Measured at 360 in the round 7 report. */
  white-space: nowrap;
  overflow: visible; }

@media (max-width: 767px) {
  .lp-bar {
    display: block; } }
/* ROUND 9: the .lp-countdown block that stood here (the round 4 bar above
   the hero) had no markup left since round 8 and is removed at source. */
/* 4d. Syllabus ------------------------------------------------------------
   Two columns on desktop, stacked on mobile with the left column first,
   following the reference. The right column is an accordion of module
   cards. Ground is flat --lp-surface with the same grid as the hero, one
   step lighter than the hero's deep bottom edge so the two sections read
   as distinct. */
/* ROUND 4: the ground gains gradation so the stack has something to sit
   on. It was one flat --lp-surface, which is part of why the cards read as
   floating rather than as sitting. Brighter down the centre where the
   content is, deepening toward the edges and both ends. Symmetric about
   the centre, so nothing to mirror in RTL. */
.lp-syl {
  position: relative;
  /* overflow:clip, NOT hidden, AND THE STICKY ASIDE DEPENDS ON IT.
     overflow:hidden makes this element a scroll container, and a scroll
     container ancestor silently disables position:sticky on everything
     inside it. Measured before the change: the aside scrolled away with
     the page, top going 184 to -16 to -216 as the section scrolled, so
     the whole independent-scroll requirement was doing nothing.
     overflow:clip clips exactly the same way without creating a scroll
     container. The hidden declaration is kept first as a fallback for
     engines that do not know clip: there the aside simply does not stick,
     which is the graceful outcome rather than a broken one.
     This is the same trap the main site FAQ page documents for its own
     sticky nav. */
  overflow: hidden;
  overflow: clip;
  padding-block: var(--lp-space-9);
  padding-inline: var(--lp-space-5);
  background: radial-gradient(90% 55% at 50% 45%, var(--lp-white) 0%, var(--lp-sky-pale-0) 72%), linear-gradient(to bottom, var(--lp-sky-tint) 0%, var(--lp-sky-pale) 26%, var(--lp-sky-pale) 70%, var(--lp-sky-tint) 100%); }

.lp-syl__inner {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--lp-space-8);
  align-items: start; }

/* 2I. THE INDEPENDENT SCROLL, done with sticky rather than a pinned
   ScrollTrigger. Sticky is cheaper, needs no JavaScript, cannot
   desynchronise from the scroll position, and degrades to a normal
   static column wherever it is not supported.

   THE ONE THING THAT BREAKS STICKY: an element taller than its scrollport
   simply stops sticking. So the column is explicitly capped at the
   viewport minus the bar and a margin, and scrolls internally if its own
   content ever exceeds that. Without the cap this silently does nothing on
   a short laptop screen.

   The offset matches the anchor offset so a section jump and a sticky
   column agree about where the top of the page is.

   Below 900px the columns are stacked and there is nothing to hold in
   place, so the existing rule turns sticky off entirely. That is the
   mobile behaviour: the aside simply sits above the cards and scrolls
   with them. */
/* 4A. Two changes beyond the ancestor overflow fix documented at the top of
   this file, both aimed at making the travel long enough to be felt rather
   than merely present.

   It engages 16px below the bar instead of 24px, so it takes hold the
   moment the section arrives.

   overflow-y: auto was removed. It was there to stop the column exceeding
   the viewport, but a sticky element that is ALSO its own scroll container
   is the expensive form, and the max-height alone already guarantees the
   constraint. If the column ever did overflow, clipping is the better
   failure than a nested scrollbar inside a sticky panel. */
.lp-syl__aside {
  position: sticky;
  inset-block-start: calc(var(--lp-nav-h) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--lp-nav-h) - 32px);
  overflow: clip; }

.lp-syl__title {
  margin: 0;
  font-family: var(--lp-font);
  font-size: clamp(1.9rem, calc(2.6vw + 0.9rem), 2.9rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lp-ink); }

.lp-syl__accent {
  color: var(--lp-brand-dark); }

.lp-syl__text {
  margin: 0;
  font-size: var(--lp-fs-base);
  font-weight: 400;
  line-height: 1.85;
  color: var(--lp-ink-muted); }

/* ROUND 4: 12px to 4px. At 12px, with each card already 80px tall, the
   eight read as eight separate floating objects rather than as one
   syllabus. The radius comes down with it, from 16px to 14px, so
   neighbours sit close without looking fused into a single block. */
.lp-syl__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* The 34px the reader actually saw was the Kajabi li margin, removed by
     the reset near the top of this file. With that gone, 2px was suddenly
     too tight to separate the cards at all, so this is the first honest
     value this stack has ever had. */
  gap: 6px; }

/* The module title is an h3 for document structure, but it is only a
   wrapper around the button, so it carries none of the h3 box. */
/* 2A. THE CAUSE, and it was not a media query: there is no min-width media
   query anywhere in this file. This rule reset size, weight and
   line-height to inherit but never font-family, and styles.css loads
   BEFORE this file and sets a heading family on h1..h6. So all eight
   module titles were rendering in the stock Kajabi heading font rather
   than in Zain. At 375 the size and weight change was large enough to read
   anyway; at desktop the wrong family was the only thing visible, which is
   why the change looked like it had not applied.
   The family is now declared explicitly. */
.lp-syl__h {
  margin: 0;
  font-family: var(--lp-font);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit; }

/* SCROLL COST, PART 2 ITEM 6. contain: layout paint tells the browser this
   card cannot affect anything outside itself, so scrolling it into view
   cannot invalidate layout or paint beyond its own box. The theme used
   contain zero times before this round. */
.lp-syl__card {
  contain: layout paint;
  border: 1px solid var(--lp-card-edge);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--lp-card-top) 0%, var(--lp-card-bot) 100%);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow);
  overflow: hidden;
  /* Every transitioned property here is compositor or paint only, so the
     hover state cannot shift the card, its neighbours or the page. */
  transition: background var(--lp-dur-2) var(--lp-ease-out), border-color var(--lp-dur-2) var(--lp-ease-out), box-shadow var(--lp-dur-2) var(--lp-ease-out), transform var(--lp-dur-2) var(--lp-ease-out); }

/* 2F. THE RING AROUND AN OPEN CARD WAS THIS RULE.
   It used to read ".lp-syl__card:hover, .lp-syl__card:focus-within".
   Opening a card leaves focus on its button, so :focus-within stayed
   matched for as long as the card was open and the hover treatment
   latched on: that was the outline the client saw, not an open-state
   style. There is no border or outline on [data-open="true"] anywhere.
   :focus-within is gone. Keyboard users are served by
   .lp-syl__head:focus-visible below, which is a different thing and is
   deliberately kept. */
.lp-syl__card:hover {
  background: linear-gradient(180deg, var(--lp-card-top-h) 0%, var(--lp-card-bot-h) 100%);
  border-color: var(--lp-card-edge-h);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow-h);
  transform: translateY(-1px); }

.lp-syl__card:hover .lp-syl__pill {
  background: var(--lp-brand); }

.lp-syl__card:hover .lp-syl__mark {
  border-color: var(--lp-card-edge-h); }

/* ROUND 5: the module 6 emphasis was removed at the client's request. The
   surface lift, the brand reading-edge rule and the tinted count chip are
   all gone and the class is off the markup. Eight uniform cards. */
/* ROUND 4 HEADER. It was a flat row: number, title, count chip, plus sign,
   all on one line at equal weight, which is why nothing in it led. It is
   now nested, and the nesting carries the hierarchy:

     row 1   the pill holding the module number, then the lesson count,
             then the duration slot when there is one
     row 2   the module title, which is the thing being scanned
     row 3   a one line description, when there is one

   align-items: flex-start so the plus sign stays level with the first row
   rather than drifting to the vertical centre of a card whose height now
   depends on whether a description exists. */
.lp-syl__head {
  display: flex;
  align-items: flex-start;
  gap: var(--lp-space-3);
  width: 100%;
  margin: 0;
  /* Round 6: down again now that the stack is genuinely continuous. */
  padding: var(--lp-space-3) var(--lp-space-5);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer; }

.lp-syl__headings {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px; }

/* 2B. Pill, title and lesson count now share ONE row. The count is pushed
   to the row end with an auto margin, which is logical and therefore
   correct in both directions. min-width:0 on the title is what lets it
   shrink and ellipsis rather than push the count off the row. */
.lp-syl__row {
  display: flex;
  align-items: baseline;
  gap: var(--lp-space-2);
  min-width: 0; }

.lp-syl__row .lp-syl__count {
  margin-inline-start: auto; }

.lp-syl__row .lp-syl__pill {
  align-self: center; }

/* The duration slot, filled in round 10 with the module's total running
   time. It was authored in brass in round 5; brass left this page in
   round 8 (the footer icons were the last place it lived), so it would
   have returned here as a lone third colour in the row. It now shares the
   lesson count chip's family, mist ground and muted ink (7.72 on the
   chip), so the row reads as one number pill and two quiet chips. */
.lp-syl__dur {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-mist);
  color: var(--lp-ink-muted);
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* The description slot. One line, and it truncates rather than wrapping,
   because a header that can grow to three lines breaks the rhythm of a
   stack whose whole job is to be scanned. */
/* 2C. Clearly subordinate to the title: 13.5px against up to 23px. It is
   allowed TWO lines and no more, so a card is one row plus at most two
   short lines and never grows past that. */
.lp-syl__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lp-ink-muted); }

.lp-syl__head:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: -3px; }

/* 4D. MEASURED: this was 26 wide by 28 tall, an ellipse. The cause was that
   width and height were derived from different things: width from
   min-width plus horizontal padding and content, height from line-height
   (1.6 x 15px = 24px) plus 2px of vertical padding either side.
   A circle needs both axes to come from the same number, so both are now
   fixed, the padding is gone, line-height is 1, and the numeral is centred
   by flex rather than by text-align plus line-height. 26px holds two
   tabular digits at 14px with room to spare, so module 10 and up stay
   circular too. */
.lp-syl__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--lp-brand-dark);
  color: var(--lp-surface-elev);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums; }

.lp-syl__count {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-mist);
  color: var(--lp-ink-muted);
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap; }

/* MEASURED BEFORE: 19px, weight 800, line-height 28.5px, letter-spacing
   normal. Heavy and small at the same time, which is a real typographic
   fault rather than a taste one: at 800 the counters close up and at 19px
   there is not enough size to open them again, so the line reads cramped.
   AFTER: larger, lighter, tighter tracking, and it now owns its own line
   instead of competing with two chips and a plus sign.
   21px desktop, 18px at 375. */
/* The clamp ceiling was 21px against an old 19px, a 2px move that read as
   no change at all once the family bug above is fixed. Raised so the
   change is visible, and the title now shares its row rather than owning a
   line, so it can afford the size. */
.lp-syl__name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(1.125rem, calc(0.5vw + 1rem), 1.4375rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--lp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

/* A plus that loses its upright bar when open. Symmetric, so there is
   nothing to mirror in RTL. */
.lp-syl__mark {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--lp-r-sm);
  border: 1px solid var(--lp-border);
  background: var(--lp-surface-elev); }

.lp-syl__mark::before,
.lp-syl__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: var(--lp-brand-dark);
  transform: translate(50%, -50%); }

.lp-syl__mark::before {
  width: 12px;
  height: 2px; }

.lp-syl__mark::after {
  width: 2px;
  height: 12px;
  transition: opacity var(--lp-dur-2) var(--lp-ease-out); }

.lp-syl__card[data-open="true"] .lp-syl__mark::after {
  opacity: 0; }

/* The panel animates its HEIGHT, measured by the section script.
   The obvious CSS-only version, transitioning grid-template-rows from 0fr
   to 1fr, was built first and then measured: it does not survive here.
   The grid has an indefinite height, so Chrome resolves both endpoints of
   the interpolation against zero free space and the row sticks at 0px.
   Verified live on 2026-08-31, every panel stayed shut after the first
   toggle. Height with a measured target cannot get stuck.

   The CSS defaults are the no-JavaScript answer and are correct on their
   own: a closed panel is 0 and an open one is auto, so with the script
   absent the first card is still open and the rest are still closed. The
   script only supplies pixel targets so the change can be animated.
   The widget's stop-motion rule flattens transition-duration to 0.001ms,
   so stopping animations makes this instant with no extra wiring, and the
   transitionend handler still fires. */
/* THE COLLAPSE IS GATED ON JAVASCRIPT BEING PRESENT.
   The script sets data-lp-js="on" on the section as its first act, and
   only then do the panels collapse. WITH JAVASCRIPT DISABLED EVERY PANEL
   IS OPEN and all 32 lessons are readable. The previous build collapsed
   in CSS, which meant a visitor without JavaScript could read module 1
   and nothing else, with no way to open the rest.
   All eight buttons are authored aria-expanded="true" to match that
   no-script state, and the script writes the real values on boot. An
   attribute that says collapsed while the content is visible is worse
   than no attribute at all.
   The duration is a hard value rather than a token so an accessibility
   token sweep cannot silently zero it; the stop-animations rule flattens
   it deliberately instead. */
.lp-syl__panel {
  position: relative;
  overflow: hidden; }

/* ==========================================================================
   2G. THE AMBIENT LAYER INSIDE AN OPEN PANEL
   --------------------------------------------------------------------------
   A deliberate, bounded exception to this page's no continuous loops rule,
   and the bounds are what make it acceptable:
     it exists only inside a panel that is actually open
     only one panel is ever open, so there is never more than one running
     it is started on open and killed on close by the accordion script
     stop-animations kills it through the lpMotion registry
     prefers-reduced-motion never starts it at all

   WHAT IT COSTS. One promoted layer being translated. No repaint, no
   layout, no filter: a single wide soft gradient moving on transform, which
   is the cheapest continuous thing a browser can be asked to do. It is the
   same class of work as one CSS transform on one div, and unlike the six
   card illustrations there is never more than one of it.

   It sits BEHIND the lesson list and at low opacity, so it is clearly
   secondary and never competes with reading. The layer is wider than the
   panel so its soft edges stay off screen throughout the drift.
   ========================================================================== */
.lp-syl__ambient {
  position: absolute;
  inset-block: -20%;
  inset-inline: -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(38% 60% at 50% 50%, var(--lp-sky-mid) 0%, var(--lp-sky-tint) 45%, var(--lp-sky-tint-0) 72%);
  opacity: 0.55;
  /* will-change is deliberately NOT here. It is set by startAmbient() and
     cleared by stopAmbient() in sections/features.liquid. Sitting in the
     stylesheet it promoted all eight ambient layers permanently, on a page
     where at most one ever animates and only after a click. */ }

.lp-syl__panel-inner {
  position: relative;
  z-index: 1; }

/* content-visibility lets the browser skip rendering work entirely for the
   seven panels that are collapsed at any moment. contain-intrinsic-size
   gives it a placeholder height so skipping does not change the scrollbar. */
[data-lp-js="on"] .lp-syl__panel {
  height: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
  transition: height var(--lp-accordion); }

[data-lp-js="on"] .lp-syl__card[data-open="true"] .lp-syl__panel {
  height: auto; }

.lp-syl__panel-inner {
  min-height: 0; }

.lp-syl__lessons {
  margin: 0;
  padding: 0 var(--lp-space-5) var(--lp-space-4);
  list-style: none; }

.lp-syl__lesson {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
  padding-block: 10px;
  border-block-start: 1px solid var(--lp-border); }

.lp-syl__idx {
  flex: 0 0 auto;
  width: 20px;
  color: var(--lp-ink-muted);
  font-size: var(--lp-fs-sm);
  font-variant-numeric: tabular-nums; }

/* min-width:0 is what lets the ellipsis work inside a flex row. */
.lp-syl__lesson-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--lp-fs-base);
  line-height: 1.6;
  color: var(--lp-ink); }

/* ROUND 10: the lesson's running time, at the row's far end (inline end,
   the left on this page), never wrapping, tabular so the column of
   figures lines up down an open module. The title keeps min-width: 0
   beside it, so it still truncates rather than pushing this off the row. */
.lp-syl__lesson-dur {
  flex: 0 0 auto;
  margin-inline-start: auto;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--lp-ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; }

/* 4e. Social proof --------------------------------------------------------
   Overlapping avatars, then the claim, then the rating. The faces are the
   main site's own reviewers; see the comment in sections/features.liquid.
   The overlap uses a negative margin-inline-start, which is logical, so the
   stack leans the correct way in both directions without a dir branch. */
.lp-syl__proof {
  display: flex;
  align-items: center;
  gap: var(--lp-space-4);
  flex-wrap: wrap; }

.lp-syl__faces {
  display: flex;
  align-items: center; }

.lp-syl__face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lp-surface-elev);
  box-shadow: 0 1px 3px rgba(11, 27, 58, 0.14); }

.lp-syl__face + .lp-syl__face {
  margin-inline-start: -12px; }

.lp-syl__proof-line {
  margin: 0;
  font-size: var(--lp-fs-base);
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-ink); }

.lp-syl__rating {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: var(--lp-space-2); }

.lp-syl__stars {
  display: inline-flex;
  color: var(--lp-amber); }

.lp-syl__stars svg {
  width: 84px;
  height: 17px; }

.lp-syl__rating-num {
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  color: var(--lp-ink-muted);
  font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .lp-syl__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lp-space-6); }

  .lp-syl__aside {
    position: static; } }
@media (max-width: 767px) {
  :root {
    --lp-grid-size: 40px; }

  .lp-syl {
    padding-block: var(--lp-space-8); }

  .lp-syl__head {
    padding: var(--lp-space-4); }

  .lp-syl__lessons {
    padding-inline: var(--lp-space-4); }

  /* ROUND 10: THE HEADER ROW HOLDS FOUR THINGS NOW (pill, title, count,
     duration) and at 360 it has about 254px: pill 26, count about 50,
     duration up to about 115 and three gaps would leave the title 40px.
     So on phones the row wraps DELIBERATELY into two lines: line one the
     pill and the title (the title takes the rest of the line and still
     truncates), line two the count and the duration, flush with the row's
     reading edge under the pill. MEASURED: indenting line two under the
     title's start (34px) made count, gap and the longest duration chip
     232px, which is more than the 219px a 360 row has in the harness, so
     the duration fell to a THIRD line; flush at the edge the pair needs
     198px and holds at every width. One extra 24px line per card; the
     aside is static here, so nothing sticky is affected. */
  .lp-syl__row {
    flex-wrap: wrap;
    row-gap: 4px; }

  .lp-syl__row .lp-syl__name {
    flex: 1 1 calc(100% - 34px); }

  .lp-syl__row .lp-syl__count {
    margin-inline-start: 0; }

  /* MEASURED at 360 in the harness (343px inner): the two longest module
     totals put count, gap and duration at 219px on a 219px line, so
     modules 6 and 7 fell to a third line. One size step and 2px less
     padding on each chip bring the pair to about 205px. */
  .lp-syl__row .lp-syl__count,
  .lp-syl__row .lp-syl__dur {
    padding-inline: 6px;
    font-size: 14px; }

  /* Truncate rather than wrap to three ragged lines, as the reference does,
     but over TWO lines rather than one. Measured at 360: a single line cut
     "طلب المساعدة والضغطات على الصدر وجهاز الصدمات" at 54 percent, which
     drops the defibrillator from a lesson about defibrillation. Two lines
     still end in an ellipsis and still cannot reach three, which is what
     the reference is actually protecting against, and every title survives
     intact. */
  .lp-syl__lesson-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; } }
/* 4f. Why this course ------------------------------------------------------
   Section 2. Markup and the reason it lives in features.liquid are
   documented at the top of that file.

   COLOUR POLICY FOR THIS SECTION, and it is the reason the extra colour is
   safe. The six accents below are used for TWO things only: the strokes and
   fills inside a card's illustration, and the hairline along the card's top
   edge. Both are non-text, where the threshold is 3:1, and all six measure
   well above that on the card surface. Every word of text in this section is
   --lp-ink or --lp-ink-muted on the same white glass as the rest of the
   page, so no text contrast anywhere depends on which accent a card got. */
.lp-why {
  position: relative;
  overflow: hidden;
  padding-block: var(--lp-space-9);
  padding-inline: var(--lp-space-5);
  background: radial-gradient(85% 50% at 50% 0%, var(--lp-white) 0%, var(--lp-sky-pale-0) 70%), linear-gradient(to bottom, var(--lp-sky-tint) 0%, var(--lp-sky-pale) 30%, var(--lp-sky-pale) 68%, var(--lp-sky-tint) 100%); }

.lp-why__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)), repeating-linear-gradient(to bottom, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)); }

/* 3A. The approved heading, styled to match the syllabus heading including
   its accent word treatment, so the two sections read as siblings. */
.lp-why__title {
  margin: 0;
  font-family: var(--lp-font);
  font-size: clamp(1.9rem, calc(2.6vw + 0.9rem), 2.9rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lp-ink);
  text-align: center; }

.lp-why__accent {
  color: var(--lp-brand-dark); }

.lp-why__inner {
  position: relative;
  max-width: 1120px;
  margin-inline: auto; }

/* A real heading for the document outline, carrying the approved nav
   label, without putting unapproved copy on screen. */
.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0; }

/* ---- the stats row ---- */
/* 3B, ROUND 7. THE 2025 FIGURE SAT 22PX LOWER THAN THE OTHER THREE, and the
   cause was this grid's align-items: end. Column four's label is one line
   where the others are two, so its whole column was shorter and was being
   pushed to the bottom of the row. Measured live: numeral tops 894, 894,
   894 and 916. With the columns aligned to the START every numeral shares
   one top edge, and because all four share one font size and line height
   they share one baseline too; every label then starts at the same y
   whatever its line count. Verified at every width in the round 7 report. */
.lp-why__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-space-5);
  align-items: start;
  padding-block-end: var(--lp-space-4);
  border-block-end: 1px solid var(--lp-border); }

.lp-why__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px; }

/* 3B. The label carries every word beneath the numeral. ROUND 8: the
   second figure's label is the full approved sentence, which runs to two
   lines at desktop and three on phones; align-items: start on the grid
   keeps all four numerals and all four label tops level whatever the
   line count, and a soft measure stops a long label from spreading. */
/* Tabular figures plus a reserved minimum width, so a digit changing during
   the count cannot change the numeral's box and shift the row. The count is
   what makes this necessary: at rest the widths never change.

   MEASURED, AND 3.5ch WAS NOT ENOUGH. Sampling the numeral boxes across a
   real count showed 1000 jumping from 115.5px to 135.3px as it crossed
   from three digits to four, and 97% widening from 115.5px to 122.5px.
   The reservation has to cover the LONGEST FINAL STRING, which is four
   characters, not an average of them. 4.5ch covers every final value here
   with room to spare and makes all four numerals identical in width,
   which the row wants anyway. */
.lp-why__num {
  min-width: 4.5ch;
  font-size: clamp(2.25rem, calc(2.6vw + 1.1rem), 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lp-brand-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; }

.lp-why__stat-label {
  margin-block-start: 4px;
  max-width: 24ch;
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  line-height: 1.45;
  color: var(--lp-ink); }

/* ---- the six cards ---- */
.lp-why__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lp-space-5); }

.lp-why__card {
  contain: layout paint;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--lp-space-5);
  border: 1px solid var(--lp-card-edge);
  border-radius: var(--lp-r-md);
  background: linear-gradient(180deg, var(--lp-card-top) 0%, var(--lp-card-bot) 100%);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow);
  overflow: hidden;
  transition: box-shadow var(--lp-dur-2) var(--lp-ease-out), border-color var(--lp-dur-2) var(--lp-ease-out), transform var(--lp-dur-2) var(--lp-ease-out); }

/* The accent hairline. Non-text, and the only place the accent touches the
   card's own surface. */
.lp-why__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--lp-why-accent); }

.lp-why__card:hover {
  border-color: var(--lp-card-edge-h);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow-h);
  transform: translateY(-2px); }

/* 3C, ROUND 7. THE CARD HEADINGS HAD NO RULE AT ALL. Round 6 introduced
   six h3 headings and declared nothing for them, so Kajabi's stock
   h1..h6 family rule (Montserrat, from the theme settings) and its 30px
   h3 size applied. Measured live: Montserrat 700 30px while every other
   word on the page was Zain. The family is now declared here AND
   inherited by the guard rule near the top of the file, so it cannot
   recur on the next heading someone adds. Weight 800 is what every
   heading on this page uses; 22px sits between the 17px paragraph and
   the 46px section heading.
   The paragraph gets an explicit size too: it was inheriting Kajabi's
   16px body rather than the page's 17px base. */
.lp-why .lp-why__h {
  margin-block-start: 0;
  font-family: var(--lp-font);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--lp-ink); }

.lp-why .lp-why__p {
  margin-block-start: 0;
  font-size: var(--lp-fs-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--lp-ink); }

.lp-why__card[data-lp-why-card="1"] {
  --lp-why-accent: var(--lp-a-1); }

.lp-why__card[data-lp-why-card="2"] {
  --lp-why-accent: var(--lp-a-2); }

.lp-why__card[data-lp-why-card="3"] {
  --lp-why-accent: var(--lp-a-3); }

.lp-why__card[data-lp-why-card="4"] {
  --lp-why-accent: var(--lp-a-4); }

.lp-why__card[data-lp-why-card="5"] {
  --lp-why-accent: var(--lp-a-5); }

.lp-why__card[data-lp-why-card="6"] {
  --lp-why-accent: var(--lp-a-6); }

/* ==========================================================================
   THE SIX INTERFACE PANELS
   --------------------------------------------------------------------------
   Round 6 replaced six abstract illustrations with six miniature pieces of
   product interface. The brief for the old ones was mine and it was wrong:
   it asked for small films and invited abstract drawing, and abstract
   drawing at this size reads as crude no matter how carefully it is made.

   What makes these read as professional is not craft, it is CATEGORY. A
   checklist with real step names, a progress panel with real row labels
   and a chip grid with the real module names all look like a corner of the
   product because that is what they are. None of them is trying to be an
   illustration.
   ROUND 10: the set is checklist, register, continuity (two devices and
   three tracks, the old cards 3 and 4 merged), dispatch (a log of the
   syllabus's own module names, the new team card), chips, lesson.

   Every panel is a contained block BELOW the card's text with its own
   surface, radius and padding, so it belongs to the card's composition
   rather than hovering over it.

   MOTION: transform and opacity only. No filters, no stroke-dashoffset,
   no continuous layout work. Each panel's resting state as declared here
   is its FINISHED state, so stop-animations and reduced motion both land
   on a complete, sensible panel with nothing missing.
   ========================================================================== */
.lp-why__panel {
  /* auto pushes the panel to the bottom of its card. The cards are grid
     items and stretch to the tallest in the row, so without this a card
     with short copy leaves a gap between its text and its panel while its
     neighbour has none, and the six panels stop lining up. */
  margin-block-start: auto;
  /* 3E, ROUND 7. ONE PANEL BOX FOR ALL SIX. Measured before: panel heights
     ran from 86px to 197px across the six, so the panels' top edges
     wandered within a row even though their bottoms were pinned. Every
     panel is now the same 168px box, sized to the tallest content (the
     rebuilt lesson page measures 143px inside 24px of padding), with its
     contents centred vertically inside it. Six identical objects at the
     foot of six cards is what makes the grid read as one composition. */
  min-height: 168px;
  padding: var(--lp-space-3);
  border-radius: var(--lp-r-sm);
  border: 1px solid var(--lp-panel-edge);
  background: var(--lp-panel-bed);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.5; }

/* ROUND 7. The panel's contents live in one wrapper so the runtime can
   fade the CONTENT in after the card has arrived, and out again before a
   loop restarts, without ever touching the panel's own bed. That is what
   removed the snap every loop used to make when its children reset. The
   wrapper is the flex column the panel used to be. */
.lp-pnl__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0; }

/* ---- 1. the step checklist ----
   3E, ROUND 7: the rows grew to fill the shared panel box. Four 16px rows
   with 6px gaps sat as a small cluster in a 168px panel; 20px rows with
   10px gaps and a 13px label read as a list that belongs to its frame. */
.lp-why__panel[data-lp-panel="checklist"] .lp-pnl__body {
  gap: 10px; }

.lp-pnl__row {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
  font-size: 13px; }

.lp-pnl__box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--lp-why-accent);
  background: var(--lp-why-accent); }

.lp-pnl__box svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--lp-surface-elev);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round; }

.lp-pnl__row--pending .lp-pnl__box {
  background: transparent;
  border-color: var(--lp-panel-edge-strong); }

.lp-pnl__label {
  color: var(--lp-ink-muted);
  font-weight: 700; }

/* ---- 2. formal against spoken ---- */
.lp-pnl__line {
  display: flex;
  align-items: baseline;
  gap: var(--lp-space-2); }

.lp-pnl__tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: var(--lp-r-pill);
  font-size: 10.5px;
  font-weight: 800;
  background: var(--lp-panel-edge);
  color: var(--lp-ink-muted); }

.lp-pnl__line--spoken .lp-pnl__tag {
  background: var(--lp-why-accent);
  color: var(--lp-surface-elev); }

.lp-pnl__say {
  color: var(--lp-ink-muted); }

.lp-pnl__line--spoken .lp-pnl__say {
  color: var(--lp-ink);
  font-weight: 700; }

/* The wipe is a clip on a child, so it animates on transform rather than
   on width, which would be layout. */
.lp-pnl__wipe {
  display: inline-block; }

/* ---- 3. two devices, one lesson (ROUND 7 REBUILD, ROUND 10 MERGE) ----
   A phone and a laptop at real proportion, each a dark shell around a
   white screen, each screen holding the same miniature lesson. The two
   fills share one progress; the runtime hands it between the screens.
   ROUND 10: the devices row is one half of the merged card's panel
   (.lp-why__panel--continuity); the three tracks beneath it are 3b. The
   body stays a column; the devices sit in their own row wrapper. */
.lp-why__panel--continuity .lp-pnl__body {
  gap: 0; }

.lp-pnl__dev {
  display: flex;
  flex-direction: column;
  align-items: center; }

/* The phone: 46 by 92, a 19.5 to 9 slab with rounded corners, a speaker
   slot above the screen and a home bar below it. */
.lp-pnl__dev--phone {
  width: 46px;
  height: 92px;
  padding: 7px 3px 6px;
  border-radius: 9px;
  background: var(--lp-device-shell);
  gap: 3px; }

.lp-pnl__speaker {
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--lp-panel-edge-strong);
  flex: 0 0 auto; }

.lp-pnl__home {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--lp-panel-edge-strong);
  flex: 0 0 auto; }

/* The laptop: a lid holding the screen, on a wider base with a lip. */
.lp-pnl__dev--lap {
  width: 152px; }

.lp-pnl__lid {
  display: block;
  width: 130px;
  height: 80px;
  padding: 4px;
  border-radius: 6px 6px 2px 2px;
  background: var(--lp-device-shell); }

.lp-pnl__base {
  display: block;
  width: 152px;
  height: 6px;
  border-radius: 0 0 5px 5px;
  background: var(--lp-device-shell);
  position: relative; }

.lp-pnl__base::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 50%;
  width: 26px;
  height: 2px;
  margin-inline-start: -13px;
  border-radius: 0 0 2px 2px;
  background: var(--lp-panel-edge-strong); }

.lp-pnl__scr {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 3px;
  border-radius: 4px;
  background: var(--lp-device-screen);
  overflow: hidden; }

.lp-pnl__dev--phone .lp-pnl__scr {
  flex: 1 1 auto;
  border-radius: 5px; }

/* The video block inside a screen: dark ground, play mark, 16 by 9 on the
   laptop and squarer on the phone where the width is tiny. */
.lp-pnl__vid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 18px;
  border-radius: 2px;
  background: var(--lp-video-ground);
  flex: 0 0 auto; }

.lp-pnl__dev--lap .lp-pnl__vid {
  height: 34px; }

.lp-pnl__vid svg {
  width: 10px;
  height: 10px;
  fill: var(--lp-device-screen); }

.lp-pnl__dev--lap .lp-pnl__vid svg {
  width: 14px;
  height: 14px; }

.lp-pnl__bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--lp-panel-edge);
  flex: 0 0 auto; }

.lp-pnl__bar--title {
  height: 4px;
  width: 70%;
  background: var(--lp-panel-edge-strong); }

.lp-pnl__bar--short {
  width: 60%; }

.lp-pnl__track {
  display: block;
  margin-block-start: auto;
  height: 4px;
  border-radius: 2px;
  background: var(--lp-panel-edge);
  overflow: hidden;
  flex: 0 0 auto; }

/* Resting state: the progress the two screens share, 72 percent (round
   10). The runtime animates scaleX from 0 on the phone to 40, hands off
   to the laptop at the same 40 and carries it to 72, then returns here. */
.lp-pnl__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--lp-why-accent);
  transform-origin: 100% 50%;
  transform: scaleX(0.72); }

/* ---- 3b. the merged card's three tracks (ROUND 10) ----
   Beneath the two devices, three columns: an approved label and a
   percentage on one line, a 6px track under them. Height budget inside
   the 168px panel: devices 92 + gap 8 + columns 26 = 126 of the 144
   available. Resting state: 72, 46, 22. */
.lp-pnl__devices {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--lp-space-5); }

.lp-pnl__tracks {
  display: flex;
  gap: var(--lp-space-3);
  margin-block-start: 8px; }

.lp-pnl__tcol {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; }

.lp-pnl__trow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.3; }

.lp-pnl__plabel {
  color: var(--lp-ink-muted);
  font-weight: 700; }

.lp-pnl__tcol .lp-pnl__track {
  margin-block-start: 0;
  height: 6px;
  border-radius: 3px; }

.lp-pnl__tcol .lp-pnl__fill {
  width: 100%;
  height: 100%; }

.lp-pnl__fill[data-pct="72"] {
  transform: scaleX(0.72); }

.lp-pnl__fill[data-pct="46"] {
  transform: scaleX(0.46); }

.lp-pnl__fill[data-pct="22"] {
  transform: scaleX(0.22); }

.lp-pnl__pct {
  flex: 0 0 auto;
  min-width: 3ch;
  text-align: end;
  color: var(--lp-ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums; }

/* The resume cue: a ring inside a screen that pulses once when the lesson
   is picked up on the other device. Transform and opacity only; resting
   state invisible, because it is a moment, not a state. */
.lp-pnl__cue {
  position: absolute;
  inset: 1px;
  border: 2px solid var(--lp-why-accent);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none; }

/* ---- 4. the dispatch log (ROUND 10) ----
   A header line (live dot, signal bar) and five 18px rows: index, tag,
   tick. 18 + 6 + 5 x 18 + 4 x 5 = 134 of the 144 available. Resting
   state: every row present and ticked, the dot at full. */
.lp-why__panel--dispatch .lp-pnl__body {
  gap: 5px; }

.lp-pnl__dhead {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
  margin-block-end: 1px; }

.lp-pnl__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-why-accent); }

.lp-pnl__signal {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--lp-panel-edge); }

.lp-pnl__log {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
  font-size: 11.5px;
  line-height: 1; }

.lp-pnl__lidx {
  flex: 0 0 auto;
  min-width: 2ch;
  color: var(--lp-ink-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; }

.lp-pnl__ltag {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 8px 3px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-panel-edge);
  color: var(--lp-ink);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.lp-pnl__lbox {
  flex: 0 0 auto;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: var(--lp-why-accent); }

.lp-pnl__lbox svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--lp-surface-elev);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* ---- 5. the module chips ---- */
.lp-why__panel--chips .lp-pnl__body {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  gap: 5px; }

.lp-pnl__chip {
  padding: 3px 9px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-panel-edge);
  color: var(--lp-ink-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap; }

/* The two nobody else covers. */
.lp-pnl__chip--only {
  background: var(--lp-why-accent);
  color: var(--lp-surface-elev); }

/* ---- 6. a lesson, assembling (ROUND 7 REBUILD) ----
   Five parts, each big enough to be named at rendered size. Resting
   state is the finished page: scrub bar at 60 percent, bars risen, quiz
   ticked. */
.lp-why__panel--lesson .lp-pnl__body {
  gap: 5px; }

.lp-pnl__block {
  display: flex;
  align-items: center;
  gap: var(--lp-space-2);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--lp-surface-elev);
  border: 1px solid var(--lp-panel-edge); }

/* The player: dark ground, play mark, scrub bar. ROUND 8: a real 16 by 9
   block (146 wide, 82 tall) that shares the first row with the table and
   the chart stacked beside it, instead of a 40px strip across the panel.
   MEASURED before: 308 by 40, about 7.7 to 1, which read as a bar. */
.lp-pnl__row2 {
  display: flex;
  align-items: stretch;
  gap: 6px; }

.lp-pnl__block--video {
  position: relative;
  flex: 0 0 146px;
  width: 146px;
  height: auto;
  aspect-ratio: 1.77778;
  justify-content: center;
  padding: 0;
  background: var(--lp-video-ground);
  border-color: var(--lp-video-ground);
  overflow: hidden; }

.lp-pnl__stack {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px; }

.lp-pnl__stack .lp-pnl__block {
  flex: 1 1 0;
  min-height: 0; }

.lp-pnl__play-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lp-glass-fill-top); }

.lp-pnl__play-mark svg {
  width: 12px;
  height: 12px;
  fill: var(--lp-device-screen); }

.lp-pnl__scrub {
  position: absolute;
  inset-inline: 6px;
  inset-block-end: 5px;
  height: 3px;
  border-radius: 2px;
  background: var(--lp-box-on-deep-edge);
  overflow: hidden; }

.lp-pnl__scrub-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--lp-why-accent);
  transform-origin: 100% 50%;
  transform: scaleX(0.6); }

/* A 3 by 3 table with a header row. */
.lp-pnl__block--table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 5px 6px;
  align-content: center; }

.lp-pnl__cell {
  display: block;
  height: 6px;
  border-radius: 1px;
  background: var(--lp-panel-edge); }

.lp-pnl__cell--head {
  background: var(--lp-why-accent);
  opacity: 0.85; }

/* A five bar chart, bars rising from the baseline. */
.lp-pnl__block--chart {
  padding: 5px 8px 4px;
  align-items: flex-end; }

.lp-pnl__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
  width: 100%;
  height: 100%;
  border-block-end: 1px solid var(--lp-panel-edge-strong); }

.lp-pnl__cbar {
  display: block;
  flex: 1 1 0;
  border-radius: 2px 2px 0 0;
  background: var(--lp-why-accent);
  transform-origin: 50% 100%; }

.lp-pnl__cbar:nth-child(1) {
  height: 45%;
  opacity: 0.55; }

.lp-pnl__cbar:nth-child(2) {
  height: 70%;
  opacity: 0.7; }

.lp-pnl__cbar:nth-child(3) {
  height: 55%;
  opacity: 0.85; }

.lp-pnl__cbar:nth-child(4) {
  height: 100%; }

.lp-pnl__cbar:nth-child(5) {
  height: 80%;
  opacity: 0.85; }

/* The quiz row: a radio, the chosen answer, the tick. */
.lp-pnl__block--quiz {
  height: 24px; }

.lp-pnl__radio {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--lp-why-accent);
  background: var(--lp-why-accent);
  box-shadow: inset 0 0 0 2px var(--lp-surface-elev); }

.lp-pnl__bar--answer {
  flex: 1 1 auto;
  height: 4px;
  width: auto;
  background: var(--lp-panel-edge-strong); }

.lp-pnl__qtick-svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px; }

.lp-pnl__qtick {
  fill: none;
  stroke: var(--lp-why-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* The file chip: a document icon, its type, and its name bar. */
.lp-pnl__block--file {
  height: 24px;
  border-color: var(--lp-why-accent); }

.lp-pnl__doc {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--lp-why-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

.lp-pnl__file-type {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--lp-why-accent); }

.lp-pnl__bar--file {
  flex: 1 1 auto;
  width: auto;
  max-width: 46%; }

@media (max-width: 900px) {
  .lp-why__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .lp-why {
    padding-block: var(--lp-space-8); }

  .lp-why__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lp-space-4); }

  .lp-why__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lp-space-4); }

  .lp-why__card {
    padding: var(--lp-space-4); }

  .lp-why .lp-why__h {
    font-size: 20px; } }
/* 4g. A look inside the course -------------------------------------------
   Section 4. The video is the point of this section, so it is given real
   width and real presence rather than sitting small in the middle. The
   16:9 box is reserved with aspect-ratio so the frame occupies its final
   size from first paint and swapping the iframe in cannot shift anything.
   The iframe overrides its own width and height attributes for the same
   reason. */
.lp-preview {
  position: relative;
  overflow: clip;
  padding-block: var(--lp-space-9);
  padding-inline: var(--lp-space-5);
  background: radial-gradient(80% 55% at 50% 0%, var(--lp-white) 0%, var(--lp-sky-pale-0) 68%), linear-gradient(to bottom, var(--lp-sky-pale) 0%, var(--lp-sky-tint) 55%, var(--lp-sky-mid) 100%); }

.lp-preview__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)), repeating-linear-gradient(to bottom, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)); }

.lp-preview__inner {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  text-align: center; }

.lp-preview__title {
  margin: 0;
  font-family: var(--lp-font);
  font-size: clamp(1.9rem, calc(2.6vw + 0.9rem), 2.9rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lp-ink); }

.lp-preview__accent {
  color: var(--lp-brand-dark); }

/* 5A, ROUND 7. The lead wrapped as one line plus a single orphaned word at
   desktop because the measure was 640px and the sentence needs a little
   more. The measure is now 760px, which holds the whole sentence on one
   line at desktop (measured in the round 7 report); where it must wrap,
   text-wrap: balance shares the words across the two lines rather than
   stranding one. The Arabic is verbatim and untouched. */
.lp-preview__lead {
  margin: 0 auto;
  max-width: 760px;
  font-size: var(--lp-fs-base);
  line-height: 1.8;
  color: var(--lp-ink-muted);
  text-wrap: balance; }

.lp-preview__frame {
  position: relative;
  margin-block-start: 0;
  /* 16 by 9, written as the decimal. A bare slash in a value is the one
     shape the SCSS gate warns about, because Sass may evaluate it as
     division; here it would evaluate to exactly this number and mean the
     same thing, so writing it directly removes the question entirely. */
  aspect-ratio: 1.77778;
  border-radius: var(--lp-r-lg);
  overflow: hidden;
  background: var(--lp-ink);
  border: 1px solid var(--lp-card-edge);
  box-shadow: var(--lp-shadow-lg); }

/* The facade. A real button, so it is keyboard reachable and announced. */
.lp-preview__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: radial-gradient(60% 60% at 50% 50%, var(--lp-navy-700) 0%, var(--lp-ink) 100%); }

/* 5B, ROUND 7. The real first frame. The image fills the reserved box
   (object-fit cover, so the 16 by 9 thumbnail and the 16 by 9 frame
   agree exactly and nothing is cropped), the navy radial above stays
   beneath it as the fallback for a failed load and for the widget's
   hide-images mode, and the scrim is a soft ink wash that seats the play
   mark on the photograph so its contrast does not depend on what the
   frame happens to show. */
.lp-preview__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0; }

.lp-preview__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(48% 48% at 50% 50%, rgba(11, 27, 58, 0.34) 0%, rgba(11, 27, 58, 0.06) 100%); }

/* The play mark now sits on a photograph rather than on a navy ground, so
   its own disc is the navy: MEASURED, a frosted white disc over a light
   frame separated at 1.35 and its white glyph at the same, which is no
   affordance at all. The navy disc carries the white glyph at 12.07
   whatever the frame shows, and the white rim keeps the disc's edge on a
   dark frame. */
.lp-preview__play-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--lp-video-ground);
  border: 2px solid var(--lp-glass-rim);
  box-shadow: 0 14px 34px var(--lp-glass-halo);
  transition: transform var(--lp-dur-2) var(--lp-ease-out); }

.lp-preview__play-mark svg {
  width: 34px;
  height: 34px;
  fill: var(--lp-surface-elev); }

.lp-preview__play:hover .lp-preview__play-mark {
  transform: scale(1.06); }

.lp-preview__play:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: -3px; }

/* Overrides the iframe element attributes, which would otherwise govern
   the rendered size. */
.lp-preview__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0; }

@media (max-width: 767px) {
  .lp-preview {
    padding-block: var(--lp-space-8); }

  .lp-preview__frame {
    border-radius: var(--lp-r-md); }

  .lp-preview__play-mark {
    width: 58px;
    height: 58px; }

  .lp-preview__play-mark svg {
    width: 26px;
    height: 26px; } }
/* 4h. Reviews ------------------------------------------------------------
   Section 5, ROUND 7. Markup, content provenance and the loop mechanism
   are documented in snippets/lp_reviews.liquid. This is the surface.
   The section is full bleed so the band can run edge to edge; only the
   heading sits in the content column. */
.lp-rev {
  position: relative;
  overflow: clip;
  padding-block: var(--lp-space-9);
  background: radial-gradient(85% 50% at 50% 0%, var(--lp-white) 0%, var(--lp-sky-pale-0) 70%), linear-gradient(to bottom, var(--lp-sky-pale) 0%, var(--lp-sky-tint) 50%, var(--lp-sky-pale) 100%); }

.lp-rev__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)), repeating-linear-gradient(to bottom, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)); }

.lp-rev__inner {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--lp-space-5);
  text-align: center; }

.lp-rev__title {
  margin: 0;
  font-family: var(--lp-font);
  font-size: clamp(1.9rem, calc(2.6vw + 0.9rem), 2.9rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lp-ink); }

.lp-rev__accent {
  color: var(--lp-brand-dark); }

.lp-rev__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden; }

/* The viewport clips; the track inside it is wider than any screen and
   is the one element the runtime translates. */
.lp-rev__viewport {
  position: relative;
  overflow: clip;
  padding-block: var(--lp-space-2); }

.lp-rev__track {
  display: flex;
  width: max-content;
  gap: var(--lp-space-5);
  align-items: stretch; }

.lp-rev__list {
  display: flex;
  gap: var(--lp-space-5);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none; }

/* The two soft edges. Painted as two static overlays rather than a mask
   on the viewport, because a mask on the parent of a moving layer would
   be re-applied every frame. These never animate. The gradient
   directions are physical and are written for this RTL page: the start
   edge sits at the physical right and fades leftward into the band. */
.lp-rev__edge {
  position: absolute;
  inset-block: 0;
  width: 72px;
  z-index: 1;
  pointer-events: none; }

.lp-rev__edge--start {
  inset-inline-start: 0;
  background: linear-gradient(to left, var(--lp-sky-tint) 0%, var(--lp-rev-edge-0) 100%); }

.lp-rev__edge--end {
  inset-inline-end: 0;
  background: linear-gradient(to right, var(--lp-sky-tint) 0%, var(--lp-rev-edge-0) 100%); }

/* One card. Fixed width so the band has a rhythm, stretched to the
   tallest card in the row so no review is ever clamped. */
.lp-rev__card {
  flex: 0 0 340px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-3);
  padding: var(--lp-space-5);
  border: 1px solid var(--lp-card-edge);
  border-radius: var(--lp-r-md);
  background: linear-gradient(180deg, var(--lp-card-top) 0%, var(--lp-card-bot) 100%);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow);
  text-align: start; }

.lp-rev__head {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3); }

.lp-rev__face {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lp-surface-elev);
  box-shadow: 0 1px 3px rgba(11, 27, 58, 0.14); }

.lp-rev__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px; }

.lp-rev__name {
  margin: 0;
  font-size: var(--lp-fs-base);
  font-weight: 800;
  line-height: 1.3;
  color: var(--lp-ink); }

.lp-rev__rating {
  margin: 0;
  display: flex;
  align-items: center; }

.lp-rev__stars {
  display: inline-flex;
  color: var(--lp-amber); }

.lp-rev__stars svg {
  width: 84px;
  height: 17px;
  fill: currentColor; }

/* The half star: its fill is the gradient defined once in the snippet's
   hidden svg, referenced by a fill ATTRIBUTE in the markup rather than
   here, because a literal # inside url() is one of the things the SCSS
   compiler on Kajabi can misread. Only the outline is styled here. */
.lp-rev__star--half {
  stroke: currentColor;
  stroke-width: 1.1; }

/* ROUND 8: a four star review shows its fifth star as an outline. The
   partial and empty stars sit at the LEFT end of the row, because this is
   an RTL page and the stars fill from the right. */
.lp-rev__star--empty {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1; }

.lp-rev__text {
  margin: 0;
  font-size: var(--lp-fs-sm);
  line-height: 1.75;
  color: var(--lp-ink); }

.lp-rev__latin {
  font-weight: 700; }

/* THE STATIC STATE, when motion is off or GSAP never loaded. Not an empty
   band: the clone goes, the edges go, and the viewport becomes a native
   horizontal scroll region with snap, so the same fifteen cards are read
   one swipe at a time. Its thin scrollbar is deliberate and visible: it
   is the only affordance that the row scrolls. The page itself never
   scrolls sideways; the row scrolls inside its own box. */
[data-lp-a11y-motion="off"] .lp-rev__viewport,
html.lp-static .lp-rev__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-block-end: var(--lp-space-4);
  padding-inline: var(--lp-space-5); }

[data-lp-a11y-motion="off"] .lp-rev__list--clone,
html.lp-static .lp-rev__list--clone,
[data-lp-a11y-motion="off"] .lp-rev__edge,
html.lp-static .lp-rev__edge {
  display: none; }

[data-lp-a11y-motion="off"] .lp-rev__card,
html.lp-static .lp-rev__card {
  scroll-snap-align: center; }

@media (max-width: 767px) {
  .lp-rev {
    padding-block: var(--lp-space-8); }

  .lp-rev__card {
    flex-basis: 300px;
    width: 300px;
    padding: var(--lp-space-4); }

  .lp-rev__track,
  .lp-rev__list {
    gap: var(--lp-space-4); }

  .lp-rev__edge {
    width: 40px; } }
/* 4i. The closing offer -----------------------------------------------------
   Section 7, ROUND 8. Markup, copy provenance and the payment marks are
   documented in snippets/lp_offer.liquid. This is the surface.

   THE GROUND echoes the hero's: sky family, the faint grid, a pool of
   light, so the close answers the open. THE CARD is the one object on
   the page that earns real depth: a white to sky-pale fill, a bright top
   rim, and three shadow layers, the deepest tinted blue.

   TWO COLUMNS AT DESKTOP. The start column (the right, on this RTL page)
   is where the decision is made: price, countdown, button, reassurance.
   The end column is the evidence: what you get, the practical facts, how
   to pay. A hairline between them. On phones one column, in the order a
   reader wants: price, countdown, button, then the evidence.

   THE SECOND COUNTDOWN is part of the card, not a strip: a caption and
   three boxes with real presence, white lifts on the card's edge, 2.2rem
   figures. No icon, no fade, no gradient. Same deadline as the band. */
.lp-offer {
  position: relative;
  overflow: clip;
  padding-block: var(--lp-space-9);
  padding-inline: var(--lp-space-5);
  background: radial-gradient(120% 70% at 50% 0%, var(--lp-white) 0%, var(--lp-sky-pale-0) 60%), linear-gradient(to bottom, var(--lp-sky-tint) 0%, var(--lp-sky-mid) 55%, var(--lp-sky-field) 100%); }

.lp-offer__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)), repeating-linear-gradient(to bottom, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)); }

/* One soft pool of light behind the card. Centred, so it is direction
   neutral. It never animates. */
.lp-offer__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(720px 520px at 50% 62%, var(--lp-offer-glow), transparent 72%); }

.lp-offer__inner {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  text-align: center; }

.lp-offer__title {
  margin: 0;
  font-family: var(--lp-font);
  font-size: clamp(1.9rem, calc(2.6vw + 0.9rem), 2.9rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lp-ink); }

.lp-offer__accent {
  color: var(--lp-brand-dark); }

.lp-offer__lead {
  margin: 0 auto;
  max-width: 640px;
  font-size: var(--lp-fs-lg);
  line-height: 1.7;
  color: var(--lp-ink-muted); }

.lp-offer__card {
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  /* MEASURED in the round 8 preview at 1440: 1.05fr 0.95fr gave the list
     column 425px, so three of the eight items wrapped while the price
     column carried air. 0.92fr 1.08fr gave the list about 483px and every
     item one line. ROUND 10 added the course duration item, the longest
     one line item: 226px of text at 16px (measured nowrap) against the
     201px a 233px column offered, and it wrapped. 0.8fr 1.2fr gives each
     list column about 261px, which with the 22px tick and an 8px gap
     leaves 231px for text, and the decision column keeps about 358px,
     still more than its 264px clock, its 308px price pair and its 222px
     button label need. */
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--lp-space-7);
  padding: var(--lp-space-7);
  border-radius: var(--lp-r-lg);
  background: linear-gradient(180deg, var(--lp-white) 0%, var(--lp-sky-pale) 100%);
  border: 1px solid var(--lp-card-edge);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-offer-shadow);
  text-align: start; }

/* ---- the decision column ---- */
.lp-offer__decide {
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-5);
  padding-inline-end: var(--lp-space-7);
  border-inline-end: 1px solid var(--lp-border); }

/* ROUND 9: THE DECISION COLUMN AS ONE COMPOSITION.
   Round 8 stacked seven sizes here. Round 9 made the launch price the
   dominant element with the struck price as a small block on its
   baseline. ROUND 10, THIRD PASS, because that block was still not
   resolved: the struck price was a stacked column bottom aligned with a
   0.2rem padding guess, so its baseline never actually met the big
   figure's, the caption and the figure read as a footnote, and the
   column was start aligned under a full width button, so nothing in it
   shared an axis with anything else. MEASURED live before: 179 at
   71.7px, 269 at 17px (a ratio of 4.2 to 1, a footnote), the struck
   block 71px wide against a 175px figure.

   THE SYSTEM NOW. One centred axis for the whole decision column: the
   eyebrow, the pair, the saving pill, the countdown caption and boxes,
   the button (already full width) and the reassurance line all centre on
   it, at desktop and at 375 alike, so the column is symmetrical by
   construction. The pair is bound on a REAL shared baseline:
   align-items: last baseline aligns the LAST line of the struck block
   (the figure, under its caption) with the launch figure's baseline,
   whatever the caption above it does; flex-end stays declared first as
   the fallback for an engine without last baseline. Sizes: the launch
   figure 88px at desktop and 56px at 375, the struck figure 32px and
   22px (0.36 to 0.39 of it, a replaced number rather than a note), the
   caption 12px above it, the eyebrow 13px, the pill 14px. Stacking order
   at 375 is the same five rows, nothing collapses. */
.lp-offer__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px; }

.lp-offer__now-label {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--lp-brand-dark); }

/* The pair: the launch figure first (the start side), the struck block
   after it, both on ONE baseline. See the block comment above. */
.lp-offer__pair {
  margin: 0;
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  justify-content: center;
  gap: 14px; }

.lp-offer__now-num {
  font-size: clamp(3.5rem, calc(4vw + 2rem), 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lp-brand-deep);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; }

.lp-offer__was {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block-end: 0;
  line-height: 1; }

.lp-offer__was-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lp-ink-muted); }

/* The number being replaced: muted, struck with a 2px line in the same
   muted ink so the strike reads at this size, tabular so it sits still. */
.lp-offer__was-num {
  font-size: clamp(1.375rem, calc(1.4vw + 0.7rem), 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--lp-ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lp-ink-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; }

.lp-offer__save {
  margin: 0; }

/* Brand-dark on brand-soft measures 5.9. */
.lp-offer__save-pill {
  display: inline-block;
  padding: 3px 14px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-brand-soft);
  color: var(--lp-brand-dark);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6; }

/* The card's countdown, the quiet element between the price and the
   button, on the column's centre axis (round 10): four boxes at 60px
   with 1.7rem figures, the same four units and the same words as the
   band. Every box reserves two tabular digits (min-width on the box and
   2ch on the figure) so 09 to 10 and 59 to 00 move nothing. */
.lp-offer__cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px; }

.lp-offer__cd-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-ink-muted); }

.lp-offer__cd-boxes {
  display: flex;
  justify-content: center;
  gap: 8px; }

.lp-offer__cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  padding: 7px 10px 5px;
  border-radius: var(--lp-r-md);
  background: var(--lp-white);
  border: 1px solid var(--lp-card-edge);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow); }

.lp-offer__cd-num {
  min-width: 2ch;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--lp-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; }

.lp-offer__cd-cap {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lp-ink-muted); }

.lp-offer__act {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px; }

/* The glass button at full presence: the column's width, the long label. */
.lp-cta--offer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px var(--lp-space-5);
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap; }

.lp-offer__safe {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-ink-muted); }

/* ---- the evidence column ---- */
.lp-offer__evidence {
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-5); }

.lp-offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--lp-space-4); }

.lp-offer__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* 16px, not the 17px base: MEASURED at 1440 the longest one-line item
     needs 193px and a column offers 201, so the base size wrapped two of
     the eight items. */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-ink); }

/* The access line is the longest by far and closes the list, so it
   takes the full row rather than forcing a three line wrap in one column. */
.lp-offer__item:last-child {
  grid-column: 1 / -1; }

.lp-offer__tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-block-start: 1px;
  border-radius: 7px;
  background: var(--lp-brand-soft); }

.lp-offer__tick svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--lp-brand-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round; }

.lp-offer__latin {
  font-weight: 800; }

/* ROUND 9 (2C, 2D): the practical facts and the cancellation line are no
   longer one grey block. The three post-purchase facts stand as their own
   short stack in ink, each with a small brand dot, under a hairline. The
   cancellation line then stands alone under a second hairline, smaller
   and muted, with the link the one thing in it that carries the brand
   colour and an underline. Separated by position, tone and size; the
   line stays legible: muted ink on the card's white measures 8.85 and the
   link 6.7. */
.lp-offer__facts {
  margin: 0;
  padding: var(--lp-space-4) 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-block-start: 1px solid var(--lp-border); }

.lp-offer__fact {
  position: relative;
  margin: 0;
  padding-inline-start: 16px;
  font-size: var(--lp-fs-sm);
  line-height: 1.6;
  color: var(--lp-ink); }

.lp-offer__fact::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-brand-dark); }

.lp-offer__cancel {
  margin: 0;
  padding-block-start: var(--lp-space-3);
  border-block-start: 1px solid var(--lp-border);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--lp-ink-muted); }

.lp-offer__link {
  color: var(--lp-brand-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
  transition: color var(--lp-dur-2) var(--lp-ease-out); }

.lp-offer__link:hover {
  color: var(--lp-brand); }

.lp-offer__link:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px; }

.lp-offer__pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lp-space-3); }

.lp-offer__pay-label {
  margin: 0;
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  color: var(--lp-ink-muted); }

.lp-offer__marks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--lp-space-2); }

/* Muted ink marks on white chips: 8.85 as non-text, well past 3:1. */
.lp-offer__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding-inline: 10px;
  border-radius: 8px;
  background: var(--lp-white);
  border: 1px solid var(--lp-card-edge);
  color: var(--lp-ink-muted); }

.lp-offer__mark svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor; }

@media (max-width: 900px) {
  .lp-offer__card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lp-space-6);
    padding: var(--lp-space-5); }

  .lp-offer__decide {
    padding-inline-end: 0;
    border-inline-end: 0;
    padding-block-end: var(--lp-space-6);
    border-block-end: 1px solid var(--lp-border); } }
@media (max-width: 767px) {
  .lp-offer {
    padding-block: var(--lp-space-8); }

  .lp-offer__list {
    grid-template-columns: minmax(0, 1fr); }

  .lp-offer__pair {
    gap: 10px; }

  /* Four boxes in a 257px inner column at 375: 4 x 54 + 3 x 6 = 234. */
  .lp-offer__cd-boxes {
    gap: 6px; }

  .lp-offer__cd-unit {
    min-width: 54px;
    padding: 6px 6px 4px; }

  .lp-offer__cd-num {
    font-size: 1.55rem; }

  .lp-cta--offer {
    font-size: 18px;
    padding: 14px var(--lp-space-4); } }
/* 4j. The questions ---------------------------------------------------------
   Section 6, ROUND 9. Markup, copy provenance and the accordion script
   are in snippets/lp_faq.liquid. This is the surface.

   DELIBERATELY NOT THE SYLLABUS. Same language, different composition:
   no cards, no number pills, no chips. One centred column of thirteen
   rows separated by hairlines, each row a full width button carrying the
   question with its "س:" mark in the brand colour and a plus at the end
   of the row that turns into a minus when open. The open row lifts on a
   white band that bleeds past the column on both sides, and its answer
   sits in a measured line length at a relaxed line height, so an answer
   reads as a paragraph and not as a list item. The ground is the pale
   sky with the faint grid, between the video section's deep foot and the
   offer's light: light, medium, light down the page.

   THE COLLAPSE IS GATED ON JAVASCRIPT, exactly as the syllabus is: the
   snippet's script sets data-lp-js="on" as its first act, and only then
   do the panels collapse. Without it every answer is open. The height
   transition is on the panel alone, so nothing else on the page shifts.
   No content-visibility here: thirteen short paragraphs are cheap, and
   the placeholder height it needs would be a source of scroll jumps. */
.lp-faq {
  position: relative;
  overflow: clip;
  padding-block: var(--lp-space-9);
  padding-inline: var(--lp-space-5);
  background: linear-gradient(to bottom, var(--lp-sky-pale) 0%, var(--lp-sky-tint) 100%); }

.lp-faq__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)), repeating-linear-gradient(to bottom, var(--lp-grid-line) 0 1px, transparent 1px var(--lp-grid-size)); }

.lp-faq__inner {
  position: relative;
  max-width: 800px;
  margin-inline: auto; }

.lp-faq__title {
  margin: 0;
  text-align: center;
  font-family: var(--lp-font);
  font-size: clamp(1.9rem, calc(2.6vw + 0.9rem), 2.9rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lp-ink); }

.lp-faq__accent {
  color: var(--lp-brand-dark); }

.lp-faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--lp-border); }

.lp-faq__item {
  position: relative;
  border-block-end: 1px solid var(--lp-border); }

/* The band behind an open row: white, bleeding past the column, with the
   card shadow. Opacity only, so opening never repaints the neighbours. */
.lp-faq__item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(-1 * var(--lp-space-5));
  border-radius: var(--lp-r-md);
  background: var(--lp-white);
  box-shadow: inset 0 1px 0 var(--lp-card-rim), var(--lp-card-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lp-dur-2) var(--lp-ease-out); }

.lp-faq__item[data-open="true"]::before {
  opacity: 1; }

.lp-faq__h {
  position: relative;
  z-index: 1;
  margin: 0;
  font: inherit; }

.lp-faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--lp-space-3);
  width: 100%;
  margin: 0;
  padding: 18px var(--lp-space-2);
  background: none;
  border: 0;
  border-radius: var(--lp-r-sm);
  font: inherit;
  font-size: var(--lp-fs-lg);
  font-weight: 800;
  line-height: 1.5;
  color: var(--lp-ink);
  text-align: start;
  cursor: pointer; }

.lp-faq__mark {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--lp-brand-dark); }

.lp-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;
  transition: color var(--lp-dur-2) var(--lp-ease-out); }

.lp-faq__q:hover .lp-faq__q-text {
  color: var(--lp-brand-dark); }

/* The plus: a 24px ring with two bars. Open, the vertical bar turns onto
   the horizontal one and the sign reads as a minus. Transform only. */
.lp-faq__plus {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-block-start: 2px;
  border-radius: 50%;
  background: var(--lp-white);
  border: 1px solid var(--lp-card-edge);
  transition: background var(--lp-dur-2) var(--lp-ease-out), border-color var(--lp-dur-2) var(--lp-ease-out); }

.lp-faq__plus::before,
.lp-faq__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 1px;
  background: var(--lp-brand-dark);
  transition: transform var(--lp-dur-2) var(--lp-ease-out); }

.lp-faq__plus::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%); }

.lp-faq__plus::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%); }

.lp-faq__q:hover .lp-faq__plus {
  background: var(--lp-brand-soft);
  border-color: var(--lp-card-edge-h); }

.lp-faq__item[data-open="true"] .lp-faq__plus::after {
  transform: translate(-50%, -50%) rotate(90deg); }

.lp-faq__q:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: -3px; }

.lp-faq__panel {
  position: relative;
  z-index: 1;
  overflow: hidden; }

[data-lp-js="on"] .lp-faq__panel {
  height: 0;
  transition: height var(--lp-accordion); }

[data-lp-js="on"] .lp-faq__item[data-open="true"] .lp-faq__panel {
  height: auto; }

.lp-faq__panel-inner {
  min-height: 0;
  padding: 0 var(--lp-space-2) 22px; }

/* The answer: 16.5px at 1.85, capped at a measured line length, with its
   "ج:" mark aligned under the question's "س:". The long answer (8) is
   what this is set for. */
.lp-faq__a {
  margin: 0;
  max-width: 62ch;
  display: flex;
  align-items: flex-start;
  gap: var(--lp-space-3);
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--lp-ink-muted); }

.lp-faq__a-text {
  flex: 1 1 auto;
  min-width: 0; }

.lp-faq__latin {
  font-weight: 700; }

.lp-faq__link {
  color: var(--lp-brand-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
  transition: color var(--lp-dur-2) var(--lp-ease-out); }

.lp-faq__link:hover {
  color: var(--lp-brand); }

.lp-faq__link:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px; }

@media (max-width: 767px) {
  .lp-faq {
    padding-block: var(--lp-space-8);
    padding-inline: var(--lp-space-4); }

  .lp-faq__item::before {
    inset-inline: calc(-1 * var(--lp-space-3)); }

  .lp-faq__q {
    gap: 10px;
    padding: 16px var(--lp-space-1);
    font-size: var(--lp-fs-base); }

  .lp-faq__panel-inner {
    padding: 0 var(--lp-space-1) 20px; }

  .lp-faq__a {
    gap: 10px;
    font-size: 16px;
    line-height: 1.8; } }
/* 5. Footer -------------------------------------------------------------- */
/* ==========================================================================
   THE FOOTER, ROUND 7. ONE ROW, THEN THE SMALL PRINT.
   --------------------------------------------------------------------------
   MEASURED BEFORE (round 6, live): 218px at desktop and the row already
   wrapped: logo 104 plus link line 917 plus socials 204 plus gaps 48 came
   to 1273px in a 1120px container, so the socials fell to a second line.

   What made room, and nothing else, at the client's instruction:
     the social targets shrank to 26px boxes with 15px glyphs, the
       smallest target the client allowed (at least 24px)
     the dot separators went, replaced by plain 12px gaps
     the row's container grew from 1120px to the navigation bar's 1180px
   The link size is untouched, the copyright stays in the row, and the
   logo grew from 44px to 56px as briefed. The resulting content width is
   in the round 7 report. Under 1240px the row cannot hold, so from there
   down the footer takes the phone arrangement rather than wrapping
   arbitrarily.
   ========================================================================== */
/* ROUND 8, THIRD PASS. MEASURED BEFORE: 194px at desktop (48 above the
   row, 24 between row and small print, 32 below). Now 24 above, 12
   between, 20 below: the small print sits directly under the row and the
   footer is as short as it can be while the disclaimer stays complete,
   verbatim and readable. Target 148. */
.lp-footer {
  position: relative;
  padding-block: var(--lp-space-5) 20px;
  padding-inline: var(--lp-space-5);
  text-align: center;
  background: var(--lp-surface-elev);
  border-top: 1px solid var(--lp-border); }

.lp-footer__row {
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* MEASURED in the round 7 preview: logo 132, line 872, socials 128 and
     two 24px gaps came to exactly 1180, with nothing to spare. The gaps
     are the only thing here that is neither content nor a size the client
     asked to keep, so they carry the slack: 16px each. */
  gap: var(--lp-space-4); }

.lp-footer__wm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  transition: opacity var(--lp-dur-2) var(--lp-ease-out); }

.lp-footer__wm img {
  display: block;
  height: 56px;
  width: auto; }

.lp-footer__wm:hover {
  opacity: 0.85; }

.lp-footer__wm:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 4px;
  border-radius: 4px; }

.lp-footer__line {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  column-gap: 10px;
  row-gap: var(--lp-space-1);
  font-size: var(--lp-fs-sm);
  line-height: 1.7;
  color: var(--lp-ink-muted); }

.lp-footer__seg {
  white-space: nowrap; }

/* ROUND 8: links in the page's language. Ink at rest with no underline,
   so they read as part of the line rather than as a row of blue; the
   underline and the brand colour arrive on hover, and the keyboard focus
   ring is the same 3px ring every control on this page carries.
   Ink on the footer ground measures 16.10. */
.lp-footer__line a {
  color: var(--lp-ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--lp-dur-2) var(--lp-ease-out); }

.lp-footer__line a:hover {
  color: var(--lp-brand-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; }

.lp-footer__line a:focus-visible {
  color: var(--lp-brand-dark);
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px; }

.lp-footer__socials {
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--lp-space-2); }

/* ROUND 8: the brass came from the main site's palette and belonged to
   it. The icons now sit in this page's muted ink on its mist tint, which
   reads as secondary to the ink links beside them; hover goes to the
   brand blue on white. Muted ink on the mist box measures 7.72, on the
   footer ground 8.85. */
.lp-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--lp-ink-muted);
  background: var(--lp-mist);
  border: 1px solid var(--lp-border);
  transition: background var(--lp-dur-2) var(--lp-ease-out), color var(--lp-dur-2) var(--lp-ease-out), border-color var(--lp-dur-2) var(--lp-ease-out); }

.lp-footer__social:hover,
.lp-footer__social:focus-visible {
  color: var(--lp-white);
  background: var(--lp-brand-dark);
  border-color: var(--lp-brand-dark); }

.lp-footer__social:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 3px; }

.lp-footer__social svg {
  display: block;
  width: 15px;
  height: 15px; }

.lp-footer__social svg.lp-footer__glyph--fb {
  width: 13.5px;
  height: 13.5px; }

.lp-footer__social svg.lp-footer__glyph--yt {
  width: 14px;
  height: 14px; }

.lp-footer__social svg.lp-footer__glyph--mail {
  width: 15.5px;
  height: 15.5px; }

/* Two lines of small print across the full row width. max-width is
   deliberately not a reading measure: this is legal text that should be
   available and quiet, not a paragraph anyone is meant to sit and read.
   Smaller and tighter than round 6, as asked: 11px on 1.5. */
.lp-footer__disclaimer {
  margin: 0 auto;
  max-width: 1180px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lp-ink-muted);
  text-align: center; }

/* Below 1240px the single row cannot hold at the link size the client
   asked to keep, so the footer takes its phone arrangement. ROUND 8, a
   shorter one than round 7's three stacked rows: the logo and the socials
   share ONE row at opposite ends, the links wrap centred beneath, then
   the small print. MEASURED BEFORE at 360: 490px including the 112px bar
   reserve. Target about 385. */
@media (max-width: 1239px) {
  .lp-footer__row {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--lp-space-3) var(--lp-space-4); }

  .lp-footer__line {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    column-gap: var(--lp-space-3);
    row-gap: 2px; }

  .lp-footer__socials {
    order: 2; }

  .lp-footer__wm img {
    height: 44px; }

  .lp-footer__socials {
    gap: var(--lp-space-2); }

  /* Real fingers: 40px targets on touch layouts, glyphs to match. */
  .lp-footer__social {
    width: 40px;
    height: 40px;
    border-radius: var(--lp-r-sm); }

  .lp-footer__social svg {
    width: 17px;
    height: 17px; }

  .lp-footer__social svg.lp-footer__glyph--fb {
    width: 15px;
    height: 15px; }

  .lp-footer__social svg.lp-footer__glyph--yt {
    width: 15.5px;
    height: 15.5px; }

  .lp-footer__social svg.lp-footer__glyph--mail {
    width: 17.5px;
    height: 17.5px; } }
@media (max-width: 767px) {
  .lp-footer {
    padding-block-start: var(--lp-space-5); }

  /* MEASURED at 360: the logo (104) and four 40px targets with 8px gaps
     and their borders came to 312 in exactly 312, so the socials fell
     under the logo. A 40px logo and 6px gaps bring the pair to 297. */
  .lp-footer__wm img {
    height: 40px; }

  .lp-footer__socials {
    gap: 6px; }

  .lp-footer__line {
    font-size: 12.5px;
    line-height: 1.7;
    row-gap: 2px; }

  .lp-footer__disclaimer {
    font-size: 10.5px;
    line-height: 1.5; } }
/* 6. Glass fallbacks ------------------------------------------------------
   Backdrop blur is expensive on mobile, and the CTA is the one element
   we least want to stutter. Cheaper blur and a denser fill under 768px.
   If jank still shows on a real device the documented next step is
   --lp-blur: 0 with the fill at 0.85; that call is deferred to a phone,
   not made in emulation. Raising the fill also raises label contrast
   (16.72 at 0.75), so the fallback is never a legibility regression. */
@media (max-width: 767px) {
  :root {
    --lp-blur: 6px;
    --lp-glass-bg: rgba(255, 255, 255, 0.75); } }
/* No backdrop-filter support: solid white, same border, same ring, same
   shadow. The button loses the material, nothing else changes. */
/* No backdrop-filter: there is nothing to see through, so the honest answer
   is a deliberate frosted chip rather than a broken glass one. The fill goes
   opaque, the sheen is removed (a specular sweep on an opaque surface reads
   as a glitch), and the edge treatment is kept in full because that is what
   still gives the shape its material. Ring and halo are unchanged, so the
   3:1 boundary holds here too.
   The old rule set a bare #FFFFFF, which was the one hardcoded colour left
   in this file. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-cta {
    background: var(--lp-glass-bg); }

  .lp-cta::before {
    display: none; } }
/* ==========================================================================
   6b. THE PRE-PAINT START STATE, ROUND 7
   --------------------------------------------------------------------------
   html.lp-pre is put on the root by the pre-paint script in
   snippets/lp_accessibility.liquid, before any content is parsed, and
   only when motion is going to run. Every element that has an entrance
   is hidden under it here, so the first paint of the page never shows an
   element that is about to be snapped hidden by JavaScript. landing.js
   seeds the real start state inline (opacity, blur and offset) and then
   removes the class; the pre-paint script removes it after three seconds
   regardless, so a missing runtime can only delay the page, never hide
   it.
   OPACITY ONLY, deliberately. No filter and no transform lives here, so
   the worst case of a stranded element is an invisible one for at most
   three seconds, never a permanently blurred or displaced one.
   Motion off (stored preference, prefers-reduced-motion, or no GSAP)
   never carries the class, so this block is inert and the page is final
   at first paint.
   ========================================================================== */
html.lp-pre .lp-nav,
html.lp-pre .lp-cd,
html.lp-pre .lp-hero__title,
html.lp-pre .lp-hero__subtitle,
html.lp-pre .lp-cta--hero,
html.lp-pre .lp-why__title,
html.lp-pre .lp-why__stat,
html.lp-pre .lp-why__card,
html.lp-pre .lp-syl__title,
html.lp-pre .lp-syl__text,
html.lp-pre .lp-syl__aside .lp-cta,
html.lp-pre .lp-syl__proof,
html.lp-pre .lp-syl__card,
html.lp-pre .lp-rev__title,
html.lp-pre .lp-rev__viewport,
html.lp-pre .lp-preview__title,
html.lp-pre .lp-preview__lead,
html.lp-pre .lp-preview__frame,
html.lp-pre .lp-faq__title,
html.lp-pre .lp-faq__item,
html.lp-pre .lp-offer__title,
html.lp-pre .lp-offer__lead,
html.lp-pre .lp-offer__card,
html.lp-pre .lp-footer {
  opacity: 0; }

/* 7. Reduced motion -------------------------------------------------------
   The JS runtime skips all GSAP work under prefers-reduced-motion and adds
   .lp-static; content is visible by default, so nothing depends on JS.
   The only CSS transitions are tiny and are disabled here too. */
@media (prefers-reduced-motion: reduce) {
  .lp-bar,
  .lp-bar.is-hidden,
  .lp-bar .lp-cta,
  .lp-preview__play-mark,
  .lp-footer__wm,
  .lp-offer__link {
    transition: none; }

  .lp-preview__play:hover .lp-preview__play-mark {
    transform: none; }

  .lp-cta,
  .lp-footer__social,
  .lp-footer__line a {
    transition: none; }

  /* The sheen is removed outright rather than left un-animated. An element
     parked mid sweep would show a permanent bright band across the button,
     which is worse than no sheen at all. landing.js never starts the tween
     under reduced motion either; this is the CSS half of the same decision. */
  .lp-cta::before {
    display: none; }

  .lp-cta:hover,
  .lp-cta:focus {
    transform: none; }

  .lp-nav,
  .lp-nav__link,
  .lp-nav__scrim,
  .lp-nav__drawer,
  .lp-syl__card,
  .lp-syl__pill,
  .lp-syl__mark {
    transition: none; }

  .lp-syl__card:hover {
    transform: none; }

  /* The accordion still opens and closes, it just does so instantly. It is
     interaction, not decoration, so it is never disabled outright. */
  [data-lp-js="on"] .lp-syl__panel,
  [data-lp-js="on"] .lp-faq__panel,
  .lp-faq__item::before,
  .lp-faq__plus,
  .lp-faq__plus::before,
  .lp-faq__plus::after,
  .lp-faq__q-text,
  .lp-faq__link {
    transition: none; }

  /* The ambient drift is not merely stopped here, it is removed. A layer
     parked mid drift would sit permanently off centre, which reads as a
     rendering fault rather than as a quiet background. */
  .lp-syl__ambient {
    display: none; }

  .lp-footer__social:hover,
  .lp-footer__social:focus-visible {
    transform: none; } }
/* 8. Accessibility effect layer (lp-a11y) ---------------------------------
   What each widget toggle does to the page. Widget chrome lives in
   snippets/lp_accessibility.liquid; motion wiring in assets/landing.js.
   Ported from the course player and rebuilt against lp tokens.
   The widget (.lp-a11y) is excluded from every effect so the menu stays
   usable while effects are on. */
/* 8a. Text size: 5 levels. The px tokens are redefined per level and the
   html percentage plus body em scale everything else. --lp-fs-title is
   rem-based so it scales with the html percentage automatically. */
[data-lp-a11y-text="lg"] {
  --lp-fs-sm: 16.9px;
  --lp-fs-base: 19.1px;
  --lp-fs-lg: 21.4px;
  --lp-fs-xl: 24.75px;
  font-size: 112.5%; }

[data-lp-a11y-text="xl"] {
  --lp-fs-sm: 18.75px;
  --lp-fs-base: 21.25px;
  --lp-fs-lg: 23.75px;
  --lp-fs-xl: 27.5px;
  font-size: 125%; }

[data-lp-a11y-text="2xl"] {
  --lp-fs-sm: 21px;
  --lp-fs-base: 23.8px;
  --lp-fs-lg: 26.6px;
  --lp-fs-xl: 30.8px;
  font-size: 140%; }

[data-lp-a11y-text="3xl"] {
  --lp-fs-sm: 23.25px;
  --lp-fs-base: 26.35px;
  --lp-fs-lg: 29.45px;
  --lp-fs-xl: 34.1px;
  font-size: 155%; }

[data-lp-a11y-text="lg"] body {
  font-size: 1.125em; }

[data-lp-a11y-text="xl"] body {
  font-size: 1.25em; }

[data-lp-a11y-text="2xl"] body {
  font-size: 1.4em; }

[data-lp-a11y-text="3xl"] body {
  font-size: 1.55em; }

/* ROUND 10, MEASURED at the two largest levels on a 1440 viewport: the
   desktop navigation row overflowed its 1180px container (brand 123, seven
   items 825, button 306 and the gaps came to 1286 at 3xl; at 2xl about
   1177, one pixel from the edge). The row cannot wrap inside a 64px bar,
   so at those two levels the item padding and the button's inline padding
   come down; the type keeps the enlarged size the reader asked for. */
[data-lp-a11y-text="2xl"] .lp-nav__link,
[data-lp-a11y-text="3xl"] .lp-nav__link {
  padding: 0 var(--lp-space-1); }

[data-lp-a11y-text="2xl"] .lp-nav__list,
[data-lp-a11y-text="3xl"] .lp-nav__list {
  gap: var(--lp-space-1); }

[data-lp-a11y-text="2xl"] .lp-cta--nav,
[data-lp-a11y-text="3xl"] .lp-cta--nav {
  padding-inline: var(--lp-space-3); }

/* 8b. High contrast, rebuilt for the LIGHT base.
   Still a pure token override with NO filters: a filter on html or body
   creates a containing block that traps position:fixed descendants,
   which would break the widget trigger, the panel and the skip link.
   Every sky token collapses to white, so all twelve section grounds
   flatten automatically and the gradients stop mattering. Black on
   white then measures 21.00 and the focus ring #B45309 measures 5.02. */
[data-lp-a11y-contrast="high"] {
  --lp-ink: #000000;
  --lp-ink-muted: #1a1a1a;
  --lp-border: rgba(0, 0, 0, 0.55);
  --lp-brand: #00308F;
  --lp-brand-dark: #00246B;
  --lp-brand-deep: #001A4D;
  --lp-brass: #4A3510;
  --lp-amber-deep: #000000;
  --lp-coral: #000000;
  --lp-coral-deep: #000000;
  --lp-focus: #B45309;
  --lp-glass-bg: #FFFFFF;
  --lp-glass-border: #000000;
  --lp-glass-highlight: transparent;
  --lp-surface: #FFFFFF;
  --lp-surface-elev: #FFFFFF;
  --lp-sky-pale: #FFFFFF;
  --lp-sky-tint: #FFFFFF;
  --lp-sky-mid: #FFFFFF;
  --lp-sky-deep: #FFFFFF;
  --lp-mist: #FFFFFF;
  --lp-shadow-md: 0 0 0 2px #000000;
  --lp-shadow-lg: 0 0 0 3px #000000;
  --lp-shadow-cta: 0 0 0 3px #000000; }

/* html[dir] prefix needed: the page base rule in section 2 is
   html[dir="rtl"] body, so a bare attribute plus element loses on
   specificity and the background would stay unchanged. */
html[dir="rtl"][data-lp-a11y-contrast="high"] body,
html[data-lp-a11y-contrast="high"] body {
  background: #FFFFFF; }

/* background-image, not background: the hero ground is now a gradient,
   and only killing the image leaves the token colour to show through. */
[data-lp-a11y-contrast="high"] .lp-hero {
  background-image: none;
  background-color: #FFFFFF; }

[data-lp-a11y-contrast="high"] .lp-hero__glow {
  display: none; }

[data-lp-a11y-contrast="high"] .lp-hero__tag {
  border-width: 2px; }

/* Blur must be killed explicitly: the token change alone removes the
   translucency but backdrop-filter is set on the element. */
[data-lp-a11y-contrast="high"] .lp-cta {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #FFFFFF;
  color: #000000;
  border-width: 2px;
  border-color: #000000;
  box-shadow: 0 0 0 2px #000000; }

[data-lp-a11y-contrast="high"] .lp-footer {
  background: #FFFFFF; }

[data-lp-a11y-contrast="high"] .lp-bar {
  background: #FFFFFF;
  border-block-start: 2px solid #000000;
  box-shadow: none; }

[data-lp-a11y-contrast="high"] .lp-rev__edge {
  display: none; }

[data-lp-a11y-contrast="high"] .lp-offer__glow {
  display: none; }

[data-lp-a11y-contrast="high"] .lp-offer__card,
[data-lp-a11y-contrast="high"] .lp-offer__cd-unit,
[data-lp-a11y-contrast="high"] .lp-offer__mark {
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: none; }

[data-lp-a11y-contrast="high"] .lp-offer__save-pill,
[data-lp-a11y-contrast="high"] .lp-offer__tick {
  background: #FFFFFF;
  border: 2px solid #000000;
  color: #000000; }

[data-lp-a11y-contrast="high"] .lp-cd__price,
[data-lp-a11y-contrast="high"] .lp-cd__unit,
[data-lp-a11y-contrast="high"] .lp-faq__plus {
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: none; }

[data-lp-a11y-contrast="high"] .lp-faq__grid {
  display: none; }

[data-lp-a11y-contrast="high"] .lp-faq__item::before {
  background: #FFFFFF;
  box-shadow: 0 0 0 2px #000000; }

[data-lp-a11y-contrast="high"] .lp-offer__fact::before {
  background: #000000; }

[data-lp-a11y-contrast="high"] .lp-preview__scrim {
  display: none; }

[data-lp-a11y-contrast="high"] .lp-pnl__dev--phone,
[data-lp-a11y-contrast="high"] .lp-pnl__lid,
[data-lp-a11y-contrast="high"] .lp-pnl__base,
[data-lp-a11y-contrast="high"] .lp-pnl__block--video,
[data-lp-a11y-contrast="high"] .lp-pnl__lbox,
[data-lp-a11y-contrast="high"] .lp-pnl__dot {
  background: #000000; }

[data-lp-a11y-contrast="high"] .lp-pnl__ltag {
  background: #FFFFFF;
  border: 1px solid #000000; }

[data-lp-a11y-contrast="high"] .lp-footer__social {
  color: #000000;
  background: #FFFFFF;
  border: 2px solid #000000; }

[data-lp-a11y-contrast="high"] a:not([class*="lp-a11y"]) {
  text-decoration: underline; }

[data-lp-a11y-contrast="high"] :focus-visible {
  outline: 3px solid #B45309 !important;
  outline-offset: 2px !important;
  box-shadow: none !important; }

/* 8c. Grayscale: filter on body children, never on body itself, with the
   widget and guide line excluded so they keep their color identity. */
[data-lp-a11y-grayscale="on"] body > *:not(.lp-a11y):not(.lp-a11y__guide-line):not(.lp-skip) {
  filter: grayscale(1); }

/* 8d. Stop motion: manual override, independent of the OS setting.
   landing.js kills the GSAP layer; this stops CSS motion. */
[data-lp-a11y-motion="off"] *,
[data-lp-a11y-motion="off"] *::before,
[data-lp-a11y-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important; }

/* 8e. Highlight links: underline plus soft brand tint on text links.
   Buttons, social pucks, the skip link and the widget are excluded. */
[data-lp-a11y-links="highlight"] a:not(.lp-cta):not(.lp-footer__social):not(.lp-skip):not([class*="lp-a11y"]) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background-color: rgba(37, 99, 235, 0.12);
  padding-inline: 2px;
  border-radius: 3px; }

/* 8f. Readable font: system stack already strong for Arabic, no extra
   network fetch. Slightly heavier weights. Widget keeps its own type. */
html.lp-a11y-font :where(body, p, li, h1, h2, h3, h4, h5, h6, button, a, span, div):not([class*="lp-a11y"]) {
  font-family: var(--lp-font-readable) !important; }

html.lp-a11y-font :where(body, p, li, a, span):not([class*="lp-a11y"]) {
  font-weight: 500 !important; }

html.lp-a11y-font :where(h1, h2, h3, h4, h5, h6) {
  font-weight: 800 !important; }

html.lp-a11y-font .lp-a11y,
html.lp-a11y-font .lp-a11y * {
  font-family: var(--lp-font) !important; }

/* 8g. Text spacing: conservative extra letter and word gap for Arabic. */
html.lp-a11y-text-spacing :where(body, p, li, h1, h2, h3, h4, h5, h6, button, a, span):not([class*="lp-a11y"]) {
  letter-spacing: 0.04em !important;
  word-spacing: 0.08em !important; }

html.lp-a11y-text-spacing .lp-a11y,
html.lp-a11y-text-spacing .lp-a11y * {
  letter-spacing: normal !important;
  word-spacing: normal !important; }

/* 8h. Line spacing: relax line-height on flowing text. */
html.lp-a11y-line-spacing :where(body, p, li, .lp-hero__subtitle, .lp-hero__meta, .lp-footer__line):not([class*="lp-a11y"]) {
  line-height: 1.9 !important; }

html.lp-a11y-line-spacing .lp-a11y,
html.lp-a11y-line-spacing .lp-a11y * {
  line-height: 1.6 !important; }

/* 8i. Hide images: imagery off, structure kept. The poster flattens to a
   plain surface; SVG icons and the widget stay visible. */
html.lp-a11y-hide-images img:not([role="img"]) {
  visibility: hidden !important; }

html.lp-a11y-hide-images .lp-a11y img {
  visibility: visible !important; }

html.lp-a11y-hide-images .lp-hero__glow {
  display: none; }

/* 8j. Large cursor: 32px SVG data URI with system fallback. */
html.lp-a11y-cursor,
html.lp-a11y-cursor body,
html.lp-a11y-cursor *:not(input):not(textarea) {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 26 L11 21 L15 30 L19 28 L15 19 L23 19 Z' fill='%23ffffff' stroke='%230B1B3A' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0, auto !important; }

html.lp-a11y-cursor :where(a, button, [role="button"], summary, label, select) {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M10 2 L10 18 L14 14 L17 22 L21 20 L18 13 L24 13 Z M9 8 L9 14 L7 14 L11 18 L15 14 L13 14 L13 8 Z' fill='%231D4ED8' stroke='%230B1B3A' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0, pointer !important; }

/* 8k. Reading guide: thin teal line follows the cursor, appended to body
   by the widget JS; disabled on touch devices. */
.lp-a11y__guide-line {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  height: 2px;
  background: rgba(29, 78, 216, 0.65);
  box-shadow: 0 0 8px rgba(29, 78, 216, 0.45);
  pointer-events: none;
  z-index: 2147483646;
  transform: translateY(0);
  will-change: transform; }

/* 8l. THE BOTTOM OF A PHONE SCREEN, ROUND 7.
   Three fixed things share it: the call to action bar across the full
   width, the accessibility trigger at one corner and the CookieYes
   revisit button at the other. The bar owns the bottom; the two widgets
   are lifted to sit just above its top edge. The trigger's lift lives in
   snippets/lp_accessibility.liquid because that style block is parsed
   later and would otherwise win. The cookie widget is third party and
   is styled site wide by CookieYes; this is the one scoped override of
   it on the page, and !important is what it takes to beat the widget's
   own inline positioning.

   ROUND 10: EVERYTHING HERE FOLLOWS THE BAR'S STATE. Round 8 made the
   bar hide over the hero and over the closing offer, and these rules
   were left static, so the cookie button floated 92px up over nothing
   whenever the bar was away, and the footer always ended in a 112px
   blank: MEASURED live at 375 with the page scrolled to its foot, the
   bar hidden (the offer, the section directly above the footer, is
   still 480px on screen there, far past its 8 percent line, so the bar
   is never shown over the footer at these viewport heights) and 108px
   of white under the disclaimer. landing.js now mirrors the bar's
   visibility as html.lp-bar-on and the lift and the reserve apply only
   then. The cookie button moves with the bar's own 0.35s ease; the
   footer's reserve has no transition because it is always off screen
   when it toggles. Without scripts the template's noscript block applies
   all three unconditionally, since the bar is shown everywhere then. */
@media (max-width: 767px) {
  html.lp-bar-on .lp-footer {
    padding-block-end: calc(var(--lp-bar-h) + var(--lp-space-6) + env(safe-area-inset-bottom)); }

  .cky-btn-revisit-wrapper {
    transition: bottom 0.35s var(--lp-ease-out) !important; }

  html.lp-bar-on .cky-btn-revisit-wrapper {
    bottom: calc(var(--lp-bar-h) + 12px + env(safe-area-inset-bottom)) !important; } }