/**
 * CODEX3-M2 — Agentic Business storefront.
 *
 * This page deliberately rides the native NetShow design-token vocabulary
 * loaded by layouts.app. The ab-* aliases below are only component-local
 * pointers; they do not introduce another site-wide palette or shell.
 */
.ab-surface {
    --ab-bg: var(--ns-bg-void, var(--ns-bg-primary));
    --ab-panel: var(--ns-bg-secondary);
    --ab-panel-raised: var(--ns-bg-elevated);
    --ab-line: var(--ns-border);
    --ab-line-strong: var(--ns-border-strong);
    --ab-text: var(--ns-text-primary);
    --ab-muted: var(--ns-text-secondary);
    --ab-dim: var(--ns-text-muted);
    --ab-accent: var(--ns-accent);
    --ab-accent-hover: var(--ns-accent-hover);
    --ab-accent-soft: var(--ns-accent-subtle);
    --ab-radius: var(--ns-radius-xl);
    --ab-radius-small: var(--ns-radius-lg);
    --ab-shadow: var(--ns-shadow-xl);
    min-width: 320px;
    min-height: 70vh;
    overflow: clip;
    background:
        radial-gradient(circle at 76% -8%, var(--ab-accent-soft), transparent 31rem),
        var(--ab-bg);
    color: var(--ab-text);
    font-family: var(--ns-font-sans);
    line-height: var(--ns-leading-normal);
    -webkit-font-smoothing: antialiased;
}

.ab-surface *,
.ab-surface *::before,
.ab-surface *::after { box-sizing: border-box; }
.ab-surface a { color: inherit; }
.ab-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.ab-lane-nav {
    display: flex;
    align-items: center;
    gap: var(--ns-space-2);
    padding-top: var(--ns-space-5);
    color: var(--ab-muted);
    font-size: var(--ns-text-sm);
}
.ab-lane-nav a,
.ab-lane-nav span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: var(--ns-space-4);
    border: 1px solid var(--ab-line);
    border-radius: var(--ns-radius-full);
    text-decoration: none;
}
.ab-lane-nav a:hover,
.ab-lane-nav a:focus-visible { border-color: var(--ab-accent); color: var(--ab-text); }
.ab-lane-nav span[aria-current] { background: var(--ab-accent-soft); border-color: var(--ab-accent); color: var(--ab-accent); }

.ab-hero { padding-block: clamp(60px, 8vw, 112px) clamp(44px, 6vw, 78px); }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: end; gap: clamp(40px, 6vw, 72px); }
.ab-eyebrow { margin-bottom: var(--ns-space-3); color: var(--ab-accent); font-size: var(--ns-text-xs); font-weight: var(--ns-font-bold); letter-spacing: .15em; text-transform: uppercase; }
.ab-hero h1,
.ab-detail-hero h1 { max-width: 820px; margin: 0; color: var(--ab-text); font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.055em; font-weight: var(--ns-font-bold); }
.ab-lede,
.ab-detail-hero__lede { max-width: 710px; margin: var(--ns-space-5) 0 0; color: var(--ab-muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.ab-truthline { max-width: 730px; margin: var(--ns-space-5) 0 0; padding: var(--ns-space-4); border-left: 3px solid var(--ab-accent); border-radius: 0 var(--ab-radius-small) var(--ab-radius-small) 0; background: var(--ab-accent-soft); color: var(--ab-muted); font-size: var(--ns-text-sm); }

.ab-census { margin: 0; border-top: 1px solid var(--ab-line-strong); }
.ab-census div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ns-space-5); padding: var(--ns-space-4) 0; border-bottom: 1px solid var(--ab-line); }
.ab-census dt { color: var(--ab-muted); font-size: var(--ns-text-sm); }
.ab-census dd { margin: 0; color: var(--ab-text); font: var(--ns-font-semibold) var(--ns-text-xl)/1 var(--ns-font-mono); }

.ab-controls-wrap { border-block: 1px solid var(--ab-line); background: var(--ab-panel); }
.ab-controls { min-height: 114px; display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(220px, .8fr) auto auto; gap: var(--ns-space-3); align-items: end; padding-block: var(--ns-space-4); }
.ab-field { display: grid; gap: var(--ns-space-2); color: var(--ab-muted); font-size: var(--ns-text-xs); font-weight: var(--ns-font-bold); }
.ab-field input,
.ab-field select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--ab-line-strong);
    border-radius: var(--ab-radius-small);
    outline: none;
    background: var(--ab-bg);
    color: var(--ab-text);
    padding: 0 var(--ns-space-4);
    font: inherit;
    font-size: var(--ns-text-base);
}
.ab-field input:focus,
.ab-field select:focus { border-color: var(--ab-accent); box-shadow: 0 0 0 3px var(--ab-accent-soft); }

