/* Milebito Design System — colors, typography, spacing, radii, shadows.
   Import this at the top of any HTML / JSX entrypoint. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=Host+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* === BRAND === */
  --brand-gradient: linear-gradient(180deg, #593BF2 0%, #863AFA 100%);
  --brand-gradient-h: linear-gradient(90deg, #593BF2 0%, #863AFA 100%);
  --brand-500: #593BF2;
  --brand-400: #7A62F5;
  --brand-600: #4830C7;

  /* === PRIMARY / VIOLET === */
  --primary-100: #DED8FC;
  --primary-200: #CDC4FB;
  --primary-300: #9B89F7;
  --primary-400: #7A62F5;
  --primary-500: #593BF2;
  --primary-600: #4830C7;
  --primary-700: #38249D;
  --primary-800: #271972;
  --primary-900: #1F135D;
  --primary-tint: #EEEBFE;

  /* === NEUTRALS === */
  --n-0:  #FFFFFF;
  --n-50:  #FCFDFF;
  --n-100: #F7F6F9;
  --n-200: #E6E8EA;
  --n-300: #B8B7BE;
  --n-500: #625F6E;
  --n-600: #605E6E;
  --n-700: #2A2736;
  --n-800: #1D1B27;
  --n-900: #020204;
  --sidebar-bg: #1D1B27;
  --sidebar-glow: rgba(136,80,215,0.7);

  /* === SEMANTIC / ACCENT === */
  --success-bg: #C2F5DA;
  --success-fg: #0B4627;
  --success-dot: #12B76A;
  --warn-fg: #F17A14;
  --warn-bg: #FFDCCE;
  --warn-tint: #FFF0EA;
  --danger-fg: #3A1405;
  --info-tint: #EEEBFE;

  /* === CATEGORY ACCENTS === */
  --cat-emerald: #73E2A4;
  --cat-emerald-deep: #0B4627;
  --cat-teal: #2BA0AB;
  --cat-teal-deep: #0F3338;
  --cat-orange: #FF692E;
  --cat-orange-tint: #FFF0EA;
  --cat-orange-deep: #3A1405;
  --cat-violet: #AC3CFF;
  --cat-violet-tint: #F3E4FF;

  /* === TYPE: FOUNDATIONS === */
  --font-ui: 'Geist', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-docs: 'Host Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* === TYPE: FOREGROUND === */
  --fg-1: #2A2736;  /* strongest body */
  --fg-2: #625F6E;  /* muted body */
  --fg-3: #B8B7BE;  /* placeholder / tertiary */
  --fg-on-dark: #FCFDFF;
  --fg-on-brand: #FFFFFF;

  /* === BORDERS === */
  --border-1: #E6E8EA;
  --border-2: #EDEDED;
  --border-strong: #2A2736;

  /* === RADII === */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;   /* buttons, inputs */
  --r-lg: 10px;  /* cards */
  --r-xl: 12px;
  --r-2xl: 16px; /* panels */
  --r-pill: 999px;

  /* === SPACING (px) === */
  --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;
  --s-5: 10px; --s-6: 12px; --s-7: 16px; --s-8: 20px;
  --s-9: 24px; --s-10: 28px; --s-11: 32px; --s-12: 40px;
  --s-13: 48px; --s-14: 56px; --s-15: 64px; --s-16: 72px;
  --s-17: 80px; --s-18: 96px; --s-19: 120px;

  /* === SHADOWS === */
  --shadow-card: 0 0 0 1px rgba(18,55,105,0.08), 0 1px 2px rgba(9,25,72,0.13);
  --shadow-pop:  0 8px 24px rgba(6,27,22,0.08), 0 1px 2px rgba(9,25,72,0.13);
  --shadow-modal: 0 24px 64px rgba(6,27,22,0.16);
  --shadow-btn-primary: 0 1px 2px rgba(89,59,242,0.24), inset 0 1px 0 rgba(255,255,255,0.16);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(89,59,242,0.35);
}

/* === RESET & BASELINE === */
html, body { margin: 0; padding: 0; font-family: var(--font-ui); color: var(--fg-1); background: var(--n-100); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

/* === SEMANTIC HEADINGS (optional utility) === */
.h1 { font-family: var(--font-display); font-weight: 500; font-size: 56px; line-height: 64px; letter-spacing: -0.01em; color: var(--fg-1); }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 56px; letter-spacing: -0.01em; color: var(--fg-1); }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: -0.01em; color: var(--fg-1); }
.h4 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.01em; color: var(--fg-1); }
.h5 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; color: var(--fg-1); }
.h6 { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: -0.01em; color: var(--fg-1); }

