/* ============================================================================
   TabDSP Docs Home (v2/index.html) — page-scoped marketing patterns
   ----------------------------------------------------------------------------
   Loaded ONLY by v2/index.html, AFTER v2/css/{main,components,themes}.css and
   _site-assets/landing.css. The page reuses the landing page's marketing
   vocabulary (.landing-*, .feature-grid, .cta-row, .final-cta from landing.css);
   this file defines ONLY the page-unique patterns that shared system does not
   cover: the hero note, the rich feature card (bulleted list + tier badge), the
   intro showcase tiles, and the limitation cards.

   Uses design-tokens.css tokens exclusively. The one non-token literal is the
   `#fff` glyph on gradient icon fills, which matches the template/landing.css
   `.step-card` precedent (the design system ships no white token). No shared
   docs class (.section, .feature-card, .feature-icon, .section-container, …) is
   modified here, so the 22 docs pages and the root landing page are unaffected.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Hero note — single info line under the hero CTAs (page-unique; the root
   landing page uses a platform-badge row here instead). Mirrors the former
   .hero-note styling, token-for-token, plus a hairline border to match the
   template's badge-container treatment.
   --------------------------------------------------------------------------- */
.home-hero-note {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.home-hero-note svg {
    flex-shrink: 0;
    color: var(--color-accent-cyan);
}

/* ---------------------------------------------------------------------------
   Intro prose — "What Is TabDSP?" lead copy + Gear Head Details collapsible.
   (Generic Section + card-grid mapping: centered lede above a showcase grid.)
   --------------------------------------------------------------------------- */
.home-intro-prose {
    max-width: var(--max-width-narrow);
    margin: 0 auto var(--spacing-2xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-body);
    text-align: center;
}

.home-intro-prose p {
    margin: 0 0 var(--spacing-md);
}

/* The Gear Head Details collapsible reads better left-aligned at body size. */
.home-intro-prose > .gearhead-details {
    text-align: left;
    font-size: var(--font-size-base);
    margin-top: var(--spacing-lg);
}

/* ---------------------------------------------------------------------------
   Showcase tiles — "What Is TabDSP?" visual, mapped to a 3-up card grid.
   Sit inside a reused .feature-grid.feature-grid-3up container.
   --------------------------------------------------------------------------- */
.home-showcase-card {
    padding: var(--spacing-lg);
    background: var(--color-bg-tertiary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.home-showcase-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    color: #fff;   /* glyph on gradient — see file header note */
    margin-bottom: var(--spacing-sm);
}

.home-showcase-icon[data-accent="eq"]  { background: var(--gradient-cyan); }
.home-showcase-icon[data-accent="dyn"] { background: var(--gradient-purple); }
.home-showcase-icon[data-accent="lim"] { background: var(--gradient-red); }

.home-showcase-card h3 {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--spacing-xs);
}

.home-showcase-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Limitation cards — "What TabDSP Doesn't Do" (icon + text, 2-up grid).
   Sit inside a reused .feature-grid.feature-grid-2up container.
   --------------------------------------------------------------------------- */
.home-limitation-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
}

.home-limitation-card svg {
    flex-shrink: 0;
    color: var(--color-accent-red);
    margin-top: 2px;
}

.home-limitation-card h3 {
    font-size: var(--font-size-base);
    margin: 0 0 var(--spacing-xs);
}

.home-limitation-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Rich feature card — "Key Features". Extends the landing feature-card
   vocabulary to hold an icon chip, a bulleted feature list, and a tier badge.
   Sit inside a reused .feature-grid.feature-grid-3up container.
   --------------------------------------------------------------------------- */
.home-feature-card {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-top: var(--border-width-active) solid var(--border-color-strong);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.home-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.home-feature-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 28px;
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    color: #fff;   /* glyph on module-color fill — see file header note */
    flex-shrink: 0;
}

.home-feature-card h3 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.home-feature-card > p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    margin: 0;
}

/* Module accents: top border + icon fill (mirrors landing feature cards). */
.home-feature-card[data-module="eq"]    { border-top-color: var(--module-eq); }
.home-feature-card[data-module="mb"]     { border-top-color: var(--module-mb); }
.home-feature-card[data-module="comp"]   { border-top-color: var(--module-comp); }
.home-feature-card[data-module="lim"]    { border-top-color: var(--module-lim); }
.home-feature-card[data-module="meter"]  { border-top-color: var(--color-accent-green); }
.home-feature-card[data-module="flow"]   { border-top-color: var(--color-accent-blue); }

.home-feature-card[data-module="eq"]    .home-feature-icon { background: var(--module-eq); }
.home-feature-card[data-module="mb"]     .home-feature-icon { background: var(--module-mb); }
.home-feature-card[data-module="comp"]   .home-feature-icon { background: var(--module-comp); }
.home-feature-card[data-module="lim"]    .home-feature-icon { background: var(--module-lim); }
.home-feature-card[data-module="meter"]  .home-feature-icon { background: var(--color-accent-green); }
.home-feature-card[data-module="flow"]   .home-feature-icon { background: var(--color-accent-blue); }

.home-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xs) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.home-feature-list li {
    position: relative;
    padding-left: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
}

.home-feature-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-accent-cyan);
}

.home-feature-card .feature-link {
    margin-top: auto;
    padding-top: var(--spacing-sm);
}

/* Tier badge — replaces the former inline-styled tier spans, tokenized. */
.home-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    vertical-align: middle;
}

.home-tier-badge[data-tier="professional"] {
    background: var(--module-mb-soft);
    color: var(--module-mb);
}

.home-tier-badge[data-tier="enthusiast"] {
    background: var(--module-comp-soft);
    color: var(--module-comp);
}