/* =====================================================
   PMW Resources — styles.css
   Shared styles for every page in the hub.
   Author: PMW Dev Team · Follows PMW CSS conventions
   ===================================================== */

/* ===== Tokens ===== */
:root {
  /* PMW core palette (kept from existing stack) */
  --primary: #A667E6;
  --primary-rgb: 166, 103, 230;
  --secondary: #189bd7;
  --secondary-rgb: 24, 155, 215;
  --dark: #0a0a14;
  --dark-rgb: 10, 10, 20;
  --light: #ffffff;
  --yellow: #ffc107;
  --gray: #f5f6f8;
  --gray-md: #e5e7eb;
  --gray-dark: #8a94a3;
  --gray-darker: #4a5566;
  --border-color: #e5e7eb;
  --muted: #6b7583;
  --body-text: #2f3a4a;
  --text-dark: #1e2a3a;
  --bg-color: #06060d;
  --gradient: linear-gradient(90deg, #189BD7 0%, #A667E6 100%);
  --gradient-reverse: linear-gradient(90deg, #A667E6 0%, #189BD7 100%);

  /* Typography */
  --primary-font: 'Manrope', system-ui, -apple-system, sans-serif;
  --secondary-font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-awesome: 'Font Awesome 6 Free';
  --default-fs: 15px;

  /* Elevation */
  --box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
  --box-shadow-dark: 0 20px 60px rgba(0,0,0,.6);
  --box-shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --box-shadow-vertical: 0 12px 32px rgba(0,0,0,.4);

  /* Rounded corners (updated Aug 2026 for the new design system) */
  --nhw-border-radius: 20px;
  --nhw-border-radius-lg: 25px;
  --nhw-border-radius-sm: 8px;

  /* Dark-mode surfaces (new tokens, semantic kebab-case family) */
  --bg-dark: #06060d;
  --bg-dark-elevated: #0f0f1a;
  --bg-dark-subtle: #0a0a14;
  --border-dark: rgba(255, 255, 255, .08);
  --border-dark-strong: rgba(255, 255, 255, .14);
  --text-inverse: #ffffff;
  --text-inverse-muted: rgba(255, 255, 255, .58);
  --text-inverse-soft: rgba(255, 255, 255, .78);

  /* Brand accent palette from marketing site */
  --purple: #7c5fee;
  --purple-rgb: 124, 95, 238;
  --pink: #e94b8b;
  --pink-rgb: 233, 75, 139;
  --green: #4ade80;
  --green-rgb: 74, 222, 128;

  /* Reusable gradients */
  --gradient-hero: linear-gradient(135deg, rgba(var(--purple-rgb), .35) 0%, rgba(var(--secondary-rgb), .18) 100%);
  --gradient-banner: linear-gradient(90deg, #189BD7 0%, #A667E6 100%);
  --gradient-text: linear-gradient(90deg, #189BD7 0%, #A667E6 100%);
  --gradient-card: linear-gradient(135deg, #14141f 0%, #0a0a14 100%);
  --gradient-card-hover: linear-gradient(135deg, #1a1a2a 0%, #0f0f1f 100%);
  --gradient-border: linear-gradient(90deg, #189BD7 0%, #A667E6 100%);

  /* Layout constants */
  --nav-h: 64px;
  --side-w: 280px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--secondary-font); font-size:var(--default-fs); line-height:1.5; color:var(--text-inverse-soft); background:var(--bg-dark); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background:radial-gradient(ellipse 80% 50% at 20% 0%, rgba(var(--purple-rgb), .18), transparent 60%), radial-gradient(ellipse 60% 40% at 90% 30%, rgba(var(--secondary-rgb), .12), transparent 60%); pointer-events:none; z-index:0; }

h1, h2, h3, h4, h5, h6, .display-1, .display-2 { font-family:var(--primary-font); color:var(--text-inverse); margin:0; letter-spacing:-0.02em; font-weight:700; }
.display-1 { font-size:clamp(2.25rem, 4.5vw, 3.5rem); font-weight:800; line-height:1.05; letter-spacing:-0.03em; }
.display-2 { font-size:clamp(1.5rem, 2.5vw, 2rem); font-weight:700; letter-spacing:-0.02em; }
.display-1__sm { display:block; font-family:var(--secondary-font); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); margin-bottom:16px; }

a { color:inherit; text-decoration:none !important; transition:color .15s ease; }
button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
/* ===== Content Images ===== */
img.lazyload, img.lazyloaded { display: block; max-width: 100%; height: auto; margin: 14px 0; border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius-sm); }

/* ===== Utility ===== */
.pw-1600 { max-width:1600px; margin:0 auto; }
.text-gradient { background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ===== Top Nav ===== */
.site-header { position:sticky; top:0; z-index:50; height:var(--nav-h); background:rgba(6, 6, 13, .8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border-dark); display:flex; align-items:center; padding:0 24px; gap:24px; }
.site-header__brand { display:flex; align-items:center; gap:14px; min-width:calc(var(--side-w) - 24px); padding-right:24px; }
.site-header__logo { display:flex; align-items:center; height:32px; color:var(--secondary); transition:color .15s ease; }
.site-header__logo:hover { color:#3ab5e8; }
.site-header__logo svg { height:32px; width:auto; display:block; }
.site-header__wordmark { font-family:var(--primary-font); font-weight:700; font-size:13px; color:var(--text-inverse-muted); letter-spacing:.02em; padding-left:14px; border-left:1px solid var(--border-dark); text-transform:uppercase; }

.site-header__search { flex:1; max-width:520px; position:relative; }
.site-header__search input { width:100%; height:40px; padding:0 40px 0 40px; background:rgba(255, 255, 255, .04); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); font-family:var(--secondary-font); font-size:14px; color:var(--text-inverse); transition:all .15s ease; cursor:pointer; }
.site-header__search input:is(:hover, :focus-visible) { outline:0; background:rgba(255, 255, 255, .06); border-color:rgba(var(--purple-rgb), .5); box-shadow:0 0 0 3px rgba(var(--purple-rgb), .15), 0 0 40px rgba(var(--purple-rgb), .15); }
.site-header__search input::placeholder { color:var(--text-inverse-muted); }
.site-header__search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-inverse-muted); font-size:13px; pointer-events:none; }
.site-header__search kbd { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:rgba(255, 255, 255, .06); border:1px solid var(--border-dark); border-radius:6px; padding:2px 6px; font-size:11px; font-family:var(--secondary-font); color:var(--text-inverse-muted); font-weight:600; }

.site-header__links { display:flex; align-items:center; gap:4px; margin-left:auto; }
.site-header__link { display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--nhw-border-radius-lg); font-size:14px; font-weight:600; color:var(--text-inverse-soft); transition:all .15s ease; }
.site-header__link:is(:hover, :focus-visible) { color:var(--text-inverse); background:rgba(255, 255, 255, .05); }
.site-header__link i { font-size:13px; color:var(--text-inverse-muted); }
.site-header__link.is-active { color:var(--secondary); }
.site-header__link.is-active i { color:var(--secondary); }

.site-header__divider { width:1px; height:24px; background:var(--border-dark); margin:0 8px; }
.site-header__icon-btn { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:var(--text-inverse-soft); position:relative; transition:all .15s ease; }
.site-header__icon-btn:is(:hover, :focus-visible) { background:rgba(255, 255, 255, .05); color:var(--text-inverse); }
.site-header__icon-btn .dot { position:absolute; top:8px; right:8px; width:8px; height:8px; background:var(--pink); border:2px solid var(--bg-dark); border-radius:50%; box-shadow:0 0 8px rgba(var(--pink-rgb), .6); }
.site-header__cta { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--nhw-border-radius-lg); background:var(--secondary); color:var(--bg-dark); font-size:13px; font-weight:700; margin-left:8px; transition:all .15s ease; box-shadow:0 0 24px rgba(var(--secondary-rgb), .3); }
.site-header__cta:is(:hover, :focus-visible) { background:#3ab5e8; box-shadow:0 0 32px rgba(var(--secondary-rgb), .5); }

/* ===== Layout =====
   Semantic <header> / <nav> / <main> live in header.liquid, nav.liquid,
   and the page template. .page-layout is the grid wrapper around
   <nav class="site-nav"> and <main class="page-content">. */
.page-layout { display:grid; grid-template-columns:1fr; min-height:calc(100vh - var(--nav-h)); position:relative; z-index:1; }
/* .page-layout { display:grid; grid-template-columns:var(--side-w) 1fr; min-height:calc(100vh - var(--nav-h)); position:relative; z-index:1; } */

/* ===== Side Nav ===== */
.site-nav { background:rgba(15, 15, 26, .5); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-right:1px solid var(--border-dark); padding:20px 0; overflow-y:auto; position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); }
.site-nav__group { padding:0 16px 8px; }
.site-nav__label { display:flex; align-items:center; justify-content:space-between; padding:12px 8px 8px; font-family:var(--secondary-font); font-size:11px; font-weight:700; color:var(--text-inverse-muted); letter-spacing:.08em; text-transform:uppercase; }
.site-nav__label-action { color:var(--text-inverse-muted); font-size:11px; font-weight:600; transition:color .15s ease; cursor:pointer; }
.site-nav__label-action:hover { color:var(--secondary); }

.site-nav__item { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--nhw-border-radius); font-size:14px; font-weight:500; color:var(--text-inverse-soft); position:relative; transition:all .15s ease; cursor:pointer; }
.site-nav__item:is(:hover, :focus-visible) { background:rgba(255, 255, 255, .04); color:var(--text-inverse); }
.site-nav__item.is-active { background:linear-gradient(90deg, rgba(var(--purple-rgb), .15), rgba(var(--secondary-rgb), .05)); color:var(--text-inverse); font-weight:600; }
.site-nav__item.is-active::before { content:''; position:absolute; left:-16px; top:6px; bottom:6px; width:3px; background:var(--gradient-text); border-radius:2px; box-shadow:0 0 12px rgba(var(--purple-rgb), .6); }
.site-nav__item.is-active .site-nav__icon { color:var(--secondary); }
.site-nav__icon { width:20px; height:20px; display:grid; place-items:center; color:var(--text-inverse-muted); font-size:14px; flex-shrink:0; transition:color .15s ease; }
.site-nav__item:hover .site-nav__icon { color:var(--text-inverse); }
.site-nav__label-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-nav__chevron { color:var(--text-inverse-muted); font-size:10px; transition:transform .15s ease; }
.site-nav__item[data-expanded="true"] .site-nav__chevron { transform:rotate(90deg); }

.site-nav__sub { padding:4px 0; margin-left:20px; border-left:1px solid var(--border-dark); display:none; }
.site-nav__item[data-expanded="true"] + .site-nav__sub { display:block; }
.site-nav__sub-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px 6px 20px; border-radius:var(--nhw-border-radius-sm); font-size:13px; color:var(--text-inverse-muted); transition:color .15s ease; position:relative; }
.site-nav__sub-item:is(:hover, :focus-visible) { color:var(--text-inverse); background:rgba(255, 255, 255, .03); }
.site-nav__sub-item.is-active { color:var(--secondary); font-weight:600; }
.site-nav__sub-item.is-active::before { content:''; position:absolute; left:-1px; top:6px; bottom:6px; width:2px; background:var(--secondary); box-shadow:0 0 8px rgba(var(--secondary-rgb), .5); }
.site-nav__sub-item > span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Level 2 sub-item that has its own children (a sub-parent) */
.site-nav__sub-item--parent { cursor:pointer; color:var(--text-inverse-soft); font-weight:500; }
.site-nav__sub-item--parent .site-nav__chevron { color:var(--text-inverse-muted); font-size:9px; transition:transform .15s ease; flex-shrink:0; }
.site-nav__sub-item--parent[data-expanded="true"] .site-nav__chevron { transform:rotate(90deg); }
.site-nav__sub-item--parent[data-expanded="true"] { color:var(--text-inverse); }

