/* ==========================================================================
   Enju Ya landing — FinPath-inspired green theme (owner-directed, 2026-07-10).
   Scoped to the marketing landing page ONLY (loaded by layouts/landing.php);
   the rest of the app keeps the Warm Archive system. Copy is unchanged — this
   sheet only restyles layout, colour, imagery slots and controls to match the
   reference. Image slots (.fp-imgph) are intentional placeholders: drop real
   Enju Ya family photographs in via `background-image` to finish the look.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Enju Ya brand: green + orange on white (60/30/10). */
    --fp-dark: #17504b;         /* deep teal — hero / footer / bands */
    --fp-dark-2: #0e3733;       /* darker teal — footer */
    --fp-dark-card: #2b615a;    /* card on teal */
    --fp-primary: #17504b;      /* THE green — the 30%: bands, primary buttons */
    --fp-primary-2: #0e3733;    /* teal hover */
    --fp-hl: #b55a38;           /* THE orange — the 10%: highlight words, accents */
    --fp-ink: #17504b;          /* headings / ink = teal */
    --fp-body: #5f6b64;         /* muted body */
    /* 60/30/10 (owner direction 2026-08-25): white surfaces, green structure, orange accents.
       The cream family is retired. Neutrals keep a faint green cast so white never reads clinical. */
    --fp-light: #f2f5f3;        /* alternating section band — still reads white */
    --fp-card: #ffffff;         /* cards are pure white */
    --fp-cream: #ffffff;        /* what sits ON the green: buttons, text */
    --fp-line: #e3e9e5;         /* neutral hairline */
    --fp-line-dark: rgba(255, 255, 255, .18);
    --fp-radius: 18px;
    --fp-radius-sm: 10px;
    --fp-shadow: 0 12px 34px rgba(20, 55, 50, .12);
    --fp-shadow-sm: 0 4px 14px rgba(20, 55, 50, .07);
    --fp-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

