/* ============================================================
   Public site shared styles (landing + blog + custom pages)
   Consumes the CSS variables defined in layouts/app_public.blade.php
   (:root — brand tokens from settings, nav/footer colors).
   Static rules only: anything needing PHP stays in the layout.
   ============================================================ */

/* ── Playful accent palette (fixed, NOT from settings) ──────────────────
   The brand colour (--primary) stays dynamic from the Superadmin settings;
   these five are fixed so the page is never a wall of one colour.
   Each accent has a base fill, a tint (--*-soft) for backgrounds and an "ink"
   (a darker shade, >= 4.5:1 on white and on its own tint) for any text or icon
   drawn on it. Bases are Duolingo's published Macaw / Bee / Fox / Beetle /
   Cardinal. Never put white text directly on a base fill: use the ink. */
:root {
    --c-sky: #1CB0F6;    --c-sky-shade: #1899D6;    --c-sky-soft: #DFF4FE;    --c-sky-ink: #0A6DA1;
    --c-sun: #FFC800;    --c-sun-shade: #E5B400;    --c-sun-soft: #FFF7DB;    --c-sun-ink: #8A5E00;
    --c-fire: #FF9600;   --c-fire-shade: #E58700;   --c-fire-soft: #FFF0DB;   --c-fire-ink: #A85300;
    --c-purple: #CE82FF; --c-purple-shade: #B36AE6; --c-purple-soft: #F8EEFF; --c-purple-ink: #7E2FC2;
    --c-berry: #FF4B4B;  --c-berry-shade: #E23A3A;  --c-berry-soft: #FFE6E6;  --c-berry-ink: #C2231F;

    /* Brand-derived (follows the Superadmin colour) */
    --primary-shade: color-mix(in srgb, var(--primary), #000 18%);
    --primary-ink: color-mix(in srgb, var(--primary), #000 45%);

    /* Depth of the 3D push buttons */
    --push: 5px;
    --ink-on-light: #1a1a2e;
}

/* Accent cycle: put .lp-cycle on a grid/row and each child gets the next colour
   (brand, sky, sun, fire, purple, berry, repeat). Children read --acc,
   --acc-shade, --acc-soft and --acc-ink; components fall back to the brand. */
.lp-cycle > :nth-child(6n+1) { --acc: var(--primary); --acc-shade: var(--primary-shade); --acc-soft: var(--p-soft); --acc-ink: var(--primary-ink); }
.lp-cycle > :nth-child(6n+2) { --acc: var(--c-sky); --acc-shade: var(--c-sky-shade); --acc-soft: var(--c-sky-soft); --acc-ink: var(--c-sky-ink); }
.lp-cycle > :nth-child(6n+3) { --acc: var(--c-sun); --acc-shade: var(--c-sun-shade); --acc-soft: var(--c-sun-soft); --acc-ink: var(--c-sun-ink); }
.lp-cycle > :nth-child(6n+4) { --acc: var(--c-fire); --acc-shade: var(--c-fire-shade); --acc-soft: var(--c-fire-soft); --acc-ink: var(--c-fire-ink); }
.lp-cycle > :nth-child(6n+5) { --acc: var(--c-purple); --acc-shade: var(--c-purple-shade); --acc-soft: var(--c-purple-soft); --acc-ink: var(--c-purple-ink); }
.lp-cycle > :nth-child(6n+6) { --acc: var(--c-berry); --acc-shade: var(--c-berry-shade); --acc-soft: var(--c-berry-soft); --acc-ink: var(--c-berry-ink); }

/* Section tones: one accent for a whole section (tinted backdrop, soft confetti
   circles, matching eyebrow). Add one class to the <section>. */
.lp-tone-sky    { --acc: var(--c-sky);    --acc-shade: var(--c-sky-shade);    --acc-soft: var(--c-sky-soft);    --acc-ink: var(--c-sky-ink); }
.lp-tone-sun    { --acc: var(--c-sun);    --acc-shade: var(--c-sun-shade);    --acc-soft: var(--c-sun-soft);    --acc-ink: var(--c-sun-ink); }
.lp-tone-fire   { --acc: var(--c-fire);   --acc-shade: var(--c-fire-shade);   --acc-soft: var(--c-fire-soft);   --acc-ink: var(--c-fire-ink); }
.lp-tone-purple { --acc: var(--c-purple); --acc-shade: var(--c-purple-shade); --acc-soft: var(--c-purple-soft); --acc-ink: var(--c-purple-ink); }
.lp-tone-berry  { --acc: var(--c-berry);  --acc-shade: var(--c-berry-shade);  --acc-soft: var(--c-berry-soft);  --acc-ink: var(--c-berry-ink); }
section[class*="lp-tone-"] {
    position: relative;
    background:
        radial-gradient(circle at 6% 14%, color-mix(in srgb, var(--acc) 16%, transparent) 0 70px, transparent 71px),
        radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--acc) 10%, transparent) 0 110px, transparent 111px),
        radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--acc) 14%, transparent) 0 90px, transparent 91px),
        var(--acc-soft);
}

/* Hero eyebrow: solid sun-yellow badge with dark text (~11:1) */
section.lp-hslider .lp-eyebrow {
    background: var(--c-sun);
    color: var(--ink-on-light);
    border-color: var(--c-sun);
    box-shadow: 0 3px 0 var(--c-sun-shade);
}

/* App-store buttons: same push-button treatment, in ink */
section.lp-mapp .lp-store-btn {
    border-radius: var(--r-btn);
    box-shadow: 0 var(--push) 0 #000;
    transition: translate .08s, box-shadow .08s, filter .15s;
}
section.lp-mapp .lp-store-btn:hover { transform: none; box-shadow: 0 var(--push) 0 #000; translate: 0 -1px; filter: brightness(1.15); }
section.lp-mapp .lp-store-btn:active { translate: 0 calc(var(--push) - 1px); box-shadow: 0 1px 0 #000; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: #fff;
    color: var(--text);
    overflow-x: clip;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--dark);
    font-weight: 800;
    letter-spacing: -.02em;
}
h1, h2 { line-height: 1.12; letter-spacing: -.03em; }

