/*
 * B2B Universal v4 CSS Architecture — Base Tokens
 *
 * This file intentionally defines opt-in v4 tokens and utility primitives only.
 * It does not reset existing theme layouts and does not override legacy selectors.
 */
:root {
    /* Canonical color tokens — DESIGN_TOKEN_UNIFICATION_SPEC §3.1 */
    --b2b-color-ink: #0b1828;
    --b2b-color-muted: #5f6f80;
    --b2b-color-bg: #f4f7fa;
    --b2b-color-soft: #eef4f7;
    --b2b-color-surface: #ffffff;
    --b2b-color-border: rgba(14, 39, 64, .12); /* Phase 1 zero-visual exception: final SPEC value is rgba(11,24,40,.10); keep current winning value until v4-products.css migrates in Phase 2. */
    --b2b-color-border-strong: rgba(11, 24, 40, .14);
    --b2b-color-primary: #0e2740;
    --b2b-color-primary-hover: #071b2e;
    --b2b-color-primary-soft: #e3edf4;
    --b2b-color-secondary: #446f88;
    --b2b-color-accent: #c89437;
    --b2b-color-accent-hover: #a87c2a;
    --b2b-color-accent-soft: #f5e5bc;
    --b2b-color-accent-shadow: rgba(200, 148, 55, .22);

    /* Canonical typography tokens — DESIGN_TOKEN_UNIFICATION_SPEC §3.2 */
    --b2b-font-sans: "Plus Jakarta Sans", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --b2b-font-heading: var(--b2b-font-sans);
    --b2b-type-regular: 400;
    --b2b-type-medium: 500;
    --b2b-type-semibold: 600;
    --b2b-type-bold: 680;
    --b2b-type-hairline-tight: -0.064em;
    --b2b-type-title-tight: -0.052em;
    --b2b-type-copy-tight: -0.012em;
    --b2b-body-size: clamp(15.5px, 1.03vw, 17px);
    --b2b-body-leading: 1.72;
    --b2b-small-size: 13.5px;
    --b2b-small-leading: 1.58;
    --b2b-label-size: 11.5px;
    --b2b-button-size: 14px;
    --b2b-nav-size: 13.5px;
    --b2b-section-pad: clamp(78px, 8vw, 116px);
    --b2b-section-title-size: clamp(42px, 5.1vw, 66px);
    --b2b-section-title-leading: 1.02;

    /* Canonical spacing / radius / shadow / motion tokens — DESIGN_TOKEN_UNIFICATION_SPEC §3.3 */
    --b2b-space-1: 0.25rem;
    --b2b-space-2: 0.5rem;
    --b2b-space-3: 0.75rem;
    --b2b-space-4: 1rem;
    --b2b-space-5: 1.25rem;
    --b2b-space-6: 1.5rem;
    --b2b-space-8: 2rem;
    --b2b-space-10: 2.5rem;
    --b2b-space-12: 3rem;
    --b2b-space-16: 4rem;
    --b2b-space-20: 5rem;

    --b2b-radius-sm: 0.5rem;
    --b2b-radius-md: 0.875rem;
    --b2b-radius-lg: var(--b2b-radius-card, 1.25rem);
    --b2b-radius-xl: 1.75rem;
    --b2b-radius-pill: 999px;

    --b2b-shadow-sm: var(--b2b-shadow-card, 0 8px 24px rgba(15, 23, 42, 0.06));
    --b2b-shadow-md: 0 18px 48px rgba(15, 23, 42, 0.08);
    --b2b-shadow-lg: 0 26px 70px rgba(15, 23, 42, 0.12);
    --b2b-transition: 180ms ease;

    /* Footer dark layer tokens */
    --b2b-footer-bg-start: #0f172a;
    --b2b-footer-bg-mid: #0e2038;
    --b2b-footer-bg-end: #111827;
    --b2b-footer-text: #d6dee4;
    --b2b-footer-text-muted: rgba(214, 222, 228, .66);
    --b2b-footer-border: rgba(255, 255, 255, .10);
    --b2b-footer-surface: rgba(255, 255, 255, .055);

    /* Existing non-generation primitives kept for current selectors. */
    --b2b-v4-container: 1200px;
    --b2b-v4-container-wide: 1360px;
    --b2b-color-text: var(--b2b-color-ink);
    --b2b-color-surface-soft: #eaf1f5;
    --b2b-color-secondary-soft: #dce9ef;
    --b2b-shadow-card: 0 18px 52px rgba(11, 24, 40, .075);
    --b2b-mega-backdrop-top: 70px;
}

