/**
 * FileConvert — homepage-only styling.
 *
 * Layered over theme.css, which owns the design system and the shared visual
 * language — the palette, the type scale, the spacing and radii, and .vhero,
 * .fxtrio, .liftcard, .band, .banlist, .termcard, .catchips, .extgrid,
 * .pairlink and .minilabel all live there. Nothing in this file redefines a
 * theme token; everything reads --t-* / --primary-* so dark mode comes for
 * free. Literal colours are only ever used for translucent overlays inside the
 * permanently-dark hero.
 *
 * Everything is namespaced `.home-*`, apart from a handful of qualified
 * overrides that reach into theme.css components from a `.home-` ancestor.
 */

/* ------------------------------------------------------------------ *
 * Page rhythm
 * ------------------------------------------------------------------ */

body {
    overflow-x: hidden;
}

.home-band {
    margin-top: var(--space-9);
    margin-bottom: var(--space-9);
}

/* The hero already opens with generous air, and the converter plate carries
   its own bottom margin. The old sheet pulled the card up over a dark
   gradient hero with a -120px margin; there is no gradient any more, so the
   plate simply sits on the paper under the hero. */
.liftcard + .home-band {
    margin-top: var(--space-7);
}

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

/* .vhero__meta is a real list here, so strip the list chrome. */
.home-metalist {
    padding: 0;
    list-style: none;
}

.home-metalist li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The format plates are links. theme.css already gives every focusable thing
   a two-ring treatment; this only widens the offset so the ring clears the
   plate's registration shadow instead of sitting inside it. */
.vhero .fxcard:focus-visible {
    outline-offset: 4px;
}

/* ------------------------------------------------------------------ *
 * Lifted converter card
 * ------------------------------------------------------------------ */

.home-lift__title {
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--t-border);
    font-family: var(--font-mono);
    font-size: var(--step-000);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--t-dimmed);
}

/* form.css already styles the dropzone; this only settles it into the card. */
.home-lift .converter {
    text-align: left;
}

.home-lift .dropzone {
    box-shadow: none;
    background: var(--t-surface);
}

.home-lift .controls {
    padding-bottom: 0;
}

.home-lift__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: var(--space-5) 0 0;
    font-size: var(--step-0);
    line-height: 1.5;
    text-align: center;
    color: var(--t-muted);
}

.home-lift__foot i {
    color: var(--primary-500);
}

/* ------------------------------------------------------------------ *
 * Format catalog
 * ------------------------------------------------------------------ */

.home-catchips {
    padding: 0;
    list-style: none;
}

.home-catchips li {
    display: inline-flex;
}

/* theme.css marks the active chip with [aria-selected]; these chips are real
   links, where aria-current is the correct attribute. Same look. */
.catchip[aria-current="true"] {
    color: var(--primary-600);
}

.catchip[aria-current="true"] i {
    color: var(--primary-500);
}

:root[data-theme="dark"] .catchip[aria-current="true"] {
    color: var(--primary-500);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .catchip[aria-current="true"] {
        color: var(--primary-500);
    }
}

.home-catalog {
    display: grid;
    gap: 32px;
    margin-top: 28px;
}

@media (min-width: 720px) {
    .home-catalog {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 40px;
    }
}

.home-catalog__col {
    min-width: 0;
}

.home-catalog__all {
    color: inherit;
    text-transform: none;
    letter-spacing: 0.04em;
}

.home-catalog__all:hover {
    color: var(--primary-500);
}

/* theme.css sets the ring; these only pull it in tight so a token in a dense
   grid does not ring its neighbours. */
.home-catalog .extchip:focus-visible,
.home-catchips .catchip:focus-visible {
    outline-offset: 1px;
}

/* ------------------------------------------------------------------ *
 * API band
 * ------------------------------------------------------------------ */

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}



/* Long shell lines must scroll inside the card, never widen the page. */
.termcard pre {
    max-width: 100%;
}

.termcard pre code {
    font: inherit;
    color: inherit;
}

/* ------------------------------------------------------------------ *
 * How it works
 * ------------------------------------------------------------------ */

.home-steps__list {
    display: grid;
    gap: 16px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
    counter-reset: home-step;
}

