/*
 * lasthost-ai-marketing
 *
 * Hand-written and deliberately small. Every colour, radius, weight and shadow
 * below is lifted from the LastHost theme's compiled stylesheet
 * (lasthost-marketing/wp-content/themes/lasthost/css/style.css) so this page
 * reads as the same company — without shipping Bootstrap, jQuery and 100KB of
 * CSS to somebody who arrived from a phone on a panic search.
 *
 * Mobile-first: base rules are the small screen, media queries add the rest.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --primary:       #7189CC;   /* theme $primary */
    --primary-dark:  #4B6ABF;   /* theme .btn-primary:hover */
    --primary-soft:  rgba(113, 137, 204, 0.10);
    --accent:        #e9aa40;   /* theme .brand-orange, also its link colour */
    --ink:           #161c2d;   /* theme $black / body colour */
    --muted:         #414F69;   /* theme $muted */
    --light:         #f8f9fc;   /* theme $light */
    --line:          #e3e7f1;
    --white:         #ffffff;
    --footer-bg:     #0E4D28;   /* 4a deep-green footer */
    /* Green rebrand — the greens from the logo (video-hero handoff), plus the
       mint tints of the "4a Mint & amber" full-page skin
       (design_handoff_4a_full_page). Amber (--accent) now marks only the warm
       notice; the stat callout uses the parent brand's periwinkle (--primary). */
    --green:         #1EC95F;   /* brand green, primary action */
    --green-dark:    #17A84F;   /* gradient pair, green button hover */
    --green-bright:  #2EE27A;   /* bright accent / hovers (dark backgrounds) */
    --green-deep:    #0E7A3C;   /* links + secondary emphasis on light */
    --green-ink:     #0B2A1E;   /* darkest green, CTA text */
    --mint:          #F4FBF6;   /* 4a section band / card tint */
    --mint-line:     #DFF2E5;   /* 4a borders, on mint and on white */
    --head-ink:      #3C4858;   /* headings (theme $headings-color) */
    --muted-soft:    #8492A6;   /* quiet labels: qualifiers, cites, help */
    --shadow:        0 3px 5px 0 rgba(113, 137, 204, 0.30);
    --shadow-lg:     0 10px 25px rgba(60, 72, 88, 0.15);
    /* The depth pass: a soft medium elevation for every visible surface —
       a tight contact line plus a wide ambient, in the theme's slate hue. */
    --shadow-md:     0 2px 5px rgba(60, 72, 88, 0.08), 0 6px 18px rgba(60, 72, 88, 0.12);
    --radius:        7px;
    --radius-lg:     12px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    /* One continuous wash from the very top of the page down through the hero,
       so the header floats on the same surface instead of sitting in its own
       white band above it. */
    background-color: var(--white);
    background-image: linear-gradient(180deg, var(--light), var(--white));
    background-repeat: no-repeat;
    background-size: 100% 640px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* Our display rules (.btn's inline-block, etc.) would otherwise out-cascade
   the browser's built-in [hidden] handling — this keeps hidden meaning hidden,
   e.g. the wizard's Back button on question one. */
[hidden] { display: none !important; }
/* Links are deep green in the 4a skin — amber belongs to the stat callout
   alone. Places that need another colour (footer, hero) override locally. */
a { color: var(--green-deep); transition: all .3s; }
a:hover { color: var(--green-dark); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 700; letter-spacing: -0.01em; color: var(--head-ink); }
h1 { font-size: clamp(28px, 7vw, 42px); }
h2 { font-size: clamp(24px, 5.5vw, 36px); }
h3 { font-size: clamp(19px, 3vw, 22px); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 720px; }
/* 4a: sections alternate white and mint bands — no hairline separators. */
.section { padding: 48px 0; }
.section__title { text-align: center; margin-bottom: .3em; }
.section__sub {
    text-align: center;
    color: var(--muted);
    font-size: 18px;
    max-width: 620px;
    margin: 0 auto 2.2em;
}
.lede { font-size: clamp(17px, 2.4vw, 19px); color: var(--muted); }
.micro { font-size: 14px; color: var(--muted); }

@media (min-width: 768px) {
    .section { padding: 84px 0; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}
/* 4a: the one action colour is brand green, dark-green ink on it. */
.btn--primary {
    background: var(--green);
    border-color: var(--green);
    color: var(--green-ink);
    box-shadow: 0 3px 5px 0 rgba(30, 201, 95, 0.35);
}
.btn--primary:hover, .btn--primary:focus {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: var(--white);
}
.btn--ghost { background: none; border-color: transparent; color: var(--muted); }
.btn--ghost:hover { color: var(--ink); }
.btn--lg { padding: 14px 28px; font-size: 17px; }
.btn--block { display: block; width: 100%; }
:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }

/* ── Site header / footer ───────────────────────────────────────────────── */
/* No background or border of its own: the header sits on the body's top wash
   and flows straight into the hero. */
.site-head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
}
.site-head__logo img { width: 150px; height: auto; }
.site-head__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.site-head__link .icon { flex: 0 0 auto; }