.fp-body {
    margin: 0;
    font-family: var(--fp-font);
    color: var(--fp-ink);
    background: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.fp-body h1, .fp-body h2, .fp-body h3, .fp-body h4 {
    font-family: var(--fp-font);
    color: var(--fp-ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
}
.fp-body p { margin: 0 0 1rem; }
.fp-body a:not(.fp-btn) { color: var(--fp-primary-2); }
.fp-hl { color: var(--fp-hl); }
.fp-muted { color: var(--fp-body); }
.fp-center { text-align: center; }

.fp-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* --- image placeholders ------------------------------------------------- */
.fp-imgph {
    position: relative; overflow: hidden;
    background: linear-gradient(155deg, #2a635d 0%, #123f3a 78%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(243, 236, 217, .55);
}
.fp-imgph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 68% 30%, rgba(181, 90, 56, .28), transparent 55%); }
.fp-imgph svg { width: 58px; height: 58px; opacity: .55; position: relative; z-index: 1; }
.fp-imgph-label { position: absolute; z-index: 1; bottom: 14px; left: 0; right: 0; text-align: center; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 236, 217, .5); }
.fp-imgph--light { background: linear-gradient(155deg, #eef2ef 0%, #dde5e0 100%); color: rgba(23, 80, 75, .75); }
.fp-imgph--light::after { background: radial-gradient(circle at 70% 25%, rgba(30, 77, 70, .1), transparent 55%); }
.fp-imgph--light .fp-imgph-label { color: rgba(30, 77, 70, .7); }
/* When a real photo is set (inline background-image), fill the slot and hide
   the placeholder icon, label and accent glow. */
.fp-imgph.has-photo { background-size: cover; background-position: center; }
.fp-imgph.has-photo svg,
.fp-imgph.has-photo .fp-imgph-label { display: none; }
.fp-imgph.has-photo::after { display: none; }

/* --- buttons ------------------------------------------------------------ */
.fp-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
    padding: .8rem 1.55rem; border-radius: var(--fp-radius-sm);
    border: 1.5px solid transparent; white-space: nowrap;
    transition: transform .1s, background .15s, color .15s, border-color .15s;
}
.fp-btn:active { transform: translateY(1px); }
.fp-btn--primary { background: var(--fp-primary); color: var(--fp-cream); }
.fp-btn--primary:hover { background: var(--fp-primary-2); color: var(--fp-cream); }
.fp-btn--cream { background: var(--fp-cream); color: var(--fp-dark); }
.fp-btn--cream:hover { background: #fff; color: var(--fp-dark); }
.fp-btn--dark { background: var(--fp-dark); color: var(--fp-cream); }
.fp-btn--dark:hover { background: var(--fp-dark-2); color: var(--fp-cream); }
.fp-btn--ghost { background: transparent; border-color: var(--fp-line); color: var(--fp-ink); }
.fp-btn--ghost:hover { border-color: var(--fp-primary); color: var(--fp-primary-2); }
.fp-btn--ghost-dark { background: rgba(243, 236, 217, .06); border-color: rgba(243, 236, 217, .5); color: var(--fp-cream); }
.fp-btn--ghost-dark:hover { border-color: var(--fp-cream); background: rgba(243, 236, 217, .14); color: var(--fp-cream); }
.fp-btn--sm { padding: .58rem 1.1rem; font-size: .92rem; }

/* --- nav ---------------------------------------------------------------- */
.fp-nav {
    position: sticky; top: 0; z-index: 30;
    background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--fp-line);
}
.fp-nav .fp-container { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: 76px; }
.fp-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.3rem; color: var(--fp-ink); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.fp-brand::before { content: ''; flex: none; width: 38px; height: 38px; background: url('/branding/enju-ya-app-icon.svg') center / contain no-repeat; }
.fp-nav-links { display: flex; align-items: center; gap: 1.7rem; }
.fp-nav-links a { color: var(--fp-ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.fp-nav-links a:hover { color: var(--fp-primary-2); }
.fp-nav-actions { display: flex; align-items: center; gap: .8rem; }
.fp-nav .fp-nav-search { width: 38px; height: 38px; flex: none; border-radius: 50%; border: none; background: transparent; color: var(--fp-ink); display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.fp-nav .fp-nav-search:hover { background: var(--fp-light); }
.fp-nav-search svg { width: 19px; height: 19px; }
/* On desktop the wrapper is transparent: its children (links + actions) lay out as
   direct flex items of the bar, exactly as before. The hamburger only appears < 980px. */
.fp-nav-collapse { display: contents; }
.fp-nav-toggle { display: none; width: 44px; height: 44px; flex: none; margin-right: -10px; padding: 12px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.fp-nav-toggle:hover { background: var(--fp-light); }
.fp-nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--fp-ink); transition: transform .22s ease, opacity .18s ease; }
.fp-nav-toggle span + span { margin-top: 5px; }
.fp-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fp-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- section scaffolding ------------------------------------------------ */
.fp-section { padding: 5rem 0; }
.fp-section--light { background: var(--fp-light); }
.fp-eyebrow { display: block; text-align: center; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--fp-primary); margin-bottom: .9rem; }
.fp-body .fp-h2 { text-align: center; font-size: clamp(1.9rem, 4vw, 2.7rem); max-width: 720px; margin: 0 auto .8rem; }
.fp-sub { text-align: center; color: var(--fp-body); max-width: 580px; margin: 0 auto 3rem; }

/* --- hero (full-bleed) -------------------------------------------------- */
.fp-hero { background: var(--fp-dark); overflow: hidden; }
.fp-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 640px; }
.fp-hero-copy { color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 5rem clamp(1.5rem, 5vw, 4rem) 5rem max(1.5rem, calc((100vw - 1200px) / 2 + 1.25rem)); }
.fp-hero-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .7); margin-bottom: 1rem; }
.fp-hero-copy h1 { color: #fff; font-size: clamp(2.3rem, 4.8vw, 3.6rem); margin-bottom: 1.1rem; }
.fp-hero-copy h1 .fp-hl { color: var(--fp-hl); }
.fp-hero-lead { color: rgba(255, 255, 255, .85); font-size: 1.12rem; max-width: 480px; }
/* The brand name and its meaning are picked out in the terracotta accent.
   Small trailing space so the italic "House of" never visually collides with
   the next word — the slant otherwise eats the plain space. */
.fp-hero-lead em { font-style: italic; color: var(--fp-hl); font-weight: 600; padding-right: .12em; }
.fp-hero-lead .fp-hl { font-weight: 700; }
.fp-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.fp-hero-note { margin-top: 1.6rem; margin-bottom: 0; color: rgba(255, 255, 255, .65); font-size: .92rem; }
/* The mockup sits on the flat brand green — no photograph behind it. It is an <img>, not a
   background, so it scales with the column instead of being cropped by `cover`, and the shadow
   baked into its alpha does the lifting the dark ground used to be asked to do. */
.fp-hero-media { display: flex; align-items: center; justify-content: center;
    padding: 2.5rem clamp(.75rem, 1.6vw, 1.5rem); min-height: 0; }
/* The PNG carries ~90px of transparent margin for its shadow to fall into, so the visible window is
   about 83% of the file's width — the max-width is set against the image, not the window. */
.fp-hero-shot { width: 100%; max-width: 780px; height: auto; display: block; }

/* --- prose (problem / answer) ------------------------------------------- */
.fp-prose { max-width: 660px; margin: 0 auto; text-align: center; }
.fp-prose p { font-size: 1.12rem; color: var(--fp-body); margin: 0 auto 1.15rem; }
.fp-prose em { font-style: italic; color: var(--fp-ink); }
.fp-prose .fp-kicker { font-weight: 700; color: var(--fp-ink); font-size: 1.3rem; }

/* --- story sections (editorial: centred heading + two-column body) ------ */
.fp-story-grid { display: grid; grid-template-columns: .82fr 1fr; gap: 3.75rem; align-items: start; margin-top: 2.75rem; }
.fp-story-grid--rev .fp-story-media { order: 2; }
.fp-story-media { position: sticky; top: 104px; }
.fp-story-photo { height: 400px; border-radius: 22px; }
.fp-story-body > * { margin: 0; }
.fp-story-body > * + * { margin-top: 1.4rem; }
.fp-story-lead { font-size: 1.4rem; line-height: 1.5; color: var(--fp-ink); font-weight: 500; letter-spacing: -.01em; }
.fp-story-lead em { font-style: italic; }
.fp-story-note { font-size: 1.08rem; color: var(--fp-body); }
.fp-story-p { font-size: 1.08rem; color: var(--fp-body); }
.fp-story-p em, .fp-pullquote em { font-style: italic; color: var(--fp-ink); }
.fp-pullquote {
    position: relative; padding: 1.9rem 1.9rem 1.9rem 2.6rem;
    background: var(--fp-card); border: 1px solid var(--fp-line); border-left: 4px solid var(--fp-primary);
    border-radius: 16px; box-shadow: var(--fp-shadow-sm);
    font-size: 1.24rem; line-height: 1.5; font-weight: 500; color: var(--fp-ink);
}
.fp-pullquote::before { content: '\201C'; position: absolute; left: .65rem; top: .4rem; font-family: Georgia, 'Times New Roman', serif; font-size: 3.4rem; line-height: 1; color: var(--fp-primary); opacity: .3; }
.fp-kicker-callout {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1.5rem 1.7rem; background: var(--fp-dark); color: #fff;
    border-radius: 16px; font-size: 1.2rem; font-weight: 700; line-height: 1.35;
}
.fp-kicker-callout em { font-style: italic; color: var(--fp-hl); }
.fp-kicker-icon { flex: none; width: 46px; height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .12); color: var(--fp-hl); display: inline-flex; align-items: center; justify-content: center; }
.fp-kicker-icon svg { width: 24px; height: 24px; }

