/* ============================================================
   anota.cloud marketing site
   Brand: teal→green wordmark, blue-hued neutrals. Stripe-quality bar.
   ============================================================ */

:root {
    --an-teal: #1B9AAA;
    --an-green: #7DC242;
    --an-primary: #16A385;
    --an-primary-dark: #0F8A70;
    --an-primary-subtle: #F8FAFC;   /* one light surface across the product */
    --an-gradient: linear-gradient(90deg, #1B9AAA, #7DC242);

    --an-ink: #0B1929;
    --an-slate-800: #1E3A5F;
    --an-slate-600: #475B73;
    --an-slate-500: #64748B;
    --an-slate-400: #94A3B8;
    --an-slate-300: #CBD5E1;
    --an-slate-200: #E2E8F0;
    --an-slate-100: #F1F5F9;
    --an-slate-50: #F8FAFC;

    --an-shadow-sm: 0 1px 3px rgba(11,25,41,.08), 0 1px 2px rgba(11,25,41,.04);
    --an-shadow-md: 0 4px 6px rgba(11,25,41,.06), 0 2px 4px rgba(11,25,41,.04);
    --an-shadow-lg: 0 10px 24px rgba(11,25,41,.08), 0 4px 8px rgba(11,25,41,.04);
    --an-shadow-xl: 0 20px 48px rgba(11,25,41,.10), 0 8px 16px rgba(11,25,41,.04);
    --an-shadow-glow: 0 0 0 1px rgba(22,163,133,.08), 0 4px 16px rgba(22,163,133,.12);

    /* ---- brand tints (light) ---- */
    /* Surface tints are cool neutrals, not mint. Pale green reads as a competing surface colour
       against the navy darks and the blue-hued slate scale; the brand greens earn far more as
       accents on dark than as washes on light. */
    --an-teal-50:  #F8FAFC;       /* light surfaces all resolve to the same value */
    --an-teal-100: #F8FAFC;
    --an-green-100:#F8FAFC;
    --an-border-tint: #E2E8F0;    /* borders stay one step darker — otherwise tinted panels
                                     lose the edge that separates them from the page */

    /* ---- brand shades ---- */
    --an-primary-deep: #1E3A5F;   /* kickers and links — navy, 9.7:1 on #fff. Dark green here
                                     clashed with the navy chrome and read as a third brand hue. */
    --an-green-700: #16543C;      /* retained for the few green-on-light spots that must stay green */

    /* ---- navy dark family (the ONLY marketing dark; --an-ink stays for text) ---- */
    /* Dark surfaces are navy, matching the app and builder mastheads. They were teal-black
       (#083540/#05262C), which put a teal dark band under a navy nav on the same page — two
       different blacks. Navy also gives the brand teal and green somewhere to be bright
       against; on a teal-black band they sat too close to the background to carry. */
    --an-navy-900: #0F2942;       /* dark band base */
    --an-navy-950: #0B1929;       /* footer — same value as the mastheads' --an-ink */
    --an-on-dark: #EEF4FA;
    --an-on-dark-muted: rgba(238,244,250,.76);
    --an-dark-line: rgba(242,251,242,.12);

    /* ---- bright accents — dark surfaces ONLY, never as text on light ---- */
    --an-teal-bright:  #53D7C0;
    --an-green-bright: #A8DC6E;
    --an-grad-text-dark: linear-gradient(90deg, #53D7C0, #A8DC6E);

    /* ---- band backgrounds ---- */
    /* The hero keeps a trace of brand in its glows — that is accent behaviour — but settles onto
       a cool base rather than mint. */
    --an-band-hero: radial-gradient(1200px 500px at 70% -10%, rgba(27,154,170,.13), transparent 60%),
                    radial-gradient(900px 400px at 15% 5%, rgba(125,194,66,.10), transparent 60%),
                    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    --an-band-tint: #F8FAFC;
    --an-band-deep: radial-gradient(1000px 520px at 85% -10%, rgba(125,194,66,.16), transparent 60%),
                    radial-gradient(900px 480px at 8% 108%, rgba(27,154,170,.28), transparent 55%),
                    var(--an-navy-900);
    /* Was a green-on-green gradient band, which put a third dark hue on a page that already has
       navy. Now navy, with the brand green surviving as the glow across it. */
    --an-band-grad: radial-gradient(700px 400px at 85% 15%, rgba(125,194,66,.26), transparent 62%),
                    linear-gradient(135deg, #0B1929 0%, #14324F 60%, #1B4468 100%);

    /* ---- staging & depth ---- */
    --an-platform: #F8FAFC;
    --an-shadow-deep: 0 24px 64px rgba(6,51,43,.20), 0 8px 24px rgba(6,51,43,.10);
    --an-glow-green: 0 0 0 1px rgba(125,194,66,.25), 0 24px 64px rgba(0,0,0,.45);

    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    --ease-out: cubic-bezier(.1, .9, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; }

.mkt {
    font-family: var(--font);
    color: var(--an-ink);
    background: #fff;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.mkt a { color: var(--an-primary); }
.mkt a:hover { color: var(--an-primary-dark); }

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

/* ---------- nav ---------- */
/* Navy masthead, matching the app and the builder — one product, one chrome. The gradient
   hairline (::before, below) already existed here and now reads far stronger against navy than
   it ever did against near-white. */
.mkt-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--an-navy-950);
    border-bottom: 0;
}

/* !important mirrors the neutral rule below: the broader ".mkt a" selector outranks this one and
   would otherwise repaint these links teal on navy, which fails contrast badly. */
.mkt-nav .mkt-nav-link { color: rgb(255 255 255 / .72) !important; }
.mkt-nav .mkt-nav-link:hover { color: #fff !important; background: rgb(255 255 255 / .1); }

/* brand gradient hairline across the top of the nav */
.mkt-nav::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--an-gradient);
}

.mkt-nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 36px;
}

.mkt-logo { display: flex; align-items: center; text-decoration: none; }
/* the "anota Forms" wordmark is much wider than the old "anota"-only mark (~6.9:1 vs ~2.9:1) —
   a shorter height keeps the lockup from crowding the nav links next to it. */
.mkt-logo img { height: 22px; display: block; }

.mkt-nav-links { display: flex; gap: 4px; }

.mkt-nav-link {
    font-size: .875rem;
    font-weight: 600;
    /* !important: without it, the higher-specificity ".mkt a" rule above wins and
       renders this as primary teal instead of the intended neutral — that silently
       dropped this link's contrast on white to 3.17:1 (fails 4.5:1 AA). */
    color: var(--an-slate-600) !important;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: background 150ms, color 150ms;
    /* Never wrap: with the Claude link + pill the nav got tight at ~1366px and labels broke
       onto two lines. Keep each link (and its pill) on one line. */
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.mkt-nav-link:hover { background: var(--an-slate-100); color: var(--an-ink); }

.mkt-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mkt-nav-links { flex-wrap: nowrap; }
@media (max-width: 1280px) { .mkt-nav-link { padding: 8px 10px; } }

/* The shared LanguageSwitcher (anota-forms.css) ships colors tuned for its other host
   surfaces; here in the marketing nav ".mkt a" would otherwise win on specificity and
   render the "EN"/"PT" links as primary teal at 3.17:1 (fails 4.5:1 AA). Retarget to the
   same neutral as .mkt-nav-link; the "current" language keeps its light teal pill
   background but swaps to a dark neutral foreground (was teal-on-tint at 2.84:1). */
/* Retuned for the navy masthead — these were slate-on-white and are now white-on-navy. */
.mkt-nav .an-lang-link { color: rgb(255 255 255 / .62); }
.mkt-nav .an-lang-link:hover { color: #fff; }
.mkt-nav .an-lang-current { color: #fff; background: rgb(255 255 255 / .14); }

/* ---------- mobile nav (hamburger + drawer, CSS-only) ---------- */
/* Marketing pages render static SSR (no @rendermode) so this uses the
   checkbox/:checked pattern instead of C# state. */
.mkt-nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mkt-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* White on the navy masthead — slate-800 bars were invisible against it on mobile. */
.mkt-nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

.mkt-nav-toggle:focus-visible ~ .mkt-nav-inner .mkt-nav-burger { outline: 2px solid var(--an-primary); outline-offset: 2px; }

.mkt-nav-toggle:checked ~ .mkt-nav-inner .mkt-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkt-nav-toggle:checked ~ .mkt-nav-inner .mkt-nav-burger span:nth-child(2) { opacity: 0; }
.mkt-nav-toggle:checked ~ .mkt-nav-inner .mkt-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mkt-nav-drawer {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid var(--an-slate-100);
    box-shadow: var(--an-shadow-lg);
    padding: 8px 0;
}

.mkt-nav-toggle:checked ~ .mkt-nav-drawer { display: flex; }

.mkt-nav-drawer-link {
    display: block;
    padding: 14px 24px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--an-slate-600);
    text-decoration: none;
    border-bottom: 1px solid var(--an-slate-100);
}

.mkt-nav-drawer-link:last-child { border-bottom: none; }
.mkt-nav-drawer-link:hover { background: var(--an-slate-50); color: var(--an-ink); }
.mkt-nav-drawer-primary { color: var(--an-primary) !important; }

/* Safety net: never show the drawer once the viewport crosses back to desktop,
   even if the checkbox is still checked from a resize. */
@media (min-width: 641px) {
    .mkt-nav-toggle:checked ~ .mkt-nav-drawer { display: none; }
}

/* ---------- buttons ---------- */
.mkt-btn-primary {
    display: inline-block;
    /* White text on an-primary measured 3.17:1, and even an-primary-dark only reaches 4.29:1
       (both fail 4.5:1) — an-green-700 clears it at ~8.9:1. Hover keeps the same fill and relies
       on the existing box-shadow escalation for feedback, rather than adding a second unverified
       shade purely for a hover-only accent with no contrast requirement of its own. */
    background: var(--an-green-700);
    color: #fff !important;
    font-weight: 600;
    font-size: .875rem;
    padding: 10px 24px;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms, transform 100ms, box-shadow 200ms;
}

.mkt-btn-primary:hover { box-shadow: var(--an-shadow-md); }
.mkt-btn-primary:active { transform: scale(.98); }
.mkt-btn-primary.mkt-btn-lg { padding: 14px 32px; font-size: 1rem; }

.mkt-btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--an-slate-600) !important;
    font-weight: 600;
    font-size: .875rem;
    padding: 10px 24px;
    border-radius: 6px;
    border: 1px solid var(--an-slate-300);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
}

.mkt-btn-ghost:hover { background: var(--an-slate-50); border-color: var(--an-slate-400); }
.mkt-btn-ghost.mkt-btn-lg { padding: 14px 32px; font-size: 1rem; }

/* ---------- hero ---------- */
/* Two-column layout: headline/CTA left, live form preview right — replaces the earlier
   centered-stack hero. The visual no longer overlaps into the next band (that trick, still
   used by Showcase/Claude via .band-pull-top, doesn't apply once the visual sits in its own
   column instead of spanning full width), so .mkt-hero owns its own bottom padding now. */
.mkt-hero {
    padding: 72px 0 88px;
    background: var(--an-band-hero);
}

.mkt-hero .mkt-container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
}

