/* ==========================================================================
   AiAppraisal — Marketing Site
   Public pages a visitor sees before signing up.
   Extends style.css; same palette (navy #1B3A5C / blue #2E75B6 / orange #E8913A).
   Mobile-first, matching the base design system.
   ========================================================================== */

/* --- Hero -------------------------------------------------------------
   The logo is a light-field lockup: a pale blue-white background (#FAFEFF)
   with decorative circuit art, and a wordmark in brand red and navy. On the
   original navy gradient it rendered as a grubby white box with a hard edge,
   and the dark wordmark fought the dark background.

   So the hero is light, opening on the logo's own field color. The image
   blends into the page instead of sitting in a rectangle, and the wordmark
   keeps its intended contrast. These rules override style.css.
   ---------------------------------------------------------------------- */
.hero {
    background: linear-gradient(180deg, #FAFEFF 0%, #EDF3F9 62%, #E4EDF6 100%);
    color: #1B3A5C;
    padding: 48px 0 56px;
    border-bottom: 1px solid #dbe5f0;
}

.hero-logo {
    width: auto;
    max-width: 480px;
    height: auto;
    margin: 0 auto 24px;
    display: block;
}

.hero-title {
    color: #1B3A5C;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    color: #4a5c70;
    opacity: 1;
}

.hero-note {
    color: #7c8b9c;
    opacity: 1;
}

/* style.css turns outline buttons white for the old dark hero — undo that,
   the hero is light now and a white button would be invisible. */
.hero .btn-outline {
    border-color: #1B3A5C;
    color: #1B3A5C;
    background: transparent;
}

.hero .btn-outline:hover {
    background: #1B3A5C;
    color: #fff;
}

/* Give the two CTAs some presence — they are the only thing on this page
   that matters. */
.hero-actions .btn-lg {
    padding: 15px 34px;
    border-radius: 10px;
}

.hero-actions .btn-accent {
    box-shadow: 0 4px 14px rgba(232, 145, 58, 0.35);
}

.hero-actions .btn-accent:hover {
    box-shadow: 0 6px 18px rgba(232, 145, 58, 0.45);
    transform: translateY(-1px);
}

/* --- Navbar brand lockup --- */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.navbar-mark {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* --- Feature icons ---
   Line icons in brand blue. The emoji these replaced rendered as cartoon
   glyphs at inconsistent weights, which read as cheap next to a navy/red
   professional mark. */
.feature-icon {
    font-size: 0;
    margin-bottom: 16px;
    color: #2E75B6;
    display: flex;
    justify-content: center;
}

.feature-icon svg {
    width: 34px;
    height: 34px;
}

/* --- Shared section furniture --- */
.container-narrow {
    max-width: 760px;
}

.page-section-alt {
    background: #eef2f7;
}

.section-title {
    color: #1B3A5C;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 12px;
}

.section-lead {
    text-align: center;
    color: #666;
    max-width: 640px;
    margin: 0 auto 32px;
}

.section-cta {
    text-align: center;
    margin-top: 32px;
}

.page-header {
    background: linear-gradient(135deg, #1B3A5C 0%, #2E75B6 100%);
    color: #fff;
    padding: 48px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 1.9rem;
    margin-bottom: 10px;
}

.page-header p {
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto;
}

.hero-note {
    margin-top: 20px;
    font-size: 0.85rem;
    opacity: 0.75;
}

.plain-list {
    padding-left: 20px;
    color: #555;
}

.plain-list li {
    margin-bottom: 8px;
}

/* --- Numbered steps --- */
.steps {
    list-style: none;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

.step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}

.step:last-child {
    border-bottom: none;
}

.step-num {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2E75B6;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step h3 {
    color: #1B3A5C;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.step p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.step p:last-child {
    margin-bottom: 0;
}

/* --- Use cases --- */
.usecase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.usecase {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    border-left: 4px solid #E8913A;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.usecase h3 {
    color: #1B3A5C;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.usecase p {
    color: #666;
    font-size: 0.93rem;
}

/* --- Honesty / limitations box --- */
.honesty-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px 24px;
    max-width: 860px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.honesty-box h2 {
    color: #1B3A5C;
    font-size: 1.4rem;
    margin-bottom: 20px;
    text-align: center;
}

.honesty-box > p {
    color: #666;
    margin-bottom: 16px;
}

.honesty-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.honesty-cols h3 {
    font-size: 1rem;
    margin-bottom: 12px;
}

.honesty-yes {
    color: #2e7d4f;
}

.honesty-no {
    color: #b3402f;
}

.honesty-cols ul {
    padding-left: 20px;
    color: #555;
    font-size: 0.93rem;
}

.honesty-cols li {
    margin-bottom: 8px;
}

.honesty-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #666;
    font-size: 0.93rem;
}

/* --- Closing CTA band --- */
.cta-band {
    background: #1B3A5C;
    color: #fff;
    padding: 52px 0;
    text-align: center;
}

.cta-band h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.cta-band p {
    opacity: 0.85;
    margin-bottom: 24px;
}

.cta-note {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 0.88rem;
}

.cta-band a:not(.btn) {
    color: #E8913A;
}

.cta-band a:not(.btn):hover {
    color: #fff;
}

/* --- Pricing --- */
.pricing-card {
    background: #fff;
    max-width: 480px;
    margin: 0 auto;
    padding: 36px 28px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(27, 58, 92, 0.12);
    text-align: center;
    border-top: 5px solid #E8913A;
}

.pricing-card h2 {
    color: #1B3A5C;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.pricing-amount {
    font-size: 3.4rem;
    font-weight: 700;
    color: #1B3A5C;
    line-height: 1;
}

.pricing-currency {
    font-size: 1.6rem;
    vertical-align: super;
    font-weight: 600;
}

.pricing-cents {
    font-size: 1.6rem;
}

.pricing-per {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.pricing-features {
    list-style: none;
    text-align: left;
    padding: 0;
    margin-bottom: 28px;
}

.pricing-features li {
    padding: 9px 0 9px 28px;
    position: relative;
    font-size: 0.92rem;
    color: #444;
    border-bottom: 1px solid #f0f3f7;
}

.pricing-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #2e7d4f;
    font-weight: 700;
}

.pricing-secure {
    margin-top: 14px;
    font-size: 0.8rem;
    color: #999;
}

.pricing-compare,
.pricing-faq {
    margin-top: 56px;
}

.compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    width: 100%;
    /* Five columns — below this the cells crush, so the wrapper scrolls
       horizontally on narrow screens rather than wrapping every label. */
    min-width: 860px;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-size: 0.88rem;
}

.compare-table th,
.compare-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
}

.compare-table thead th {
    background: #1B3A5C;
    color: #fff;
    font-size: 0.85rem;
}

.compare-table tbody td:first-child {
    color: #666;
}

/* Highlight our column consistently down the whole table, including the row
   where the honest answer is "No". Moving the highlight to whichever column
   wins each row reads as cherry-picking. */
.compare-mine {
    background: #fdf4e9;
    font-weight: 600;
    color: #1B3A5C;
}

/* Needs the thead th prefix to outrank `.compare-table thead th`. */
.compare-table thead th.compare-mine-head {
    background: #E8913A;
    color: #fff;
}

.compare-table thead th:first-child {
    width: 22%;
}

.compare-note {
    margin-top: 20px;
    color: #666;
    font-size: 0.92rem;
}

.compare-footnote {
    margin-top: 14px;
    color: #97a3b1;
    font-size: 0.78rem;
    line-height: 1.6;
}

/* --- FAQ --- */
.faq-group-title {
    color: #1B3A5C;
    font-size: 1.25rem;
    margin: 40px 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid #E8913A;
}

.faq-item {
    background: #fff;
    padding: 22px 24px;
    border-radius: 10px;
    margin-top: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.faq-item h3 {
    color: #1B3A5C;
    font-size: 1.02rem;
    margin-bottom: 8px;
}

.faq-item p {
    color: #555;
    font-size: 0.94rem;
    margin-bottom: 10px;
}

.faq-item p:last-child {
    margin-bottom: 0;
}

.faq-still {
    margin-top: 40px;
    padding: 24px;
    background: #fdf4e9;
    border-radius: 10px;
    border-left: 4px solid #E8913A;
}

.faq-still h3 {
    color: #1B3A5C;
    margin-bottom: 8px;
}

.faq-still p {
    color: #555;
    font-size: 0.94rem;
}

/* --- Methodology list --- */
.method-list {
    max-width: 760px;
    margin: 0 auto;
}

.method-item {
    background: #fff;
    padding: 22px 24px;
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.method-item h3 {
    color: #1B3A5C;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.method-item p {
    color: #555;
    font-size: 0.94rem;
}

/* --- Sample report walkthrough --- */
.sample-download {
    background: #fdf4e9;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}

.sample-download h2 {
    color: #1B3A5C;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.sample-download p {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.94rem;
}

/* Page previews of the sample PDF — the strongest thing on this page, so
   they get real size rather than thumbnail treatment. */
.sample-pages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 940px;
    margin: 40px auto 0;
}

.sample-page {
    margin: 0;
}

.sample-page img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #dde4ec;
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(27, 58, 92, 0.12);
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.sample-page a:hover img {
    box-shadow: 0 6px 22px rgba(27, 58, 92, 0.22);
}

.sample-page figcaption {
    text-align: center;
    font-size: 0.82rem;
    color: #8593a3;
    margin-top: 8px;
}

.sample-note {
    max-width: 760px;
    margin: 32px auto 0;
    font-size: 0.87rem;
    color: #7c8b9c;
    text-align: center;
    line-height: 1.6;
}

.report-sections {
    max-width: 760px;
    margin: 0 auto;
}

.report-section {
    background: #fff;
    padding: 24px;
    border-radius: 10px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #2E75B6;
}

.report-section h2 {
    color: #1B3A5C;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.report-section p {
    color: #555;
    font-size: 0.94rem;
    margin-bottom: 10px;
}

.report-why {
    background: #f7f9fc;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 0.89rem;
    color: #666;
    margin-bottom: 0;
}

/* --- Contact --- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.contact-form {
    background: #fff;
    padding: 28px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.contact-aside h3 {
    color: #1B3A5C;
    font-size: 1rem;
    margin-bottom: 6px;
    margin-top: 20px;
}

.contact-aside h3:first-child {
    margin-top: 0;
}

.contact-aside p {
    color: #666;
    font-size: 0.9rem;
}

/* Honeypot — reachable by form-filling bots, invisible to people.
   Positioned offscreen rather than display:none, which some bots detect. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Legal documents --- */
.legal-doc h2 {
    color: #1B3A5C;
    font-size: 1.15rem;
    margin: 32px 0 12px;
}

.legal-doc p,
.legal-doc li {
    color: #555;
    font-size: 0.94rem;
    margin-bottom: 12px;
}

.legal-doc ul {
    padding-left: 22px;
    margin-bottom: 16px;
}

.legal-intro {
    background: #fff;
    padding: 20px 22px;
    border-radius: 10px;
    border-left: 4px solid #2E75B6;
}

.legal-emphasis {
    font-weight: 600;
    color: #1B3A5C;
}

/* --- Footer (multi-column) --- */
.footer-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 24px;
}

.footer-col h4 {
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.footer-col a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 0;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 18px;
}

.footer-bottom p {
    margin-bottom: 8px;
}

.footer-disclaimer {
    font-size: 0.78rem;
    opacity: 0.75;
    max-width: 720px;
    line-height: 1.5;
}

.footer-disclaimer a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

/* --- Marketing responsive --- */
@media (min-width: 768px) {
    .page-header h1 {
        font-size: 2.4rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .page-section {
        padding: 64px 0;
    }

    .usecase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .honesty-cols {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .contact-layout {
        grid-template-columns: 1.4fr 1fr;
        gap: 40px;
    }

    .footer-cols {
        grid-template-columns: repeat(3, 1fr);
    }

    .cta-band h2 {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .usecase-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}