/* ==========================================================================
   theme-2026.css — rolls the brand onto the pages that were NOT rebuilt.

   The homepage was redesigned structurally (brand.css + home-2026.css). The
   other thirteen public pages keep their existing markup and layout; this file
   re-skins the class vocabulary they share -- nav, .logo, .hero, .section,
   .feature-card, .cta-section, footer, .btn-primary -- onto the new palette
   and type.

   Restyle, do not restructure. Those pages each carry a 200-400 line inline
   <style> block of their own; rewriting thirteen of those by hand is where a
   rollout breaks something nobody notices for a month. Colour, type and chrome
   travel; the layouts stay.

   LOAD ORDER MATTERS. This file and brand.css are linked immediately before
   </head>, i.e. AFTER each page's inline <style>. Equal-specificity rules
   therefore win on document order, which is why most selectors here can simply
   mirror the legacy ones instead of escalating.

   ⚠️ THE ONE THING THAT IS NOT PURELY COSMETIC: the nav's `position`.
   The inline-styled pages use `position: fixed` and compensate with a
   hardcoded `padding-top` on the element below it (`.hero { padding: 140px
   ... }`). The pages on home.css use `position: sticky` and compensate with
   nothing, because sticky stays in flow. brand.css sets `sticky`, so loading
   it over a `fixed` page would have left a 140px gap under the nav on eight
   pages at once. Each page is therefore tagged `data-chrome` at rollout and
   keeps the behaviour its layout was built against. Unifying them means
   deleting those padding compensations page by page, which is a separate job.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nav positioning: preserved per page, never guessed.
   -------------------------------------------------------------------------- */
body[data-chrome='fixed'] nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

