/* ==========================================================================
   Landing page screens
   --------------------------------------------------------------------------
   Every block stylesheet is written against these tokens, so switching the
   screen class on <body> restyles the whole page at once. A block that chose
   its own background still wins -- those rules live in blocks.css and set
   `background` directly, which beats the paper tokens below.

   Loaded last, after style.css and blocks.css.
   ========================================================================== */

.lp-screen {
    --lp-radius: 16px;
    --lp-shadow: 0 6px 20px rgba(15, 23, 42, .07);
}

/* -- Nursery Green -------------------------------------------------------- */
.lp-screen-green {
    --lp-green: #0f7a3d;
    --lp-green-2: #12a05f;
    --lp-green-soft: #e7f5ec;
    --lp-amber: #f5b301;
    --lp-ink: #10241a;
    --lp-muted: #5b6f63;
    --lp-line: #d8e7dd;
    --lp-paper: #f4faf5;
    --lp-paper-2: #eaf4ed;
    --lp-deep-1: #0d3b22;
    --lp-deep-2: #061c10;
}

/* -- Bold Orange ---------------------------------------------------------- */
.lp-screen-orange {
    --lp-green: #ea580c;
    --lp-green-2: #f97316;
    --lp-green-soft: #fff0e6;
    --lp-amber: #facc15;
    --lp-ink: #2b1508;
    --lp-muted: #7c6152;
    --lp-line: #f3ddcd;
    --lp-paper: #fff8f3;
    --lp-paper-2: #fdeee3;
    --lp-deep-1: #7c2d12;
    --lp-deep-2: #3d1608;
}

/* -- Clean Blue ----------------------------------------------------------- */
.lp-screen-blue {
    --lp-green: #1d4ed8;
    --lp-green-2: #3b82f6;
    --lp-green-soft: #e8efff;
    --lp-amber: #38bdf8;
    --lp-ink: #0f1b33;
    --lp-muted: #5a6782;
    --lp-line: #d8e0f2;
    --lp-paper: #f5f8ff;
    --lp-paper-2: #e9f0fd;
    --lp-deep-1: #1e3a8a;
    --lp-deep-2: #0d1a3f;
}

/* -- what the tokens drive ------------------------------------------------ */
.lp-screen { background: var(--lp-paper); color: var(--lp-ink); }

/* The two neutral block backgrounds follow the screen's paper, so a page
   reads as one design instead of grey boxes on a tinted ground. */
.lp-screen .lp-bg-white { background: #fff; }
.lp-screen .lp-bg-light { background: var(--lp-paper-2); }

/* "Green" is the screen's primary, whatever colour that actually is. */
.lp-screen .lp-bg-green { background: linear-gradient(150deg, var(--lp-deep-1), var(--lp-deep-2)); }
.lp-screen .lp-bg-teal  { background: linear-gradient(150deg, var(--lp-green), var(--lp-deep-1)); }

.lp-screen .cam_order_now {
    background: linear-gradient(135deg, var(--lp-green-2), var(--lp-green));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--lp-green) 38%, transparent);
}
.lp-screen .lp-heading-rule::after { background: var(--lp-green); }
.lp-screen .lp-hero-frame { border-color: var(--lp-amber); }
/* Badge icons and stat figures sit on white cards on a light section, so they
   take the screen colour there; only on a dark section do they turn white.
   They used to be white everywhere, which made them invisible on light. */
