/* =============================================================================
   Voicebot Agent — Flat Design System
   Single source of truth for design tokens + component classes.
   Philosophy: Zero artificial depth. No shadows. Hierarchy via scale, color,
   and typography. Poster-like color blocking. Snappy, direct motion.
   Every page links THIS file — do not add one-off styles that duplicate tokens.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* Brand palette — sunflower yellow + gold, with ink text for contrast */
  --bg: #FFFFFF;
  --fg: #211B0B;
  --primary: #F7C928;
  --primary-600: #D9A900;
  --primary-50: #FFF8D8;
  --secondary: #EAB308;
  --secondary-600: #B77900;
  --secondary-50: #FFF7CC;
  --accent: #FFD95A;
  --accent-600: #E5B51A;
  --accent-50: #FFF9E6;
  --success: #10B981;
  --success-600: #059669;
  --muted: #F6F3EA;
  --muted-200: #E7E0CF;
  --gray-400: #9A927F;
  --gray-500: #716A5B;
  --gray-700: #443E32;
  --gray-800: #252116;
  --gray-900: #15130E;
  --sidebar: #15130E;
  --sidebar-panel: #252116;
  --on-brand: #211B0B;

  /* Radius — consistent, moderate. Never pill except tags */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Spacing scale (multiples of 4) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --maxw: 80rem; /* max-w-7xl */
  --dur: 200ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17150F;
  --fg: #F4EFDF;
  --primary: #E9B91F;
  --primary-600: #C99708;
  --primary-50: #332B12;
  --secondary: #D8A90E;
  --secondary-600: #B48600;
  --secondary-50: #302912;
  --accent: #E7BF3C;
  --accent-600: #C99B12;
  --accent-50: #302914;
  --muted: #211E17;
  --muted-200: #393327;
  --gray-400: #8F8879;
  --gray-500: #B3AB9B;
  --gray-700: #D3CCBD;
  --gray-800: #211E17;
  --gray-900: #0E0D0A;
  --sidebar: #0E0D0A;
  --sidebar-panel: #211E17;
  --on-brand: #17130A;
}

/* ---- Reset / base ---------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }

/* Accessibility: solid high-contrast focus (no shadow/glow) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

/* ---- Layout primitives ----------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-16) 0; position: relative; overflow: hidden; }
.section--muted { background: var(--muted); }
.section--primary { background: var(--primary); color: var(--on-brand); }
.section--dark { background: var(--gray-900); color: #fff; }
.grid { display: grid; gap: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; gap: var(--space-3); align-items: center; }
.row-wrap { flex-wrap: wrap; }

/* Uppercase micro-label */
.eyebrow {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gray-500);
}
.eyebrow--oncolor { color: currentColor; opacity:0.75; }

/* ---- Decorative flat geometry (poster look) -------------------------------- */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco--circle { border-radius: 50%; }
.deco--square { border-radius: var(--radius-lg); }
.section > .container { position: relative; z-index: 1; }

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  border: 0; border-radius: var(--radius-md); cursor: pointer;
  padding: 0 var(--space-6); height: 3.25rem; display: inline-flex;
  align-items: center; justify-content: center; gap: var(--space-2);
  transition: transform var(--dur) ease, background-color var(--dur) ease, color var(--dur) ease;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: scale(1.05); }