/* ── Theme utilities (kept from the old inline block) ── */
.text-primary   { color: var(--primary) !important; }
.bg-primary     { background-color: rgba(var(--primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: var(--primary) !important; }

.theme-text-primary { color: var(--primary) !important; }
.theme-bg-primary   { background-color: var(--primary) !important; }
.theme-bg-primary-soft {
    background-color: var(--p-soft) !important;
    color: var(--primary) !important;
}
.theme-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background-color: var(--p-soft);
}

/* ── Buttons: Duolingo-style 3D "push" buttons ──────────────────────────
   A solid face plus a thick darker lower edge (box-shadow, so nothing shifts
   layout). Pressing drops the face onto its edge. Uses the individual
   `translate` property so it composes with any `transform` a section sets
   (the hero CTA is positioned with transform). */
.btn-primary, .lp-btn {
    --btn-face: var(--primary);
    --btn-edge: var(--primary-shade);
    --btn-text: var(--ink-on-light);   /* white on the brand green is 2.1:1 (fails AA); dark ink is well above 4.5 */
    display: inline-block;
    background: var(--btn-face);
    color: var(--btn-text);
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border: 0;
    border-radius: var(--r-btn);
    padding: .8rem 1.7rem;
    box-shadow: 0 var(--push) 0 var(--btn-edge);
    transition: filter .15s, translate .08s, box-shadow .08s;
}
.btn-primary {
    --bs-btn-bg: var(--btn-face); --bs-btn-hover-bg: var(--btn-face); --bs-btn-active-bg: var(--btn-face);
    --bs-btn-color: var(--btn-text); --bs-btn-hover-color: var(--btn-text); --bs-btn-active-color: var(--btn-text);
    --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
.btn-primary:hover, .lp-btn:hover { background: var(--btn-face); color: var(--btn-text); filter: brightness(1.07); translate: 0 -1px; }
.btn-primary:active, .lp-btn:active, .btn-primary:first-child:active {
    background: var(--btn-face); color: var(--btn-text);
    translate: 0 calc(var(--push) - 1px);
    box-shadow: 0 1px 0 var(--btn-edge);
    filter: none;
}
.btn-primary:focus-visible, .lp-btn:focus-visible, .lp-btn-ghost:focus-visible, .btn-outline-primary:focus-visible {
    outline: 3px solid var(--c-sky); outline-offset: 3px;
}

/* Secondary: white face, grey edge (the "not the main action" button) */
.btn-outline-primary, .lp-btn-ghost {
    display: inline-block;
    background: #fff;
    color: var(--primary-ink);
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border: 2px solid var(--border);
    border-radius: var(--r-btn);
    padding: calc(.8rem - 2px) 1.7rem;
    box-shadow: 0 var(--push) 0 var(--border);
    transition: translate .08s, box-shadow .08s, background .15s, border-color .15s;
}
.btn-outline-primary:hover, .lp-btn-ghost:hover {
    background: var(--p-soft); color: var(--primary-ink); border-color: var(--p-border);
    box-shadow: 0 var(--push) 0 var(--p-border); translate: 0 -1px;
}
.btn-outline-primary:active, .lp-btn-ghost:active {
    background: var(--p-soft); color: var(--primary-ink);
    translate: 0 calc(var(--push) - 1px); box-shadow: 0 1px 0 var(--p-border);
}

/* Colourful variants: add to .lp-btn for a non-brand action button.
   Dark ink on a bright face (>= 5:1), not white on bright. */
.lp-btn-sun  { --btn-face: var(--c-sun);  --btn-edge: var(--c-sun-shade);  --btn-text: var(--ink-on-light); }
.lp-btn-sky  { --btn-face: var(--c-sky);  --btn-edge: var(--c-sky-shade);  --btn-text: var(--ink-on-light); }
.lp-btn-fire { --btn-face: var(--c-fire); --btn-edge: var(--c-fire-shade); --btn-text: var(--ink-on-light); }

@media (prefers-reduced-motion: reduce) {
    .btn-primary, .lp-btn, .btn-outline-primary, .lp-btn-ghost { transition: none; }
}

/* ── Navbar ── */
.navbar {
    transition: all 0.3s ease;
    padding: .5rem 0;
    z-index: 1030; /* above a hero that is pulled up underneath the transparent navbar */
}
/* Floating pill navbar: a solid white capsule, narrower than the page, with a soft shadow.
   (.navbar-style-glass is the default style setting.) Tried a flush edge-to-edge bar on 2026-10-18 against a
   reference; the human preferred this floating pill back, so it was reverted the same day. */
.navbar-style-glass {
    width: calc(100% - 24px);
    max-width: 1200px;
    margin: 1.5rem auto .75rem;   /* bottom gap matters on pages where the header is in the flow (blog, custom pages) */
    background: #ffffff !important;
    border: 0;
    border-radius: 100px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    transition: box-shadow .3s ease;
}
.navbar-style-glass > .container-xl {
    max-width: none;
    padding-left: 1.5rem;   /* keeps the logo and buttons off the curved ends */
    padding-right: 1.5rem;
}
/* the scroll handler adds .shadow-sm; keep it as a deeper version of the same pill shadow */
.navbar-style-glass.shadow-sm { box-shadow: 0 16px 44px rgba(0, 0, 0, 0.10) !important; }

/* On the landing page (hero is the first section) the header floats over the hero so the
   gradient runs to the very top of the page. Scoped this way because on the blog and custom
   pages the content starts right below the header and must not slide underneath it.
   A sticky navbar (Appearance setting) uses position: fixed so it still follows the page. */
body:has(main > div:first-child > .lp-hslider) header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}
body:has(main > div:first-child > .lp-hslider) header:has(.navbar.sticky-top) { position: fixed; }
/* Any other page whose first block is marked .lp-under-nav (the trial request pages) gets the same treatment: its panel
   runs to the top and the navbar pill floats inside it, exactly like the home hero. */
body:has(main > .lp-under-nav:first-child) header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1030; }
body:has(main > .lp-under-nav:first-child) header:has(.navbar.sticky-top) { position: fixed; }