/* The landing page's header floats over the video hero: absolute over the top
   of the page (the hero is the first thing in <main>, so top-of-body is
   top-of-hero), white logo and link, full-bleed padding instead of .wrap's
   column. Other pages (/thanks, /security) keep the plain header above. */
.site-head--hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.site-head--hero .site-head__inner {
    max-width: none;
    padding: 22px 20px;
}
.site-head--hero .site-head__logo img { width: 170px; }
.site-head--hero .site-head__link {
    gap: 8px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap; /* "Chat With a Human" stays one line beside the logo */
}
.site-head--hero .site-head__link:hover,
.site-head--hero .site-head__link:focus { color: var(--green-bright); }

@media (min-width: 860px) {
    .site-head--hero .site-head__inner { padding: 22px 56px; }
}

/* The "bring it from anywhere" band: full page width, below the hero copy and
   numbers, still inside the hero. Four copies of the logo set slide left by
   exactly two set-widths, so the loop never shows a seam. Full-colour logos;
   reduced-motion kills the animation globally and leaves a static row. */
.logo-strip { margin-top: 44px; }
.logo-strip__kicker {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 14px;
}
.logo-strip__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-strip__track {
    display: flex;
    width: max-content;
    animation: logo-scroll 70s linear infinite;
}
.logo-strip__set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Uniform margin on EVERY item (last one included) keeps each set's width
   identical, which is what makes translateX(-50%) land exactly on a seam. */
.logo-strip__set li { margin-right: 48px; display: flex; }
.logo-strip__set img { width: auto; max-height: 25px; }
@keyframes logo-scroll {
    to { transform: translateX(-50%); }
}

@media (min-width: 860px) {
    .logo-strip { margin-top: 60px; }
    .logo-strip__set li { margin-right: 72px; }
}

.site-foot {
    background: var(--footer-bg);
    color: rgba(244, 251, 246, .75);
    padding: 40px 0;
    font-size: 14px;
}
.site-foot a { color: var(--white); text-decoration: underline; }
.site-foot__logo { width: 140px; height: auto; margin-bottom: 18px; }
.site-foot__brand { color: var(--white); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 0; }

/* ── Hero (full-screen video, green rebrand) ────────────────────────────── */
/* One viewport of muted footage under a dark radial scrim, copy centered on
   both axes, the logo carousel riding the bottom edge. The poster frame is the
   hero's own background, so reduced-motion (which hides the <video>) and a
   still-loading video both show the same still. */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: max(100vh, 640px);
    min-height: max(100svh, 640px);
    background: var(--ink) url(../img/hero-poster.jpg) center / cover no-repeat;
}
/* The 9% overscan crops the letterbox bars baked into the test footage
   (~17px top/bottom at 960×540). Clean 16:9 finals can drop the scale. */
.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%) scale(1.09);
}
.hero__scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%,
        rgba(22, 28, 45, .92) 0%,
        rgba(22, 28, 45, .68) 68%,
        rgba(22, 28, 45, .82) 100%);
    pointer-events: none;
}
/* 5c layout: one row, vertically centered — copy block left-aligned, the
   facts stacked in their own column to its right, --hero-gap between them
   (a variable on purpose: it's the tweak-tested value from the mock). Under
   ~900px the row stacks, copy first, everything left-aligned. */