.ab-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ns-space-2);
    border: 1px solid transparent;
    border-radius: var(--ab-radius-small);
    padding: 0 var(--ns-space-4);
    text-decoration: none;
    font-size: var(--ns-text-sm);
    font-weight: var(--ns-font-bold);
    line-height: 1;
    cursor: pointer;
    transition: background var(--ns-transition-fast), border-color var(--ns-transition-fast);
}
.ab-button--primary { background: var(--ab-accent); color: var(--ab-bg); }
.ab-button--primary:hover,
.ab-button--primary:focus-visible { background: var(--ab-accent-hover); color: var(--ab-bg); }
.ab-button--quiet { border-color: var(--ab-line-strong); background: transparent; color: var(--ab-text); }
.ab-button--quiet:hover,
.ab-button--quiet:focus-visible { border-color: var(--ab-accent); background: var(--ab-accent-soft); }

.ab-results { padding-block: var(--ns-space-10) var(--ns-space-12); }
.ab-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--ns-space-6); margin-bottom: var(--ns-space-5); }
.ab-section-head h2,
.ab-panel h2,
.ab-next h2 { margin: 0; color: var(--ab-text); font-size: clamp(25px, 3vw, 38px); letter-spacing: -.035em; line-height: 1.1; }
.ab-section-head p { margin: 0; color: var(--ab-muted); font-size: var(--ns-text-sm); }
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-space-4); }

.ab-card {
    min-width: 0;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    padding: var(--ns-space-5);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    background: linear-gradient(155deg, var(--ab-panel-raised), var(--ab-panel));
    box-shadow: var(--ns-shadow-sm);
    transition: border-color var(--ns-transition-fast), transform var(--ns-transition-fast);
}
.ab-card:hover { border-color: var(--ab-accent); transform: translateY(-2px); }
.ab-card__topline { min-height: 27px; display: flex; align-items: start; justify-content: space-between; gap: var(--ns-space-3); color: var(--ab-muted); font-size: var(--ns-text-xs); }
.ab-state { display: inline-flex; padding: var(--ns-space-1) var(--ns-space-2); border: 1px solid var(--ab-line-strong); border-radius: var(--ns-radius-full); color: var(--ab-muted); font: var(--ns-font-bold) 10px/1.2 var(--ns-font-mono); text-transform: uppercase; letter-spacing: .04em; }
.ab-state--generated-prelaunch { border-color: var(--ab-accent); color: var(--ab-accent); }
.ab-card__identity { min-width: 0; display: flex; align-items: center; gap: var(--ns-space-3); margin-top: var(--ns-space-5); }
.ab-card__identity > div { min-width: 0; }
.ab-monogram { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ab-accent); border-radius: var(--ab-radius-small); background: var(--ab-accent-soft); color: var(--ab-accent); font-weight: var(--ns-font-bold); }
.ab-card h3 { margin: 0; color: var(--ab-text); font-size: 19px; letter-spacing: -.025em; line-height: 1.2; }
.ab-card h3 a { text-decoration: none; }
.ab-domain { max-width: 100%; margin: var(--ns-space-1) 0 0; overflow-wrap: anywhere; color: var(--ab-muted); font: var(--ns-text-xs)/1.4 var(--ns-font-mono); }
.ab-card__copy { margin: var(--ns-space-5) 0; color: var(--ab-muted); font-size: var(--ns-text-sm); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ab-card__agent { display: flex; align-items: center; gap: var(--ns-space-2); margin-top: auto; padding: var(--ns-space-3) 0; border-top: 1px solid var(--ab-line); color: var(--ab-muted); font-size: var(--ns-text-xs); }
.ab-card__agent strong { color: var(--ab-text); }
.ab-persona-mark { flex: 0 0 auto; width: 8px; height: 8px; border: 1px solid var(--ab-accent); border-radius: 2px; transform: rotate(45deg); }
.ab-card__link { min-height: 44px; display: flex; align-items: center; justify-content: space-between; color: var(--ab-accent); font-size: var(--ns-text-sm); font-weight: var(--ns-font-bold); text-decoration: none; }

.ab-empty { padding: var(--ns-space-10); border: 1px dashed var(--ab-line-strong); border-radius: var(--ab-radius); text-align: center; }
.ab-empty h3 { margin: 0; color: var(--ab-text); font-size: 26px; }
.ab-empty p { max-width: 580px; margin: var(--ns-space-3) auto var(--ns-space-5); color: var(--ab-muted); }
.ab-pagination { margin-top: var(--ns-space-6); display: flex; justify-content: center; align-items: center; gap: var(--ns-space-4); color: var(--ab-muted); font-size: var(--ns-text-sm); }
.ab-pagination a,
.ab-pagination span { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--ns-space-3); border: 1px solid var(--ab-line); border-radius: var(--ns-radius-md); text-decoration: none; }
.ab-pagination a { color: var(--ab-text); }
.ab-pagination span[aria-disabled] { opacity: .45; }

