/* ============================================================
   Ingantt — "Field notes" cluster page overrides
   Quieter editorial cousin of the main landing: no hero image,
   no device-support section, features rendered as a numbered
   editorial list rather than a card grid.
   Depends on styles.css tokens (--paper, --ink, --signal, etc.)
   ============================================================ */

/* ---------- Hero ---------- */
/* Single-column hero: no image, no looming ghost numeral. */
.page-cluster .hero {
    padding: var(--s-7) 0 var(--s-7);
}
.page-cluster .hero::before { display: none; }

.page-cluster .hero-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 48rem;
}

.page-cluster .hero h1 {
    font-size: clamp(2.4rem, 4.8vw, 3.75rem);
    letter-spacing: -0.025em;
}

.page-cluster .hero-subtitle {
    max-width: 58ch;
    font-size: 1.15rem;
}

.page-cluster .timeline-rule { max-width: 360px; }

/* ---------- Cluster hero with stacked media: slot → arrow → slot ---------- */
/* Applies to any cluster page whose landing-*.yml declares hero.media.
   Widens the wrapper so screenshots have room to breathe, centers the
   hero copy, and stacks the two media slots below it. */
.page-cluster .hero-wrapper:has(.hero-ai-media) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 68rem;
    row-gap: var(--s-7);
}
.page-cluster .hero-wrapper:has(.hero-ai-media) .hero-content {
    order: 1;
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}
.page-cluster .hero-wrapper:has(.hero-ai-media) .hero-ai-media {
    order: 2;
}
.page-cluster .hero-wrapper:has(.hero-ai-media) .hero-content .timeline-rule {
    margin-left: auto;
    margin-right: auto;
}
.page-cluster .hero-wrapper:has(.hero-ai-media) .hero-content .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}
.page-cluster .hero-wrapper:has(.hero-ai-media) .hero-content .cta-group {
    justify-content: center;
}
.page-cluster .hero-wrapper:has(.hero-ai-media) .hero-content .hero-badges {
    justify-content: center;
}

.hero-ai-media {
    max-width: 60rem;
    margin: 0 auto;
    width: 100%;
}
.hero-ai-media .create-ai-prompt {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}
.hero-ai-media .create-ai-prompt-body {
    text-align: center;
}
.hero-ai-media .create-ai-frame + .create-ai-prompt-arrow,
.hero-ai-media .create-ai-prompt + .create-ai-prompt-arrow {
    margin-top: var(--s-3);
}

/* Large-format prompt body — for single-token inputs like a file extension. */
.hero-ai-media .create-ai-prompt-xl {
    max-width: 22rem;
    text-align: center;
    padding: var(--s-6) var(--s-5);
}
.hero-ai-media .create-ai-prompt-xl .create-ai-prompt-label {
    text-align: center;
}
.hero-ai-media .create-ai-prompt-xl .create-ai-prompt-body {
    font-style: normal;
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: center;
}

/* Optional caption next to the arrow ("opens as", "becomes", etc.) */
.create-ai-prompt-arrow-labelled {
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
}
.create-ai-prompt-arrow-labelled .create-ai-prompt-arrow-line {
    display: none;
}
.create-ai-prompt-arrow-labelled .create-ai-prompt-arrow-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--signal);
}
.create-ai-prompt-arrow-labelled i {
    margin-top: 0;
    font-size: 0.95rem;
}

/* ---------- Features as an editorial numbered list ---------- */
.page-cluster .features {
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-7) 0;
}

.page-cluster .features h2 {
    max-width: 48rem;
    margin: 0 auto var(--s-6);
    text-align: center;
}

.page-cluster .features-grid {
    display: block;
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    counter-reset: fcnote;
}

.page-cluster .feature-card {
    counter-increment: fcnote;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--s-5);
    row-gap: var(--s-3);
    padding: var(--s-5) 0;
    border: none;
    outline: none;
    background: transparent;
    border-top: 1px solid var(--rule);
}
.page-cluster .feature-card:last-child { border-bottom: 1px solid var(--rule); }

.page-cluster .feature-card::before {
    /* Replace the draftsman corner tick with an editorial numeral. */
    content: counter(fcnote, decimal-leading-zero);
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: auto;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--signal);
    padding-top: 0.45rem;
    text-align: left;
    opacity: 1;
    transition: none;
}
.page-cluster .feature-card:hover::before { border-color: transparent; opacity: 1; }

/* Kill the icon chip — numerals carry the rhythm instead. */
.page-cluster .feature-card i {
    display: none;
    grid-column: 1;
    grid-row: 1;
}

.page-cluster .feature-card h3 {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}

.page-cluster .feature-card p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 56ch;
}

.page-cluster .feature-card:hover {
    background: transparent;
    transform: none;
}
.page-cluster a.feature-card:hover h3 {
    text-decoration-color: var(--signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

@media (max-width: 640px) {
    .page-cluster .feature-card {
        grid-template-columns: 3rem 1fr;
        gap: var(--s-4);
    }
    .page-cluster .feature-card h3 { font-size: 1.25rem; }
}

/* ---------- Demo & FAQ: slightly tightened for the shorter page ---------- */
.page-cluster .demo { padding: var(--s-7) 0; }
.page-cluster .faq { padding-top: var(--s-7); }