.hero__content {
    --hero-gap: 140px;
    position: relative;
    z-index: 2;
    margin: auto 0; /* centers in whatever the carousel leaves free */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    text-align: left;
    padding: 96px 24px 40px;
}
.hero__copy { max-width: 605px; }
.hero__content h1 {
    margin: 0 0 20px;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: 0;
    color: var(--white);
    text-shadow: 0 2px 18px rgba(22, 28, 45, .5);
}
.hero__accent { position: relative; color: var(--green-bright); white-space: nowrap; }

/* The hand-drawn squiggle under the accent word (lh_highlight in icons.php).
   It draws in like a pen stroke once the headline has landed. The resting
   styles below ARE the finished stroke — the keyframes only rewind it — so the
   global reduced-motion kill switch leaves a static squiggle, not a blank. */
.hero__accent .hl {
    position: absolute;
    left: -0.06em;
    bottom: -.2rem;
    width: calc(100% + 0.12em);
    height: 0.25em;
    overflow: visible;
    stroke-width: 0.085em;
    rotate: 1deg; /* screen units (non-scaling-stroke), so it tracks the h1 clamp */
}
.hero__accent .hl path {
    /* pathLength=100; the long gap keeps a round-cap "dot" from peeking out
       at either end while the stroke is still rewound. */
    stroke-dasharray: 100 200;
    animation: hl-draw 1.75s ease-out .8s backwards;
}
@keyframes hl-draw {
    from { stroke-dashoffset: 101; }
    to   { stroke-dashoffset: 0; }
}
.hero__lede {
    margin: 0 0 28px;
    font-size: 19px;
    line-height: 1.65;
    color: rgba(248, 249, 252, .92);
    max-width: 540px;
}
.hero__cta { margin: 0 0 14px; }
.hero__note {
    margin: 0;
    font-size: 13px;
    color: rgba(248, 249, 252, 1);
}
.btn--hero {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 34px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    background: var(--green);
    border-color: var(--green);
    color: var(--green-ink);
    box-shadow: 0 3px 5px rgba(22, 28, 45, .35);
}
.btn--hero:hover, .btn--hero:focus {
    background: var(--green-bright);
    border-color: var(--green-bright);
    color: var(--green-ink);
}

/* The numbers: a stacked column beside the copy — big white figure, its label
   under it, thin 50px rules between the three, 22px of air each side. */
.hero__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: none;
}
.hero__facts li { animation: fact-in 1s ease-out backwards; }
.hero__facts li + li { margin-top: 22px; }
.hero__facts li + li::before {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background: var(--white);
    margin-bottom: 22px;
}
.hero__facts li:nth-child(1) { animation-delay: .05s; }
.hero__facts li:nth-child(2) { animation-delay: .18s; }
.hero__facts li:nth-child(3) { animation-delay: .31s; }
@keyframes fact-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}
.hero__facts strong {
    display: block;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}
.hero__facts span {
    display: block;
    font-size: 15px;
    color: rgba(248, 249, 252, .75);
}

@media (min-width: 900px) {
    .hero__content {
        flex-direction: row;
        align-items: center;
        gap: var(--hero-gap);
        padding: 96px 56px 48px;
    }
}

/* The carousel inside the hero: same track, logos flattened to white so they
   pop on the footage. */
.logo-strip--hero {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-bottom: 40px;
}
.logo-strip--hero .logo-strip__kicker { color: rgba(248, 249, 252, 1); }
.logo-strip--hero .logo-strip__set img { filter: brightness(0) invert(1); }

@media (min-width: 860px) {
    .logo-strip--hero { margin-top: 0; }
}

/* Reduced motion: the poster only — the global kill switch below already stops
   the carousel and fade-ins; this stops the footage itself. */
@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
}