/* Level 2 sub-parents (Advanced Marketing Platform, Calculators, IDX, etc.) */
.site-nav__sub-item--parent { cursor:pointer; color:var(--text-inverse-soft); font-weight:500; }
.site-nav__sub-item--parent .site-nav__chevron { color:var(--text-inverse-muted); font-size:9px; transition:transform .15s ease; flex-shrink:0; }
.site-nav__sub-item--parent[data-expanded="true"] .site-nav__chevron { transform:rotate(90deg); }
.site-nav__sub-item--parent[data-expanded="true"] { color:var(--text-inverse); }

/* Level 3 nested items (iHomeFinder anchors, Rentvine anchors, PMI Builds items, etc.) */
.site-nav__nest { padding:2px 0 4px; margin-left:16px; border-left:1px solid var(--border-dark); display:none; }
.site-nav__sub-item--parent[data-expanded="true"] + .site-nav__nest { display:block; }
.site-nav__nest-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 10px 5px 16px; border-radius:var(--nhw-border-radius-sm); font-size:12px; color:var(--text-inverse-muted); transition:color .15s ease; position:relative; }
.site-nav__nest-item:is(:hover, :focus-visible) { color:var(--text-inverse); background:rgba(255, 255, 255, .03); }
.site-nav__nest-item.is-active { color:var(--secondary); font-weight:600; }
.site-nav__nest-item.is-active::before { content:''; position:absolute; left:-1px; top:5px; bottom:5px; width:2px; background:var(--secondary); box-shadow:0 0 8px rgba(var(--secondary-rgb), .5); }
.site-nav__nest-item > span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-nav__nest-item:hover .pin-btn { opacity:1; }

/* Level 3 nested items (grandchildren) */
.site-nav__nest { padding:2px 0 4px; margin-left:16px; border-left:1px solid var(--border-dark); display:none; }
.site-nav__sub-item--parent[data-expanded="true"] + .site-nav__nest { display:block; }
.site-nav__nest-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 10px 5px 16px; border-radius:var(--nhw-border-radius-sm); font-size:12px; color:var(--text-inverse-muted); transition:color .15s ease; position:relative; }
.site-nav__nest-item:is(:hover, :focus-visible) { color:var(--text-inverse); background:rgba(255, 255, 255, .03); }
.site-nav__nest-item.is-active { color:var(--secondary); font-weight:600; }
.site-nav__nest-item.is-active::before { content:''; position:absolute; left:-1px; top:5px; bottom:5px; width:2px; background:var(--secondary); box-shadow:0 0 8px rgba(var(--secondary-rgb), .5); }
.site-nav__nest-item > span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-nav__nest-item:hover .pin-btn { opacity:1; }

/* Top-level items that are direct links (no children, no chevron) */
.site-nav__item--leaf { text-decoration:none; }
.site-nav__item--leaf .site-nav__chevron { display:none; }

/* External link indicator */
.ext-icon { font-size:9px; color:var(--text-inverse-muted); opacity:.6; margin-left:auto; flex-shrink:0; }

.site-nav__divider { height:1px; background:var(--border-dark); margin:12px 24px; }

.site-nav__footer { padding:16px 24px 24px; margin-top:8px; border-top:1px solid var(--border-dark); }
.site-nav__promo { padding:16px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); position:relative; overflow:hidden; }
.site-nav__promo::before { content:''; position:absolute; bottom:-30%; right:-20%; width:140%; height:90%; background:url('https://pmw.nesthub.com/images/mesh-05.svg') no-repeat center / contain; opacity:.35; -webkit-mask-image:radial-gradient(ellipse at bottom right, black 0%, black 30%, transparent 70%); mask-image:radial-gradient(ellipse at bottom right, black 0%, black 30%, transparent 70%); pointer-events:none; }
.site-nav__promo::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(var(--purple-rgb), .08), transparent 55%); pointer-events:none; }
.site-nav__promo h5 { position:relative; z-index:1; font-family:var(--primary-font); font-size:13px; font-weight:700; color:var(--text-inverse); margin:0 0 4px; }
.site-nav__promo p { position:relative; z-index:1; font-size:12px; color:var(--text-inverse-muted); margin:0 0 10px; line-height:1.4; }
.site-nav__promo a { position:relative; z-index:1; font-size:12px; font-weight:600; color:var(--secondary); display:inline-flex; align-items:center; gap:6px; }
.site-nav__promo a i { font-size:10px; transition:transform .15s ease; }
.site-nav__promo a:hover i { transform:translateX(3px); }

.site-nav__empty { padding:16px 10px; text-align:center; color:var(--text-inverse-muted); }
.site-nav__empty i { display:block; font-size:20px; color:rgba(255, 255, 255, .12); margin-bottom:8px; }
.site-nav__empty p { font-size:12px; margin:0 0 4px; color:var(--text-inverse-soft); }
.site-nav__empty small { font-size:11px; color:var(--text-inverse-muted); line-height:1.4; }



/* ===== Pin System ===== */
.pin-btn { opacity:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:var(--nhw-border-radius-lg); color:var(--text-inverse-muted); font-size:12px; background:transparent; border:0; transition:all .15s ease; cursor:pointer; flex-shrink:0; }
.pin-btn:is(:hover, :focus-visible) { color:var(--secondary); background:rgba(var(--secondary-rgb), .1); }
.pin-btn.is-pinned { opacity:1; color:var(--secondary); }
.site-nav__sub-item:hover .pin-btn, .cmdk__result:hover .pin-btn, .site-nav__item:hover .pin-btn { opacity:1; }
.cmdk__result .pin-btn { margin-right:8px; }

.pin-this { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; background:rgba(255, 255, 255, .04); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-lg); color:var(--text-inverse-soft); font-family:var(--secondary-font); font-size:12px; font-weight:600; transition:all .15s ease; cursor:pointer; white-space:nowrap; }
.pin-this:is(:hover, :focus-visible) { background:rgba(var(--secondary-rgb), .08); border-color:rgba(var(--secondary-rgb), .3); color:var(--secondary); }
.pin-this.is-pinned { background:rgba(var(--secondary-rgb), .1); border-color:rgba(var(--secondary-rgb), .3); color:var(--secondary); }
.pin-this i { font-size:11px; }

/* ===== Content ===== */
.page-content { padding:32px; position:relative; min-width:0; }
.crumb-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-inverse-muted); }
.crumb i { font-size:10px; }
.crumb a:hover { color:var(--text-inverse); }
.crumb .is-current { color:var(--text-inverse); font-weight:600; }

/* ===== Hero ===== */
.hero { background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); padding:56px 56px 40px; position:relative; overflow:hidden; margin-bottom:16px; }
.hero__mesh { position:absolute; top:0; right:-5%; width:70%; height:100%; background:url('https://pmw.nesthub.com/images/mesh-05.svg') no-repeat center / contain; opacity:.5; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.9) 55%, black 75%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.9) 55%, black 75%); pointer-events:none; }
.hero::before { content:''; position:absolute; inset:0; background:var(--gradient-hero); pointer-events:none; }
.hero::after { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; background:radial-gradient(circle, rgba(var(--purple-rgb), .25), transparent 60%); pointer-events:none; }
.hero__eyebrow { position:relative; z-index:1; font-family:var(--secondary-font); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.hero__eyebrow .dot { width:6px; height:6px; background:var(--secondary); border-radius:50%; box-shadow:0 0 12px rgba(var(--secondary-rgb), .8); }
.hero__title { position:relative; z-index:1; font-size:clamp(2.25rem, 4.5vw, 3.75rem); font-weight:800; color:var(--text-inverse); line-height:1.05; margin-bottom:20px; letter-spacing:-0.03em; }
.hero__accent { background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__desc { position:relative; z-index:1; font-size:15px; color:var(--text-inverse-muted); max-width:640px; line-height:1.6; margin-bottom:36px; }
.hero__stats { position:relative; z-index:1; display:flex; gap:56px; padding-top:32px; border-top:1px solid var(--border-dark); flex-wrap:wrap; }
.hero__stat-value { font-family:var(--primary-font); font-size:44px; font-weight:800; line-height:1; margin-bottom:8px; font-variant-numeric:tabular-nums; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__stat-value--pink { background:linear-gradient(135deg, #e94b8b, #ff5c00); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__stat-value--muted { background:none; -webkit-text-fill-color:var(--text-inverse-muted); color:var(--text-inverse-muted); }
.hero__stat-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-inverse-muted); }
.hero__actions { position:relative; z-index:1; display:flex; gap:12px; margin-bottom:32px; flex-wrap:wrap; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--nhw-border-radius-lg); font-family:var(--secondary-font); font-size:13px; font-weight:700; border:1px solid transparent; cursor:pointer; transition:all .15s ease; text-decoration:none; white-space:nowrap; }
.btn--secondary { background:rgba(255, 255, 255, .06); border-color:var(--border-dark); color:var(--text-inverse); }
.btn--secondary:is(:hover, :focus-visible) { background:rgba(255, 255, 255, .1); border-color:var(--border-dark-strong); }
.btn--white { background:#fff; color:var(--bg-dark); }
.btn--white:is(:hover, :focus-visible) { background:#e5e7eb; }
.btn--outline-blue { background:transparent; border-color:rgba(var(--secondary-rgb), .3); color:var(--secondary); }
.btn--outline-blue:is(:hover, :focus-visible) { background:rgba(var(--secondary-rgb), .1); border-color:rgba(var(--secondary-rgb), .5); }
.btn--blue { background:var(--secondary); color:var(--bg-dark); box-shadow:0 0 24px rgba(var(--secondary-rgb), .3); }
.btn--blue:is(:hover, :focus-visible) { background:#3ab5e8; box-shadow:0 0 32px rgba(var(--secondary-rgb), .5); }
.btn--primary { background:var(--primary); color:#fff; box-shadow:0 0 24px rgba(var(--primary-rgb), .3); }
.btn--primary:is(:hover, :focus-visible) { background:#ff7625; box-shadow:0 0 32px rgba(var(--primary-rgb), .5); }
.btn--arrow i { transition:transform .15s ease; }
.btn--arrow:hover i { transform:translateX(3px); }
.btn--sm { padding:8px 14px; font-size:12px; }
.btn--lg { padding:14px 26px; font-size:14px; }

/* ===== Progress Row ===== */
.progress-row { background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); padding:20px 32px; display:flex; align-items:center; gap:20px; position:relative; overflow:hidden; margin-bottom:32px; flex-wrap:wrap; }
.progress-row__label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-inverse-muted); }
.progress-row__track { flex:1; min-width:120px; height:6px; background:rgba(255, 255, 255, .06); border-radius:3px; position:relative; overflow:hidden; }
.progress-row__fill { position:absolute; inset:0 auto 0 0; width:0%; background:var(--gradient-text); box-shadow:0 0 12px rgba(var(--purple-rgb), .5); transition:width .3s ease; }
.progress-row__count { font-size:14px; font-weight:700; color:var(--text-inverse); font-variant-numeric:tabular-nums; }
.progress-row__count span { color:var(--text-inverse-muted); font-weight:500; }

/* ===== Core Values (home page) ===== */
.core-values { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:48px; }
.core-value { display:flex; align-items:center; gap:14px; padding:14px 20px 14px 16px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-lg); position:relative; overflow:hidden; transition:all .2s ease; }
.core-value::before { content:''; position:absolute; inset:0; border-radius:var(--nhw-border-radius-lg); padding:1.5px; background:var(--gradient-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.core-value:hover { background:var(--gradient-card-hover); transform:translateY(-1px); }
.core-value:hover::before { opacity:1; }
.core-value__letter { font-family:var(--primary-font); font-size:28px; font-weight:800; line-height:1; flex-shrink:0; width:32px; text-align:center; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.core-value__body { min-width:0; }
.core-value__title { font-family:var(--primary-font); font-size:14px; font-weight:700; color:var(--text-inverse); margin:0 0 2px; }
.core-value__desc { font-size:12px; color:var(--text-inverse-muted); line-height:1.4; }

/* ===== Section Grid (home page) ===== */
.section-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:48px; }
.section-tile { display:flex; flex-direction:column; padding:24px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); transition:transform .2s ease, background .2s ease; position:relative; overflow:hidden; text-decoration:none; }
.section-tile::before { content:''; position:absolute; inset:0; border-radius:var(--nhw-border-radius); padding:1.5px; background:var(--gradient-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:2; }
.section-tile::after { content:''; position:absolute; top:-40%; right:-30%; width:140px; height:140px; background:radial-gradient(circle, rgba(var(--purple-rgb), .18), transparent 70%); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.section-tile:is(:hover, :focus-visible) { background:var(--gradient-card-hover); transform:translateY(-2px); }
.section-tile:is(:hover, :focus-visible)::before { opacity:1; }
.section-tile:is(:hover, :focus-visible)::after { opacity:1; }
.section-tile__icon { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:rgba(var(--secondary-rgb), .1); border:1px solid rgba(var(--secondary-rgb), .2); color:var(--secondary); font-size:16px; margin-bottom:16px; transition:all .2s ease; position:relative; z-index:1; }
.section-tile:hover .section-tile__icon { background:rgba(var(--secondary-rgb), .15); border-color:rgba(var(--secondary-rgb), .4); }
.section-tile__title { font-family:var(--primary-font); font-size:15px; font-weight:700; color:var(--text-inverse); margin:0 0 4px; position:relative; z-index:1; }
.section-tile__count { font-size:12px; color:var(--text-inverse-muted); font-weight:500; position:relative; z-index:1; }

/* ===== Recent Grid ===== */
.recent-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:48px; }
.recent-list__item { display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); transition:all .15s ease; text-decoration:none; }
.recent-list__item:is(:hover, :focus-visible) { background:var(--gradient-card-hover); border-color:var(--border-dark-strong); }
.recent-list__icon { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(255, 255, 255, .04); border:1px solid var(--border-dark); color:var(--text-inverse-muted); font-size:12px; flex-shrink:0; transition:all .15s ease; }
.recent-list__item:hover .recent-list__icon { color:var(--secondary); border-color:rgba(var(--secondary-rgb), .3); }
.recent-list__body { flex:1; min-width:0; }
.recent-list__title { font-size:14px; font-weight:600; color:var(--text-inverse); margin:0 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-list__meta { font-size:12px; color:var(--text-inverse-muted); }

/* ===== Section Header (in-page) ===== */
.section-header { display:flex; align-items:baseline; justify-content:space-between; margin:48px 0 20px; gap:16px; }
.section-header__title { font-family:var(--primary-font); font-size:22px; font-weight:700; color:var(--text-inverse); letter-spacing:-0.02em; }
.section-header__link { font-size:13px; font-weight:600; color:var(--secondary); transition:color .15s ease; display:inline-flex; align-items:center; gap:6px; }
.section-header__link:hover { color:#3ab5e8; }
.section-header__link i { font-size:10px; transition:transform .15s ease; }
.section-header__link:hover i { transform:translateX(3px); }

/* ===== Quick Actions ===== */
.quick-actions { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:48px; }
.quick-action { display:flex; align-items:center; gap:12px; padding:16px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); transition:all .15s ease; text-decoration:none; position:relative; overflow:hidden; }
.quick-action::before { content:''; position:absolute; inset:0; border-radius:var(--nhw-border-radius); padding:1.5px; background:var(--gradient-border); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:2; }
.quick-action:is(:hover, :focus-visible) { background:var(--gradient-card-hover); }
.quick-action:is(:hover, :focus-visible)::before { opacity:1; }
.quick-action__icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--gradient-hero); color:var(--secondary); font-size:14px; flex-shrink:0; position:relative; z-index:1; }
.quick-action__body { flex:1; min-width:0; position:relative; z-index:1; }
.quick-action__title { font-size:13px; font-weight:700; color:var(--text-inverse); margin:0 0 2px; }
.quick-action__desc { font-size:11px; color:var(--text-inverse-muted); }

/* ===== Checklist (QA page) ===== */
.checklist { }
.checklist__section { background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); margin-bottom:20px; overflow:hidden; }
.checklist__header { padding:20px 24px; display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--border-dark); background:linear-gradient(90deg, rgba(var(--purple-rgb), .08), rgba(var(--secondary-rgb), .02)); }
.checklist__section-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgba(var(--secondary-rgb), .12); border:1px solid rgba(var(--secondary-rgb), .3); color:var(--secondary); font-size:14px; }
.checklist__section-title { flex:1; font-family:var(--primary-font); font-size:18px; font-weight:700; color:var(--text-inverse); letter-spacing:-0.01em; }
.checklist__section-progress { font-size:12px; font-weight:600; color:var(--text-inverse-muted); font-variant-numeric:tabular-nums; }
.checklist__section-progress span { color:var(--secondary); }