@media (min-width: 760px) {
    .home-steps__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.home-step {
    position: relative;
    padding: var(--space-5);
    border: 1px solid var(--t-border-strong);
    border-radius: var(--radius);
    background: var(--t-surface);
    box-shadow: var(--lift);
    counter-increment: home-step;
}

/* These three genuinely are a sequence — add, choose, download — so the
   number carries information rather than decorating. It is set as a step
   index, `01/03`, the way the job DAG numbers its tasks. */
.home-step::after {
    content: "0" counter(home-step) "/03";
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--step-000);
    letter-spacing: 0.08em;
    color: var(--t-dimmed);
}

.home-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--brand-tint);
    color: var(--primary-500);
    font-size: 0.875rem;
}

.home-step__title {
    margin-top: var(--space-4);
    font-size: var(--step-3);
    color: var(--t-highlighted);
}

.home-step__text {
    margin-top: var(--space-2);
    font-size: var(--step-1);
    line-height: var(--lh-body);
    color: var(--t-default);
}

/* ------------------------------------------------------------------ *
 * Feature grid
 * ------------------------------------------------------------------ */

.home-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 16px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}

.home-feature {
    padding: var(--space-5);
    border: 1px solid var(--t-border);
    border-radius: var(--radius);
    background: var(--t-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-feature:hover {
    border-color: var(--t-border-strong);
    box-shadow: var(--lift);
}

.home-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--brand-tint);
    color: var(--primary-500);
    font-size: 0.875rem;
}

.home-feature__title {
    margin-top: var(--space-4);
    font-size: var(--step-3);
    color: var(--t-highlighted);
}

.home-feature__text {
    margin-top: var(--space-2);
    font-size: var(--step-1);
    line-height: var(--lh-body);
    color: var(--t-default);
}

/* ------------------------------------------------------------------ *
 * Engines
 * ------------------------------------------------------------------ */

.home-engines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 14px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}

/* The catalysts. Every one of these is a real binary the server shells out
   to, so each is set as a command name on a plate, with the verdigris tick
   that marks a transform everywhere else on the page. */
.home-engine {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--t-border);
    border-left: 2px solid var(--verdigris);
    border-radius: var(--radius-flat);
    background: var(--t-elevated);
}

.home-engine__name {
    font-family: var(--font-mono);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--t-highlighted);
}

.home-engine__text {
    margin-top: var(--space-2);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--t-default);
}

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

.home-faq .band__lede a {
    color: var(--primary-500);
    font-weight: 500;
}

.home-faq .band__lede a:hover {
    text-decoration: underline;
}

.home-faq__list {
    max-width: 780px;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--t-border-strong);
    border-radius: var(--radius);
    background: var(--t-surface);
}

.home-faq__item + .home-faq__item {
    border-top: 1px solid var(--t-border);
}

.home-faq__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.home-faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: 0;
    background: none;
    font-family: var(--font-text);
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    color: var(--t-highlighted);
    cursor: pointer;
}

.home-faq__trigger:hover {
    color: var(--primary-600);
}

/* Inside a bordered stack, so the ring is drawn inward — theme.css's
   outward ring would be clipped by the list's overflow. */
.home-faq__trigger:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -3px;
    box-shadow: none;
}

.home-faq__chevron {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--t-dimmed);
    transition: transform 0.2s ease;
}

.home-faq__trigger[aria-expanded="true"] .home-faq__chevron {
    transform: rotate(180deg);
    color: var(--primary-500);
}

.home-faq__panel {
    padding: 0 var(--space-5) var(--space-5);
}

.home-faq__a {
    max-width: 62ch;
    font-size: var(--step-2);
    line-height: var(--lh-body);
    color: var(--t-default);
}

/* ------------------------------------------------------------------ *
 * Narrow screens — nothing may push the page sideways at 360px
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
    .home-band {
        margin-top: var(--space-7);
        margin-bottom: var(--space-7);
    }

    .home-faq__trigger {
        padding: var(--space-4);
    }

    .home-faq__panel {
        padding: 0 var(--space-4) var(--space-4);
    }
}

@media (max-width: 400px) {
    .home-lift__foot {
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .home-lift__foot i {
        margin-top: 3px;
    }

    .termcard pre {
        font-size: 11px;
    }
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .home-feature,
    .home-faq__chevron {
        transition: none;
    }
}