/* anex.sh landing page. Layout + the quote-card hero; tokens live in base.css. */

.shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-header .shell {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--body); text-decoration: none; font-size: 14px; }
.site-nav a:hover { color: var(--ink); }
.site-nav .btn { padding: 8px 16px; }
/* .site-nav a would override the button's white label; restate it. */
.site-nav a.btn-primary, .site-nav a.btn-primary:hover { color: #fff; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 88px 0 72px; }
.hero .shell {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 56px; align-items: center;
}
.eyebrow {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--spice-deep); margin-bottom: 18px;
}
.hero h1 {
    font-size: clamp(38px, 5vw, 56px);
    font-weight: 800; letter-spacing: -0.025em;
    margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--spice); }
.hero .lede { font-size: 17px; max-width: 46ch; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Quote card (signature) ─────────────────────────────────────────────── */
.quote-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 20px 50px -30px rgba(58, 38, 22, 0.35);
    overflow: hidden;
}
.quote-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.quote-head .label {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
}
.quote-head .job-id { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.quote-rows { padding: 10px 22px; }
.quote-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 0; border-bottom: 1px dashed var(--line);
    font-size: 13.5px;
}
.quote-row:last-child { border-bottom: none; }
.quote-row .k { color: var(--muted); }
.quote-row .v { font-family: var(--mono); color: var(--ink); }
.quote-row.total .k { color: var(--ink); font-weight: 600; font-family: var(--text); }
.quote-row.total .v { font-size: 22px; font-weight: 600; color: var(--spice-deep); }