/* --- feature cards (with image slot, FinPath "plans" style) ------------- */
.fp-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fp-card { background: var(--fp-card); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-shadow-sm); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.fp-card:hover { transform: translateY(-4px); box-shadow: var(--fp-shadow); }
.fp-card-body { padding: 2.1rem 2.1rem 1.6rem; flex: 1; }
.fp-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(23, 138, 67, .12); color: var(--fp-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.fp-icon svg { width: 26px; height: 26px; }
.fp-card h3 { font-size: 1.22rem; margin-bottom: .55rem; }
.fp-card p { color: var(--fp-body); margin: 0; }
.fp-card em { font-style: italic; color: var(--fp-ink); }
.fp-card .fp-imgph { height: 180px; margin: 0 1.1rem 1.1rem; border-radius: var(--fp-radius-sm); }

/* --- benefits ----------------------------------------------------------- */
.fp-benefits { max-width: 780px; margin: 0 auto; display: grid; gap: 1rem; }
.fp-benefit { display: flex; gap: 1rem; align-items: flex-start; background: var(--fp-card); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); padding: 1.4rem 1.6rem; box-shadow: var(--fp-shadow-sm); }
.fp-benefit .fp-check { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(23, 138, 67, .12); color: var(--fp-primary); display: inline-flex; align-items: center; justify-content: center; margin-top: .1rem; }
.fp-benefit .fp-check svg { width: 18px; height: 18px; }
.fp-benefit strong { display: block; font-size: 1.05rem; margin-bottom: .15rem; }
.fp-benefit span { color: var(--fp-body); }

