/* ============================================================
   MyAgentFactory — Warmed-brand visual language (v3 mock)
   Editorial structure + human tone, re-skinned in the real
   brand: electric purple as ink/accent, electric-green "signal"
   node as the single highlight, warm paper, Fraunces serif for
   humanity. Scoped under body.brand to avoid affecting other pages.
   Brand kit: purple #7A2BFF→#B026FF · node #A8E016 · ink #2A2150
   ============================================================ */

body.brand {
    --paper:        #faf8f5;   /* warm near-white — primary background */
    --paper-deep:   #f1ece6;   /* warm section bands */
    --paper-soft:   #ffffff;   /* cards */
    --ink:          #2a2150;   /* warm indigo — primary text / headings */
    --surface:      #16193b;   /* true dark — footer, spec panels, brand band */
    --ink-muted:    #4a4665;   /* secondary body text (warmed to sit with --ink) */
    --ink-soft:     #838799;   /* tertiary text, eyebrows */
    --rule:         #e7e1d7;   /* warm hairline borders */

    --brand:        #7a2bff;   /* electric purple — primary accent */
    --brand-bright: #b026ff;   /* magenta end of the brand gradient */
    --brand-deep:   #5c1fcf;   /* hover / emphasis */
    --brand-soft:   #f1e9ff;   /* purple tint background */
    --brand-grad:   linear-gradient(120deg, #7a2bff 0%, #b026ff 100%);

    --signal:       #6ba300;   /* readable green for icons/text on light */
    --signal-node:  #a8e016;   /* the signal node — matches the mark's green */
    --error-ink:    #b23b3b;   /* form/status error text — warm red, not raw Tailwind red */

    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'cv11';
}

/* ── Typography ─────────────────────────────────────────────── */

body.brand h1, body.brand h2, body.brand h3, body.brand h4,
body.brand .serif {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    color: var(--ink);
    letter-spacing: -0.022em;
    line-height: 1.05;
    /* LOW optical size = far less thick/thin contrast, so crossbars (A, e,
       digits) carry weight and don't wash out. Weight kept high throughout. */
    font-variation-settings: 'opsz' 28, 'wght' 600;
    font-weight: 600;
}

body.brand h1 { font-size: clamp(2.85rem, 6vw, 5rem); font-variation-settings: 'opsz' 70, 'wght' 620; }
body.brand h2 { font-size: clamp(2.05rem, 3.8vw, 3rem); font-variation-settings: 'opsz' 48, 'wght' 600; }
body.brand h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -0.012em; line-height: 1.15; font-variation-settings: 'opsz' 30, 'wght' 620; }
body.brand h4 { font-size: 1.2rem; letter-spacing: -0.008em; line-height: 1.2; font-variation-settings: 'opsz' 20, 'wght' 640; }

body.brand p { color: var(--ink-muted); }
body.brand p.lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); color: var(--ink-muted); line-height: 1.55; }

body.brand .ink { color: var(--ink); }
body.brand .ink-muted { color: var(--ink-muted); }
body.brand .ink-soft { color: var(--ink-soft); }

/* The single highlighted hero word — purple gradient, echoing the logo's "Agent" */
body.brand .feature-word {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand);
}

body.brand .eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
body.brand .eyebrow-feature { color: var(--brand); }

/* ── The signal node — recurring brand motif (electric-green dot) ── */
body.brand .node {
    display: inline-block;
    width: 0.6em; height: 0.6em;
    border-radius: 999px;
    background: var(--signal-node);
    box-shadow: 0 0 0 0.28em rgba(168, 224, 22, 0.22);
    vertical-align: middle;
}

/* ── Layout containers ──────────────────────────────────────── */

/* :where() keeps these at zero specificity so per-page Tailwind padding
   utilities (pt-4, pb-10, ...) can override the defaults — without it the
   body.brand prefix silently beats every utility class. */