.btn-primary { background: var(--primary); color: var(--on-brand); }
.btn-primary:not(:disabled):hover { background: var(--primary-600); }
.btn-secondary { background: var(--muted); color: var(--fg); }
.btn-secondary:not(:disabled):hover { background: var(--muted-200); }
.btn-accent { background: var(--accent); color: var(--gray-900); }
.btn-accent:not(:disabled):hover { background: var(--accent-600); }
.btn-success { background: var(--success); color: #04241a; }
.btn-success:not(:disabled):hover { background: var(--success-600); color:#fff; }
/* Outline = bold border-4, fills on hover */
.btn-outline { background: transparent; border: 3px solid var(--primary); color: var(--primary); }
.btn-outline:not(:disabled):hover { background: var(--primary); color: var(--on-brand); }
.btn-outline--danger { border-color: #EF4444; color: #EF4444; }
.btn-outline--danger:not(:disabled):hover { background: #EF4444; color: #fff; }
.btn-sm { height: 2.5rem; padding: 0 var(--space-4); font-size: 0.875rem; }

/* ---- Cards (color blocks) -------------------------------------------------- */
.card {
  background: var(--bg); border: 0; border-radius: var(--radius-lg);
  padding: var(--space-8); transition: transform var(--dur) ease, background-color var(--dur) ease;
}
.card--muted { background: var(--muted); }
.card--blue { background: var(--primary-50); }
.card--green { background: var(--secondary-50); }
.card--amber { background: var(--accent-50); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { transform: scale(1.02); }
.card__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.card__meta { font-size: 0.8rem; color: var(--gray-500); margin-top: var(--space-1); }

/* ---- Inputs ---------------------------------------------------------------- */
.label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gray-500); margin: var(--space-3) 0 var(--space-1); }
.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--fg);
  background: var(--bg); border: 2px solid var(--muted-200); border-radius: var(--radius-md);
  padding: 0.7rem var(--space-3); transition: background-color var(--dur) ease, border-color var(--dur) ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--gray-400); }
.input::placeholder, .textarea::placeholder { color: var(--gray-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: var(--bg); border-color: var(--primary); box-shadow: none;
}
.textarea { min-height: 92px; resize: vertical; }

/* ---- Icon medallion (solid circle with icon) ------------------------------- */
.medallion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none;
  transition: transform var(--dur) ease;
}
.medallion svg { width: 1.6rem; height: 1.6rem; stroke-width: 2.4; }
.medallion--blue { background: var(--primary); color: var(--on-brand); }
.medallion--green { background: var(--secondary); color: var(--on-brand); }
.medallion--amber { background: var(--accent); color: var(--gray-900); }
.medallion--white { background: #fff; color: var(--primary); }
.medallion--sm { width: 2.75rem; height: 2.75rem; }
.medallion--sm svg { width: 1.25rem; height: 1.25rem; }
.group:hover .medallion { transform: scale(1.1); }

/* ---- Tags / badges (pill allowed here only) -------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.2rem 0.7rem; border-radius: var(--radius-pill);
}
.tag--blue { background: var(--primary-50); color: var(--primary-600); }
.tag--green { background: var(--secondary-50); color: var(--secondary-600); }
.tag--amber { background: var(--accent-50); color: var(--accent-600); }
.tag--gray { background: var(--muted); color: var(--gray-700); }

/* ---- Status dot ------------------------------------------------------------ */
.dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--gray-400); flex: none; }
.dot--on { background: var(--success); }
.dot--live { background: #EF4444; animation: dot-pulse 1s infinite; }
@keyframes dot-pulse { 50% { opacity: 0.35; } }

/* ---- Utilities ------------------------------------------------------------- */
.muted-text { color: var(--gray-500); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hint { font-size: 0.8rem; color: var(--gray-500); }
.divider-thick { border: 0; border-top: 2px solid var(--muted-200); margin: var(--space-4) 0; }

/* ---- App shell + sidebar (shared by dashboard & mic test) ------------------ */
.shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.nav-toggle { display:none; }
.nav-backdrop { display:none; }
@media (max-width: 860px){
  html, body { overflow-x:hidden; }
  .shell { grid-template-columns:1fr; }
  /* Sidebar becomes an off-canvas drawer. Higher specificity than the base
     .sidebar rule so it wins regardless of source order. */
  .shell .sidebar {
    position:fixed; top:0; left:0; height:100vh; width:min(82vw, 280px);
    z-index:200; transform:translateX(-100%);
    transition:transform var(--dur) ease;
  }
  .shell.nav-open .sidebar { transform:translateX(0); }
  /* Dim backdrop behind the open drawer. */
  .nav-backdrop {
    display:block; position:fixed; inset:0; background:rgba(0,0,0,0.45);
    z-index:150; opacity:0; pointer-events:none; transition:opacity var(--dur) ease;
  }
  .shell.nav-open .nav-backdrop { opacity:1; pointer-events:auto; }
  /* Hamburger button, fixed top-left. */
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    position:fixed; top:var(--space-3); left:var(--space-3); z-index:160;
    width:2.75rem; height:2.75rem; border:0; border-radius:var(--radius-md);
    background:var(--sidebar); color:#fff; cursor:pointer;
  }
  .nav-toggle svg { width:1.4rem; height:1.4rem; }
  /* Give the content room for the hamburger and tighten side padding. */
  .content { padding:calc(var(--space-8) + 3rem) var(--space-4) var(--space-12); overflow-x:hidden; }
}

.sidebar { display:flex; flex-direction:column; background:var(--sidebar); color:#fff; padding:var(--space-6) var(--space-4); position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar__brand { display:flex; align-items:center; gap:var(--space-3); font-weight:800; letter-spacing:-0.02em; font-size:1.05rem; margin-bottom:var(--space-8); }
.brand-mascot { display:block; width:2.75rem; height:2.75rem; object-fit:contain; object-position:center; flex:none; }
.brand-mascot--hero { width:4rem; height:4rem; }
.sidebar__audience { margin-bottom:var(--space-6); }
.sidebar__audience select { width:100%; appearance:none; color:rgba(255,255,255,0.75); background-color:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-md); padding:0.6rem 2.25rem 0.6rem var(--space-3); font-family:inherit; font-size:0.92rem; line-height:1.25; font-weight:600; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right var(--space-3) center; }
.sidebar__audience select:hover { background-color:rgba(255,255,255,0.12); }
.sidebar__audience select:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.navgroup { margin-bottom:var(--space-6); }
.navgroup__title { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.45); padding:0 var(--space-3); margin-bottom:var(--space-2); }
.navitem { display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left; font-family:inherit; font-size:0.92rem; line-height:1.25; font-weight:600;
  color:rgba(255,255,255,0.75); background:transparent; border:0; border-radius:var(--radius-md); padding:0.6rem var(--space-3); cursor:pointer; text-decoration:none;
  transition:background-color var(--dur) ease, color var(--dur) ease, transform var(--dur) ease; }