.ab-breadcrumb { padding-top: var(--ns-space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-2); color: var(--ab-muted); font-size: var(--ns-text-xs); }
.ab-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ab-text); text-decoration: none; }
.ab-breadcrumb a:hover,
.ab-breadcrumb a:focus-visible { color: var(--ab-accent); }
.ab-detail-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: clamp(40px, 5vw, 56px); align-items: center; padding-block: clamp(42px, 7vw, 92px); }
.ab-detail-hero h1 { font-size: clamp(46px, 6.2vw, 80px); overflow-wrap: anywhere; }
.ab-detail-hero__offer .ab-card__topline { justify-content: flex-start; margin-bottom: var(--ns-space-5); }
.ab-detail-hero__offer .ab-domain { margin-bottom: var(--ns-space-3); }
.ab-actions { display: flex; flex-wrap: wrap; gap: var(--ns-space-3); margin-top: var(--ns-space-5); }
.ab-proofline { margin-top: var(--ns-space-5); color: var(--ab-dim); font: 11px/1.55 var(--ns-font-mono); }

.ab-agent-door {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 520px;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid var(--ab-accent);
    border-radius: calc(var(--ab-radius) + var(--ns-space-2));
    background: radial-gradient(circle at 50% 22%, var(--ab-accent-soft), transparent 38%), var(--ab-panel);
    box-shadow: var(--ab-shadow);
}
.ab-agent-door:focus { outline: 2px solid var(--ab-accent); outline-offset: 4px; }
.ab-agent-door__visual { position: relative; width: 172px; height: 172px; display: grid; place-items: center; margin: 0 auto var(--ns-space-5); }
.ab-agent-door__visual img { position: relative; z-index: 2; width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .34)); }
.ab-agent-door__orbit { position: absolute; inset: 0; border: 1px solid var(--ab-accent); border-radius: 50%; box-shadow: 0 0 0 20px var(--ab-accent-soft); }
.ab-agent-door__pulse { position: absolute; z-index: 3; right: 27px; bottom: 26px; width: 13px; height: 13px; border: 3px solid var(--ab-panel); border-radius: 3px; background: var(--ab-accent); transform: rotate(45deg); }
.ab-agent-door h2 { margin: 0; color: var(--ab-text); font-size: var(--ns-text-2xl); letter-spacing: -.035em; }
.ab-agent-door > p { color: var(--ab-muted); font-size: var(--ns-text-sm); }
.ab-agent-door__state { display: flex; align-items: center; gap: var(--ns-space-2); margin: var(--ns-space-4) 0; padding: var(--ns-space-3); border: 1px solid var(--ab-line); border-radius: var(--ab-radius-small); color: var(--ab-muted); font-size: var(--ns-text-xs); }
.ab-agent-door__links { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); margin: var(--ns-space-4) 0; }
.ab-agent-door__links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--ns-space-3); border: 1px solid var(--ab-line-strong); border-radius: var(--ns-radius-md); color: var(--ab-accent); font-size: var(--ns-text-xs); font-weight: var(--ns-font-bold); text-decoration: none; }
.ab-agent-door .ab-agent-door__boundary { color: var(--ab-muted); font-size: 11px; line-height: 1.6; }
.ab-agent-door code { display: block; overflow-wrap: anywhere; color: var(--ab-dim); font-size: 10px; }