/* ── The three doors (4a: mint cards on a white section) ────────────────── */
.doors { background: var(--white); }
.door-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.door { display: flex; }
.door__hit {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 30px 28px;
    background: var(--mint);
    border: 1px solid var(--mint-line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .3s, box-shadow .3s;
}
.door__hit:hover, .door__hit:focus {
    border-color: var(--green);
    box-shadow: 0 10px 25px rgba(14, 122, 60, .12);
    color: var(--ink);
}
.door__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--green);
    color: var(--white);
}
.door__title { font-size: 19px; font-weight: 700; color: var(--head-ink); }
.door__body { color: var(--muted); font-size: 15px; line-height: 1.6; }
.door__go { margin-top: auto; font-weight: 700; color: var(--green-deep); font-size: 14px; }

@media (min-width: 820px) {
    /* Three equal columns: door three carries the same weight as the others,
       because it is the one nobody else offers. */
    .door-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ── How it works (4a: mint band, green left rules, big numerals) ───────── */
.how { background: var(--mint); }
.how-list { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 26px; }
.how-list h3 { margin: .4em 0 .3em; }
.how-list p { color: var(--muted); font-size: 15px; margin: 0; }
.how-list__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--green-deep);
    font-weight: 700;
}
.how-list--compact { gap: 18px; }

/* The landing page's columns: each step sits against a 3px brand-green rule,
   its numeral big and green above the title. */
.how-list--visual li {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
    /* border-left: 3px solid var(--green); */
    padding-left: 20px;
}
.how-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: .35em; }
.how-head h3 { margin: 0; font-size: 20px; }
.how-list--visual .how-list__n {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: var(--green);
}

/* The illustrations on top of each column — medium, left-aligned with the
   column's rule and text. They float gently like the main site's
   .animate-float, staggered so the three don't bob in unison; the global
   reduced-motion kill switch stops them. */
.how-art { margin-bottom: 16px; }
.how-art .art {
    display: block;
    width: 100%;
    max-width: 270px;
    height: auto;
    animation: lh-float 6s ease-in-out infinite;
}
.how-list--visual li:nth-child(2) { border-left: 1px solid var(--green); border-right: 1px solid var(--green); }
.how-list--visual li:nth-child(2) .art { animation-delay: -2s; }
.how-list--visual li:nth-child(3) .art { animation-delay: -4s; }
@keyframes lh-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (min-width: 820px) {
    .how-list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .how-list--compact { grid-template-columns: 1fr; }
    .how-list--visual li { max-width: none; }
}

.detail {
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid var(--mint-line);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    background: var(--white);
}
.detail summary { font-weight: 700; font-size: 16px; cursor: pointer; color: var(--green-deep); }

/* Accordions (.detail + .faq__item): no browser triangle on the left — a thin
   round-capped chevron (lh_icon 'chevron') on the right instead, flipping when
   the panel opens. The global reduced-motion switch stops the turn. */
.detail summary, .faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    list-style: none;
}
.detail summary::-webkit-details-marker,
.faq__item summary::-webkit-details-marker { display: none; }
.detail summary .icon, .faq__item summary .icon {
    flex: 0 0 auto;
    color: var(--green-deep);
    transition: transform .3s;
}
/* The detail accordion centers its header cluster (checklist icon + title +
   chevron); FAQ items keep the question left, chevron right. Only the chevron
   — always the last icon in the summary — turns when the panel opens. */
.detail summary { justify-content: center; gap: 10px; }
details[open] > summary .icon:last-child { transform: rotate(180deg); }
/* Green checkmarks instead of bullets — the same tick the pricing cards and
   the security page's certification cards use. Scoped to direct children:
   an item can carry a nested sub-list, whose entries get a green dash and a
   further indent instead of a second checkmark. */
.detail__list { margin: 1em 0 0; padding-left: 0; list-style: none; color: var(--muted); font-size: 15px; }
.detail__list > li { position: relative; padding-left: 26px; margin-bottom: .6em; }
.detail__list > li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}
.detail__list ul { list-style: none; margin: .5em 0 0; padding-left: 4px; }
.detail__list ul li { position: relative; padding-left: 18px; margin-bottom: .35em; }
.detail__list ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}
.detail__list > li > span  {
    font-weight: bold;
    text-decoration: underline;
}