.checklist__items { list-style:none; margin:0; padding:0; }
.checklist__item { display:flex; align-items:flex-start; gap:14px; padding:14px 24px; border-bottom:1px solid var(--border-dark); cursor:pointer; transition:background .1s ease; }
.checklist__item:last-child { border-bottom:0; }
.checklist__item:is(:hover, :focus-visible) { background:rgba(255, 255, 255, .02); }
.checklist__item.is-checked { opacity:.5; }
.checklist__item.is-checked .checklist__text { text-decoration:line-through; }
.checklist__check { width:20px; height:20px; border:1.5px solid var(--border-dark-strong); border-radius:6px; display:grid; place-items:center; flex-shrink:0; margin-top:2px; transition:all .15s ease; }
.checklist__item:hover .checklist__check { border-color:var(--secondary); }
.checklist__item.is-checked .checklist__check { background:var(--secondary); border-color:var(--secondary); box-shadow:0 0 12px rgba(var(--secondary-rgb), .4); }
.checklist__check i { color:var(--bg-dark); font-size:11px; opacity:0; transition:opacity .15s ease; }
.checklist__item.is-checked .checklist__check i { opacity:1; }
.checklist__text { flex:1; font-size:14px; color:var(--text-inverse-soft); line-height:1.5; }
.checklist__note { font-size:12px; color:var(--text-inverse-muted); margin-top:4px; }

/* ===== Command Palette ===== */
.cmdk-overlay { position:fixed; inset:0; background:rgba(0, 0, 0, .7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; animation:fadeIn .12s ease; }
.cmdk-overlay.is-open { display:flex; }
.cmdk { width:min(640px, 92vw); max-height:70vh; background:var(--bg-dark-elevated); border:1px solid var(--border-dark-strong); border-radius:var(--nhw-border-radius); box-shadow:var(--box-shadow-dark), 0 0 80px rgba(var(--purple-rgb), .15); display:flex; flex-direction:column; animation:slideDown .15s ease; overflow:hidden; }
.cmdk__header { display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--border-dark); }
.cmdk__header i { color:var(--text-inverse-muted); font-size:14px; }
.cmdk__input { flex:1; border:0; outline:0; padding:18px 0; font-family:var(--secondary-font); font-size:15px; color:var(--text-inverse); background:transparent; }
.cmdk__input::placeholder { color:var(--text-inverse-muted); }
.cmdk__esc { padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; color:var(--text-inverse-muted); border:1px solid var(--border-dark); background:rgba(255, 255, 255, .04); font-family:var(--secondary-font); }
.cmdk__body { flex:1; overflow-y:auto; padding:8px 0; }
.cmdk__group-label { padding:12px 20px 6px; font-size:11px; font-weight:700; color:var(--text-inverse-muted); letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; }
.cmdk__group-label span:last-child { color:var(--text-inverse-muted); font-weight:600; letter-spacing:0; text-transform:none; }
.cmdk__result { display:flex; align-items:center; gap:12px; padding:10px 20px; cursor:pointer; transition:background .1s ease; }
.cmdk__result.is-focused { background:linear-gradient(90deg, rgba(var(--purple-rgb), .18), rgba(var(--secondary-rgb), .08)); }
.cmdk__result.is-focused .cmdk__result-title { color:var(--secondary); }
.cmdk__result-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(255, 255, 255, .04); border:1px solid var(--border-dark); color:var(--text-inverse-muted); font-size:13px; flex-shrink:0; }
.cmdk__result.is-focused .cmdk__result-icon { background:rgba(var(--secondary-rgb), .12); border-color:rgba(var(--secondary-rgb), .3); color:var(--secondary); }
.cmdk__result-body { flex:1; min-width:0; overflow:hidden; }
.cmdk__result-title { font-size:14px; font-weight:600; color:var(--text-inverse); margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk__result-title mark { background:rgba(var(--secondary-rgb), .25); color:var(--secondary); padding:0 1px; }
.cmdk__result-meta { font-size:12px; color:var(--text-inverse-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk__result-enter { color:var(--text-inverse-muted); font-size:11px; opacity:0; transition:opacity .1s ease; }
.cmdk__result.is-focused .cmdk__result-enter { opacity:1; }
.cmdk__empty { padding:40px 20px; text-align:center; color:var(--text-inverse-muted); }
.cmdk__empty i { font-size:24px; color:rgba(255, 255, 255, .15); margin-bottom:12px; display:block; }
.cmdk__empty h6 { font-family:var(--primary-font); font-size:14px; font-weight:700; color:var(--text-inverse); margin:0 0 4px; }
.cmdk__empty p { font-size:13px; margin:0; }
.cmdk__loading { padding:60px 20px; text-align:center; color:var(--text-inverse-muted); font-size:13px; }
.cmdk__footer { padding:10px 20px; border-top:1px solid var(--border-dark); background:rgba(255, 255, 255, .02); display:flex; align-items:center; gap:16px; font-size:11px; color:var(--text-inverse-muted); }
.cmdk__footer-item { display:flex; align-items:center; gap:6px; }
.cmdk__footer-item kbd { background:rgba(255, 255, 255, .06); border:1px solid var(--border-dark); border-radius:6px; padding:2px 6px; font-family:var(--secondary-font); font-size:10px; font-weight:600; color:var(--text-inverse-soft); }
.cmdk__footer-brand { margin-left:auto; font-weight:600; color:var(--text-inverse-muted); }

/* ===== Toast ===== */
.toast { position:fixed; bottom:24px; right:24px; background:var(--bg-dark-elevated); border:1px solid var(--border-dark-strong); border-radius:var(--nhw-border-radius); padding:12px 18px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--text-inverse); box-shadow:var(--box-shadow-vertical), 0 0 40px rgba(var(--secondary-rgb), .15); opacity:0; transform:translateY(12px); transition:all .2s ease; pointer-events:none; z-index:200; }
.toast.is-visible { opacity:1; transform:translateY(0); }
.toast i { color:var(--secondary); font-size:14px; }

/* ===== Animations ===== */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ===== Scrollbar ===== */
.site-nav::-webkit-scrollbar, .cmdk__body::-webkit-scrollbar { width:6px; }
.site-nav::-webkit-scrollbar-track, .cmdk__body::-webkit-scrollbar-track { background:transparent; }
.site-nav::-webkit-scrollbar-thumb, .cmdk__body::-webkit-scrollbar-thumb { background:rgba(255, 255, 255, .08); }
.site-nav::-webkit-scrollbar-thumb:hover, .cmdk__body::-webkit-scrollbar-thumb:hover { background:rgba(255, 255, 255, .18); }

/* ===== Responsive: Bootstrap 5 breakpoints ===== */
@media (max-width: 1400px) {
  .section-grid { grid-template-columns:repeat(3, 1fr); }
  .quick-actions { grid-template-columns:repeat(3, 1fr); }
  .core-values { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 1200px) {
  .hero { padding:48px 40px 32px; }
  .section-grid { grid-template-columns:repeat(2, 1fr); }
  .quick-actions { grid-template-columns:repeat(2, 1fr); }
  .core-values { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .site-header__search { display:none; }
  .page-layout { grid-template-columns:1fr; }
  .site-nav { display:none; }
  .page-content { padding:20px; }
  .hero { padding:32px 24px; }
  .hero__stats { gap:24px; }
  .site-header__cta span { display:none; }
  .recent-list { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .site-header { padding:0 16px; gap:12px; }
  .site-header__brand { min-width:auto; padding-right:0; }
  .site-header__wordmark span { display:none; }
  .site-header__link { padding:8px 10px; }
  .site-header__link span { display:none; }
  .section-grid, .quick-actions, .core-values { grid-template-columns:1fr; }
  .hero__stats { gap:20px; }
  .hero__stat-value { font-size:32px; }
  .progress-row { padding:14px 20px; }
  .checklist__header { padding:16px 18px; }
  .checklist__item { padding:12px 18px; }
}


/* ===== Page Hero (compact — for interior content pages) ===== */
.page-hero { background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); padding:40px 48px; position:relative; overflow:hidden; margin-bottom:32px; }
.page-hero__mesh { position:absolute; top:0; right:-5%; width:60%; height:100%; background:url('https://pmw.nesthub.com/images/mesh-05.svg') no-repeat center / contain; opacity:.4; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.9) 55%, black 75%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.9) 55%, black 75%); pointer-events:none; }
.page-hero__eyebrow { position:relative; z-index:1; font-family:var(--secondary-font); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.page-hero__eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--secondary); box-shadow:0 0 12px rgba(var(--secondary-rgb), .8); }
.page-hero__title { position:relative; z-index:1; font-family:var(--primary-font); font-size:clamp(28px, 4vw, 42px); font-weight:800; color:var(--text-inverse); margin:0 0 10px; line-height:1.1; letter-spacing:-0.02em; }
.page-hero__accent { background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero__desc { position:relative; z-index:1; font-size:15px; color:var(--text-inverse-muted); margin:0; max-width:640px; line-height:1.5; }

/* ===== Tabs (modern segmented-control style — restyles Bootstrap .nav-tabs) ===== */
.tabs-modern.nav-tabs { display:inline-flex; gap:2px; background:rgba(255, 255, 255, .03); border:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-lg); padding:4px; margin:0 0 32px; list-style:none; }
.tabs-modern .nav-item { margin:0; }
.tabs-modern .nav-link { display:block; padding:9px 24px; border:0; border-radius:20px; font-family:var(--primary-font); font-weight:600; font-size:13px; color:var(--text-inverse-muted); transition:all .15s ease; cursor:pointer; }
.tabs-modern .nav-link:is(:hover, :focus-visible) { color:var(--text-inverse); background:rgba(255, 255, 255, .04); }
.tabs-modern .nav-link.active { background:var(--gradient-text); color:#fff; box-shadow:0 4px 16px rgba(var(--secondary-rgb), .35); }

/* ===== Steps (numbered instruction cards) ===== */
.steps { list-style:none; counter-reset:step; padding:0; margin:0; }
.steps > li { position:relative; padding:26px 28px 26px 90px; margin:0 0 12px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); counter-increment:step; transition:border-color .15s ease; }
.steps > li:hover { border-color:var(--border-dark-strong); }
.steps > li::before { content:counter(step); position:absolute; left:26px; top:16px; width:44px; height:44px; display:grid; place-items:center; background:var(--gradient-text); color:#fff; font-family:var(--primary-font); font-weight:700; font-size:15px; border-radius:50%; box-shadow:0 4px 16px rgba(var(--secondary-rgb), .3); }
.steps > li p { font-size:14px; line-height:1.6; color:var(--text-inverse-soft); margin:0 0 12px; }
.steps > li > *:last-child { margin-bottom:0; }
.steps > li strong { color:var(--text-inverse); font-weight:700; }
.steps > li a { color:var(--secondary); text-decoration:none; border-bottom:1px solid rgba(var(--secondary-rgb), .3); transition:border-color .15s ease; word-break:break-word; }
.steps > li a:is(:hover, :focus-visible) { border-bottom-color:var(--secondary); }
.steps > li img { display:block; max-width:100%; height:auto; border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-sm); margin:16px 0; }
.steps > li ul { list-style:none; padding:0; margin:12px 0; }
.steps > li ul li { padding:4px 0 4px 16px; font-size:13px; color:var(--text-inverse-soft); }
.steps > li ul ul { margin:4px 0 4px 16px; padding-left:16px; border-left:1px solid var(--border-dark); }
.steps > li ul ul li { font-size:12px; }

