/*
 * Shared stylesheet for the public feature pages.
 *
 * Loaded after public.css by the pages that need it, and written to the same
 * rules: no build step, no JavaScript, no framework. Every token it uses is one
 * public.css already defines -- the mauve ramp, the semantic ground/ink/rule
 * tokens and the pinned accent pair -- so dark mode arrives for free through
 * the existing `prefers-color-scheme` block rather than being re-declared here.
 *
 * Class names are prefixed f- so a feature page can sit beside the legal
 * documents and the home page without colliding with their .hero, .band, .card
 * and .actions classes. Everything here is generic: it describes a feature
 * page's rhythm, not any one feature.
 */

/* ------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

.f-container {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.f-container--narrow {
    max-width: 46rem;
}

.f-section {
    padding-block: 5rem;
    border-top: 1px solid var(--rule);
}

.f-section--alt {
    background: var(--ground-sunken);
    border-top-color: transparent;
}

.f-section:first-of-type {
    border-top: 0;
}

/* ------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.f-hero {
    padding-block: 5rem 5.5rem;
}

.f-hero-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
    .f-hero-grid {
        grid-template-columns: 1.05fr 1fr;
    }
}

.f-hero-copy {
    min-width: 0;
}

.f-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--link);
}

.f-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: clamp(2.4rem, 1.6rem + 3vw, 3.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--ink);
    text-wrap: balance;
}

.f-sub {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 34rem;
}

.f-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* ------------------------------------------------------------------------
 * Section headings
 * ---------------------------------------------------------------------- */

.f-h2 {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.f-lede {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink-muted);
    max-width: 40rem;
    line-height: 1.65;
}

/* ------------------------------------------------------------------------
 * Grids and cards
 * ---------------------------------------------------------------------- */

.f-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.f-grid--5 {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.f-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.f-card {
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--ground-raised);
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.f-card:hover {
    border-color: var(--rule-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px color-mix(in oklab, var(--mauve-900) 45%, transparent);
}

.f-card-icon,
.f-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.9rem;
    background: color-mix(in oklab, var(--primary-600) 12%, transparent);
    color: var(--link);
}

.f-card-icon {
    border-radius: 0.625rem;
}

.f-benefit-icon {
    border-radius: 50%;
}

.f-card-icon svg,
.f-benefit-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.f-card h3,
.f-benefit h3,
.f-step h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.005em;
    color: var(--ink);
}

.f-card p,
.f-benefit p,
.f-step p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------------
 * Benefits
 * ---------------------------------------------------------------------- */

.f-benefit {
    padding: 1.75rem;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--ground-raised);
    transition: border-color 140ms ease;
}

.f-benefit:hover {
    border-color: var(--rule-strong);
}

/* ------------------------------------------------------------------------
 * Steps
 * ---------------------------------------------------------------------- */

.f-steps {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    counter-reset: step;
}

.f-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
    padding: 1.5rem 0;
    border-top: 1px solid var(--rule);
}

.f-step:first-child {
    border-top: 0;
    padding-top: 0;
}

.f-step-num {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
}

.f-step h3 {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0.15rem;
}

.f-step p {
    grid-column: 2;
    grid-row: 2;
}

/* ------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

.f-faq {
    margin-top: 2.5rem;
    border-top: 1px solid var(--rule);
}

.f-faq details {
    border-bottom: 1px solid var(--rule);
}

.f-faq summary {
    position: relative;
    padding: 1.1rem 2rem 1.1rem 0;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
}

.f-faq summary::-webkit-details-marker {
    display: none;
}

.f-faq summary::after {
    content: '+';
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink-faint);
}

.f-faq details[open] summary::after {
    content: '\2013';
}

.f-faq summary:hover {
    color: var(--link);
}

.f-faq details p {
    margin: 0 0 1.25rem;
    color: var(--ink-muted);
    max-width: 40rem;
}

/* ------------------------------------------------------------------------
 * Closing CTA band
 * ---------------------------------------------------------------------- */

.f-cta {
    padding-block: 5rem;
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary-700) 92%, black), var(--primary-700));
    color: #fff;
    text-align: center;
}

.f-cta .f-h2 {
    color: #fff;
}

.f-cta p {
    color: color-mix(in oklab, white 82%, transparent);
    margin-inline: auto;
    max-width: 40rem;
}

.f-cta .f-actions {
    justify-content: center;
}

.f-cta .btn-secondary {
    background: transparent;
    border-color: color-mix(in oklab, white 45%, transparent);
    color: #fff;
}