/* TEMPORARY legacy aliases — remove in Phase 3 (see DESIGN_TOKEN_UNIFICATION_SPEC §6) */
:root {
    /* v306 — Phase 1 mirrors current winning values to keep rendering unchanged. */
    --b2b-v306-ink: #071525;
    --b2b-v306-muted: #687385;
    --b2b-v306-soft: #eef4f7;
    --b2b-v306-line: rgba(7, 21, 37, 0.08);
    --b2b-v306-line-strong: rgba(7, 21, 37, 0.12);
    --b2b-v306-shadow-soft: 0 18px 44px rgba(5, 18, 31, 0.08);
    --b2b-v306-shadow-card: 0 12px 30px rgba(5, 18, 31, 0.045);

    /* v304 — Phase 1 mirrors current winning values to keep rendering unchanged. */
    --b2b-v304-ink: #0b1828;
    --b2b-v304-muted: #596879;

    /* header-v25 — Phase 1 mirrors current header values; v4-header.css still owns final header rules. */
    --b2b-header-v25-ink: #071523;
    --b2b-header-v25-muted: #5f6f80;
    --b2b-header-v25-line: rgba(7, 21, 35, .09);

    /* v4-color */
    --b2b-v4-color-ink: var(--b2b-color-ink);
    --b2b-v4-color-muted: var(--b2b-color-muted);
    --b2b-v4-color-primary: var(--b2b-color-primary);
    --b2b-v4-color-primary-strong: var(--b2b-color-primary-hover);
    --b2b-v4-color-border: var(--b2b-color-border);
    --b2b-v4-color-surface: var(--b2b-color-surface);
    --b2b-v4-color-soft: var(--b2b-color-soft);
    --b2b-v4-color-accent: var(--b2b-color-accent);
    --b2b-v4-color-accent-soft: var(--b2b-color-accent-soft);

    /* v4 primitives */
    --b2b-v4-font-sans: var(--b2b-font-sans);
    --b2b-v4-space-1: var(--b2b-space-1);
    --b2b-v4-space-2: var(--b2b-space-2);
    --b2b-v4-space-3: var(--b2b-space-3);
    --b2b-v4-space-4: var(--b2b-space-4);
    --b2b-v4-space-5: var(--b2b-space-5);
    --b2b-v4-space-6: var(--b2b-space-6);
    --b2b-v4-space-8: var(--b2b-space-8);
    --b2b-v4-space-10: var(--b2b-space-10);
    --b2b-v4-space-12: var(--b2b-space-12);
    --b2b-v4-space-16: var(--b2b-space-16);
    --b2b-v4-space-20: var(--b2b-space-20);
    --b2b-v4-radius-sm: var(--b2b-radius-sm);
    --b2b-v4-radius-md: var(--b2b-radius-md);
    --b2b-v4-radius-lg: var(--b2b-radius-lg);
    --b2b-v4-radius-xl: var(--b2b-radius-xl);
    --b2b-v4-radius-pill: var(--b2b-radius-pill);
    --b2b-v4-shadow-sm: var(--b2b-shadow-sm);
    --b2b-v4-shadow-md: var(--b2b-shadow-md);
    --b2b-v4-shadow-lg: var(--b2b-shadow-lg);
    --b2b-v4-transition: var(--b2b-transition);

    /* Phase 1 keeps conflicting inline fallback tokens undefined; they are migrated file-by-file in Phase 2. */
}

/*
 * Phase 1 direct-consumer compatibility.
 * Keep the current winning value for live selectors that already consume
 * --b2b-color-muted directly before Phase 2 migrates them file-by-file.
 * Canonical declaration above remains the SPEC target; remove this override
 * when v4-products.css direct consumers are migrated.
 */
:root {
    --b2b-color-muted: #637283;
}

.b2b-v4-container {
    width: min(100% - 32px, var(--b2b-v4-container));
    margin-inline: auto;
}

.b2b-v4-container-wide {
    width: min(100% - 32px, var(--b2b-v4-container-wide));
    margin-inline: auto;
}

.b2b-v4-section {
    padding-block: clamp(3rem, 6vw, 6rem);
}

.b2b-v4-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--b2b-v4-color-border);
    border-radius: var(--b2b-v4-radius-pill);
    background: var(--b2b-v4-color-surface);
    color: var(--b2b-v4-color-primary);
    font-family: var(--b2b-v4-font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.b2b-v4-card {
    border: 1px solid var(--b2b-v4-color-border);
    border-radius: var(--b2b-v4-radius-xl);
    background: var(--b2b-v4-color-surface);
    box-shadow: var(--b2b-v4-shadow-sm);
}

.b2b-v4-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    padding: 0.75rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--b2b-v4-radius-pill);
    font-family: var(--b2b-v4-font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    transition: transform var(--b2b-v4-transition), box-shadow var(--b2b-v4-transition), background-color var(--b2b-v4-transition), border-color var(--b2b-v4-transition);
}

