:root,
[data-theme="dg"]{
  /* Primary Brand Colors - Design Gateway Blue */
  --brand:/* #0ea5e9 */#0B5ED7;
  --brand-dark:/* #6366f1 */ #0e3c82;
  --brand-darker:/* #3b82f6 */#0A1F44;
  --brand-tint-light:#dbeafe;
  --brand-tint-lighter:#cffafe;
  --accent:/* #3b82f6 */#00C48C;
  --accent-cyan:/* #06b6d4 */#00C2FF;
  
  /* Base Text & Background Colors */
  --text-primary:/* #0a0f14 */#0B132B;
  --text-secondary:/* #2e3541 */#282d37;
  --text-dark:#0f172a;
  --text-label:#475569;
  --text-blue:#2563eb;
  --text-white:#ffffff;
  
  /* Page & Surface Colors (white backgrounds) */
  --page-bg:/* #ffffff */#F5F7FA;
  --card-surface:#ffffff;
  --surface-soft:#d4e4ff;
  --surface-light:#f8fafc;
  --nav-blur:rgba(255,255,255,.88);
  --dark-bg:#232a32;
  
  /* Border Colors - Updated for DG Blue */
  --border-default:#bfdbfe;
  --border-light:#dbeafe;
  --border-table:#f0f9ff;
  --border-select:#dbeafe;
  --border-subtle:#cffafe;
  
  /* Gray Scale */
  --gray-light:#64748b;
  --gray-soft:#9ca3af;
  --gray-medium:#6b7280;
  --gray-bg:#f3f4f6;
  --gray-dark:#374151;
  
  /* SVG/Diagram Specific Colors - Updated for DG Blue */
  --svg-title-bg:#0ea5e9;
  --svg-label-primary:#3b82f6;
  --svg-label-secondary:#64748b;
  --svg-container-border:#94a3b8;
  --svg-cpu-bg:#dbeafe;
  --svg-cpu-border:#3b82f6;
  --svg-cpu-inner-bg:#bfdbfe;
  --svg-cpu-text:#0a0f14;
  --svg-pcie-bg:#fef3c7;
  --svg-pcie-border:#b8860b;
  --svg-pcie-text:#664d00;
  --svg-fpga-bg:#e0e7ff;
  --svg-fpga-border:#6366f1;
  --svg-fpga-text:#4f46e5;
  --svg-dma-bg:#bfdbfe;
  --svg-dma-border:#0ea5e9;
  --svg-dma-text:#0369a1;
  --svg-trading-bg:#fef08a;
  --svg-trading-border:#06b6d4;
  --svg-trading-text:#0891b2;
  --svg-ethernet-bg:#f0f9ff;
  --svg-ethernet-border:#0ea5e9;
  --svg-ethernet-text:#0369a1;
  --svg-network-bg:#0ea5e9;
  --svg-network-border:#0369a1;
  --svg-market-bg:#1e293b;
  --svg-market-border:#0a0f14;
  --svg-arrow-default:#3b82f6;
  --svg-arrow-accent:#06b6d4;
  --svg-arrow-gray:#94a3b8;
  --svg-separator:#0ea5e9;
  --svg-tooltip-bg:#dbeafe;
  --svg-tooltip-border:#bfdbfe;
  --svg-tooltip-text:#0369a1;
  
  /* Modal & Overlay Colors */
  --modal-bg-dark:#0b1220;
  --modal-text-light:#f5f7fb;
  --modal-close:#b8c2d6;
  --modal-backdrop:rgba(10,15,20,0.6);
  --modal-backdrop-dark:rgba(0,0,0,0.55);
  --overlay-bg:rgba(10,15,20,0.55);
  
  /* Interactive States - Updated for DG Blue */
  --hover-light:#dbeafe;
  --focus-ring-blue:rgba(14,165,233,.18);
  --focus-ring-brand:rgba(14,165,233,.25);
  --focus-outline-red:#ffe6e6;
  
  /* Tooltip Colors */
  --tooltip-bg:#0a0f14;
  --tooltip-text:#fff;
  
  /* Gradient Backgrounds - Updated for DG Blue */
  --feature-bg:linear-gradient(180deg,#fff,#f0f9ff);
  --panel-bg:linear-gradient(0deg,#dbeafe,#ffffff);
  --badge-gradient:linear-gradient(135deg,var(--accent),var(--accent-cyan));
  --badge-new-gradient:linear-gradient(to top, rgb(from var(--accent-cyan) r g b / 0.85), rgb(from var(--accent) r g b / 0.15), rgb(from var(--accent) r g b / 0.15), rgb(from var(--accent-cyan) r g b / 0.85));
  --card-header-gradient:linear-gradient(135deg,var(--text-primary),var(--brand-dark));
  --cta-gradient:linear-gradient(135deg,var(--text-primary),var(--accent-cyan));
  --brand-gradient:linear-gradient(135deg,var(--brand),var(--brand-dark));
  
  /* Shadow Definitions */
  --shadow-xs:0 2px 8px rgba(0,0,0,0.08);
  --shadow-sm:0 2px 8px rgba(10, 15, 20, 0.25);
  --shadow-card:0 4px 24px -8px rgba(10,15,20,0.10);
  --shadow-md:0 6px 20px -6px var(--brand);
  --shadow-lg:0 8px 40px rgba(10,15,20,0.3);
  --shadow-svg:0 2px 8px rgba(0,0,0,0.1);
  --shadow-xl:0 12px 48px rgba(10,15,20,0.35);
  --shadow-demo:0 10px 30px rgba(0,0,0,0.35);
  --shadow-header:0 12px 40px -20px rgba(10,15,20,.25);
  
  /* YouTube Brand Colors */
  --youtube-red:#ff0000;
  --youtube-red-dark:#e00000;
  
  /* Layout Constants */
  --header-h:76px;
}

/* Fino Green Theme (Alternative) */
[data-theme="fino"] {
  --brand: #1cc58e;
  --brand-dark:#0b8b60;
  --brand-darker:#4a6b63;
  --brand-tint-light:#e8faf5;
  --brand-tint-lighter:#d4f4eb;
  --accent:#a8ff4a;
  --accent-cyan:#0ae0c2;
  --page-bg:#fafffd;
  --border-default:#d0e4dd;
  --border-light:#e5e7eb;
  --border-table:#f1f5f9;
  --border-select:#e6edf3;
  --border-subtle:#e4f1eb;
  --surface-soft:#f0faf7;
  --surface-light:#f8fbf9;
  --svg-title-bg:#1cc58e;
  --svg-label-primary:#2563eb;
  --svg-cpu-bg:#f0faf7;
  --svg-cpu-border:#4a6b63;
  --svg-cpu-inner-bg:#d4f4eb;
  --svg-fpga-bg:#e8f4f1;
  --svg-fpga-border:#4a6b63;
  --svg-fpga-text:#4a6b63;
  --svg-dma-bg:#d4f4eb;
  --svg-dma-border:#1cc58e;
  --svg-dma-text:#0b8b60;
  --svg-trading-border:#0ae0c2;
  --svg-trading-text:#0b8b60;
  --svg-network-bg:#1cc58e;
  --svg-network-border:#0b8b60;
  --svg-arrow-default:#4a6b63;
  --svg-arrow-accent:#0ae0c2;
  --svg-separator:#1cc58e;
  --svg-tooltip-bg:#f0faf7;
  --svg-tooltip-border:#d0e4dd;
  --svg-tooltip-text:#4a6b63;
  --hover-light:#eef2ff;
  --focus-ring-brand:rgba(28,197,142,.25);
  --feature-bg:linear-gradient(180deg,#fff,#f8fbf9);
  --panel-bg:linear-gradient(0deg,#f8fafc,#ffffff);
  
  /* Fino footer styles - beautiful green theme */
  --cta-bg-fino:linear-gradient(135deg,#0A0F14 0%,#0AE0C2 100%);
  --cta-btn-fino:linear-gradient(135deg,#A8FF4A 0%,#0AE0C2 100%);
  --footer-text-fino:#4a6b63;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;line-height:1.55;-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Inter,Roboto,'Helvetica Neue',Arial;color:var(--text-primary);background:var(--page-bg);padding-top:var(--header-h)}
img,svg,video,canvas{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* Theme-specific footer overrides */
[data-theme="fino"] #aat-cta-shared{background:linear-gradient(135deg,#0A0F14 0%,#0AE0C2 100%)}
[data-theme="fino"] #aat-cta-shared .btn.primary{background:linear-gradient(135deg,#A8FF4A 0%,#0AE0C2 100%);color:#0a0f14;box-shadow:0 6px 20px -6px #1CC58E}
[data-theme="fino"] #aat-footer-text{color:#4a6b63}

.container{max-width:1200px;margin-inline:auto;padding:0 1rem}
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:1fr}
/* Responsive flows grid: auto-fill columns with a sensible min width so the number of cards per row adapts */
#flowsGrid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 560px) {
  #flowsGrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ===== Header (fixed, sticky, scroll-spy) ===== */
header.site-header{position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--page-bg);border-bottom:1px solid var(--border-default)}
@media(min-width:900px){.nav-blur{position:relative}.nav-blur::before{content:"";position:absolute;inset:0;background:var(--nav-blur);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);z-index:-1}}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:.75rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
.badge{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand-gradient);color:#fff;font-size:.9rem;box-shadow:var(--shadow-header)}
.navlinks{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;width:38px;height:38px;border-radius:10px;background:var(--page-bg);border:1px solid var(--border-default);cursor:pointer;z-index:10001;}
.hamburger span{display:block;width:24px;height:3px;background:var(--text-dark);margin:3px 0;border-radius:2px;transition:.2s}
@media(max-width:900px){
  .navlinks{
    position:fixed;
    top:var(--header-h);
    right:0;left:0;
    background:var(--page-bg);
    border-bottom:1px solid var(--border-default);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:.5rem 1rem;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:none;
    transition:opacity .3s, visibility .3s;
    box-shadow:0 8px 24px -12px rgba(15,23,42,.12);
    z-index:10000;
  }
  .navlinks.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .hamburger{display:flex;}
}
.btn{border:1px solid var(--border-default);border-radius:12px;padding:.52rem .9rem;background:var(--page-bg);cursor:pointer;display:inline-block;font-weight:700;color:var(--text-dark);line-height:1}
.btn{
  transition:box-shadow .18s, transform .18s, background .18s, color .18s;
}
.btn:hover{
  box-shadow:0 6px 20px -8px rgb(from var(--dark-bg) r g b / 0.25);
  transform:translateY(-2px) scale(1.04);
}
.btn.cta{
  background:var(--card-surface);
  color:var(--text-primary);
  border:1px solid var(--accent-cyan);
  border-width:3px;
  box-shadow:0 3px 8px rgb(from var(--accent-cyan) r g b / 0.25);
}
.btn.cta:hover{background:var(--accent-cyan); color:var(--text-white);}
.btn.details-btn{
  border-color:var(--brand-dark);
  color:var(--text-white);
  border-width:3px;
  background: var(--brand);
  box-shadow:0 6px 20px rgb(from var(--brand) r g b / 0.25);
  font-weight:800;
}
.btn.details-btn:hover{
  background:var(--card-surface);
  color:var(--text-primary);
}
.btn.details-btn:focus-visible{outline:2px solid var(--focus-ring-brand);outline-offset:2px;}
.btn.demo-btn{
  background:var(--card-surface);
  color:var(--text-primary);
  border:1px solid var(--accent-cyan);
  border-width:3px;
  box-shadow:0 3px 8px rgb(from var(--accent-cyan) r g b / 0.25);
}
.btn.demo-btn:hover{background:var(--accent-cyan); color:var(--text-white);}
.btn.demo-btn:focus-visible{outline:2px solid var(--focus-outline-red); outline-offset:2px;}
.btn.docs-toggle{
  border-color: var(--brand-dark);
  color: var(--text-white);
  background: var(--brand);
  border-width:2px;
  box-shadow: 0 3px 10px rgb(from var(--brand) r g b / 0.25);
  font-weight: 800;
}
.btn.docs-toggle:hover{
  color: var(--text-primary);
  background: rgb(from var(--brand) r g b / 0.10);
}
.btn.demos-toggle{
  border-color: var(--brand-dark);
  color: var(--text-white);
  background: var(--brand);
  border-width:2px;
  box-shadow: 0 3px 10px rgb(from var(--brand) r g b / 0.25);
  font-weight: 800;
}
.btn.demos-toggle:hover{
  color: var(--text-primary);
  background: rgb(from var(--brand) r g b / 0.10);
}
.btn:focus-visible{outline:2px solid var(--focus-ring-brand);outline-offset:2px}
a:focus-visible, button:focus-visible, input:focus-visible {
  outline:2px solid var(--focus-ring-brand);
  outline-offset:2px;
}
img[alt],svg[aria-label],canvas[aria-label]{outline:none}
.btn.primary{background:var(--brand-gradient);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(14,165,233,0.3)}
.btn.ghost{background:var(--page-bg)}
.btn.link{border-color:transparent;background:transparent}
.btn.link.active {
  background: var(--brand-tint-light);
  border-bottom: 3px solid var(--brand);
  box-shadow: 0 2px 0 0 var(--brand-dark);
  color: var(--brand);
  transition: background .3s, border-bottom .3s, color .3s, box-shadow .3s;
  animation: spyFade .35s cubic-bezier(.4,0,.2,1);
}
@keyframes spyFade {
  0% { background: var(--brand-tint-lighter); border-bottom: 3px solid var(--brand-dark); color: var(--brand-dark); }
  100% { background: var(--brand-tint-light); border-bottom: 3px solid var(--brand); color: var(--brand); }
}

/* ===== Animation & Transition ===== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp .7s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== Hero Section ===== */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 420px at 50% -120px, rgb(from var(--brand-tint-lighter) r g b/ 0.25), transparent),
    radial-gradient(800px 220px at 10% -80px, rgb(from var(--brand-tint-light) r g b/ 0.2), transparent),
    linear-gradient(120deg, var(--brand-darker) 0%, var(--brand) 100%),
    var(--page-bg);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14,165,233,0.18) 0%, rgba(6,182,212,0.12) 60%, transparent 100%);
  filter: blur(32px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  top: 60px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 100%);
  filter: blur(24px);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}
.hero > .container {
  position: relative;
  z-index: 1;
}
.embed-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}
/* Use aspect-ratio so video and image boxes are identical (480x260) */
.embed-responsive{position:relative;width:100%;max-width:480px;aspect-ratio:480/260;height:auto;border-radius:16px;overflow:hidden}
.embed-responsive iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.responsive-img{width:100%;height:100%;object-fit:cover;display:block}
.eyebrow{font-weight:800;letter-spacing:.4px;color:var(--text-white);text-transform:uppercase;font-size:.8rem;}
.hero h1{font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.06;margin:.25rem 0 0;color:var(--text-white);}
.hero p{max-width:980px;color:var(--text-white);margin:.8rem 0 0;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.chip{border:1px solid var(--border-default);border-radius:999px;padding:.4rem .7rem;font-size:.85rem;color:var(--brand-dark);background:var(--page-bg)}
.factbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.fact{background:var(--surface-light);border:1px solid var(--border-default);border-radius:10px;padding:.45rem .65rem;font-size:.85rem;color:var(--text-primary)}

.section-title{display:flex;align-items:center;gap:.6rem;font-weight:900;margin:1.25rem 0 .75rem}
.section-title::before{content:"";width:6px;height:20px;border-radius:6px;background:var(--brand-gradient)}

/* ===== Card Layout ===== */
.card{position:relative;border:1px solid var(--border-default);background:var(--card-surface);border-radius:18px;padding:1rem;box-shadow:0 10px 30px -18px rgba(15,23,42,.18)}
.card h3{margin:.1rem 0 .25rem;font-size:1.12rem}
.card .tagline{color:var(--text-secondary);font-size:.95rem}
.pill{display:inline-block;border:1px solid var(--border-default);border-radius:999px;padding:.28rem .6rem;font-size:.78rem;color:var(--text-label);background:var(--surface-light);margin:.25rem .25rem 0 0}
.actions{margin-top:.8rem;display:flex;gap:.5rem;flex-wrap:wrap}

/* ===== Card Select Checkbox ===== */
.select-pin{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  width:44px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.select-pin input{
  position:absolute;
  opacity:0;
  inset:0;
  margin:0;
  cursor:pointer;
  /* ensure the native input sits above the custom UI so clicks reliably hit it */
  z-index: 4;
}
.select-ui{
  width:34px;
  height:28px;
  border-radius:8px;
  border:2px solid var(--border-select);
  background:var(--page-bg);
  display:grid;
  place-items:center;
  box-shadow:0 6px 18px -10px rgba(15,23,42,.06);
  transition:all .14s cubic-bezier(.4,0,.2,1);
  /* allow clicks to pass through to the (invisible) input underneath */
  pointer-events: none;
}
.select-ui::after{
  content:"";
  width:12px;
  height:8px;
  border:3px solid transparent;
  border-left-color:var(--brand);
  border-bottom-color:var(--brand);
  transform:rotate(-45deg) scale(.6);
  opacity:0;
  transition:transform .12s ease,opacity .12s ease;
}
.select-pin input:checked + .select-ui{
  box-shadow:inset 0 0 0 2px rgba(14,165,233,0.133), 0 6px 18px -10px rgba(10,15,20,.04);
  border-color:rgba(14,165,233,0.4);
  background:var(--page-bg);
}
.select-pin input:checked + .select-ui::after{
  opacity:1;
  transform:rotate(-45deg) scale(1);
}
.select-pin input:focus-visible + .select-ui{
  outline:2px solid var(--focus-ring-blue);
  outline-offset:2px;
}
.select-pin:hover .select-ui{ transform:translateY(-2px) scale(1.02); }

/* make the card visually indicate selection when its input is checked */
.card .select-pin input:checked ~ h3{
  color: var(--brand);
  transition: color .18s ease;
}
.card .select-pin input:checked ~ h3 + p{
  color: var(--text-secondary);
  opacity: 0.95;
  transition: opacity .18s ease, color .18s ease;
}

@media (max-width:700px){
  .select-pin{ right:10px; top:10px; width:40px; height:34px; }
  .select-ui{ width:30px; height:26px; }
}

/* ===== Comparison Table & Chips ===== */
.table-wrap {
  border:1px solid var(--border-default);
  border-radius:18px;
  overflow:auto;
  background:var(--page-bg);
  position:relative;
}
/* Horizontal scroll hint for mobile */
.table-wrap::after {
  /* keep pseudo-element present but hidden by default; visibility controlled by .has-scroll */
  content: "";
  position: absolute;
  right: 18px;
  top: 12px;
  background: var(--brand);
  color: #fff;
  font-size: .85rem;
  padding: 2px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 2;
}
.table-wrap.scrolled-x::after {
  opacity: 0 !important;
  pointer-events: none;
}
/* while resizing, show hint even if table had been scrolled previously; helps the user notice new scrollability */
.table-wrap.has-scroll.resizing::after {
  opacity: 0.85 !important;
  pointer-events: none;
}
/* brief grace period after resize when table was previously user-scrolled */
.table-wrap.has-scroll.resized-grace::after {
  opacity: 0.85 !important;
  pointer-events: none;
}
/* briefly show hint when new content (columns) was added to the table */
.table-wrap.has-scroll.content-added::after {
  opacity: 0.85 !important;
  pointer-events: none;
}
@media (max-width: 900px) {
  .table-wrap.has-scroll::after {
    content: "Scroll →";
    opacity: 0.85;
  }
  table {
    min-width: 600px;
  }
}

/* If JS floating hint is active, hide the pseudo-element to avoid duplicate hints */
.floating-hint-enabled .table-wrap.has-scroll::after {
  opacity: 0 !important;
  pointer-events: none;
}

/* Floating hint element (used instead of relying on pseudo-element so the hint does NOT scroll with table content) */
.table-scroll-hint{
  position:fixed;
  z-index:10002;
  pointer-events:none;
  background:var(--brand);
  color:#fff;
  font-size:.85rem;
  padding:2px 10px;
  border-radius:8px;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  transform:translateY(0);
  display:inline-block;
}
.table-scroll-hint.show{opacity:0.85}
@media (min-width:901px){
  /* hide floating hint on wide viewports (desktop where table layout differs) */
  .table-scroll-hint{display:none}
}
table{width:100%;border-collapse:collapse}
thead{color:var(--text-primary); background:var(--surface-soft)}
th,td{padding:.85rem 1rem;text-align:left;border-top:1px solid var(--border-table);vertical-align:top}
/* Ensure the first (Category) column keeps a stable width and can wrap
   long labels if needed. This prevents it from collapsing and stealing
   space from the flow columns. */
th:first-child,td:first-child{
  font-weight:800;
  color:var(--text-primary);
  background:var(--surface-soft);
  /* keep a readable minimum width; adjust px as needed */
  min-width:160px;
  width:160px;
  /* allow wrapping inside the category cell rather than overflowing */
  white-space:normal;
}

/* Make comparison table columns distribute more fairly across available width.
  We use fixed table layout and a JS-inserted <colgroup> to assign percentages so
  flow columns have equal widths while the first (category) column keeps a smaller share. */
.table-wrap table{table-layout:fixed}
.table-wrap th,.table-wrap td{overflow-wrap:break-word}

.compare-note{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem;color:var(--text-label)}
.chip-sel{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .55rem .28rem .6rem;border-radius:999px;border:1px solid var(--border-default);background:var(--surface-soft);font-size:.78rem}
.chip-sel .x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:9px;background:rgba(15,23,42,0.04);color:var(--text-dark);line-height:1;font-weight:900;opacity:0;transform:scale(.85);transition:opacity .12s ease, transform .12s ease}
.chip-sel:hover .x{opacity:1;transform:scale(1)}
.chip-sel .x:focus-visible{outline:2px solid var(--focus-ring-brand)}

/* ===== Call-to-Action Strip ===== */
.cta{background:var(--brand-gradient);color:#fff}

/* ===== Back-to-Top Button ===== */
.to-top{position:fixed;right:16px;bottom:16px;z-index:900;opacity:0;pointer-events:none;transition:opacity .2s ease}
.to-top.show{opacity:1;pointer-events:auto}

/* ===== Anchor Offset for Sections ===== */
section[id]{scroll-margin-top:86px}

/* ===== Details Section (Long Strips) ===== */
.details .stack{display:flex;flex-direction:column;gap:1rem}
.details .panel{position:relative;border:none;border-radius:12px;background:var(--panel-bg);padding:1rem 1.25rem;box-shadow:none;overflow:hidden}
.details .panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--brand-gradient)}
.details .panel h3{margin:.1rem 0 .25rem;font-size:1.2rem}
.details .panel .tagline{color:var(--text-secondary);font-size:.95rem}
.details .panel ul{padding-left:1.1rem;margin:.55rem 0 0;list-style:disc}
.details .panel li{margin:.3rem 0}