/* ===== Callouts (warnings, notes, success) ===== */
.callout { display:flex; align-items:flex-start; gap:14px; padding:18px 22px; background:var(--gradient-card); border:1px solid var(--border-dark); border-left:3px solid var(--secondary); border-radius:var(--nhw-border-radius-sm); margin:20px 0; }
.callout__icon { flex-shrink:0; color:var(--secondary); font-size:18px; margin-top:1px; }
.callout__body { flex:1; font-size:14px; line-height:1.55; color:var(--text-inverse-soft); }
.callout__body strong { color:var(--text-inverse); font-weight:700; }
.callout__body :first-child { margin-top:0; }
.callout__body :last-child { margin-bottom:0; }
.callout--warning { border-left-color:#ff9500; }
.callout--warning .callout__icon { color:#ff9500; }
.callout--success { border-left-color:var(--green); }
.callout--success .callout__icon { color:var(--green); }

/* ===== Code token (for API keys, IDs, values to copy) ===== */
.code-token { display:inline-block; padding:3px 10px; background:rgba(var(--secondary-rgb), .12); border:1px solid rgba(var(--secondary-rgb), .3); border-radius:6px; font-family:'Roboto Mono', 'SF Mono', Monaco, Consolas, monospace; font-size:12px; color:var(--secondary); font-weight:500; user-select:all; word-break:break-all; }

/* ===== Data source badges (integration platforms) ===== */
.data-sources { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.data-source { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; background:rgba(255, 255, 255, .04); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-lg); color:var(--text-inverse); font-size:13px; font-weight:600; }
.data-source img { width:18px; height:18px; object-fit:contain; }

/* ===== Cross-tab links (buttons that switch tabs) ===== */
.cross-tab-links { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.cross-tab-link { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(var(--secondary-rgb), .08); border:1px solid rgba(var(--secondary-rgb), .25); border-radius:var(--nhw-border-radius-lg); color:var(--secondary) !important; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s ease; text-decoration:none !important; border-bottom-color:rgba(var(--secondary-rgb), .25) !important; }
.cross-tab-link:is(:hover, :focus-visible) { background:rgba(var(--secondary-rgb), .15); border-color:rgba(var(--secondary-rgb), .5); border-bottom-color:rgba(var(--secondary-rgb), .5) !important; }
.cross-tab-link i { font-size:11px; }


/* ===== Resource Cards (external links, templates, docs, guides) ===== */
.resource-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin:0 0 32px; }
.resource-card { display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); text-decoration:none !important; transition:all .2s ease; position:relative; overflow:hidden; }
.resource-card:is(:hover, :focus-visible) { background:var(--gradient-card-hover); transform:translateY(-2px); border-color:rgba(var(--secondary-rgb), .4); }
.resource-card__icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(var(--secondary-rgb), .1); border:1px solid rgba(var(--secondary-rgb), .25); color:var(--secondary); font-size:16px; flex-shrink:0; transition:all .2s ease; }
.resource-card:hover .resource-card__icon { background:rgba(var(--secondary-rgb), .18); border-color:rgba(var(--secondary-rgb), .5); }
.resource-card__body { flex:1; min-width:0; }
.resource-card__title { font-family:var(--primary-font); font-size:14px; font-weight:700; color:var(--text-inverse); margin:0 0 2px; }
.resource-card__desc { font-size:12px; color:var(--text-inverse-muted); line-height:1.4; }
.resource-card__ext { color:var(--text-inverse-muted); font-size:11px; opacity:.6; margin-left:8px; flex-shrink:0; }

/* ===== Content Section Heading ===== */
.content-heading { font-family:var(--primary-font); font-size:22px; font-weight:700; color:var(--text-inverse); margin:40px 0 16px; letter-spacing:-0.01em; }
.content-heading:first-child { margin-top:0; }


/* ===== AMP Setup Page ===== */

/* ===== Intro ===== */
#amp-intro { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
#amp-intro .amp-intro__lead { max-width: 65ch; margin-top: 1rem; color: var(--body-text); font-size: min(1.125rem, 18px); }

/* ===== Section-level nav ===== */
.amp-nav { display: flex; flex-wrap: wrap; gap: min(0.75rem, 12px); margin-top: clamp(1.5rem, 3vw, 2rem); }
.amp-nav .btn i { margin-right: 0.5rem; }

