/**
 * Ticket Fairy Capital landing page.
 *
 * The page is built on the shared landing system (main.css + programmatic.css
 * + seo-landing.css), so the header, container, buttons, cards and footer are
 * the ones every other landing page uses. This file adds three things:
 *
 *   1. The palette. The shared accent tokens are re-pointed at a finance
 *      palette — gold, emerald, teal — inside `.capital-lp`, so every
 *      inherited component (section labels, gradient headings, outline
 *      buttons) follows without being restyled here.
 *   2. The funding-specific components the shared system has no equivalent
 *      for: the amount range, the uses strip, the application timeline, and
 *      the lender disclaimer note.
 *   3. Reading rhythm. This page carries more prose than the pages the shared
 *      system was tuned for, so body copy is set looser and to a measure.
 *
 * Section shapes deliberately differ down the page — strip, band, timeline,
 * ruled list — so the reader is not scrolling past the same card grid four
 * times.
 */

/* The palette is deliberately restrained: emerald carries the actions and
   the accents, and gold is reserved for money — the amount, the range, the
   figures. A page about lending should not look like a party flyer. */
.capital-lp {
    --capital-gold: #d9a441;
    --capital-emerald: #24a97a;
    --capital-teal: #1f8f78;

    /* Shared tokens, re-pointed. Custom properties inherit, so every
       descendant component picks the finance palette up on its own. */
    --accent-peach: var(--capital-gold);
    --accent-violet: var(--capital-emerald);
    --accent-blue: var(--capital-teal);
    --accent-primary: var(--capital-emerald);
    --accent-secondary: var(--capital-gold);
    --gradient-brand: linear-gradient(138.91deg, #e2b45c 18%, #35b98a 62%, #1f8f78 92%);
    --capital-icon-gradient: linear-gradient(140deg, #2fbe8c 10%, #1c7f6a 95%);
}

/* The shared particle backdrop is authored in the peach/violet brand hues.
   This rotation lands the wash on gold and the particles on green, so the
   backdrop tells the same colour story as the rest of the page. */
.capital-lp .top-left-image {
    filter: hue-rotate(150deg) saturate(0.9);
}

/* The two primary buttons are SVG-backed in the shared system, so the image
   carries the brand violet and a token cannot reach it. */
.capital-lp .btn-primary,
.capital-lp .button.gradient-purple,
.capital-lp .lp-header .header-cta {
    background-image: var(--capital-icon-gradient);
    color: #f4fbf8;
    font-weight: 600;
}

.capital-lp .btn-primary:hover,
.capital-lp .button.gradient-purple:hover,
.capital-lp .lp-header .header-cta:hover {
    box-shadow: 0 6px 20px rgba(36, 169, 122, 0.3);
}

/* The header is fixed, so a jump from the nav has to clear it. */
.capital-lp main section[id] {
    scroll-margin-top: 96px;
}

/* ==========================================================================
   ICONS

   The design system's icon container: a filled rounded square with a dark
   glyph, rather than a dim outline that disappears against the surface.
   ========================================================================== */

.capital-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--capital-icon-gradient);
    color: #f4fbf8;
    font-size: 17px;
}

/* The shared feature card positions its icon absolutely and reserves the
   space above the heading for it. */
.capital-lp .seo-feature-card .capital-icon {
    position: absolute;
    top: 28px;
    left: 32px;
}

/* ==========================================================================
   HERO — the calculator leads, because "how much could I get?" is the
   first question a reader has.
   ========================================================================== */

.capital-hero-panel {
    position: relative;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* The lede sells; the detail paragraphs below it explain. Giving them their
   own weight keeps the hero readable rather than a wall. */
.capital-lp .capital-hero-detail {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 18px;
}

/* ==========================================================================
   USES STRIP — what the funding pays for, directly under the hero
   ========================================================================== */

.capital-uses-strip {
    padding: 8px 0 4px;
}

.capital-uses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    padding: 34px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    /* The shared hero centres its copy on mobile; these read as a list. */
    text-align: left;
}

.capital-use strong {
    display: block;
    margin: 16px 0 4px;
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 600;
}

