/* /incl/css/marketing.css — public (non-/pro) pages only; hdr.inc.php loads it when not under /pro */

/* ── Marketing pages (homepage, /hoa, HOA spokes and guides) ─────────────────
   ftm-* = shared visual building blocks for public pages. Kept here (not in
   hoa.css) because guide pages and the homepage don't all load hoa.css. */
.ftm-hero {
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(var(--bs-primary-rgb), .06), transparent 60%),
        radial-gradient(40rem 25rem at -10% 110%, rgba(var(--ftb-accent-rgb), .10), transparent 60%),
        var(--bs-body-bg);
}
.ftm-glow { position: relative; isolation: isolate; }
.ftm-glow::before {
    content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(var(--bs-primary-rgb), .16), rgba(var(--bs-primary-rgb), .05) 60%, transparent);
}
@media (max-width: 991.98px) { .ftm-glow::before { inset: -12% 0; } } /* no sideways scroll on phones */
/* Tool-coloured hero: same colour as the tile that links here (ftm_render_hero 'icon' / ftm_hoa_tools()).
   A soft blotch top-right, and the glow behind the mock in the same hue. */
.ftm-hero-blue   { --ftm-hero-tint: 29, 78, 216; }
.ftm-hero-green  { --ftm-hero-tint: 21, 128, 61; }
.ftm-hero-amber  { --ftm-hero-tint: 217, 119, 6; }
.ftm-hero-rose   { --ftm-hero-tint: 225, 29, 72; }
.ftm-hero-purple { --ftm-hero-tint: 124, 58, 237; }
.ftm-hero-teal   { --ftm-hero-tint: 13, 148, 136; }
.ftm-hero-slate  { --ftm-hero-tint: 71, 85, 105; }
.ftm-hero-sky    { --ftm-hero-tint: 2, 132, 199; }
.ftm-hero:is(.ftm-hero-blue, .ftm-hero-green, .ftm-hero-amber, .ftm-hero-rose, .ftm-hero-purple, .ftm-hero-teal, .ftm-hero-slate, .ftm-hero-sky) {
    background:
        radial-gradient(36rem 22rem at 92% 8%, rgba(var(--ftm-hero-tint), .13), transparent 65%),
        radial-gradient(40rem 25rem at -10% 110%, rgba(var(--ftb-accent-rgb), .10), transparent 60%),
        var(--bs-body-bg);
}
.ftm-hero:is(.ftm-hero-blue, .ftm-hero-green, .ftm-hero-amber, .ftm-hero-rose, .ftm-hero-purple, .ftm-hero-teal, .ftm-hero-slate, .ftm-hero-sky) .ftm-glow::before {
    background: radial-gradient(closest-side, rgba(var(--ftm-hero-tint), .16), rgba(var(--ftm-hero-tint), .05) 60%, transparent);
}
.ftm-title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
}
.ftm-h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.ftm-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-primary); }
.ftm-section-soft { background: #f6f8fb; }
.ftm-section-dark { background: #0f172a; color: #e2e8f0; }
.ftm-section-dark .text-muted { color: #94a3b8 !important; }

/* Tinted icon badge */
.ftm-icon {
    width: 2.75rem; height: 2.75rem; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.ftm-icon-sm { width: 2rem; height: 2rem; font-size: .95rem; border-radius: .55rem; }
/* Header size: scales with .ftm-title, sits beside it */
.ftm-icon-lg { width: clamp(2.75rem, 4.2vw, 3.6rem); height: clamp(2.75rem, 4.2vw, 3.6rem); font-size: clamp(1.35rem, 2.1vw, 1.8rem); border-radius: 1rem; }
/* Hero icon + title row: centre the icon on the title's first line (line box = 1.1 × title size) */
.ftm-title-row > .ftm-icon-lg { margin-top: calc((1.1 * clamp(2rem, 4.2vw, 3.4rem) - clamp(2.75rem, 4.2vw, 3.6rem)) / 2); }
.ftm-tint-blue   { background: #dbeafe; color: #1d4ed8; }
.ftm-tint-green  { background: #dcfce7; color: #15803d; }
.ftm-tint-amber  { background: #fef3c7; color: #b45309; }
.ftm-tint-rose   { background: #ffe4e6; color: #be123c; }
.ftm-tint-purple { background: #ede9fe; color: #6d28d9; }
.ftm-tint-teal   { background: #ccfbf1; color: #0f766e; }
.ftm-tint-slate  { background: #f1f5f9; color: #475569; }
.ftm-tint-sky    { background: #e0f2fe; color: #0369a1; }

/* Clickable tool tile with hover lift */
.ftm-tile {
    display: flex; gap: .9rem; align-items: flex-start; height: 100%;
    padding: 1.1rem 1.15rem; border: 1px solid rgba(15, 23, 42, .08); border-radius: 1rem;
    background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ftm-tile:hover, .ftm-tile:focus-visible {
    transform: translateY(-3px); border-color: rgba(var(--bs-primary-rgb), .35);
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .10); color: var(--bs-body-color);
}
.ftm-tile:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
/* Link indicator: arrow on the right that slides and turns primary on hover */
.ftm-tile::after {
    content: "\f138"; font-family: bootstrap-icons; line-height: 1; flex-shrink: 0;
    margin-left: auto; align-self: center; color: var(--bs-secondary-color); opacity: .6;
    transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.ftm-tile:hover::after, .ftm-tile:focus-visible::after { color: var(--bs-primary); opacity: 1; transform: translateX(3px); }
.ftm-tile-title { font-weight: 700; display: block; line-height: 1.25; }
.ftm-tile-text { font-size: .875rem; color: var(--bs-secondary-color); display: block; margin-top: .2rem; }
.ftm-tile[aria-current="page"] { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
/* Legal pages: document list beside the text, divided by a vertical rule on desktop */
@media (min-width: 992px) {
    .ftm-legal-aside { border-left: 1px solid var(--bs-border-color); padding-left: 1.5rem; }
}
.ftm-plan-tag {
    font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .1rem .4rem; border-radius: .35rem; background: #f1f5f9; color: #475569; margin-left: .35rem;
    vertical-align: .1rem; white-space: nowrap;
}
.ftm-plan-tag-free { background: #dcfce7; color: #15803d; }

/* Feature card (bigger, static) */
.ftm-card {
    height: 100%; padding: 1.5rem; border-radius: 1.1rem; background: var(--bs-body-bg);
    border: 1px solid rgba(15, 23, 42, .07); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
/* Icon on the left, content on the right (same as .ftm-tile). Centered and flex cards keep their own layout. */
.ftm-card:not(.text-center):not(.d-flex):not(.d-md-flex):has(> .ftm-icon:first-child) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-content: start;
}
.ftm-card:not(.text-center):not(.d-flex):not(.d-md-flex):has(> .ftm-icon:first-child) > .ftm-icon {
    grid-column: 1; grid-row: 1 / span 20; margin-bottom: 0 !important;
}
.ftm-card:not(.text-center):not(.d-flex):not(.d-md-flex):has(> .ftm-icon:first-child) > :not(.ftm-icon) {
    grid-column: 2;
}

/* Card hover lift (/pricing plans, /blog cards; replaces inline onmouseover handlers) */
.ftm-hover-lift { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
a:hover > .ftm-hover-lift, a:focus-visible > .ftm-hover-lift { transform: translateY(-3px); }
.ftm-hover-lift:hover, .ftm-hover-lift:focus-within, a:focus-visible > .ftm-hover-lift {
    box-shadow: var(--bs-box-shadow-lg) !important; --bs-border-opacity: 1;
}

/* Big-number proof points */
.ftm-stat { text-align: center; padding: 1.25rem .75rem; }
.ftm-stat-num { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--bs-primary); }
.ftm-stat-label { font-size: .875rem; color: var(--bs-secondary-color); margin-top: .4rem; }

/* Check / cross lists for before-and-after comparisons */
.ftm-list { list-style: none; padding: 0; margin: 0; }
.ftm-list li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; }
.ftm-list li + li { border-top: 1px dashed rgba(15, 23, 42, .08); }
.ftm-before { background: #fff7f7; border-color: #fde2e2; }
.ftm-after  { background: #f3fbf6; border-color: #cdeedb; }

/* Product mock-up in a soft browser frame (static sample UI, aria-hidden) */
.ftm-mock {
    max-width: 32rem; background: var(--bs-body-bg); border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem; overflow: hidden; text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 48px rgba(15, 23, 42, .14);
}
.ftm-mock-bar { display: flex; gap: .35rem; align-items: center; padding: .6rem .9rem; background: #f1f5f9; border-bottom: 1px solid rgba(15, 23, 42, .06); }
.ftm-mock-bar span { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(15, 23, 42, .15); }
.ftm-mock-bar em { font-style: normal; font-size: .72rem; color: #64748b; margin-left: .5rem; }
.ftm-mock-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.ftm-mock-progress { height: .5rem; }
.ftm-mock-bubble { border-radius: .85rem; padding: .6rem .8rem; font-size: .82rem; }
.ftm-mock-in  { background: #f1f5f9; border-top-left-radius: .2rem; }
.ftm-mock-out { background: #dbeafe; border-top-right-radius: .2rem; margin-left: 2.5rem; }
/* Phone outline variant (ftm_render_mock 'phone'): bezel, status bar with the Example tag, app screen */
/* In the hero the section clips it (overflow-hidden) below its bottom border, as if it goes lower */
.ftm-phone {
    max-width: 19.5rem; border: .55rem solid #000; border-radius: 2.4rem; background: #eef1f5; font-size: .9rem;
    box-shadow: 0 0 0 2px #3f4650, 0 22px 48px rgba(15, 23, 42, .18);   /* metal rim + drop shadow */
}
.ftm-hero .ftm-phone { margin-bottom: -9rem; }
@media (min-width: 992px) { .ftm-phone.ftm-tilt-r { transform: rotate(4deg); } .ftm-phone.ftm-tilt-l { transform: rotate(-4deg); } } /* phone: clearly intentional tilt */
.ftm-phone .ftm-mock-bar span { width: .6rem; height: .6rem; background: #1c1f24; box-shadow: inset 0 0 0 2px #2b3038; } /* camera */
.ftm-phone-app { background: rgb(var(--ftm-hero-tint, var(--bs-primary-rgb))); }
.ftm-phone .ftm-mock-bar { gap: .3rem; padding: .25rem .9rem .35rem; background: #000; border-bottom: 0; color: #fff; font-size: .66rem; }
.ftm-phone .ftm-mock-bar time { font-weight: 600; }
.ftm-phone-label { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.ftm-mock-pill { font-size: .68rem; border-radius: 2rem; padding: .1rem .5rem; background: #ede9fe; color: #6d28d9; white-space: nowrap; }

/* Home page (plan 4K) */
.ftm-title-md { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 600; }
.ftm-hero-mascot { position: absolute; left: -.5rem; bottom: -2.25rem; width: 13/clear0px; height: auto; z-index: 2; }
.ftm-mock-lg .small, .ftm-mock-wrap-lg .ftm-mock .small { font-size: .9375rem; }
.ftm-mock-wrap-lg .ftm-mock { max-width: 40rem; }
/* Tool groups: one label row + 3 tile rows shared by all columns, so tile bottoms line up */
.ftm-tool-groups { display: grid; gap: 1rem; }
@media (min-width: 992px) {
    .ftm-tool-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(3, 1fr); grid-auto-flow: column; column-gap: 1.5rem; }
}
.ftm-tile-accent { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }
/* Feature row: whole row is the link, no underline until hover */
.ftm-row-link {
    display: flex; gap: .9rem; align-items: flex-start; height: 100%; min-height: 44px; padding: .65rem;
    border-radius: .85rem; color: var(--bs-body-color); text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.ftm-row-link:hover, .ftm-row-link:focus-visible { background: var(--bs-body-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .06); }
.ftm-row-link:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.ftm-row-title { display: block; font-weight: 600; }
.ftm-row-link:hover .ftm-row-title { color: var(--bs-primary); text-decoration: underline; text-underline-offset: 3px; }
.ftm-row-arrow { opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.ftm-row-link:hover .ftm-row-arrow, .ftm-row-link:focus-visible .ftm-row-arrow { opacity: 1; transform: translateX(3px); }
/* Link chip (44px tap target) */
.ftm-chip {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .4rem .95rem;
    border: 1px solid var(--bs-border-color); border-radius: 2rem; background: var(--bs-body-bg);
    color: var(--bs-body-color); font-size: .875rem; font-weight: 500; text-decoration: none;
}
.ftm-chip:hover, .ftm-chip:focus-visible { border-color: var(--bs-primary); color: var(--bs-primary); }
@media (prefers-reduced-motion: reduce) { .ftm-row-link, .ftm-row-arrow { transition: none; } }
@media (min-width: 992px) {
    .ftm-tilt-r { transform: rotate(1.25deg); }
    .ftm-tilt-l { transform: rotate(-1.25deg); }
}

/* Board-history timeline (records outlive the board) */
.ftm-timeline { position: relative; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ftm-timeline-step { position: relative; padding: 1.1rem; border-radius: 1rem; background: var(--bs-body-bg); border: 1px solid rgba(15, 23, 42, .08); }
.ftm-timeline-year { font-weight: 800; font-size: 1.15rem; color: var(--bs-primary); }
.ftm-timeline-step:not(:last-child)::after {
    content: '\2192'; position: absolute; right: -.85rem; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-weight: 700; z-index: 1;
}
@media (max-width: 575.98px) { .ftm-timeline-step:not(:last-child)::after { content: none; } }

/* Pricing mini cards */
.ftm-price { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.ftm-price small { font-size: .85rem; font-weight: 500; color: var(--bs-secondary-color); }
.ftm-plan-featured { border: 2px solid var(--bs-primary) !important; }

/* Numbered steps */
.ftm-step-num {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary); color: #fff; font-weight: 700;
}


@media (prefers-reduced-motion: reduce) {
    .ftm-tile, .ftm-tile:hover, .ftm-tile::after, .ftm-tile:hover::after { transition: none; transform: none; }
    .ftm-tilt-r, .ftm-tilt-l { transform: none; }
}

/* HOA guide signup CTA (hoa_guide_cta.inc.php): mobile bottom bar + spacing after the inline box */
@media (max-width: 991.98px) {
    #hoa-cta-inline + h2 { margin-top: 1.5rem !important; }
    #hoa-cta-bar {
        padding: 0 max(1rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        box-shadow: 0 -.5rem 1.25rem rgba(0, 0, 0, .25);   /* Bootstrap .shadow casts downward, invisible at the bottom edge */
        animation: hoa-cta-bar-in .4s ease-out;            /* replays each time d-none is removed */
    }
    body.hoa-cta-bar-on { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}
@keyframes hoa-cta-bar-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #hoa-cta-bar { animation: none; } }
/* HOA guide PDF bar (hoa_guide_render_pdf_bar): slides down each time d-none is removed */
#hoa-pdf-bar { animation: hoa-pdf-bar-in .35s ease-out; }
@keyframes hoa-pdf-bar-in { from { transform: translateY(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #hoa-pdf-bar { animation: none; } }
/* Small fixed-height chart wrapper (reserve study calculator results; Chart.js fills it) */
.ftm-chart-sm { height: 200px; }
/* Right-hand sidebar beside a main card (guide PDF page): divider only when side by side */
@media (min-width: 992px) { .ftm-aside-divider { border-left: var(--bs-border-width) solid var(--bs-border-color); padding-left: 3rem; } }