.mkt-hero-inner { text-align: left; }

.mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 600;
    /* an-primary here was 3.03:1 on this subtle background (fails 4.5:1 for normal text) —
       an-green-700 is the palette's existing "green-on-light" token, already ~8.5:1 here. */
    color: var(--an-green-700);
    background: var(--an-primary-subtle);
    border-radius: 999px;
    padding: 5px 16px;
    margin-bottom: 24px;
}

/* live-status dot on the hero badge only — signals "this is current", not decorative elsewhere */
.mkt-eyebrow-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--an-green); flex-shrink: 0; }

.mkt-hero h1 {
    font-size: clamp(2.75rem, 6vw, 4.25rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.035em;
    margin: 0 0 20px;
}

.mkt-hero h1 .mkt-grad {
    background: var(--an-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mkt-hero-sub {
    font-size: 1.3125rem;
    color: var(--an-slate-600);
    max-width: 46ch;
    margin: 0 0 36px;
}

.mkt-hero-ctas { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }

.mkt-hero-note { margin-top: 16px; font-size: .8125rem; color: var(--an-slate-500); }

/* /showcase — the embedded live demo form, framed like the hero's product visual so it
   doesn't read as a bare unstyled iframe dropped into the page. */
.mkt-showcase-frame {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid var(--an-slate-200);
    box-shadow: var(--an-shadow-deep);
    overflow: hidden;
    background: #fff;
}

.showcase-jumpnav {
    position: sticky;
    top: 64px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 10px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    border: 1px solid var(--an-slate-200);
    box-shadow: var(--an-shadow-sm);
}

.showcase-jumpnav a {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--an-slate-600);
    text-decoration: none;
    white-space: nowrap;
}

.showcase-jumpnav a:hover {
    background: var(--an-primary-subtle);
    color: var(--an-primary-deep);
}

/* hero product visual — a real rendered form in a browser frame, the right column of the
   two-column hero grid. overflow stays visible so the float chips can sit just outside the
   frame — children carry the rounded corners. */
.mkt-hero-visual {
    border-radius: 16px;
    border: 1px solid var(--an-slate-200);
    box-shadow: var(--an-shadow-deep);
    position: relative;
    z-index: 2;
    background: #fff;
}

.mkt-hero-visual .mkt-browser-bar { border-radius: 16px 16px 0 0; }
.mkt-hero-visual .mkt-hero-form { border-radius: 0 0 16px 16px; }

.mkt-browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--an-slate-50);
    border-bottom: 1px solid var(--an-slate-200);
    padding: 10px 16px;
}

.mkt-browser-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--an-slate-200); }

.mkt-browser-url {
    margin-left: 12px;
    font-family: var(--font-mono);
    font-size: .75rem;
    /* an-slate-400 measured 2.56:1 on white (fails 4.5:1) — an-slate-600 is already the
       product's standard secondary-text-on-white color elsewhere (e.g. .mkt-hero-sub). */
    color: var(--an-slate-600);
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 999px;
    padding: 4px 16px;
}

.mkt-hero-form {
    padding: 40px 24px 8px;
    background: #f4f9f7;
    max-height: 430px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
}

.mkt-hero-form-page {
    max-width: 620px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    padding: 32px 36px;
    box-shadow: var(--an-shadow-md);
}

/* With the AI "Describe your form" box in the frame (Home.razor, AI configured), the frame drops
   its own height cap and fade: they would fade out the prompt box and clip a generated form's
   Save button. The box's preview applies the cap/fade to the demo form only
   (AiFormGeneratorBox.razor.css). */