.b2b-v4-button:hover,
.b2b-v4-button:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
}

.b2b-v4-button--primary {
    background: var(--b2b-v4-color-primary);
    color: #FFFFFF;
    box-shadow: 0 12px 28px rgba(18, 59, 99, 0.18);
}

.b2b-v4-button--primary:hover,
.b2b-v4-button--primary:focus-visible {
    background: var(--b2b-v4-color-primary-strong);
    color: #FFFFFF;
}

.b2b-v4-button--secondary {
    border-color: var(--b2b-v4-color-border);
    background: var(--b2b-v4-color-surface);
    color: var(--b2b-v4-color-primary);
}

@media (max-width: 767px) {
    .b2b-v4-container,
    .b2b-v4-container-wide {
        width: min(100% - 24px, var(--b2b-v4-container));
    }

    .b2b-v4-section {
        padding-block: 3rem;
    }
}


/* 3.2.98 migrated active rules from v4-legacy.css.
 * Keep these rules in this file's owner boundary; do not move them back to legacy. */

html,
body {
max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
html,
body {
overflow-x: hidden;
}
}

@media (max-width: 768px) {
body {
font-size: 15px;
}
}

@media (max-width: 768px) {
img,
video,
iframe {
max-width: 100%;
}
}

@media screen and (max-width: 768px) {
body {
background: #f1f3ee;
}
}

@media screen and (max-width: 1024px) {
html,
body {
max-width: 100%;
    overflow-x: hidden;
}
}

@media screen and (max-width: 768px) {
body {
font-size: 16px;
    line-height: 1.62;
    -webkit-text-size-adjust: 100%;
}
}

@media screen and (max-width: 768px) {
html,
body {
max-width: 100%;
    overflow-x: hidden;
}
}

body {
background: var(--b2b-color-bg, #f5f7fa);
  color: var(--b2b-color-text, #142033);
}

:where(a) {
color: var(--b2b-color-primary, #12324d);
}

:where(a:hover) {
color: var(--b2b-color-secondary, #2f6387);
}

::selection {
background: var(--b2b-color-accent-soft, #fff3d7);
  color: var(--b2b-color-primary-hover, #0b2238);
}

:where(a, button, input, select, textarea):focus-visible {
outline-color: var(--b2b-color-secondary, #2f6387);
}


body {
font-family: var(--b2b-font-sans);
  color: var(--b2b-color-text);
  text-rendering: geometricPrecision;
}


html,
body,
button,
input,
select,
textarea {
font-family: var(--b2b-font-sans);
}

body {
font-weight: var(--b2b-type-regular);
  letter-spacing: -0.006em;
  font-synthesis-weight: none;
}


body {
font-size: var(--b2b-body-size);
  line-height: var(--b2b-body-leading);
  font-weight: var(--b2b-type-regular);
  letter-spacing: var(--b2b-type-copy-tight);
}

@media (max-width: 1100px) {
:root {
--b2b-section-title-size: clamp(38px, 6vw, 56px);
}
}

@media (max-width: 680px) {
:root {
--b2b-body-size: 15.5px;
    --b2b-nav-size: 14px;
    --b2b-section-pad: 62px;
    --b2b-section-title-size: clamp(32px, 9vw, 42px);
}
}


:root {
--b2b-v304-line: rgba(11, 24, 40, 0.105);
  --b2b-v304-surface: rgba(255, 255, 255, 0.92);
  --b2b-v304-section-title: clamp(32px, 3.45vw, 48px);
  --b2b-v304-section-leading: 1.10;
  --b2b-v304-title-weight: 640;
  --b2b-v304-copy-size: clamp(15.5px, 1.03vw, 16.5px);
  --b2b-v304-copy-leading: 1.66;
}

body {
color: var(--b2b-v304-ink);
  font-size: var(--b2b-v304-copy-size);
  line-height: var(--b2b-v304-copy-leading);
  letter-spacing: -0.006em;
}

@media (max-width: 760px) {
:root {
--b2b-v304-section-title: clamp(30px, 8.8vw, 40px);
}
}

:root {
--b2b-v305-factory-opacity: 0.34;
  --b2b-v305-factory-side-opacity: 0.24;
  --b2b-v305-hero-wash-center: rgba(255, 255, 255, 0.96);
  --b2b-v305-hero-wash-mid: rgba(255, 255, 255, 0.54);
  --b2b-v305-hero-wash-edge: rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
:root {
--b2b-v305-factory-opacity: 0.24;
    --b2b-v305-factory-side-opacity: 0.10;
}
}


@media (max-width: 760px) {
:root {
--b2b-v305-factory-opacity: 0.24;
    --b2b-v305-factory-side-opacity: 0.10;
}
}