/* ============================================================
   FEATHERWORK INVOICING — HOMEPAGE
   Re-platformed from planning/landing-page-options/option-a-tool-texture.html
   ("tool-coded texture" variant of Option A). Semantic/primitive tokens,
   .site-header, .site-footer, .wordmark, and .container come from base.css —
   this file only adds page-scoped tokens base.css doesn't define, extends
   the shared header/footer with this page's nav + wordmark-mark treatment,
   and defines every homepage-only component.
   ============================================================ */

/* ----------------------------------------------------------
   PAGE-SCOPED TOKENS
   base.css doesn't define --font-mono or --shadow-lg (design-library
   adds its own --font-mono the same way). The texture tokens below are
   unique to this page's "tool-coded" material language — restrained
   use of a spec-sheet grid, brushed-metal plate, and stamped-metal
   emboss — and aren't part of the shared token set. All get an explicit
   dark override so the real toggle works regardless of which direction
   it flips relative to OS preference.
   ---------------------------------------------------------- */
:root {
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    --shadow-lg: 0 10px 28px rgba(26, 25, 22, .14), 0 3px 8px rgba(26, 25, 22, .06);

    --texture-grid-line: rgba(26, 25, 22, .05);
    --texture-emboss-hi: rgba(255, 255, 255, .5);
    --texture-emboss-lo: rgba(0, 0, 0, .22);
}

:root[data-theme="dark"] {
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);

    --texture-grid-line: rgba(255, 255, 255, .06);
    --texture-emboss-hi: rgba(255, 255, 255, .14);
    --texture-emboss-lo: rgba(0, 0, 0, .4);
}