:where(body.brand section) { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
:where(body.brand section.section-tight) { padding: clamp(1.75rem, 3.5vw, 3rem) 0; }
/* First section sits just below the fixed nav — the generic section pad
   reads as dead space there, so pull the page's opening content up. */
:where(body.brand main > section:first-child) { padding-top: clamp(1.25rem, 2.5vw, 2.25rem); }

body.brand .container-wide  { max-width: 1480px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4.5rem); }
body.brand .container       { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4.5rem); }
body.brand .container-narrow{ max-width: 980px;  margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4.5rem); }

/* Modern asymmetric section: left rail (eyebrow + heading) + wide body.
   Fills the viewport width instead of a centred column floating in white. */
body.brand .split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) {
    body.brand .split { grid-template-columns: 4.5fr 7.5fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
    body.brand .split-head-sticky { position: sticky; top: 7rem; }
}

body.brand .band-deep { background: var(--paper-deep); }

/* Deep brand band — vertical violet→purple→violet. Brightest behind the
   headline, settles back to violet at the edges so it reads as its own rich
   moment rather than fading into the same flat ink as the footer below it. */
body.brand .band-brand {
    background: linear-gradient(180deg, #4c1d95 0%, #7a2bff 50%, #4c1d95 100%);
    color: #eceaf5;
}
body.brand .band-brand h1, body.brand .band-brand h2, body.brand .band-brand h3 { color: #ffffff; }
body.brand .band-brand p { color: #c3c2d8; }
body.brand .band-brand .eyebrow { color: rgba(236, 234, 245, 0.6); }

/* ── Buttons + links ────────────────────────────────────────── */

body.brand .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.95rem 1.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: filter 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    border: 1px solid transparent;
    line-height: 1;
}
body.brand .btn-primary {
    background: var(--brand-grad);
    color: #ffffff;
    box-shadow: 0 10px 26px -12px rgba(122, 43, 255, 0.6);
}
body.brand .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(122, 43, 255, 0.7); }

body.brand .btn-ghost {
    color: var(--ink);
    border-color: var(--ink);
    background: transparent;
}
body.brand .btn-ghost:hover { background: var(--ink); color: var(--paper); }

body.brand .band-brand .btn-primary { background: #ffffff; color: var(--brand-deep); box-shadow: none; }
body.brand .band-brand .btn-primary:hover { filter: none; background: #f3edff; }
body.brand .band-brand .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.4); }
body.brand .band-brand .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

body.brand .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}
body.brand .link-arrow:hover { color: var(--brand-deep); border-bottom-color: var(--brand-deep); }
body.brand .link-arrow svg { transition: transform 0.18s ease; }
body.brand .link-arrow:hover svg { transform: translateX(4px); }

/* ── Cards ──────────────────────────────────────────────────── */

body.brand .ed-card {
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    padding: clamp(1.75rem, 2.5vw, 2.5rem);
    border-radius: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
body.brand .ed-card:hover {
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -26px rgba(122, 43, 255, 0.4);
}

body.brand .card-num {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-size: 1.5rem;
    font-weight: 500;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* ── Hairline rules ─────────────────────────────────────────── */

body.brand hr.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
body.brand hr.rule-ink { height: 1px; background: var(--ink); border: 0; margin: 0; opacity: 0.85; }

/* ── Hero photograph frame ──────────────────────────────────── */

body.brand .hero-figure {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--paper-soft);
    box-shadow: 0 30px 70px -40px rgba(22, 25, 59, 0.45);
    aspect-ratio: 4 / 3;
}
body.brand .hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder shown until the real photograph is dropped in.
   Warm brand-tinted panel with the roofline motif — reads as "photo goes here". */
body.brand .hero-figure .hero-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.9rem; text-align: center; padding: 2rem;
    background:
        radial-gradient(90% 90% at 20% 10%, rgba(176, 38, 255, 0.14) 0%, transparent 60%),
        radial-gradient(90% 90% at 90% 100%, rgba(122, 43, 255, 0.12) 0%, transparent 55%),
        var(--paper-deep);
    color: var(--ink-soft);
    font-family: 'Inter', sans-serif; font-size: 0.85rem; letter-spacing: 0.02em;
}

/* Transparent top-left overlay on the hero image */
body.brand .hero-overlay {
    position: absolute; top: 1.3rem; left: 1.5rem; right: 1.5rem;
    display: flex; align-items: center; gap: 0.6rem;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 30, 'wght' 640;
    font-size: 1.25rem; line-height: 1.15; color: var(--ink);
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.7), 0 1px 3px rgba(255, 255, 255, 0.9);
}
body.brand .hero-node { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

/* ── Product name, top-right of a product-page hero ──────────
   Sits level with the category pill, above the at-a-glance
   panel. Serif, brand-coloured, sized to be unmissable. */
body.brand .hero-product-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--brand-bright);
    margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
    /* Name shares the top line with the pill; the panel top then lands
       exactly ONE headline line below the h1 top (level with the start
       of the second line, as the launch layout had it). The calc mirrors
       the h1 clamp so this holds at every viewport width:
       pill block (2rem + 1.75rem margin) + one h1 line (1.05em) - name height. */
    body.brand .hero-product-name {
        text-align: right;
        margin-bottom: calc(1.96rem + 1.05 * clamp(2.85rem, 6vw, 5rem));
    }
}

