/* ─────────────────────────────────────────────────────────────────────────────
   landing.css — the public commercial landing page (LandingPage.razor).
   Scoped under .landing-root. Bilingual/RTL-safe: layout uses logical
   properties and flex/grid (which follow dir=), so Hebrew and English mirror
   correctly. Light + dark via the v4 tokens on [data-bs-theme].
   ──────────────────────────────────────────────────────────────────────────── */

.landing-root {
    --landing-green: var(--chapo-accent, #00884B);
    --landing-green-deep: #00411a;
    --landing-max: 1080px;
    /* The app's global styles keep body{overflow:hidden} (app pages scroll in
       their own containers), so the landing root is its own scroll container. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: clip;
    background: var(--chapo-bg, #fafaf8);
    color: var(--chapo-text, #1c1b18);
    font-family: 'Rubik', -apple-system, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

/* The root is a flex column scroll container. A flex item with overflow:hidden
   (the hero) has min-height:auto == 0, so once the page content is taller than
   the viewport it can collapse to nothing. Pin every section's size so they
   stack and scroll instead of shrinking. */
.landing-root > * {
    flex-shrink: 0;
}

.landing-root h1, .landing-root h2, .landing-root h3 {
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* app.css themes bare `p` and `h1–h6` globally with the APP's ink, and a rule ON
   the element beats the colour a section passes down by inheritance — so the
   hero's body copy was painted in dark app ink on the green hero (about 3.7:1,
   under AA) instead of the white the hero sets. Hand the cascade back, but only
   inside the two colour-filled bands: a blanket rule here would also out-specify
   the deliberately-muted eyebrow and legal lines and flatten the hierarchy. */
.landing-hero h1,
.landing-hero p,
.landing-download h2,
.landing-download p {
    color: inherit;
}

/* ── Top bar ── */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem clamp(1rem, 4vw, 2.5rem);
    background: color-mix(in srgb, var(--chapo-bg, #fafaf8) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--chapo-border, #e7e5df);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 1.1rem;
}

.landing-brand img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

/* The wordmark is part of the mark, not body text, so it takes the icon's own
   brand green — exactly what PageBrandV4's .chapo-pagebrand-name does inside the
   app and the native builds. --chapo-accent is the one accent token that does
   NOT shift between light and dark, so it tracks the icon in both. */
.landing-brand > span {
    color: var(--landing-green);
}

.landing-brand .landing-brand-tagline {
    /* text-2, not text-3: at the footer's ~16px this sits at 6.5:1 instead of the
       3.3:1 the lightest muted token gives. */
    color: var(--chapo-text-2, #5e5b54);
    font-weight: 500;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.landing-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 40px;
    background: none;
    border: 1px solid var(--chapo-border-strong, #d8d5cd);
    border-radius: 999px;
    color: var(--chapo-text-2, #5e5b54);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.landing-lang:hover { border-color: var(--landing-green); color: var(--chapo-text); }

.landing-link {
    color: var(--chapo-text-2, #5e5b54);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
}

.landing-link:hover { color: var(--chapo-text); }

/* ── CTAs ── */
.landing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--landing-green);
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 136, 75, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.landing-cta:hover {
    background: var(--landing-green-deep);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 136, 75, 0.4);
}

.landing-cta-small {
    font-size: 0.88rem;
    min-height: 40px;
    padding: 0.45rem 1.1rem;
    box-shadow: none;
}

/* Text links are still controls: pad them to a finger-sized hit area rather than
   the 22px their line box gives them (WCAG 2.5.8 floor is 24px; 44 is the
   platform convention on touch). */
.landing-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding-block: 0.4rem;
    color: #ffffff;
    opacity: 0.92;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.landing-cta-ghost:hover { color: #ffffff; opacity: 1; }

/* ── Hero ──
   The store-screenshot composition at page scale: a huge two-beat headline
   with the payoff on a lemon highlight, a tilted phone with the basket's gap
   lifted out of it, chain logos floating around it, hand-drawn line art behind. */
.landing-root {
    --landing-lemon: #fde68a;
    --landing-forest: #00411a;
}

.landing-hero {
    position: relative;
    background:
        radial-gradient(110% 70% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%), var(--landing-green);
    color: #ffffff;
    overflow: hidden;
}

.landing-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2.5rem) 0;
}

.landing-hero-copy {
    flex: 1 1 360px;
    padding-block-end: clamp(2.5rem, 7vw, 5.5rem);
}

.landing-hero-copy h1 {
    font-size: clamp(2.8rem, 8vw, 5.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 1.3rem;
}

.landing-root[dir="rtl"] .landing-hero-copy h1 { letter-spacing: 0; line-height: 1.08; }

/* The payoff line: its own row, on a slightly-rotated lemon block — the one
   device the reference listings use to say "this is the point". */
.landing-mark {
    display: table;
    margin-block-start: 0.12em;
    padding: 0.02em 0.3em 0.1em;
    border-radius: 0.2em;
    background: var(--landing-lemon);
    color: var(--landing-forest);
    transform: rotate(-2deg);
    box-shadow: 0 0.09em 0 rgba(0, 0, 0, 0.14);
}

.landing-hero-sub {
    font-size: clamp(1.02rem, 1.8vw, 1.2rem);
    line-height: 1.6;
    opacity: 0.94;
    max-width: 48ch;
    margin: 0 0 1.8rem;
}

.landing-hero-ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-block-end: 1.6rem;
}

/* On the green hero the primary button flips to lemon so it is the brightest
   thing on the screen, not a green-on-green pill. */
.landing-hero .landing-cta {
    background: var(--landing-lemon);
    color: var(--landing-forest);
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.landing-hero .landing-cta:hover { background: #fde68a; color: var(--landing-forest); }

.landing-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.landing-hero-stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    font-size: 0.9rem;
    font-weight: 600;
}

.landing-hero-stats i { font-size: 1rem; }

.landing-hero-shot {
    position: relative;
    flex: 0 1 380px;
    align-self: flex-end;
    display: flex;
    justify-content: center;
    padding-inline: 2rem;
    /* The phone bleeds off the bottom edge of the hero, like the store frames. */
    margin-block-end: -9rem;
}

.landing-hero-device { --mk-w: min(320px, 70vw); --mk-callout-top: 24%; --mk-callout-x: -24%; }

/* Hero savings card — content projected into MarketingDeviceV4's callout. */
.landing-save-logos { display: flex; }
.landing-save-logos img {
    width: 42px; height: 42px; object-fit: contain; border-radius: 50%;
    background: #fff; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.landing-save-logos img + img { margin-inline-start: -10px; }
.landing-save-value { font-weight: 900; font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em; color: var(--landing-green); margin-block-start: 0.4rem; }
.landing-save-label { font-weight: 600; font-size: 0.86rem; color: #5e5b54; }
.landing-save-row { display: flex; justify-content: space-between; gap: 1.2rem; margin-block-start: 0.6rem; }
.landing-save-row > span { display: grid; }
.landing-save-row small { font-size: 0.72rem; font-weight: 600; color: #5e5b54; }
.landing-save-row b { font-size: 1.3rem; font-weight: 800; }
.landing-save-row .is-low { color: var(--landing-green); }
.landing-save-row s { font-size: 1.05rem; font-weight: 700; color: #c74b47; text-decoration-thickness: 2px; }

/* Floating chain logos around the phone (Wolt's round-badge treatment). */
.landing-bubble {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    animation: landingBob 7s ease-in-out infinite;
}
.landing-bubble img { width: 78%; }
.landing-bubble-1 { inset-inline-start: -0.5rem; top: 12%; }
.landing-bubble-2 { inset-inline-start: -2.2rem; top: 40%; width: 54px; height: 54px; animation-delay: -2s; }
.landing-bubble-3 { inset-inline-end: -0.5rem; top: 4%; width: 58px; height: 58px; animation-delay: -4s; }

@keyframes landingBob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

/* Hand-drawn line art (white on green, forest on lemon). */
.landing-doodle {
    position: absolute;
    z-index: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
    pointer-events: none;
}
.landing-doodle text { fill: currentColor; stroke: none; font: 800 44px 'Rubik', sans-serif; }
.landing-doodle-coin { width: 72px; inset-inline-start: 1.5%; top: 4%; transform: rotate(12deg); }
.landing-doodle-cart { width: 110px; inset-inline-start: 44%; bottom: 5%; transform: rotate(-8deg); }
.landing-doodle-spark { width: 44px; inset-inline-end: 5%; bottom: 24%; }

/* ── Chain marquee ── */
.landing-chains {
    padding: clamp(2rem, 5vw, 3rem) 0 1.5rem;
    border-block-end: 1px solid var(--chapo-border, #e7e5df);
}

/* An eyebrow, not a heading — it labels the logo wall. Reads as the same kind of
   label as .landing-loop-kicker so the page has one voice for "small label
   above content" and one for "section heading", instead of a middle weight that
   competed with the real titles. */
.landing-chains-title {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* text-3 is ~3.3:1 on the page background — fine for a 16px muted line, under
       AA at this 13px eyebrow size. text-2 keeps it quiet and legible (~6.5:1). */
    color: var(--chapo-text-2, #5e5b54);
    margin: 0 0 1.4rem;
}

.landing-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.landing-marquee-track {
    display: flex;
    width: max-content;
    animation: landingMarquee 36s linear infinite;
}

.landing-marquee-group {
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 4vw, 3rem);
    padding-inline-end: clamp(1.6rem, 4vw, 3rem);
}

.landing-chain img {
    height: 46px;
    width: auto;
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@keyframes landingMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Feature rows ──
   Each feature is a colour panel — cream, green, lemon — with the phone
   bleeding off the panel's bottom edge and the slide's one number popping out
   of it. Panels, not rows on one background: the rhythm is what makes a long
   page scannable (the store listings do the same frame to frame). */
.landing-features {
    max-width: 1160px;
    margin-inline: auto;
    width: 100%;
    padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem);
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.6rem);
}

/* Section headings carry the page: display sizing plus a short accent rule. */
.landing-section-title {
    text-align: center;
    font-size: clamp(2rem, 5.4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 0 clamp(1rem, 3vw, 1.6rem);
}

.landing-section-title::after {
    content: "";
    display: block;
    width: 54px;
    height: 5px;
    margin: 0.9rem auto 0;
    border-radius: 999px;
    background: var(--landing-green);
}

.landing-feature {
    --panel-bg: var(--chapo-surface-2, #f4f3ef);
    --panel-fg: var(--chapo-text, #1c1b18);
    --panel-muted: var(--chapo-text-2, #5e5b54);
    --chip-bg: var(--chapo-accent-soft, #daf7e3);
    --chip-fg: var(--chapo-accent-ink, #00411a);
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    padding: clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 5vw, 4rem) 0;
    border-radius: 32px;
    background: var(--panel-bg);
    color: var(--panel-fg);
    overflow: hidden;
    min-height: 460px;
}

.landing-tone-1 {
    --panel-bg: radial-gradient(110% 70% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%), var(--landing-green);
    --panel-fg: #ffffff;
    --panel-muted: rgba(255, 255, 255, 0.9);
    --chip-bg: rgba(255, 255, 255, 0.16);
    --chip-fg: #ffffff;
}

.landing-tone-2 {
    --panel-bg: #fde68a;
    --panel-fg: #00411a;
    --panel-muted: #3a2c00;
    --chip-bg: #00411a;
    --chip-fg: #fde68a;
}

.landing-feature.is-flipped { flex-direction: row-reverse; }

.landing-feature-copy {
    flex: 1 1 300px;
    align-self: center;
    padding-block-end: clamp(2rem, 5vw, 3.6rem);
}

.landing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-size: 1.4rem;
    margin-block-end: 1rem;
}

.landing-feature-copy h3 {
    color: inherit;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 0.8rem;
}

.landing-root[dir="rtl"] .landing-feature-copy h3 { letter-spacing: 0; }

.landing-feature-copy p {
    color: var(--panel-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 46ch;
    margin: 0;
}

.landing-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: 1.1rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-size: 0.85rem;
    font-weight: 700;
}

.landing-feature-shot {
    flex: 0 1 360px;
    align-self: flex-end;
    display: flex;
    justify-content: center;
    padding-inline: 2.4rem;
    /* bleed: the bottom of the phone runs off the panel edge */
    margin-block-end: -7rem;
}

.landing-feature-shot .mk-device { --mk-w: min(280px, 64vw); }

/* ── The closed loop (headline feature) ── */
.landing-loop {
    background: var(--chapo-surface-2, #f4f3ef);
    padding: clamp(2.4rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}

.landing-loop-inner {
    max-width: var(--landing-max);
    margin-inline: auto;
}

.landing-loop-kicker {
    display: block;
    text-align: center;
    color: var(--landing-green);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-block-end: 0.5rem;
}

.landing-loop-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.8rem, 2.5vw, 1.6rem);
    list-style: none;
    padding: 0;
    margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
}

.landing-loop-steps li {
    position: relative;
    background: var(--chapo-surface, #ffffff);
    border: 1px solid var(--chapo-border, #e7e5df);
    border-radius: 18px;
    padding: 1.5rem 1.3rem 1.4rem;
    text-align: center;
}

.landing-loop-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--landing-green);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-block-end: 0.7rem;
    box-shadow: 0 6px 16px rgba(0, 136, 75, 0.28);
}

/* Connector arrow between steps — points along the reading direction. */
.landing-loop-conn {
    position: absolute;
    top: 34px;
    inset-inline-start: -webkit-calc(100% - 6px);
    inset-inline-start: calc(100% - 6px);
    width: clamp(0.8rem, 2.5vw, 1.6rem);
    height: 2px;
    background: var(--chapo-border-strong, #d8d5cd);
    z-index: 1;
}

.landing-loop-conn::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--chapo-border-strong, #d8d5cd);
    border-inline-start: 2px solid var(--chapo-border-strong, #d8d5cd);
    /* Arrow head pointing toward the start (reading direction) in RTL; the LTR
       override below flips it. */
    transform: rotate(-45deg);
}

.landing-root[dir="ltr"] .landing-loop-conn::after {
    inset-inline-end: auto;
    inset-inline-start: 0;
    transform: rotate(135deg);
}

.landing-loop-steps h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.landing-loop-steps p {
    color: var(--chapo-text-2, #5e5b54);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.landing-loop-payoff {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    max-width: 60ch;
    margin: clamp(1.4rem, 4vw, 2rem) auto 0;
    padding: 0.9rem 1.2rem;
    border-radius: 14px;
    background: var(--chapo-accent-soft, #daf7e3);
    color: var(--chapo-accent-ink, #00411a);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.5;
}

.landing-loop-payoff i { font-size: 1.2rem; flex-shrink: 0; }

@media (max-width: 700px) {
    .landing-loop-steps { grid-template-columns: 1fr; }
    .landing-loop-conn { display: none; }
}

/* Loop restyle: the forest band between the colour panels and the lemon
   download band — dark, so the three steps read as one closing argument. */
.landing-loop {
    background: radial-gradient(110% 70% at 50% 0%, rgba(0, 136, 75, 0.5), transparent 72%), #00411a;
    color: #ffffff;
}
.landing-loop .landing-section-title { color: #ffffff; }
.landing-loop .landing-section-title::after { background: #fde68a; }
.landing-loop-kicker { color: #fde68a; }
.landing-loop-steps li {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 22px;
}
.landing-loop-steps h3 { color: #ffffff; }
.landing-loop-steps p { color: rgba(255, 255, 255, 0.82); }
.landing-loop-num { background: #fde68a; color: #00411a; box-shadow: none; }
.landing-loop-conn { background: rgba(255, 255, 255, 0.35); }
.landing-loop-conn::after { border-color: rgba(255, 255, 255, 0.35); }
.landing-loop-payoff { background: rgba(253, 230, 138, 0.16); color: #fde68a; }

/* ── Download band ── lemon, with the forest ink the store frames use. */
.landing-download {
    position: relative;
    overflow: hidden;
    background: #fde68a;
    color: #00411a;
    padding: clamp(2.8rem, 7vw, 4.8rem) clamp(1rem, 4vw, 2.5rem);
    text-align: center;
}

.landing-download-inner { position: relative; z-index: 1; max-width: 680px; margin-inline: auto; }

.landing-download h2 {
    font-size: clamp(2rem, 5.6vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 0.9rem;
}

.landing-download p {
    opacity: 0.92;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 1.6rem;
}

/* ── Footer ── */
.landing-footer {
    background: var(--chapo-surface, #ffffff);
    border-block-start: 1px solid var(--chapo-border, #e7e5df);
    padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2.5rem);
    margin-block-start: auto;
}

.landing-footer-inner {
    max-width: var(--landing-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
}

.landing-footer .landing-brand { font-size: 0.98rem; }

.landing-footer-links {
    display: flex;
    gap: 1.4rem;
}

.landing-footer-links a {
    color: var(--chapo-text-2, #5e5b54);
    text-decoration: none;
    font-size: 0.9rem;
}

.landing-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.landing-footer-links a:hover { color: var(--landing-green); }

.landing-footer-legal {
    /* 12px — the smallest type on the page, so it needs the stronger muted ink
       to clear 4.5:1. */
    color: var(--chapo-text-2, #5e5b54);
    font-size: 0.78rem;
    margin: 0;
}

/* Legal document links: a second, denser row under the account links. */
.landing-footer-links-legal { flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.2rem; }
.landing-footer-links-legal a { font-size: 0.82rem; min-height: 36px; }

/* The one sentence of disclaimer on the public page. */
.landing-footer-disclaimer {
    display: flex; gap: 0.5rem; align-items: flex-start;
    max-width: 62ch;
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: var(--chapo-warn-soft, #fbf3e3);
    color: var(--chapo-text-2, #5e5b54);
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: start;
}
.landing-footer-disclaimer i { color: var(--chapo-warn, #b7791f); margin-top: 2px; flex-shrink: 0; }

/* Post-deletion notice at the top of the page. */
.landing-notice {
    display: flex; gap: 0.5rem; align-items: center; justify-content: center;
    padding: 0.7rem 1rem;
    background: var(--chapo-accent-soft, #daf7e3);
    color: var(--chapo-accent-ink, #1b5e3a);
    font-size: 0.9rem;
}

/* ── Responsive ── */
@media (max-width: 820px) {
    .landing-hero-inner { flex-direction: column; }
    .landing-hero-copy { padding-block-end: 0; text-align: center; }
    .landing-hero-sub { margin-inline: auto; }
    .landing-hero-ctas { justify-content: center; }
    .landing-hero-stats { justify-content: center; }
    .landing-hero-shot { align-self: center; margin-block-end: -6rem; }
    .landing-hero-device { --mk-w: min(280px, 64vw); --mk-callout-x: -12%; }
    .landing-hero-copy h1 .landing-mark { margin-inline: auto; }
    .landing-feature { min-height: 0; padding-block-start: 2.2rem; }
    .landing-feature-copy { padding-block-end: 0; }
    .landing-feature-copy .landing-feature-chip { margin-inline: auto; }
    .landing-feature-shot { align-self: center; margin-block-end: -5rem; }
    .landing-feature,
    .landing-feature.is-flipped {
        flex-direction: column;
        text-align: center;
    }
    /* The `flex: … 300px` bases on these two are written for the desktop ROW
       layout, where the basis is a WIDTH. Stacked, the same declaration becomes
       a HEIGHT — so every copy block was padded out to 300px no matter how
       short its text, and that leftover space read as a big empty gap above
       each screenshot. Size them by their content instead. */
    .landing-feature-copy,
    .landing-feature-shot { flex: 0 0 auto; }
    .landing-feature-copy p { margin-inline: auto; }
    .landing-nav .landing-link { display: none; }
}

/* ── Dark theme ── */
.landing-root[data-bs-theme="dark"] .landing-chain img {
    background: #f5f3ee;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .landing-marquee-track { animation: none; }
    .landing-cta, .landing-cta:hover { transform: none; transition: none; }
}