.navitem:hover { background:rgba(255,255,255,0.08); color:#fff; transform:scale(1.02); }
.navitem.active { background:var(--primary); color:var(--on-brand); }
.navitem svg { width:1.05rem; height:1.05rem; stroke-width:2.2; flex:none; }
.navgroup--account { position:relative; margin-top:auto; margin-bottom:0; }
.account-row { display:flex; align-items:center; gap:var(--space-2); }
.account-row .account-toggle { flex:1; }
.theme-toggle { width:2.5rem; height:2.5rem; flex:none; display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.08); border:0; border-radius:var(--radius-md); cursor:pointer; transition:background-color var(--dur) ease, color var(--dur) ease, transform var(--dur) ease; }
.theme-toggle:hover { background:var(--primary); color:var(--on-brand); transform:scale(1.04); }
.theme-toggle svg { width:1.05rem; height:1.05rem; stroke-width:2.2; }
.theme-toggle .icon-moon { display:none; }
.lang-toggle .lang-code { font-size:0.72rem; font-weight:700; letter-spacing:0.02em; line-height:1; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
.account-menu { position:absolute; left:0; right:0; bottom:calc(100% + var(--space-2)); display:grid; gap:var(--space-2); padding:var(--space-2); background:var(--sidebar-panel); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-md); }
.account-menu[hidden] { display:none; }
.account-menu .navitem { width:100%; }
.account-menu .navitem--danger { color:#EF4444; }
.account-menu .navitem--danger:hover { color:#F87171; background:rgba(239,68,68,0.12); }

/* Roomier than the old 1100px cap, but centred in the space beside the sidebar
   so both sides get equal margin instead of hugging one edge. min-width:0 stops
   this grid column from blowing past the viewport and hiding the sidebar. */
.content { padding:var(--space-8) var(--space-12) var(--space-16); min-width:0; }
.page__head { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
.page__sub { width:100%; color:var(--gray-500); font-size:0.92rem; margin-bottom:var(--space-8); }
.agents-create-button { position:fixed; right:var(--space-8); bottom:var(--space-8); z-index:20; }
@media (max-width:860px){ .agents-create-button { right:var(--space-4); bottom:var(--space-4); } }

/* ---- Toast ----------------------------------------------------------------- */
#toast {
  position: fixed; bottom: 104px; right: var(--space-6);
  background: var(--gray-900); color: #fff; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: 0.9rem; font-weight: 500;
  max-width: 360px; opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur) ease, transform var(--dur) ease; z-index: 70;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.err { background: #EF4444; }

/* ---- Custom select (replaces the un-stylable native dropdown popup) --------- */
.cs { position: relative; width: 100%; }
.cs-trigger {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); font-family: inherit; font-size: 0.95rem; font-weight: inherit; color: var(--fg);
  cursor: pointer; background: var(--bg); border: 2px solid var(--muted-200); border-radius: var(--radius-md);
  padding: 0.7rem var(--space-3); transition: border-color var(--dur) ease, background-color var(--dur) ease;
}
.cs-trigger:hover { border-color: var(--gray-400); }
.cs.open .cs-trigger { border-color: var(--primary); }
.cs-trigger__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger__chev { flex: none; width: 1rem; height: 1rem; color: var(--gray-500); transition: transform var(--dur) ease; }
.cs.open .cs-trigger__chev { transform: rotate(180deg); }
.cs-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--bg); border: 2px solid var(--muted-200); border-radius: var(--radius-md);
  max-height: 16rem; overflow-y: auto; padding: var(--space-1); display: none;
}
.cs.open .cs-panel { display: block; }
.cs-opt {
  padding: 0.55rem var(--space-3); border-radius: var(--radius-md); cursor: pointer;
  font-size: 0.92rem; color: var(--fg); transition: background-color var(--dur) ease;
}
.cs-opt:hover, .cs-opt--active { background: var(--muted); }
.cs-opt--selected { font-weight: 700; color: var(--primary-600); }