/* ── Outcome-card icon chip (home outcomes grid) ─────────────
   Success-green marker, top right of each card. Uses --signal
   (the readable green) so it doesn't wash out on light cards. */
body.brand .outcome-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem; border-radius: 13px;
    background: var(--brand-grad);
    color: var(--signal-node);
    flex-shrink: 0;
    box-shadow: 0 10px 22px -14px rgba(122, 43, 255, 0.65);
}

/* ── App UI screenshot frame ─────────────────────────────────
   Dark product screenshots on the warm paper. Tiles crop to a
   uniform aspect ratio (top-anchored) so rows stay level; the
   full image opens in the lightbox on click (ui-shot-lightbox.js). */
body.brand .ui-shot img {
    width: 100%; display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    border-radius: 14px;
    border: 1px solid var(--rule);
    box-shadow: 0 24px 50px -30px rgba(22, 25, 59, 0.5);
    cursor: zoom-in;
}
body.brand .ui-shot figcaption {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

/* Lightbox overlay (created on demand by ui-shot-lightbox.js) */
.ui-lightbox {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(22, 25, 59, 0.88);
    cursor: zoom-out;
}
.ui-lightbox img {
    max-width: 100%; max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}

/* ── Price stamp (product tiles) ─────────────────────────────
   Small dashed "stamp" showing the app's monthly add-on price
   on top of the platform subscription. */
body.brand .price-stamp {
    display: inline-flex; align-items: baseline; gap: 0.35rem;
    margin-top: 0.75rem;
    padding: 0.3rem 0.8rem;
    border: 1.5px dashed var(--brand);
    border-radius: 9px;
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 30, 'wght' 620;
    font-size: 1.05rem;
    color: var(--brand);
}
body.brand .price-stamp .price-stamp-period {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-soft);
}
body.brand .price-stamp-included {
    flex-shrink: 0;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

/* ── Hero message rotator (home) ─────────────────────────────
   Slides stack in one grid cell so the block is as tall as the
   tallest slide (no layout jump); Alpine toggles aria-hidden. */
body.brand .hero-rotator { display: grid; }
body.brand .hero-rotator > .hero-slide {
    grid-area: 1 / 1;
    transition: opacity 0.65s ease;
}
body.brand .hero-rotator > .hero-slide[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}
body.brand .hero-dots { display: flex; gap: 0.55rem; align-items: center; }
body.brand .hero-dot {
    width: 0.6rem; height: 0.6rem; border-radius: 999px;
    border: 1.5px solid var(--brand);
    background: transparent;
    padding: 0; cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}
body.brand .hero-dot[aria-current="true"] {
    background: var(--brand);
    transform: scale(1.15);
}
@media (prefers-reduced-motion: reduce) {
    body.brand .hero-rotator > .hero-slide { transition: none; }
}

/* ── Method stage cards (hero diagram / method page) ────────── */

body.brand .stage-card {
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    position: relative;
}
body.brand .stage-card .stage-num {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 144;
    font-size: 0.875rem;
    color: var(--brand);
    letter-spacing: 0.04em;
}
body.brand .stage-card .stage-name {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
    margin-top: 0.15rem;
    line-height: 1.1;
}
body.brand .stage-card .stage-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-top: 0.4rem;
    line-height: 1.4;
}
body.brand .stage-card.is-active { border-color: var(--brand); background: var(--brand-soft); }