/* ===== Step Sections ===== */
.amp-step-section { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.amp-step-section--alt { background: var(--gray); }
.amp-step-section header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.amp-step-section header .btn { flex-shrink: 0; }

/* ===== Ordered Step List ===== */
.amp-steps { list-style: none; counter-reset: amp-step; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.amp-steps__item { counter-increment: amp-step; position: relative; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) clamp(4.5rem, 7vw, 6rem); background: #fff; border: 1px solid var(--border-color); box-shadow: var(--box-shadow-sm); transition: box-shadow .25s ease, transform .25s ease; }
.amp-steps__item:hover { box-shadow: var(--box-shadow); }
.amp-steps__item::before { content: counter(amp-step); position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); left: clamp(1.25rem, 2.5vw, 2rem); width: clamp(2.5rem, 4vw, 3rem); height: clamp(2.5rem, 4vw, 3rem); display: grid; place-items: center; background: var(--gradient); color: #fff; font-family: var(--primary-font); font-weight: 700; font-size: min(1.125rem, 18px); }
.amp-steps__body > * + * { margin-top: 1rem; }
.amp-steps__body p { margin: 0; color: var(--body-text); line-height: 1.6; }
.amp-steps__body code { background: var(--gray-md); padding: 0.15em 0.4em; font-size: 0.9em; color: var(--text-dark); }
.amp-steps__title { font-family: var(--primary-font); font-weight: 700; font-size: min(1.25rem, 20px); color: var(--text-dark); margin: 0 0 0.5rem; }

/* ===== Nested lists in steps ===== */
.amp-list { padding-left: 1.25rem; margin: 0; color: var(--body-text); line-height: 1.6; }
.amp-list li + li { margin-top: 0.5rem; }
.amp-list .amp-list { margin-top: 0.5rem; padding-left: 1.25rem; }
.amp-list--roman { list-style: lower-roman; }
.amp-list code { background: var(--gray-md); padding: 0.15em 0.4em; font-size: 0.9em; color: var(--text-dark); }

/* ===== Figures / screenshots ===== */
.amp-steps__figure { margin: 1rem 0 0; padding: 0; background: var(--gray); border: 1px solid var(--border-color); overflow: hidden; }
.amp-steps__figure img { display: block; width: 100%; height: auto; max-width: 900px; }
.amp-steps__figure--sm img { max-width: 400px; }
.amp-steps__figure--md img { max-width: 600px; }
.amp-steps__figure figcaption { padding: 0.5rem 0.75rem; background: var(--gray-md); font-family: var(--primary-font); font-size: min(0.8125rem, 13px); font-weight: 600; color: var(--gray-darker); }
.amp-figure-pair { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }

/* ===== Callouts ===== */
.amp-callout { display: flex; gap: 0.85rem; align-items: flex-start; padding: min(1rem, 16px) min(1.25rem, 20px); border-left: 3px solid var(--primary); background: rgba(var(--primary-rgb), 0.06); font-size: min(0.9375rem, 15px); line-height: 1.55; }
.amp-callout i { flex-shrink: 0; margin-top: 0.15rem; color: var(--primary); font-size: min(1.125rem, 18px); }
.amp-callout div { color: var(--body-text); }
.amp-callout strong { color: var(--text-dark); }
.amp-callout--warning { border-left-color: #d97706; background: rgba(217, 119, 6, 0.06); }
.amp-callout--warning i { color: #d97706; }
.amp-callout--info { border-left-color: var(--secondary); background: rgba(var(--secondary-rgb), 0.06); }
.amp-callout--info i { color: var(--secondary); }

/* ===== Reference Section ===== */
#amp-glossary { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.amp-ref { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--border-color); }
.amp-ref:first-of-type { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 0; border-top: 0; }
.amp-ref__block { margin-top: clamp(2rem, 4vw, 3rem); }
.amp-ref__block:first-of-type { margin-top: clamp(1.5rem, 3vw, 2rem); }
.amp-ref__heading { font-family: var(--primary-font); font-weight: 700; font-size: min(1.5rem, 24px); color: var(--text-dark); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary); display: inline-block; }
.amp-ref__subheading { font-family: var(--primary-font); font-weight: 700; font-size: min(1rem, 16px); color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.05em; margin: 1.5rem 0 0.75rem; }
.amp-ref p { color: var(--body-text); line-height: 1.65; margin: 0 0 1rem; }
.amp-ref code { background: var(--gray-md); padding: 0.15em 0.4em; font-size: 0.9em; color: var(--text-dark); }

/* ===== Definition Lists ===== */
.amp-defs { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.5rem; margin: 1rem 0; padding: min(1.25rem, 20px); background: var(--gray); border: 1px solid var(--border-color); }
.amp-defs dt { font-family: var(--primary-font); font-weight: 700; color: var(--text-dark); font-size: min(0.9375rem, 15px); padding-top: 0.5rem; border-top: 1px solid var(--border-color); }
.amp-defs dt:first-of-type { padding-top: 0; border-top: 0; }
.amp-defs dd { margin: 0 0 0.5rem; padding-bottom: 0.5rem; color: var(--body-text); font-size: min(0.9375rem, 15px); line-height: 1.6; }
.amp-defs dd:last-of-type { padding-bottom: 0; }
.amp-defs dd code { background: var(--light); }
.amp-defs .amp-list { margin-top: 0.5rem; }

/* ===== Code Blocks ===== */
.amp-code { display: block; padding: min(1rem, 16px) min(1.25rem, 20px); margin: 0.75rem 0 1.25rem; background: var(--dark); color: var(--light); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: min(0.875rem, 14px); line-height: 1.55; overflow-x: auto; border-left: 3px solid var(--primary); white-space: pre-wrap; word-break: break-word; }
.amp-code code { background: transparent; padding: 0; color: inherit; font: inherit; }

/* ===== Breakpoints ===== */
@media (min-width: 768px) {
	.amp-figure-pair { grid-template-columns: 1fr 1fr; }
	.amp-defs { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; }
	.amp-defs dt { padding-top: 0.75rem; }
	.amp-defs dd { padding-top: 0.75rem; padding-bottom: 0.75rem; border-top: 1px solid var(--border-color); }
	.amp-defs dt:first-of-type, .amp-defs dd:first-of-type { padding-top: 0; border-top: 0; }
}

@media (max-width: 575px) {
	.amp-steps__item { padding-left: clamp(1rem, 4vw, 1.25rem); padding-top: clamp(4.5rem, 14vw, 5rem); }
	.amp-steps__item::before { top: 1rem; left: 1rem; }
	.amp-step-section header { flex-direction: column; align-items: flex-start; }
}



/* ===== Content Sub-Headings (extends .content-heading) ===== */
.content-subheading { font-family:var(--primary-font); font-size:18px; font-weight:700; color:var(--text-inverse); margin:36px 0 12px; letter-spacing:-0.01em; padding-bottom:10px; border-bottom:1px solid var(--border-dark); }
.content-minor-heading { font-family:var(--primary-font); font-size:15px; font-weight:700; color:var(--text-inverse); margin:24px 0 10px; letter-spacing:-0.005em; }
.content-mini-heading { font-family:var(--secondary-font); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-inverse-muted); margin:20px 0 10px; }
.content-lead { font-size:14px; line-height:1.6; color:var(--text-inverse-soft); margin:0 0 14px; }

/* ===== Steps: inline figure captions ===== */
.steps > li .steps__figure-label { font-size:13px; color:var(--text-inverse-muted); margin:14px 0 6px; }
.steps > li .steps__figure-label strong { color:var(--text-inverse); font-weight:700; }

/* ===== Definition List (parameter tables) ===== */
.def-list { display:grid; grid-template-columns:1fr; gap:0; margin:12px 0 20px; padding:0; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); overflow:hidden; }
.def-list dt { padding:14px 20px 6px; font-family:var(--primary-font); font-size:13px; font-weight:700; color:var(--text-inverse); border-top:1px solid var(--border-dark); }
.def-list dt:first-of-type { border-top:0; }
.def-list dd { margin:0; padding:0 20px 14px; font-size:13px; line-height:1.55; color:var(--text-inverse-soft); }
.def-list dd ul { list-style:none; padding:0; margin:8px 0 0; }
.def-list dd ul li { padding:3px 0 3px 14px; font-size:12px; position:relative; }
.def-list dd ul li::before { content:''; position:absolute; left:0; top:12px; width:6px; height:1px; background:var(--border-dark-strong, var(--border-dark)); }
.def-list dd em { color:var(--text-inverse-muted); font-style:italic; }
.def-list dd strong { color:var(--text-inverse); }

/* ===== Code Block (multi-line snippets) ===== */
.code-block { display:block; padding:16px 20px; margin:0 0 16px; background:rgba(0, 0, 0, .35); border:1px solid var(--border-dark); border-left:3px solid var(--secondary); border-radius:var(--nhw-border-radius-sm); font-family:'Roboto Mono', 'SF Mono', Monaco, Consolas, monospace; font-size:12.5px; line-height:1.6; color:var(--text-inverse-soft); overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.code-block code { background:transparent; padding:0; color:inherit; font:inherit; }
.code-block__label { font-family:var(--secondary-font); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-inverse-muted); margin:16px 0 8px; }

/* ===== Responsive: two-column def-list on wider screens ===== */
@media (min-width:768px) {
	.def-list { grid-template-columns:220px 1fr; }
	.def-list dt { padding:14px 12px 14px 20px; border-top:1px solid var(--border-dark); align-self:start; }
	.def-list dd { padding:14px 20px 14px 0; border-top:1px solid var(--border-dark); }
	.def-list dt:first-of-type, .def-list dd:nth-of-type(1) { border-top:0; }
}


/* ===== Code Copy Button ===== */
pre[class*="language-"] { position: relative; }
pre[class*="language-"]:has(> .code-copy) { padding-top: 2.75em; }
.code-copy { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-family: var(--secondary-font); font-size: 12px; font-weight: 500; line-height: 1; color: var(--text-inverse-muted); background: rgba(var(--secondary-rgb), .1); border: 1px solid rgba(var(--secondary-rgb), .25); border-radius: var(--nhw-border-radius-sm); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; z-index: 2; }
.code-copy:is(:hover, :focus-visible) { background: rgba(var(--secondary-rgb), .2); border-color: var(--secondary); color: var(--text-inverse); outline: none; }
.code-copy--copied, .code-copy--copied:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--green) 15%, transparent); border-color: var(--green); color: var(--green); }
.code-copy__icon { font-size: 12px; }
@media (max-width: 576px) {
	.code-copy__label { display: none; }
	.code-copy { padding: 8px; }
}


/* =====================================================
   Code Block component (add once to styles.css)
   Reusable across every page that shows source snippets
   ===================================================== */

/* ===== Code Block ===== */
.code-block { background:var(--bg-dark-elevated); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-sm); margin:16px 0 32px; overflow:hidden; position:relative; }
.code-block::before { content:''; position:absolute; inset:0 auto 0 0; width:2px; background:var(--gradient); opacity:.6; pointer-events:none; }
.code-block__header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px 10px 20px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--border-dark); font-family:var(--primary-font); font-size:12px; }
.code-block__label { display:inline-flex; align-items:center; gap:8px; color:var(--text-inverse-soft); font-weight:600; letter-spacing:.02em; }
.code-block__label i { color:var(--secondary); font-size:12px; }
.code-block__lang { display:inline-block; padding:2px 10px; background:rgba(var(--secondary-rgb),.12); border:1px solid rgba(var(--secondary-rgb),.3); border-radius:4px; font-family:'Roboto Mono','SF Mono',Monaco,Consolas,monospace; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--secondary); flex-shrink:0; }
.code-block pre { margin:0; padding:18px 20px; overflow:auto; max-height:600px; background:transparent; }
.code-block code { display:block; font-family:'Roboto Mono','SF Mono',Monaco,Consolas,monospace; font-size:12.5px; line-height:1.6; color:var(--text-inverse-soft); background:transparent; padding:0; white-space:pre; tab-size:2; }
.code-block--base64 code { white-space:pre-wrap; word-break:break-all; font-size:11px; line-height:1.5; color:var(--text-inverse-muted); }
.code-block pre::-webkit-scrollbar { width:8px; height:8px; }
.code-block pre::-webkit-scrollbar-track { background:rgba(0,0,0,.2); }
.code-block pre::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }
.code-block pre::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); }

/* ===== LTST Calc page — top meta bar ===== */
.ltst-calc__meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:0 0 40px; padding:16px 20px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-sm); }
.ltst-calc__meta p { margin:0; font-size:13px; color:var(--text-inverse-soft); }
.ltst-calc__meta p strong { color:var(--text-inverse); }
.ltst-calc__meta a { color:var(--secondary); text-decoration:none; word-break:break-all; }
.ltst-calc__meta a:is(:hover, :focus-visible) { text-decoration:underline; }
.ltst-calc__nav { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 575px) {
	.code-block__header { padding:8px 12px; flex-wrap:wrap; }
	.code-block pre { padding:14px 12px; max-height:500px; }
	.code-block code { font-size:11.5px; }
}


/* ===== Table (Content Pages) ===== */
.table-wrap { overflow-x:auto; margin:20px 0 32px; border-radius:var(--nhw-border-radius); border:1px solid var(--border-dark); }
.table-modern { width:100%; border-collapse:collapse; background:var(--gradient-card); font-family:var(--secondary-font); font-size:15px; }
.table-modern thead th { background:rgba(var(--secondary-rgb), .1); color:var(--text-inverse); font-family:var(--primary-font); font-weight:600; text-align:left; padding:14px 18px; border-bottom:1px solid var(--border-dark-strong); white-space:nowrap; }
.table-modern tbody td { padding:14px 18px; color:var(--text-inverse-soft); border-bottom:1px solid var(--border-dark); }
.table-modern tbody tr:last-child td { border-bottom:0; }
.table-modern tbody tr:hover td { background:rgba(var(--secondary-rgb), .04); color:var(--text-inverse); }
.table-modern tbody td:first-child { font-weight:600; color:var(--text-inverse); }

.table-wrap { overflow-x:auto; margin:20px 0 32px; border-radius:var(--nhw-border-radius); border:1px solid var(--border-dark); }
.table-modern { width:100%; border-collapse:collapse; background:var(--gradient-card); font-family:var(--secondary-font); font-size:15px; }
.table-modern thead th { background:rgba(var(--secondary-rgb), .1); color:var(--text-inverse); font-family:var(--primary-font); font-weight:600; text-align:left; padding:14px 18px; border-bottom:1px solid var(--border-dark-strong); white-space:nowrap; }
.table-modern tbody td { padding:14px 18px; color:var(--text-inverse-soft); border-bottom:1px solid var(--border-dark); vertical-align:top; }
.table-modern tbody tr:last-child td { border-bottom:0; }
.table-modern tbody tr:hover td { background:rgba(var(--secondary-rgb), .04); color:var(--text-inverse); }
.table-modern tbody td:first-child { font-weight:600; color:var(--text-inverse); }
.text-rv { color:var(--secondary); font-weight:600; }
.cell-note { display:block; font-size:12px; font-weight:400; color:var(--text-inverse-muted); margin-top:2px; }

/* ===== Check list ===== */
.check-list { list-style:none; padding-left:0; margin:0 0 1rem; display:grid; gap:.5rem; }
.check-list li { position:relative; padding-left:1.75rem; color:var(--text-inverse-soft); line-height:1.5; }
.check-list li::before { content:"\f00c"; font-family:var(--font-awesome); font-weight:900; position:absolute; left:0; top:.15em; color:var(--secondary); font-size:.9em; }

/* ===== Flow list (compact numbered summary) ===== */
.flow-list { list-style:none; counter-reset:flow; padding:0; margin:0; display:grid; gap:.5rem; }
.flow-list li { counter-increment:flow; position:relative; padding:.75rem 1rem .75rem 3rem; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-sm); color:var(--text-inverse-soft); font-size:.95rem; }
.flow-list li::before { content:counter(flow); position:absolute; left:.75rem; top:50%; transform:translateY(-50%); width:1.5rem; height:1.5rem; display:inline-flex; align-items:center; justify-content:center; background:var(--gradient); color:var(--text-inverse); border-radius:50%; font-family:var(--primary-font); font-weight:700; font-size:.8rem; }
.flow-list a { color:var(--secondary); }
.flow-list a:is(:hover, :focus-visible) { color:var(--text-inverse); }