.mkt-hero-form--ai {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 20px 20px 16px;
}

/* ---------- sections ---------- */
.mkt-section { padding: 88px 0; }
.mkt-section-alt { background: var(--an-teal-50); }

.mkt-section-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }

/* .mkt prefix: kickers are <p>s inside .mkt-section-head/.mkt-split, whose p color
   rules otherwise out-specify a bare .mkt-kicker. (.band-deep .mkt-kicker, declared
   later at equal specificity, still wins on dark bands.) */
.mkt .mkt-kicker {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--an-primary-deep);
    margin: 0 0 12px;
}

.mkt-section-head h2 {
    font-size: clamp(2.25rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.mkt-section-head p { font-size: 1.125rem; color: var(--an-slate-500); margin: 0; }

/* features grid */
.mkt-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
}

.mkt-feature h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 14px 0 8px;
}

.mkt-feature p { font-size: .9375rem; color: var(--an-slate-500); margin: 0; }

.mkt-feature svg { width: 26px; height: 26px; color: var(--an-primary); }

/* deep feature split */
.mkt-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.mkt-split + .mkt-split { margin-top: 88px; }

.mkt-split h2 { font-size: clamp(2rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 16px; line-height: 1.2; }
.mkt-split > div > p { color: var(--an-slate-600); font-size: 1.0625rem; margin: 0 0 20px; }

.mkt-checklist { list-style: none; padding: 0; margin: 0; }
.mkt-checklist li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 12px;
    color: var(--an-slate-600);
    font-size: .9375rem;
}
.mkt-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--an-primary-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A385' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* honest-gaps checklist (Compare page): a checkmark here would read as "we have this",
   so this variant swaps in a neutral marker matching .mkt-compare .no's aesthetic. */
.mkt-checklist-gaps li::before {
    background: var(--an-slate-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475B73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/10px no-repeat;
}

.mkt-visual-card {
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    box-shadow: var(--an-shadow-lg);
    padding: 28px;
}

/* real product screenshot frame */
.mkt-shot {
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    box-shadow: var(--an-shadow-lg);
    overflow: hidden;
    line-height: 0;
}

.mkt-shot img { display: block; width: 100%; height: auto; }

/* logic rule visual */
.mkt-logic-rule {
    font-size: .875rem;
    border: 1px solid var(--an-slate-200);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--an-slate-50);
}

.mkt-logic-rule strong { color: var(--an-primary); font-weight: 600; }

.mkt-logic-chip {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 5px;
    padding: 2px 10px;
    font-weight: 600;
    color: var(--an-slate-800);
    margin: 0 2px;
}

/* ---------- homepage template grid ---------- */
/* .gal-card/.gal-thumb/.gal-card-body family mirrors Gallery.razor.css's mini-preview card so
   Home's cards render identically to the gallery's. Gallery.razor.css is scoped to that
   component (Blazor-generated attribute selectors), so it can't style markup rendered by this
   page — the rules are copied here rather than shared. Keep both in sync if either changes. */
.gal-card {
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--an-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 250ms cubic-bezier(.1, .9, .2, 1), box-shadow 250ms cubic-bezier(.1, .9, .2, 1), border-color 250ms cubic-bezier(.1, .9, .2, 1);
}

.gal-card:hover {
    transform: translateY(-4px);
    border-color: rgba(22,163,133,.30);
    box-shadow: 0 16px 40px -12px rgba(14,97,83,.20);
}

.gal-thumb {
    position: relative;
    height: 190px;
    overflow: hidden;
    border-bottom: 1px solid var(--an-slate-100);
    pointer-events: none;
}

.gal-thumb-scale {
    transform: scale(.48);
    transform-origin: top center;
    width: 208%;
    margin-left: -54%;
    user-select: none;
}

.gal-thumb-page {
    max-width: 560px;
    margin: 22px auto;
    padding: 28px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(11, 25, 41, .10);
}

.gal-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.gal-card-body-plain {
    padding-top: 24px;
    border-top: 3px solid var(--an-primary-subtle);
}

.gal-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.gal-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--an-ink);
    margin: 0;
    line-height: 1.35;
}

.gal-badge {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    /* was --an-slate-500 (#64748B): 4.34:1 on the --an-slate-100 tint, fails 4.5:1 AA.
       --an-slate-600 (#475B73) clears it at 6.37:1, next step in the same ramp. */
    color: var(--an-slate-600);
    background: var(--an-slate-100);
    border-radius: 4px;
    padding: 3px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Home's cards are whole-card links (Gallery's are <article> with an inner CTA link), so reset
   the anchor defaults .gal-card alone doesn't cover. */
.mkt-tpl-card { text-decoration: none; color: inherit; }

.mkt-tpl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.mkt-tpl-cta { text-align: center; margin-top: 48px; }

/* pricing teaser */
.mkt-price-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
}

.mkt-price-box {
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}