.lifecycle { padding: 18px 22px 8px; border-top: 1px solid var(--line); }
.rail { display: flex; align-items: center; gap: 0; list-style: none; }
.rail li { display: flex; align-items: center; flex: 1; min-width: 0; }
.rail li:last-child { flex: 0; }
.rail .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--line); flex: none;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.rail .bar { height: 2px; flex: 1; background: var(--line); margin: 0 4px; }
.rail li.lit .dot { background: var(--spice); box-shadow: 0 0 0 4px var(--spice-soft); }
.rail li.passed .dot { background: var(--spice); }
.rail li.passed .bar { background: var(--spice); }
.rail-labels {
    display: flex; justify-content: space-between; margin-top: 8px;
    font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.rail-labels span.on { color: var(--spice-deep); }
.quote-note {
    padding: 12px 22px 18px;
    font-size: 12.5px; color: var(--muted);
}
.quote-note strong { color: var(--ink); font-weight: 600; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.section h2 {
    font-size: clamp(26px, 3.2vw, 34px); font-weight: 800;
    letter-spacing: -0.02em; margin-bottom: 10px;
}
.section .section-lede { color: var(--muted); margin-bottom: 36px; }

.surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.surface h3 { font-size: 19px; margin: 14px 0 10px; }
.surface .tag { margin-right: 6px; }
.surface p { font-size: 14.5px; margin-bottom: 12px; }
.surface ul { list-style: none; margin-top: 4px; }
.surface li {
    font-size: 13.5px; padding: 7px 0 7px 22px; position: relative;
    border-top: 1px dashed var(--line);
}
.surface li::before {
    content: ""; position: absolute; left: 4px; top: 14px;
    width: 7px; height: 7px; border-radius: 2px; background: var(--spice);
}
.surface .endpoint {
    display: block; font-family: var(--mono); font-size: 12.5px;
    color: var(--ink); background: var(--paper); border: 1px solid var(--line);
    border-radius: 7px; padding: 8px 12px; margin-top: 14px;
    overflow-x: auto; white-space: nowrap;
}

/* Pipeline: a real sequence, so the numbering carries meaning. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; }
.step .num {
    font-family: var(--mono); font-size: 12px; color: var(--spice-deep);
    display: block; margin-bottom: 8px;
}
.step h3 { font-size: 15.5px; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--muted); }
/* Ruled off below the row: the pointer to the full status list, not part of it. */
.section-footnote {
    font-size: 14px; color: var(--muted);
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}

.code-panel {
    background: #2a1c11; color: #f0e6d2; border-radius: 12px;
    padding: 22px 24px; overflow-x: auto;
}
.code-panel code {
    font-size: 13px; line-height: 1.7; white-space: pre; display: block;
}
.code-panel .c { color: #a38e70; }
.code-panel .s { color: #eda17b; }

/* The heading sits above the grid; the photo centers vertically on the text. */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; margin-top: 18px; }
.about-text { color: var(--muted); max-width: 52ch; line-height: 1.7; margin-bottom: 14px; }
.about-photo {
    display: block; width: 100%; height: auto;
    border-radius: 14px; border: 1px solid var(--line);
}

.cta-band { text-align: center; padding: 80px 0; border-top: 1px solid var(--line); }
.cta-band h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
.cta-band p { color: var(--muted); margin-bottom: 28px; }

/* ── Footer ─────────────────────────────────────────────────────────────────
   One fragment (static/site-footer.html) on every public page. The links are
   grouped into named columns rather than run together in one line: the site
   now has enough destinations that a single row scanned as a list of words
   with no way to tell a model page from a legal one.

   The brand block and the columns share a row on a wide screen; the columns
   sit in an auto-fit grid so they wrap into two rows and then one as the
   viewport narrows, without a breakpoint per arrangement. Under both sits a
   ruled base line carrying the copyright and the two links that belong to
   neither group. */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.site-footer .shell { display: flex; flex-direction: column; gap: 40px; }
.site-footer p { font-size: 13px; color: var(--muted); }
.site-footer a { font-size: 13px; color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

.footer-top { display: flex; flex-wrap: wrap; gap: 40px 48px; }
.footer-brand { flex: 1 1 240px; max-width: 34ch; }
.footer-brand .wordmark { font-size: 17px; }
.footer-brand p { margin-top: 12px; }

/* Three named columns, sized in equal shares of whatever the brand block
   leaves. The basis is what decides the wrap: above it the columns sit beside
   the brand, below it they take a row of their own. */
.footer-cols {
    flex: 2 1 460px;
    display: grid; gap: 32px 40px;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
}
.footer-col-title {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink); margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-base {
    display: flex; flex-wrap: wrap; gap: 12px 24px;
    justify-content: space-between; align-items: center;
    padding-top: 24px; border-top: 1px solid var(--line);
}
.footer-base nav { display: flex; gap: 24px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
/* Questions are <details>, so opening one is the browser's job and no script
   is involved. Each row is ruled off from the next, and the marker is drawn
   here as a chevron: the native one differs per browser and sits too close to
   the text to read as a control. */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 0; cursor: pointer; list-style: none;
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: ""; margin-left: auto; width: 9px; height: 9px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-item summary:hover { color: var(--spice-deep); }
.faq-answer { padding: 0 0 20px; color: var(--muted); }
.faq-answer p + p, .faq-answer p + ul { margin-top: 12px; }
.faq-answer ul { padding-left: 20px; }
.faq-answer li { margin-bottom: 6px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero { padding: 56px 0 48px; }
    .hero .shell { grid-template-columns: 1fr; gap: 40px; }
    .surfaces { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .steps { grid-template-columns: 1fr 1fr; }
    .site-nav .nav-link { display: none; }
    .footer-brand { max-width: none; }
}
@media (max-width: 520px) {
    .steps { grid-template-columns: 1fr; }
    /* Three columns of links no longer fit the measure; two do. */
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ── Environment variants ──────────────────────────────────────────────────
   The server stamps body.beta on private-beta deploys: the sign-up calls-to-action
   (.when-auth) hide and the request-access notice (.when-beta) shows. Sign in is
   deliberately ungated - beta members still log in, only public registration is
   held back - so those links carry no .when-auth and stay visible in both modes. */
body.beta .when-auth { display: none !important; }
body:not(.beta) .when-beta { display: none !important; }

.beta-note { font-size: 15px; color: var(--muted); margin-top: 12px; }

/* ── Docs pages ─────────────────────────────────────────────────────────────
   Each /docs page wraps one static fragment in this shell; the console guide's
   fragment is shared with the console's Docs tab. The same markup is styled as
   console cards by dashboard.css; here it reads as one continuous document,
   hairline-ruled like the rest of the marketing site, with a persistent
   navigation sidebar down the left. */
/* Two columns, and the right one split into the page's title block and its
   body: on a narrow screen that lets the title come first and the navigation
   drop in between, rather than pushing the title below a long list of links.
   The sidebar column stretches the full height so its rule runs the length of
   the page; the nav inside it is what sticks. */
.docs-shell {
    display: grid; grid-template-columns: 216px minmax(0, 1fr);
    column-gap: 56px;
}
.docs-sidebar { grid-column: 1; grid-row: 1 / span 2; border-right: 1px solid var(--line); }
.docs-head { grid-column: 2; grid-row: 1; padding-top: 56px; }
.docs-page { grid-column: 2; grid-row: 2; }
.docs-nav {
    position: sticky; top: 64px;
    max-height: calc(100vh - 64px); overflow-y: auto;
    padding: 40px 14px 32px 0;
}
.docs-nav-title {
    font-family: var(--mono); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 14px;
}
.docs-nav ul { list-style: none; }
.docs-nav a {
    display: block; padding: 5px 14px 5px 0; font-size: 14px;
    color: var(--body); text-decoration: none;
}
.docs-nav a:hover { color: var(--spice-deep); }
.docs-nav-pages > li > a { font-weight: 600; color: var(--ink); }
.docs-nav-pages [aria-current="page"] { color: var(--spice-deep); }

/* The current page's own sections, one indent in, hung off a hairline so the
   two levels read as an outline rather than one flat list. */
.docs-nav-sections {
    margin: 2px 0 10px; padding-left: 12px;
    border-left: 1px solid var(--line);
}
.docs-nav-sections a { position: relative; font-size: 13.5px; color: var(--muted); }
/* .here is set by the page's scroll spy: the section the reader is in. It
   colours its own segment of the hairline the sub-list hangs from, so the
   reader's place shows as a mark on the outline rather than a second rule. */
.docs-nav-sections a.here { color: var(--spice-deep); font-weight: 600; }
.docs-nav-sections a.here::before {
    content: ""; position: absolute; left: -13px; top: 4px; bottom: 4px;
    width: 2px; background: var(--spice);
}

.docs-head, .docs-page { max-width: 760px; }
.docs-page { padding-bottom: 88px; }
.docs-head h1 { font-size: clamp(30px, 4vw, 38px); letter-spacing: -0.02em; margin-bottom: 12px; }
/* text-wrap: balance keeps a lede that does wrap from stranding a couple of
   words on its second line. */
.docs-lede { font-size: 17px; color: var(--muted); max-width: 54ch; text-wrap: balance; }
/* A model family page's subtitle runs the width of the article instead of the
   narrower measure the docs and the posts set theirs at. Those ledes are one
   short sentence and read better held in; these name a family and what it is
   for, and breaking them early left a ragged two-line block over a page whose
   first element is a full-width table. */
.models-shell .docs-lede { max-width: none; }
.docs-page p { margin-bottom: 12px; }
.docs-page p:last-child { margin-bottom: 0; }

/* scroll-margin: an anchor jump must clear the sticky header, not hide the
   heading it was aiming at underneath it. */
.docs-page .doc-section { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.docs-page .doc-section h2 { font-size: 22px; letter-spacing: -0.015em; margin-bottom: 14px; }
/* A section long enough to break up carries h3s. They read as a step below
   the section heading rather than as another one, and the contents list is
   still built from the sections, so a subheading adds no nav entry. */
.docs-page .doc-section h3 { font-size: 19px; letter-spacing: -0.01em; margin: 34px 0 12px; }
.docs-page .doc-note { font-size: 14px; color: var(--muted); margin-top: 12px; }

/* Request/response samples reuse the marketing code panel; <pre> keeps them
   readable with the stylesheet stripped. */
.docs-page .code-panel { margin: 14px 0; }
.docs-page .doc-section code { font-size: 13px; }

.docs-page .doc-terms { margin: 4px 0 14px; }
.docs-page .doc-terms dt { color: var(--ink); font-weight: 600; margin-top: 14px; }
.docs-page .doc-terms dd { margin-left: 0; }
.docs-page .doc-steps { margin: 0 0 0 22px; }
.docs-page .doc-steps li { margin-bottom: 8px; }

/* Narrow screens have no room for a column beside the text: the sidebar
   becomes a card above the article, page links in a wrapping pill row and the
   section links in two columns under them. Nothing is dropped - a phone reader
   gets the same navigation, just stacked. */
@media (max-width: 900px) {
    /* One column: title, then the navigation card, then the body. */
    .docs-shell { grid-template-columns: minmax(0, 1fr); }
    .docs-sidebar { grid-column: 1; grid-row: 2; border-right: none; }
    .docs-head { grid-column: 1; grid-row: 1; padding-top: 40px; }
    .docs-page { grid-column: 1; grid-row: 3; }
    .docs-nav {
        position: static; max-height: none; overflow: visible;
        margin: 32px 0 8px; padding: 20px 24px;
        border: 1px solid var(--line); border-radius: 12px; background: var(--card);
    }
    .docs-nav-pages { display: flex; flex-wrap: wrap; gap: 8px; }
    .docs-nav-pages > li > a {
        padding: 5px 14px; font-size: 13.5px; font-weight: 400;
        border: 1px solid var(--line); border-radius: 999px;
        background: var(--paper); color: var(--body);
    }
    .docs-nav-pages > li > a:hover { border-color: var(--spice); }
    .docs-nav-pages [aria-current="page"] {
        background: var(--spice-soft); border-color: var(--spice-soft);
        color: var(--spice-deep); font-weight: 600;
    }
    /* The pill row keeps its reading order whichever page is open. The current
       item stops generating a box of its own, so its pill stays in place among
       the pages either side of it and its section list becomes a flex item in
       its own right - ordered last, a full row wide, below every pill. Nesting
       the list inside the pill's row instead would push every page after it
       down past the sections, which reads as the pages having moved. */
    .docs-nav-pages > li.current { display: contents; }
    .docs-nav-sections {
        order: 1; flex-basis: 100%;
        margin: 10px 0 2px; padding: 12px 0 0 0;
        border-left: none; border-top: 1px solid var(--line);
        columns: 2; column-gap: 32px;
    }
    .docs-nav-sections li { break-inside: avoid; }
    .docs-nav-sections a.here::before { display: none; }
    .docs-page { padding-bottom: 72px; }
}
@media (max-width: 460px) {
    .docs-nav-sections { columns: 1; }
}

/* ── Pricing tables (the /docs/pricing page) ────────────────────────────── */
.pricing-wrap { overflow-x: auto; }
.pricing-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
.pricing-table th, .pricing-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pricing-table th { font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.pricing-note { font-size: 14px; color: var(--muted); margin-top: 14px; }
.pricing-table-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 32px 0 14px; }
/* The landing band's one note: it stands in for every explanation that lives
   on /docs/pricing, so it is ruled off rather than run on from the table. */
.pricing-footnote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── Blog (the /blog index and a post) ──────────────────────────────────── */
/* A post is one column of text, so its shell is narrower than the marketing
   grid's and the article reuses .docs-page for its typography - a post and a
   docs page are set in the same type on purpose. */
/* min-height keeps the footer off the fold while the index is short - a
   blog with two posts in it should not look like a broken page. */
.post-shell { max-width: 820px; padding-bottom: 88px; min-height: 70vh; }
.post-head { max-width: 760px; padding-top: 56px; }
/* The date line: above the heading on a post, above the title on an index
   card. A post's own heading sits in .docs-head, which the docs grid places. */
.post-head h1 { font-size: clamp(30px, 4vw, 38px); letter-spacing: -0.02em; margin: 10px 0 12px; }
.post-meta {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
    display: flex; gap: 10px; align-items: baseline;
}
/* The byline, when a post names an author, reads as a second item on the
   date line rather than a line of its own. */
.post-author::before { content: "\00B7"; margin-right: 10px; }

/* .docs-page ends on a wide gutter because it is the last thing on a docs
   page; on a post the closing note follows it, so close the gap. */
.post-body { padding-bottom: 28px; }
.post-body ul { margin: 0 0 12px 22px; }
.post-body ul li { margin-bottom: 6px; }
.post-body .pricing-wrap { margin: 16px 0; }

/* Placed explicitly in the docs grid, under the article - auto-placement
   would open a column of its own. The index has no grid there and ignores it. */
/* The closing note is the last thing above the site footer, so it carries the
   bottom gutter .docs-page ends a docs page on - without it the footer's rule
   lands right under the note. */
.post-foot {
    grid-column: 2; grid-row: 3;
    max-width: 760px; margin-top: 8px; padding: 20px 0 88px;
    border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);
}

/* Index: one card per post, ruled apart rather than boxed - the list is short
   and boxes would read as a grid of products. */
.post-list { max-width: 760px; margin-top: 40px; }
.post-card { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.post-card:last-child { border-bottom: none; margin-bottom: 0; }
.post-card h2 { font-size: 24px; letter-spacing: -0.015em; margin: 8px 0 10px; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--spice-deep); }
.post-card-lede { max-width: 58ch; margin-bottom: 10px; }
.post-card-more { font-size: 14px; font-weight: 600; text-decoration: none; }
.post-card-more:hover { text-decoration: underline; }

/* The header marks the section the reader is in, on the blog and nowhere
   else - the other pages' nav items all point away from the current page. */
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Follows the docs grid's own collapse: title, navigation card, article,
   then this. */
@media (max-width: 900px) {
    .post-foot { grid-column: 1; grid-row: 4; padding-bottom: 72px; }
}
@media (max-width: 640px) {
    .post-head { padding-top: 36px; }
}