/* static/css/pages/homepage.css
   Marketing front page — rebuilt for self-onboarding, Aug 2026.
   Tokens come from static/css/themes/colors.css (--hoa-*). */

/* ---------------------------------------------------------------
   Shared section rhythm
   --------------------------------------------------------------- */
/* Applied on the same element as .container — use longhand so the
   container's horizontal padding survives. A `padding: x 0` shorthand
   here zeroes it and lets .row negative margins overflow the viewport. */
.section-block { padding-top: 4.5rem; padding-bottom: 4.5rem; }

.section-head { margin-bottom: 2.5rem; }
.section-head h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--hoa-forest-green-dark);
    margin-bottom: .5rem;
}
.section-sub {
    color: #5A6570;
    font-size: 1.05rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------
   Buttons

   The design system already defines .btn-hoa-forest-green and
   .btn-hoa-terracotta in components/buttons.css — the front page uses those
   directly rather than redefining them, so the marketing site and the app
   stay visually identical. Only the two outline variants are new, and they
   are named to avoid any collision with the existing .btn-outline-* set.
   Both set background-image explicitly: the design system paints gradients
   via background-image, and a rule that only sets background-color would
   let one bleed through.
   --------------------------------------------------------------- */
.btn-outline-forest {
    background-image: none;
    background-color: transparent;
    border: 1px solid var(--hoa-forest-green);
    color: var(--hoa-forest-green-dark);
    font-weight: 600;
    box-shadow: none;
}
.btn-outline-forest:hover,
.btn-outline-forest:focus {
    background-image: none;
    background-color: var(--hoa-forest-green-light);
    border-color: var(--hoa-forest-green);
    color: var(--hoa-forest-green-dark);
}

.btn-outline-terracotta {
    background-image: none;
    background-color: transparent;
    border: 1px solid var(--hoa-terracotta);
    color: var(--hoa-terracotta-dark);
    font-weight: 600;
    box-shadow: none;
}
.btn-outline-terracotta:hover,
.btn-outline-terracotta:focus {
    background-image: none;
    background-color: var(--hoa-terracotta-light);
    border-color: var(--hoa-terracotta);
    color: var(--hoa-terracotta-dark);
}

/* The design system sets .btn { height: 36px; white-space: nowrap }, which is
   right for app toolbars and too tight for a marketing hero. Let the page's
   own CTAs breathe and wrap. */
.hero-ctas .btn,
.fork-card .btn,
.price-card .btn,
.dynamite-section .btn,
.start-section .btn {
    height: auto;
    min-height: 44px;
    padding-top: .6rem;
    padding-bottom: .6rem;
    white-space: normal;
}

/* base/layout.css sets body { display: flex }. Flex items default to
   min-width: auto and refuse to shrink below their content, which pushes the
   page wider than the viewport on small screens. */
body > section,
body > nav,
body > footer { width: 100%; min-width: 0; }

/* ---------------------------------------------------------------
   01 · Hero
   --------------------------------------------------------------- */
.hero-section {
    background: linear-gradient(160deg, var(--hoa-slate-blue-light) 0%, var(--hoa-forest-green-light) 100%);
    padding: 5.5rem 0 4.5rem;
    border-bottom: 1px solid rgba(44, 122, 56, .18);
}
.hero-title {
    font-size: clamp(2rem, 4.6vw, 3.15rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: #16261B;
    text-wrap: balance;
    margin-bottom: 1.1rem;
}
.hero-sub {
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    color: #3F4B52;
    max-width: 56ch;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.hero-ctas {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-ctas .btn { min-width: 15rem; }
.hero-note {
    margin-top: 1.35rem;
    font-size: .92rem;
    color: #5F6C74;
}

/* ---------------------------------------------------------------
   02 · Proof strip
   --------------------------------------------------------------- */
.proof-section { margin-top: -2.25rem; margin-bottom: 1rem; position: relative; z-index: 2; }
.proof-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: #E3E8EC;
    border: 1px solid #E3E8EC;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(22, 38, 27, .07);
}
.proof-item { background: #fff; padding: 1.4rem 1.25rem; }
.proof-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--hoa-forest-green);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.proof-label {
    font-size: .88rem;
    color: #5A6570;
    margin-top: .35rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   03 · The fork
   --------------------------------------------------------------- */
.fork-card {
    background: #fff;
    border: 1px solid #E3E8EC;
    border-radius: 10px;
    padding: 1.9rem 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.fork-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
}
.fork-card--fiscal::before { background: var(--hoa-forest-green); }
.fork-card--dynamite::before { background: var(--hoa-terracotta); }

.fork-tag {
    display: inline-block;
    align-self: flex-start;   /* flex parent would stretch it full width */
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border-radius: 999px;
    margin-bottom: .9rem;
}
.fork-tag--fiscal { background: var(--hoa-forest-green-light); color: var(--hoa-forest-green-dark); }
.fork-tag--dynamite { background: var(--hoa-terracotta-light); color: var(--hoa-terracotta-dark); }

.fork-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: .65rem;
    color: #16261B;
}
.fork-lede { color: #4B565E; font-size: .98rem; line-height: 1.6; }
.fork-list { list-style: none; padding: 0; margin: 1.1rem 0 1.6rem; flex-grow: 1; }
.fork-list li {
    position: relative;
    padding-left: 1.55rem;
    margin-bottom: .55rem;
    font-size: .96rem;
    color: #3F4B52;
}
.fork-list li::before {
    content: "\F26E"; /* bi-check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: -.05rem;
    font-size: .95rem;
}
.fork-card--fiscal .fork-list li::before { color: var(--hoa-forest-green); }
.fork-card--dynamite .fork-list li::before { color: var(--hoa-terracotta); }

.fork-bridge {
    text-align: center;
    margin: 2rem auto 0;
    max-width: 62ch;
    color: #5A6570;
    font-size: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E3E8EC;
}

/* ---------------------------------------------------------------
   04 · How it works
   --------------------------------------------------------------- */
.how-section { background: var(--hoa-slate-blue-light); padding: 4.5rem 0; }
.step-card {
    background: #fff;
    border: 1px solid #E3E8EC;
    border-radius: 10px;
    padding: 1.6rem 1.4rem;
}
.step-num {
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    background: var(--hoa-forest-green);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem;
    margin-bottom: .9rem;
}
.step-card h3 {
    font-size: 1.06rem;
    font-weight: 700;
    margin-bottom: .45rem;
    color: #16261B;
}
.step-card p { font-size: .93rem; color: #5A6570; margin: 0; line-height: 1.55; }

.reassure {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #E3E8EC;
    border-left: 4px solid var(--hoa-forest-green);
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    margin-top: 1.75rem;
    font-size: .97rem;
    color: #4B565E;
    line-height: 1.6;
}
.reassure i { color: var(--hoa-forest-green); font-size: 1.35rem; flex: none; margin-top: .1rem; }

/* ---------------------------------------------------------------
   05 · Features
   --------------------------------------------------------------- */
.feature-group {
    background: #fff;
    border: 1px solid #E3E8EC;
    border-radius: 10px;
    padding: 1.7rem 1.6rem;
}
.feature-group-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.feature-group-head i { font-size: 1.4rem; }
.feature-group-head h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.feature-group--money .feature-group-head i,
.feature-group--money .feature-group-head h3 { color: var(--hoa-forest-green); }
.feature-group--gov .feature-group-head i,
.feature-group--gov .feature-group-head h3 { color: var(--hoa-slate-blue); }
.feature-group--txn .feature-group-head i,
.feature-group--txn .feature-group-head h3 { color: var(--hoa-deep-purple); }

.feature-group ul { list-style: none; padding: 0; margin: 0; }
.feature-group li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: .6rem;
    font-size: .95rem;
    color: #4B565E;
    line-height: 1.5;
}
.feature-group li::before {
    content: "";
    position: absolute;
    left: 0; top: .68rem;
    width: 6px; height: 1px;
    background: #BFC9D0;
}

/* ---------------------------------------------------------------
   06 · Pricing
   --------------------------------------------------------------- */
.pricing-section {
    background: #FAFBFC;
    padding: 4.5rem 0;
    border-top: 1px solid #E9EDF0;
    border-bottom: 1px solid #E9EDF0;
}

.price-card {
    background: #fff;
    border: 1px solid #E3E8EC;
    border-radius: 10px;
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    position: relative;
}
.price-card--featured {
    border-color: var(--hoa-forest-green);
    box-shadow: 0 3px 18px rgba(44, 122, 56, .12);
}
.price-card--managed { border-color: rgba(230, 126, 35, .45); }

.price-flag {
    position: absolute;
    top: -.72rem; left: 50%;
    transform: translateX(-50%);
    background: var(--hoa-forest-green);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .25rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
}
.price-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hoa-forest-green-dark);
    letter-spacing: -.015em;
}
.price-card--managed .price-name { color: var(--hoa-terracotta-dark); }
.price-units { font-size: .88rem; color: #78848C; margin-top: .15rem; }

/* Three bands, one grid — the whole price sheet reads as one ladder */
.price-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem 1rem;
    margin: 1.1rem 0 1.3rem;
    padding: .9rem 0;
    border-top: 1px solid #E3E8EC;
    border-bottom: 1px solid #E3E8EC;
    align-items: baseline;
}
.price-grid span { font-size: .88rem; color: #5A6570; }
.price-grid b {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hoa-forest-green-dark);
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.price-card--managed .price-grid b { color: var(--hoa-terracotta-dark); }

.price-list { list-style: none; padding: 0; margin: 0 0 1.5rem; flex-grow: 1; }
.price-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .5rem;
    font-size: .93rem;
    color: #4B565E;
    line-height: 1.5;
}
.price-list li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute; left: 0; top: -.08rem;
    color: var(--hoa-forest-green);
    font-size: .88rem;
}
.price-card--managed .price-list li::before { color: var(--hoa-terracotta); }
.price-list li.lead-in {
    font-weight: 600;
    color: #16261B;
    padding-left: 0;
    margin-bottom: .65rem;
}
.price-list li.lead-in::before { content: ""; }

.price-everyplan {
    margin-top: 2.75rem;
    background: #fff;
    border: 1px solid #E3E8EC;
    border-radius: 10px;
    padding: 1.75rem 1.7rem;
}
.ep-item { display: flex; gap: .85rem; align-items: flex-start; }
.ep-amount {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hoa-forest-green);
    font-variant-numeric: tabular-nums;
    flex: none;
    min-width: 2.4rem;
    line-height: 1.25;
}
.ep-text { font-size: .9rem; color: #5A6570; line-height: 1.5; }
.ep-text strong { color: #16261B; }

.price-dynamite-note {
    text-align: center;
    margin: 2rem auto 0;
    max-width: 60ch;
    color: #5A6570;
    font-size: 1rem;
}

/* ---------------------------------------------------------------
   07 · Dynamite
   --------------------------------------------------------------- */
.dynamite-section {
    background: var(--hoa-terracotta-light);
    padding: 4.75rem 0;
    border-top: 1px solid rgba(230, 126, 35, .22);
    border-bottom: 1px solid rgba(230, 126, 35, .22);
}
.dynamite-title {
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--hoa-terracotta-dark);
    margin-bottom: 1rem;
}
.dynamite-lede { color: #52463C; font-size: 1.02rem; line-height: 1.65; margin-bottom: 1rem; }
.dyn-card {
    background: #fff;
    border: 1px solid rgba(230, 126, 35, .3);
    border-radius: 10px;
    padding: 1.35rem 1.3rem;
}
.dyn-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hoa-terracotta-dark);
    margin-bottom: .4rem;
}
.dyn-card p { font-size: .92rem; color: #5A6570; margin: 0; line-height: 1.55; }

/* ---------------------------------------------------------------
   08 · FAQ
   --------------------------------------------------------------- */
.faq-accordion .accordion-item {
    border: 1px solid #E3E8EC;
    border-radius: 8px !important;
    margin-bottom: .5rem;
    overflow: hidden;
}
.faq-accordion .accordion-button {
    font-weight: 600;
    color: #16261B;
    background: #fff;
    font-size: 1.02rem;
}
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--hoa-forest-green-light);
    color: var(--hoa-forest-green-dark);
    box-shadow: none;
}
.faq-accordion .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(44, 122, 56, .2);
}
.faq-accordion .accordion-body { color: #4B565E; font-size: .97rem; line-height: 1.65; }

/* ---------------------------------------------------------------
   09 · Free tools
   --------------------------------------------------------------- */
.tool-tile {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #E3E8EC;
    border-radius: 10px;
    padding: 1.5rem 1.4rem;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.tool-tile:hover {
    border-color: var(--hoa-forest-green);
    transform: translateY(-2px);
}
.tool-tile h3 { font-size: 1.08rem; font-weight: 700; color: var(--hoa-forest-green-dark); margin-bottom: .45rem; }
.tool-tile p { font-size: .93rem; color: #5A6570; margin-bottom: .9rem; line-height: 1.55; }
.tool-go { font-size: .88rem; font-weight: 600; color: var(--hoa-forest-green); }
.tools-note {
    text-align: center;
    margin: 1.75rem auto 0;
    max-width: 62ch;
    font-size: .93rem;
    color: #78848C;
}

/* ---------------------------------------------------------------
   10 · Start / contact
   --------------------------------------------------------------- */
.start-section { background: var(--hoa-slate-blue-light); padding: 4.5rem 0 5rem; }
.contact-card { border: 1px solid #E3E8EC; border-radius: 10px; }
.contact-card .card-body { padding: 2rem; }
.form-foot { font-size: .85rem; color: #78848C; text-align: center; margin: .9rem 0 0; }

/* ---------------------------------------------------------------
   Motion / responsive
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tool-tile { transition: none; }
    .tool-tile:hover { transform: none; }
}

@media (max-width: 575.98px) {
    .hero-section { padding: 3.5rem 0 3rem; }
    .hero-ctas .btn { min-width: 100%; }
    .proof-section { margin-top: 1.5rem; }
    .section-block { padding-top: 3rem; padding-bottom: 3rem; }
    .contact-card .card-body { padding: 1.35rem; }
}