.mkt-price-box.them { background: var(--an-slate-100); color: var(--an-slate-600); } /* slate-500 is 4.35:1 on slate-100 */
.mkt-price-box.us { background: #fff; box-shadow: var(--an-shadow-glow); border: 1px solid rgba(22,163,133,.2); }

.mkt-price-box .who { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.mkt-price-box .amount { font-size: 3rem; font-weight: 700; line-height: 1.1; margin: 10px 0 4px; color: var(--an-ink); }
.mkt-price-box.them .amount { color: var(--an-slate-400); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(198,40,40,.5); }
.mkt-price-box .per { font-size: .875rem; color: var(--an-slate-500); }
.mkt-price-box.them .per { color: var(--an-slate-600); } /* slate-500 fails on the slate-100 box */

.mkt-price-teaser-note { text-align: center; font-size: .875rem; color: var(--an-slate-600); margin: 20px 0 0; } /* sits on the hero band tint post-sweep */

/* beta band */
.mkt-beta-band { text-align: center; max-width: 560px; margin: 0 auto; }

.mkt-beta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; }
.mkt-beta-chips .mkt-eyebrow { margin-bottom: 0; }

.mkt-beta-line { font-size: 1.0625rem; color: var(--an-slate-600); margin: 0 0 24px; }

/* quiet pricing line */
.mkt-price-quiet {
    color: var(--an-slate-500) !important;
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
}

.mkt-price-quiet:hover { color: var(--an-primary) !important; }

/* CTA band. The light background is a legacy fallback only — every marketing page's
   CTA now adds .band.band-grad, whose later rules override background and text colors. */
.mkt-cta {
    background: var(--an-primary-subtle);
    text-align: center;
    padding: 96px 24px;
}

.mkt-cta h2 { font-size: clamp(2.25rem, 3.5vw, 2.75rem); font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; }
.mkt-cta p { color: var(--an-slate-500); font-size: 1.125rem; margin: 0 0 32px; }

/* ---------- footer (dark — navy-950, white wordmark) ---------- */
.mkt-footer { background: var(--an-navy-950); padding: 64px 0 32px; }

.mkt-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

.mkt-footer-brand img { height: 22px; margin-bottom: 12px; }
.mkt-footer-brand p { font-size: .875rem; color: var(--an-on-dark-muted); max-width: 260px; margin: 0; }

.mkt-footer h2 {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(242,251,248,.5);
    margin: 0 0 14px;
}

.mkt-footer ul { list-style: none; margin: 0; padding: 0; }
.mkt-footer li { margin-bottom: 10px; }
.mkt-footer li a { font-size: .875rem; color: var(--an-on-dark-muted); text-decoration: none; }
.mkt-footer li a:hover { color: #fff; }

.mkt-footer-bottom {
    border-top: 1px solid var(--an-dark-line);
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    font-size: .8125rem;
    color: rgba(242,251,248,.55);
}

.mkt-footer-bottom .mkt-footer-sitemap-link { color: rgba(242,251,248,.55); text-decoration: none; }
.mkt-footer-bottom .mkt-footer-sitemap-link:hover { color: #fff; }

/* ================= band system ================= */
.band { padding: 88px 0; }
.band-white { background: #fff; }
.band-hero  { background: var(--an-band-hero); }
.band-tint  { background: var(--an-band-tint);
              border-top: 1px solid var(--an-border-tint);
              border-bottom: 1px solid var(--an-border-tint); }
.band-deep  { background: var(--an-band-deep); color: var(--an-on-dark-muted); }
.band-grad  { background: var(--an-band-grad); color: #fff; }
.band-pull-top { padding-top: 192px; }   /* band that receives an overlapping hero visual */

/* scoped overrides — the adoption mechanism */
.band-deep h2, .band-deep h3 { color: var(--an-on-dark); }
.band-deep p { color: var(--an-on-dark-muted); }
/* .mkt-split > div > p carries higher specificity than .band-deep p — without this
   override, split-section intro copy on dark bands renders slate-600 at ~1.7:1. */
.band-deep .mkt-split > div > p { color: var(--an-on-dark-muted); }
/* the split fix rule above (0,2,2) would also repaint kicker <p>s inside split
   columns — the second selector out-specifies it at (0,3,1) */
.band-deep .mkt-kicker, .band-deep .mkt-split > div > .mkt-kicker { color: var(--an-green); }
.band-deep .mkt-checklist li { color: var(--an-on-dark-muted); }
.band-deep .mkt-checklist li::before {
    background-color: rgba(125,194,66,.18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237DC242' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.band-grad h2 { color: #fff; }
.band-grad p { color: rgba(255,255,255,.92); }
.band-grad .mkt-btn-primary { background: #fff; color: var(--an-primary-deep) !important; font-weight: 700; }
.band-grad .mkt-btn-primary:hover { background: var(--an-teal-50); }
.band-grad .mkt-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.45); background: transparent; }
.band-grad .mkt-btn-ghost:hover { background: rgba(255,255,255,.10); border-color: #fff; }
.band-grad .mkt-eyebrow, .band-deep .mkt-eyebrow {
    background: rgba(255,255,255,.12); color: #D9F3EB; border: 1px solid rgba(255,255,255,.25);
}
.band-tint .mkt-checklist li::before { background-color: #fff; }
.band-tint p, .band-tint .mkt-section-head p { color: var(--an-slate-600); } /* slate-500 fails AA on tint */
.band-tint .mkt-section-head .mkt-kicker { color: var(--an-primary-deep); } /* kicker stays brand-deep on tint (5.4:1) */

/* ---- band sweep (Pricing/Compare/Alternatives/Gallery/Press/Brand/Claude) ---- */
/* page heads carry their own top/bottom padding pre-band; the band provides it now */
.band .mkt-pricing-head { padding: 0; }
.band-hero .mkt-pricing-head p { color: var(--an-slate-600); } /* slate-500 is ~4.4:1 on the hero tint floor (#E9F7F3) */
.band .mkt-plans { margin: 48px 0 0; }   /* was margin-bottom: 96px — the band's padding takes over */
.band .mkt-faq { margin-bottom: 0; }
.band .press-layout { margin-bottom: 0; }
.band .mkt-legal { padding-top: 0; padding-bottom: 0; }
/* links inside dark-band copy: --an-primary is ~3.3:1 on navy-900 */
.band-deep p a { color: var(--an-teal-bright); }
/* honest-gaps markers keep their neutral dash on dark bands (a green check would
   read as "we have this"); the base .band-deep check override would repaint them. */
.band-deep .mkt-checklist-gaps li::before {
    background-color: rgba(255,255,255,.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2FBF8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* higher-specificity light-band text rules that would land slate-500 on tint */
.band-tint .mkt-faq details p { color: var(--an-slate-600); }
.band-tint .brand-section-head p { color: var(--an-slate-600); }

/* ---- template breadcrumb (TemplateDetail, facet hubs) ---- */
/* The spacing around each "/" must not depend on markup whitespace: Razor strips the whitespace
   next to the @if (template.Industry ...) block, which rendered "Plantillas/ Atención al cliente/ …". */
.tpl-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

/* ---- staging components ---- */
.mkt-platform { background: var(--an-platform); border: 1px solid var(--an-border-tint);
                border-radius: 24px; padding: clamp(20px, 4vw, 48px); }
.mkt-platform .mkt-shot { box-shadow: var(--an-shadow-deep); border-color: rgba(6,51,43,.08); }
.mkt-platform-compact { padding: 20px; border-radius: 18px; }
.mkt-shot-xl { border-radius: 16px; overflow: hidden; line-height: 0; box-shadow: var(--an-glow-green); }
.mkt-split-media { grid-template-columns: 1fr 1.25fr; }        /* media side ~55% */
.mkt-split-media-rev { grid-template-columns: 1.25fr 1fr; }
.mkt-artifact-stack { position: relative; }

/* ---- stat chips (real facts only) ---- */
.mkt-stat-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 48px; }
.mkt-stat-chip { background: #fff; border: 1px solid var(--an-border-tint); border-radius: 999px;
                 padding: 8px 18px; font-size: .875rem; font-weight: 600; color: var(--an-slate-600);
                 box-shadow: var(--an-shadow-sm); text-decoration: none; }
.mkt-stat-chip strong { color: var(--an-primary-deep); }
/* the linked chip must match the others — ".mkt a" would otherwise paint it teal (AA fail on white) */
.mkt a.mkt-stat-chip { color: var(--an-slate-600); }
.mkt a.mkt-stat-chip:hover { border-color: rgba(22,163,133,.40); color: var(--an-primary-deep); }

/* ---- feature cards + icon tiles ---- */
.mkt-features--cards { gap: 24px; }
.mkt-features--cards .mkt-feature { background: #fff; border: 1px solid rgba(22,163,133,.15);
    border-radius: 14px; padding: 28px; box-shadow: var(--an-shadow-md);
    transition: transform .15s ease, box-shadow .15s ease; }
.mkt-features--cards .mkt-feature:hover { transform: translateY(-3px); box-shadow: var(--an-shadow-lg); }
.mkt-icon-tile { width: 44px; height: 44px; border-radius: 12px; background: var(--an-teal-100);
                 display: grid; place-items: center; }
.mkt-icon-tile svg { width: 22px; height: 22px; color: var(--an-primary-dark); }
.mkt-icon-tile.green { background: var(--an-green-100); }
.mkt-icon-tile.green svg { color: var(--an-green-700); }

/* ---- logic canvas (dark variant — Home; component reused light elsewhere later) ---- */
.mkt-logic-canvas { background: rgba(255,255,255,.05); border: 1px solid var(--an-dark-line);
    border-radius: 14px; padding: 28px; box-shadow: 0 24px 64px rgba(4,18,20,.5); }
.mkt-logic-canvas .mkt-logic-rule { background: transparent; border: 0;
    border-left: 2px solid var(--an-teal-bright); border-radius: 0;
    padding: 10px 0 10px 18px; color: var(--an-on-dark); font-size: .9375rem; }
.mkt-logic-canvas .mkt-logic-rule strong { font-family: var(--font-mono); font-size: .8125rem;
    letter-spacing: .02em; color: var(--an-green-bright); font-weight: 700;
    border: 1px solid rgba(168,220,110,.35); border-radius: 5px; padding: 3px 7px; margin-right: 2px; }
.mkt-logic-canvas .mkt-logic-chip { font-family: var(--font-mono); background: rgba(83,215,192,.12);
    border: 1px solid rgba(83,215,192,.30); color: var(--an-teal-bright); border-radius: 5px; }

/* ---- language fan (Features multilingual) ---- */
.mkt-lang-fan { display: grid; place-items: center; position: relative; min-height: 420px; }
.mkt-lang-card { position: absolute; width: min(340px, 80%); background: #fff; border-radius: 12px;
    border: 1px solid var(--an-border-tint); box-shadow: var(--an-shadow-lg); padding: 20px; }
.mkt-lang-card:nth-child(1) { transform: translateX(-56px) rotate(-3deg); z-index: 1; }
.mkt-lang-card:nth-child(2) { transform: translateX(56px) rotate(3deg); z-index: 2; }
.mkt-lang-card:nth-child(3) { transform: translateY(12px); z-index: 3; box-shadow: var(--an-shadow-xl); }
.mkt-lang-pill { position: absolute; top: 12px; right: 12px; font-size: .6875rem; font-weight: 700;
    letter-spacing: .08em; background: var(--an-teal-100); color: var(--an-primary-deep);
    border-radius: 999px; padding: 3px 10px; z-index: 1; }

/* ---- hero floating chips ---- */
.mkt-float-chip { position: absolute; background: #fff; border: 1px solid var(--an-border-tint);
    border-radius: 10px; box-shadow: var(--an-shadow-lg); padding: 10px 16px;
    font-size: .8125rem; font-weight: 600; color: var(--an-slate-600); z-index: 3; }
.mkt-float-chip--tr { top: -52px; right: -8px; transform: rotate(2deg); }
.mkt-float-chip--bl { bottom: 20px; left: -16px; transform: rotate(-2deg); }
@media (max-width: 1024px) { .mkt-float-chip { display: none; } }

/* ---- product-proof section helpers (Home) ---- */
.mkt-proof-intro { text-align: center; max-width: 640px; margin: 40px auto 0; }
.mkt-proof-intro h3 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.mkt-proof-intro p { color: var(--an-slate-600); font-size: 1.0625rem; margin: 0; }
.mkt-checklist-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 20px 0 36px; }
.mkt-checklist-row li { margin-bottom: 0; }

/* ---- payment capture frame (Features) ---- */
.mkt-pay-shot { max-width: 460px; margin: 0 auto; background: #fff; border-radius: 12px;
    overflow: hidden; border: 1px solid var(--an-slate-200); box-shadow: var(--an-shadow-deep); }
.mkt-pay-shot img { display: block; width: 100%; height: auto; }

/* ---- email + PDF artifact stack (Features) ---- */
.mkt-artifact-stack { margin: 0 12px 40px 0; }
.mkt-artifact-pdf { position: absolute; right: -12px; bottom: -36px; width: 38%; height: auto;
    transform: rotate(2deg); border: 1px solid var(--an-slate-200); border-radius: 8px;
    box-shadow: var(--an-shadow-lg); background: #fff; }

/* ---- Features page hero ---- */
.mkt-feat-hero .mkt-pricing-head { padding: 0; }
.mkt-feat-hero h1 { font-size: clamp(2.75rem, 4.5vw, 3.25rem); letter-spacing: -0.025em; }

/* ---- gradient CTA extras (relocated beta content) ---- */
.mkt-cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 0; }
.mkt-cta-chips .mkt-eyebrow { margin-bottom: 0; }
.mkt-cta .mkt-cta-pricing { margin: 24px 0 0; font-size: .9375rem; }
.mkt-cta .mkt-cta-pricing a { color: rgba(255,255,255,.85); font-weight: 600; text-decoration: underline; }
.mkt-cta .mkt-cta-pricing a:hover { color: #fff; }
.mkt-cta .mkt-cta-beta { font-size: .8125rem; color: rgba(255,255,255,.75); margin: 10px 0 0; }
.mkt-cta .mkt-cta-beta a { color: #fff; font-weight: 600; }

/* ---------- pricing page ---------- */
.mkt-pricing-head { text-align: center; padding: 80px 0 48px; }
.mkt-pricing-head h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; }
.mkt-pricing-head p { font-size: 1.125rem; color: var(--an-slate-500); margin: 0 0 32px; }

.mkt-billing-toggle {
    display: inline-flex;
    background: var(--an-slate-100);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.mkt-billing-toggle button {
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 600;
    color: var(--an-slate-500);
    padding: 8px 22px;
    border-radius: 999px;
    cursor: pointer;
}

.mkt-billing-toggle button.active { background: #fff; color: var(--an-ink); box-shadow: var(--an-shadow-sm); }

.mkt-billing-toggle .save { color: var(--an-primary); font-weight: 700; }

.mkt-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 96px;
}

.mkt-plan {
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.mkt-plan.recommended {
    border-color: rgba(22,163,133,.35);
    box-shadow: var(--an-shadow-glow);
}

.mkt-plan-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--an-primary);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    padding: 4px 14px;
    white-space: nowrap;
}

.mkt-plan h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 4px; }
.mkt-plan .mkt-plan-for { font-size: .8125rem; color: var(--an-slate-400); margin: 0 0 20px; min-height: 2.4em; }

.mkt-plan-price { margin-bottom: 4px; }
.mkt-plan-price .cur { font-size: 1.125rem; font-weight: 600; vertical-align: top; color: var(--an-slate-500); }
.mkt-plan-price .num { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; }
.mkt-plan-price .per { font-size: .875rem; color: var(--an-slate-400); }

.mkt-plan-compare { font-size: .8125rem; color: var(--an-slate-400); margin: 0 0 20px; min-height: 1.2em; }
.mkt-plan-compare s { color: var(--an-slate-400); }

.mkt-plan ul { list-style: none; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid var(--an-slate-100); flex: 1; }
.mkt-plan li {
    font-size: .875rem;
    color: var(--an-slate-600);
    padding: 5px 0 5px 26px;
    position: relative;
}
.mkt-plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--an-primary-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A385' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* billing-mode price switching (no-JS default = annual) */
.price-monthly { display: none; }
[data-billing="monthly"] .price-monthly { display: inline; }
[data-billing="monthly"] .price-annual { display: none; }

/* comparison table */
.mkt-compare { overflow-x: auto; margin-bottom: 96px; }

.mkt-compare table { width: 100%; border-collapse: collapse; font-size: .9375rem; }

.mkt-compare th, .mkt-compare td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--an-slate-100);
}

.mkt-compare thead th { position: sticky; top: 64px; background: #fff; border-bottom: 2px solid var(--an-slate-200); font-weight: 600; }
.mkt-compare tbody th { font-weight: 400; }
.mkt-compare td:first-child, .mkt-compare th:first-child { text-align: left; color: var(--an-slate-600); }
.mkt-compare tbody tr:nth-child(even) { background: var(--an-slate-50); }

.mkt-compare .yes { color: var(--an-primary); font-weight: 700; }
.mkt-compare .no { color: var(--an-slate-300); }

/* FAQ */
.mkt-faq { max-width: 720px; margin: 0 auto 48px; }

.mkt-faq details { border-bottom: 1px solid var(--an-slate-100); padding: 4px 0; }

.mkt-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    padding: 16px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary::after { content: "+"; font-size: 1.25rem; color: var(--an-slate-400); }
.mkt-faq details[open] summary::after { content: "−"; }
.mkt-faq details p { color: var(--an-slate-500); font-size: .9375rem; margin: 0 0 16px; max-width: 640px; }

/* comparison disclaimer footnote (pricing, compare) */
.mkt-disclaimer { font-size: .8125rem; color: var(--an-slate-400); margin: 16px 0 0; }

/* legal pages */
.mkt-legal { max-width: 720px; margin: 0 auto; padding: 64px 24px 96px; }
.mkt-legal h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.01em; }
.mkt-legal h2 { font-size: 1.375rem; font-weight: 600; margin-top: 40px; }
.mkt-legal p, .mkt-legal li { color: var(--an-slate-600); line-height: 1.8; }
.mkt-legal .updated { color: var(--an-slate-400); font-size: .875rem; }

/* ---------- brand kit page ---------- */
.brand-section { margin-bottom: 80px; }

.brand-section-head { max-width: 640px; margin-bottom: 32px; }
.brand-section-head h2 { font-size: 1.75rem; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.brand-section-head p { color: var(--an-slate-500); margin: 0; }

.brand-logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.brand-logo-tile {
    margin: 0;
    border-radius: 12px;
    border: 1px solid var(--an-slate-200);
    display: grid;
    place-items: center;
    padding: 48px 24px 40px;
    position: relative;
    box-shadow: var(--an-shadow-sm);
}

.brand-logo-tile.light { background: #fff; }
.brand-logo-tile.dark { background: var(--an-ink); border-color: var(--an-ink); }

.brand-logo-tile img { height: 44px; }

.brand-logo-tile figcaption {
    position: absolute;
    bottom: 12px;
    font-size: .75rem;
    color: var(--an-slate-400);
}

.brand-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } /* wrap: the 4 buttons overflowed <520px viewports */

.brand-rules { max-width: 520px; }

.brand-swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.brand-swatch {
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 18px;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    background: #fff;
    box-shadow: var(--an-shadow-sm);
}

.brand-swatch .chip { width: 48px; height: 48px; border-radius: 10px; grid-row: 1 / 3; }
.brand-swatch strong { font-size: .9375rem; }
.brand-swatch code { font-size: .8125rem; color: var(--an-slate-500); font-family: Consolas, monospace; }
.brand-swatch small { grid-column: 1 / 3; margin-top: 10px; color: var(--an-slate-400); font-size: .8125rem; }

/* Post-sweep the jumpnav is a direct child of <main> (between the hero band and the
   first content band) so position:sticky keeps working for the whole page. Previously used
   top:112px + translateY(-50%) to seat the pill on the hero→white seam for its FIRST scroll
   position — but a sticky element holds that same screen position for the rest of the page too,
   so by the time the user reached the Color section further down, the pill had drifted onto
   the swatch grid and covered a card's label. Matches .showcase-jumpnav's plain top:64px instead
   (flush with the 64px main nav, no seam-straddle transform) — same jump-nav pattern already
   working elsewhere on the site without this overlap. */
.brand-jumpnav {
    position: sticky;
    top: 76px;
    z-index: 5;
    display: flex;
    gap: 4px;
    margin: 0 auto 32px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 10px;
    width: fit-content;
    box-shadow: var(--an-shadow-sm);
}

.brand-jumpnav a {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--an-slate-500);
    text-decoration: none;
}

.brand-jumpnav a:hover { background: var(--an-slate-100); color: var(--an-ink); }

.brand-swatch-copy { display: flex; align-items: center; gap: 8px; }

.brand-swatch-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.brand-swatch-copy-btn {
    border: 1px solid var(--an-slate-200);
    background: #fff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--an-primary);
    cursor: pointer;
}

.brand-swatch-copy-btn:hover { background: var(--an-primary-subtle); }

.brand-swatch-rgb { grid-column: 2; font-size: .75rem; color: var(--an-slate-400); margin-top: 2px; }

.brand-gradient-bar {
    height: 56px;
    border-radius: 12px;
    background: var(--an-gradient);
}

.brand-type-specimen {
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 40px;
    background: #fff;
    box-shadow: var(--an-shadow-sm);
}

.spec-display { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.spec-body { font-size: 1.0625rem; color: var(--an-slate-600); max-width: 620px; margin: 0; }
.spec-caption { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--an-slate-400); margin: 10px 0 36px; }
.spec-caption:last-child { margin-bottom: 0; }

.brand-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.brand-do, .brand-dont { border-radius: 12px; padding: 26px 28px; }
.brand-do { background: var(--an-primary-subtle); }
.brand-dont { background: #FEF2F2; }
.brand-do h3 { color: var(--an-primary-dark); margin: 0 0 12px; font-size: 1rem; }
.brand-dont h3 { color: #B91C1C; margin: 0 0 12px; font-size: 1rem; }
.brand-do ul, .brand-dont ul { margin: 0; padding-left: 18px; }
.brand-do li, .brand-dont li { margin-bottom: 8px; color: var(--an-slate-600); font-size: .9375rem; }

/* ---------- press page ---------- */
.press-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
    margin-bottom: 96px;
    align-items: start;
}

.press-tag {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--an-primary);
    margin: 0 0 12px;
}

.press-release h2 { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 14px; }
.press-release .press-dek { font-size: 1.125rem; color: var(--an-slate-500); margin: 0 0 28px; }
.press-release p { color: var(--an-slate-600); line-height: 1.8; }
.press-release h3 { font-size: 1.125rem; font-weight: 600; margin-top: 36px; }

.press-side { position: sticky; top: 88px; display: grid; gap: 20px; }

.press-facts {
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 24px;
    background: var(--an-slate-50);
    box-shadow: var(--an-shadow-sm);
}

.press-facts h3 { margin: 0 0 14px; font-size: 1rem; font-weight: 600; }
.press-facts dl { margin: 0; }
.press-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--an-slate-400); margin-top: 12px; }
.press-facts dd { margin: 2px 0 0; font-size: .9375rem; color: var(--an-ink); }

@media (max-width: 1024px) {
    .press-layout { grid-template-columns: 1fr; }
    .press-side { position: static; }
    .brand-swatches, .brand-logo-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .brand-swatches, .brand-logo-grid, .brand-dodont { grid-template-columns: 1fr; }
}

/* Reveal-on-scroll animations were removed by owner decision (2026-07-14): all marketing
   content renders fully visible on page load. The .reveal/.reveal-stagger classes still
   present in page markup are intentionally inert. */

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .mkt-plans { grid-template-columns: repeat(2, 1fr); }
    .mkt-split { grid-template-columns: 1fr; gap: 40px; }
    .mkt-features { grid-template-columns: repeat(2, 1fr); }
    .mkt-tpl-grid { grid-template-columns: repeat(2, 1fr); }
    .mkt-hero .mkt-container { grid-template-columns: 1fr; gap: 40px; }
    .mkt-hero-inner { text-align: center; }
    .mkt-hero-sub { margin-left: auto; margin-right: auto; }
    .mkt-hero-ctas { justify-content: center; }
    .mkt-hero-visual { max-width: 640px; margin: 0 auto; }
}

@media (max-width: 640px) {
    /* h1 sizing is handled by the clamp() on .mkt-hero h1 */
    .mkt-hero { padding: 56px 0 0; }
    .mkt-section { padding: 72px 0; }
    .band { padding: 64px 0; }
    .band-pull-top { padding-top: 152px; }
    .mkt-cta { padding: 72px 24px; }
    .mkt-lang-fan { min-height: 380px; }
    .mkt-lang-card:nth-child(1) { transform: translateX(-14px) rotate(-3deg); }
    .mkt-lang-card:nth-child(2) { transform: translateX(14px) rotate(3deg); }
    .mkt-features { grid-template-columns: 1fr; }
    .mkt-plans { grid-template-columns: 1fr; }
    .mkt-tpl-grid { grid-template-columns: 1fr; }
    .mkt-price-teaser { grid-template-columns: 1fr; }
    .mkt-footer-grid { grid-template-columns: 1fr 1fr; }
    .mkt-nav-inner { gap: 12px; }
    .mkt-nav-links { display: none; }
    .mkt-nav-right > a { display: none; }
    .mkt-nav-burger { display: flex; }
    .mkt-hero-ctas { flex-direction: column; align-items: center; }
}

/* ---------- /claude connector page (mkt-claude-*) ---------- */
.mkt-claude-guide { scroll-margin-top: 64px; }

/* hero visual: a claude.ai conversation mock */
.mkt-claude-chat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 28px 36px;
    background: var(--an-slate-50);
    text-align: left;
}

.mkt-claude-msg {
    max-width: 560px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: .9375rem;
}

.mkt-claude-msg.user {
    align-self: flex-end;
    background: var(--an-primary-subtle);
    border: 1px solid rgba(22,163,133,.18);
    border-bottom-right-radius: 4px;
    color: var(--an-slate-800);
}

.mkt-claude-msg.assistant {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-bottom-left-radius: 4px;
    box-shadow: var(--an-shadow-sm);
    color: var(--an-slate-600);
}

.mkt-claude-msg p { margin: 0 0 10px; }
.mkt-claude-msg p:last-child { margin-bottom: 0; }
.mkt-claude-msg .mkt-logic-chip { margin: 2px 6px 2px 0; }

/* three-step connect guide */
.mkt-claude-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mkt-claude-step {
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--an-shadow-sm);
}

.mkt-claude-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--an-primary-subtle);
    color: var(--an-primary);
    font-weight: 700;
    margin-bottom: 14px;
}

