/* ─────────────────────────────────────────────────────────────
   help.cloudnc.com: the shared frame on every page (public and partner): fonts, design tokens,
   the pinned top bar, the CAM package picker and the footer.
   Built on the CloudNC Style Guide: Barlow only, square geometry, blue for every action, red
   reserved for the footer rule and the active navigation underline, no shadows.
   Quote Agent pages ([data-product="quote-agent"]) swap a few tokens to match the Quote Agent
   site: navy band, rounded cards, soft blue.
   Tokens carry an --hc- prefix so they never collide with the partner portal's site.css.
   Barlow is self-hosted (the security policy allows no font CDNs); licence in fonts/OFL.txt.
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/barlow-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/barlow-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Design tokens. color-scheme is set by each page's own stylesheet. */
:root {
  /* CloudNC Style Guide palette */
  --cnc-red:        #fd384e;  /* footer rule and active nav underline only */
  --cnc-black:      #030010;
  --cnc-white:      #fbfbfb;
  --cnc-blue-500:   #3d51ff;  /* every action: buttons, links, active states */
  --cnc-blue-600:   #1b32fd;  /* button hover and pressed */
  --cnc-link-hover: #0082fc;  /* link hover on light grounds */
  --cnc-blue-hover: #53b1ff;  /* link hover on dark grounds */
  --cnc-green:      #3ade7c;  /* positive state, as a mark beside text */
  --cnc-ink:        #333333;  /* long copy */
  --cnc-line:       #e2e2e2;  /* hairline dividers */

  /* Site roles */
  --hc-bg:           var(--cnc-white);
  --hc-surface:      #ffffff;
  --hc-ink:          var(--cnc-black);
  --hc-ink-2:        var(--cnc-ink);
  --hc-muted:        #5a5a66;    /* secondary text, 6.8:1 on white */
  --hc-line:         var(--cnc-line);
  --hc-line-strong:  #8a8a96;    /* control borders, 3.4:1 on white */
  --hc-tint:         #eef0ff;    /* selected states */
  --hc-code-bg:      #f4f4f6;
  --hc-danger-bg:    #fff2f2;
  --hc-warn:         #b26b00;

  --hc-band:       var(--cnc-black);
  --hc-band-solid: var(--cnc-black);
  --hc-band-ink:   var(--cnc-white);
  --hc-band-muted: rgba(251, 251, 251, 0.78);
  --hc-band-line:  rgba(251, 251, 251, 0.18);

  --hc-accent:       var(--cnc-red);  /* product identity: nav underline, footer rule */
  --hc-shadow-card:  none;
  --hc-radius:       0;               /* cards, panels, images: CloudNC is square */
  --hc-radius-btn:   4px;             /* buttons and fields */
  --hc-radius-chip:  40px;            /* choice chips only */
  --hc-hairline:     2px;
  --hc-wrap:         1180px;
  --hc-header-h:     72px;            /* pinned top bar; sticky panels sit below it */

  /* Type: seven sizes. Weight 300 only at 32px and above. */
  --hc-fs-title: 48px;   /* page title */
  --hc-fs-h2:    32px;   /* section heading */
  --hc-fs-h3:    24px;   /* card and H3 titles */
  --hc-fs-lg:    18px;   /* row titles, lede */
  --hc-fs-body:  16px;   /* body, summaries, steps */
  --hc-fs-sm:    14px;   /* meta, breadcrumbs, captions */
  --hc-fs-xs:    12px;   /* labels and badges */

  --hc-font: 'Barlow', Arial, sans-serif;
  --hc-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --hc-ease: 0.1s ease;
}