.ab-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-4); padding-bottom: var(--ns-space-10); }
.ab-panel { min-width: 0; min-height: 320px; padding: clamp(25px, 3.5vw, 40px); border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-panel); }
.ab-panel--wide { grid-column: span 2; }
.ab-panel p { max-width: 820px; color: var(--ab-muted); line-height: var(--ns-leading-relaxed); }
.ab-panel .ab-inline-empty { padding: var(--ns-space-3); border: 1px dashed var(--ab-line-strong); border-radius: var(--ab-radius-small); background: var(--ab-bg); color: var(--ab-text); font-size: var(--ns-text-sm); }
.ab-panel h3 { margin: var(--ns-space-5) 0 var(--ns-space-1); color: var(--ab-accent); font-size: var(--ns-text-sm); }
.ab-inventory,
.ab-feature-list { list-style: none; margin: var(--ns-space-5) 0 0; padding: 0; }
.ab-inventory li { display: flex; justify-content: space-between; gap: var(--ns-space-5); padding: var(--ns-space-3) 0; border-bottom: 1px solid var(--ab-line); color: var(--ab-muted); font-size: var(--ns-text-sm); }
.ab-inventory strong { color: var(--ab-text); font-family: var(--ns-font-mono); text-align: right; }
.ab-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-3); }
.ab-feature-list li { position: relative; padding: var(--ns-space-3) var(--ns-space-3) var(--ns-space-3) 36px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-small); color: var(--ab-muted); font-size: var(--ns-text-sm); }
.ab-feature-list li::before { content: ""; position: absolute; left: 15px; top: 19px; width: 7px; height: 7px; border: 1px solid var(--ab-accent); border-radius: 2px; }
.ab-facts { margin: var(--ns-space-5) 0 0; }
.ab-facts div { display: flex; justify-content: space-between; gap: var(--ns-space-5); padding: var(--ns-space-3) 0; border-bottom: 1px solid var(--ab-line); }
.ab-facts dt { color: var(--ab-muted); font-size: var(--ns-text-xs); }
.ab-facts dd { margin: 0; color: var(--ab-text); font: var(--ns-font-bold) var(--ns-text-sm)/1.5 var(--ns-font-mono); }

.ab-next { margin-bottom: var(--ns-space-10); padding: var(--ns-space-6); display: flex; align-items: end; justify-content: space-between; gap: var(--ns-space-6); border: 1px solid var(--ab-accent); border-radius: var(--ab-radius); background: var(--ab-accent-soft); }
.ab-next p { max-width: 680px; margin: var(--ns-space-3) 0 0; color: var(--ab-muted); }
.ab-next .ab-actions { flex: 0 0 auto; }
.ab-pricing-shelf { display: contents; }

@media (max-width: 920px) {
    .ab-hero__grid,
    .ab-detail-hero { grid-template-columns: 1fr; gap: var(--ns-space-8); }
    .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-controls { grid-template-columns: 1fr 1fr; }
    .ab-agent-door { min-height: 470px; }
    .ab-next { align-items: start; flex-direction: column; }
}

@media (max-width: 620px) {
    .ab-shell { width: min(calc(100% - 28px), 1180px); }
    .ab-lane-nav { overflow-x: auto; }
    .ab-lane-nav a,
    .ab-lane-nav span { white-space: nowrap; }
    .ab-hero { padding-block: var(--ns-space-8); }
    .ab-hero h1,
    .ab-detail-hero h1 { font-size: clamp(38px, 12vw, 56px); }
    .ab-lede,
    .ab-detail-hero__lede { font-size: 17px; }
    .ab-controls { min-height: 0; grid-template-columns: 1fr; padding-block: var(--ns-space-4); }
    .ab-results { padding-block: var(--ns-space-8) var(--ns-space-10); }
    .ab-section-head { align-items: start; flex-direction: column; gap: var(--ns-space-2); }
    .ab-grid { grid-template-columns: 1fr; }
    .ab-card { min-height: 330px; }
    .ab-empty { padding: var(--ns-space-8) var(--ns-space-5); }
    .ab-pagination { justify-content: space-between; gap: var(--ns-space-2); }
    .ab-pagination a,
    .ab-pagination span { padding-inline: var(--ns-space-2); font-size: 11px; }
    .ab-breadcrumb { padding-top: var(--ns-space-4); }
    .ab-detail-hero { padding-block: var(--ns-space-6) var(--ns-space-8); }
    .ab-detail-hero__offer .ab-card__topline { flex-direction: column; }
    .ab-actions,
    .ab-actions .ab-button { width: 100%; }
    .ab-agent-door { min-height: 0; padding: var(--ns-space-5); border-radius: var(--ab-radius); }
    .ab-agent-door__visual { width: 138px; height: 138px; }
    .ab-agent-door__visual img { width: 90px; height: 90px; }
    .ab-detail-grid { grid-template-columns: 1fr; }
    .ab-panel,
    .ab-panel--wide { grid-column: auto; min-height: 0; padding: var(--ns-space-5); }
    .ab-inventory li { align-items: start; flex-direction: column; gap: var(--ns-space-1); }
    .ab-inventory strong { text-align: left; }
    .ab-feature-list { grid-template-columns: 1fr; }
    .ab-next { padding: var(--ns-space-5); }
}

@media (prefers-reduced-motion: reduce) {
    .ab-card,
    .ab-button { transition: none; }
}