.mkt-claude-step h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 8px; }
.mkt-claude-step p { font-size: .9375rem; color: var(--an-slate-500); margin: 0; }

.mkt-claude-code {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 10px;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: .8125rem;
    color: var(--an-slate-800);
    background: var(--an-slate-100);
    border: 1px solid var(--an-slate-200);
    border-radius: 5px;
    word-break: break-all;
}

/* example prompts */
.mkt-claude-prompts { max-width: 720px; margin: 56px auto 0; }

.mkt-claude-prompts-label {
    text-align: center;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--an-slate-400);
    margin: 0 0 20px;
}

.mkt-claude-prompt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    font-size: .9375rem;
    color: var(--an-slate-600);
    box-shadow: var(--an-shadow-sm);
}

.mkt-claude-prompt svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--an-primary); }

/* data note small print */
.mkt-claude-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 640px;
    margin: 64px auto 0;
    font-size: .8125rem;
    color: var(--an-slate-400);
}

.mkt-claude-note svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 1024px) {
    .mkt-claude-steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .mkt-claude-chat { padding: 24px 16px 28px; }
    .mkt-claude-msg { max-width: 100%; }
}

/* ---------- Claude Code terminal + developer track (home band + /claude) ----------
   A terminal mock is the one visual that says "this works from your shell" at a glance, which
   is the whole point of the Claude Code pitch. It stays on the navy family already used for
   dark bands so it adds no new hue; the green prompt glyph reuses the dark-surface accent. */