/* ── Shared page components (Method / Platform / Start Here / products) ── */

/* Section bands for alternating rhythm */
body.brand .band-paper { background: var(--paper-deep); }
body.brand .band-soft  { background: #f6f1ff; }   /* faint purple wash */

/* Small pill tag / eyebrow badge (e.g. "Layer 1", "For operators") */
body.brand .tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(122, 43, 255, 0.14);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}
body.brand .tag-ink { color: var(--ink); background: var(--paper-deep); border-color: var(--rule); }

/* Gradient number badge (circle) for stages / steps */
body.brand .num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--brand-grad);
    color: #fff;
    /* Inter, not Fraunces — thin serif crossbars wash out white-on-purple */
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
body.brand .num-badge-sm { width: 2rem; height: 2rem; border-radius: 10px; font-size: 0.95rem; }

/* Check list — purple ticks */
body.brand .check-list { list-style: none; margin: 0; padding: 0; }
body.brand .check-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.7rem;
    color: var(--ink-muted);
    line-height: 1.5;
}
body.brand .check-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.28em;
    width: 1.1rem; height: 1.1rem;
    border-radius: 999px;
    background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a2bff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
}

/* "You get" sub-label */
body.brand .sublabel {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Spec / config panel (mono technical cards) */
body.brand .spec-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 1.5rem;
    color: #d7d5e6;
    font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.82rem;
}
body.brand .spec-card .spec-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
body.brand .spec-card .spec-row:last-child { border-bottom: 0; }
body.brand .spec-card .spec-accent { color: var(--brand-bright); }

/* Feature tile (compact icon card) */
body.brand .tile {
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 1.5rem;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.brand .tile:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(122, 43, 255, 0.4); }
body.brand .tile-product {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}
body.brand .tile-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
}
body.brand .tile-footer .price-stamp { margin-top: 0; }
body.brand .tile-product-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
body.brand .tile-product-link:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 4px;
    border-radius: 3px;
}
body.brand .tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 12px;
    background: var(--brand-soft); color: var(--brand);
    margin-bottom: 1rem;
}

/* Form fields */
body.brand .field-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 0.4rem;
}
body.brand .field-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body.brand .field-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(122, 43, 255, 0.15);
}

/* Diagnostic — option buttons + progress */
body.brand .opt-btn {
    width: 100%;
    text-align: left;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    border: 1.5px solid var(--rule);
    background: var(--paper-soft);
    color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
body.brand .opt-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
body.brand .opt-btn.is-selected { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
body.brand .progress-track { height: 6px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
body.brand .progress-fill { height: 100%; background: var(--brand-grad); transition: width 0.4s ease; }

/* Pricing tier cards */
body.brand .price-card {
    position: relative;
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: clamp(1.75rem, 2.5vw, 2.25rem);
    display: flex;
    flex-direction: column;
    height: 100%;
}
body.brand .price-card.is-recommended {
    border-color: var(--brand);
    box-shadow: 0 24px 48px -28px rgba(122, 43, 255, 0.45);
}
body.brand .price-card-badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-grad);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}
body.brand .price-card-name { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; color: var(--ink); }
body.brand .price-card-amount { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 40, 'wght' 620; font-size: 2.5rem; color: var(--ink); line-height: 1; margin-top: 0.6rem; }
body.brand .price-card-period { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--ink-soft); margin-left: 0.35rem; }
body.brand .price-card-desc { font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.6rem; min-height: 2.6em; }
body.brand .price-card .check-list { margin-top: 1.5rem; margin-bottom: 1.5rem; flex: 1; }
body.brand .price-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* FAQ accordion */
body.brand .faq-item { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-soft); overflow: hidden; }
body.brand .faq-item + .faq-item { margin-top: 0.75rem; }
body.brand .faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.4rem; text-align: left; background: none; border: 0; cursor: pointer;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.98rem; color: var(--ink);
}
body.brand .faq-q svg { flex-shrink: 0; color: var(--brand); transition: transform 0.2s ease; }
[x-cloak] { display: none !important; }