/* ===== Signature builder form ===== */
.sig-form { margin: 0 0 32px; }
.sig-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sig-form__group { display: grid; gap: .375rem; }
.sig-form__group--full { grid-column: 1 / -1; }
.sig-form__label { font-family: var(--secondary-font); font-size: .8125rem; font-weight: 600; color: var(--text-inverse-soft); text-transform: uppercase; letter-spacing: .06em; }
.sig-form__input { padding: .625rem .875rem; background: var(--bg-dark-elevated); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius-sm); color: var(--text-inverse); font-family: var(--secondary-font); font-size: .9375rem; transition: border-color .2s, background .2s, box-shadow .2s; }
.sig-form__input:is(:hover, :focus-visible) { border-color: var(--secondary); background: rgba(var(--secondary-rgb), .05); outline: none; box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), .15); }
.sig-form__hint { font-size: .8125rem; color: var(--text-inverse-muted); }
.sig-form__hint a { color: var(--secondary); }
.sig-form__hint a:is(:hover, :focus-visible) { color: var(--text-inverse); }
.sig-form__check { display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; color: var(--text-inverse-soft); font-family: var(--secondary-font); font-size: .9375rem; }
.sig-form__check input { width: 1.125rem; height: 1.125rem; accent-color: var(--secondary); cursor: pointer; }

@media (max-width: 768px){
  .sig-form__grid { grid-template-columns: 1fr; }
}

/* ===== Email Signature preview canvas ===== */
.sig-preview { padding: 32px; background: #ffffff; border-radius: var(--nhw-border-radius); overflow-x: auto; }
.sig-preview .signature-container { line-height: normal; }
.sig-preview .signature-container a { font-weight: inherit; }
.sig-preview .signature-container img { margin: 0; }
.sig-preview .rv-sig a { font-weight: 400 !important; }
.sig-preview .rv-sig .signature-contact__icon img { margin: 0 auto !important; display: block; }

/* ===== Email Signature source code ===== */
.sig-source { max-height: 400px; overflow: auto; }


/* ===== Video grid ===== */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 32px; margin: 32px 0; }

/* ===== Video card ===== */
.video-card { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.video-card__frame { position: relative; aspect-ratio: 16 / 9; background: var(--bg-dark-elevated); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); overflow: hidden; transition: border-color .2s, transform .2s; }
.video-card__frame:is(:hover, :focus-within) { border-color: var(--secondary); }
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__title { font-family: var(--primary-font); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--text-inverse); margin: 0; }

@media (max-width: 576px){
  .video-grid { gap: 32px 20px; }
}


/* ===== Jump links ===== */
.jump-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 56px; padding: 20px; background: var(--gradient-card); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); }
.jump-link { padding: 8px 14px; background: var(--bg-dark-elevated); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius-sm); color: var(--text-inverse-soft); font-family: var(--secondary-font); font-size: .875rem; text-decoration: none; transition: color .2s, border-color .2s, background .2s; }
.jump-link:is(:hover, :focus-visible) { color: var(--text-inverse); border-color: var(--secondary); background: rgba(var(--secondary-rgb), .1); outline: none; }

/* ===== Role section ===== */
h3.role { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border-dark); scroll-margin-top: 96px; }
h3.role:first-of-type { border-top: 0; padding-top: 0; margin-top: 32px; }

.role-list { padding-left: 20px; margin: 16px 0 0; }
.role-list li { margin: 10px 0; line-height: 1.55; color: var(--text-inverse-soft); }
.role-list li a { color: var(--secondary); }
.role-list li a:is(:hover, :focus-visible) { color: var(--text-inverse); }

/* ===== Anchor-targeted headings ===== */
.content-heading[id] { scroll-margin-top: 96px; }

/* ===== Education / site-build lists ===== */
.edu-list { padding-left: 20px; margin: 16px 0 32px; }
.edu-list > li { margin: 12px 0; line-height: 1.55; color: var(--text-inverse-soft); }
.edu-list ul { margin: 8px 0 0; padding-left: 20px; }
.edu-list ul li { margin: 6px 0; }
.edu-list a { color: var(--secondary); }
.edu-list a:is(:hover, :focus-visible) { color: var(--text-inverse); }


/* ===== Tab meta bar ===== */
.tab-meta { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:0 0 32px; padding:12px 18px; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-sm); font-family:var(--secondary-font); font-size:14px; color:var(--text-inverse-muted); }
.tab-meta__updated { display:inline-flex; align-items:center; gap:8px; }
.tab-meta__updated i { color:var(--secondary); }
.tab-meta .btn--sm { margin-left:auto; }
@media (max-width:576px) { .tab-meta .btn--sm { margin-left:0; } }


/* ===== Calculator layout ===== */
.calc { margin: 32px 0; }
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.calc__form { display: flex; flex-direction: column; gap: 24px; }
.calc__results { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 96px; }

@media (max-width: 1199px){
  .calc__grid { grid-template-columns: 1fr; gap: 24px; }
  .calc__results { position: static; }
}

/* ===== Calculator sections ===== */
.calc-section { padding: 24px; background: var(--gradient-card); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); }
.calc-section__title { font-family: var(--primary-font); font-size: 1.125rem; font-weight: 700; color: var(--text-inverse); margin: 0 0 8px; }
.calc-section__desc { font-size: .875rem; color: var(--text-inverse-muted); margin: 0 0 16px; }
.calc-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 576px){
  .calc-section__grid { grid-template-columns: 1fr; }
}

/* ===== Calculator fields ===== */
.calc-field { display: grid; gap: 6px; min-width: 0; }
.calc-field--full { grid-column: 1 / -1; }
.calc-field label { font-family: var(--secondary-font); font-size: .75rem; font-weight: 600; color: var(--text-inverse-soft); text-transform: uppercase; letter-spacing: .06em; }
.calc-field__group { display: flex; align-items: stretch; background: var(--bg-dark-elevated); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius-sm); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.calc-field__group:focus-within { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), .15); }
.calc-field__group input { flex: 1 1 auto; min-width: 0; padding: .625rem .875rem; background: transparent; border: 0; color: var(--text-inverse); font-family: var(--secondary-font); font-size: .9375rem; outline: none; }
.calc-field__group input::-webkit-outer-spin-button, .calc-field__group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field__group input[type=number] { -moz-appearance: textfield; }
.calc-field__group input[readonly] { color: var(--text-inverse); font-weight: 600; cursor: default; }
.calc-field__unit { display: flex; align-items: center; padding: 0 .875rem; background: rgba(0, 0, 0, .25); color: var(--text-inverse-muted); font-family: var(--secondary-font); font-size: .8125rem; white-space: nowrap; }
.calc-field__hint { font-size: .75rem; color: var(--text-inverse-muted); margin-top: 2px; }

/* ===== Results panels ===== */
.calc-results-panel { position: relative; padding: 28px 24px 24px; background: var(--gradient-card); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); overflow: hidden; }
.calc-results-panel::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient); }
.calc-results-panel__title { font-family: var(--primary-font); font-size: 1.125rem; font-weight: 700; color: var(--text-inverse); margin: 0 0 16px; text-align: center; }
.calc-results-panel .calc-field__group { background: var(--bg-dark); }

/* ===== Actions ===== */
.calc__actions { display: flex; justify-content: flex-end; margin: 24px 0 48px; }

/* ===== Visually hidden (BS5 utility, kept here in case not in base stylesheet) ===== */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* ===== Pillar reference cards ===== */
.pillar-grid { display: grid; gap: 24px; margin: 24px 0 32px; }
.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; background: var(--gradient-card); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); }
.pillar__info { min-width: 0; }
.pillar__title { font-family: var(--primary-font); font-size: 1.25rem; font-weight: 700; color: var(--text-inverse); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-dark); background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pillar__code { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-self: start; }
.pillar__code pre { margin: 0; }
.pillar__flag { color: var(--pink); font-weight: 700; }
.pillar__footnote { margin: 12px 0 0; font-size: .8125rem; color: var(--text-inverse-muted); line-height: 1.5; }

@media (max-width: 991px){
  .pillar { grid-template-columns: 1fr; gap: 16px; }
}


/* ===== Pricing Block ===== */
.pricing-block { background: var(--gradient-card); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 2rem; position: relative; overflow: hidden; transition: border-color .3s ease, background .3s ease; }
.pricing-block::before { content: ''; position: absolute; inset: 0; background: var(--gradient); opacity: 0; height: 3px; bottom: auto; transition: opacity .3s ease; }
.pricing-block:hover::before { opacity: 1; }
.pricing-block__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 1.5rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-dark); }
.pricing-block__title { font-family: var(--primary-font); font-size: clamp(1.375rem, 2.5vw, 1.75rem); font-weight: 700; color: var(--text-inverse); margin: 0; line-height: 1.2; }
.pricing-block__price { display: inline-flex; align-items: baseline; gap: .15em; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.pricing-block__amount { font-family: var(--primary-font); font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; }
.pricing-block__unit { font-family: var(--secondary-font); font-size: 1rem; font-weight: 500; opacity: .9; }
.pricing-block__body { color: var(--text-inverse-soft); }
.pricing-block__body > p:first-child { color: var(--text-inverse); }
.pricing-block__body h3 { font-family: var(--primary-font); font-size: 1.125rem; font-weight: 600; color: var(--text-inverse); margin: 1.75rem 0 .75rem; }
.pricing-block__body ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.pricing-block__body ul li { margin-bottom: .5rem; }
.pricing-block__body ul li::marker { color: var(--secondary); }
.pricing-block__body strong { color: var(--text-inverse); }
.pricing-block__body .callout { margin-top: 1.5rem; }

/* ===== Table Modern ===== */
.table-wrap { border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); overflow: hidden; background: var(--bg-dark-elevated); }
@media (max-width: 767px) { .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } }

.table-modern { width: 100%; border-collapse: collapse; font-family: var(--secondary-font); color: var(--text-inverse-soft); margin: 0; }
.table-modern thead { background: linear-gradient(90deg, rgba(var(--secondary-rgb), .12) 0%, rgba(var(--purple-rgb), .08) 100%); }
.table-modern thead th { font-family: var(--primary-font); font-size: .8125rem; font-weight: 600; color: var(--text-inverse); text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-dark-strong); }
.table-modern tbody th, .table-modern tbody td { padding: .875rem 1.25rem; border-bottom: 1px solid var(--border-dark); vertical-align: top; font-size: .9375rem; }
.table-modern tbody tr:last-child th, .table-modern tbody tr:last-child td { border-bottom: 0; }
.table-modern tbody tr { transition: background .2s ease; }
.table-modern tbody tr:is(:hover, :focus-within) { background: rgba(var(--secondary-rgb), .05); }
.table-modern tbody th { font-family: var(--secondary-font); font-weight: 600; color: var(--text-inverse); text-align: left; }
.table-modern tbody td { color: var(--text-inverse-soft); white-space: nowrap; }
.table-modern tbody td:last-child { color: var(--text-inverse-muted); font-size: .875rem; }


/* ===== QA Checklist ===== */
.qa { display:flex; flex-direction:column; gap:clamp(1.75rem, 3.5vw, 2.75rem); margin-top:clamp(1.5rem, 3vw, 2.5rem); }

/* ===== QA Hero Stats ===== */
.qa-stats { display:flex; flex-wrap:wrap; gap:clamp(1.5rem, 4vw, 3rem); padding:1.5rem 1.5rem 1.5rem; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); }
.qa-stat { display:flex; flex-direction:column; gap:0.35rem; }
.qa-stat__num { font-family:var(--primary-font); font-weight:800; font-size:clamp(1.75rem, 3vw, 2.5rem); line-height:1; letter-spacing:-0.02em; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.qa-stat__label { font-family:var(--secondary-font); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-inverse-muted); font-weight:600; }