.mkt-terminal {
    background: var(--an-navy-900);
    border: 1px solid var(--an-dark-line);
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(11, 25, 41, 0.18);
    overflow: hidden;
    text-align: left;
}
.mkt-terminal-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--an-dark-line);
}
.mkt-terminal-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(238,244,250,.18); }
.mkt-terminal-bar em {
    margin-left: 8px;
    font-style: normal;
    font-size: .75rem;
    color: var(--an-on-dark-muted);
    font-family: 'Cascadia Code', Consolas, monospace;
}
.mkt-terminal pre {
    margin: 0;
    padding: 20px 22px 24px;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.75;
    color: var(--an-on-dark);
    white-space: pre-wrap;
    word-break: break-word;
}
.mkt-terminal .t-prompt { color: var(--an-green); user-select: none; }
.mkt-terminal .t-muted { color: var(--an-on-dark-muted); }
.mkt-terminal .t-ok { color: var(--an-green); }

/* Two setup tracks on /claude: the Claude app and Claude Code, side by side. */
.mkt-claude-tracks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
}
.mkt-claude-track {
    background: #fff;
    border: 1px solid var(--an-border-tint);
    border-radius: 12px;
    padding: 28px;
}
.mkt-claude-track h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 6px; }
.mkt-claude-track > p { font-size: .9375rem; color: var(--an-slate-600); margin: 0 0 18px; }
.mkt-claude-track ol { margin: 0; padding-left: 20px; color: var(--an-slate-600); font-size: .9375rem; }
.mkt-claude-track li { margin-bottom: 10px; }
.mkt-claude-track .mkt-terminal { margin-top: 4px; }