/* ── Comparison + stat (4a: stacked white cards; amber lives HERE only) ──── */
.compare-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 20px; max-width: 860px; }
.compare-list li {
    background: var(--white);
    border: 1px solid var(--mint-line);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
}
.compare-list h3 { display: flex; align-items: center; gap: 10px; margin-bottom: .5em; font-size: 18px; }
.compare-list__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--green);
}
.compare-list__good { color: var(--green-deep); font-size: 15px; line-height: 1.6; margin-bottom: .5em; }
.compare-list__gap { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* The "1 in 10" security stat, in the parent brand's periwinkle — a cool
   "research finding" moment against the page's greens. Deliberately its own
   colours, not --accent: amber still belongs to .notice--warm. Dressed as a
   pull-quote: an oversized typographic opening mark (a CSS glyph, so no icon
   asset to ship) and an attribution dash on the cite. */
.stat {
    position: relative;
    max-width: 760px;
    margin: 44px auto 0;
    padding: 30px 28px 26px 62px;
    background: rgba(113, 137, 204, .09);
    border: 0;
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.stat::before {
    content: '\201C';
    position: absolute;
    top: 18px;
    left: 16px;
    font-size: 52px;
    line-height: 1;
    font-weight: 800;
    color: var(--primary);
    pointer-events: none;
}
.stat__claim { font-size: 19px; line-height: 1.5; font-weight: 700; color: var(--head-ink); margin-bottom: .3em; }
.stat cite { display: block; font-size: 13px; color: var(--muted-soft); font-style: normal; margin-bottom: .8em; }
.stat cite::before { content: '\2014\00a0'; /* — attribution dash */ }

@media (min-width: 720px) {
    .stat { padding: 34px 36px 30px 92px; }
    .stat::before { font-size: 72px; top: 22px; left: 26px; }
}
.stat__follow { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ── Pricing (4a: mint band, white cards, deep-green prices) ────────────── */
.pricing { background: var(--mint); text-align: center; }
.price-grid { display: grid; gap: 20px; margin: 0 auto 28px; max-width: 860px; text-align: left; }
.price {
    background: var(--white);
    border: 1px solid var(--mint-line);
    border-radius: var(--radius-lg);
    padding: 34px 32px;
    box-shadow: 0 10px 25px rgba(60, 72, 88, .08);
}
.price__amount {
    font-size: 46px;
    font-weight: 800;
    color: var(--green-deep);
    line-height: 1;
    margin-bottom: 4px;
}
.price__amount span { font-size: 15px; font-weight: 400; /*color: var(--muted-soft);*/ margin-left: 6px; }
.price h3 { font-size: 20px; margin-bottom: 18px; }
.price ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.price li { position: relative; padding-left: 28px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.price li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}
.price-note {
    max-width: 620px;
    margin: 0 auto 1.6em;
    color: var(--muted);
    font-size: 15px;
}
.price-note strong { color: var(--head-ink); }

@media (min-width: 720px) {
    .price-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ── Wizard ─────────────────────────────────────────────────────────────── */
.wizard-section { background: var(--white); }
.wizard {
    max-width: 640px;
    margin: 0 auto;
    background: var(--mint);
    border: 1px solid var(--mint-line);
    border-radius: 14px;
    padding: 24px 20px 28px;
    box-shadow: 0 10px 25px rgba(60, 72, 88, .06);
}

@media (min-width: 720px) {
    .wizard { padding: 38px 40px; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 4a progress: the live step is a green pill, the rest stay mint dots. */
.wizard__dots { list-style: none; display: flex; gap: 8px; justify-content: center; margin: 0 0 26px; padding: 0; }
.wizard__dots li {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--mint-line);
    transition: all .3s;
}
.wizard__dots li.is-current { width: 24px; background: var(--green); }
.wizard__dots li.is-done { background: var(--green); opacity: .5; }

.wstep { border: 0; margin: 0; padding: 0; min-width: 0; }
.wstep__q { font-size: clamp(20px, 4vw, 24px); font-weight: 700; color: var(--head-ink); padding: 0; margin-bottom: .3em; }
/* The script moves focus here on each step change so a screen reader announces the
   new question. Nobody tabbed to it, so the visible ring would just look like a
   stray box around the heading. */
.wstep__q:focus, .wstep__q:focus-visible { outline: none; }
.wstep__help { /*color: var(--muted-soft);*/ font-size: 14px; margin-bottom: 1.4em; }
.wstep__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.wstep__nav [data-next] { margin-left: auto; }

/* Stepped mode: JS adds .js-wizard, which hides everything but the live step
   and the single-submit fallback. Without JS, every step stays visible. */
.js-wizard .wstep { display: none; }
.js-wizard .wstep.is-active { display: block; }
.js-wizard .wizard__fallback { display: none; }
.wizard__fallback { margin-top: 22px; }
.js-wizard .wizard__dots { display: flex; }

.options { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: var(--white);
    border: 2px solid var(--mint-line);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color .3s;
}
.option:hover { border-color: var(--green); }
.option input { margin: 4px 0 0; accent-color: var(--green); width: 18px; height: 18px; flex: 0 0 auto; }
.option__label { font-weight: 600; font-size: 15px; color: var(--head-ink); }
.option:has(input:checked) { border-color: var(--green); }

.reveal { margin: 10px 0 0 16px; display: none; }
.reveal.is-open { display: block; }
.reveal__help { margin: 6px 0 0; font-size: 13px; }
.field { margin-bottom: 18px; }
.field label, .reveal label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .reveal input {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--mint-line);
    border-radius: var(--radius);
}
.field input:focus, .field textarea:focus, .reveal input:focus { border-color: var(--green); outline: none; }
.field__error { color: #e43f52; font-size: 14px; margin: 6px 0 0; font-weight: 600; }

.chat-guide {
    margin-top: 18px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px dashed var(--green);
    border-radius: var(--radius-lg);
}
.chat-guide h3 { font-size: 18px; margin-bottom: .5em; }
.chat-guide ol { margin: 0 0 1em; padding-left: 1.2em; color: var(--muted); }
.chat-guide li { margin-bottom: .5em; }

.quote__table { margin-bottom: 20px; background: var(--white); border-radius: var(--radius); overflow: hidden; }
.quote__table th, .quote__table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--mint-line); vertical-align: top; }
.quote__table tr:last-child th, .quote__table tr:last-child td { border-bottom: 0; }
.quote__table th { color: var(--muted); font-weight: 600; width: 34%; }
.quote__table strong { display: block; font-size: 20px; }
.quote__table .micro { display: block; }
.quote__micro { margin-top: 12px; text-align: center; }
.quote__micro .icon { vertical-align: -2px; margin-right: 5px; color: var(--green-deep); }

/* The Stripe attribution under the pay button — the same badge the admin
   payment screens show, inlined (see lh_stripe_wordmark in icons.php). */
.stripe-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--muted-soft);
}
.stripe-badge .stripe-wordmark { display: block; margin-top: -1px; flex: 0 0 auto; }

/* ── Wizard modal ───────────────────────────────────────────────────────── */
/* JS-only: wizard.js moves the section's .wrap into a native <dialog>, so the
   browser gives us the top layer, the focus trap and Esc for free. With JS off
   the section stays inline and none of this applies. */
.wizard-modal {
    width: min(660px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;               /* with the UA's position:fixed + inset:0, this
                                   centers the dialog in the VIEWPORT — never
                                   set `position` here, or it falls back to its
                                   DOM spot at the bottom of the page */
    border: 0;
    border-radius: var(--radius-lg);
    padding: 0;                 /* the moved .wrap carries the padding, so a
                                   click that hits the dialog itself can only
                                   be the backdrop */
    background: var(--white);
    color: var(--ink);
    /* Three stacked shadows read as real elevation: a tight contact line, a
       mid ambient, and a wide soft drop. */
    box-shadow:
        0 1px 2px rgba(11, 42, 30, .12),
        0 12px 28px rgba(11, 42, 30, .18),
        0 36px 80px -16px rgba(22, 28, 45, .5);
    overflow-y: auto;           /* safety net for short/landscape screens; the
                                   compact scale below should fit without it */
    overscroll-behavior: contain;
}
.wizard-modal[open] { animation: modal-in .25s ease-out; }
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px); }
}
/* The page recedes: a vignette that stays lighter behind the dialog and
   deepens toward the edges, plus a light blur. Literal colours on purpose —
   ::backdrop can't reliably read custom properties. */