.capital-use-desc {
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ==========================================================================
   FUNDING BAND — the one change of surface on the page
   ========================================================================== */

.capital-band {
    position: relative;
    padding: 84px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background:
        radial-gradient(120% 100% at 12% 0%, rgba(217, 164, 65, 0.06), transparent 58%),
        radial-gradient(90% 90% at 88% 100%, rgba(36, 169, 122, 0.09), transparent 60%);
}

.capital-highlight {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

/* The amount, drawn as a range rather than typed as a sentence. */
.capital-figure-amount {
    margin: 0;
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: clamp(2.3rem, 4.4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Spoken, not seen — carries wording the layout draws graphically. */
.capital-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.capital-figure-label {
    margin: 10px 0 0;
    color: var(--text-dim);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 14px;
    letter-spacing: 0.1px;
}

.capital-figure-track {
    position: relative;
    height: 4px;
    margin: 26px 0 32px;
    border-radius: 999px;
    background: var(--capital-icon-gradient);
}

.capital-figure-track::before,
.capital-figure-track::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-core);
    transform: translateY(-50%);
}

.capital-figure-track::before {
    left: 0;
    box-shadow: 0 0 0 3px var(--capital-gold);
}

.capital-figure-track::after {
    right: 0;
    box-shadow: 0 0 0 3px var(--capital-teal);
}

.capital-terms {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.capital-term {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.capital-term:first-child {
    padding-top: 0;
}

.capital-term:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.capital-term i {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--capital-emerald);
    font-size: 18px;
}

.capital-term strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
}

.capital-term p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
}

/* The shared calculator widget is authored in the peach/violet palette and
   reads it from `--colors-*` fallbacks, so the finance page restates them. */
.capital-lp .capd {
    margin: 0;
    max-width: none;
    background: transparent;
    border: 0;
    padding: 20px;
}

.capital-lp .capd__badge,
.capital-lp .capd__live,
.capital-lp .capd__row i {
    color: var(--capital-emerald);
}

.capital-lp .capd__badge {
    background: rgba(36, 169, 122, 0.16);
    border-color: rgba(36, 169, 122, 0.32);
}

.capital-lp .capd__live::before {
    background: var(--capital-emerald);
}

.capital-lp .capd__range {
    background-image: linear-gradient(90deg, var(--capital-gold), var(--capital-emerald));
}

.capital-lp .capd__range::-webkit-slider-thumb {
    border-color: var(--capital-emerald);
}

.capital-lp .capd__range::-moz-range-thumb {
    border-color: var(--capital-emerald);
}

.capital-lp .capd__result {
    background: linear-gradient(135deg, rgba(217, 164, 65, 0.1), rgba(36, 169, 122, 0.16));
    border-color: rgba(36, 169, 122, 0.3);
}

.capital-lp .capd__avnum {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.capital-lp .capd__cta {
    background: var(--capital-icon-gradient);
    color: #f4fbf8;
}

/* In the hero the calculator sits next to the page's own Apply button, so
   its CTA reads as the end of the estimate — a full-width action inside the
   panel — rather than a second floating pill. */
.capital-hero-panel .capd__cta {
    display: flex;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 12px;
}

/* ==========================================================================
   TIMELINE — four steps on one line, not four boxes
   ========================================================================== */

.capital-process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The rule the numbered nodes sit on. It starts and ends at a node rather
   than running off the end of the row: the nodes sit at the head of each
   column, so the last one is a column-width in from the right. */
.capital-process::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 23px;
    right: calc(25% - 47px);
    height: 1px;
    background: linear-gradient(90deg,
        rgba(217, 164, 65, 0.55),
        rgba(36, 169, 122, 0.55),
        rgba(31, 143, 120, 0.2));
}

.capital-step {
    position: relative;
    padding-right: 16px;
}

.capital-step-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--bg-core);
    box-shadow: inset 0 0 0 1px var(--border-medium);
    color: var(--capital-gold);
    font-family: "Inter Tight", Gilroy, sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.capital-step h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 1.15rem;
}

.capital-step p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ==========================================================================
   PLATFORM LIST — a ruled two-column list rather than a third card grid
   ========================================================================== */