/* "Headroom" header (on by default since 2026-10-18; Super Admin > Menu > "Sticky Header" switches it off): the bar
   is there at the top of the page, slides up out of view while the visitor scrolls down, and comes back the moment they
   scroll up (the header script adds .is-tucked; the layout's scroll script adds .navbar-scrolled past 50px). The header
   is fixed on the home page and sticky elsewhere so it can come back mid-page. On the blog and custom pages the <header>
   is in the flow and only as tall as the bar, so the header itself sticks; flow-root stops the pill's top margin leaking
   out (the bar would sit 24px too high). Everything moves with translate only, so nothing below it ever jumps. */
header:has(> .navbar.sticky-top) { position: sticky; top: 0; z-index: 1030; display: flow-root; }
html:has(header > .navbar.sticky-top) { scroll-padding-top: 6.5rem; }   /* in-page #links land below the bar, not under it */
.navbar-style-glass.sticky-top { transition: box-shadow .3s ease, translate .35s cubic-bezier(.2, .8, .2, 1); }
/* back while scrolling up: a little closer to the top edge, with a deeper shadow */
.navbar-style-glass.sticky-top.navbar-scrolled { translate: 0 -.9rem; box-shadow: 0 14px 34px -10px rgba(26, 26, 46, .28) !important; }
/* tucked while scrolling down: the bar (68px) plus its 1.5rem top margin, and no shadow peeking below the edge */
.navbar-style-glass.sticky-top.is-tucked { translate: 0 calc(-100% - 1.75rem); box-shadow: none !important; }
/* a keyboard user tabbing into a tucked bar gets it back at once */
header:has(:focus-visible) > .navbar-style-glass.sticky-top.is-tucked { translate: 0 -.9rem; }
@media (prefers-reduced-motion: reduce) { .navbar-style-glass.sticky-top { transition: none; } }

/* Phone menu: a floating card under the pill, out of the flow so opening it never changes the
   navbar's height. */
@media (max-width: 991.98px) {
    .navbar-style-glass { border-radius: 32px; }
    .navbar-style-glass .navbar-collapse {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 1;
    }
    .navbar-style-glass .navbar-collapse.show,
    .navbar-style-glass .navbar-collapse.collapsing {
        background: #fff;
        border-radius: 28px;
        padding: 1rem;
        box-shadow: 0 12px 40px rgba(0, 0, 0, .10);
    }
}
.navbar-style-solid { background: var(--nav-bg) !important; }
.navbar-style-transparent { background: transparent !important; }
.navbar-style-transparent.navbar-scrolled { background: var(--nav-bg) !important; }

.navbar-brand {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--nav-text) !important;
    letter-spacing: -0.5px;
}
.nav-link {
    font-weight: 600;
    color: var(--nav-text) !important;
    margin: 0 10px;
    transition: opacity 0.2s, color 0.2s, transform 0.2s;
    opacity: 0.9;
}
.nav-link:hover {
    opacity: 1;
    color: var(--primary) !important;
    transform: translateY(-1px);
}
/* ── Desktop nav links: calm text, a soft pill on hover / keyboard focus ──
   (replaced the lifted "shift tab" cards on 2026-10-18: a boxed link read as a second button next to the CTA) */