/* ===== Features, Implementation, FAQ ===== */
.features{display:grid;gap:1rem}
@media(min-width:900px){.features{grid-template-columns:repeat(3,1fr)}}
.feat{border:1px solid var(--border-default);background:var(--card-surface);border-radius:16px;padding:1rem}
.feat h3{margin:.1rem 0 .4rem;font-size:1.1rem}
.feat p{color:var(--text-secondary);margin:.2rem 0}

/* ===== Modern Feature Grid ===== */
.feature-grid{
  display:grid;
  gap:1rem;
  margin-top:.4rem;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:flex-start;
}
@media(max-width:760px){
  .feature-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
.feature-card{
  position:relative;
  border:1px solid var(--border-default);
  background:var(--feature-bg);
  border-radius:18px;
  padding:1rem 1.05rem;
  box-shadow:0 12px 32px -20px rgba(10,15,20,.22);
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.feature-kicker{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.26rem .55rem;
  border-radius:999px;
  background:var(--brand-tint-light);
  color:var(--brand-dark);
  font-weight:800;
  letter-spacing:.4px;
  font-size:.82rem;
  width:max-content;
}
.feature-card h3{
  margin:0;
  font-size:1.15rem;
}
.feature-summary{color:var(--text-secondary);margin:0}
.feature-body{
  position:relative;
  overflow:hidden;
  max-height:240px;
  transition:max-height .25s ease;
}
.feature-card.no-toggle .feature-body{max-height:none;overflow:visible}
.feature-card.is-collapsed .feature-body{max-height:240px}
.feature-card:not(.is-collapsed) .feature-body{max-height:1200px}
.feature-fade{
  position:absolute;
  left:0;right:0;bottom:0;
  height:90px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%, rgba(219,234,254,.92) 55%, rgba(14,165,233,.18) 100%); /* Brand color fade */
  pointer-events:none;
  opacity:1;
  transition:opacity .2s ease;
}
.feature-card.no-toggle .feature-fade{display:none}
.feature-card:not(.is-collapsed) .feature-fade{opacity:0}
.feature-points{
  display:grid;
  gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.feature-point{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  padding:.65rem .75rem;
  border:1px solid var(--border-subtle);
  background:var(--page-bg);
  border-radius:12px;
  box-shadow:0 8px 22px -18px rgba(10,15,20,.24);
}
.feature-point::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:6px;
  margin-top:.35rem;
  background:var(--brand-gradient);
  box-shadow:0 0 0 6px rgba(14,165,233,.08);
  flex-shrink:0;
}
.feature-point strong{color:var(--text-primary)}
.feature-point p{margin:0;color:var(--text-secondary)}
.feature-toggle{
  align-self:flex-start;
  margin-top:.2rem;
  border-radius:999px;
  padding:.48rem .9rem;
  border:1px solid var(--border-default);
  background:var(--page-bg);
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--text-primary);
  box-shadow:0 8px 24px -18px rgba(10,15,20,.24);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-card.no-toggle .feature-toggle{display:none}
.feature-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 28px -18px rgba(10,15,20,.28);border-color:var(--brand)}
.feature-toggle:focus-visible{outline:2px solid var(--focus-ring-brand);outline-offset:2px}
.feature-toggle .chevron{
  display:inline-block;
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.feature-card:not(.is-collapsed) .feature-toggle .chevron{transform:rotate(-135deg)}

/* Footer Styles for both themes */
#aat-cta-shared{background:var(--brand-gradient)}
#aat-footer-text{color:var(--text-secondary)}

.steps{counter-reset:stp}
.step{border-left:4px solid var(--border-light);padding:.6rem .6rem .6rem 1rem;margin:.4rem 0;background:var(--page-bg);border-radius:10px;border:1px solid var(--border-default)}
.step h4{margin:.1rem 0 .25rem}
.step h4::before{counter-increment:stp;content:counter(stp) ". ";font-weight:900;color:var(--brand-dark)}

details.faq{border:1px solid var(--border-default);border-radius:12px;background:var(--card-surface);padding:.8rem 1rem}
details.faq + details.faq{margin-top:.6rem}
details.faq summary{cursor:pointer;font-weight:800}
details.faq p{color:var(--text-secondary);margin:.5rem 0 0}
/* ===== Helper Classes for HTML Inline Styles ===== */
.bg-soft{background:var(--surface-soft)}
.bg-base{background:var(--page-bg)}
.badge-gradient{background:var(--badge-gradient)}
.card-header-gradient{background:var(--card-header-gradient);color:white}
.light-gray-text{color:var(--gray-light)}
.border-color{border-color:var(--border-default)}