.capital-platform-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(32px, 5vw, 72px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.capital-platform-list li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.capital-platform-list li:nth-last-child(-n+2) {
    border-bottom: 0;
}

.capital-platform-list h3 {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.capital-platform-list p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ==========================================================================
   SUPPORTING BLOCKS
   ========================================================================== */

/* The one sentence that answers the problem section, given room to land. */
.capital-answer {
    max-width: 60ch;
    margin: 44px auto 0;
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.75;
    text-align: center;
    text-wrap: balance;
}

/* Ticket Fairy is not the lender, and the page says so where the funding
   terms are stated rather than only in the small print at the bottom. */
.capital-note {
    max-width: 76ch;
    margin: 44px auto 0;
    padding: 20px 24px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.75;
    text-align: center;
}

/* A section whose only closing action is one button centres it. */
.capital-center-cta {
    justify-content: center;
    margin-top: 56px;
}

.capital-platform-cta {
    margin-top: 56px;
}

.capital-reassurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}

.capital-reassurance li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.capital-reassurance i {
    color: var(--capital-gold);
}

.capital-legal {
    max-width: 88ch;
    margin: 0 auto;
    padding: 0 24px 8px;
    color: var(--text-dim);
    font-size: 0.86rem;
    line-height: 1.8;
    text-align: center;
}

/* ==========================================================================
   READING RHYTHM

   This page carries more prose than the pages the shared system was tuned
   for — a funding explainer, a five-paragraph guide, long FAQ answers. At
   the shared 1.6–1.7 leading and an uncapped measure that reads as a wall,
   so body copy here is set looser, a little larger, and to a measure that
   stays inside the 60–75 characters a line can comfortably carry.
   ========================================================================== */

.capital-lp p,
.capital-lp .seo-feature-copy {
    line-height: 1.8;
}

.capital-lp .seo-rich-copy {
    max-width: 66ch;
}

.capital-lp .seo-rich-copy p {
    font-size: 1.05rem;
    line-height: 1.85;
}

.capital-lp .seo-rich-copy p + p {
    margin-top: 22px;
}

.capital-lp .seo-pain-card p,
.capital-lp .seo-feature-copy {
    font-size: 1.02rem;
}

/* An answer that runs the full width of its card is the hardest thing on the
   page to read; hold it to a measure even though the card is wider. */
.capital-lp .faq-item-answer p {
    max-width: 68ch;
    font-size: 1.02rem;
    line-height: 1.85;
}

.capital-lp .faq-item.open .faq-item-answer {
    padding: 0 24px 26px;
}

/* The shared accordion collapses every answer until its script opens one.
   These answers are the page's indexable funding explainer, so they stay
   readable until the script has actually taken over. */
.capital-lp .faq-list:not(.faq-enhanced) .faq-item-answer {
    max-height: none;
    padding: 0 24px 26px;
}

.capital-lp .final-cta p,
.capital-lp .programmatic-final-cta > p {
    max-width: 62ch;
    font-size: 1.05rem;
    color: var(--text-secondary);
}

/* The closing section is centred; the mid-page panel is not, so its
   paragraph stays flush with its heading. */
.capital-lp .final-cta .programmatic-final-cta > p {
    margin-left: auto;
    margin-right: auto;
}

.capital-lp .seo-trust-badges {
    margin-top: 56px;
}

/* More air between the blocks, not just inside them. */
.capital-lp .seo-section-heading {
    margin-bottom: 48px;
}

.capital-lp .seo-section-heading p {
    margin-top: 14px;
    font-size: 1.05rem;
}

.capital-lp .seo-pain-grid,
.capital-lp .feature-grid {
    gap: 24px;
}

.capital-lp .seo-pain-card {
    padding: 32px;
}

.capital-lp .feature-card {
    padding: 36px;
}

/* ==========================================================================
   RESPONSIVE

   The shared grids are authored for three columns and already collapse below
   980px, so this page only restates the counts it actually has — four stats,
   two problems — above that breakpoint.
   ========================================================================== */

/* The shared trust bar pairs a sentence with the numbers; this page runs the
   numbers on their own, so they take the full width. */
.capital-lp .trust-bar .container {
    grid-template-columns: minmax(0, 1fr);
}

/* Four stats, so they pair up rather than leaving one stranded. */
.capital-lp .programmatic-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
}

@media (min-width: 981px) {
    .capital-lp .programmatic-proof-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .capital-lp .seo-pain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .capital-highlight {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }
}

@media (max-width: 980px) {
    .capital-uses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;
    }

    .capital-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 32px;
    }

    /* The connecting rule only reads across a single row. */
    .capital-process::before {
        content: none;
    }

    .capital-platform-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .capital-platform-list li:nth-last-child(2) {
        border-bottom: 1px solid var(--border-subtle);
    }
}

@media (max-width: 768px) {
    /* The headline break is composed for the desktop measure. */
    .capital-lp .hero-headline br {
        display: none;
    }

    .capital-hero-panel {
        padding: 6px;
    }

    .capital-lp .capd {
        padding: 14px;
    }

    .capital-band {
        padding: 64px 0;
    }

    .capital-uses,
    .capital-process {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .capital-reassurance {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}