body.brand .faq-a { padding: 0 1.4rem 1.25rem; font-size: 0.92rem; color: var(--ink-muted); line-height: 1.6; }

/* Big card container (diagnostic shell, pricing) */
body.brand .panel {
    background: var(--paper-soft);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    box-shadow: 0 30px 70px -50px rgba(22, 25, 59, 0.4);
}

/* ── Brand logo lockup in nav ───────────────────────────────── */
/* Hide the placeholder mark + plain wordmark; show the composed lockup:
   roofline mark + Inter wordmark, no tagline. */
body.brand header[role="banner"] .nav-brand-svg,
body.brand header[role="banner"] .nav-wordmark-plain { display: none !important; }

/* Taller bar to give the bigger lockup + stacked tagline room.
   Match the body container width + gutters so the logo/menu edges line up
   with the page content below (kills the misaligned "floating" look). */
body.brand header[role="banner"] nav {
    height: 5.5rem !important;
    max-width: 1480px !important;
    padding-left: clamp(1.5rem, 5vw, 4.5rem) !important;
    padding-right: clamp(1.5rem, 5vw, 4.5rem) !important;
}
body.brand header[role="banner"] + div[aria-hidden="true"] { height: 5.5rem !important; }

/* Bottom-align the whole lockup so the sawtooth base, wordmark and tagline
   all land on the Sign Up pill's baseline (y=56 in a 76px bar). */
body.brand header[role="banner"] nav > a {
    align-self: stretch;
    align-items: flex-end !important;
    padding-bottom: 26px;
}
body.brand header[role="banner"] .nav-brand-mark {
    display: block !important;
    height: 46px;
    width: auto;
}
body.brand header[role="banner"] .nav-brand-lockup {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}
body.brand header[role="banner"] .nav-brand-word {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--ink) !important;
    line-height: 1;
}
body.brand header[role="banner"] .nav-brand-word-accent {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.brand header[role="banner"] .nav-brand-tagline {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #5c6180 !important;
    line-height: 1;
    white-space: nowrap;
}

/* ── Nav overrides — make existing nav.html sit on warm paper ── */

body.brand header[role="banner"] {
    background: rgba(250, 248, 245, 0.86) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule) !important;
    box-shadow: none !important;
}
body.brand header[role="banner"] .text-brand-500,
body.brand header[role="banner"] svg.text-brand-500 { color: var(--brand) !important; }