/* Dark variant for the sidebar audience switcher */
.sidebar .cs-trigger { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14); font-weight: 600; }
.sidebar .cs-trigger:hover { border-color: rgba(255,255,255,0.32); }
.sidebar .cs.open .cs-trigger { border-color: rgba(255,255,255,0.4); }
.sidebar .cs-trigger__chev { color: rgba(255,255,255,0.6); }
.sidebar .cs-panel { background: var(--sidebar-panel); border-color: rgba(255,255,255,0.16); }
.sidebar .cs-opt { color: rgba(255,255,255,0.85); }
.sidebar .cs-opt:hover, .sidebar .cs-opt--active { background: rgba(255,255,255,0.12); }
.sidebar .cs-opt--selected { color: #fff; }
.blog-page{overflow-x:hidden}.blog-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--muted-200)}.blog-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:4.5rem}.blog-brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;font-size:1.1rem;font-weight:800;letter-spacing:-.02em;min-height:44px}.blog-brand img,.blog-footer-brand img{width:2.5rem;height:2.5rem;object-fit:contain}.blog-links{display:flex;align-items:center;gap:var(--space-3);font-size:.92rem;font-weight:600}.blog-links a,.blog-menu-panel a,.blog-footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-2);text-decoration:none}.blog-links a:hover,.blog-menu-panel a:hover,.blog-footer a:hover{color:var(--primary-600)}.blog-actions{display:flex;align-items:center;gap:var(--space-2)}.blog-actions .btn-sm{min-height:44px;height:44px}.blog-menu,.blog-actions .theme-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-md);background:var(--muted);color:var(--fg);cursor:pointer;font:inherit}.blog-menu:hover,.blog-actions .theme-button:hover{background:var(--primary);color:var(--on-brand)}.blog-menu{display:none}.blog-menu-panel{display:none}.blog-review-bar{padding:var(--space-2) var(--space-4);background:var(--accent);color:var(--gray-900);text-align:center;font-size:.85rem;font-weight:600}.blog-index-hero{padding-bottom:var(--space-12)}.blog-index-hero h1{max-width:18ch;font-size:clamp(2.5rem,6vw,4.5rem)}.blog-index-lead{max-width:48rem;margin-top:var(--space-6);font-size:clamp(1.05rem,2vw,1.25rem);color:var(--gray-700)}.blog-cluster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-bottom:var(--space-12)}.blog-cluster{padding-top:var(--space-4);border-top:4px solid var(--primary-600)}.blog-cluster:nth-child(3n+2){border-color:var(--secondary-600)}.blog-cluster:nth-child(3n){border-color:var(--accent-600)}.blog-cluster p{margin-top:var(--space-3);color:var(--gray-700)}.blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}.blog-card{display:flex;flex-direction:column;gap:var(--space-3)}.blog-card h2{font-size:1.35rem;line-height:1.15}.blog-card h2 a{text-decoration:none}.blog-card h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.blog-card p{color:var(--gray-700)}.blog-card .eyebrow{color:var(--gray-500)}.blog-card-meta{margin-top:auto;font-size:.85rem;color:var(--gray-500)!important}.blog-empty{max-width:48rem}.blog-article{padding:var(--space-12) 0 var(--space-16)}.blog-article-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,20rem);gap:var(--space-12);align-items:start}.blog-article-main{max-width:54rem}.blog-article h1{font-size:clamp(2.4rem,5vw,4.4rem);max-width:18ch}.blog-summary{margin-top:var(--space-6);font-size:1.2rem;font-weight:600;max-width:48rem}.blog-dates{margin-top:var(--space-3);color:var(--gray-500);font-size:.9rem}.blog-body{margin-top:var(--space-12);font-size:1.05rem}.blog-body h2{margin-top:var(--space-12);font-size:clamp(1.5rem,3vw,2.1rem)}.blog-body h3{margin-top:var(--space-8);font-size:1.25rem}.blog-body p{margin-top:var(--space-4);max-width:52rem}.blog-body ul{margin:var(--space-4) 0 0;padding-left:1.25rem;max-width:52rem}.blog-body li+li{margin-top:var(--space-2)}.blog-body a,.blog-footer a{display:inline-block;min-height:24px;color:var(--primary-600);font-weight:600}.blog-article-aside{position:sticky;top:6rem;padding:var(--space-6);background:var(--muted);border-radius:var(--radius-lg)}.blog-article-aside p+p{margin-top:var(--space-2)}.blog-article-aside .eyebrow{margin-top:var(--space-4)}.blog-article-aside .eyebrow:first-child{margin-top:0}.blog-article-aside .btn{margin-top:var(--space-6);width:100%}.blog-aside-warning{margin-top:var(--space-6)!important;padding-top:var(--space-4);border-top:2px solid var(--muted-200);font-weight:600}.blog-note{margin-top:var(--space-8);padding:var(--space-6);background:var(--primary-50);border-left:4px solid var(--primary-600)}.blog-note p{margin-top:var(--space-2)}.blog-note .eyebrow{margin-top:0}.blog-table-wrap{margin-top:var(--space-6);overflow-x:auto;border-radius:var(--radius-lg);background:var(--bg)}.blog-table-wrap:focus-visible{outline:2px solid var(--primary);outline-offset:4px}.blog-table-wrap table{width:100%;min-width:720px;border-collapse:collapse}.blog-table-wrap caption{text-align:left;padding:var(--space-4) var(--space-3);font-weight:700}.blog-table-wrap th,.blog-table-wrap td{padding:var(--space-3);text-align:left;vertical-align:top;border-bottom:2px solid var(--muted-200)}.blog-table-wrap th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500)}.blog-table-wrap tbody th{font-size:1rem;letter-spacing:0;text-transform:none;color:var(--fg)}.blog-table-wrap tr:last-child th,.blog-table-wrap tr:last-child td{border-bottom:0}.blog-script{margin:var(--space-8) 0 0;padding:var(--space-6);background:var(--muted);border-radius:var(--radius-lg)}.blog-script figcaption{font-weight:700}.blog-script figcaption .tag{margin-right:var(--space-2)}.blog-script div{margin-top:var(--space-4)}.blog-script p{margin-top:var(--space-3)}.blog-script p:first-child{margin-top:0}.blog-checklist{list-style:none;padding-left:0!important}.blog-checklist li{position:relative;padding-left:1.8rem}.blog-checklist li::before{content:'✓';position:absolute;left:0;color:var(--primary-600);font-weight:800}.blog-sources{margin-top:var(--space-8);padding-top:var(--space-4);border-top:2px solid var(--muted-200)}.blog-sources ul{margin-top:var(--space-2)}.blog-related-links{margin-top:var(--space-12);padding-top:var(--space-6);border-top:2px solid var(--muted-200)}.blog-related-links ul{margin-top:var(--space-2)}.blog-footer{padding:var(--space-12) 0;background:var(--gray-900);color:#fff}.blog-footer-grid{display:grid;grid-template-columns:1fr auto;gap:var(--space-8);align-items:start}.blog-footer-brand{display:flex;align-items:center;gap:var(--space-3);font-size:1.2rem;font-weight:800}.blog-footer-brand img{width:4rem;height:4rem}.blog-footer p{margin-top:var(--space-4);color:var(--gray-400);font-size:.9rem}.blog-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2) var(--space-4)}.blog-footer a{color:#fff}.blog-footer a:hover{color:var(--primary)}@media(max-width:900px){.blog-links,.blog-actions>.btn-secondary{display:none}.blog-menu{display:inline-flex}.blog-menu-panel{display:block;position:absolute;top:calc(100% + 2px);left:0;right:0;padding:var(--space-3) var(--space-4);background:var(--bg);border-bottom:2px solid var(--muted-200)}.blog-menu-panel[hidden]{display:none}.blog-header{position:relative}.blog-menu-panel nav{display:grid;gap:var(--space-1)}.blog-article-grid{grid-template-columns:1fr}.blog-article-aside{position:static;max-width:54rem}.blog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-cluster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.blog-nav{min-height:4rem}.blog-brand img{width:2.25rem;height:2.25rem}.blog-index-hero,.blog-article{padding-top:var(--space-8)}.blog-index-hero h1,.blog-article h1{font-size:clamp(2.2rem,12vw,3.2rem)}.blog-cluster-grid,.blog-card-grid,.blog-footer-grid{grid-template-columns:1fr}.blog-article-grid{gap:var(--space-6)}.blog-body{margin-top:var(--space-8);font-size:1rem}.blog-body h2{margin-top:var(--space-8)}.blog-table-wrap{margin-left:calc(var(--space-4)*-1);margin-right:calc(var(--space-4)*-1);padding:0 var(--space-4)}.blog-table-wrap table{min-width:700px}.blog-script,.blog-note{padding:var(--space-4)}.blog-footer nav{justify-content:flex-start}}@media(prefers-reduced-motion:reduce){.blog-page *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
.blog-article-grid,.blog-article-main{min-width:0}
.blog-more{margin-top:var(--space-8)}
.blog-more summary{list-style:none;cursor:pointer;width:max-content}
.blog-more summary::-webkit-details-marker{display:none}
.blog-more summary::after{content:'+';margin-left:var(--space-2)}
.blog-more[open] summary::after{content:'−'}
.blog-more .blog-card-grid--more{margin-top:var(--space-8)}