/* --- how it works (connected step flow) --------------------------------- */
.fp-flow {
    background: var(--fp-card); border: 1px solid var(--fp-line); border-radius: 22px;
    box-shadow: var(--fp-shadow-sm); padding: 2.25rem 1.25rem;
    display: flex; align-items: stretch; gap: .25rem; margin-top: 2.75rem;
}
.fp-flow-step { flex: 1 1 0; min-width: 0; padding: .75rem 1.35rem; }
.fp-flow-badge { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-primary); background: rgba(23, 138, 67, .1); padding: .28rem .65rem; border-radius: 999px; margin-bottom: 1rem; }
.fp-flow-step h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.fp-flow-step p { font-size: .95rem; line-height: 1.5; color: var(--fp-body); margin: 0; }
.fp-flow-arrow { flex: none; display: flex; align-items: center; justify-content: center; color: #c4cdc0; }
.fp-flow-arrow svg { width: 26px; height: 26px; }
@media (max-width: 900px) {
    .fp-flow { flex-wrap: wrap; gap: 1rem 0; }
    .fp-flow-step { flex: 1 1 46%; }
    .fp-flow-arrow { display: none; }
}
@media (max-width: 560px) { .fp-flow-step { flex: 1 1 100%; } }

/* --- testimonials (dark band) ------------------------------------------- */
.fp-testi { background: var(--fp-dark); color: #fff; }
.fp-testi .fp-h2 { color: #fff; }
.fp-testi .fp-h2 .fp-hl { color: var(--fp-hl); }
.fp-testi-stars { text-align: center; margin-bottom: 2.75rem; }
.fp-testi-top { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: stretch; }
.fp-testi-media { position: relative; }
.fp-testi-media .fp-imgph { height: 100%; min-height: 420px; border-radius: 22px; }
.fp-testi-overlay { position: absolute; left: 22px; bottom: 22px; max-width: 330px; margin: 0; background: #fff; color: var(--fp-ink); border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: var(--fp-shadow); }
.fp-testi-overlay blockquote { margin: .5rem 0 .7rem; font-size: .98rem; line-height: 1.45; color: var(--fp-ink); }
.fp-testi-overlay cite { font-style: normal; font-weight: 700; font-size: .9rem; color: var(--fp-ink); }
.fp-stars, .fp-stars-lg { color: #f5c451; letter-spacing: .12em; }
.fp-stars { font-size: 1rem; margin-bottom: .8rem; }
.fp-stars-lg { font-size: 1.5rem; }
.fp-quotes { display: grid; gap: 1.5rem; align-content: center; }
.fp-quote { background: var(--fp-dark-card); border: 1px solid var(--fp-line-dark); border-radius: var(--fp-radius); padding: 2rem; }
.fp-quote blockquote { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.5; color: #fff; }
.fp-quote cite { font-style: normal; font-size: .9rem; color: rgba(255, 255, 255, .78); }

/* --- FAQ ---------------------------------------------------------------- */
.fp-faq { max-width: 960px; margin: 0 auto; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.fp-faq details { background: var(--fp-card); border: 1px solid var(--fp-line); border-radius: var(--fp-radius-sm); padding: .2rem 1.3rem; box-shadow: var(--fp-shadow-sm); }
.fp-faq summary { cursor: pointer; font-weight: 600; padding: 1.05rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary::after { content: '+'; color: var(--fp-primary); font-size: 1.4rem; line-height: 1; }
.fp-faq details[open] summary::after { content: '\2013'; }
.fp-faq details[open] summary { border-bottom: 1px solid var(--fp-line); }
.fp-faq .fp-answer { padding: 1.05rem 0; color: var(--fp-body); }
.fp-faq .fp-answer em { font-style: italic; color: var(--fp-ink); }

/* --- closing CTA -------------------------------------------------------- */
.fp-cta { padding: 1.5rem; }
.fp-cta-inner { max-width: 1240px; margin: 0 auto; background: var(--fp-dark); border-radius: 28px; padding: 4.5rem 2rem; text-align: center; color: #fff; }
.fp-cta-inner h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .8rem; }
.fp-cta-inner h2 .fp-hl { color: var(--fp-hl); }
.fp-cta-inner p { color: rgba(255, 255, 255, .85); max-width: 560px; margin: 0 auto 1.8rem; }
.fp-cta-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.fp-cta-note { margin-top: 1.5rem; margin-bottom: 0; color: rgba(255, 255, 255, .65); font-size: .92rem; }

/* --- footer ------------------------------------------------------------- */
.fp-footer { background: var(--fp-dark-2); color: rgba(255, 255, 255, .72); padding: 3rem 0 2rem; text-align: center; }
/* Footer brand sits on the dark teal band; the app-icon tile carries its own
   rounded teal background, so only the wordmark colour needs flipping to cream. */
.fp-footer .fp-brand { color: var(--fp-cream); justify-content: center; margin-bottom: .75rem; }
.fp-footer p { margin: 0 auto .5rem; max-width: 560px; }
.fp-footer em { font-style: italic; }
.fp-footer .fp-fine { color: rgba(255, 255, 255, .5); font-size: .88rem; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 980px) {
    /* Cramped inline nav → a hamburger that drops a full-width menu below the bar. */
    .fp-nav-toggle { display: block; }
    .fp-nav .fp-nav-search { display: none; }         /* the "Questions" link covers it in the menu */
    .fp-nav-collapse {
        display: block;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--fp-line); box-shadow: var(--fp-shadow);
        padding: .5rem 1.25rem 1.25rem;
        max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
        transition: max-height .25s ease, opacity .2s ease, visibility .25s ease;
    }
    .fp-nav-collapse.is-open { max-height: calc(100vh - 76px); overflow-y: auto; opacity: 1; visibility: visible; }
    .fp-nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .fp-nav-links a { padding: .9rem .25rem; font-size: 1.02rem; border-bottom: 1px solid var(--fp-line); }
    .fp-nav-actions { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1.1rem; }
    /* .fp-btn is a flex row (inline-flex); center its label with justify-content, not text-align. */
    .fp-nav-actions .fp-btn { width: 100%; justify-content: center; padding: .85rem 1.1rem; font-size: 1rem; }
}
@media (max-width: 860px) {
    .fp-hero-inner { grid-template-columns: 1fr; }
    /* Stacked, the mockup simply sits above the copy at full width — no cropping to reason about
       now that it is an <img> rather than a background. */
    .fp-hero-media { order: -1; padding: 2.25rem 1.5rem 0; }
    .fp-hero-copy { padding: 2.75rem 1.5rem; }
    .fp-section { padding: 3.5rem 0; }
    .fp-story-grid { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 1.75rem; }
    .fp-story-grid--rev .fp-story-media { order: 0; }
    .fp-story-media { position: static; }
    .fp-story-photo { height: 260px; }
    .fp-testi-top { grid-template-columns: 1fr; gap: 1.5rem; }
    .fp-testi-media .fp-imgph { height: auto; min-height: 300px; }
    .fp-faq { grid-template-columns: 1fr; }
    .fp-cta-inner { padding: 3rem 1.5rem; }
}

/* --- hero sub-line + trust badge (M18 positioning) ----------------------- */
.fp-hero-sub { color: rgba(255, 255, 255, .62); font-size: .98rem; max-width: 480px; }
.fp-hero-sub em { font-style: italic; color: var(--fp-hl); font-weight: 600; padding-right: .12em; }
.fp-hero-sub .fp-hl { font-weight: 700; }
/* Hero vertical rhythm.
   EVERY selector here is scoped with .fp-hero-copy on purpose. The base reset is
   `.fp-body p { margin: 0 0 1rem }` — a class PLUS an element, which outranks any single class — so
   a bare `.fp-hero-lead { margin-bottom: … }` is silently discarded and all three paragraphs collapse
   to the same flat 16px. That is what made the gap under the buttons look wrong; .fp-hero-note above
   has been losing the same fight since it was written. Two classes beat one class + one element. */
.fp-hero-copy .fp-hero-lead { margin: 0 0 .6rem; }        /* the sub-line belongs WITH the lead */
.fp-hero-copy .fp-hero-sub  { margin: 0 0 2rem; }         /* then a real break before the buttons */

/* The badge is the first privacy promise a visitor meets, so it reads as a statement, not fine print.
   align-self is what makes it a PILL: .fp-hero-copy is a column flexbox, whose default align-items is
   stretch, and a stretched item ignores inline-flex and spans the full column. Its margin is measured
   from the pill's border, so the padding inside it is not part of the gap. */
.fp-hero-copy .fp-trust { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem;
    margin: 1.6rem 0 0; padding: .55rem 1rem; max-width: 100%;
    border: 1px solid rgba(243, 236, 217, .28); border-radius: 999px;
    background: rgba(243, 236, 217, .07); color: rgba(255, 255, 255, .82); line-height: 1.4; }

/* --- pricing ------------------------------------------------------------- */
/* Scoped for the same reason as the hero block above: `.fp-body p` is a class plus an element and
   outranks a lone class, so an unscoped `margin: 0 auto` here lost BOTH the auto-centering (the lead
   sat flush left under a centred heading) and the 3rem gap above the cards. */
.fp-body .fp-section-lead { text-align: center; max-width: 640px; margin: 0 auto 3rem; color: var(--fp-body); font-size: 1.05rem; }
/* Two cards side by side, stacking on phones. auto-fit rather than a fixed 2-col so a third plan
   would drop in without touching this rule. */
.fp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
    max-width: 880px; margin: 0 auto; align-items: start; }
.fp-plan { position: relative; background: var(--fp-card); border: 1px solid var(--fp-line);
    border-radius: var(--fp-radius); padding: 2rem 1.75rem; box-shadow: var(--fp-shadow-sm);
    display: flex; flex-direction: column; gap: .75rem; }
/* The paid card carries the highlight colour rather than a bigger size — a scale transform would
   clip the badge and shift the grid on hover. */
.fp-plan--featured { border-color: var(--fp-hl); box-shadow: var(--fp-shadow); }
.fp-plan-badge { position: absolute; top: -.75rem; left: 1.75rem; background: var(--fp-hl);
    color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .3rem .7rem; border-radius: 999px; }
/* The card is a flex column with its own gap, so its children must contribute no margin of their
   own — otherwise `.fp-body p`'s 1rem is added to every gap and the card breathes unevenly. Written
   as `.fp-plan p` (class + element) so it matches the reset's specificity and wins on order. */
.fp-plan p { margin: 0; }
.fp-plan-name { margin: 0; font-size: 1.25rem; color: var(--fp-ink); }
.fp-plan-price { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--fp-ink); letter-spacing: -.02em; }
.fp-plan-note { color: var(--fp-body); font-size: .9rem; }
.fp-plan-list { list-style: none; margin: .75rem 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.fp-plan-list li { display: flex; gap: .65rem; align-items: flex-start; color: var(--fp-body); font-size: .96rem; }
.fp-plan-list .fp-check { flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(23, 138, 67, .12); color: var(--fp-primary);
    display: inline-flex; align-items: center; justify-content: center; margin-top: .1rem; }
.fp-plan-list .fp-check svg { width: 13px; height: 13px; }
.fp-plan .fp-btn { margin-top: auto; justify-content: center; }

/* --- data rights guarantee ---------------------------------------------- */
.fp-rights { display: flex; gap: 1.25rem; align-items: flex-start; max-width: 880px;
    margin: 3rem auto 0; padding: 1.75rem; border: 1px solid var(--fp-line);
    border-left: 4px solid var(--fp-hl); border-radius: var(--fp-radius); background: var(--fp-card); }
.fp-rights-icon { flex: none; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(181, 90, 56, .12); color: var(--fp-hl);
    display: inline-flex; align-items: center; justify-content: center; }
.fp-rights-icon svg { width: 22px; height: 22px; }
.fp-rights h3 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--fp-ink); }
.fp-rights p { margin: 0 0 .6rem; color: var(--fp-body); }
.fp-rights p:last-child { margin-bottom: 0; }
.fp-rights-fine { font-size: .9rem; }

@media (max-width: 640px) {
    .fp-rights { flex-direction: column; gap: .9rem; padding: 1.4rem; }
    .fp-plan-price { font-size: 2.2rem; }
}

/* --- product screenshots (M18) ------------------------------------------ */
/* The frame and shadow are baked into the PNG, so the page just needs to size it. Height is set
   from the intrinsic ratio via width/height attributes on the <img>, which also stops the section
   from jumping as the image loads. */
.fp-shot { margin: 3rem auto 0; max-width: 1100px; text-align: center; }
.fp-shot img { width: 100%; height: auto; display: block; }
.fp-shot figcaption { margin-top: .9rem; color: var(--fp-body); font-size: .92rem; max-width: 640px;
    margin-left: auto; margin-right: auto; }

/* The solution section drops its two-column grid for a single centred column above the shot —
   a wide chart cannot survive a portrait crop, so it gets the full container instead. */
.fp-story-body--wide { max-width: 780px; margin: 0 auto; text-align: center; }
.fp-story-body--wide .fp-pullquote { text-align: left; }