@media (min-width: 992px) {
    .navbar-nav > .nav-item > .nav-link {
        margin: 0 .1rem;
        padding: .5rem .9rem;
        border-radius: var(--r-pill);
        color: #3a4150 !important;
        font-size: .98rem;
        font-weight: 600;
        opacity: 1;
    }
    .navbar-nav > .nav-item > .nav-link:hover,
    .navbar-nav > .nav-item > .nav-link:focus-visible { background-color: #f1f4ee; color: #14532d !important; transform: none; }
    .navbar-nav > .nav-item > .nav-link:focus-visible { outline: 2px solid #15803d; outline-offset: 2px; }
}
/* The selected link (the page you are on, or on the home page the section you are reading: the header's scroll-spy
   moves aria-current) is a raised tile in the site's own 3D language (2026-10-19, matching the hero, the cards and
   the buttons): the pale brand tint, a soft green frame and a solid brand-green lower edge, both drawn with
   box-shadow so the link never changes size. A click presses it onto its edge. Text in the brand ink (5.5:1 on the
   tint at the default green). Every width, so the phone menu shows it too. */
.navbar-nav > .nav-item > .nav-link {
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, translate .15s ease;
}
.navbar-nav > .nav-item > .nav-link[aria-current],
.navbar-nav > .nav-item > .nav-link[aria-current]:hover,
.navbar-nav > .nav-item > .nav-link[aria-current]:focus-visible {
    background-color: color-mix(in srgb, var(--primary) 14%, #fff);
    color: var(--primary-ink) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, #fff), 0 4px 0 2px var(--primary);
    translate: 0 -2px;
}
.navbar-nav > .nav-item > .nav-link:active {
    translate: 0 1px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, #fff), 0 1px 0 2px var(--primary);
    background-color: color-mix(in srgb, var(--primary) 14%, #fff); color: var(--primary-ink) !important;
}
@media (max-width: 991.98px) {
    .navbar-nav > .nav-item > .nav-link { padding-left: 1rem; padding-right: 1rem; border-radius: var(--r-pill); }
}
@media (prefers-reduced-motion: reduce) { .navbar-nav > .nav-item > .nav-link { transition: none; } }

/* Sign-in link and the CTA pill (sentence case, a small arrow chip, no 3D edge: the pill sits inside the white navbar) */
.lp-nav-login {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem .9rem; border-radius: var(--r-pill);
    font-weight: 600; font-size: .98rem; color: var(--nav-text);
    transition: background-color .2s ease, color .2s ease;
}
.lp-nav-login:hover, .lp-nav-login:focus-visible { background-color: #f1f4ee; color: #14532d; }
.lp-nav-login:focus-visible { outline: 2px solid #15803d; outline-offset: 2px; }
/* The navbar CTA is the site's own green push button (.btn-primary above, the same one as the pricing section's
   "Start free trial"): brand-green face, a solid darker-green lower edge, dark ink text (8.2:1; white would be 2.1:1).
   Only its size and shape are set here - a pill, sentence case, a slightly shallower edge to fit the navbar - so it
   follows the Superadmin brand colour like every other button. (2026-10-19: was a cut-out with an ink outline and a
   hard black shadow, which no other part of the site uses.) */
.navbar .btn-primary.lp-nav-cta {
    --push: 4px;
    display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
    padding: .36rem .36rem .36rem 1.1rem;
    font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}
/* the arrow chip: a dark circle with a white arrow, the strongest mark on the green face */
.lp-nav-cta-arrow {
    display: inline-grid; place-items: center; flex: none;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--ink-on-light); color: #fff; font-size: .78rem;
    transition: transform .2s ease;
}
.navbar .btn-primary.lp-nav-cta:hover .lp-nav-cta-arrow { transform: translateX(2px); }
@media (min-width: 992px) { .lp-nav-actions { gap: .4rem !important; } }
@media (prefers-reduced-motion: reduce) { .lp-nav-cta-arrow { transition: none; } .navbar .btn-primary.lp-nav-cta:hover .lp-nav-cta-arrow { transform: none; } }

/* Wide screens: links on the left, the logo in the centre, sign-in + CTA on the right (one row, 3 zones).
   The collapse wrapper steps out of the layout (display: contents) so its two children join the grid; below 1200px the
   standard layout (logo left) stays, and phones keep the hamburger. */
@media (min-width: 1200px) {
    .navbar-style-glass > .container-xl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1.5rem; }
    .navbar-style-glass .navbar-collapse { display: contents !important; }
    .navbar-style-glass .navbar-brand { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
    .navbar-style-glass .navbar-nav { grid-column: 1; grid-row: 1; justify-self: start; margin: 0 !important; }
    .navbar-style-glass .lp-nav-actions { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* Touch targets on phones (below 768px): the hamburger, the menu links, footer links and blog tags get a comfortable
   tap size (44px; chips 32px). Desktop and tablet are unchanged. */
@media (max-width: 767.98px) {
    .navbar-toggler { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .navbar-collapse .nav-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .footer .footer-links li { margin-bottom: 0; }
    .footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
    main a.badge { display: inline-flex; align-items: center; min-height: 32px; padding: .35rem .85rem !important; }
}
.navbar-toggler-icon { background-image: none; }
.navbar-toggler { color: var(--nav-text); font-size: 1.4rem; }

/* ── Footer: "Midnight Forest" ──────────────────────────────────────────
   Deep navy at the top shifting to a very dark rich green at the bottom. The gradient is
   vertical on purpose: the wave divider above is one solid colour (the top of the gradient),
   so the top edge must be a single colour or the wave would not match. */
.footer {
    --footer-top: #0a1128;
    position: relative;
    margin-top: 0;      /* the wave overlays the bottom of whatever section sits above it */
    background:
        radial-gradient(60% 55% at 92% 100%, rgba(88, 204, 2, .16), transparent 70%),
        linear-gradient(180deg, var(--footer-top) 0%, #0b2233 45%, #0a3324 100%);
    color: var(--footer-text);
    padding: 0 0 40px;
}
.footer-wave {
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);   /* 1px overlap: no hairline gap between wave and footer */
    width: 100%;
    height: clamp(48px, 6vw, 90px);
    display: block;
    fill: var(--footer-top);
    pointer-events: none;
    z-index: 2;   /* above the owl: the solid wave hides the owl's cropped lower edge */
}
.footer h3, .footer h5, .footer h6 { color: #fff; font-family: var(--font-head); }
.footer p, .footer li { color: var(--footer-text); opacity: 0.85; }
.footer a {
    color: var(--footer-text);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity .2s, color .2s, transform .2s;
}
.footer a:hover { opacity: 1; color: var(--primary); }
.footer .footer-social a { font-size: 1.15rem; }

/* Link lists: on hover the link slides 4px right and turns brand green */
.footer .footer-links li { margin-bottom: .55rem; }
.footer .footer-links a { display: inline-block; }
.footer .footer-links a:hover { transform: translateX(4px); color: var(--primary); }

/* Pages other than the landing page have a white background: give their content clear space
   above the wave and owl (the landing page instead extends its last section's own colour). */
main:not(:has(> div:first-child > .lp-hslider)) { padding-bottom: 6rem; }

/* Pre-footer CTA: big headline + button, with the owl peeking over the top edge */
.footer-cta {
    position: relative;
    text-align: center;
    /* the owl now sits above the footer, so the heading only needs a small gap under the wave */
    padding: clamp(1rem, 2.5vw, 2rem) 0 3rem;
    border-bottom: 1px solid color-mix(in srgb, var(--footer-text) 16%, transparent);
    margin-bottom: 3rem;
}
.footer-cta h2 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
    line-height: 1.12;
    max-width: 16ch;
    margin: 0 auto 1rem;
    text-wrap: balance;
}
.footer-cta p { font-size: 1.1rem; margin: 0 auto 1.75rem; max-width: 46ch; }
.footer-cta .footer-cta-btn { font-size: 1.15rem; padding: 1rem 2.6rem; opacity: 1; color: var(--btn-text); }
.footer-cta .footer-cta-btn:hover { color: var(--btn-text); }
/* The owl (a direct child of .footer), layered BEHIND the wave (z-index 1 vs the wave's 2). */
.footer-peek {
    position: absolute;
    z-index: 1;
    left: 50%;
    /* Start exactly at the top of the footer */
    top: 0;
    width: clamp(150px, 20vw, 250px);
    /* Pull it UP by exactly its own height.
       This puts its flat bottom exactly on the footer edge, safely hidden behind the dark wave! */
    transform: translate(-50%, -100%);
    pointer-events: none;
}
.footer-peek img {
    display: block;
    width: 100%;
    height: auto;
    /* Remove the object-fit and aspect-ratio cropping! */
}
@media (prefers-reduced-motion: no-preference) {
    .footer-peek { animation: lpPeekBob 4.5s ease-in-out infinite; }
}
@keyframes lpPeekBob {
    0%, 100% { transform: translate(-50%, -100%); }
    50%      { transform: translate(-50%, -105%); }
}
/* the generic footer-link colour/opacity must not wash out a real button */
.footer a.btn-primary, .footer a.lp-btn { color: var(--btn-text, var(--ink-on-light)); opacity: 1; }
.footer a.btn-primary:hover, .footer a.lp-btn:hover { color: var(--btn-text, var(--ink-on-light)); }

/* Pages that end in plain content (blog list, category, article) reserve the same room the landing sections do, so the
   owl peeking over the footer's wave never lands on the last lines of text. Keep in sync with .footer-peek's width. */
.lp-owl-room { padding-bottom: calc(clamp(150px, 20vw, 250px) * 1.156 + 3.5rem) !important; }

/* ── Contact section ──────────────────────────────────────────────────── */
.lp-contact {
    position: relative;
    background-color: var(--bg-soft);
    padding: var(--sect-pad) 0;
    background-size: cover;
    background-position: center;
}
.lp-contact.has-bg::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); z-index: 0; }
.lp-contact .container { position: relative; z-index: 1; }
/* extra room underneath: the footer's wave and the peeking owl overlay this padding, so the
   section's own colour continues behind them (no white band between section and wave) */
.lp-contact {
    /* Room for the peeking owl above the wave. Tied to the owl's own size (its width clamp x the
       image's 647/560 height ratio) + 3.5rem, so the gap stays ~50px on every screen instead of
       being far too big on phones. Keep the clamp in sync with .footer-peek's width. */
    padding-bottom: calc(clamp(150px, 20vw, 250px) * 1.156 + 3.5rem);
}
.lp-contact .lp-contact-card {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: 0 16px 48px rgba(26, 26, 46, .08);
    overflow: hidden;
}
.lp-contact .lp-contact-form { padding: 3rem; }
.lp-contact .form-label { color: #4b5563; letter-spacing: .06em; font-weight: 700; }

/* Inputs: tactile, thick border with a bottom-heavy shadow; brand-green focus, no blue glow */
.lp-contact .form-control {
    border: 1.5px solid #94a3b8;
    border-radius: 14px;
    box-shadow: none;
    background: #fff;
    font-size: 1rem;
    padding: .85rem 1.1rem;
    transition: border-color .15s, box-shadow .15s, translate .15s;
}
.lp-contact .form-control:hover { border-color: #64748b; }
.lp-contact .form-control:focus {
    border-color: var(--primary);
    /* the darker bottom edge keeps the focus state well above 3:1 against white */
    box-shadow: 0 3px 0 var(--primary-shade);
    outline: 0;
}
.lp-contact textarea.form-control { resize: vertical; }
.lp-contact .lp-contact-submit { padding: 1rem; font-size: 1.05rem; }

/* Contact block hierarchy: 1) section title, 2) the form with the ONE bright-green action (Send message),
   3) a calm contact-details panel: neutral rows with small coloured icon tiles, no competing buttons. */
.lp-contact .lp-contact-info {
    position: relative;
    height: 100%;
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    color: #111827;
    /* the exact Send-button green: #58cc02 to #46a302, with a soft light sheen at the top-left */
    background:
        radial-gradient(70% 50% at 0% 0%, rgba(255, 255, 255, .28), transparent 70%),
        linear-gradient(180deg, #58cc02 0%, #46a302 100%);
    border-left: 1px solid #3e9102;
}
.lp-contact .lp-contact-info-title { margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(15, 60, 0, .35); font-size: 1.4rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.lp-contact .lp-contact-info-lead { margin: 0 0 .5rem; color: #fff; text-shadow: 0 1px 2px rgba(15, 60, 0, .35); font-size: 1rem; font-weight: 700; line-height: 1.6; }

.lp-contact .lp-contact-pill {
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 18px -12px rgba(36, 112, 0, .5);
    color: #111827;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lp-contact a.lp-contact-pill:hover { transform: translateY(-2px); border-color: #b9d8a6; box-shadow: 0 12px 24px -14px rgba(20, 83, 45, .45); color: #111827; }
.lp-contact a.lp-contact-pill:focus-visible { outline: 3px solid #58cc02; outline-offset: 2px; }
.lp-contact .lp-contact-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--ic-bg, #eaf8d8);
    color: var(--ic-fg, #2f6f00);
    border: 1px solid var(--ic-bd, #c6e8a2);
}
.lp-contact .lp-contact-info > :nth-child(4) { --ic-bg: #e3f4ff; --ic-fg: #0a5f8f; --ic-bd: #b4dcf5; }
.lp-contact .lp-contact-info > :nth-child(5) { --ic-bg: #fff3cf; --ic-fg: #8a5a00; --ic-bd: #f2dc94; }
.lp-contact .lp-contact-text { min-width: 0; display: flex; flex-direction: column; gap: .1rem; line-height: 1.3; }
.lp-contact .lp-contact-text small { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .7rem; color: #5b6676; }
.lp-contact .lp-contact-text strong { font-weight: 700; font-size: 1rem; color: #111827; letter-spacing: -.01em; overflow-wrap: anywhere; }
.lp-contact a.lp-contact-pill:hover .lp-contact-text strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #58cc02; }
/* ── Contact: three paths, three accents ──────────────────────────────────────────────────────────────
   Every colour comes from the accent palette at the top of this file. The paths (.lp-cycle) give each card its
   own accent: brand green (trial), sky (demo), sun (question). The card below follows the chosen path through
   --m* variables, the side panel fades between sun yellow and sky blue, and so does the section tone. Text on every accent fill is the dark ink
   colour (about 10:1 on yellow, 7:1 on sky); white text is only used on dark colours. */
/* The section background is the site's own tone system (see "Section tones" at the top of this file): a flat pale tint with
   confetti circles, like features (sky), pricing (sun), mobile app (purple) and the blog (fire). The tone is sun yellow for
   questions and sky blue for demos and is swapped by the script that swaps the form; the tint eases between the two. A
   background image set in the admin (.has-bg) still wins and gets no tone. */
.lp-contact:not(.has-bg) { transition: background-color .6s ease; }

.lp-contact .lp-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0 0 2.25rem; }
.lp-contact .lp-path {
    /* a flat grey frame with a thick, solid lower edge in the accent colour. The edge is a hard offset shadow, not a
       thick bottom border: a thick border tapers to a crescent at rounded corners, a shadow follows them cleanly
       (the same construction as the push buttons). The margin keeps room for it. */
    position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; margin-bottom: 6px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: 0 6px 0 var(--acc, var(--primary));
    transition: translate .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
.lp-contact .lp-path:hover {
    translate: 0 -4px;
    border-color: color-mix(in srgb, var(--acc, var(--primary)) 55%, #fff);
    box-shadow: 0 6px 0 var(--acc, var(--primary)), 0 18px 28px -18px color-mix(in srgb, var(--acc, var(--primary)) 55%, transparent);
}
.lp-contact .lp-path[data-lpc-card] { cursor: pointer; }
.lp-contact .lp-path-icon {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; font-size: 1.15rem;
    background: var(--acc-soft, var(--p-soft)); color: var(--acc-ink, var(--primary-ink));
    border: 1px solid color-mix(in srgb, var(--acc, var(--primary)) 40%, #fff);
}
.lp-contact .lp-path-title { margin: .25rem 0 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: #111827; }
.lp-contact .lp-path-text { margin: 0 0 .75rem; flex: 1; font-size: .92rem; line-height: 1.55; color: #4b5563; }
.lp-contact .lp-path-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: .6rem 1rem; text-align: center; text-decoration: none; font-weight: 800; touch-action: manipulation; }
.lp-contact .lp-path-note { text-align: center; color: #4b5563; font-size: .8rem; font-weight: 600; }

/* selecting a path: the card takes its accent, and a pointer ties it to the form underneath */
.lp-contact .lp-path-btn-soft {
    background: #fff; color: #111827; border: 2px solid var(--acc-ink); border-radius: 14px; cursor: pointer;
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--acc) 55%, #fff); font-family: inherit; font-size: 1rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s, translate .15s;
}
.lp-contact .lp-path-btn-soft:hover { box-shadow: 0 3px 0 0 var(--acc-shade); }
.lp-contact .lp-path-btn-soft:active { translate: 0 2px; box-shadow: 0 1px 0 0 var(--acc-shade); }
.lp-contact .lp-path-btn-soft:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.lp-contact .lp-path-btn-soft[aria-pressed="true"] { background: var(--acc); color: var(--ink-on-light); border-color: var(--acc-shade); box-shadow: 0 3px 0 0 var(--acc-shade); }
.lp-contact .lp-path-btn-soft[aria-pressed="true"]::before { content: "\2713\00a0"; font-weight: 900; }
.lp-contact .lp-path.is-active { background: var(--acc-soft); border-color: var(--acc); box-shadow: 0 6px 0 var(--acc-shade); }
.lp-contact .lp-path.is-active::after {
    content: ''; position: absolute; left: 50%; bottom: -16px; width: 22px; height: 22px; z-index: 2;
    background: var(--acc-soft); border: 3px solid var(--acc-shade); border-top: 0; border-left: 0; rotate: 45deg; translate: -50% 0;
}

/* the card: follows the chosen path (variables), white form on the left, a coloured panel on the right */
.lp-contact .lp-contact-card {
    /* same thick lower edge as the cards above it; its colour follows the chosen path */
    border: 2px solid var(--border); border-radius: 28px; margin-bottom: 7px;
    box-shadow: 0 7px 0 var(--m-shade, var(--primary-shade));
    transition: box-shadow .45s ease;
}
#lpc-card[data-mode="question"] { --m: var(--c-sun); --m-shade: var(--c-sun-shade); --m-soft: var(--c-sun-soft); --m-ink: var(--c-sun-ink); }
#lpc-card[data-mode="demo"]     { --m: var(--c-sky); --m-shade: var(--c-sky-shade); --m-soft: var(--c-sky-soft); --m-ink: var(--c-sky-ink); }
.lp-contact .lp-contact-form { position: relative; background: #fff; }
.lp-contact .lp-contact-form::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; z-index: 2; background-color: var(--m); transition: background-color .45s ease; }
.lp-contact .lp-contact-form::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--m) 18%, #fff), #fff); }
.lp-contact .lpc-stage { z-index: 1; }

.lp-contact .lpc-stage { position: relative; transition: height .4s cubic-bezier(.16, 1, .3, 1); }
.lp-contact .lpc-pane[hidden], .lp-contact .lpc-side[hidden] { display: none !important; }
.lp-contact .lpc-pane.is-leaving, .lp-contact .lpc-side.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease; }
.lp-contact .lpc-pane.is-entering .lpc-anim { animation: lpc-rise .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.lp-contact .lpc-side.is-entering > * { animation: lpc-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
.lp-contact .lpc-side.is-entering > :nth-child(2) { animation-delay: 50ms; }
.lp-contact .lpc-side.is-entering > :nth-child(3) { animation-delay: 100ms; }
.lp-contact .lpc-side.is-entering > :nth-child(4) { animation-delay: 150ms; }
.lp-contact .lpc-side.is-entering > :nth-child(5) { animation-delay: 200ms; }
.lp-contact .lpc-side.is-entering > :nth-child(6) { animation-delay: 250ms; }
@keyframes lpc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lp-contact .lpc-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.lp-contact .lpc-head-ico {
    flex: 0 0 auto; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 16px; font-size: 1.3rem;
    background: var(--m-soft); color: var(--m-ink); border: 1px solid color-mix(in srgb, var(--m) 45%, #fff);
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--m) 60%, #fff); transition: background-color .4s, color .4s;
}
.lp-contact .lpc-title { margin: 0 0 .15rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #111827; }
.lp-contact .lpc-sub { margin: 0; color: #4b5563; font-size: .95rem; }
.lp-contact .lpc-assure { margin: .85rem 0 0; text-align: center; color: #4b5563; font-size: .85rem; font-weight: 600; }
.lp-contact .lpc-err { color: #b91c1c; font-size: .82rem; font-weight: 600; margin-top: .4rem; }
.lp-contact .lpc-err:empty { display: none; }
.lp-contact .form-control[aria-invalid="true"] { border-color: #b91c1c; }
.lp-contact .form-control[aria-invalid="true"]:focus { box-shadow: 0 3px 0 #b91c1c; }
/* focus follows the chosen path: the dark shade is the outline (it must stay >= 3:1 on white), the bright colour is the 3D edge */
#lpc-card .form-control:focus { border-color: var(--m-ink); box-shadow: 0 3px 0 var(--m); }
#lpc-card .form-control[aria-invalid="true"]:focus { border-color: #b91c1c; box-shadow: 0 3px 0 #b91c1c; }
.lp-contact .lpc-opt { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .75rem; color: #4b5563; margin-left: .25rem; }

/* choices: a tick as well as the colour, so the selection never depends on colour alone */
.lp-contact .lpc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.lp-contact .lpc-chip { position: relative; display: inline-block; margin: 0; touch-action: manipulation; }
.lp-contact .lpc-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lp-contact .lpc-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: 2px solid #7a889c; border-radius: 999px; background: #fff; font-weight: 700; font-size: .88rem; color: #111827; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.lp-contact .lpc-chip:hover span { background: #f9fafb; }
.lp-contact .lpc-chip input:checked + span { border-color: var(--m-shade); background: var(--m-soft); box-shadow: 0 3px 0 0 var(--m-shade); }
.lp-contact .lpc-chip input:checked + span::before { content: "\2713\00a0"; font-weight: 900; color: var(--m-ink); }
.lp-contact .lpc-chip input:focus-visible + span { outline: 3px solid #1d4ed8; outline-offset: 2px; }

/* the side panel is the colour of the chosen card: sun yellow for questions, sky blue for demos (they cross-fade).
   Text on these bright fills is the dark ink colour, never white. */
.lp-contact .lp-contact-info { background: var(--c-sun); isolation: isolate; overflow: hidden; border-left: 0; }
.lp-contact .lp-contact-info::before, .lp-contact .lp-contact-info::after { content: ''; position: absolute; inset: 0; z-index: -1; transition: opacity .55s ease; }
.lp-contact .lp-contact-info::before {
    background:
        radial-gradient(60% 45% at 0% 0%, rgba(255, 255, 255, .45), transparent 70%),
        radial-gradient(42% 32% at 100% 100%, color-mix(in srgb, var(--c-fire) 30%, transparent), transparent 70%),
        linear-gradient(160deg, var(--c-sun) 0%, var(--c-sun-shade) 100%);
}
.lp-contact .lp-contact-info::after {
    opacity: 0;
    background:
        radial-gradient(60% 45% at 100% 0%, rgba(255, 255, 255, .42), transparent 70%),
        radial-gradient(42% 32% at 0% 100%, rgba(10, 109, 161, .35), transparent 70%),
        linear-gradient(160deg, var(--c-sky) 0%, var(--c-sky-shade) 100%);
}
#lpc-card[data-mode="demo"] .lp-contact-info::after { opacity: 1; }
.lp-contact .lp-contact-info-title { text-shadow: none; color: var(--ink-on-light); }
.lp-contact .lp-contact-info-lead { text-shadow: none; color: var(--ink-on-light); }

/* the three steps beside the demo form: the same white tiles as the contact rows, with a number instead of an icon */
.lp-contact .lpc-steps { list-style: none; margin: 0 0 .25rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.lp-contact .lpc-step-n { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: .85rem; background: var(--c-sky-ink); color: #fff; font-weight: 800; font-size: 1.05rem; }
.lp-contact .lpc-side { display: flex; flex-direction: column; gap: .75rem; }
.lp-contact .lpc-side > :nth-child(4) { --ic-bg: #e3f4ff; --ic-fg: #0a5f8f; --ic-bd: #b4dcf5; }
.lp-contact .lpc-side > :nth-child(5) { --ic-bg: #fff3cf; --ic-fg: #8a5a00; --ic-bd: #f2dc94; }
.lp-contact .lpc-side[data-side="demo"] > :nth-child(4), .lp-contact .lpc-side[data-side="demo"] > :nth-child(5) { --ic-bg: #eaf8d8; --ic-fg: #2f6f00; --ic-bd: #c6e8a2; }

@media (max-width: 991px) {
    .lp-contact .lp-paths { grid-template-columns: 1fr; }
    .lp-contact .lp-path.is-active::after { display: none; }
    .lp-contact .lp-path:hover { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-contact .lpc-stage, .lp-contact .lp-path, .lp-contact .lp-contact-info::before, .lp-contact .lp-contact-info::after, .lp-contact:not(.has-bg) { transition: none; }
    .lp-contact .lp-path:hover { translate: 0 0; }
    .lp-contact .lpc-pane.is-entering .lpc-anim, .lp-contact .lpc-side.is-entering > * { animation: none; }
}
@media (max-width: 480px) {
    .lp-contact .lp-contact-text strong { font-size: .8rem; }   /* keeps the email on one line */
}
@media (max-width: 768px) {
    .lp-contact .lp-contact-form { padding: 1.5rem; }
    .lp-contact .lp-contact-info { padding: 1.75rem; border-left: 0; border-top: 1px solid #3e9102; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-contact .lp-contact-info { animation: none; }
    .lp-contact .lp-contact-pill { transition: none; }
}

/* ── Landing section primitives (Phase 0 — sections adopt these in Phase 2) ── */
.lp-section { padding: var(--sect-pad) 0; }
.lp-section-soft { background: var(--bg-soft); }
.lp-section-dark { background: var(--dark); }
.lp-section-dark h1, .lp-section-dark h2, .lp-section-dark h3 { color: #fff; }

.lp-head { text-align: center; margin-bottom: 2.5rem; }
.lp-head-left { text-align: left; }
.lp-eyebrow {
    display: inline-block;
    background: var(--acc-soft, var(--p-soft));
    color: var(--acc-ink, var(--primary-ink));
    border: 2px solid color-mix(in srgb, var(--acc, var(--primary)) 45%, #fff);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .3rem .95rem;
    border-radius: var(--r-pill);
    margin-bottom: .9rem;
}
.lp-title {
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--dark);
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -.03em;
}
.lp-title .lp-accent { color: var(--acc-ink, var(--primary-ink)); }
.lp-subtitle {
    color: #4b5563;
    font-size: clamp(1rem, .9rem + .35vw, 1.125rem);
    line-height: 1.6;
    max-width: 640px;
    margin: .6rem auto 0;
}
.lp-head-left .lp-subtitle { margin-left: 0; }

.lp-card {
    background: #fff;
    border: 2px solid var(--border);
    border-bottom-width: 5px;
    border-radius: var(--r-card);
    box-shadow: none;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--acc, var(--primary)) 55%, #fff);
    box-shadow: var(--shadow-pop);
}
/* Inside an accent cycle the card's lower edge takes the accent colour */
.lp-cycle .lp-card { border-bottom-color: var(--acc); }

.lp-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--r-chip);
    background: var(--acc-soft, var(--p-soft));
    color: var(--acc-ink, var(--primary-ink));
    border: 2px solid color-mix(in srgb, var(--acc, var(--primary)) 45%, #fff);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--acc, var(--primary)) 45%, #fff);
    font-size: 1.3rem;
}

/* ── Per-section background override (content.bg, set on the anchor wrapper) ── */
.lp-secbg-white > section { background: #fff !important; background-image: none !important; }
.lp-secbg-soft > section { background: var(--bg-soft) !important; background-image: none !important; }
.lp-secbg-dark > section { background: var(--dark) !important; background-image: none !important; }
.lp-secbg-brand > section { background: var(--grad) !important; }
.lp-secbg-dark > section h1, .lp-secbg-dark > section h2, .lp-secbg-dark > section h3,
.lp-secbg-brand > section h1, .lp-secbg-brand > section h2, .lp-secbg-brand > section h3 { color: #fff; }

/* ── Effects layer (landing-effects.js; toggles in Appearance) ── */
.lp-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--grad);
    z-index: 9999;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), .5);
}
.lp-rv { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.lp-rv.lp-rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lp-rv { opacity: 1; transform: none; transition: none; }
}

/* ── Misc utilities ── */
.hover-lift { transition: transform 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); }

@media (hover: none) {
    .lp-card:hover, .hover-lift:hover, .btn-primary:hover, .lp-btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-card, .hover-lift, .btn-primary, .lp-btn, .nav-link { transition: none; }
}

/* ---- Accessibility pass (WCAG 2.1 AA) ----------------------------------------------------------------------- */
/* Skip link: first tab stop, hidden until focused. */
.lp-skip-link {
    position: absolute; left: .75rem; top: -4rem; z-index: 2000;
    padding: .65rem 1rem; border-radius: .75rem;
    background: #fff; color: #15803d; font-weight: 800; text-decoration: none;
    border: 2px solid #15803d; box-shadow: 3px 3px 0 #4bad02;
    transition: top .15s ease;
}
.lp-skip-link:focus { top: .75rem; outline: none; }
#main-content:focus { outline: none; }

/* One visible keyboard focus ring for every interactive element that has none of its own. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #15803d; outline-offset: 2px;
}
.footer a:focus-visible, .footer button:focus-visible { outline-color: #bbf7d0; }

/* Brand green is for fills; as TEXT on white or pale green it fails 4.5:1 (it is 2.1:1), so text uses the dark ink. */
main .text-primary, main a.text-primary { color: var(--primary-ink) !important; }
main .badge[style*="--bs-primary-rgb"] { color: var(--primary-ink) !important; }
main .btn-outline-info { --bs-btn-color: #087990; --bs-btn-border-color: #087990; --bs-btn-hover-bg: #087990; --bs-btn-hover-border-color: #087990; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #087990; --bs-btn-active-border-color: #087990; --bs-btn-active-color: #fff; }

/* ---- Animation layer (public/js/landing-animations.js, home page only) ---------------------------------------------------- */
/* ScrollSmoother drives the scroll, so the browser's own smooth scrolling must be off. */
html.lp-smooth { scroll-behavior: auto; }
/* Until the script takes over, the hero headline is held back so it never flashes before its reveal. The script removes html.lp-anim as
   soon as it runs; the page also removes it after 6 seconds in case the script never loads. */
html.lp-anim .lp-hslider h1, html.lp-anim .lp-hs-trust strong { visibility: hidden; }
/* Digits keep one width while they scramble, so the number does not jitter. */
.lp-hs-trust strong, .lp-stats .counter { font-variant-numeric: tabular-nums; }