a { text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

/* ============================================================
   HEADER — extends base.css .site-header/.wordmark
   Base gives us the sticky positioning, backdrop blur, and the
   wordmark's font/color. This page adds a taller inner height, an
   accent bottom border instead of the default hairline, and the
   "F" mark + "Invoicing" subtitle that base's plain wordmark doesn't
   have. .wordmark span isn't used here — this page's wordmark takes
   a different shape (icon tile + small tag) than the plain two-tone
   text treatment on auth/venture-studio, so it's overridden wholesale
   rather than fighting the base `span` rule.
   ============================================================ */
.site-header {
    border-bottom: 3px solid var(--color-accent);
}
.site-header__inner {
    /* Wider than base.css's shared 1100px content column: logo + 5 nav
       links + toggle + login + CTA button need more like 1150px just to
       lay out without touching, let alone breathe. Headers commonly run
       wider than the body copy column they sit above, so this opts the
       header (only) out of --max-width rather than cramming everything
       into the same measure as paragraph text. */
    max-width: 1360px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* Base's shared rule sets justify-content: space-between for its plain
       2-child flex layout — with a 1fr center column doing that job here,
       a lingering space-between instead stops the 1fr track from claiming
       its free space (grid sizes tracks to content first when justify-
       content isn't normal/stretch), so it must be reset explicitly. */
    justify-content: normal;
    align-items: center;
    height: 68px;
    gap: var(--space-6);
}

.wordmark {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-size: var(--text-md);
    flex-shrink: 0;
    white-space: nowrap;
}
.wordmark__mark {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: none;
}
.wordmark__mark--dark { display: none; }
:root[data-theme="dark"] .wordmark__mark--light { display: none; }
:root[data-theme="dark"] .wordmark__mark--dark { display: block; }
.wordmark small {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* .nav itself generates no box — display:contents promotes its two
   children (.nav__links, .nav__cta) to be direct grid items of
   .site-header__inner, landing them in the center and right columns
   respectively (wordmark already occupies the left column). display:none
   in the mobile breakpoint below still hides the whole subtree as normal,
   since display:none always removes an element and its descendants
   regardless of what display value it would otherwise compute to. */
.nav { display: contents; }
.nav__links { display: flex; align-items: center; justify-content: center; gap: var(--space-6); font-size: var(--text-sm); font-weight: 600; }
.nav__links a { color: var(--color-text-secondary); padding: .25rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav__links a:hover { color: var(--color-text-primary); border-color: var(--color-accent); }
.nav__cta { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.nav__login { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.nav__login:hover { color: var(--color-text-primary); }
.nav-mobile { display: none; }

/* Breakpoint sits higher than the source mockup's 860px: the header now
   also carries the theme toggle (the mockup had none), so even the
   collapsed wordmark + toggle + Menu-button combination stops fitting a
   narrow viewport well before 860px. Rather than chase a moving target,
   the entire .nav (links, toggle, login, CTA) collapses into the drawer
   at this width — .nav-mobile__panel below carries its own copy of the
   toggle plus login + CTA (btn--block), so nothing inline needs to
   survive next to the Menu button. 1300px (wider than base.css's 1100px
   --max-width) is where the desktop nav's own three-column layout —
   wordmark, centered links+toggle, login+CTA — actually has room to
   breathe; below that, the .site-header__inner grid tracks would start
   fighting each other for space well before the wordmark/CTA text wraps. */
@media (max-width: 1300px) {
    .nav { display: none; }
    .nav-mobile { display: block; }
    .nav-mobile summary {
        list-style: none;
        font-weight: 700;
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        border: 2px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        padding: .5rem .75rem;
        cursor: pointer;
    }
    .nav-mobile summary::-webkit-details-marker { display: none; }
    .nav-mobile[open] summary { border-color: var(--color-accent); }
    .nav-mobile__panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 68px;
        background: var(--color-surface);
        border-bottom: 3px solid var(--color-accent);
        padding: var(--space-6) var(--gutter);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        box-shadow: var(--shadow-md);
    }
    .nav-mobile__panel a { font-weight: 600; font-size: var(--text-md); }
    .nav-mobile__panel .theme-toggle {
        align-self: flex-start;
    }
}

/* ---------- Theme toggle (header) ----------
   Same pill/track/thumb pattern as views/design-library/index.ejs,
   restyled to sit inline in .nav__cta. localStorage key
   ("featherwork-theme") and behavior match exactly so a preference
   set here or on /design-library stays consistent across the app. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    padding: .35rem .35rem .35rem .75rem;
}
.theme-toggle:hover { color: var(--color-text-primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.theme-toggle__track {
    position: relative;
    width: 30px;
    height: 17px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    flex: none;
}
.theme-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-accent);
    transition: transform .18s ease;
}
[data-theme="dark"] .theme-toggle__thumb { transform: translateX(13px); }
.theme-toggle__mode { min-width: 2.4em; text-align: left; }

/* ============================================================
   BUTTONS — page-scoped (no shared .btn system exists app-wide yet;
   other pages define their own button classes the same way, e.g.
   auth.css's .btn-primary, invoicing.css's .btn-action)
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1.6rem;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    border: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-highlight); color: var(--color-black-900); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-highlight-hover); }
.btn--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--block { width: 100%; }

/* ============================================================
   HERO — direct, single stack, one dominant visual
   ============================================================ */
.hero { padding-block: var(--space-16) var(--space-20); position: relative; }
/* Faint spec-sheet grid paper — reinforces the "spec-sheet-style" hero
   without reading as decoration. Radial mask fades it out before it
   reaches the edges so it never competes with the mockup or the type. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(0deg, var(--texture-grid-line) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, var(--texture-grid-line) 0 1px, transparent 1px 28px);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 78%);
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
    max-width: 760px;
    margin-inline: auto;
}
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 700; }
.hero__sub { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); }

.hero__visual-wrap { margin-top: var(--space-16); width: 100%; display: flex; justify-content: center; }

/* ---------- Product mockup: browser-chrome invoice ---------- */
.mock { position: relative; width: min(560px, 100%); }
.mock__frame {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mock__chrome {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem .9rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-strong); }
.mock__body { padding: var(--space-6); }
.mock__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.mock__logo { display: flex; align-items: center; gap: .5rem; }
.mock__logo-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--color-accent); }
.mock__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); }
.mock__invno {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    font-weight: 600;
    letter-spacing: .03em;
    padding-left: .5rem;
    border-left: 2px solid var(--color-border-strong);
}
.mock__rule { height: 1px; background: var(--color-border); margin: var(--space-4) 0; }
.mock__line { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; }
.mock__bar { height: 9px; border-radius: 99px; background: var(--color-border-strong); }
.mock__amt { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }
.mock__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 2px solid var(--color-text-primary);
}
.mock__total-label { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); }
.mock__total-amt { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-2xl); color: var(--color-accent); }
.mock__pay {
    margin-top: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--color-highlight);
    color: var(--color-black-900);
    border-radius: var(--radius-md);
    padding: .85rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-sm);
}

