/* Site header ported from altifigence.com (homepage cascade replayed).
   Tokens are scoped under .site-header so billing page tokens stay untouched.
   Source: company-site section-consistency.css + site-system.css. */

/*──────────────── design tokens (scoped) ────────────────*/
.site-header{
  --ink:#111113;
  --muted:#646973;
  --soft:#f5f5f7;
  --line:rgba(0,0,0,.10);
  --line2:rgba(0,0,0,.06);
  --blue:#0b5fff;
  --company:#174a7a;
  --std:#f6d52f;
  --open:#59c90d;
  --sdk:#ff6a1f;
  --asic:#2baec1;
  --labs:#1e527d;
  --violet:#8057ff;
  --copper:#d69254;
  --green:#3a9d32;
  --content:1180px;
  --wide:1512px;
  --nav-h:44px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"IBM Plex Sans",Pretendard,"Noto Sans KR",system-ui,sans-serif;
}

.site-header {
  color-scheme: light dark;
  --af-font-sans: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --af-font-mono: "SFMono-Regular", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  --m3-seed-primary: #0078d4;
  --m3-seed-secondary: #006a60;
  --m3-primary: #0078d4;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #d3e4ff;
  --m3-on-primary-container: #001c37;
  --m3-secondary: #4f6070;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #d2e4f7;
  --m3-on-secondary-container: #0b1d2a;
  --m3-tertiary: #006a60;
  --m3-on-tertiary: #ffffff;
  --m3-tertiary-container: #8df2df;
  --m3-on-tertiary-container: #00201c;
  --m3-surface: #fbfcff;
  --m3-surface-dim: #d9dce2;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #f3f6fb;
  --m3-surface-container: #eef1f6;
  --m3-surface-container-high: #e8ebf0;
  --m3-surface-container-highest: #e2e6ec;
  --m3-on-surface: #171c20;
  --m3-on-surface-variant: #41474d;
  --m3-outline: #71787f;
  --m3-outline-variant: #c1c7cf;
  --m3-error: #ba1a1a;
  --m3-on-error: #ffffff;

  --m3-type-display: 57px;
  --m3-type-headline: 32px;
  --m3-type-title: 22px;
  --m3-type-body: 16px;
  --m3-type-label: 14px;
  --m3-line-display: 64px;
  --m3-line-headline: 40px;
  --m3-line-title: 28px;
  --m3-line-body: 24px;
  --m3-line-label: 20px;
  --m3-weight-regular: 400;
  --m3-weight-medium: 520;
  --m3-weight-bold: 680;

  --m3-shape-small: 8px;
  --m3-shape-medium: 12px;
  --m3-shape-large: 16px;
  --m3-shape-extra-large: 28px;
  --m3-shape-full: 999px;

  --m3-elevation-0: none;
  --m3-elevation-1: 0 1px 2px rgba(29, 33, 39, .14), 0 1px 3px 1px rgba(29, 33, 39, .08);
  --m3-elevation-2: 0 1px 2px rgba(29, 33, 39, .14), 0 2px 6px 2px rgba(29, 33, 39, .08);
  --m3-elevation-3: 0 4px 8px 3px rgba(29, 33, 39, .10), 0 1px 3px rgba(29, 33, 39, .14);
  --m3-elevation-4: 0 6px 10px 4px rgba(29, 33, 39, .10), 0 2px 3px rgba(29, 33, 39, .14);
  --m3-elevation-5: 0 8px 12px 6px rgba(29, 33, 39, .10), 0 4px 4px rgba(29, 33, 39, .14);

  --af-size-0: 12px;
  --af-size-1: var(--m3-type-label);
  --af-size-2: var(--m3-type-body);
  --af-size-3: 18px;
  --af-size-4: var(--m3-type-title);
  --af-size-5: var(--m3-type-headline);
  --af-size-6: var(--m3-type-display);
  --af-space-1: 8px;
  --af-space-2: 16px;
  --af-space-3: 24px;
  --af-space-4: 32px;
  --af-space-5: 48px;
  --af-space-6: 64px;
  --af-space-7: 96px;
  --af-color-bg: var(--m3-surface);
  --af-color-bg-soft: var(--m3-surface-container-low);
  --af-color-surface: var(--m3-surface-container-lowest);
  --af-color-surface-alt: var(--m3-surface-container);
  --af-color-ink: var(--m3-on-surface);
  --af-color-text: var(--m3-on-surface);
  --af-color-muted: var(--m3-on-surface-variant);
  --af-color-line: var(--m3-outline-variant);
  --af-color-accent: var(--m3-primary);
  --af-color-accent-strong: #106ebe;
  --af-color-company: #174a7a;
  --af-color-danger: var(--m3-error);
  --af-product-standard: #e1c12d;
  --af-product-opencore: #56b40f;
  --af-product-sdk: #e9671c;
  --af-product-asickit: #1fa4bd;
  --af-product-labs: var(--m3-secondary);
  --af-gradient-soft: linear-gradient(180deg, var(--m3-surface-container-lowest) 0%, var(--m3-surface-container-low) 100%);
  --af-radius-card: var(--m3-shape-large);
  --af-radius-control: var(--m3-shape-extra-large);
  --af-shadow-card: var(--m3-elevation-1);
  --af-content: 1180px;
  --af-wide: 1512px;
  --af-nav-h: 52px;

  --font: var(--af-font-sans);
  --sans: var(--af-font-sans);
  --mono: var(--af-font-mono);
  --ink: var(--af-color-ink);
  --text: var(--af-color-text);
  --muted: var(--af-color-muted);
  --line: var(--af-color-line);
  --line2: color-mix(in srgb, var(--m3-outline-variant) 62%, transparent);
  --blue: var(--af-color-accent);
  --company: var(--af-color-company);
  --navy: var(--af-color-company);
  --altifigence-blue: var(--af-color-accent);
  --altifigence-red: var(--af-color-danger);
  --std: var(--af-product-standard);
  --open: var(--af-product-opencore);
  --sdk: var(--af-product-sdk);
  --asic: var(--af-product-asickit);
  --labs: var(--af-product-labs);
  --content: var(--af-content);
  --wide: var(--af-wide);
  --max: var(--af-wide);
  --nav-h: var(--af-nav-h);
  --card-r: var(--af-radius-card);
}