.wizard-modal::backdrop {
    background: radial-gradient(ellipse at 50% 42%,
        rgba(22, 28, 45, .45) 0%,
        rgba(22, 28, 45, .58) 60%,
        rgba(22, 28, 45, .72) 100%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/* When the safety-net scrollbar does appear, it is a thin deep-green thumb on
   no track instead of the OS default. Standard properties first (Firefox,
   Chrome 121+, Safari 18.2+); the ::-webkit-* rules cover older WebKit, which
   is also the only place the :hover shade applies — browsers honouring
   scrollbar-color ignore the webkit pseudos entirely. The rgba pairs are
   --green-deep (#0E7A3C) at 35% / 55%. */
.wizard-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 122, 60, .35) transparent;
}
.wizard-modal::-webkit-scrollbar { width: 6px; }
.wizard-modal::-webkit-scrollbar-track { background: transparent; }
.wizard-modal::-webkit-scrollbar-thumb {
    background: rgba(14, 122, 60, .35);
    border-radius: 3px;
}
.wizard-modal::-webkit-scrollbar-thumb:hover { background: rgba(14, 122, 60, .55); }

/* Compact scale, modal only — the inline no-JS form keeps the roomy sizes.
   Sized so the tallest step (six options) fits a ~640px viewport unscrolled. */