.mock__tap {
    position: absolute;
    left: -18px;
    bottom: 34%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .5rem .65rem;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.mock__tap svg { width: 20px; height: 20px; color: var(--color-accent); }
.mock__tap span { font-size: var(--text-xs); font-weight: 700; font-family: var(--font-heading); }

.mock__paid {
    position: absolute;
    top: -16px;
    right: -14px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 3px dashed var(--color-accent);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: rotate(-11deg);
    background: color-mix(in srgb, var(--color-accent-light) 92%, transparent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: var(--tracking-wide);
    /* same dashed-circle stamp, given a struck-metal bevel instead of flat ink */
    box-shadow: inset 0 1px 0 var(--texture-emboss-hi), inset 0 -2px 3px var(--texture-emboss-lo);
}

@media (max-width: 520px) {
    .mock__paid { width: 60px; height: 60px; font-size: .6rem; top: -12px; right: -10px; }
    .mock__tap { left: -8px; padding: .4rem .55rem; }
}

/* ============================================================
   PILLARS — plain 2x2 grid, hard-bordered utility cards
   ============================================================ */
.pillars { padding-block: var(--space-20); background: var(--color-surface-raised); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: var(--space-12); }
.section-head h2 { font-size: var(--text-3xl); }
.pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.pillar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    gap: var(--space-4);
}
.pillar-icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-light);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pillar-icon svg { width: 24px; height: 24px; }
.pillar-card h3 { font-size: var(--text-md); margin-bottom: .3rem; }
.pillar-card p { font-size: var(--text-sm); color: var(--color-text-secondary); }

@media (max-width: 680px) { .pillar-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HOW IT WORKS teaser — 3 flat numbered steps in a row
   ============================================================ */
.steps { padding-block: var(--space-20); }
.step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.step { text-align: center; position: relative; }
.step__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-text-primary);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    margin-inline: auto;
    margin-bottom: var(--space-4);
}
.step h3 { font-size: var(--text-md); margin-bottom: .35rem; }
.step p { font-size: var(--text-sm); color: var(--color-text-secondary); }
.step-row .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(50% + 44px);
    width: calc(100% - 44px);
    height: 2px;
    background: var(--color-border-strong);
}
@media (max-width: 760px) {
    .step-row { grid-template-columns: 1fr; gap: var(--space-10); }
    .step-row .step::after { display: none; }
}

/* ============================================================
   TRUST BAR — solid strip
   ============================================================ */
.trust-bar {
    position: relative;
    color: #fff;
    padding-block: var(--space-6);
    /* brushed-metal plate: fine directional grain + a single soft sheen
       sweep, bedded on the same solid strip color as Option A (unchanged
       in dark mode — --color-secondary-800 is a primitive, not a
       theme-swapped semantic token) */
    background:
        linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .05) 48%, transparent 64%),
        repeating-linear-gradient(97deg, rgba(255, 255, 255, .045) 0 1px, rgba(0, 0, 0, .03) 1px 2px),
        var(--color-secondary-800);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: .75rem; text-align: center; font-size: var(--text-sm); font-weight: 600; }
.trust-bar svg { width: 22px; height: 22px; color: var(--color-highlight); flex: none; }

/* ============================================================
   PROOF TEASER
   ============================================================ */
.proof { padding-block: var(--space-20); text-align: center; }
.proof__inner { max-width: 600px; margin-inline: auto; }
.proof__eyebrow {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}
.proof p.big { font-size: var(--text-lg); font-family: var(--font-heading); font-weight: 600; line-height: var(--leading-snug); }

/* ============================================================
   FAQ TEASER
   ============================================================ */
.faq-teaser { padding-block: 0 var(--space-20); }
.faq-card {
    max-width: 680px;
    margin-inline: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.faq-card p { font-size: var(--text-md); font-weight: 600; max-width: 38ch; }
.faq-card a { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); white-space: nowrap; border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; }
.faq-card a:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* ============================================================
   FOOTER — extends base.css .site-footer
   Base gives the top border + block padding; this page adds the
   multi-column layout the shared footer doesn't have a shape for.
   ============================================================ */
.site-footer { padding-block: var(--space-12) var(--space-8); background: var(--color-surface-raised); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-10); margin-bottom: var(--space-10); }
.footer-brand .wordmark { margin-bottom: var(--space-3); }
.footer-brand p { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 32ch; }
.footer-cols { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.footer-col h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); margin-bottom: var(--space-3); }
.footer-col a { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.footer-col a:hover { color: var(--color-text-primary); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.footer-copy { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.plg-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    padding: .4rem .8rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: color .15s ease, border-color .15s ease;
}
/* Now a live link to /invoice-generator (was a static span) — add the
   interactive states an <a> needs. */
.plg-badge:hover { color: var(--color-accent); border-color: var(--color-accent); }
.plg-badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.plg-badge svg { width: 14px; height: 14px; color: var(--color-accent); }