@supports (color: color-mix(in oklab, #000, #fff)) {
  .site-header {
    --m3-primary: var(--m3-seed-primary);
    --m3-primary-container: color-mix(in oklab, var(--m3-seed-primary) 17%, #ffffff);
    --m3-secondary: color-mix(in oklab, var(--m3-seed-primary) 36%, var(--m3-seed-secondary));
    --m3-secondary-container: color-mix(in oklab, var(--m3-secondary) 18%, #ffffff);
    --m3-tertiary: color-mix(in oklab, var(--m3-seed-secondary) 86%, #000000);
    --m3-tertiary-container: color-mix(in oklab, var(--m3-seed-secondary) 20%, #ffffff);
    --m3-surface-container-low: color-mix(in oklab, var(--m3-primary) 4%, #ffffff);
    --m3-surface-container: color-mix(in oklab, var(--m3-primary) 7%, #ffffff);
    --m3-surface-container-high: color-mix(in oklab, var(--m3-primary) 10%, #ffffff);
    --m3-surface-container-highest: color-mix(in oklab, var(--m3-primary) 13%, #ffffff);
  }
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    --m3-primary: #9ecaff;
    --m3-on-primary: #003258;
    --m3-primary-container: #00497f;
    --m3-on-primary-container: #d3e4ff;
    --m3-secondary: #bac8da;
    --m3-on-secondary: #243240;
    --m3-secondary-container: #3a4857;
    --m3-on-secondary-container: #d6e4f7;
    --m3-tertiary: #82d5c8;
    --m3-on-tertiary: #003731;
    --m3-tertiary-container: #005048;
    --m3-on-tertiary-container: #9ff2e3;
    --m3-surface: #101417;
    --m3-surface-dim: #101417;
    --m3-surface-container-lowest: #0b0f12;
    --m3-surface-container-low: #181c20;
    --m3-surface-container: #1c2024;
    --m3-surface-container-high: #262a2f;
    --m3-surface-container-highest: #31353a;
    --m3-on-surface: #e1e4ea;
    --m3-on-surface-variant: #c1c7cf;
    --m3-outline: #8b929a;
    --m3-outline-variant: #41474d;
    --m3-error: #ffb4ab;
    --m3-on-error: #690005;
    --af-color-company: #a8c8ec;
    --af-product-standard: #dbc446;
    --af-product-opencore: #8fdb65;
    --af-product-sdk: #ffb088;
    --af-product-asickit: #87d8e7;
    --af-color-accent-strong: #c9e6ff;
  }
}


@supports (color: color-mix(in oklab, #000, #fff)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header {
      --m3-primary: color-mix(in oklab, var(--m3-seed-primary) 38%, #ffffff);
      --m3-primary-container: color-mix(in oklab, var(--m3-seed-primary) 64%, #000000);
      --m3-secondary: color-mix(in oklab, var(--m3-seed-primary) 18%, #d9e6f7);
      --m3-secondary-container: color-mix(in oklab, var(--m3-secondary) 42%, #000000);
      --m3-tertiary: color-mix(in oklab, var(--m3-seed-secondary) 40%, #ffffff);
      --m3-tertiary-container: color-mix(in oklab, var(--m3-seed-secondary) 62%, #000000);
      --m3-surface-container-low: color-mix(in oklab, var(--m3-primary) 8%, #101417);
      --m3-surface-container: color-mix(in oklab, var(--m3-primary) 11%, #101417);
      --m3-surface-container-high: color-mix(in oklab, var(--m3-primary) 16%, #101417);
      --m3-surface-container-highest: color-mix(in oklab, var(--m3-primary) 21%, #101417);
    }
  }
}


html[data-theme="light"] .site-header {
  color-scheme: light;
  --m3-primary: #0078d4;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #d3e4ff;
  --m3-on-primary-container: #001c37;
  --m3-secondary: #4f6070;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #d2e4f7;
  --m3-on-secondary-container: #0b1d2a;
  --m3-tertiary: #006a60;
  --m3-on-tertiary: #ffffff;
  --m3-tertiary-container: #8df2df;
  --m3-on-tertiary-container: #00201c;
  --m3-surface: #fbfcff;
  --m3-surface-dim: #d9dce2;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #f3f6fb;
  --m3-surface-container: #eef1f6;
  --m3-surface-container-high: #e8ebf0;
  --m3-surface-container-highest: #e2e6ec;
  --m3-on-surface: #171c20;
  --m3-on-surface-variant: #41474d;
  --m3-outline: #71787f;
  --m3-outline-variant: #c1c7cf;
  --m3-error: #ba1a1a;
  --m3-on-error: #ffffff;
  --af-color-company: #174a7a;
  --af-product-standard: #e1c12d;
  --af-product-opencore: #56b40f;
  --af-product-sdk: #e9671c;
  --af-product-asickit: #1fa4bd;
  --af-color-accent-strong: #106ebe;
}


html[data-theme="dark"] .site-header {
  color-scheme: dark;
  --m3-primary: #9ecaff;
  --m3-on-primary: #003258;
  --m3-primary-container: #00497f;
  --m3-on-primary-container: #d3e4ff;
  --m3-secondary: #bac8da;
  --m3-on-secondary: #243240;
  --m3-secondary-container: #3a4857;
  --m3-on-secondary-container: #d6e4f7;
  --m3-tertiary: #82d5c8;
  --m3-on-tertiary: #003731;
  --m3-tertiary-container: #005048;
  --m3-on-tertiary-container: #9ff2e3;
  --m3-surface: #101417;
  --m3-surface-dim: #101417;
  --m3-surface-container-lowest: #0b0f12;
  --m3-surface-container-low: #181c20;
  --m3-surface-container: #1c2024;
  --m3-surface-container-high: #262a2f;
  --m3-surface-container-highest: #31353a;
  --m3-on-surface: #e1e4ea;
  --m3-on-surface-variant: #c1c7cf;
  --m3-outline: #8b929a;
  --m3-outline-variant: #41474d;
  --m3-error: #ffb4ab;
  --m3-on-error: #690005;
  --af-color-company: #a8c8ec;
  --af-product-standard: #dbc446;
  --af-product-opencore: #8fdb65;
  --af-product-sdk: #ffb088;
  --af-product-asickit: #87d8e7;
  --af-color-accent-strong: #c9e6ff;
}

/* Contrast-only guards for forced light/dark and interactive state audits. */
.site-header {
  --af-menu-kicker: #5f6368;
  --af-hero-link: #cfe5ff;
}

html[data-theme="dark"] .site-header {
  --af-menu-kicker: #c1c7cf;
  --af-hero-link: #d3e4ff;
}


/*──────────────── header shell (homepage structural rules) ────────────────*/
.site-header{position:sticky;top:0;z-index:1000;height:var(--nav-h);background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-shell{max-width:var(--content);height:var(--nav-h);margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:8px;min-width:138px;color:var(--ink);font-size:18px;font-weight:660;letter-spacing:-.055em;line-height:1}
.brand:hover{color:#000}
.brand-mark{width:28px;height:28px;object-fit:contain;border-radius:6px}
.desktop-nav{height:var(--nav-h)}
.nav-list{height:var(--nav-h);margin:0;padding:0;list-style:none;display:flex;align-items:stretch;justify-content:center;gap:2px}
.nav-item{position:relative}
.nav-link{height:var(--nav-h);padding:0 13px;display:flex;align-items:center;border:0;background:transparent;color:rgba(0,0,0,.78);font-family:var(--font);font-size:13px;font-weight:430;letter-spacing:-.022em;white-space:nowrap}
.nav-link:hover,.nav-item:focus-within>.nav-link,.nav-item:hover>.nav-link{background:transparent;color:#000}
.nav-actions{min-width:138px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.nav-actions a{font-size:13px;color:rgba(0,0,0,.72)}
.nav-actions a:hover{color:#000}
.nav-actions .primary{color:var(--blue);font-weight:520}
.dashboard-button,.profile-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid rgba(0,0,0,.14);border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:pointer}
.dashboard-button:hover,.dashboard-button:focus-visible,.profile-button:hover,.profile-button:focus-visible{border-color:var(--blue);color:var(--blue);outline:none}
.dashboard-button svg,.profile-button svg{width:17px;height:17px;display:block}
.profile-button{padding:0;font:inherit;overflow:hidden}
.profile-button:disabled{opacity:.52;cursor:not-allowed}
.profile-button[data-sso-state="signed-in"]{border-color:rgba(11,95,255,.36);color:var(--blue)}
.profile-avatar{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lang{position:relative;display:flex;align-items:center}
.lang::after{content:"";position:absolute;top:100%;right:0;width:max(100%,168px);height:calc(var(--nav-h) - 36px)}
.lang-btn{display:flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;font-family:inherit;cursor:pointer;color:rgba(0,0,0,.72);font-size:13px}
.lang:hover .lang-btn,.lang:focus-within .lang-btn{color:#000}
.lang-globe{width:17px;height:17px;display:block}
.lang-caret{width:9px;height:9px;display:block;opacity:.6}
.lang-menu{position:absolute;top:calc(var(--nav-h) - 6px);right:0;min-width:148px;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.14);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.lang:hover .lang-menu,.lang:focus-within .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:rgba(0,0,0,.78)}
.lang-menu a:hover{background:var(--soft);color:#000}
.nav-shell{width:100%;max-width:none;padding:0 clamp(16px,2vw,28px)}
.brand{min-width:0}
.brand::before{content:"";width:18px;height:18px;display:inline-block;flex:0 0 auto;border-radius:4px;background:url("/favicon-32x32.png?v=20260523-clean") center/contain no-repeat}
.nav-actions{min-width:auto;gap:8px;padding:3px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:rgba(255,255,255,.72)}
.dashboard-button,.profile-button{width:auto;height:30px;min-height:30px;gap:6px;padding:0 9px;border-color:transparent;border-radius:8px;background:transparent;box-shadow:none}
.dashboard-button::after{content:"Cloud";font-size:13px;font-weight:560;letter-spacing:0}
.profile-button::after{content:"Account";font-size:13px;font-weight:560;letter-spacing:0}
html:lang(ko) .profile-button::after{content:"계정"}
.nav-actions .profile-avatar{width:18px;height:18px}
.lang-btn{height:30px;gap:6px;padding:0 9px;border-radius:8px}
.lang-btn::after{content:"Settings";font-size:13px;font-weight:560;letter-spacing:0}
html:lang(ko) .lang-btn::after{content:"설정"}
.lang-menu{min-width:168px}
.lang-menu .theme-toggle{width:100%;height:auto;min-height:0;display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:2px;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:rgba(0,0,0,.78);box-shadow:none;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.lang-menu .theme-toggle svg{width:16px;height:16px;display:block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang-menu .theme-toggle:hover,.lang-menu .theme-toggle:focus-visible{background:var(--soft);color:#000;outline:none}
.theme-toggle-label{display:inline}
.nav-actions>.theme-toggle{display:none}
.site-header .nav-actions>a.primary[href^="https://altifigence.com"],
.site-header .mobile-quick-links>a.primary[href^="https://altifigence.com"]{display:none}
.mobile-quick-links .dashboard-button::after,.mobile-quick-links .profile-button::after{display:none}
.mobile-quick-links .dashboard-button,.mobile-quick-links .profile-button{width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;background:#fff}
.mobile-quick-links .profile-avatar{width:100%;height:100%}
.mega{position:fixed;top:var(--nav-h);left:0;right:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s ease;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(26px);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 26px 70px rgba(0,0,0,.10)}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega-inner{max-width:var(--content);margin:0 auto;padding:38px 22px 42px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.05fr;gap:0}
.mega-inner>div{padding:0 32px;border-left:1px solid rgba(0,0,0,.08)}
.mega-inner>div:first-child{padding-left:0;border-left:0}
.mega h3{margin:0 0 18px;color:#86868b;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mega .lead-links a{display:block;margin-bottom:13px;font-size:26px;line-height:1.16;font-weight:650;letter-spacing:-.05em}
.mega a:hover{color:var(--blue)}
.mega .small-links a{display:block;font-size:16px;line-height:1.78;color:rgba(0,0,0,.8)}
.mega-note{border-left:2px solid var(--blue);padding-left:16px;color:#515154;font-size:14px;line-height:1.55}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;transform:translateY(-1px)}
.dot-std{background:var(--std)}
.dot-open{background:var(--open)}
.dot-sdk{background:var(--sdk)}
.mobile-toggle,.mobile-scrim,.mobile-panel,.mobile-quick-links{display:none}
.mobile-quick-links{align-items:center;gap:12px;margin-left:auto}
.mobile-quick-links a{font-size:12px;font-weight:520;color:rgba(0,0,0,.72);white-space:nowrap}
.mobile-quick-links .primary{color:var(--blue)}
.mobile-quick-links .dashboard-button,.mobile-quick-links .profile-button{width:34px;height:34px}
.mobile-quick-links .dashboard-button,.mobile-quick-links .profile-button,.mobile-quick-links .primary,.mobile-toggle{position:relative;z-index:1;overflow:visible}
.mobile-quick-links .dashboard-button::after,.mobile-quick-links .profile-button::after,.mobile-quick-links .primary::after,.mobile-toggle::after{content:"";position:absolute;left:50%;top:50%;z-index:2;width:max(100%,44px);height:max(100%,44px);background:rgba(0,0,0,0);pointer-events:auto;transform:translate(-50%,-50%)}
.mobile-toggle{width:38px;height:38px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;position:relative}
.mobile-toggle span{position:absolute;width:18px;height:1.5px;border-radius:999px;background:currentColor;transition:transform .24s ease,opacity .18s ease}
.mobile-toggle span:nth-child(1){transform:translateY(-6px)}
.mobile-toggle span:nth-child(3){transform:translateY(6px)}
.mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
.mobile-scrim{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:1;width:100%;height:calc(100svh - var(--nav-h));padding:0;border:0;background:rgba(0,0,0,.20);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}
.mobile-panel{position:fixed;top:var(--nav-h);left:0;right:0;z-index:2;max-height:calc(100svh - var(--nav-h) - 48px);overflow:auto;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(26px);border-bottom:1px solid var(--line);box-shadow:0 26px 70px rgba(0,0,0,.10);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .24s ease,transform .24s ease,visibility .24s ease}
.mobile-menu-inner{max-width:var(--content);margin:0 auto;padding:16px 22px 28px}
.mobile-group{border-top:1px solid var(--line2);padding:15px 0}
.mobile-group:first-child{border-top:0}
.mobile-primary,.mobile-primary-link{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0;border:0;background:transparent;color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;font-size:22px;line-height:1.1;letter-spacing:-.055em;font-weight:650}
.mobile-primary:hover,.mobile-primary-link:hover{color:var(--blue)}
.mobile-chevron,.mobile-lang-caret{width:13px;height:13px;display:block;flex:0 0 auto;transition:transform .22s ease}
.mobile-group.is-open .mobile-chevron{transform:rotate(180deg)}
.mobile-columns{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;transition:grid-template-rows .22s ease,opacity .18s ease,visibility .18s ease,margin .22s ease}
.mobile-group.is-open .mobile-columns{grid-template-rows:1fr;margin-top:14px;opacity:1;visibility:visible}
.mobile-columns-inner{min-height:0;overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-left:18px}
.mobile-columns h3{margin:0 0 8px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.mobile-columns a{display:block;color:rgba(0,0,0,.78);font-size:15px;line-height:1.8}
.mobile-columns a:hover{color:var(--blue)}
.mobile-language{border-top:1px solid var(--line2);padding-top:15px}
.mobile-language-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;font-size:16px;font-weight:620;cursor:pointer}
.mobile-language-label{display:flex;align-items:center;gap:9px}
.mobile-language.is-open .mobile-lang-caret{transform:rotate(180deg)}
.mobile-language-panel{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;transition:grid-template-rows .22s ease,opacity .18s ease,visibility .18s ease,margin .22s ease}
.mobile-language.is-open .mobile-language-panel{grid-template-rows:1fr;margin-top:8px;opacity:1;visibility:visible}
.mobile-language-links{min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px}
.mobile-language-links a{display:block;padding:10px 11px;border-radius:8px;font-size:15px;color:rgba(0,0,0,.78)}
.mobile-language-links a:hover{background:var(--soft);color:#000}
body.mobile-menu-open{overflow:hidden}
body.mobile-menu-open .mobile-scrim,body.mobile-menu-open .mobile-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}

/*──────────────── responsive / motion ────────────────*/
@media(max-width:980px){
  .desktop-nav,.nav-list,.nav-actions{display:none}
  .mega{display:none}
  .mobile-toggle,.mobile-quick-links{display:flex}
  .mobile-scrim,.mobile-panel{display:block}
  .brand{min-width:0}
  .brand-mark{width:24px;height:24px}
}
@media(max-width:620px){
  .nav-shell{gap:10px;padding:0 14px}
  .mobile-quick-links{gap:9px}
  .mobile-quick-links a{font-size:11px}
  .mobile-toggle{width:34px;height:34px}
  .mobile-menu-inner{padding-left:18px;padding-right:18px}
  .mobile-columns-inner,.mobile-columns.two .mobile-columns-inner{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .mobile-toggle span,.mobile-scrim,.mobile-panel,.mobile-chevron,.mobile-lang-caret,.mobile-columns,.mobile-language-panel,.lang-menu,.mega{transition:none}
}
.lang-menu,.mega{transition-timing-function:cubic-bezier(.2,.8,.2,1)}

/*──────────────── M3 overlay ────────────────*/
.site-header {
  min-height: var(--af-nav-h);
  background: color-mix(in srgb, var(--m3-surface-container-low) 88%, transparent);
  border-bottom: 0;
  box-shadow: var(--m3-elevation-2);
  backdrop-filter: saturate(160%) blur(18px);
}

.site-header .nav-shell,
.site-header .header-inner {
  min-height: var(--af-nav-h);
}

.brand,
.brand-wordmark,
.site-header .brand,
.site-header .brand-wordmark {
  font-family: var(--af-font-sans);
  letter-spacing: 0;
  font-weight: 720;
}

.nav a,
.nav-link,
.nav-actions a,
.dashboard-button,
.profile-button,
.mobile-quick-links a {
  letter-spacing: 0;
}

.site-header,
.site-header a,
.site-header button,
.nav,
.nav-link,
.nav-actions a,
.dashboard-button,
.profile-button,
.mobile-quick-links a {
  color: var(--m3-on-surface);
}

.site-header .dashboard-button,
.site-header .profile-button,
.site-header .nav-actions .dashboard-button,
.site-header .nav-actions .profile-button,
.site-header .mobile-quick-links .dashboard-button,
.site-header .mobile-quick-links .profile-button {
  background: var(--m3-surface-container-lowest);
  color: var(--m3-on-surface);
  border-color: var(--m3-outline-variant);
}

.site-header .dashboard-button:hover,
.site-header .dashboard-button:focus-visible,
.site-header .profile-button:hover,
.site-header .profile-button:focus-visible {
  color: var(--m3-primary);
  border-color: var(--m3-primary);
}

.site-header .mobile-quick-links .dashboard-button,
.site-header .mobile-quick-links .profile-button,
.site-header .mobile-quick-links .primary,
.site-header .mobile-toggle {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.site-header .mobile-quick-links .dashboard-button::after,
.site-header .mobile-quick-links .profile-button::after,
.site-header .mobile-quick-links .primary::after,
.site-header .mobile-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: max(100%, 44px);
  height: max(100%, 44px);
  background: rgba(0, 0, 0, 0);
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.theme-toggle {
  width: 34px;
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-small);
  background: var(--m3-surface-container);
  color: var(--m3-on-surface);
  cursor: pointer;
  flex: 0 0 34px;
  font: inherit;
  letter-spacing: 0;
  padding: 0;
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  outline: 2px solid var(--m3-primary);
  outline-offset: 2px;
}

.mobile-theme-row {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--m3-outline-variant);
  padding-top: 10px;
  margin-top: 10px;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-actions .primary,
.mobile-quick-links .primary,
.mobile-primary:hover,
.mobile-primary-link:hover {
  color: var(--m3-primary);
}

.mega,
.lang-menu,
.mobile-panel,
.mobile-language-links {
  background: color-mix(in srgb, var(--m3-surface-container-lowest) 94%, transparent);
  border-color: var(--m3-outline-variant);
  box-shadow: var(--m3-elevation-3);
}


/*──────────────── contrast guards ────────────────*/
.mega h3,
.mobile-columns h3 {
  color: var(--af-menu-kicker);
}

.mega .lead-links a,
.mega .small-links a,
.lang-menu a,
.mobile-columns a,
.mobile-language-links a {
  color: var(--m3-on-surface);
}

.nav-actions .sso-button,
.mobile-quick-links .sso-button {
  color: var(--m3-on-surface);
}

.nav-actions .sso-button:hover,
.nav-actions .sso-button:focus-visible,
.nav-actions .sso-button:active,
.mobile-quick-links .sso-button:hover,
.mobile-quick-links .sso-button:focus-visible,
.mobile-quick-links .sso-button:active {
  color: var(--m3-primary);
}

.mega-note {
  color: var(--m3-on-surface-variant);
}

.site-header .lang-menu a,
.site-header .lang-menu a:hover,
.site-header .lang-menu a:focus-visible,
.mobile-language-links a:hover,
.mobile-language-links a:focus-visible,
.mobile-language-links a:active {
  background: var(--m3-surface-container-lowest);
  color: var(--m3-on-surface);
}

.site-header .lang-menu a:active {
  background: #1f2a42;
  color: #ffffff;
}

.mobile-language-toggle {
  border-color: var(--m3-outline);
  background: var(--m3-surface-container-lowest);
  color: var(--m3-on-surface);
}


html[data-theme="dark"] .mega .lead-links a,
html[data-theme="dark"] .mega .small-links a,
html[data-theme="dark"] .mobile-columns a {
  background: transparent !important;
  color: #e1e4ea !important;
}

html[data-theme="dark"] .mega .lead-links a:hover,
html[data-theme="dark"] .mega .lead-links a:focus-visible,
html[data-theme="dark"] .mega .small-links a:hover,
html[data-theme="dark"] .mega .small-links a:focus-visible,
html[data-theme="dark"] .mobile-columns a:hover,
html[data-theme="dark"] .mobile-columns a:focus-visible,
html[data-theme="dark"] .mobile-columns a:active {
  background: #1c2024 !important;
  color: #d3e4ff !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mega .lead-links a,
  :root:not([data-theme="light"]) .mega .small-links a,
  :root:not([data-theme="light"]) .mobile-columns a {
    background: transparent !important;
    color: #e1e4ea !important;
  }

  :root:not([data-theme="light"]) .mega .lead-links a:hover,
  :root:not([data-theme="light"]) .mega .lead-links a:focus-visible,
  :root:not([data-theme="light"]) .mega .small-links a:hover,
  :root:not([data-theme="light"]) .mega .small-links a:focus-visible,
  :root:not([data-theme="light"]) .mobile-columns a:hover,
  :root:not([data-theme="light"]) .mobile-columns a:focus-visible,
  :root:not([data-theme="light"]) .mobile-columns a:active {
    background: #1c2024 !important;
    color: #d3e4ff !important;
  }
}

/* Center the primary nav without transforming its ancestor. A transformed
   desktop-nav would trap the fixed mega menu inside the nav's own width. */
@media (min-width: 1241px) {
  .site-header .nav-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .site-header .brand {
    justify-self: start;
  }

  .site-header .desktop-nav {
    position: static;
    transform: none;
    justify-self: center;
  }

  .site-header .nav-actions {
    justify-self: end;
  }
}

/* Keep the action cluster as one outlined control in every theme. Theme tokens
   change with forced and automatic dark mode; the children stay borderless. */
.site-header .nav-actions {
  border-color: var(--m3-outline-variant);
  background: color-mix(in srgb, var(--m3-surface-container-low) 76%, transparent);
}

.site-header .nav-actions :is(.dashboard-button, .profile-button, .lang-btn) {
  border-color: transparent;
  background: transparent;
  color: var(--m3-on-surface);
}

html[data-theme="dark"] .lang:hover .lang-btn,
html[data-theme="dark"] .lang:focus-within .lang-btn {
  color: var(--m3-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .nav-actions {
    border-color: var(--m3-outline-variant);
    background: color-mix(in srgb, var(--m3-surface-container-low) 76%, transparent);
  }

  :root:not([data-theme="light"]) .lang:hover .lang-btn,
  :root:not([data-theme="light"]) .lang:focus-within .lang-btn {
    color: var(--m3-primary);
  }
}

/* Dark-mode legibility for the in-menu theme toggle: the structural light
   color would otherwise survive into dark (defect still present upstream). */
html[data-theme="dark"] .lang-menu .theme-toggle {
  color: var(--m3-on-surface);
}

html[data-theme="dark"] .lang-menu .theme-toggle:hover,
html[data-theme="dark"] .lang-menu .theme-toggle:focus-visible {
  background: var(--m3-surface-container);
  color: var(--m3-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lang-menu .theme-toggle {
    color: var(--m3-on-surface);
  }

  :root:not([data-theme="light"]) .lang-menu .theme-toggle:hover,
  :root:not([data-theme="light"]) .lang-menu .theme-toggle:focus-visible {
    background: var(--m3-surface-container);
    color: var(--m3-primary);
  }
}

/*──────────────── account menu ────────────────*/
.account-menu-host{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.account-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:2000;width:min(228px,calc(100vw - 32px));padding:8px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;box-shadow:0 18px 52px rgba(0,0,0,.16);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.account-menu-host[data-open="true"] .account-menu{opacity:1;visibility:visible;transform:translateY(0)}
.account-menu-identity{display:grid;gap:2px;padding:9px 10px 10px;border-bottom:1px solid rgba(0,0,0,.08);margin-bottom:5px}
.account-menu-identity strong{min-width:0;color:#111;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-identity span{min-width:0;color:rgba(0,0,0,.56);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu a{display:block;padding:9px 10px;border-radius:8px;color:rgba(0,0,0,.78);font-size:13px;text-decoration:none}
.account-menu a:hover,.account-menu a:focus-visible{background:#f5f5f7;color:#000;outline:none}
.account-menu-host>[data-sso-button]{display:inline-flex;align-items:center;justify-content:center}
[data-sso-button] .profile-avatar,[data-sso-button] svg{width:1.1em;height:1.1em;display:block;flex:0 0 auto}