.wizard-modal .wrap { max-width: none; padding: 26px 18px 20px; }
.wizard-modal .section__title { font-size: clamp(20px, 4vw, 24px); margin-bottom: .25em; }
.wizard-modal .section__sub { font-size: 15px; margin-bottom: 1.1em; }
.wizard-modal .wizard { box-shadow: none; padding: 18px 18px 20px; } /* card-in-card: the dialog casts the shadow */
.wizard-modal .wizard__dots { margin-bottom: 14px; }
.wizard-modal .wstep__q { font-size: clamp(17px, 2.6vw, 19px); }
.wizard-modal .wstep__help { margin-bottom: 1em; }
.wizard-modal .options { gap: 8px; }
.wizard-modal .option { padding: 9px 14px; }
.wizard-modal .wstep__nav { margin-top: 14px; }
.wizard-modal .quote__table th, .wizard-modal .quote__table td { padding: 10px 12px; }
.wizard-modal .quote__table strong { font-size: 18px; }
.wizard-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: all .3s;
}
.wizard-modal__close:hover, .wizard-modal__close:focus { background: var(--mint); color: var(--ink); }
/* The page behind the dialog stays put while the wizard is open. */
body.modal-open { overflow: hidden; }

@media (min-width: 720px) {
    .wizard-modal .wrap { padding: 30px 36px 26px; }
    .wizard-modal .wizard { padding: 22px 28px 24px; }
}

/* ── FAQ (4a: mint band, white cards in a 760px column) ─────────────────── */
.faq { background: var(--mint); }
.faq__item {
    max-width: 760px;
    background: var(--white);
    border: 1px solid var(--mint-line);
    border-radius: 10px;
    padding: 16px 22px;
    margin: 0 auto 12px;
}
.faq__item summary { font-weight: 700; font-size: 16px; color: var(--head-ink); cursor: pointer; }
.faq__item p { margin: .8em 0 0; color: var(--muted); font-size: 15px; }