.label-lg { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -0.015em; }
.label-md { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.011em; }
.label-sm { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.006em; }
.label-xs { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 16px; }

.p-lg { font-family: var(--font-body); font-size: 18px; line-height: 24px; color: var(--fg-1); }
.p-md { font-family: var(--font-body); font-size: 16px; line-height: 24px; letter-spacing: -0.011em; color: var(--fg-1); }
.p-sm { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--fg-2); }
.p-xs { font-family: var(--font-body); font-size: 12px; line-height: 16px; color: var(--fg-2); }

.sub-sm  { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--fg-2); }
.sub-xs  { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--fg-2); }
.sub-xxs { font-family: var(--font-body); font-weight: 400; font-size: 11px; line-height: 12px; color: var(--fg-3); }

.eyebrow { font-family: var(--font-body); font-size: 48px; line-height: 56px; letter-spacing: -0.01em; color: var(--fg-1); text-transform: uppercase; }

/* === PRIMITIVE UI CLASSES === */
.ms-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--border-1); box-shadow: var(--shadow-card); }
.ms-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font: 500 12px/16px var(--font-body); }
.ms-btn-primary { background: var(--brand-gradient); color: #fff; border: 0.4px solid rgba(89,59,242,0.1); border-radius: var(--r-md); padding: 8px 12px; font: 500 14px/20px var(--font-ui); box-shadow: var(--shadow-btn-primary); cursor: pointer; }
.ms-btn-secondary { background: #fff; color: var(--n-700); border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 8px 12px; font: 500 14px/20px var(--font-ui); cursor: pointer; }
.ms-input { background: rgba(42,39,54,0.04); border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 8px 12px; font: 400 14px/20px var(--font-body); color: var(--fg-1); }

/* ============================================================
   MOBILE RESPONSIVE — overrides inline fixed widths/grids/padding
   so every page fits phones (≤768px) without horizontal scroll.
   ============================================================ */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ---- Tablet & below ---- */
@media (max-width: 900px) {
  /* Any multi-column grid collapses to 2 columns */
  [style*="repeat(3"], [style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Big side paddings shrink */
  [style*="80px"] { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---- Phones ---- */
@media (max-width: 768px) {
  /* Force single column for every grid */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }
  /* Tame oversized horizontal padding everywhere */
  [style*="padding: 72px 80px"], [style*="padding: 48px 80px"],
  [style*="padding: 100px 80px"], [style*="padding: 92px 80px"],
  [style*="padding: 84px 80px"], [style*="padding: 30px 80px"],
  [style*="padding: 44px 80px"], [style*="padding: 26px 80px"],
  [style*="padding: 0 80px"], [style*="padding:0 80px"],
  [style*="padding: 64px 80px"], [style*="padding: 120px 80px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Generic: anything with 80px left/right padding */
  [style*="80px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* Flex rows wrap instead of overflowing */
  [style*="display: flex"]:not([style*="column"]) { flex-wrap: wrap; }

  /* Headings scale down so they don't overflow */
  h1 { font-size: 34px !important; line-height: 1.15 !important; }
  h2 { font-size: 26px !important; line-height: 1.2 !important; }

  /* Hero / two-column splits stack */
  [style*="1fr 1fr"], [style*="0.8fr 1.2fr"], [style*="1fr 1.04fr"],
  [style*="1fr 1.2fr"], [style*="1.2fr 1fr"], [style*="0.9fr 1.1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Wide fixed elements never exceed screen */
  [style*="maxWidth"], [style*="max-width"] { max-width: 100% !important; }

  /* Reduce huge vertical paddings a bit on phones */
  [style*="padding: 100px"], [style*="padding: 120px"], [style*="padding: 92px"] {
    padding-top: 48px !important; padding-bottom: 48px !important;
  }
}

/* Small phones */
@media (max-width: 420px) {
  h1 { font-size: 29px !important; }
  [style*="80px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- Navbar mobile ---- */
@media (max-width: 900px) {
  .aic-nav { padding-left: 18px !important; padding-right: 18px !important; gap: 10px !important; }
  /* Hide the absolutely-positioned center links so they don't overlap the logo */
  .aic-nav-links { display: none !important; }
  .aic-nav-actions { gap: 6px !important; }
}
@media (max-width: 420px) {
  /* On tiny screens, hide the "Log in" text link; keep the CTA button */
  .aic-nav-actions a { display: none !important; }
}

/* ============================================================
   IMPROVEMENT ROADMAP — UI polish (animations, skeletons)
   ============================================================ */

/* Staggered fade-in for cards */
@keyframes aicFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.aic-fade-up { animation: aicFadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
.aic-fade-up:nth-child(1){animation-delay:.02s}
.aic-fade-up:nth-child(2){animation-delay:.06s}
.aic-fade-up:nth-child(3){animation-delay:.10s}
.aic-fade-up:nth-child(4){animation-delay:.14s}
.aic-fade-up:nth-child(5){animation-delay:.18s}
.aic-fade-up:nth-child(6){animation-delay:.22s}
.aic-fade-up:nth-child(7){animation-delay:.26s}
.aic-fade-up:nth-child(8){animation-delay:.30s}
.aic-fade-up:nth-child(9){animation-delay:.34s}

/* Loading skeleton shimmer */
@keyframes aicShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.aic-skeleton {
  background: linear-gradient(90deg, #EEEDF2 25%, #F6F5FA 50%, #EEEDF2 75%);
  background-size: 800px 100%;
  animation: aicShimmer 1.3s infinite linear;
  border-radius: 8px;
}

/* Save (heart) button */
.aic-save-btn { transition: transform .15s ease, color .15s ease; cursor: pointer; }
.aic-save-btn:hover { transform: scale(1.15); }
.aic-save-btn:active { transform: scale(.9); }

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .aic-fade-up, .aic-skeleton { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- Browse mobile bottom-sheet filters ---- */
.aic-filter-sheet-head { display: none; }
@media (max-width: 768px) {
  .aic-browse-grid { grid-template-columns: 1fr !important; }
  /* Hide sidebar by default on mobile; show as bottom sheet when open */
  .aic-browse-filters {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto !important;
    max-height: 82vh; overflow-y: auto;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,.2);
    padding: 18px 20px 24px !important;
    transform: translateY(100%);
    transition: transform .28s ease;
    z-index: 70;
  }
  .aic-browse-filters.open { transform: translateY(0); }
  .aic-filter-sheet-head { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .aic-filter-backdrop { position: fixed; inset: 0; background: rgba(15,12,30,.5); z-index: 69; }
  .aic-filter-trigger { display: inline-flex !important; }
  .aic-filter-apply { display: block !important; }
}
@media (min-width: 769px) {
  .aic-filter-apply { display: none; }
}

/* ---- Simple line StatsBar ---- */
@media (max-width: 768px) {
  .aic-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 0; }
  .aic-stat-divider { display: none !important; }
}

/* ---- Advertising page (Dribbble-style) ---- */
.aic-ad-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -22px rgba(16,24,40,.26) !important; }
@media (max-width: 900px) {
  .aic-ad-card { transform: none !important; }
}

/* ---- Homepage V2 (dark premium) ---- */
.aic-v2-card:hover { border-color: rgba(255,255,255,.20) !important; background: #17171D !important; }
.aic-v2-tools .aic-v2-card:hover { transform: translateY(-3px); }
@keyframes aicV2Type { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.aic-v2-type { display: inline-block; animation: aicV2Type .5s ease; }
@media (max-width: 900px) {
  .aic-v2-bento, .aic-v2-steps, .aic-v2-tools, .aic-v2-quotes { grid-template-columns: 1fr !important; }
  .aic-v2-stats { grid-template-columns: repeat(2,1fr) !important; gap: 32px 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .aic-v2-type { animation: none; }
  .aic-v2-tools .aic-v2-card:hover { transform: none; }
}
@keyframes aicV2Blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.aic-v2-caret { animation: aicV2Blink 1s step-end infinite; color: #F5A623; margin-left: 1px; }
@media (max-width: 900px) {
  .aic-v2-fgrid, .aic-v2-showcase, .aic-v2-stats, .aic-v2-steps, .aic-v2-quotes { grid-template-columns: 1fr !important; }
}

/* ---- V2 premium animations ---- */
@keyframes aicReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes aicFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aicFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes aicDrift { 0% { transform: translate(0,0); } 50% { transform: translate(20px,-16px); } 100% { transform: translate(0,0); } }
.aic-rv { opacity: 0; }
.aic-rv.in { animation: aicReveal .7s cubic-bezier(.2,.7,.2,1) forwards; }
.aic-rv-1.in { animation-delay: .08s; }
.aic-rv-2.in { animation-delay: .16s; }
.aic-rv-3.in { animation-delay: .24s; }
.aic-rv-4.in { animation-delay: .32s; }
.aic-v2cat { transition: color .25s, background .25s, border-color .25s, transform .25s; }
.aic-v2cat:hover { transform: translateX(6px); }
.aic-v2tool { transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.aic-v2tool:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22) !important; }
.aic-v2faq summary { transition: color .2s; }
.aic-v2link { transition: gap .25s, color .25s; }
.aic-v2link:hover { gap: 12px !important; }
@media (prefers-reduced-motion: reduce) {
  .aic-rv, .aic-rv.in { animation: none !important; opacity: 1 !important; }
}
/* ---- About team cards ---- */
.aic-team-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -26px rgba(89,59,242,.3) !important; border-color: rgba(89,59,242,.3) !important; }
@media (max-width: 900px) { .aic-team-grid { grid-template-columns: repeat(2,1fr) !important; } .aic-team-card:hover { transform: none !important; } }

/* ---- Chatbot widget ---- */
.aic-chat-fab:hover { transform: scale(1.06); }
@keyframes aicChatPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.aic-chat-pop { animation: aicChatPop .26s cubic-bezier(.2,.8,.2,1); transform-origin: bottom right; }
.aic-typing { display: inline-flex; gap: 4px; align-items: center; }
.aic-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); display: block; animation: aicTypeBlink 1.2s infinite; }
.aic-typing i:nth-child(2) { animation-delay: .2s; }
.aic-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes aicTypeBlink { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .aic-chat-pop, .aic-typing i, .aic-chat-fab:hover { animation: none; transform: none; } }
@keyframes aicChatPulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.aic-chat-pulse { animation: aicChatPulse 2.2s ease-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .aic-chat-pulse { animation: none; opacity: 0; } }



/* ---- Hero slide-up animated placeholder ---- */
.aic-line-in { animation: aicLineIn .48s cubic-bezier(.2,.8,.2,1) both; }
.aic-line-out { animation: aicLineOut .48s cubic-bezier(.4,0,.2,1) both; }
@keyframes aicLineIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes aicLineOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
/* thick blue blinking pipe cursor */
.aic-type-caret { display: inline-block; color: #2563EB; font-weight: 700; transform: scaleX(1.6); transform-origin: left center; margin-left: 3px; animation: aicCaretBlink 1s step-end infinite; }
@keyframes aicCaretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aic-line-in, .aic-line-out, .aic-type-caret { animation: none; } }
.aic-sug-row:hover { background: var(--primary-tint) !important; }
.aic-quiz-opt:hover { border-color: var(--primary-600) !important; box-shadow: 0 6px 18px -8px rgba(89,59,242,.4); transform: translateY(-1px); }
@media (max-width: 640px) { .aic-quiz-grid { grid-template-columns: 1fr !important; } }

/* ---- Mobile UX polish (Point 14) ---- */
@media (max-width: 768px) {
  /* Reduce large horizontal padding on mobile for more content space */
  [style*="padding: 72px 80px"], [style*="padding: 84px 80px"], [style*="padding:84px 80px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="44px 80px"], [style*="26px 80px"], [style*="34px 80px"] { padding-left: 18px !important; padding-right: 18px !important; }
  /* Ensure tap targets are at least 44px tall for accessibility */
  button, .aic-quiz-opt, .aic-sug-row { min-height: 40px; }
  /* Tool finder quiz: single column on mobile */
  .aic-quiz-grid { grid-template-columns: 1fr !important; }
  /* Reviews: single column on mobile */
  [style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  /* Hero headings smaller on mobile */
  h1[style*="48px"] { font-size: 32px !important; }
  h1[style*="34px"] { font-size: 28px !important; }
}
@media (max-width: 480px) {
  /* Even tighter on small phones */
  [style*="padding: 72px 80px"], [style*="padding: 48px 24px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- Mobile navigation (hamburger + full-screen menu) ---- */
@media (max-width: 900px) {
  .aic-nav-burger { display: grid !important; }
  .aic-nav-actions > a { display: none !important; }        /* "Contact us" moves into the menu */
}
@media (max-width: 420px) {
  .aic-nav-actions > button:not(.aic-nav-burger) { padding: 9px 12px !important; font-size: 13px !important; }
}
.aic-mobile-menu a:active, .aic-mobile-menu a:hover { background: rgba(89,59,242,.06) !important; }

/* ---- Article / long-form HTML bodies (blog posts, legal pages, tool descriptions) ---- */
.aic-article, .aic-prose { font: 400 17px/1.75 var(--font-body); color: var(--fg-2); }
.aic-article > :first-child, .aic-prose > :first-child { margin-top: 0; }
.aic-article p, .aic-prose p { margin: 20px 0 0; }
.aic-article h2 { margin: 38px 0 0; font: 600 28px/1.25 var(--font-display); color: var(--fg-1); letter-spacing: -0.02em; }
.aic-article h3 { margin: 30px 0 0; font: 600 21px/1.3 var(--font-display); color: var(--fg-1); letter-spacing: -0.01em; }
.aic-article blockquote { margin: 34px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--primary-500); font: 500 22px/1.5 var(--font-serif); color: var(--fg-1); font-style: italic; }
.aic-article ul, .aic-article ol, .aic-prose ul { margin: 20px 0 0; padding-left: 22px; }
.aic-article li, .aic-prose li { margin: 8px 0; }
.aic-article a, .aic-prose a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 3px; }
.aic-article img { max-width: 100%; height: auto; border-radius: 2px; margin: 26px 0 0; display: block; }
.aic-article pre { margin: 20px 0 0; padding: 16px 18px; border-radius: 2px; background: #16141b; color: #fff; overflow-x: auto; font: 400 14px/1.6 ui-monospace, Menlo, monospace; }
.aic-article code { font: 400 .92em ui-monospace, Menlo, monospace; background: rgba(89,59,242,.08); padding: 2px 5px; border-radius: 3px; }
.aic-article pre code { background: none; padding: 0; }
.aic-article hr { margin: 34px 0; border: 0; border-top: 1px solid var(--border-1); }
.aic-article table { width: 100%; border-collapse: collapse; margin: 24px 0 0; font-size: 15px; }
.aic-article th, .aic-article td { border: 1px solid var(--border-1); padding: 10px 12px; text-align: left; }
.aic-article th { background: #fff; color: var(--fg-1); font-weight: 600; }

/* ---- Mobile polish: comparison block, icon rows, pills ---- */
@media (max-width: 768px) {
  /* rows made of [icon + text] must never wrap the text under the icon */
  .aic-compare [style*="display: flex"] { flex-wrap: nowrap !important; }
  .aic-compare { display: flex !important; flex-direction: column; }
  .aic-compare > div { border-radius: 8px !important; }
  /* the "V/S" badge sits between the two stacked cards instead of over the title */
  .aic-vs { position: static !important; transform: none !important; display: inline-flex !important; margin: 14px auto !important; order: 1; }
  .aic-compare > div:last-of-type { order: 2; }
  /* small tag pills keep their shape when a flex row wraps */
  [style*="border-radius: 999px"], [style*="borderRadius: 999"] { flex: 0 0 auto; width: auto !important; }
}