/* Quote Agent: tokens from cloudnc.com/quote-agent */
:root[data-product='quote-agent'] {
  --hc-band:        linear-gradient(135deg, #071225 0%, #0d1d38 100%);
  --hc-band-solid:  #071225;
  --hc-bg:          #f5f8fd;
  --hc-line:        #e2eaf5;
  --hc-tint:        #eaf2ff;
  --hc-code-bg:     #eef3fa;
  --hc-accent:      #2563ff;
  --hc-shadow-card: 0 20px 50px rgba(37, 99, 255, 0.07);
  --hc-radius:      16px;
  --hc-radius-btn:  8px;
}

/* The frame keeps its own type and box rules, whichever stylesheet the page body uses. */
.site-header, .site-footer { font-family: var(--hc-font); font-size: var(--hc-fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.site-header *, .site-header *::before, .site-header *::after,
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-header a, .site-footer a { text-decoration: none; }
.site-header .wrap, .site-footer .wrap {
  max-width: var(--hc-wrap); margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
@media (max-width: 600px) {
  .site-header .wrap, .site-footer .wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}
.site-header :focus-visible, .site-footer :focus-visible { outline: 2px solid var(--cnc-blue-hover); outline-offset: 2px; }
.site-header svg, .site-footer svg { flex: none; }

/* Top bar: pinned while scrolling, on every page */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--hc-band-solid); color: var(--hc-band-ink); border-bottom: 1px solid var(--hc-band-line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: var(--hc-header-h); }
.hc-brand { display: inline-flex; align-items: center; gap: 14px; flex: none; color: var(--hc-band-ink); }
.hc-brand:hover { color: var(--hc-band-ink); }
.hc-brand-logo { display: block; width: 120px; height: auto; }
.hc-brand-sub {
  font-size: var(--hc-fs-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hc-band-muted); padding-left: 14px; border-left: 1px solid var(--hc-band-line); line-height: 1.2;
}

/* Product switch: CAM Assist / Quote Agent */
.product-switch {
  display: inline-flex; padding: 3px; gap: 2px; margin-right: auto;
  border: 1px solid var(--hc-band-line); border-radius: calc(var(--hc-radius-btn) + 3px);
}
.product-switch a {
  color: var(--hc-band-muted); font-size: var(--hc-fs-sm); font-weight: 500; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--hc-radius-btn);
  transition: background-color var(--hc-ease), color var(--hc-ease);
}
.product-switch a:hover { color: var(--hc-band-ink); background: rgba(251, 251, 251, .08); }
.product-switch a[aria-current='true'] { color: var(--hc-band-solid); background: var(--hc-band-ink); }
.product-switch { align-items: center; }

/* "CAM Assist for Fusion" in the top bar: the CAM Assist side of the switch is the package picker */
.product-switch .cam-picker-btn {
  gap: 7px; padding: 4px 9px 4px 5px; border: 0; border-radius: var(--hc-radius-btn);
  color: var(--hc-band-muted); font-size: var(--hc-fs-sm); font-weight: 500; white-space: nowrap;
}
.product-switch .cam-picker-btn:hover { color: var(--hc-band-ink); background: rgba(251, 251, 251, .08); }
.product-switch .cam-picker-btn[aria-current='true'] { color: var(--hc-band-solid); background: var(--hc-band-ink); }
.product-switch .cam-picker-btn[aria-current='true'] .cam-logo { border-color: var(--hc-line); }
.product-switch .cam-picker-btn strong { font-weight: 600; }
.product-switch .cam-picker-value { font-size: var(--hc-fs-sm); }
@media (max-width: 380px) { .product-switch .cam-picker-value .long { display: none; } }

.hc-nav { display: flex; align-items: center; gap: 4px; }
.hc-nav a {
  white-space: nowrap;
  color: var(--hc-band-muted); font-weight: 500; font-size: var(--hc-fs-body);
  padding: 8px 12px; border-bottom: var(--hc-hairline) solid transparent;
}
.hc-nav a:hover { color: var(--hc-band-ink); }
.hc-nav a[aria-current='page'] { color: var(--hc-band-ink); border-bottom-color: var(--hc-accent); }
.hc-nav .btn { margin-left: 8px; padding: 0.65rem 1rem; }
.hc-nav-toggle {
  display: none; background: none; border: 0; color: var(--hc-band-ink);
  padding: 8px; cursor: pointer; margin-left: auto;
}
@media (max-width: 1120px) {
  .hc-nav-toggle { display: inline-flex; }
  .product-switch { margin-right: 0; }
  .hc-nav {
    display: none; position: absolute; top: 100%; left: 16px; right: 16px;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: var(--hc-band-solid); border: 1px solid var(--hc-band-line); border-radius: var(--hc-radius);
  }
  .hc-nav.open { display: flex; }
  .hc-nav .btn { margin: 6px 0 0; justify-content: center; }
}
@media (max-width: 560px) {
  /* Two rows on phones: logo and menu, then the product switch */
  :root { --hc-header-h: 112px; }
  .site-header .wrap { flex-wrap: wrap; height: auto; min-height: var(--hc-header-h); gap: 8px 12px; padding-block: 10px; }
  .hc-brand-sub { display: none; }
  .hc-brand-logo { width: 96px; }
  .product-switch { order: 3; width: 100%; }
  .product-switch .cam-picker { flex: 1; min-width: 0; }
  .product-switch .cam-picker-btn { width: 100%; }
  .product-switch .cam-picker-value { overflow: hidden; text-overflow: ellipsis; }
  .product-switch a { padding: 6px 12px; }
  .product-switch .cam-menu { position: fixed; left: 16px; right: 16px; top: calc(var(--hc-header-h) + env(safe-area-inset-top, 0px)); width: auto; min-width: 0; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 500; font-size: var(--hc-fs-body); line-height: 1;
  padding: 0.75rem 1.1rem; border-radius: var(--hc-radius-btn); cursor: pointer;
  background: var(--cnc-blue-500); border: 1px solid var(--cnc-blue-500); color: var(--cnc-white) !important;
  transition: background-color var(--hc-ease), border-color var(--hc-ease);
}
.btn:hover { background: var(--cnc-blue-600); border-color: var(--cnc-blue-600); }
.btn.ghost { background: transparent; color: var(--cnc-blue-500) !important; border: 2px solid var(--cnc-blue-500); padding: calc(0.75rem - 1px) calc(1.1rem - 1px); }
.btn.ghost:hover { background: var(--hc-tint); }

/* ── CAM package logos and picker ──────────────────────────── */

/* ── CAM package logos: one treatment everywhere ───────────── */

.cam-logo {
  --s: 20px;
  width: calc(var(--s) + 8px); height: calc(var(--s) + 8px); flex: none;
  display: inline-grid; place-items: center; background: #ffffff; border: 1px solid var(--hc-line); border-radius: 2px;
}
.cam-logo img { width: var(--s); height: var(--s); object-fit: contain; display: block; }
.cam-logo.all { background: var(--hc-tint); color: var(--cnc-blue-500); border-color: transparent; }
.band .cam-logo { border-color: transparent; }
.band .cam-logo.all { background: rgba(251, 251, 251, .12); color: var(--hc-band-ink); }
.cam-list { display: inline-flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.cam-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.cam-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.band .cam-chip, .band .cam-all { color: var(--hc-band-ink); }

/* ── CAM package picker (page heads) ───────────────────────── */

.cam-picker { position: relative; min-width: 0; max-width: 100%; }
.cam-picker-btn {
  display: flex; align-items: center; gap: 10px; max-width: 100%;
  font: inherit; color: var(--hc-band-ink); cursor: pointer; text-align: left;
  background: transparent; border: 1px solid var(--hc-band-line);
  border-radius: var(--hc-radius-btn); padding: 6px 12px 6px 7px;
  transition: border-color var(--hc-ease), background-color var(--hc-ease);
}
.cam-picker-btn:hover, .cam-picker-btn[aria-expanded='true'] { background: rgba(251, 251, 251, .06); border-color: rgba(251, 251, 251, .4); }
.cam-picker-label { display: grid; line-height: 1.2; min-width: 0; }
.cam-picker-label small { font-size: var(--hc-fs-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-band-muted); }
.cam-picker-value { font-weight: 500; font-size: var(--hc-fs-body); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-picker-btn > svg { opacity: .7; flex: none; }

.cam-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 100%; width: max-content; max-width: calc(100vw - 32px);
  list-style: none; margin: 0; padding: 6px; background: var(--hc-surface); color: var(--hc-ink);
  border: 1px solid var(--hc-line-strong); border-radius: var(--hc-radius); box-shadow: var(--hc-shadow-card);
}
.cam-menu li {
  display: grid; grid-template-columns: 30px 1fr 16px; align-items: center; gap: 10px;
  padding: 8px 10px; cursor: pointer; font-weight: 500; font-size: var(--hc-fs-body);
}
.cam-menu li:hover, .cam-menu li:focus { background: var(--hc-bg); outline: none; }
.cam-menu li:focus-visible { box-shadow: inset 0 0 0 2px var(--cnc-blue-500); }
.cam-menu li[aria-selected='true'] { background: var(--hc-tint); color: var(--cnc-blue-500); }

/* ── Footer ──────────────────────────────────────────────────── */

/* ── Footer ────────────────────────────────────────────────── */

.site-footer { background: var(--hc-band); color: var(--hc-band-muted); font-size: var(--hc-fs-sm); border-top: var(--hc-hairline) solid var(--hc-accent); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: var(--hc-band-muted); }
.site-footer a:hover { color: var(--cnc-blue-hover); }