/* October 2026: neutral chrome surfaces and cyan controls.
   Existing content and interactions remain authoritative; repaired component flow is defined below. */
body:not(.admin-page) { background: #f4f6f7; }

/* The support panel shares the new palette; branded channel launchers keep their colours. */
body:not(.admin-page) .caxhc-root {
    --caxhc-primary: #14232d;
    --caxhc-secondary: #1b303e;
    --caxhc-accent: #83dce5;
    --caxhc-trust: #83dce5;
    --caxhc-paper: #f4f6f7;
    --caxhc-muted: #586874;
    --caxhc-line: #cdd7df;
}
body:not(.admin-page) .caxhc-panel { box-shadow: 0 16px 48px #101a2233; }
body:not(.admin-page) .caxhc-status { color: #d1dde5; }
body:not(.admin-page) .caxhc-close { border-color: #8296a5; }
body:not(.admin-page) .caxhc-message--operator .caxhc-message__bubble { border-color: #afc8d4; background: #eaf2f6; }
body:not(.admin-page) :is(.caxhc-message--system .caxhc-message__bubble, .caxhc-contact) { background: #e9eef2; }
body:not(.admin-page) :is(.caxhc-contact input, .caxhc-compose textarea) { border-color: #8ea2b0; }
body:not(.admin-page) .caxhc-human { background: #e4edf2; border-color: #adbdc9; }

body:not(.admin-page) main {
    --brand: #83dce5;
    --brand-strong: #147486;
    --brand-soft: #e5f1f4;
    --forest: #14232d;
    --forest-2: #304954;
    --ink: #1b2730;
    --muted: #586874;
    --canvas: #f4f6f7;
    --surface: #fff;
    --surface-muted: #e9eef2;
    --line: #cdd7df;
    --line-strong: #879ba9;
    --dark: #101a22;
    --dark-raised: #1d2a35;
    --accent: #83dce5;
    --paper: #f4f6f7;
    --quiet: #586874;
    --rule: #d0dae1;
    --shadow-low: 0 1px 2px #14232d08, 0 6px 18px #14232d08;
    --shadow-high: 0 2px 6px #14232d0d, 0 12px 30px #14232d12;
    --refresh-focus: #087489;
    --refresh-secondary-bg: #f7fafb;
    --refresh-secondary-ink: #203743;
    --refresh-secondary-border: #9cabb5;
    color: var(--ink);
}

body:not(.admin-page) main ::selection { color: #10212b; background: #b5eaf0; }

/* Community choices use one reading order at every width. Neutralize the legacy
   alternating 7/5-column cards and the image minimum that overflowed their tracks. */
body:not(.admin-page) main .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 28px;
}
body:not(.admin-page) main .product-grid > .product-card {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
body:not(.admin-page) main .product-card__image {
    display: block;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
body:not(.admin-page) main .product-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
body:not(.admin-page) main .product-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 26px;
}
body:not(.admin-page) main .product-card__body .kicker {
    margin: 0 0 12px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .09em;
}
body:not(.admin-page) main .product-card__body h3 {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.1vw, 28px);
    line-height: 1.2;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
body:not(.admin-page) main .product-card__body > p:not(.kicker):not(.launch-note) {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.65;
}
body:not(.admin-page) main .product-card .card-value-list { margin: 0 0 20px; }
body:not(.admin-page) main .product-card .card-value-list li { font-size: 14px; line-height: 1.6; }
body:not(.admin-page) main .product-card .launch-note {
    margin: 0;
    padding-top: 4px;
    font-size: 13px;
    line-height: 1.6;
}
body:not(.admin-page) main .product-card .card-actions {
    gap: 14px 20px;
    margin-top: 22px;
}
body:not(.admin-page) main .product-card .card-actions :is(.text-link, .live-demo-link) {
    font-size: 14px;
    line-height: 1.5;
}
body:not(.admin-page) main .product-card .live-demo-link { flex-basis: 100%; }
body:not(.admin-page) main .product-card .button { white-space: normal; text-align: center; }
@media (max-width: 760px) {
    body:not(.admin-page) main .product-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    body:not(.admin-page) main .product-card__body { padding: 22px; }
}
@media (max-width: 380px) {
    body:not(.admin-page) main .product-card__body { padding: 18px; }
    body:not(.admin-page) main .product-card .card-actions { align-items: stretch; flex-direction: column; }
    body:not(.admin-page) main .product-card .live-demo-link { flex-basis: auto; }
}

/* Role names get the card's full measure instead of a narrow column beside an avatar. */
body:not(.admin-page) main .agent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body:not(.admin-page) main .agent-card { min-width: 0; padding: 26px; }
body:not(.admin-page) main .agent-card__head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
body:not(.admin-page) main .agent-card__head > div { min-width: 0; }
body:not(.admin-page) main .agent-card__head .status-dot { position: absolute; top: 38px; left: 39px; margin: 0; }
body:not(.admin-page) main .agent-card__head .kicker { margin: 0 0 10px; font-size: 10px; line-height: 1.5; letter-spacing: .07em; }
body:not(.admin-page) main .agent-card__head h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
body:not(.admin-page) main .agent-card__head h3 a { text-decoration: none; }
body:not(.admin-page) main .agent-card__head h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
body:not(.admin-page) main .agent-card .agent-name { font-size: 12px; line-height: 1.6; margin-bottom: 18px; }
body:not(.admin-page) main .agent-card > p { font-size: 14px; line-height: 1.7; }
body:not(.admin-page) main .agent-card .compact-list li { font-size: 14px; line-height: 1.6; }
body:not(.admin-page) main .agent-card__meta { flex-wrap: wrap; font-size: 12px; line-height: 1.5; gap: 8px; }
body:not(.admin-page) main .agent-card .card-actions { gap: 12px; }
body:not(.admin-page) main .agent-card .text-link { font-size: 14px; line-height: 1.5; }
@media (max-width: 1184px) {
    body:not(.admin-page) main .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    body:not(.admin-page) main .agent-grid { grid-template-columns: minmax(0, 1fr); }
    body:not(.admin-page) main .agent-card { padding: 22px; }
}
@media (max-width: 800px) {
    body:not(.admin-page) main .form-card :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
}

/* Dark bands retain their established hierarchy with a charcoal material. */
body:not(.admin-page) main :is(.world-hero, .learning-section, .final-cta, .membership-card--featured, .comparison__cax, .tube-rich-replies, .agent-identity, .statement-strip) {
    --refresh-focus: #99e4ec;
    --refresh-secondary-bg: #263844;
    --refresh-secondary-ink: #f4f6f7;
    --refresh-secondary-border: #8099a8;
    background: linear-gradient(155deg, #172630, #101a22 72%);
    color: #f4f6f7;
}

body:not(.admin-page) main .launch-editorial { background: linear-gradient(135deg, #e7edf1, #f7f9fa); color: #162833; }
body:not(.admin-page) main :is(.hero-description, .learning-intro > p:not(.eyebrow), .learning-loop p) { color: #cbd5dd; }
body:not(.admin-page) main :is(.hero-note, .stage-caption, .learning-note) { color: #b6c5cf; }
body:not(.admin-page) main .world-hero .eyebrow { color: #c6d7e2; }
body:not(.admin-page) main :is(.learning-loop li, .learning-note) { border-color: #3c515e; }
body:not(.admin-page) main .tube-rich-replies p:not(.eyebrow) { color: #d0dbe2; }
body:not(.admin-page) main .tube-rich-replies p.tube-rich-replies__note { color: #b6c5cf; }
body:not(.admin-page) main .membership-card--featured :is(.feature-list li, .fine-print, .kicker) { color: #d2dfe7; }
body:not(.admin-page) main .membership-card--featured .membership-card__billing { border-color: #657e8c; }

/* The small glass layer belongs to controls, not whole reading sections. */
body:not(.admin-page) main :is(.button, .link-button):not(.embed-website *) {
    border-color: #65adbc;
    border-radius: 8px;
    color: #102d38;
    background: linear-gradient(180deg, #ffffff70, #ffffff00 62%), #83dce5;
    box-shadow: inset 0 1px 0 #ffffffb8, inset 0 -1px 0 #2d778329, 0 2px 5px #10232d12;
    text-shadow: 0 1px 0 #ffffff42;
}

body:not(.admin-page) main :is(.button--ghost, .button--glass):not(.embed-website *) {
    border-color: var(--refresh-secondary-border);
    color: var(--refresh-secondary-ink);
    background: linear-gradient(180deg, #ffffff14, #ffffff00), var(--refresh-secondary-bg);
    box-shadow: inset 0 1px 0 #ffffff45, 0 2px 5px #10232d0a;
    text-shadow: none;
}

body:not(.admin-page) main .launch-editorial .button {
    border-color: #526d7e;
    color: #f4f6f7;
    background: linear-gradient(180deg, #344b5a, #1b303d);
    box-shadow: inset 0 1px 0 #ffffff38, 0 3px 8px #10232d1a;
    text-shadow: none;
}

body:not(.admin-page) main :is(.button, .link-button):not(.embed-website *):active {
    box-shadow: inset 0 2px 4px #10232d24, inset 0 1px 0 #ffffff1a;
}

body:not(.admin-page) main :is(.button, .link-button):not(.embed-website *):disabled {
    color: #596a76;
    background: #e5eaee;
    border-color: #a5b2bc;
    box-shadow: none;
    text-shadow: none;
}

/* Opaque content surfaces keep body copy stable against the paper canvas. */
body:not(.admin-page) main :is(.product-card, .agent-card, .form-card, .onboarding-form, .join-summary, .order-summary, .subscription-confirmation, .writing-demo, .faq details, .membership-card:not(.membership-card--featured), .process-grid article, .integration-grid article, .three-column > div, .credit-explainer > div) {
    background: linear-gradient(160deg, #fff, #fbfcfd);
    border-color: #c8d4dd;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px #152d3b06, 0 6px 18px #152d3b07;
}

body:not(.admin-page) main :is(.demo-link-card, .service-ledger, .pricing-principles > div) { background: #f9fbfc; border-color: #c8d4dd; }
body:not(.admin-page) main .demo-link-card:nth-child(2) { background: #eaf2f5; }
body:not(.admin-page) main :is(.world-story__visual, .video-feature__visual) { background: linear-gradient(145deg, #e6edf1, #d9e3ea); box-shadow: inset 0 1px 0 #ffffffa6; }
body:not(.admin-page) main .theme-caxflix .image-credit { color: #586874; }
body:not(.admin-page) main :is(.network-destination__image, .product-card__image, .topic-snapshot) { background: #e3eaf0; }
body:not(.admin-page) main .world-window { background: #14232d; border-color: #899eab; box-shadow: 0 8px 20px #14232d12; }
body:not(.admin-page) main .window-bar { background: #e8eef2; color: #425965; }
body:not(.admin-page) main .window-dots i { background: #99abb7; }
body:not(.admin-page) main .hero-stamp { background: linear-gradient(145deg, #c9f1f5, #91dfe7); color: #16343f; box-shadow: 0 4px 10px #10232d1a; }
body:not(.admin-page) main :is(.world-topics li, .writing-tools li, .writing-preview) { background: #e8eff4; color: #385462; border-color: #6a99ac; }
body:not(.admin-page) main .ai-identity { color: #355764; background: #f1f7f9; border-color: #91adba; }
body:not(.admin-page) main :is(.small-orbit, .writing-status, .tube-formats li::before, .tube-story__return > span) { color: #1e7183; }
body:not(.admin-page) main .editorial-page-hero h1 em { color: #536e7c; }
body:not(.admin-page) main .writing-demo__bar { background: #172a36; }
body:not(.admin-page) main .writing-demo__bar > span { color: #c8d8e2; }
body:not(.admin-page) main .tube-proof-bar { background: #172630; border-color: #405664; color: #d3dfe7; }

/* Inputs, selection and keyboard state gain definition without changing their metrics. */
body:not(.admin-page) main :is(.form-card, .onboarding-form, .writing-demo) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    color: #1b303e;
    background-color: #fff;
    border-color: #8ea2b0;
    box-shadow: inset 0 1px 2px #14232d08;
}

body:not(.admin-page) main :is(.form-card, .onboarding-form, .writing-demo) :is(input, textarea)::placeholder { color: #657580; opacity: 1; }
body:not(.admin-page) main :is(input[type="checkbox"], input[type="radio"]) { accent-color: #176b80; }
body:not(.admin-page) main :is(.radio-card, .choice-card, .bot-choice, .integration-choice) { border-color: #c2d0da; background: #fbfcfd; }
body:not(.admin-page) main :is(.radio-card, .choice-card, .bot-choice, .integration-choice):has(input:checked) { border-color: #246b80; background: #e5f2f5; box-shadow: inset 4px 0 0 #277b90, inset 0 1px 0 #fff; }
body:not(.admin-page) main .subdomain-input { background: #edf2f5; border-color: #8ea2b0; }
body:not(.admin-page) main .network-filters button { background: #f8fafb; border-color: #a8b8c3; border-radius: 6px; }
body:not(.admin-page) main .network-filters button[aria-pressed="true"] { background: #1e3543; color: #f4f8fa; border-color: #1e3543; box-shadow: inset 0 1px 0 #ffffff2b; }
body:not(.admin-page) main .world-tabs button[aria-selected="true"] { color: #18556a; border-bottom-color: #237d92; }

body:not(.admin-page) main :is(.button, .link-button, .editorial-link, .text-link, .live-demo-link, .network-filters button, .world-tabs button, .faq summary, .persona-evidence summary, .onboarding-step legend):not(.embed-website *):focus-visible {
    outline: 3px solid var(--refresh-focus);
    outline-offset: 3px;
    transition: none;
}

body:not(.admin-page) main :is(.form-card, .onboarding-form, .writing-demo) :is(input, select, textarea):focus {
    border-color: #246b80;
    outline: 2px solid #246b80;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #e5f2f5;
}

@media (hover: hover) and (pointer: fine) {
    body:not(.admin-page) main :is(.button, .link-button):not(.button--ghost):not(.button--glass):not(.embed-website *):hover { background-color: #9ce7ef; border-color: #3c92a6; box-shadow: inset 0 1px 0 #fff, 0 3px 8px #10232d1f; }
    body:not(.admin-page) main :is(.button--ghost, .button--glass):not(.embed-website *):hover { border-color: var(--refresh-focus); background-color: var(--refresh-secondary-bg); }
    body:not(.admin-page) main .launch-editorial .button:hover { background: linear-gradient(180deg, #3e5c6f, #253e4d); color: #fff; }
    body:not(.admin-page) main :is(.editorial-link, .text-link, .live-demo-link):hover { color: var(--refresh-focus); text-decoration-color: var(--refresh-focus); }
}

/* Readable solid materials above are the fallback when backdrop-filter is unavailable. */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    body:not(.admin-page) main :is(.button, .link-button):not(.embed-website *) { -webkit-backdrop-filter: blur(8px) saturate(115%); backdrop-filter: blur(8px) saturate(115%); }
    body:not(.admin-page) main :is(.button--ghost, .button--glass):not(.embed-website *) { background-color: #f7fafbea; }
    body:not(.admin-page) main :is(.world-hero, .learning-section, .final-cta, .membership-card--featured, .comparison__cax, .tube-rich-replies) :is(.button--ghost, .button--glass) { background-color: #263844ed; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body:not(.admin-page) main :is(.button, .link-button):not(.embed-website *) { -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; background-color: #83dce5; box-shadow: none; text-shadow: none; }
    body:not(.admin-page) main :is(.button--ghost, .button--glass):not(.embed-website *) { background: var(--refresh-secondary-bg); }
    body:not(.admin-page) main .launch-editorial .button { background: #1b303d; }
}

@media (prefers-contrast: more) {
    body:not(.admin-page) main { --quiet: #344c5a; --muted: #344c5a; --rule: #879ba9; --line: #879ba9; }
    body:not(.admin-page) main :is(.button, .link-button, .product-card, .agent-card, .form-card, .onboarding-form, .join-summary, .order-summary, .faq details, .radio-card, .choice-card, .bot-choice, .integration-choice, .network-filters button):not(.embed-website *) { border-color: #607a89; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.admin-page) main :is(.button, .link-button, .network-filters button, .world-tabs button, .radio-card, .choice-card, .bot-choice, .integration-choice):not(.embed-website *) { transition: none; animation: none; }
    body:not(.admin-page) main :is(.button, .link-button):not(.embed-website *):is(:hover, :active) { transform: none; }
}

@media (forced-colors: active) {
    body:not(.admin-page) main :is(.button, .link-button, .network-filters button):not(.embed-website *) { background: ButtonFace; color: ButtonText; border-color: ButtonText; box-shadow: none; text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    body:not(.admin-page) main .network-filters button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
    body:not(.admin-page) main :is(.radio-card, .choice-card, .bot-choice, .integration-choice):has(input:checked) { border-color: Highlight; box-shadow: inset 4px 0 Highlight; }
    body:not(.admin-page) main :focus-visible { outline-color: Highlight; }
}