body.brand header[role="banner"] a,
body.brand header[role="banner"] button { color: var(--ink) !important; }
body.brand header[role="banner"] .text-slate-600,
body.brand header[role="banner"] .text-slate-300,
body.brand header[role="banner"] .text-slate-700,
body.brand header[role="banner"] .text-slate-200 { color: #33375c !important; }

body.brand header[role="banner"] a:hover,
body.brand header[role="banner"] .nav-link:hover,
body.brand header[role="banner"] button:hover { color: var(--brand) !important; }

body.brand header[role="banner"] .btn-primary {
    background: var(--brand-grad) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -12px rgba(122, 43, 255, 0.6) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
}
body.brand header[role="banner"] .btn-primary:hover { filter: brightness(1.06); }

body.brand header[role="banner"] .theme-toggle { display: none !important; }

@media (max-width: 639px) {
    body.brand header[role="banner"] nav {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    body.brand header[role="banner"] .nav-brand-mark { height: 36px; }
    body.brand header[role="banner"] .nav-brand-lockup { display: none !important; }
    body.brand header[role="banner"] nav > div:last-child {
        gap: 0.5rem;
        margin-left: 0.5rem;
    }
}

body.brand .nav-dropdown {
    background: var(--paper-soft) !important;
    border: 1px solid var(--rule) !important;
    box-shadow: 0 16px 36px -12px rgba(22, 25, 59, 0.14) !important;
    border-radius: 12px !important;
}
body.brand .nav-dropdown a { color: var(--ink-muted) !important; }
body.brand .nav-dropdown a:hover { background: var(--brand-soft) !important; color: var(--brand) !important; }

body.brand #mobile-menu {
    background: var(--paper) !important;
    border-top: 1px solid var(--rule) !important;
}

/* ── Footer overrides ───────────────────────────────────────── */

body.brand footer {
    background: var(--surface) !important;
    color: #b7b9cc !important;
    border-top: 1px solid var(--surface) !important;
}
body.brand footer * { border-color: rgba(255, 255, 255, 0.1) !important; }
body.brand footer a { color: #b7b9cc !important; }
body.brand footer a:hover { color: #ffffff !important; }
body.brand footer h3,
body.brand footer h4,
body.brand footer .text-slate-900,
body.brand footer .text-white,
body.brand footer .text-slate-100 { color: #ffffff !important; }
body.brand footer .text-brand-500,
body.brand footer .text-brand-400 { color: var(--brand-bright) !important; }
body.brand footer .text-slate-600,
body.brand footer .text-slate-500,
body.brand footer .text-slate-400,
body.brand footer .text-slate-300,
body.brand footer .text-slate-200 { color: #9a9cb2 !important; }
body.brand footer p { color: #9a9cb2 !important; }

/* Footer brand lockup (dark bg): swap placeholder for the wave mark + wordmark */
body.brand footer .footer-brand-svg,
body.brand footer .footer-word-plain { display: none !important; }
body.brand footer .footer-brand-mark { display: block !important; height: 40px; width: auto; }
body.brand footer .footer-lockup { display: flex !important; flex-direction: column; gap: 3px; }
body.brand footer .footer-word {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em;
    color: #ffffff !important; line-height: 1;
}
body.brand footer .footer-word-accent {
    /* lighter purple so it reads on the dark footer */
    background: linear-gradient(120deg, #9a5bff, #c264ff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.brand footer .footer-tagline {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600; font-size: 0.58rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: #9a9cb2 !important; line-height: 1;
}

/* Footer column headings: clean small caps, not big serif */
body.brand footer h3 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-variation-settings: normal !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #d6d7e4 !important;
    line-height: 1.4 !important;
}

/* ── Skip link ──────────────────────────────────────────────── */

body.brand .skip-link {
    position: absolute;
    left: -9999px;
    background: var(--surface);
    color: var(--paper);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}
body.brand .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; }

/* ── Blog post body — markdown-rendered prose ──────────────────
   Raw HTML from the markdown pipeline (h2/h3/p/ul/ol/a/strong/em/
   code/blockquote) isn't touched by Tailwind (no typography plugin
   in this project), so it needs its own type treatment here. ── */

body.brand .post-prose {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-muted);
}

body.brand .post-prose > * + * { margin-top: 1.4em; }

body.brand .post-prose h2 {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    font-variation-settings: 'opsz' 48, 'wght' 600;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.15;
    font-size: 1.7rem;
    color: var(--ink);
    margin-top: 2.2em;
}

body.brand .post-prose h3 {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    font-variation-settings: 'opsz' 30, 'wght' 620;
    font-weight: 620;
    letter-spacing: -0.012em;
    line-height: 1.2;
    font-size: 1.3rem;
    color: var(--ink);
    margin-top: 1.8em;
}

body.brand .post-prose p { color: var(--ink-muted); }

body.brand .post-prose a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
body.brand .post-prose a:hover { border-bottom-color: var(--brand); }

body.brand .post-prose strong { color: var(--ink); font-weight: 700; }

body.brand .post-prose ul,
body.brand .post-prose ol { padding-left: 1.4em; }

body.brand .post-prose li { margin-bottom: 0.5em; }

body.brand .post-prose li::marker { color: var(--brand); }

body.brand .post-prose blockquote {
    border-left: 3px solid var(--brand);
    padding-left: 1.2em;
    color: var(--ink-muted);
    font-style: italic;
}

body.brand .post-prose code {
    background: var(--brand-soft);
    color: var(--brand-deep);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

body.brand .post-prose hr {
    border: 0;
    height: 1px;
    background: var(--rule);
    margin: 2.5em 0;
}