/* The 25-tool strip: every MCP tool name as a mono chip, so developers can see the surface. */
.mkt-tool-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 900px;
    margin: 32px auto 0;
    padding: 0;
    list-style: none;
}
.mkt-tool-strip li {
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: .75rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--an-dark-line);
    color: var(--an-on-dark);
    background: rgba(238,244,250,.06);
}

/* Homepage hero: the eyebrow badge doubles as the Claude announcement link. */
.mkt-eyebrow-link { text-decoration: none; }
.mkt-eyebrow-link:hover { color: var(--an-green-700); filter: brightness(.97); }

/* "Nuevo" pill next to the Claude nav link. */
.mkt-nav-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--an-green-700);
    background: var(--an-primary-subtle);
    vertical-align: 1px;
}

/* Hero cross-fade: the Claude conversation fades in over the builder and back, so the first
   screen shows both ways of working. Pure CSS; motion-sensitive visitors see the builder only. */
.mkt-hero-claude-card {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    animation: mkt-hero-swap 14s ease-in-out infinite;
}
.mkt-hero-claude-card .mkt-claude-chat { padding: 28px 24px; }
@keyframes mkt-hero-swap {
    0%, 42%   { opacity: 0; }
    50%, 92%  { opacity: 1; }
    100%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-hero-claude-card { animation: none; opacity: 0; }
}