.lp-screen .lp-b-badge i,
.lp-screen .lp-b-stat strong { color: var(--lp-green); }
.lp-screen .lp-b-on-dark :is(.lp-b-badge i, .lp-b-stat strong) { color: #fff; }
.lp-screen .lp-show-title::before,
.lp-screen .lp-why-ico { color: #fff; }
.lp-screen .lp-why-ico { background: var(--lp-green); }
.lp-screen .lp-show-card { border-top-color: var(--lp-green); }
.lp-screen .lp-why-card { border-left-color: var(--lp-green); }

/* On the deep grounds the accent has to stay legible, so headings and the
   highlight switch to the screen's amber rather than plain white. */
.lp-screen .lp-bg-green .lp-hi,
.lp-screen .lp-bg-green .lp-hero-hi,
.lp-screen .lp-bg-dark .lp-hi,
.lp-screen .lp-bg-dark .lp-hero-hi,
.lp-screen .lp-bg-teal .lp-hi,
.lp-screen .lp-bg-teal .lp-hero-hi { color: var(--lp-amber); }

/* ==========================================================================
   Automatic text colour
   --------------------------------------------------------------------------
   App\Support\LandingPalette works out, from the background's WCAG luminance,
   whether a section needs light or dark text, and writes the answer onto the
   section as --lp-on / --lp-on-soft / --lp-on-line / --lp-on-card.

   This layer loads last and reads those variables, so it replaces the
   hand-written "on green the text is white" lists above. Add a background
   colour and it is handled with no CSS at all.
   ========================================================================== */

.lp-b { color: var(--lp-on); }

.lp-b :is(
    .lp-heading, .lp-title, .lp-hero-title, .lp-show-title, .lp-pk-title,
    .lp-b-guarantee h2, .lp-b-feature h3, .lp-solution h3, .lp-b-quote,
    .lp-b-stat strong, .lp-pk-new, .lp-b-table th
) { color: var(--lp-on); }

.lp-b :is(
    .lp-heading-sub, .lp-subtitle, .lp-hero-sub, .lp-hero-lead, .lp-hero-note,
    .lp-show-text, .lp-b-caption, .lp-b-feature p, .lp-b-stat span,
    .lp-why-body small, .lp-b-points small, .lp-rich, .lp-pk-lines,
    .lp-contact-note, .lp-b-quote-by small
) { color: var(--lp-on-soft); }

/* Cards, rules and dividers all take their tone from the same source. */
.lp-b :is(
    .lp-b-card, .lp-b-feature, .lp-b-quote, .lp-b-badge, .lp-b-stat,
    .offer-card, .lp-package-card, .lp-pk-timer, .lp-pk-unit
) {
    background: var(--lp-on-card);
    border-color: var(--lp-on-line);
    color: var(--lp-on);
}

.lp-b :is(
    .lp-rich ul li, .lp-b-points li, .lp-b-checklist li,
    .lp-b-table th, .lp-b-table td, .lp-b-divider hr
) { border-color: var(--lp-on-line); }

.lp-b .lp-heading-rule::after { background: var(--lp-on); opacity: .55; }

/* The four card-shaped blocks stay on white even over a dark ground: their
   content is dense and reads far better on paper than on a tint. */
.lp-b :is(.lp-problem, .lp-why-card, .lp-show-card) {
    background: #fff;
    color: var(--lp-ink);
    border-color: rgba(21, 34, 24, .10);
}
.lp-b :is(.lp-show-text, .lp-why-body small) { color: var(--lp-muted); }

/* The button inverts on dark grounds so it stays the loudest thing there. */
.lp-b-on-dark .cam_order_now,
.lp-b-on-dark .lp-hero-cta .cam_order_now {
    background: #fff;
    color: var(--lp-ink) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

/* -- Amber & Black: yellow-orange top, black sections, cream paper, one
      centred column. Tokens first, then the few layout changes it needs. ---- */
.lp-screen-amber {
    --lp-green: #e0820f;
    --lp-green-2: #f28a29;
    --lp-green-soft: #fff1da;
    --lp-amber: #ffc400;
    --lp-ink: #191512;
    --lp-muted: #6d6152;
    --lp-line: #f1dfc2;
    --lp-paper: #fff7ec;
    --lp-paper-2: #fff1da;
    --lp-deep-1: #191512;
    --lp-deep-2: #0f0c0a;
    background: #fff7ec;
}
.lp-screen-amber section.lp-b.lp-b-hero { background: linear-gradient(#ffc400, #f28a29) !important; }
.lp-screen-amber .lp-hero, .lp-screen-amber .lp-hero.has-media { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 760px; margin: 0 auto; }
.lp-screen-amber .lp-hero-text { text-align: center; }
.lp-screen-amber .lp-hero-badge { background: #191512; color: #fff; border: 2px solid #fff; border-radius: 99px; }
.lp-screen-amber .lp-hero-title, .lp-screen-amber .lp-hero-title .lp-hero-hi { color: #fff; text-shadow: 0 2px 6px rgb(0 0 0 / .28); }
.lp-screen-amber .lp-hero-sub { display: inline-block; padding: 6px 22px; color: #191512; border: 2px dashed #191512; border-radius: 99px; }
.lp-screen-amber .lp-hero-lead { color: #191512; }
.lp-screen-amber .lp-hero img { width: 100%; max-width: 560px; border-radius: 16px; border: 3px solid #fff; box-shadow: 0 12px 30px rgb(0 0 0 / .25); }
.lp-screen-amber .lp-b-on-dark { background: #191512 !important; }
.lp-screen-amber .lp-bg-white { background: #fff7ec !important; }
.lp-screen-amber .lp-b-on-dark .card, .lp-screen-amber .lp-b-features.lp-b-on-dark [class*="card"] { border-color: rgb(255 196 0 / .35); }
.lp-screen-amber #order_form .of-grid { border: 2px solid #ffc400; border-radius: 14px; padding: 16px; background: #fff; }
.lp-screen-amber .of-submit { background: #191512 !important; color: #ffc400 !important; }
.lp-screen-amber .lp-b-notice span { font-weight: 800; }

/* The section and its list share the class .lp-b-checklist, so the list's narrow
   width also squeezed a coloured section. Any screen. */
section.lp-b.lp-b-checklist { max-width: none; width: 100%; margin-left: 0; margin-right: 0; }
.lp-screen-amber .lp-media-label, .lp-screen-amber .lp-hero-media-label { display: none; }
.lp-screen-amber .lp-hero-title, .lp-screen-amber .lp-hero-title .lp-hero-hi { color: #fff !important; }
.lp-screen-amber .lp-hero-sub { color: #191512 !important; font-weight: 600; }
.lp-screen-amber .lp-hero-lead, .lp-screen-amber .lp-hero-lead * { color: #191512 !important; }
.lp-screen-amber .lp-b-hero a[href="#order_form"] { background: #191512 !important; color: #ffc400 !important; border-color: #191512 !important; }

/* Amber: the long sales layout. */
.lp-screen-amber section.lp-b.lp-b-hero { position: relative; padding-bottom: 90px; }
.lp-screen-amber section.lp-b.lp-b-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23fff7ec' d='M0 40C240 80 480 0 720 25s480 45 720 5v40H0z'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.lp-screen-amber section.lp-b-notice.lp-bg-green { background: #fff7ec !important; color: #191512 !important; padding: 8px 0 18px; }
.lp-screen-amber section.lp-b-notice.lp-bg-green .lp-b-notice { display: inline-block; width: auto; }
.lp-screen-amber section.lp-b-notice.lp-bg-green { text-align: center; }
.lp-screen-amber section.lp-b-notice.lp-bg-green span { display: inline-block; padding: 12px 26px; border-radius: 10px; background: #0d5640; color: #ffe07a; }
.lp-screen-amber .lp-b-content .lp-b-card { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.lp-screen-amber .lp-b-content .lp-heading { display: inline-block; margin-bottom: 14px; padding: 4px 18px; border: 2px solid #fff; border-radius: 8px; font-size: 22px; }
.lp-screen-amber .lp-b-content .lp-heading::after { display: none; }
.lp-screen-amber .lp-b-content .lp-rich { font-size: 17px; line-height: 2.5; }
.lp-screen-amber .lp-b-content .lp-b-img { border: 2px solid #ffc400; border-radius: 14px; }
.lp-screen-amber .lp-b-image img { box-shadow: 0 6px 22px rgb(0 0 0 / .14); border-radius: 6px; }
.lp-screen-amber .lp-b-features p { line-height: 2; }
.lp-screen-amber .lp-b-features h3 { color: #ffc400; }
.lp-screen-amber .lp-b-reviews .lp-heading { display: table; margin-left: auto; margin-right: auto; padding: 8px 22px; background: #b25d0c; color: #fff; border-radius: 8px; }
.lp-screen-amber .lp-b-reviews .lp-heading::after { display: none; }
.lp-screen-amber .lp-b-image img { display: block; max-width: min(100%, 560px); margin-left: auto; margin-right: auto; }
.lp-screen-amber .lp-b-features h3 { font-size: 20px; }
.lp-screen-amber .lp-b-features p { font-size: 15px; }
.lp-screen-amber .lp-b-content .lp-b-img { max-height: 420px; object-fit: cover; }
.lp-screen-amber .lp-b-hero + .lp-b-image img { max-width: 100%; border-radius: 8px; }
.lp-screen-amber .lp-b-video .lp-video { max-width: 640px; margin-left: auto; margin-right: auto; }
.lp-screen-amber section.lp-b-video { padding-top: 10px; padding-bottom: 10px; }

/* Several videos in one block: a row that scrolls sideways. */
.lp-video-scroll { position: relative; }
.lp-video-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.lp-video-track::-webkit-scrollbar { display: none; }
.lp-video-slide { flex: 0 0 62%; scroll-snap-align: start; min-width: 0; }
.lp-video-slide .lp-video { max-width: none !important; margin: 0 !important; }
.lp-video-arrow { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #191512; color: #ffc400; transform: translateY(-50%); box-shadow: 0 3px 12px rgb(0 0 0 / .3); }
.lp-video-arrow.is-prev { left: -10px; }
.lp-video-arrow.is-next { right: -10px; }
@media (max-width: 767px) {
    .lp-video-slide { flex-basis: 86%; }
    .lp-video-arrow { width: 36px; height: 36px; }
    .lp-video-arrow.is-prev { left: -6px; }
    .lp-video-arrow.is-next { right: -6px; }
}
.lp-screen-amber .lp-b-countdown .countdown-title { text-align: center; }

/* Amber: the offer timer as one card, the badges and offer banner pulled closer together. */
.lp-screen-amber section.lp-b-countdown { padding-top: 26px !important; padding-bottom: 6px !important; }
.lp-screen-amber div.lp-b-countdown { max-width: 560px; margin: 0 auto; padding: 22px 18px 20px; border-radius: 20px; text-align: center;
    background: linear-gradient(160deg, #1d1814, #2b221a); border: 2px solid #ffc400; box-shadow: 0 14px 34px -14px rgb(242 138 41 / .55); }
.lp-screen-amber .lp-b-countdown .countdown-title { display: inline-block; margin: 0 auto 16px; padding: 7px 18px; border-radius: 999px;
    background: #e53935; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .01em; animation: lpPulse 1.6s ease-in-out infinite; }
.lp-screen-amber .lp-b-countdown .countdown { display: flex; justify-content: center; gap: 10px; }
.lp-screen-amber .lp-b-countdown .time-box { flex: 1 1 0; max-width: 104px; padding: 12px 6px 10px; border-radius: 14px; text-align: center;
    background: linear-gradient(180deg, #ffd54a, #f28a29); color: #191512; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12); }
.lp-screen-amber .lp-b-countdown .time-box h3 { margin: 0; font-size: 34px; line-height: 1; font-weight: 800; color: #191512; font-variant-numeric: tabular-nums; }
.lp-screen-amber .lp-b-countdown .time-box span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #3a2a12; }
.lp-screen-amber section.lp-b-badges { padding-top: 18px !important; padding-bottom: 4px !important; }
.lp-screen-amber section.lp-b-badges + section.lp-b-image { padding-top: 14px !important; }
@keyframes lpPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (max-width: 575.98px) {
    .lp-screen-amber div.lp-b-countdown { padding: 18px 12px 16px; border-radius: 16px; }
    .lp-screen-amber .lp-b-countdown .countdown { gap: 7px; }
    .lp-screen-amber .lp-b-countdown .time-box h3 { font-size: 28px; }
    .lp-screen-amber .lp-b-countdown .time-box span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .lp-screen-amber .lp-b-countdown .countdown-title { animation: none; } }

/* Green: the same one-card offer timer, deep green with gold digits. */
.lp-screen-green section.lp-b-countdown { padding-top: 26px !important; padding-bottom: 6px !important; }
.lp-screen-green div.lp-b-countdown { max-width: 560px; margin: 0 auto; padding: 22px 18px 20px; border-radius: 20px; text-align: center;
    background: linear-gradient(160deg, #0b3d24, #0f5132); border: 2px solid #f5c542; box-shadow: 0 14px 34px -14px rgb(15 81 50 / .6); }
.lp-screen-green .lp-b-countdown .countdown-title { display: inline-block; margin: 0 auto 16px; padding: 7px 18px; border-radius: 999px;
    background: #e53935; color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .01em; animation: lpPulse 1.6s ease-in-out infinite; }
.lp-screen-green .lp-b-countdown .countdown { display: flex; justify-content: center; gap: 10px; }
.lp-screen-green .lp-b-countdown .time-box { flex: 1 1 0; max-width: 104px; padding: 12px 6px 10px; border-radius: 14px; text-align: center;
    background: linear-gradient(180deg, #ffe082, #f5b82e); color: #0b3d24; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12); }
.lp-screen-green .lp-b-countdown .time-box h3 { margin: 0; font-size: 34px; line-height: 1; font-weight: 800; color: #0b3d24; font-variant-numeric: tabular-nums; }
.lp-screen-green .lp-b-countdown .time-box span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: #14532d; }
@media (max-width: 575.98px) {
    .lp-screen-green div.lp-b-countdown { padding: 18px 12px 16px; border-radius: 16px; }
    .lp-screen-green .lp-b-countdown .countdown { gap: 7px; }
    .lp-screen-green .lp-b-countdown .time-box h3 { font-size: 28px; }
    .lp-screen-green .lp-b-countdown .time-box span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .lp-screen-green .lp-b-countdown .countdown-title { animation: none; } }
/* The timer card is its own frame: no second frame around it, and less gap before the packages. */
.lp-screen-amber section.lp-b-countdown > .container, .lp-screen-amber section.lp-b-countdown .lp-b-card { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 12px !important; padding-right: 12px !important; }
.lp-screen-amber section.lp-b-image + section.lp-b-offer { padding-top: 18px !important; }
.lp-screen-green section.lp-b-countdown > .container, .lp-screen-green section.lp-b-countdown .lp-b-card { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 12px !important; padding-right: 12px !important; }