body[data-chrome='sticky'] nav {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* product.html: was `fixed`, moved into flow, and this fixes a live bug rather
   than a cosmetic one. It is the only inline-styled page that ALSO carries a
   promo banner, and a fixed nav at top:0 sat on top of that banner. The page
   does have a compensation rule -- `body.has-promo-banner .hero { padding-top:
   180px }` -- but `has-promo-banner` is only ever added by home.js, which this
   page does not load, so the rule has never once applied. Sticky stays in flow,
   the banner gets its own space, and no magic number is needed. */
body[data-chrome='sticky-inline'] nav {
    position: sticky;
    top: 0;
    z-index: 100;
}

body[data-chrome='sticky-inline'] .hero {
    padding-top: 80px;
}

/* --------------------------------------------------------------------------
   Page ground and type
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.6;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--ink);
}

.section h2,
h2 {
    color: var(--ink);
}

.section-subtitle,
.section p,
p {
    color: inherit;
}

.section-subtitle {
    color: var(--ink-muted);
    font-size: 1.05rem;
}

/* A hairline of the speed-line motif under every section heading. The cheapest
   way to carry the brand onto a page whose layout is not changing. */
.section h2::after,
.section-title::after {
    content: '';
    display: block;
    width: 78px;
    height: 3px;
    margin: 18px auto 0;
    transform: skewX(var(--slant));
    background: linear-gradient(90deg, var(--v-600), var(--orchid));
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
nav {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 14px 24px;
}

.nav-container {
    max-width: var(--measure);
}

/* The legacy text logo is replaced by the SVG wordmark at rollout; this keeps
   the anchor from adding a text line box around the image. */
.logo,
.nav-logo {
    display: block;
    line-height: 0;
    color: var(--v-800);
    text-decoration: none;
}

.logo img,
.nav-logo img {
    height: 26px;
    width: auto;
    display: block;
}

.nav-links {
    gap: 26px;
}

.nav-links a,
.nav-links a:not(.nav-btn) {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a:not(.nav-btn):hover {
    color: var(--v-800);
    border-bottom-color: var(--orchid);
}

.nav-links a.nav-btn,
.nav-btn {
    background: var(--v-800);
    color: #fff !important;
    border-radius: 0;
    padding: 9px 18px;
    border-bottom: 2px solid var(--v-950);
}

.nav-links a.nav-btn:hover,
.nav-btn:hover {
    background: var(--v-700);
    color: #fff !important;
    transform: none;
    box-shadow: none;
    border-bottom-color: var(--orchid);
}

/* the caret, as a sized triangle rather than a text glyph -- a glyph carries
   its own metrics and drops that one link below the row */
.nav-dropdown > a::after {
    content: '';
    display: block;
    margin-left: 7px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom-width: 0;
    border-left-width: 4px;
    border-right-width: 4px;
    opacity: 0.55;
}

.dropdown-menu {
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(76, 29, 149, 0.1);
}

.dropdown-menu a {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13px;
    color: var(--ink-muted);
    border-bottom: none;
}

.dropdown-menu a:hover {
    background: var(--paper-2);
    color: var(--v-800);
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   Heroes and dark bands
   -------------------------------------------------------------------------- */
.hero,
.hero-section,
.cta-section,
.page-hero {
    background: var(--v-950);
    color: var(--on-dark);
    position: relative;
    overflow: hidden;
}

/* two soft light sources, not one flat 135deg ramp */
.hero::before,
.hero-section::before,
.cta-section::before,
.page-hero::before {
    content: '';
    position: absolute;
    width: 760px;
    height: 760px;
    top: -400px;
    left: -200px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(124, 58, 237, 0.46) 0%,
        transparent 68%
    );
    pointer-events: none;
}

.hero::after,
.hero-section::after,
.cta-section::after,
.page-hero::after {
    content: '';
    position: absolute;
    width: 620px;
    height: 620px;
    right: -250px;
    bottom: -350px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(232, 121, 249, 0.26) 0%,
        transparent 68%
    );
    pointer-events: none;
}

.hero > *,
.hero-section > *,
.cta-section > *,
.page-hero > * {
    position: relative;
    z-index: 1;
}

.hero h1,
.hero-section h1,
.hero-title,
.cta-section h2,
.page-hero h1 {
    color: #fff;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.hero p,
.hero-section p,
.hero-subtitle,
.cta-section p,
.page-hero p {
    color: var(--on-dark-muted);
}

/* the motif rule is for light sections; on a dark band it fights the glow */
.cta-section h2::after,
.hero h2::after {
    display: none;
}

.hero-trust-line,
.hero-counter {
    color: var(--on-dark-faint);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.hero-counter strong,
.hero-trust-line strong {
    color: var(--cyan);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Section grounds
   -------------------------------------------------------------------------- */
.section-white,
.section.section-white {
    background: var(--paper);
}

.section-gray,
.section.section-gray,
.main-content {
    background: var(--paper-2);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.feature-card,
.benefit-card,
.persona-card,
.sample-card,
.comparison-card,
.metric-card,
.pricing-card,
.post-card,
.use-case-card {
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: none;
}

.feature-card h3,
.benefit-card h3,
.persona-card h3,
.sample-card h3,
.comparison-card h3 {
    color: var(--ink);
}

.feature-card p,
.benefit-card p,
.persona-card p,
.sample-card p {
    color: var(--ink-muted);
}

.section-gray .feature-card,
.section-gray .benefit-card,
.main-content .feature-card {
    background: var(--paper);
}

.benefit-icon,
.feature-icon,
.persona-icon {
    background: var(--v-800) !important;
    color: #fff;
    border-radius: 0;
}

.benefit-icon svg,
.feature-icon svg {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary,
.download-btn-primary,
.pricing-cta,
.hero-cta-btn {
    background: var(--orchid);
    color: var(--v-950) !important;
    border: none;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-weight: 600;
    box-shadow: 5px 5px 0 var(--v-700);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.btn-primary:hover,
.download-btn-primary:hover,
.pricing-cta:hover,
.hero-cta-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--v-600);
    color: var(--v-950) !important;
}

/* a primary button standing on a light section needs the inverse treatment */
.section-white .btn-primary,
.section-gray .btn-primary,
.main-content .btn-primary {
    background: var(--v-700);
    color: #fff !important;
    box-shadow: 5px 5px 0 var(--v-500);
}

.section-white .btn-primary:hover,
.section-gray .btn-primary:hover,
.main-content .btn-primary:hover {
    box-shadow: 7px 7px 0 var(--orchid);
    color: #fff !important;
}

.btn-secondary,
.download-btn-secondary,
.banner-cta-secondary {
    background: transparent;
    color: var(--v-800);
    border: 1.5px solid var(--rule-strong);
    border-radius: 2px;
    font-weight: 600;
}

.btn-secondary:hover,
.download-btn-secondary:hover {
    border-color: var(--v-700);
    background: var(--paper-2);
    color: var(--v-800);
}

.hero .btn-secondary,
.hero-section .btn-secondary,
.cta-section .btn-secondary {
    color: var(--orchid-pale);
    border-color: rgba(232, 121, 249, 0.42);
}

/* ⚠️ `.inline-cta a` is deliberately NOT in this rule.
   It was, and it made the product page's main CTA unreadable. On the homepage
   `.inline-cta` wraps a text link, so the mono/uppercase/dark-violet treatment
   below is right for it. On the legacy pages the very same class wraps a FILLED
   gradient button whose own CSS sets `color: white` -- and since both rules are
   (0,1,1) and this file loads later, this one won and painted dark violet text
   onto a violet button. The lesson is not about specificity: it is that one
   class name meant two different components on two different pages, and a
   blanket re-skin cannot tell them apart. */
.persona-cta,
.preview-link {
    color: var(--v-800);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid var(--orchid);
}

/* Filled CTA buttons keep whatever colour their own page gives them; only the
   geometry and face are brought onto the brand. */
.inline-cta a {
    font-family: var(--font-sans);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Assorted legacy bits
   -------------------------------------------------------------------------- */
a {
    color: var(--v-800);
}

/* Safety net for the bug that made the product page's CTA unreadable: a link
   colour set for light surfaces landing on a dark one. The bare `a` rule above
   is only (0,0,1), so any unclassed link inside a dark band would inherit deep
   violet on deep violet. These pages were not audited link by link, so the
   dark bands state their own colour rather than trusting that no such link
   exists. */
.hero a:not([class]),
.hero-section a:not([class]),
.cta-section a:not([class]),
.page-hero a:not([class]),
.samples a:not([class]) {
    color: var(--orchid-pale);
}

.promo-banner {
    background: var(--v-950);
    color: var(--orchid-pale);
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.promo-banner strong {
    color: var(--cyan);
}

.field-badge,
.chip,
.tag,
.no-signup-badge {
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    color: var(--v-800);
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.sample-table,
.data-table,
table {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.sample-table th,
.data-table th,
table th {
    background: var(--paper-3);
    color: var(--v-700);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-strong);
}

.sample-table td,
.data-table td,
table td {
    color: var(--ink-muted);
    border-bottom: 1px solid var(--rule);
}

blockquote,
.testimonial-quote {
    font-family: var(--font-serif);
    color: var(--ink);
}

code,
pre {
    font-family: var(--font-mono);
}

pre {
    background: var(--v-950);
    color: var(--on-dark);
    border: 1px solid var(--v-800);
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
    background: var(--v-950);
    color: var(--on-dark-muted);
    padding: 56px 24px 36px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin-bottom: 24px;
}

footer a,
.footer-links a {
    color: var(--on-dark-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

footer a:hover,
.footer-links a:hover {
    color: var(--orchid);
}

footer p {
    color: var(--on-dark-faint);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Focus visibility, kept consistent with the homepage
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--orchid);
    outline-offset: 3px;
}