@media (max-width: 1024px) {
    .mkt-claude-tracks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    /* Keep commands on their authored lines (so a flag like --header never splits across
       lines on a phone) and let the block scroll sideways instead of wrapping. */
    .mkt-terminal pre { padding: 16px; font-size: .75rem; white-space: pre; overflow-x: auto; }
    .mkt-claude-track { padding: 20px; }
}

/* ---------- /claude/tools — MCP tool reference ----------
   A reference page, so it is denser than the pitch pages: smaller hero headline, compact cards
   in a two-column grid, and every long mono token (tool names like create_form_from_template,
   the endpoint, the claude mcp add line) allowed to wrap or scroll inside its own box so a 375px
   phone never gets a page-level horizontal scroll. Grid children get min-width: 0 because a grid
   item's default min-width is its content width, which is what lets one long token widen the
   whole page. */
.mkt-tools-hero .mkt-container > * { min-width: 0; }
.mkt-tools-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.25rem); }
.mkt-tools-hero .mkt-hero-sub { font-size: 1.1875rem; margin: 0 0 28px; }
/* Reference content reads better left-aligned at every width (the shared hero centres below
   1024px); the two-class selectors outrank those single-class responsive rules. */
.mkt-tools-hero .mkt-hero-inner { text-align: left; }

.mkt-tools-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--an-slate-500); margin: 0 0 20px; }
.mkt-tools-crumbs a { text-decoration: none; }
.mkt-tools-crumbs [aria-current] { color: var(--an-slate-600); font-weight: 600; }

.mkt-tools-facts { display: grid; gap: 14px; margin: 0; }
.mkt-tools-facts dt { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--an-slate-500); }
.mkt-tools-facts dd { margin: 4px 0 0; }
.mkt-tools-facts code,
.mkt-tools-limits code,
.mkt-tools-card code {
    font-family: 'Cascadia Code', Consolas, monospace;
    overflow-wrap: anywhere;
}
.mkt-tools-facts dd > code {
    display: inline-block;
    padding: 4px 10px;
    font-size: .875rem;
    color: var(--an-slate-800);
    background: var(--an-slate-100);
    border: 1px solid var(--an-slate-200);
    border-radius: 6px;
}
.mkt-tools-fact-note { display: block; margin-top: 4px; font-size: .8125rem; color: var(--an-slate-500); }

.mkt-tools-hero-side { display: grid; gap: 20px; }
.mkt-tools-limits {
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 18px 22px;
    box-shadow: var(--an-shadow-sm);
}
.mkt .mkt-tools-limits h2 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--an-primary-deep); margin: 0 0 8px; }
.mkt-tools-limits ul { margin: 0; padding-left: 18px; font-size: .9375rem; color: var(--an-slate-600); }
.mkt-tools-limits li + li { margin-top: 4px; }

/* Group jump links + badge legend, directly under the hero. */
.mkt-tools-jump.band { padding: 32px 0; border-bottom: 1px solid var(--an-slate-200); }
.mkt-tools-jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mkt-tools-jump .mkt-stat-chip strong { margin-left: 4px; }
.mkt-tools-legend { margin: 20px auto 0; max-width: 760px; text-align: center; font-size: .875rem; color: var(--an-slate-600); line-height: 2; }

/* Badges: one hue per risk level, each ≥ 4.5:1 on its own fill. */
.mkt-tools-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.mkt-tools-badge.is-read { color: var(--an-slate-800); background: #E8EEF6; }
.mkt-tools-badge.is-write { color: var(--an-green-700); background: #E6F4EA; }
.mkt-tools-badge.is-destructive { color: #9B1C1C; background: #FDECEC; }

.mkt-tools-group.band { padding: 72px 0; scroll-margin-top: 64px; }
.mkt-tools-group-head { max-width: 680px; margin: 0 0 32px; }
.mkt-tools-group-head h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; line-height: 1.2; }
.mkt-tools-group-head p { margin: 0; font-size: 1.0625rem; color: var(--an-slate-600); }

.mkt-tools-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mkt-tools-card {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--an-slate-200);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: var(--an-shadow-sm);
    scroll-margin-top: 80px;
}
.mkt-tools-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.mkt-tools-card h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; min-width: 0; }
.mkt-tools-card h3 code { color: var(--an-ink); }
.mkt-tools-summary { margin: 0 0 14px; font-size: .9375rem; color: var(--an-slate-600); }

.mkt-tools-label { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--an-slate-500); margin-bottom: 6px; }
.mkt-tools-inputs { margin-bottom: 14px; }
.mkt-tools-inputs ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mkt-tools-inputs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 8px;
    font-size: .8125rem;
    color: var(--an-slate-800);
    background: var(--an-slate-50);
    border: 1px solid var(--an-slate-200);
    border-radius: 6px;
}
.mkt-tools-optional { font-size: .6875rem; color: var(--an-slate-500); }
.mkt-tools-none { font-size: .875rem; color: var(--an-slate-500); }

.mkt-tools-example { margin: 0 0 12px; font-size: .9375rem; color: var(--an-slate-800); }
.mkt-tools-example q { display: block; padding: 10px 14px; background: var(--an-slate-50); border-left: 3px solid var(--an-primary); border-radius: 0 8px 8px 0; font-style: normal; }

.mkt-tools-details { border-top: 1px solid var(--an-slate-100); padding-top: 10px; font-size: .875rem; color: var(--an-slate-600); }
.mkt-tools-details summary { cursor: pointer; font-weight: 600; color: var(--an-primary-deep); }
.mkt-tools-details p { margin: 10px 0 0; }
.mkt-tools-details-note { font-size: .75rem; color: var(--an-slate-500); }
.mkt-tools-hints code { font-size: .75rem; color: var(--an-slate-600); }
.mkt-tools-params { margin: 12px 0 0; display: grid; gap: 10px; }
.mkt-tools-params dt code { font-size: .8125rem; color: var(--an-ink); }
.mkt-tools-params dt span { font-size: .75rem; color: var(--an-slate-500); }
.mkt-tools-params dd { margin: 2px 0 0; }

.mkt-tools-cta { justify-content: center; }

@media (max-width: 900px) {
    .mkt-tools-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .mkt-tools-hero { padding-bottom: 48px; }
    .mkt-tools-group.band { padding: 56px 0; }
    .mkt-tools-card { padding: 18px; }
    .mkt-tools-legend { text-align: left; }
}

/* "See all N tools →" under the /claude tool strip, linking to /claude/tools. */
.mkt-tool-strip-more { text-align: center; margin: 20px 0 0; font-size: .9375rem; font-weight: 600; }

/* "In the Claude connectors directory" badge (ClaudeDirectoryBadge.razor). anota's own pill
   design, text only: no Anthropic artwork without their written approval. */
.mkt-claude-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--an-slate-200);
    border-radius: 999px;
    background: #fff;
    color: var(--an-ink);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: var(--an-shadow-sm);
    transition: border-color 150ms ease, box-shadow 200ms ease;
}
.mkt-claude-badge:hover { border-color: var(--an-primary); color: var(--an-ink); }
.mkt-claude-badge-check {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--an-primary);
    color: #fff;
    font-size: .6875rem;
}
.mkt-claude-badge-dark {
    background: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
    box-shadow: none;
}
.mkt-claude-badge-dark:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
.mkt-footer-brand .mkt-claude-badge { margin-top: 16px; }
.tpl-detail-claude { margin: 16px 0 0; }