/* Eduzon marketing theme (2026-11-05): placement and palette taken from wise.com as a style reference, using Eduzon's
   own logo, words, video and cards. No Wise assets or fonts. To go back to the old look, remove this file's <link> from
   layouts/app_public.blade.php and landing-page/preview-shell.blade.php.

   What it changes: the video hero, the navigation arrangement, section backgrounds, the shared palette, type.
   What it leaves: card structure, every animation and every function.

   Display font: Archivo (SIL Open Font License, public/fonts/archivo/OFL.txt), hosted here because the site's font
   service has no narrow widths. It is the closest free match to the reference's proportions.

   Works with the no-code editor:
   - the brand colour is the Branding setting (--primary) and the font is the font-pair setting, not hard-coded here;
   - a section with its own background (image, colour, or White / Soft / Dark / Brand) keeps it;
   - the owl hero blends with `darken`, so it stays on a light ground and only the video hero gets the colour block;
   - custom HTML sections are left alone. */

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo/archivo-latin-variable.woff2') format('woff2');
    font-weight: 800 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
    --w-forest: #163300;
    --w-ink: #0e0f0c;
    --w-grey: #454745;
    --w-neutral: #e8ebe6;
    --w-mint: #e2f6d5;
    --w-teal: #a0e1e1;
    --w-teal-soft: #e0f7f7;
    --w-teal-ink: #054d4d;
    --w-rule: #d3d8cf;
    /* the closing section and footer: navy, with a green-to-pink accent (human's reference image, 2026-11-06) */
    --n-navy: #110f3e;
    --n-navy-soft: #e6e5f4;
    --n-green: #3ce08c;
    --n-accent: linear-gradient(90deg, #3ce08c 0%, #27c4c9 30%, #4f9bff 58%, #a78bfa 80%, #e879f0 100%);

    /* the shared palette the sections and cards read. Card structure is untouched: only the colours they resolve change. */
    --primary-ink: var(--w-forest);
    --primary-shade: color-mix(in srgb, var(--primary) 78%, var(--w-forest));
    --p-soft: var(--w-mint);
    --p-border: color-mix(in srgb, var(--w-forest) 22%, #fff);
    --c-sky: var(--w-teal);     --c-sky-shade: #7fcdcd;   --c-sky-soft: var(--w-teal-soft); --c-sky-ink: var(--w-teal-ink);
    --c-sun: var(--primary);    --c-sun-shade: var(--primary-shade); --c-sun-soft: var(--w-mint); --c-sun-ink: var(--w-forest);
    --c-fire: var(--w-forest);  --c-fire-shade: var(--w-forest); --c-fire-soft: var(--w-neutral); --c-fire-ink: var(--w-forest);
    --c-purple: #2f5711;        --c-purple-shade: #2f5711; --c-purple-soft: var(--w-neutral); --c-purple-ink: var(--w-forest);
    --ink-on-light: var(--w-forest);
    --dark: var(--w-forest);
    --text: var(--w-grey);
    --muted: #5c615a;
    --border: var(--w-rule);
    --bg-soft: var(--w-neutral);
    --grad: linear-gradient(135deg, var(--w-forest), color-mix(in srgb, var(--secondary) 20%, var(--w-forest)));
    --bs-link-color-rgb: 22, 51, 0;
    --bs-link-hover-color-rgb: 22, 51, 0;
    --r-btn: 999px;
    --footer-top: var(--n-navy);
}
.lp-tone-sky, .lp-tone-sun, .lp-tone-fire, .lp-tone-purple { --acc-ink: var(--w-forest) !important; }
::selection { background: var(--primary); color: var(--w-forest); }
body { background: #fff; color: var(--w-grey); }

/* ── Type: the display face only on big headings; everything smaller, and all buttons, in the body face ───────────── */
h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-family: var(--font-body); }
.lp-btn, .btn, .lp-btn-ghost, .lp-nav-cta, .lp-path-btn { font-family: var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; }
.lp-title, main h2:not(.lpc-title), main h1 { font-family: var(--font-head); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; color: var(--w-forest); font-weight: 900; line-height: .94; }
.lp-title .lp-accent { color: var(--w-forest) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.lp-subtitle { color: var(--w-grey); }
.blog-content h2 { text-transform: none; line-height: 1.15; }
.lp-eyebrow { background: none !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; color: var(--w-forest) !important; }

/* ── Buttons: flat pills. Hover and press motion is left as it was. ───────────────────────────────────────────────── */
.lp-btn, .btn-primary, .lp-path-btn, .lp-contact-submit, .lp-nav-cta, .lp-btn-ghost, .lp-path-btn-soft, .btn-outline-primary { border-radius: 999px !important; box-shadow: none !important; }
.btn-primary, .lp-btn:not(.lp-btn-ghost), .lp-contact-submit, .lp-path-btn:not(.lp-path-btn-soft) {
    --btn-face: var(--primary); --btn-edge: var(--primary); --btn-text: var(--w-forest);
    background: var(--primary) !important; background-image: none !important; border-color: var(--primary) !important; color: var(--w-forest) !important;
}
.btn-primary:hover, .lp-btn:not(.lp-btn-ghost):hover, .lp-contact-submit:hover, .lp-path-btn:not(.lp-path-btn-soft):hover { background: color-mix(in srgb, var(--primary) 84%, var(--w-forest)) !important; color: var(--w-forest) !important; }
.btn-primary *, .lp-btn:not(.lp-btn-ghost) *, .lp-contact-submit * { color: inherit !important; }
.lp-btn-ghost, .lp-path-btn-soft, .btn-outline-primary {
    --btn-face: #fff; --btn-edge: #fff; --btn-text: var(--w-forest);
    background: #fff !important; color: var(--w-forest) !important; border-color: var(--w-forest) !important;
}
.lp-btn-ghost:hover, .lp-path-btn-soft:hover, .btn-outline-primary:hover { background: var(--w-mint) !important; color: var(--w-forest) !important; }
.lp-store-btn { border-radius: 999px !important; }

/* ── Navigation: full-width white bar. Logo left, links beside it, button right. Sticky and hide-on-scroll still work. ─ */
.navbar-style-glass {
    width: 100%; max-width: none; margin: 0; border-radius: 0 !important;
    background: #fff !important; box-shadow: 0 1px 0 var(--w-rule) !important;
}
.navbar-style-glass.shadow-sm { box-shadow: 0 1px 0 var(--w-rule) !important; }
.navbar-style-glass.sticky-top.navbar-scrolled { translate: 0 0; box-shadow: 0 1px 0 var(--w-rule) !important; }
/* after the rule above, or the bar never leaves: slides out on the way down and back on the way up (header script) */
.navbar-style-glass.sticky-top.is-tucked { translate: 0 -100%; box-shadow: none !important; }
header:has(:focus-visible) > .navbar-style-glass.sticky-top.is-tucked { translate: 0 0; }
.navbar-style-glass .nav-link, .navbar-style-glass .lp-nav-toggle { color: var(--w-forest) !important; box-shadow: none !important; border-color: transparent !important; }
.navbar-nav > .nav-item > .nav-link.active, .navbar-nav > .nav-item > .nav-link[aria-current], .lp-nav-group:has(> .nav-link[aria-current]) {
    background: var(--w-neutral) !important; border-color: transparent !important; box-shadow: none !important; color: var(--w-forest) !important; border-radius: 999px !important;
}
.lp-nav-group:has(> .nav-link[aria-current]) :is(.nav-link, .lp-nav-toggle) { background: transparent !important; box-shadow: none !important; }
.lp-nav-cta { --btn-face: var(--w-forest); --btn-edge: var(--w-forest); --btn-text: var(--primary); background: var(--w-forest) !important; border-color: var(--w-forest) !important; color: var(--primary) !important; }
.lp-nav-cta:hover { background: #0f2400 !important; color: var(--primary) !important; }
.lp-nav-cta-arrow { background: var(--primary) !important; color: var(--w-forest) !important; }
.lp-nav-subicon { background: var(--w-mint) !important; color: var(--w-forest) !important; border-color: transparent !important; box-shadow: none !important; }
@media (min-width: 992px) {
    .navbar-style-glass > .container-xl { grid-template-columns: auto 1fr auto; max-width: 1320px; }
    .navbar-style-glass .navbar-brand { grid-column: 1; justify-self: start; margin-right: 1.5rem; }
    .navbar-style-glass .navbar-nav { grid-column: 2; justify-self: start; }
    .navbar-style-glass .lp-nav-actions { grid-column: 3; }
}

/* ── Hero, video layout: colour block, centred headline, wide video across the colour edge, trust row beneath ─────── */
main > div:first-child > .lp-hslider.lp-hs-lime { padding-top: 5.25rem; }
.lp-hslider.lp-hs-lime {
    margin: 0 !important; border-radius: 0 !important; overflow: visible;
    background: linear-gradient(var(--primary) 0 calc(100% - clamp(13rem, 25vw, 23rem)), #fff 0) !important;
    --hs-font: var(--font-head);
    --hs-ink: var(--w-forest);
}
.lp-hs-lime .lp-hs-stickers { display: none; }
.lp-hs-lime .container { max-width: 1320px; }
.lp-hs-lime .carousel-item { padding-top: clamp(2.25rem, 6vh, 4rem); }
.lp-hs-lime .carousel-item:first-child .row { flex-direction: column; align-items: center; text-align: center; --bs-gutter-y: 0; }
.lp-hs-lime .carousel-item:first-child .lp-hs-copy { display: contents; }
.lp-hs-lime .lp-eyebrow { order: 1; margin: 0 0 1.1rem; padding: 0; width: auto; font-family: var(--font-body); font-size: .86rem; letter-spacing: .08em; }
.lp-hs-lime :is(h1, h2) {
    order: 2; width: auto; max-width: 15ch; margin: 0 auto;
    font-family: var(--font-head); font-weight: 800; text-transform: uppercase; color: var(--w-forest);
    font-size: clamp(2.9rem, 1rem + 7.4vw, 6.5rem); line-height: .9; letter-spacing: -.012em;
}
.lp-hslider.lp-hs-lime :is(h1, h2) .lp-hl .lp-accent {
    background: var(--w-forest) !important; color: var(--primary) !important; -webkit-text-fill-color: currentColor !important;
    border-radius: .14em !important; box-shadow: none !important; rotate: 0deg !important; padding: .17em .16em .02em !important; line-height: .9;
}
.lp-hs-lime .lp-hs-lead { order: 3; width: auto; max-width: 38rem; margin: 1.6rem auto 0; font-family: var(--font-body); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); font-weight: 400; line-height: 1.45; color: var(--w-forest); }
.lp-hs-lime .lp-hs-cta-buttons { order: 4; width: auto; margin: 1.9rem auto 0; justify-content: center; gap: .75rem; }
.lp-hs-lime .lp-hs-cta-buttons .lp-btn:not(.lp-btn-ghost) { --btn-face: var(--w-forest); --btn-edge: var(--w-forest); --btn-text: var(--primary); background: var(--w-forest) !important; border-color: var(--w-forest) !important; color: var(--primary) !important; }
.lp-hs-lime .lp-hs-cta-buttons .lp-btn:not(.lp-btn-ghost):hover { background: #0f2400 !important; color: var(--primary) !important; }
.lp-hs-lime .lp-hs-cta-buttons .lp-btn-ghost { --btn-face: transparent; --btn-edge: transparent; --btn-text: var(--w-forest); background: transparent !important; border-color: var(--w-forest) !important; color: var(--w-forest) !important; box-shadow: none !important; }
.lp-hs-lime .lp-hs-cta-buttons .lp-btn-ghost:hover { background: rgba(22, 51, 0, .1) !important; border-color: var(--w-forest) !important; box-shadow: none !important; }
.lp-hs-lime .lp-hs-visual-col { order: 5; width: 100%; max-width: 1120px; margin: clamp(2rem, 5vh, 3rem) auto 0; flex: none; }
.lp-hs-lime .lp-hv { max-width: none; width: 100%; }
.lp-hs-lime .lp-hv-frame, .lp-hslider.lp-hs-lime .lp-hv-frame { border: 0 !important; border-radius: clamp(16px, 2.2vw, 30px) !important; box-shadow: 0 30px 60px -38px rgba(14, 15, 12, .55) !important; transform: none !important; rotate: 0deg !important; }
.lp-hs-lime .lp-hv-frame:hover, .lp-hs-lime .lp-hv-frame:focus-within, .lp-hs-lime .lp-hv.has-sound .lp-hv-frame { transform: none !important; rotate: 0deg !important; box-shadow: 0 34px 64px -38px rgba(14, 15, 12, .6) !important; }
.lp-hs-lime .lp-hv-foot { text-align: center; padding: .9rem 0 0; color: var(--w-forest); }
.lp-hs-lime .lp-hv-foot * { color: var(--w-forest); }
.lp-hs-lime .lp-hs-trust {
    order: 6; width: auto; margin: clamp(1.25rem, 3vh, 2rem) auto clamp(2.5rem, 6vh, 4rem); justify-content: center;
    background: none !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important;
}
.lp-hs-lime .lp-hs-trust li { color: var(--w-grey); font-family: var(--font-body); }
.lp-hs-lime .lp-hs-trust strong { color: var(--w-forest); font-weight: 700; display: block; }

/* the owl layout needs a light ground */
.lp-hslider:not(.lp-hs-lime) { background: #fff !important; }
.lp-hslider:not(.lp-hs-lime) .lp-hl .lp-accent { color: var(--w-forest); -webkit-text-fill-color: currentColor; background: var(--primary); }

/* ── Section backgrounds: white, the pale neutral, one colour band. Only where the editor has not set a background. ── */
:where(:not([class*="lp-secbg-"])) > :is(.section-features-animated, .lp-day, .lp-mapp, .lp-faq):not([style*="background"]) { background: #fff !important; background-image: none !important; }
:where(:not([class*="lp-secbg-"])) > :is(.lp-usp, .lp-blogfeed, .lp-section.lp-tone-fire):not([style*="background"]) { background: var(--w-neutral) !important; background-image: none !important; }
:where(:not([class*="lp-secbg-"])) > .lp-contact:not(.has-bg):not([style*="background"]) { background: #fff !important; background-image: none !important; }
:where(:not([class*="lp-secbg-"])) > .lp-pcta:not([style*="background"]) { background: var(--primary) !important; background-image: none !important; }
.lp-day::before, .lp-day::after { background: none !important; }
:where(:not([class*="lp-secbg-"])) > .lp-pcta:not([style*="background"]) .btn-primary, :where(:not([class*="lp-secbg-"])) > .lp-pcta:not([style*="background"]) .lp-btn:not(.lp-btn-ghost) { --btn-face: var(--w-forest); --btn-edge: var(--w-forest); --btn-text: var(--primary); background: var(--w-forest) !important; border-color: var(--w-forest) !important; color: var(--primary) !important; }
.lp-secbg-dark > section :is(.lp-title, .lp-subtitle, .lp-eyebrow, .lp-head p), .lp-secbg-brand > section :is(.lp-title, .lp-subtitle, .lp-eyebrow, .lp-head p) { color: #fff !important; }
.lp-secbg-dark > section :is(.lp-card, .accordion-item, .lp-pillar, .lp-bf-card, .lp-path, .lp-mod) :is(h1, h2, h3, h4, p, span), .lp-secbg-brand > section :is(.lp-card, .accordion-item, .lp-pillar, .lp-bf-card, .lp-path, .lp-mod) :is(h1, h2, h3, h4, p, span) { color: var(--w-forest) !important; }

/* other public pages */
.tr-hero { background: var(--primary) !important; background-image: none !important; }
.tr-hero .tr-accent { background: var(--w-forest) !important; color: var(--primary) !important; -webkit-text-fill-color: currentColor !important; box-shadow: none !important; }
.tr-submit { background: var(--w-forest) !important; color: var(--primary) !important; border-radius: 999px !important; box-shadow: none !important; }

/* contact panel uses the brand colour, so its text is forest */
.lp-contact .lp-contact-info-title, .lp-contact .lp-contact-info-lead { color: var(--w-forest) !important; text-shadow: none !important; }
.lp-contact .lp-contact-info { background: var(--primary) !important; }
.lp-contact .lp-contact-info::before { background: var(--primary) !important; }
.lp-contact .lp-contact-info::after { background: var(--w-teal) !important; }

/* readable text in the other section types the editor can switch on */
.lp-ai-msg.is-a, .ct-submit-btn, .mt-cta-btn, .ts-demo-btn-primary, .ts-demo-btn-primary *, .hts-btn-primary { color: var(--w-forest) !important; }
.lp-eco-platform, .lp-award-year, .lp-cta-primary { color: var(--w-forest) !important; }

/* ── Closing section and footer: navy, white button, the accent on the headline. Text colour stays with the editor's
      footer setting. The headline's gradient is the human's reference; a browser without clipped text keeps it white. ── */
.footer { --footer-top: var(--n-navy); background: var(--n-navy) !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .footer-cta h2 { background: var(--n-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.footer .footer-cta .footer-cta-btn, .footer .footer-cta .footer-cta-btn:hover { --btn-face: #fff; --btn-edge: #fff; --btn-text: var(--n-navy); border-color: #fff !important; color: var(--n-navy) !important; }
.footer .footer-cta .footer-cta-btn { background: #fff !important; }
.footer .footer-cta .footer-cta-btn:hover { background: var(--n-navy-soft) !important; border-color: var(--n-navy-soft) !important; }
.footer a.btn-primary:not(.footer-cta-btn), .footer a.lp-btn:not(.footer-cta-btn) { --btn-face: #fff; --btn-edge: #fff; background: #fff !important; border-color: #fff !important; color: var(--n-navy) !important; }
.footer a:not(.lp-btn):not(.btn):hover, .footer .footer-links a:hover { color: var(--n-green); }

/* ── Opening splash: same choreography and words, this palette ─────────────────────────────────────────────────────── */
.es-light, .es-scene { background: #fff !important; }
.es-aura-a { background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 40%, transparent), transparent) !important; }
.es-aura-b { background: radial-gradient(closest-side, rgba(160, 225, 225, .4), transparent) !important; }
.es-tile { --soft: var(--w-mint) !important; --ink: var(--w-forest) !important; }
.es-tagline, .es-word .c.dot { color: var(--w-forest) !important; }
.es-steps b { background: var(--w-forest) !important; }
.es-cols-deep i { background: var(--w-forest) !important; }
.es-cols-bright i { background: var(--primary) !important; }

/* ── Small screens: same order, hero scaled like the reference; tap-target rules live in landing.css ───────────────── */
@media (max-width: 991.98px) {
    .lp-hslider.lp-hs-lime { background: linear-gradient(var(--primary) 0 calc(100% - clamp(9rem, 42vw, 18rem)), #fff 0) !important; }
}
@media (max-width: 767.98px) {
    main > div:first-child > .lp-hslider.lp-hs-lime { padding-top: 4.5rem; }
    .lp-hs-lime .lp-hs-cta-buttons { flex-direction: column; width: 100%; }
    .lp-hs-lime .lp-hs-cta-buttons a { width: 100%; }
    .lp-hs-lime .lp-hs-trust { margin-bottom: 2rem; }
}

/* ── The hero section's own style block loads after this file, so the hero's key rules need !important ──────────────── */
.lp-hslider.lp-hs-lime .carousel-item:first-child .row { margin-inline: 0 !important; width: 100%; }
.lp-hslider.lp-hs-lime .lp-hs-copy { text-align: center !important; }
.lp-hslider.lp-hs-lime :is(h1, h2) {
    max-width: 22ch !important; text-align: center !important; padding-inline: 0; font-stretch: 75%;
    font-size: clamp(4.5rem, 7.2vw, 6.5rem) !important; line-height: .88 !important; letter-spacing: -.012em !important; font-weight: 900 !important;
}
.lp-hslider.lp-hs-lime .lp-hs-lead {
    text-align: center !important; color: var(--w-forest) !important; font-family: var(--font-body) !important; font-weight: 400 !important;
    font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem) !important; line-height: 1.42 !important; max-width: 40rem !important;
}
.lp-hslider.lp-hs-lime .lp-hs-cta-buttons { justify-content: center !important; }
.lp-hslider.lp-hs-lime .lp-hs-visual-col { width: 100% !important; max-width: 1240px !important; padding-inline: 0; }
.lp-hslider.lp-hs-lime .lp-hv, .lp-hslider.lp-hs-lime .lp-hv-frame { width: 100% !important; max-width: none !important; }
.lp-hslider.lp-hs-lime .lp-hv :not(i):not(svg):not(path):not([class*="fa-"]), .lp-hslider.lp-hs-lime .lp-hs-trust li { font-family: var(--font-body); }
.lp-hslider.lp-hs-lime .lp-hs-trust { flex-wrap: nowrap; }
.lp-hslider.lp-hs-lime .lp-hs-trust strong { font-family: var(--font-body) !important; font-weight: 700 !important; }
.lp-hslider.lp-hs-lime { background: linear-gradient(var(--primary) 0 calc(100% - clamp(14rem, 27vw, 27rem)), #fff 0) !important; }

/* small headings and card text in the body face everywhere, including sections with their own style blocks */
main :is(h3, h4, h5, h6), .lp-faq-q, .lp-faq .accordion-button, .lp-mod-name, .lp-bf-read, .lp-day-time, .footer :is(h3, h5, h6) { font-family: var(--font-body) !important; }

@media (max-width: 991.98px) {
    .lp-hslider.lp-hs-lime { background: linear-gradient(var(--primary) 0 calc(100% - clamp(11rem, 44vw, 20rem)), #fff 0) !important; }
    .lp-hslider.lp-hs-lime :is(h1, h2) { font-size: clamp(2.45rem, 13vw, 6.2rem) !important; max-width: 15ch !important; line-height: .9 !important; }
}
@media (max-width: 767.98px) {
    .lp-hslider.lp-hs-lime .carousel-item { padding-top: 2rem; }
    .lp-hslider.lp-hs-lime .container { padding-inline: 16px; }
    .lp-hslider.lp-hs-lime .lp-hs-cta-buttons { width: 100% !important; padding-inline: 0; }
}
@media (max-width: 374.98px) {
    .lp-hslider.lp-hs-lime :is(h1, h2) { font-size: clamp(2.45rem, 13vw, 3rem) !important; }
}

/* two buttons in section types not on the homepage today: keep the text readable */
.ct-wa-btn { color: var(--w-ink) !important; }
.hts-btn-primary { background: var(--primary) !important; }

/* hero items share one centred column: nothing may be wider than the screen */
.lp-hslider.lp-hs-lime .carousel-item:first-child .row > *, .lp-hslider.lp-hs-lime .carousel-item:first-child .lp-hs-copy > * { min-width: 0; }
@media (max-width: 991.98px) {
    .lp-hslider.lp-hs-lime .carousel-item:first-child .row { padding-inline: 0; }
    .lp-hslider.lp-hs-lime .carousel-item:first-child .lp-hs-copy > *, .lp-hslider.lp-hs-lime .lp-hs-visual-col { max-width: 100% !important; width: 100% !important; margin-inline: 0 !important; }
    .lp-hslider.lp-hs-lime :is(h1, h2) { overflow-wrap: normal; }
    .lp-hslider.lp-hs-lime .lp-hs-trust { justify-content: space-between; padding-inline: 0; }
}
@media (max-width: 575.98px) {
    .lp-hslider.lp-hs-lime .lp-hs-trust { flex-direction: column; flex-wrap: wrap; gap: .75rem; align-items: center; }
    .lp-hslider.lp-hs-lime .lp-hs-trust li, .lp-hslider.lp-hs-lime .lp-hs-trust li:first-child { padding: 0 !important; font-size: .9rem !important; text-align: center; }
    .lp-hslider.lp-hs-lime .lp-hs-trust li::before { display: none !important; }
    .lp-hslider.lp-hs-lime .lp-hs-trust strong { font-size: 1rem !important; white-space: normal; }
}

/* == Hero headline face (human's request, 2026-11-06: as close as a licensed font gets to their reference image) ======
   Prompt Black, SIL Open Font License (public/fonts/prompt/OFL.txt), Latin only: other scripts use the body face.
   Deliberately not the editor's font-pair setting, and only on the video hero. To change it, replace these two rules. */
@font-face {
    font-family: 'Eduzon Hero';
    src: url('../fonts/prompt/prompt-latin-900.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}
.lp-hslider.lp-hs-lime :is(h1, h2) {
    font-family: 'Eduzon Hero', var(--font-body) !important; font-stretch: normal; font-weight: 900 !important; letter-spacing: .015em !important; word-spacing: .04em;
    font-size: clamp(4.25rem, 6.6vw, 6.25rem) !important; line-height: .94 !important; max-width: 17ch !important;
}
@media (max-width: 991.98px) {
    .lp-hslider.lp-hs-lime :is(h1, h2) { font-size: clamp(2rem, 10.8vw, 5.5rem) !important; max-width: 13ch !important; }
}

/* == Header and hero below the desktop menu (below 992px) ======================================================
   The phone menu is a full sheet under the bar, in the same language as the computer's: white, forest text, a neutral
   tile on the current page. Left-aligned rows, the group's chevron at the row's far end, its links open in place, and the
   button stays reachable at the bottom. The header script sets --lp-bar (where the bar ends) and locks the page behind. */
@media (max-width: 991.98px) {
    html.lp-menu-open, html.lp-menu-open body { overflow: hidden; }

    .navbar-style-glass .navbar-toggler[aria-expanded="true"] i::before { content: "\f00d"; }
    .navbar-style-glass .navbar-collapse { top: 100%; }
    .navbar-style-glass .navbar-collapse.show, .navbar-style-glass .navbar-collapse.collapsing {
        display: flex; flex-direction: column;
        height: calc(100dvh - var(--lp-bar, 76px)) !important; max-height: none;
        padding: .5rem 0 0; background: #fff; border-radius: 0; box-shadow: none; border-top: 1px solid var(--w-rule);
        overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; transition: none;
    }
    .navbar-style-glass .navbar-collapse.show { animation: lpMenuIn .22s cubic-bezier(.16, 1, .3, 1); }

    .navbar-style-glass .navbar-nav { flex: 0 0 auto; width: 100%; margin: 0 !important; padding: 0 12px; align-items: stretch !important; gap: 2px; }
    .navbar-style-glass .navbar-nav > .nav-item { width: 100%; margin: 0; }
    .navbar-style-glass .navbar-nav > .nav-item > .nav-link {
        display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 52px; margin: 0; padding: 0 .75rem !important; text-align: left;
        font-family: var(--font-body); font-size: 1.06rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; color: var(--w-forest) !important; translate: none !important;
    }
    .navbar-nav > .nav-item > .nav-link.active, .navbar-nav > .nav-item > .nav-link[aria-current] { border-radius: 12px !important; }

    /* the group: link, chevron, then its links. The tile belongs to the link, never to the whole open group. */
    .navbar-style-glass .lp-nav-group, .navbar-style-glass .lp-nav-group:has(> .nav-link[aria-current]) { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; background: transparent !important; border-radius: 0 !important; }
    .navbar-style-glass .lp-nav-group:has(> .nav-link[aria-current]) > .nav-link { background: var(--w-neutral) !important; border-radius: 12px !important; }
    .navbar-style-glass .lp-nav-group.is-open:has(> .nav-link[aria-current]) > .nav-link { background: transparent !important; }
    .navbar-style-glass .lp-nav-group .lp-nav-toggle { width: 52px; height: 52px; margin: 0; background: transparent !important; color: var(--w-forest) !important; font-size: .8rem; border-radius: 12px; }
    .navbar-style-glass .lp-nav-toggle i { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
    .navbar-style-glass .lp-nav-panel {
        display: grid; grid-column: 1 / -1; grid-template-rows: 0fr; visibility: hidden;
        max-width: none; margin: 0 !important; padding: 0 !important; background: none; border-radius: 0 !important;
        transition: grid-template-rows .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .22s;
    }
    .navbar-style-glass .lp-nav-group.is-open > .lp-nav-panel { display: grid; grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .22s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
    .navbar-style-glass .lp-nav-panel ul { display: block; min-height: 0; overflow: hidden; }
    .navbar-style-glass .lp-nav-panel .lp-nav-subitem, .navbar-style-glass .lp-nav-panel .lp-nav-subitem:not([aria-current]) {
        display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .25rem .75rem .25rem 1.25rem !important; border-radius: 10px !important;
        background: transparent; box-shadow: none; color: var(--w-grey);
    }
    .navbar-style-glass .lp-nav-panel .lp-nav-subitem[aria-current] { background: var(--w-neutral); box-shadow: none; color: var(--w-forest); }
    .navbar-style-glass .lp-nav-panel .lp-nav-subicon { width: 1.25rem !important; height: 1.25rem !important; flex: none; border: 0; border-radius: 0; background: transparent !important; color: var(--w-forest) !important; font-size: .92rem !important; }
    .navbar-style-glass .lp-nav-panel .lp-nav-subtitle { font-family: var(--font-body); font-size: .97rem; font-weight: 500; line-height: 1.25; color: inherit; }
    .navbar-style-glass .lp-nav-panel :is(.lp-nav-subdesc, .lp-nav-subarrow) { display: none !important; }

    /* the button is always on screen, however far the list scrolls */
    .navbar-style-glass .lp-nav-actions { position: sticky; bottom: 0; flex: none; width: 100%; margin-top: auto !important; padding: .75rem 16px calc(.75rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--w-rule); }
    .navbar-style-glass .lp-nav-actions .lp-nav-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; }

    /* hero: the green ends halfway down the video. A white layer starts at the video's middle (16:9, so 28.125% of its
       width), whatever the height of the words above and the tour link and trust row below. carousel-inner clips it. */
    .lp-hslider.lp-hs-lime { background: var(--primary) !important; }
    .lp-hslider.lp-hs-lime .lp-hs-visual-col { position: relative; z-index: 0; container-type: inline-size; }
    .lp-hslider.lp-hs-lime .lp-hs-visual-col::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 28.125cqw; width: 200vw; height: 200vh; margin-left: -100vw; background: #fff; pointer-events: none; }
    .lp-hslider.lp-hs-lime .lp-hs-trust { position: relative; z-index: 1; }
}
@keyframes lpMenuIn { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .navbar-style-glass .navbar-collapse.show { animation: none; }
    .navbar-style-glass .lp-nav-panel, .navbar-style-glass .lp-nav-group.is-open > .lp-nav-panel, .navbar-style-glass .lp-nav-toggle i { transition: none; }
}

/* == Phones: density layer (below 768px) =====================================================================
   A phone is not a small desktop. Tighter type and spacing, and long stacks become swipeable rows, so the page is
   about as long as the style reference instead of 19 screens. Words, links and functions stay; tablets and desktop
   are untouched. Budget and how to check it: .agents/skills/marketing-mobile-cro/SKILL.md, section "Page length". */
@media (max-width: 767.98px) {
    :root { --sect-pad: 2.5rem; }
    body { font-size: 15px; line-height: 1.5; }

    /* one type scale */
    .lp-title, main h2:not(.lpc-title):not(.card-title):not(.blog-content h2), .lp-day-title { font-size: clamp(1.6rem, 7.2vw, 2rem) !important; line-height: 1 !important; margin-bottom: 0; }
    .lp-subtitle, .lp-day-intro, .lp-mapp-lead { font-size: .94rem !important; line-height: 1.45 !important; margin-top: .45rem !important; }
    .lp-eyebrow { font-size: .75rem !important; padding: 0 !important; margin-bottom: .4rem !important; letter-spacing: .08em; }
    .lp-head { margin-bottom: 1.15rem !important; }
    main h3:not(.blog-content h3) { font-size: 1rem !important; line-height: 1.2 !important; letter-spacing: -.01em; }
    main .py-5 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
    main .mb-5 { margin-bottom: 1.25rem !important; }
    main .mt-5 { margin-top: 1.25rem !important; }

    /* inner pages: page title and breadcrumb */
    main h1.display-4 { font-size: clamp(1.5rem, 6.8vw, 1.9rem) !important; line-height: 1.02 !important; margin-bottom: .4rem !important; }
    main .breadcrumb { display: block; text-align: center; font-size: .8rem; line-height: 1.3; }
    main .breadcrumb-item { display: inline; }
    main .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
    main .breadcrumb-item + .breadcrumb-item::before { float: none; padding-inline: .3rem; }
    main .position-relative.py-5:has(> .container > h1) { padding-top: 1.25rem !important; padding-bottom: 1rem !important; }

    /* inner pages: every icon card becomes a compact row, the same shape as the home page's */
    main .row.g-4.lp-cycle { --bs-gutter-y: .5rem; --bs-gutter-x: .5rem; }
    main .lp-card.p-4:has(> .lp-icon-tile) { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .7rem; align-items: start; padding: .65rem .8rem !important; }
    main .lp-card.p-4:has(> .lp-icon-tile) > .lp-icon-tile { grid-row: 1 / span 2; width: 2.25rem !important; height: 2.25rem !important; font-size: .95rem !important; border-radius: .6rem !important; margin: 0 !important; box-shadow: none !important; }
    main .lp-card.p-4:has(> .lp-icon-tile) > :not(.lp-icon-tile) { grid-column: 2; }
    main .lp-card.p-4:has(> .lp-icon-tile) > h3 { font-size: .98rem !important; margin: 0 0 .1rem !important; }
    main .lp-card.p-4:has(> .lp-icon-tile) > p { font-size: .84rem !important; line-height: 1.35 !important; }

    /* blog list: shorter cards, titles at card size (the page's section-heading rule above does not apply to them) */
    main h2.card-title { font-family: var(--font-body) !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.005em !important; text-transform: none !important; margin-bottom: .3rem !important; }
    main .card.h-100 .card-body { padding: .7rem .85rem !important; }
    main .card.h-100 .card-text { font-size: .84rem !important; line-height: 1.35 !important; margin-bottom: .45rem !important; }
    main .badge { font-size: .75rem !important; }
    main a.badge { min-height: 44px; display: inline-flex; align-items: center; }
    main .row.g-4:has(> .col-md-6 > .card.h-100) { --bs-gutter-y: .75rem; }

    /* trial form: the two small labels */
    main legend, .tr-free { font-size: .75rem !important; }

    /* buttons: comfortable, not huge */
    .lp-btn, .lp-btn-ghost, .lp-path-btn, .lp-contact-submit { font-size: .92rem !important; min-height: 44px; padding: .55rem 1.1rem !important; display: inline-flex; align-items: center; justify-content: center; }

    /* hero */
    .lp-hslider.lp-hs-lime .lp-hs-lead { font-size: .98rem !important; line-height: 1.4 !important; margin-top: .85rem !important; }
    .lp-hslider.lp-hs-lime .lp-hs-trust {
        display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: start;
        padding: 0 !important;
    }
    .lp-hslider.lp-hs-lime .lp-hs-trust li, .lp-hslider.lp-hs-lime .lp-hs-trust li:first-child { font-size: .75rem !important; line-height: 1.25; padding: 0 !important; text-align: center; }
    .lp-hslider.lp-hs-lime .lp-hs-trust strong { font-size: .8rem !important; line-height: 1.15; white-space: normal !important; }

    /* feature cards: compact rows, icon beside the words (section and container both carry py-5: only one counts here) */
    .section-features-animated { padding-block: 0 !important; }
    .section-features-animated > .container { padding-bottom: .5rem !important; }
    .section-features-animated .row.lp-cycle { --bs-gutter-y: .45rem; --bs-gutter-x: .5rem; }
    .section-features-animated .lp-fga-scene { padding-bottom: 0 !important; }
    .section-features-animated .lp-fga-card-inner { display: grid !important; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .7rem; row-gap: .1rem; align-items: start; padding: .65rem .8rem !important; }
    .section-features-animated .lp-fga-face { display: contents !important; }
    .section-features-animated .lp-fga-icon { grid-column: 1; grid-row: 1 / span 2; width: 2.25rem !important; height: 2.25rem !important; font-size: .95rem !important; border-radius: .6rem !important; box-shadow: none !important; margin: 0 !important; }
    .section-features-animated .lp-fga-title { grid-column: 2; font-size: .98rem !important; margin: 0 !important; }
    .section-features-animated .lp-fga-text { grid-column: 2; font-size: .84rem !important; line-height: 1.35 !important; margin: 0 !important; }

    /* the school day: swipe through the moments */
    .lp-day-head { margin-bottom: 1rem !important; }
    .lp-day-toggle { min-height: 44px; margin-top: .35rem !important; font-size: .82rem !important; }
    .lp-day-rail { display: none !important; }
    .lp-day-steps {
        display: flex !important; gap: .65rem !important; overflow: auto hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        /* the phone hangs 2rem below its sky card: without this room the row becomes a vertical scroller and traps the swipe */
        margin-inline: -12px !important; padding: 0 12px 2.05rem !important; scroll-padding-inline: 12px; scrollbar-width: none;
    }
    .lp-day-steps::-webkit-scrollbar { display: none; }
    .lp-day-step { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; padding: 0 !important; }
    .lp-day-copy { flex: 1 1 auto; }
    .lp-day-time { font-size: .76rem !important; margin-bottom: .3rem !important; }
    .lp-day-step h3 { font-size: 1.08rem !important; margin-bottom: .25rem !important; }
    .lp-day-text { font-size: .86rem !important; line-height: 1.4 !important; }
    .lp-day-step .lp-day-panel { --dh: 300px; margin: .7rem 0 0 !important; padding-top: 2.9rem !important; height: calc(var(--dh) + 2.9rem - 2rem) !important; max-width: none; }
    .lp-day-note { margin-top: 0 !important; font-size: .78rem !important; }

    /* pricing */
    .lp-pcta .row.lp-pcta-pillars { --bs-gutter-y: .4rem; margin-bottom: .65rem; }
    .lp-pcta .lp-pillar { padding: .55rem .75rem !important; gap: .65rem !important; }
    .lp-pcta .lp-pillar .lp-icon-tile { width: 34px !important; height: 34px !important; font-size: .85rem !important; }
    .lp-pcta .lp-pillar h3 { font-size: .94rem !important; margin: 0 !important; }
    .lp-pcta .lp-pillar p { font-size: .82rem !important; line-height: 1.3 !important; }
    .lp-pcta .lp-card:not(.lp-pillar) { padding: 1rem !important; }
    .lp-pcta .lp-card:not(.lp-pillar) p { font-size: .9rem !important; line-height: 1.42 !important; }

    /* the apps: store buttons side by side, and the laptop and phone overlap as on desktop (the school day above already
       shows the phone at reading size) */
    .lp-mapp .lp-mapp-stores { margin-top: .85rem !important; gap: .5rem !important; flex-wrap: nowrap !important; }
    .lp-mapp .lp-store-btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: .3rem .55rem !important; gap: .4rem !important; justify-content: center; }
    .lp-mapp .lp-store-btn i, .lp-mapp .lp-store-btn svg { font-size: 1.15rem !important; width: auto; max-height: 1.3rem; margin: 0 !important; }
    .lp-mapp .lp-store-btn .fs-6 { font-size: .84rem !important; line-height: 1.1; white-space: nowrap; }
    .lp-mapp .lp-store-btn small { font-size: .66rem !important; white-space: nowrap; }
    .lp-devices-stage { padding-bottom: 22%; }
    .lp-laptop { width: 82%; margin-inline: 0; }
    .lp-phone { position: absolute; right: 0; bottom: 0; width: 34%; margin: 0; }
    .lp-devices-cap { margin-top: .6rem; font-size: .8rem; }

    /* blog: swipe through the latest posts */
    .lp-blogfeed .row.lp-cycle {
        flex-wrap: nowrap; overflow: auto hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: -12px; padding: 0 12px .7rem; scroll-padding-inline: 12px; --bs-gutter-x: 0; --bs-gutter-y: 0; gap: .65rem;
    }
    .lp-blogfeed .row.lp-cycle::-webkit-scrollbar { display: none; }
    .lp-blogfeed .row.lp-cycle > * { flex: 0 0 82%; width: 82%; padding-inline: 0; scroll-snap-align: start; }
    .lp-blogfeed .lp-bf-body { padding: .7rem .8rem !important; }
    .lp-blogfeed .lp-bf-body h3 { font-size: .98rem !important; }
    .lp-blogfeed .lp-bf-body p { font-size: .84rem !important; line-height: 1.35 !important; }
    .lp-blogfeed .lp-bf-cat { font-size: .75rem !important; }

    /* questions */
    .lp-faq-aside .lp-head { margin-bottom: .75rem !important; }
    .lp-faq-help { padding: .75rem .85rem !important; }
    .lp-faq-help h3 { font-size: .95rem !important; margin-bottom: .15rem !important; }
    .lp-faq-help p { font-size: .84rem !important; line-height: 1.35 !important; margin-bottom: .5rem !important; }
    .lp-faq .accordion { gap: .4rem; }
    .lp-faq .accordion-button { min-height: 44px; padding: .45rem .7rem !important; gap: .55rem !important; font-size: .9rem !important; line-height: 1.25; }
    .lp-faq-num { width: 1.6rem !important; height: 1.6rem !important; font-size: .68rem !important; flex: none; }
    .lp-faq-icon { width: 1.5rem !important; height: 1.5rem !important; font-size: .7rem !important; flex: none; }
    .lp-faq .accordion-body { padding: .15rem .75rem .65rem !important; font-size: .86rem !important; line-height: 1.42 !important; }

    /* contact: swipe the ways in, tighter form */
    .lp-paths {
        display: flex !important; gap: .65rem !important; overflow: auto hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 -12px .9rem !important; padding: .1rem 12px .55rem; scroll-padding-inline: 12px;
    }
    .lp-paths::-webkit-scrollbar { display: none; }
    .lp-path { flex: 0 0 80%; min-width: 0; padding: .75rem .85rem !important; scroll-snap-align: start; gap: .3rem !important; }
    .lp-path-icon { width: 30px !important; height: 30px !important; font-size: .8rem !important; margin-bottom: .1rem !important; }
    .lp-path-title { font-size: .98rem !important; margin: 0 !important; }
    .lp-path-text { font-size: .83rem !important; line-height: 1.35 !important; margin-bottom: .45rem !important; }
    .lp-path-note { font-size: .75rem !important; }
    .lp-contact-form { padding: .9rem .85rem !important; }
    .lpc-head { margin-bottom: .75rem !important; gap: .6rem !important; }
    .lpc-field.mb-4 { margin-bottom: .6rem !important; }
    .lp-contact-card .form-label { font-size: .75rem !important; margin-bottom: .15rem !important; }
    .lp-contact-text small { font-size: .75rem !important; }
    .lp-contact-card .form-control, .lp-contact-card .form-select { min-height: 44px; font-size: 16px; padding-block: .35rem !important; }
    .lp-contact-card textarea.form-control { min-height: 84px; }
    .lp-contact-info { padding: .9rem .85rem !important; gap: .4rem !important; }
    .lp-contact-pill { min-height: 44px; padding: .35rem .6rem !important; gap: .55rem !important; }

    /* footer: smaller owl (and the room reserved for it), three tight columns. 1.156 is the image's height ratio. */
    .footer-peek { width: 104px; }
    .lp-contact { padding-bottom: calc(104px * 1.156 + 1.25rem) !important; }
    .lp-owl-room { padding-bottom: calc(104px * 1.156 + 1.25rem) !important; }
    .footer-cta { padding-block: 1.5rem 1.25rem !important; }
    .footer-cta h2 { font-size: clamp(1.5rem, 7vw, 1.9rem) !important; margin-bottom: .35rem !important; }
    .footer-cta p { font-size: .9rem !important; margin-bottom: .85rem !important; }
    .footer-main { --bs-gutter-y: .75rem; --bs-gutter-x: .5rem; }
    .footer-main > .col-md.col-6 { flex: 0 0 33.333%; width: 33.333%; }
    .footer-main h3 { font-size: .86rem !important; margin-bottom: .2rem !important; }
    .footer-main p { font-size: .84rem; margin-bottom: 0; }
    .footer .footer-links a { font-size: .8rem; line-height: 1.15; }
    footer .border-top { margin-top: .75rem !important; padding-top: .75rem !important; font-size: .76rem; }
}