/* ── Security page ──────────────────────────────────────────────────────── */
.security h1 { margin-bottom: .4em; }
.security h2 { margin-top: 1.6em; }
.certs { list-style: none; margin: 1.2em 0 1em; padding: 0; display: grid; gap: 12px; }
.cert {
    position: relative;
    padding: 14px 18px 14px 44px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.cert::before {
    content: '✓';
    position: absolute;
    left: 18px;
    top: 14px;
    color: var(--green);
    font-weight: 700;
}
.cert strong { display: block; }
.cert span { color: var(--muted); font-size: 15px; }
.detail__list--page { margin-bottom: 1.6em; }
.security__cta { margin-top: 2em; }
.faq__more { margin: .6em 0 0; }
.faq__more a { font-weight: 700; font-size: 14px; }

@media (min-width: 780px) {
    .certs { grid-template-columns: repeat(2, 1fr); }
}

/* ── Legal pages (/terms, /privacy) ─────────────────────────────────────── */
.legal h1 { margin-bottom: .2em; }
.legal__revised { color: var(--muted-soft); font-size: 13px; margin-bottom: 2.4em; }
.legal h2 { margin-top: 1.8em; }
.legal h3 { margin-top: 1.5em; }
.legal h4 { margin: 1.4em 0 .4em; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--head-ink); }
.legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.75; }
.legal ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.legal li { margin-bottom: .7em; }

/* ── Notices ────────────────────────────────────────────────────────────── */
.notice {
    background: var(--mint);
    border: 1px solid var(--green);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin: 20px 0;
    color: var(--muted);
}
.notice--warm { background: rgba(233, 170, 64, .10); border-color: var(--accent); }
.notice h3 { font-size: 18px; margin-bottom: .4em; color: var(--ink); }
.notice p { margin: 0; }

/* ── Thanks ─────────────────────────────────────────────────────────────── */
.thanks h2 { margin-top: 1.6em; }

/* ── Depth pass ─────────────────────────────────────────────────────────── */
/* One soft medium shadow (--shadow-md) on every visible SURFACE — cards,
   accordions, callouts, the wizard, option rows — rather than a blanket
   div/img selector, which would box invisible layout wrappers and transparent
   logos. The hero is deliberately excluded (its own footage + scrim carry it);
   this block sits last, so it wins over the lighter shadows declared above. */
.door__hit,
.compare-list li,
.price,
.detail,
.faq__item,
.stat,
.wizard,
.notice,
.chat-guide,
.quote__table,
.cert,
.option {
    box-shadow: var(--shadow-md);
}

/* Buttons: same elevation; the primary keeps its green glow layered on top,
   ghost buttons are text-like and cast nothing, and the hero CTA keeps its
   own footage-tuned shadow (the hero is excluded from this pass). */
.btn { box-shadow: var(--shadow-md); }
.btn--primary { box-shadow: 0 3px 5px 0 rgba(30, 201, 95, 0.35), var(--shadow-md); }
.btn--ghost { box-shadow: none; }
.btn--hero { box-shadow: 0 3px 5px rgba(22, 28, 45, .35); }

/* Images outside the hero — the three "How it works" illustrations.
   drop-shadow hugs the drawn shapes instead of boxing the whole SVG. */
.how-art .art { filter: drop-shadow(0 6px 10px rgba(60, 72, 88, 0.16)); }

/* The modal's inner wizard card stays flat — the dialog itself casts the
   (much larger) elevation there. */
.wizard-modal .wizard { box-shadow: none; }

/* Section bands get the same elevation. A band's bottom shadow would be
   painted over by the next band's opaque background, so the descending
   z-ladder keeps every band above the one that follows — that's what makes
   the shadow visible along each seam. (The hero stays excluded; it's the
   first section, which is why the ladder starts at 2.) */
main > section:not(.hero) {
    position: relative;
    box-shadow: var(--shadow-md);
}
main > section:nth-of-type(2) { z-index: 7; }
main > section:nth-of-type(3) { z-index: 6; }
main > section:nth-of-type(4) { z-index: 5; }
main > section:nth-of-type(5) { z-index: 4; }
main > section:nth-of-type(6) { z-index: 3; }
main > section:nth-of-type(7) { z-index: 2; }
main > section:nth-of-type(8) { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}