/* ===== QA Sticky Progress ===== */
.qa-progress { position:sticky; top:0.75rem; z-index:50; background:rgba(6, 6, 13, 0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); padding:0.875rem 1.25rem; }
.qa-progress__wrap { display:flex; align-items:center; gap:1.25rem; }
.qa-progress__label { font-family:var(--primary-font); font-weight:700; font-size:0.8125rem; color:var(--text-inverse); text-transform:uppercase; letter-spacing:0.1em; flex-shrink:0; }
.qa-progress__bar { flex:1; height:6px; background:var(--border-dark); border-radius:999px; overflow:hidden; position:relative; }
.qa-progress__bar-fill { position:absolute; inset:0 auto 0 0; width:0; background:var(--gradient); border-radius:999px; transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.qa-progress__count { font-family:var(--primary-font); font-weight:800; font-size:0.9375rem; color:var(--text-inverse-soft); flex-shrink:0; min-width:70px; text-align:right; }
.qa-progress__count strong { background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }

/* ===== QA Section Index ===== */
.qa-index { display:flex; flex-direction:column; gap:1.25rem; }
.qa-index__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:0.75rem; }
.qa-index__link { display:flex; align-items:center; gap:0.875rem; padding:1rem 1.125rem; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); text-decoration:none; color:var(--text-inverse-soft); font-family:var(--primary-font); font-weight:600; font-size:0.875rem; transition:all 0.25s ease; }
.qa-index__link:is(:hover, :focus-visible) { background:var(--gradient-card-hover); border-color:var(--secondary); color:var(--text-inverse); outline:none; transform:translateY(-2px); }
.qa-index__link__icon { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(var(--secondary-rgb), 0.12); color:var(--secondary); font-size:0.95rem; flex-shrink:0; transition:all 0.25s ease; }
.qa-index__link:is(:hover, :focus-visible) .qa-index__link__icon { background:var(--gradient); color:var(--text-inverse); }
.qa-index__link__count { margin-left:auto; font-family:var(--secondary-font); font-size:0.75rem; color:var(--text-inverse-muted); font-weight:700; }

/* ===== QA Section ===== */
.qa-section { background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); padding:clamp(1.5rem, 3vw, 2.25rem); scroll-margin-top:5.5rem; }
.qa-section__header { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border-dark); }
.qa-section__title-group { display:flex; align-items:center; gap:1rem; }
.qa-section__icon { width:52px; height:52px; border-radius:50%; background:rgba(var(--secondary-rgb), 0.12); color:var(--secondary); display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.qa-section__eyebrow { display:block; font-family:var(--secondary-font); font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-inverse-muted); margin-bottom:0.35rem; }
.qa-section__title { font-family:var(--primary-font); font-weight:700; font-size:clamp(1.25rem, 2vw, 1.625rem); color:var(--text-inverse); margin:0; letter-spacing:-0.01em; }
.qa-section__meta { display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; flex-shrink:0; text-align:right; }
.qa-section__count { font-family:var(--primary-font); font-weight:800; font-size:1.625rem; line-height:1; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.qa-section__count-label { font-family:var(--secondary-font); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-inverse-muted); font-weight:600; }

/* ===== QA Subsection ===== */
.qa-subsection { padding:1.5rem 0; border-bottom:1px dashed var(--border-dark); }
.qa-subsection:last-of-type { border-bottom:none; padding-bottom:0.25rem; }
.qa-subsection:first-of-type { padding-top:0.5rem; }
.qa-subsection__title { font-family:var(--primary-font); font-weight:700; font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--text-inverse); margin:0 0 1rem; display:flex; align-items:center; gap:0.875rem; }
.qa-subsection__title::before { content:''; width:24px; height:2px; background:var(--gradient); flex-shrink:0; border-radius:2px; }
.qa-subsection__count { margin-left:auto; font-family:var(--secondary-font); font-size:0.6875rem; font-weight:700; color:var(--text-inverse-muted); letter-spacing:0.08em; padding:0.2rem 0.55rem; background:rgba(var(--secondary-rgb), 0.1); border-radius:var(--nhw-border-radius-sm); }

/* ===== QA List & Items ===== */
.qa-list { list-style:none; margin:0; padding:0; }
.qa-list__item { border-bottom:1px solid var(--border-dark); }
.qa-list__item:last-child { border-bottom:none; }
.qa-item { display:flex; align-items:flex-start; gap:1rem; padding:0.875rem 0.75rem; margin:0; cursor:pointer; border-radius:var(--nhw-border-radius-sm); transition:background 0.2s ease; user-select:none; }
.qa-item:is(:hover, :focus-within) { background:rgba(var(--secondary-rgb), 0.06); }
.qa-item__check { flex-shrink:0; width:22px; height:22px; margin-top:0.15rem; position:relative; appearance:none; -webkit-appearance:none; background:transparent; border:2px solid var(--border-dark-strong); border-radius:var(--nhw-border-radius-sm); cursor:pointer; transition:all 0.2s ease; }
.qa-item__check:hover { border-color:var(--secondary); }
.qa-item__check:checked { background:var(--gradient); border-color:transparent; }
.qa-item__check:checked::after { content:'\f00c'; font-family:var(--font-awesome); font-weight:900; color:var(--text-inverse); font-size:0.72rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.qa-item__body { flex:1; min-width:0; }
.qa-item__text { font-family:var(--secondary-font); font-size:0.9375rem; color:var(--text-inverse-soft); line-height:1.6; display:block; transition:color 0.2s ease; }
.qa-item.is-checked .qa-item__text { color:var(--text-inverse-muted); text-decoration:line-through; }
.qa-item__text code { font-family:'SFMono-Regular', Consolas, monospace; font-size:0.85em; padding:0.1em 0.4em; background:rgba(var(--secondary-rgb), 0.12); color:var(--secondary); border-radius:var(--nhw-border-radius-sm); }
.qa-item__flag { display:inline-block; margin-left:0.5rem; padding:0.15rem 0.55rem; font-family:var(--secondary-font); font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; background:rgba(var(--secondary-rgb), 0.15); color:var(--secondary); border-radius:999px; vertical-align:2px; }
.qa-item__flag--critical { background:var(--gradient); color:var(--text-inverse); }

/* ===== QA Responsive ===== */
@media (max-width: 992px) {
  .qa-section__header { flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .qa-section__meta { flex-direction:row; align-items:baseline; gap:0.5rem; text-align:left; }
}
@media (max-width: 768px) {
  .qa-progress__wrap { gap:0.75rem; flex-wrap:wrap; }
  .qa-progress__label { display:none; }
  .qa-section__icon { width:44px; height:44px; font-size:1.05rem; }
}
@media (max-width: 576px) {
  .qa-item { padding:0.875rem 0.35rem; }
  .qa-item__text { font-size:0.9rem; }
  .qa-index__grid { grid-template-columns:1fr; }
  .qa-subsection__title { font-size:0.75rem; }
  .qa-stats { padding:1.25rem; }
}


/* ===== Table Modern ===== */
.table-wrap { overflow-x:auto; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); -webkit-overflow-scrolling:touch; }
.table-modern { width:100%; border-collapse:collapse; font-family:var(--secondary-font); font-size:0.875rem; color:var(--text-inverse-soft); margin:0; }
.table-modern__caption { font-family:var(--primary-font); font-weight:700; font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-inverse); padding:0.875rem 1.125rem; background:rgba(var(--secondary-rgb), 0.08); border-bottom:1px solid var(--border-dark); }
.table-modern thead th { background:rgba(var(--secondary-rgb), 0.04); color:var(--text-inverse); font-family:var(--primary-font); font-weight:700; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.15em; text-align:left; padding:0.75rem 1rem; border-bottom:1px solid var(--border-dark-strong); white-space:nowrap; }
.table-modern tbody tr { border-bottom:1px solid var(--border-dark); transition:background 0.2s ease; }
.table-modern tbody tr:last-child { border-bottom:none; }
.table-modern tbody tr:hover { background:rgba(var(--secondary-rgb), 0.05); }
.table-modern tbody td { padding:0.75rem 1rem; vertical-align:top; line-height:1.5; }
.table-modern tbody td code { font-family:'SFMono-Regular', Consolas, monospace; font-size:0.85em; padding:0.1em 0.4em; background:rgba(var(--secondary-rgb), 0.12); color:var(--secondary); border-radius:var(--nhw-border-radius-sm); white-space:nowrap; }

/* ===== Table Modern Responsive ===== */
@media (max-width: 768px) {
  .table-modern { font-size:0.8125rem; }
  .table-modern thead th { padding:0.625rem 0.75rem; font-size:0.65rem; }
  .table-modern tbody td { padding:0.625rem 0.75rem; }
  .table-modern__caption { padding:0.75rem 0.875rem; font-size:0.75rem; }
}