.f-cta .btn-secondary:hover {
    background: color-mix(in oklab, white 12%, transparent);
}

/* The filled button would vanish into its own colour on this band. */
.f-cta .btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--primary-700);
}

.f-cta .btn-primary:hover {
    background: color-mix(in oklab, white 88%, var(--primary-600));
    color: var(--primary-700);
}

/* ------------------------------------------------------------------------
 * Hero mockup
 * ---------------------------------------------------------------------- */

.f-hero-art {
    position: relative;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
}

.f-hero-art::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 120% at 70% 0%, color-mix(in oklab, var(--primary-600) 14%, transparent), transparent 60%);
    pointer-events: none;
}

.f-mock {
    position: relative;
    padding: 1.25rem;
    background: var(--ground-raised);
    border: 1px solid var(--rule);
    border-radius: 18px;
    box-shadow: 0 24px 60px -32px color-mix(in oklab, var(--mauve-900) 55%, transparent);
    font-size: 0.9rem;
}

.f-mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.f-mock-title {
    font-weight: 600;
    color: var(--ink);
}

.f-mock-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.f-mock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.25rem;
    border-top: 1px solid var(--rule);
}

.f-mock-row--featured {
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin: 0.75rem 0 0.5rem;
    padding: 1rem;
    border-top: 0;
    border-radius: 12px;
    background: color-mix(in oklab, var(--primary-600) 7%, transparent);
}

.f-mock-kw {
    flex: 1 1 auto;
    min-width: 0;
}

.f-mock-name {
    font-weight: 500;
    color: var(--ink);
}

.f-mock-intent {
    display: inline-flex;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-muted);
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.f-mock-metrics {
    display: flex;
    gap: 1.5rem;
}

.f-mock-metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.f-mock-metric b {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ink);
}

.f-mock-metric i {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.f-mock-diffbar {
    width: 3rem;
    height: 6px;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: var(--rule-strong);
    overflow: hidden;
}

.f-mock-diffbar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary-600);
}

.f-mock-trend {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.f-mock-trend svg {
    width: 6rem;
    height: 2.25rem;
}

.f-mock-trendlabel {
    font-size: 0.72rem;
    color: var(--link);
}

.f-mock-vol {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------
 * Focus and motion
 * ---------------------------------------------------------------------- */

.f-faq summary:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .f-card,
    .f-benefit {
        transition: none;
    }
}

/* ------------------------------------------------------------------------
 * Shared mockup primitives
 *
 * Small, reusable building blocks for the feature-page hero mockups. They
 * describe generic pieces of an interface -- a keyword pill, an AI answer
 * strip, a rank badge, a fake input and button, a draft skeleton -- so eight
 * more feature pages can assemble their own mockups without re-declaring
 * tokens. Everything reads the public.css tokens, so dark mode arrives through
 * the same `prefers-color-scheme` block as the rest of the file.
 * ---------------------------------------------------------------------- */

/* A neutral pill: secondary keywords, PAA questions, discovered domains. */
.f-mock-chip {
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-muted);
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

/* An "AI Overview" answer strip. */
.f-mock-ai {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    background: color-mix(in oklab, var(--primary-600) 9%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary-600) 22%, transparent);
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.f-mock-ai b {
    color: var(--link);
    font-weight: 600;
}

/* Movement indicators. */
.f-mock-up {
    color: #15803d;
    font-weight: 600;
}

.f-mock-down {
    color: #b91c1c;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .f-mock-up {
        color: #4ade80;
    }

    .f-mock-down {
        color: #f87171;
    }
}

/* A small rank / position badge. */
.f-mock-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 0.5rem;
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
}

/* An input-like pill standing in for "enter your domain". */
.f-mock-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--rule-strong);
    border-radius: 10px;
    background: var(--ground);
    font-size: 0.82rem;
    color: var(--ink-muted);
}

/* A small fake button ("Download .md", "Run"). */
.f-mock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    background: var(--primary-700);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}

/* A document skeleton for a draft. */
.f-mock-doc {
    padding: 1rem 1.1rem;
}

.f-mock-doc-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.f-mock-doc-h {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
    margin: 0.85rem 0 0.35rem;
}

.f-mock-doc-line {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--rule);
    margin: 0.3rem 0;
}

.f-mock-doc-line:nth-child(even) {
    width: 82%;
}

.f-mock-doc-line:nth-child(odd) {
    width: 96%;
}