/* ===== Cookie Disclaimer Preview ===== */
.cookie-preview { position:relative; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); padding:clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); }
.cookie-preview__label { position:absolute; top:1rem; left:1.25rem; font-family:var(--primary-font); font-weight:700; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-inverse-muted); }
.cookie-preview__stage { display:flex; justify-content:center; align-items:center; min-height:120px; }
.cookie-demo { display:inline-flex; align-items:center; flex-wrap:wrap; gap:0.75rem; background:#f2f2f2; color:#1a1a1a; padding:20px; border-radius:4px; box-shadow:0 5px 10px rgba(0, 0, 0, 0.19), 0 2px 4px rgba(0, 0, 0, 0.23); max-width:100%; font-family:var(--secondary-font); font-size:0.9375rem; }
.cookie-demo p { margin:0; flex:1 1 260px; }
.cookie-demo a { color:#1a1a1a; text-decoration:underline; }
.cookie-demo__btn { font-family:var(--secondary-font); font-size:0.875rem; font-weight:600; padding:10px 22px; border-radius:4px; cursor:pointer; transition:all 0.25s ease; }
.cookie-demo__btn--accept { background:var(--secondary); color:#fff; border:1px solid var(--secondary); }
.cookie-demo__btn--accept:is(:hover, :focus-visible) { background:#fff; color:var(--secondary); outline:none; }
.cookie-demo__btn--decline { background:#666; color:#fff; border:1px solid #666; }
.cookie-demo__btn--decline:is(:hover, :focus-visible) { background:#fff; color:#666; outline:none; }

/* ===== Cookie Preview Responsive ===== */
@media (max-width: 576px) {
  .cookie-demo { flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-demo__btn { width:100%; }
}


/* ===== Portfolio Form Dark ===== */
.form-dark { color:var(--text-inverse-soft); max-width:820px; }
.form-dark .form-field { margin-bottom:1.75rem; }
.form-dark .form-label { display:block; font-family:var(--primary-font); font-weight:700; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-inverse); margin-bottom:0.6rem; }
.form-dark .form-help { font-family:var(--secondary-font); font-size:0.8125rem; color:var(--text-inverse-muted); margin:0.5rem 0 0; }
.form-dark .form-help strong { color:var(--secondary); }

/* ===== Form Dark Inputs ===== */
.form-dark .form-control, .form-dark .form-select { display:block; width:100%; background:rgba(255, 255, 255, 0.03); border:1px solid var(--border-dark-strong); color:var(--text-inverse); border-radius:var(--nhw-border-radius-sm); padding:0.65rem 0.9rem; font-family:var(--secondary-font); font-size:0.9375rem; line-height:1.5; transition:all 0.2s ease; }
.form-dark .form-control::placeholder { color:var(--text-inverse-muted); opacity:1; }
.form-dark .form-control:focus, .form-dark .form-select:focus { background:rgba(255, 255, 255, 0.05); border-color:var(--secondary); box-shadow:0 0 0 3px rgba(var(--secondary-rgb), 0.15); outline:none; }
.form-dark textarea.form-control { min-height:80px; resize:vertical; }
.form-dark .form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23189bd7'%3E%3Cpath d='M8 11L2 5h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.9rem center; background-size:12px; padding-right:2.5rem; appearance:none; -webkit-appearance:none; -moz-appearance:none; }

/* ===== Form Dark Checkbox Grids ===== */
.form-dark .form-check-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0.6rem 1rem; padding:1rem 1.125rem; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-sm); }
.form-dark .form-check-vertical { display:flex; flex-direction:column; gap:0.6rem; padding:1rem 1.125rem; background:var(--gradient-card); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius-sm); }
.form-dark .form-check { display:flex; align-items:center; gap:0.55rem; margin:0; padding:0; min-height:0; }
.form-dark .form-check-input { flex-shrink:0; width:18px; height:18px; margin:0; position:relative; appearance:none; -webkit-appearance:none; background:transparent; border:2px solid var(--border-dark-strong); border-radius:4px; cursor:pointer; transition:all 0.2s ease; }
.form-dark .form-check-input:hover { border-color:var(--secondary); }
.form-dark .form-check-input:checked { background:var(--gradient); border-color:transparent; }
.form-dark .form-check-input:checked::after { content:'\f00c'; font-family:var(--font-awesome); font-weight:900; color:var(--text-inverse); font-size:0.65rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.form-dark .form-check-input:focus-visible { outline:2px solid var(--secondary); outline-offset:2px; }
.form-dark .form-check-label { font-family:var(--secondary-font); font-size:0.875rem; color:var(--text-inverse-soft); cursor:pointer; margin:0; user-select:none; }
.form-dark .form-check-input:checked ~ .form-check-label { color:var(--text-inverse); }

/* ===== Form Dark Other Input ===== */
.form-dark .form-check--other { grid-column:1 / -1; }
.form-dark .form-check-other { flex:1; min-width:0; background:transparent; border:none; border-bottom:1px solid var(--border-dark-strong); color:var(--text-inverse); font-family:var(--secondary-font); font-size:0.875rem; padding:0.25rem 0.4rem; outline:none; transition:border-color 0.2s ease; }
.form-dark .form-check-other::placeholder { color:var(--text-inverse-muted); opacity:1; }
.form-dark .form-check-other:focus { border-bottom-color:var(--secondary); }

/* ===== Form Dark Actions ===== */
.form-dark .form-actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border-dark); }

/* ===== Results Header ===== */
.results-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.results-header .content-heading { margin:0; }

/* ===== Form Dark Responsive ===== */
@media (max-width: 576px) {
  .form-dark .form-check-grid { grid-template-columns:1fr; }
  .form-dark .form-actions { flex-direction:column; align-items:stretch; }
}


/* ===== Form Dark ===== */
.form-dark { background:transparent; padding:0; }
.form-dark .form-group { margin-bottom:24px; }
.form-dark label, .form-dark .control-label { display:block; color:var(--light); font-family:var(--primary-font); font-size:min(0.95rem, 15px); font-weight:600; letter-spacing:0.01em; margin-bottom:8px; }
.form-dark label .required, .form-dark .control-label .required, .form-dark label > span[style*="color"] { color:var(--primary); }

.form-dark input[type="text"], .form-dark input[type="email"], .form-dark input[type="tel"], .form-dark input[type="url"], .form-dark input[type="number"], .form-dark select, .form-dark textarea, .form-dark .form-control { width:100%; background:rgba(var(--dark-rgb), 0.5); color:var(--light); font-family:var(--primary-font); font-size:min(1rem, 16px); line-height:1.5; padding:14px 16px; border:1px solid var(--border-color); border-radius:var(--nhw-border-radius); box-shadow:none; transition:border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.form-dark textarea, .form-dark textarea.form-control { min-height:160px; resize:vertical; }

.form-dark input::placeholder, .form-dark textarea::placeholder { color:var(--muted); opacity:1; }

.form-dark input:is(:hover, :focus, :focus-visible), .form-dark select:is(:hover, :focus, :focus-visible), .form-dark textarea:is(:hover, :focus, :focus-visible), .form-dark .form-control:is(:hover, :focus, :focus-visible) { background:rgba(var(--dark-rgb), 0.75); border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb), 0.2); outline:none; }

.form-dark .help-block, .form-dark small { color:var(--muted); font-size:min(0.85rem, 13px); margin-top:6px; display:block; }

.form-dark .g-recaptcha, .form-dark .recaptcha, .form-dark [class*="captcha"] { margin:8px 0 20px; }

.form-dark button, .form-dark input[type="submit"], .form-dark .btn { width:100%; background:var(--gradient); color:var(--light); font-family:var(--primary-font); font-size:min(1rem, 16px); font-weight:600; letter-spacing:0.02em; padding:16px 32px; border:none; border-radius:var(--nhw-border-radius); cursor:pointer; transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.form-dark button:is(:hover, :focus-visible), .form-dark input[type="submit"]:is(:hover, :focus-visible), .form-dark .btn:is(:hover, :focus-visible) { background:var(--gradient-reverse); box-shadow:var(--box-shadow); outline:none; }

.form-dark .has-error input, .form-dark .has-error textarea, .form-dark .has-error select, .form-dark input.error, .form-dark textarea.error { border-color:var(--primary); background:rgba(var(--primary-rgb), 0.08); }
.form-dark .has-error .help-block, .form-dark .error-message { color:var(--primary); }

@media (max-width:576px) {
  .form-dark input[type="text"], .form-dark input[type="email"], .form-dark input[type="tel"], .form-dark textarea, .form-dark .form-control { padding:12px 14px; }
  .form-dark button, .form-dark .btn { padding:14px 24px; }
}

.form-dark label, .form-dark .control-label {display:none !important;}
/* ===== Custom Site Toggle ===== */
/* Append to qa-checklist-styles.css. No-op if .qa-toggle markup isn't on the page. */

.qa-toggle { margin:0 0 min(1.5rem, 24px); padding:min(1.25rem, 20px) min(1.5rem, 24px); background:var(--gradient-card); border:1px solid var(--border-color); border-radius:var(--nhw-border-radius); }
.qa-toggle__label { display:flex; align-items:flex-start; gap:min(1rem, 16px); cursor:pointer; margin:0; }
.qa-toggle__input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.qa-toggle__switch { position:relative; flex-shrink:0; width:min(3.25rem, 48px); height:min(1.75rem, 28px); background:var(--gray-md); border-radius:999px; transition:background 0.2s ease; margin-top:min(0.15rem, 2px); }
.qa-toggle__switch::after { content:""; position:absolute; top:min(0.2rem, 3px); left:min(0.2rem, 3px); width:min(1.35rem, 22px); height:min(1.35rem, 22px); background:var(--light); border-radius:50%; transition:transform 0.2s ease; box-shadow:var(--box-shadow-sm); }
.qa-toggle__input:checked + .qa-toggle__switch { background:var(--primary); }
.qa-toggle__input:checked + .qa-toggle__switch::after { transform:translateX(min(1.55rem, 22px)); }
.qa-toggle__input:focus-visible + .qa-toggle__switch { outline:2px solid var(--primary); outline-offset:3px; }
.qa-toggle__text { display:flex; flex-direction:column; gap:min(0.35rem, 6px); flex:1; }
.qa-toggle__title { color:var(--light); font-weight:600; line-height:1.3; }
.qa-toggle__desc { color:#fff; font-size:min(0.9rem, 14px); line-height:1.5; }

@media (max-width: 576px) {
  .qa-toggle { padding:min(1rem, 16px); }
  .qa-toggle__label { gap:min(0.75rem, 12px); }
}


/* ===== Google Ads Keyword Generator ===== */
#keyword-generator .keyword-generator__form { padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); background: var(--gradient-card); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); }
#keyword-generator .form-label { display: block; margin-bottom: .5rem; font-family: var(--secondary-font); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-inverse-muted); }
#keyword-generator .form-label__hint { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .7; }
#keyword-generator :is(.form-control, .form-select) { padding: .75rem 1rem; background: var(--bg-dark); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius-sm); color: var(--text-inverse); font-family: var(--secondary-font); font-size: .9375rem; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
#keyword-generator :is(.form-control, .form-select):is(:hover, :focus, :focus-visible) { background: var(--bg-dark); border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), .2); color: var(--text-inverse); outline: none; }
#keyword-generator .form-control::placeholder { color: var(--text-inverse-muted); }
#keyword-generator textarea.form-control { min-height: 140px; resize: vertical; }
#keyword-generator .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23189bd7' stroke-width='2'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px; }
#keyword-generator .keyword-generator__form .btn { margin-right: .5rem; }
#keyword-generator .keyword-generator__form .btn:last-child { margin-right: 0; }

/* ===== Result Panes ===== */
#keyword-generator .tab-content { margin-top: clamp(1.5rem, 3vw, 2rem); }
#keyword-generator .tab-pane .content-heading { margin-bottom: 1rem; }
#keyword-generator .tab-pane pre[class*="language-"] { position: relative; margin: 0; padding: 1.5rem 1.75rem; min-height: 240px; max-height: 640px; overflow: auto; background: var(--bg-dark-elevated); border: 1px solid var(--border-dark); border-radius: var(--nhw-border-radius); color: var(--text-inverse-soft); font-size: .875rem; line-height: 1.65; white-space: pre; }
#keyword-generator .tab-pane pre[class*="language-"] code { padding: 0; background: transparent; color: inherit; font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace; }
#keyword-generator .tab-pane pre[class*="language-"] code:empty::before { content: 'Enter cities, pick a state, and click Generate Keywords to see results here.'; color: var(--text-inverse-muted); font-family: var(--secondary-font); font-size: .9375rem; font-style: italic; }

/* ===== Tabs (13 tabs, tighter spacing) ===== */
#keyword-generator .tabs-modern .nav-link { padding: .625rem 1rem; font-size: .875rem; }

/* ===== Responsive ===== */
@media (max-width: 991px) {
  #keyword-generator .tab-pane pre[class*="language-"] { padding: 1.25rem 1.25rem; font-size: .8125rem; min-height: 200px; }
}
@media (max-width: 576px) {
  #keyword-generator .keyword-generator__form .btn { display: block; width: 100%; margin: 0 0 .5rem; }
  #keyword-generator .keyword-generator__form .btn:last-child { margin-bottom: 0; }
}



/* ===== FAQ ===== */
.faq { display:flex; flex-direction:column; gap:.75rem; margin:1rem 0 2rem; }
.faq__item { border:1px solid var(--border-color); border-radius:var(--nhw-border-radius); background:var(--light); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.faq__item[open] { border-color:rgba(var(--primary-rgb), .35); box-shadow:var(--box-shadow-sm); }
.faq__q { list-style:none; cursor:pointer; padding:min(1.25rem, 20px) min(1.5rem, 24px); font-family:var(--secondary-font); font-weight:600; color:var(--text-dark); display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:background-color .2s ease; }
.faq__q::-webkit-details-marker { display:none; }
.faq__q:is(:hover, :focus-visible) { background:rgba(var(--primary-rgb), .04); outline:none; }
.faq__q::after { content:"\f078"; font-family:var(--font-awesome); font-weight:900; font-size:min(.875rem, 14px); color:var(--primary); transition:transform .2s ease; flex-shrink:0; }
.faq__item[open] .faq__q::after { transform:rotate(180deg); }
.faq__a { padding:0 min(1.5rem, 24px) min(1.25rem, 20px); color:var(--body-text); }
.faq__a p { margin:0 0 .75rem; }
.faq__a p:last-child { margin-bottom:0; }

/* ===== FAQ search ===== */
.faq-search { position:relative; max-width:640px; margin:0 0 20px; }
.faq-search::before { content:"\f002"; font-family:var(--font-awesome); font-weight:900; position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-inverse-muted); font-size:13px; pointer-events:none; }
#faq-search__input, .faq-search input[type="text"], .faq-search input[type="search"] { width:100%; height:48px; padding:0 18px 0 44px; background:rgba(255, 255, 255, .04); border:1px solid var(--border-dark); border-radius:var(--nhw-border-radius); font-family:var(--secondary-font); font-size:14px; color:var(--text-inverse); transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; }
#faq-search__input::placeholder, .faq-search input::placeholder { color:var(--text-inverse-muted); }
#faq-search__input:is(:hover, :focus, :focus-visible), .faq-search input:is(:hover, :focus, :focus-visible) { outline:0; background:rgba(255, 255, 255, .06); border-color:rgba(var(--secondary-rgb), .7); box-shadow:0 0 0 3px rgba(var(--secondary-rgb), .18); }