@charset "UTF-8";
/* ===================================== _variables.scss ===================================== */
/*********
color
*********/
/* #070C59; */
/*********
type
*********/
/*********
breakpoints
*********/
/*********
misc.
*********/
/* ====================================================================================================================================================
   2026
   ==================================================================================================================================================== */
/* ==========================================================================
   TOKENS (maps + mixins) — CSS-var-friendly names
   - Primitives remain SCSS vars
   - CSS custom properties use consistent kebab-case:
       --font-display
       --surface-fill-1
       --text-fill-1
       --display-l
       --space-16
   - Light/Dark + Device Scales generated from maps
   - Spacing vars included
   - prefers-reduced-motion included
   ========================================================================== */
/* =========================
   Primitives - Default (SCSS)
   ========================= */
/* == */
/* == */
/* == */
/* == */
/* == */
/* == */
/* =========================
   Maps (CSS-var names as keys)
   ========================= */
/* Fonts */
/* Spacing (measurements -> space-*) */
/* Optional: expose palette/brand/system primitives as CSS vars */
/* Color Modes - Light (semantic) */
/* Color Modes - Dark (semantic) */
/* Device Scales - Desktop (type) */
/* Device Scales - Mobile (type) */
/* =========================
   Mixins
   ========================= */
/* Quote font family names when needed (spaces, etc.), leave generic families unquoted */
/* =========================
   Globals / Entry Point
   =========================

   NOTE: CSS custom-property emission (the :root token block, [data-theme]
   hooks, type-scale and reduced-motion media queries) lives in
   base/_theme-root.scss. This file holds only silent definitions
   (maps, functions, mixins) so it can be @use'd by standalone stylesheets
   without re-emitting the global token system. */
/* =========================
   Usage examples
   ========================= */
/*
.card {
  background: var(--surface-fill-1);
  color: var(--text-fill-1);
  padding: var(--space-16);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--display-l);
}
*/
:host, :root {
  --border-radius: 4px;
  --alert-bg: #fff3cd;
  --alert-border: #ffe69c;
  --alert-text: #664d03;
  --cli-green: #7ee787;
  --sidebar-active: var(--brand-resolve);
  --code-bg: var(--surface-fill-1);
  --code-color: #5176AD;
}

/* Auto dark mode — follows the OS only when the user hasn't made an explicit
   choice via the theme toggle ([data-theme] then governs and wins). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-fill-1: #0B0B0E;
    --surface-fill-2: #15151C;
    --surface-fill-3: #2D2D33;
    --surface-fill-4: #46454A;
    --text-fill-1: #F1EEE9;
    --text-fill-2: #C0BEBB;
    --text-fill-3: #8F8E8E;
    --text-fill-4: #5E5D60;
    --brand-inverses: #002660;
    --brand-inverses-2: #4F3C2B;
    --brand-logo: #FFE500;
    --product-logo: #F1EEE9;
    --link-text-color: #FFE500;
    --sidebar-active: var(--brand-agility);
  }
}
[data-theme=dark] {
  --surface-fill-1: #0B0B0E;
  --surface-fill-2: #15151C;
  --surface-fill-3: #2D2D33;
  --surface-fill-4: #46454A;
  --text-fill-1: #F1EEE9;
  --text-fill-2: #C0BEBB;
  --text-fill-3: #8F8E8E;
  --text-fill-4: #5E5D60;
  --brand-inverses: #002660;
  --brand-inverses-2: #4F3C2B;
  --brand-logo: #FFE500;
  --product-logo: #F1EEE9;
  --link-text-color: #FFE500;
  --sidebar-active: var(--brand-agility);
  --alert-bg: #403A00;
  --alert-border: #675e00;
  --alert-text: #b6a500;
  --code-bg: var(--surface-fill-3);
}
[data-theme=dark] .warning-panel {
  --code-bg: var(--surface-fill-2);
  --code-color: var(--text-fill-2);
}

#top-navigation-cloud {
  z-index: 100;
}
#top-navigation-cloud .dev-search-toggle .dropdown-menu {
  background-color: var(--surface-fill-1);
}
#top-navigation-cloud .dev-search-toggle .form-control:focus {
  box-shadow: none;
  border-color: var(--text-fill-3);
}

/* Secondary nav bar (Connect AI sub-sections) */
#top-navigation-secondary {
  width: 100%;
  position: fixed;
  top: var(--ai-subnav-top, var(--subnav-height, 0));
  z-index: 99;
  opacity: 0;
  transition: top 0.2s ease-in-out, opacity 0.3s ease-in-out;
  background-color: var(--surface-fill-2);
  border-bottom: 1px solid var(--surface-fill-3);
}
#top-navigation-secondary .top-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#top-navigation-secondary .top-navigation ul li {
  display: inline-block;
}
#top-navigation-secondary .top-navigation ul li a {
  display: block;
  padding: var(--space-16, 16px) var(--space-12, 12px);
  font-size: var(--label-s, 13px);
  color: var(--text-fill-3, #555);
  text-decoration: none;
  white-space: nowrap;
}
#top-navigation-secondary .top-navigation ul li a:hover {
  color: var(--text-fill-1, #111);
}
#top-navigation-secondary .top-navigation ul li a.active {
  color: var(--text-fill-1, #111);
  font-weight: 700;
}
@media (min-width: 768px) {
  #top-navigation-secondary .container {
    width: 100%;
    max-width: 1320px;
  }
}
@media (min-width: 1600px) {
  #top-navigation-secondary .container {
    width: 100%;
    max-width: 1400px;
  }
}

article[id]::before {
  content: "";
  display: block;
  height: 95px;
  margin-top: -95px;
  visibility: hidden;
}

article[id]::after {
  content: "";
  display: block;
  height: 95px;
  margin-top: -95px;
  visibility: hidden;
}

html {
  scroll-behavior: smooth;
}

.disabled {
  pointer-events: none;
  opacity: 0.75;
}

.letter-spacing {
  letter-spacing: 0.06em;
}

h1 {
  font-size: var(--display-m);
  margin-bottom: 0.25em;
}

h1 + h2, h1 + h3 {
  font-family: var(--font-display);
  margin-top: var(--space-32);
}

h2 + h3 {
  margin-top: 0;
  font-family: var(--font-display);
}

h3 {
  font-weight: 400;
  border-bottom: 1px solid var(--surface-fill-4);
  padding-bottom: var(--space-8);
}
h3.sub-step {
  font-size: var(--headline-s);
  margin-top: var(--space-48);
}
h3.sub-step:first-of-type {
  margin-top: 0;
}

.gradient_primary-blue-medium-blue h3 {
  border: none;
  padding: 0;
}

hr {
  margin: var(--space-16) 0;
}

p + h3, ul + h3, article h3:first-child, article h2:first-child, .dc-article p + h2, .dc-article ul + h2, ul + h4, .dc-article ol + h2, .dc-article code + h2, .dc-article pre + h2, .dc-article code + h3, .dc-article pre + h3 {
  margin-top: 1.5em;
}

ul.nav.nav-tabs {
  margin-left: 0;
  border-color: var(--surface-fill-3);
}
ul.nav.nav-tabs li {
  margin-bottom: 0;
}
ul.nav.nav-tabs li.active > a {
  color: var(--text-fill-1);
  background-color: var(--surface-fill-1);
  border-color: var(--surface-fill-3);
  border-width: 1px;
  border-style: solid;
}
ul.nav.nav-tabs li > a {
  color: var(--text-fill-4);
}
ul.nav.nav-tabs li > a:hover {
  border-color: var(--surface-fill-3);
  background-color: var(--surface-fill-3);
  color: var(--text-fill-1);
}

code:not([lang]), var {
  background-color: var(--code-bg);
  color: var(--code-color);
  border: 1px solid var(--surface-fill-4);
  display: inline-block;
  margin: 1px;
}

.code {
  overflow-x: auto;
  margin: 0 15px 15px;
}

var {
  padding: 2px 4px;
  border-radius: var(--border-radius);
  font-size: 90%;
}

.syntaxhighlighter {
  min-height: 34px;
}
.syntaxhighlighter code {
  display: inline;
}

pre {
  max-width: 650px !important;
  overflow-x: auto;
  padding: 10px;
  border: 1px solid gainsboro;
  font-size: 90%;
  user-select: all;
}

.code-badge {
  background-color: var(--surface-fill-1);
  border: 1px solid var(--surface-fill-3);
  font-size: var(--label-s);
  padding: var(--space-4) var(--space-8);
  user-select: all;
  line-height: var(--line-height-100);
}

#entry code {
  background: transparent;
  padding: 0px;
  margin: 0px;
  border: none;
}

table:not(.gsc-input) {
  margin: 1em 0;
}

.dc-content h2 + ul:not(.listChecks, .accordion-items, .fa-ul),
.dc-content h3 + ul:not(.listChecks, .accordion-items, .fa-ul),
.dc-content p + ul:not(.listChecks, .accordion-items, .fa-ul),
.dc-content ul,
.dc-content ol {
  margin-left: 2em;
  margin-bottom: 1.5em;
}
.dc-content ul li, .dc-content ol li {
  margin-bottom: var(--space-16);
  line-height: var(--line-height-140);
  font-size: var(--body-m);
  color: var(--text-fill-2);
}
.dc-content ul.body-s li, .dc-content ol.body-s li {
  font-size: var(--body-s);
  margin-bottom: var(--space-8);
}
.dc-content ul li ul {
  margin-bottom: 0.25em;
}
.dc-content ul li:last-child {
  margin-bottom: 0;
}

.dc-article img {
  max-width: 100%;
  position: sticky;
  top: var(--subnav-height, 0);
  z-index: 99;
  display: block;
  margin: 1em auto;
  border: 1px solid var(--surface-fill-3);
}

.techBox {
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--surface-fill-3);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  /* padding: 1em; */
  position: relative;
  background-color: var(--surface-fill-1);
}
.techBox.highlight {
  border-color: var(--brand-agility);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.techBox .techBoxLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 125px;
  padding: 1em;
  border-bottom: 1px solid var(--surface-fill-3);
  background: color-mix(in srgb, var(--surface-fill-1), transparent 50%);
  overflow: hidden;
}
.techBox .techBoxLogo img {
  width: 90px;
  transition: all 0.2s ease-in-out;
  transform: scale(1);
}
.techBox:hover .techBoxLogo img {
  transform: scale(1.05);
}
.techBox .techBoxCopy {
  padding: var(--space-24);
  flex: 1;
}
.techBox .techBoxCopy.flex {
  display: flex;
  flex-direction: column;
}
.techBox .techBoxCopy.flex span.techDesc {
  flex: 1;
}
.techBox span {
  display: block;
}
.techBox span.techLabel {
  font-weight: 700;
  font-size: var(--body-m);
  margin-bottom: var(--space-8);
}
.techBox span.techDesc {
  font-size: var(--body-s);
  line-height: var(--line-height-130);
}
.techBox .techBoxTags {
  font-family: var(--font-label);
  font-size: var(--eyebrow-s);
  color: var(--text-fill-3);
  margin-top: var(--space-12);
}

.card-simple {
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--surface-fill-3);
  border-radius: var(--border-radius);
  padding: var(--space-24);
  position: relative;
  background-color: var(--surface-fill-1);
}

span.eyebrow-badge {
  --eyebrow-badge-color: var(--brand-depth);
  display: inline-block;
  color: var(--eyebrow-badge-color);
  font-size: var(--eyebrow-s);
  line-height: var(--line-height-100);
  padding: var(--space-4) var(--space-8);
  border-radius: 2px;
  font-family: var(--font-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1%;
}

.techCard {
  background: var(--surface-fill-1);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-width: 8px 0 0;
  border-color: var(--techCard-border);
  border-style: solid;
}
.techCard.resolve {
  --techCard-border: var(--brand-resolve);
}
.techCard.agility {
  --techCard-border: var(--brand-agility);
}
.techCard.balance {
  --techCard-border: var(--brand-balance);
}
.techCard.depth {
  --techCard-border: var(--text-fill-1);
}

#product-wrapper .sidebar-title {
  cursor: pointer;
}

.techCard-tech {
  color: var(--text-fill-1);
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.techCard-tech > div {
  display: grid;
  place-items: center;
  grid-template: 48px 1fr/1fr;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-12);
  text-align: center;
  position: relative;
  color: var(--text-fill-1);
}
.techCard-tech > div:hover svg {
  transform: scale(1.1);
}
.techCard-tech svg {
  max-width: 190px;
  max-height: 40px;
  height: auto;
  width: auto;
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
}

hr.sidebar-divide {
  margin: 30px 0;
}

.sidebar-sticky {
  position: sticky;
  top: 95px;
  margin-bottom: 1.5rem;
  max-height: 600px;
  overflow-y: auto;
  /* -ms-overflow-style: none;   */
  scrollbar-width: thin;
  transition: top 0.2s ease-in-out;
}

/* Hide scrollbar for Chrome, Safari and Opera */
/* .sidebar-sticky::-webkit-scrollbar {
    display: none;
} */
#table-of-contents ul, #table-of-contents li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#table-of-contents .toc-h1 > a {
  padding-left: 0.5rem;
}
#table-of-contents .toc-h2 > a {
  padding-left: 1.5rem;
}
#table-of-contents .toc-h3 > a,
#table-of-contents .toc-h6 > a {
  padding-left: 40px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-right: 0;
}
#table-of-contents .toc-h4 > a {
  padding-left: 60px;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-right: 0;
  font-size: 93%;
  line-height: 1.5;
}
#table-of-contents .toc-h5 > a {
  padding-left: 80px;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-right: 0;
  font-size: 90%;
  line-height: 1.5;
}
#table-of-contents a {
  text-decoration: none;
  overflow: initial;
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--text-fill-3);
  background: none;
  border-left: 3px solid var(--surface-fill-3);
  white-space: normal;
}
#table-of-contents a:hover {
  border-left-color: var(--surface-fill-4);
  color: var(--text-fill-1);
}
#table-of-contents a.active {
  border-left-color: var(--sidebar-active);
  color: var(--sidebar-active);
  font-weight: 500;
}
#table-of-contents .toc-h3 > a.active, #table-of-contents .toc-h4 > a.active {
  border-left-color: var(--surface-fill-4);
}
#table-of-contents li ul li.active:not(.datasource) a {
  color: var(--sidebar-active);
  font-weight: 700;
}

ul > li::before {
  content: "";
}

/*driver list*/
.developer-community-sources hr {
  margin-bottom: 0.2em;
}
.developer-community-sources .source {
  height: 150px;
  padding-top: 20px;
}
.developer-community-sources .source .icon {
  border-radius: 2px;
  /* border: 1px solid var(--surface-fill-3); */
  width: 100%;
  position: sticky;
  /* top: var(--subnav-height, 0); */
  z-index: 99;
  height: 90px;
  background-image: linear-gradient(to bottom, var(--brand-clarity), var(--gray-1));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /*INCREMENTAL REPLICATION/PREMIUM INDICATOR*/
}
.developer-community-sources .source .icon .driver-icon {
  display: block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
}
.developer-community-sources .source .icon img {
  margin: 10px;
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}
.developer-community-sources .source .icon i {
  display: none;
  position: absolute;
  right: -9px;
  top: -6px;
  color: #00A0FF;
}
.developer-community-sources .source .for {
  text-align: left;
  color: var(--text-fill-1);
  font-size: var(--label-s);
  margin: 0 0 0.5em;
}
.developer-community-sources .source.smart .icon i {
  display: inline-block;
}
.developer-community-sources .source.smart .icon::before {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  content: "";
  top: -6px;
  right: -6px;
  background: #00a0ff;
}
.developer-community-sources .source.premium .icon::after {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  content: "";
  top: -6px;
  right: -6px;
  background: #fb9218;
}
.developer-community-sources .source.premium.smart .icon::after {
  right: 3px;
}
.developer-community-sources .nav > li > a.active {
  color: #fff;
  background-color: #337ab7;
}

.driver-connections .source .icon {
  background-image: linear-gradient(to bottom, var(--brand-clarity), var(--gray-1));
}

/*SEARCH BAR FILTER*/
.product-item-subfilter-wrapper {
  /*text-align:center;*/
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}

#product-item-subfilter {
  margin-left: 0;
  margin-bottom: 0;
  display: inline-flex;
  flex: 1 1 auto;
  max-width: 70%;
}
#product-item-subfilter li:not(.active) a:hover {
  color: var(--gray-12);
}

#javasources #product-item-subfilter,
#ssis #product-item-subfilter {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 80%;
}
#javasources #product-item-subfilter li,
#ssis #product-item-subfilter li {
  float: none;
  margin: 0;
}
#javasources .search-block-wrapper,
#ssis .search-block-wrapper {
  max-width: 20%;
}

ul#product-item-subfilter li {
  font-size: var(--label-s);
  line-height: normal;
}

.search-block-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 0 0 0 5px;
  z-index: 1000;
  flex: 1 1 auto;
  margin: 6px 0;
  max-width: 20%;
}

.search-block {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  max-width: 100%;
  position: sticky;
  /*top: var(--subnav-height, 0);*/
  top: 0;
  z-index: 99;
  transition: all 0.3s ease;
  opacity: 0;
  margin-right: 0;
}
.search-block.active {
  width: calc(100% - 30px);
  opacity: 1;
  margin-right: 30px;
}

#quicksearch {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 99;
  padding: 8px 32px 8px 8px;
  border-radius: var(--border-radius);
  font-size: var(--label-m);
  color: var(--text-fill-1);
  background: var(--surface-fill-1);
  border: 1px solid var(--surface-fill-3);
  display: block;
  transition: border-color 0.15s linear;
  position: relative;
}
#quicksearch:focus, #quicksearch:focus-visible, #quicksearch:active {
  border-color: var(--surface-fill-4);
  outline: none;
}
#quicksearch:focus + .reset, #quicksearch:focus-visible + .reset, #quicksearch:active + .reset {
  opacity: 1;
  z-index: 100;
}

.reset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-fill-4) !important;
  opacity: 0;
  transition: opacity 0.15s linear;
}

span.search-trigger {
  width: 30px;
  height: 44px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  background: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
span.search-trigger i {
  color: #ccc;
  font-size: 16px;
  transition: color 0.3s ease;
}
span.search-trigger.search-trigger-active i {
  color: #337ab7;
}
span.search-trigger:focus {
  outline: none;
}

/* Dev Center light/dark theme toggle (in subnav) */
.dev-theme-toggle button {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-fill-3);
  font-size: 16px;
  line-height: 1;
  transition: color 0.2s ease;
}
.dev-theme-toggle button:hover, .dev-theme-toggle button:focus-visible {
  color: var(--text-fill-1);
}

.tip {
  position: relative;
  display: inline-block;
}
.tip:hover {
  cursor: pointer;
}
.tip:hover .tooltip_wrapper, .tip:hover .tooltip_wrapper_below {
  visibility: visible;
  opacity: 1;
}

.tooltip_wrapper_below {
  text-align: left;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 0;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  line-height: 16px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
  width: 280px;
}

.tooltip_text {
  position: relative;
  background: #ffffff;
  border: 1px solid #DBDFEA;
  border-radius: var(--border-radius);
  padding: 15px;
}

.fa-thumbs-up::before {
  content: "\f164";
}

@media (min-width: 768px) and (max-width: 1200px) {
  .product-item-subfilter-wrapper {
    align-items: flex-start;
  }
  #product-item-subfilter {
    flex: 0 0 auto;
    max-width: 70%;
  }
  .search-block-wrapper {
    flex: 1 1 auto;
    max-width: 30%;
  }
}
@media (max-width: 767px) {
  #product-item-subfilter, .search-block-wrapper {
    flex: 0 0 auto;
    width: 100%;
    position: sticky;
    z-index: 99;
    max-width: 100%;
    position: sticky;
    z-index: 99;
  }
  span.search-trigger {
    height: 36.5px;
    left: 0;
    right: auto;
  }
  .search-block-wrapper {
    /*margin: -8px 0 16px;*/
    justify-content: flex-start;
  }
  .search-block.active {
    width: calc(100% - 30px);
    opacity: 1;
    margin-left: 30px;
  }
}
.badge-new {
  display: inline-block;
  font-size: var(--label-s);
  background-color: var(--brand-agility);
  color: var(--text-fill-1);
  padding: 6px var(--space-8);
  text-transform: uppercase;
  font-weight: 500;
  line-height: var(--line-height-100);
  border-radius: var(--border-radius);
  letter-spacing: 0.5px;
}

@media (min-width: 992px) {
  .decor_bracket.bracket_balance.bracket-hdr {
    margin-bottom: calc(var(--space-96) * -1);
  }
}
@media (max-width: 991px) {
  .decor_bracket.bracket_balance.bracket-hdr {
    display: none;
  }
}
label {
  display: block;
  font-size: var(--label-s);
  color: var(--text-fill-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  line-height: var(--line-height-140);
}

.tag-btn-link {
  display: inline-block;
  background-color: var(--gray-7);
  font-size: var(--label-s);
  font-family: var(--font-label);
  color: var(--gray-1);
  font-weight: 500;
  padding: var(--space-4) var(--space-8);
  line-height: var(--line-height-120);
  border-radius: var(--border-radius);
}
.tag-btn-link:hover {
  color: var(--gray-1);
  background-color: var(--gray-9);
}

.grid-x-col {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--space-24);
}

.x-col-2 {
  --columns: 2;
}

.x-col-3 {
  --columns: 3;
}

@media (max-width: 767px) {
  .x-col-2,
  .x-col-3 {
    --columns: 1;
  }
}
.cta-band {
  padding: var(--space-24) var(--space-32);
  background-color: var(--surface-fill-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  border-radius: var(--border-radius);
  border: 1px solid var(--surface-fill-3);
}

.hero-sub-tags {
  font-size: var(--body-s);
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.hero-sub-tags code {
  line-height: normal;
}

.warning-panel {
  background-color: var(--alert-bg);
  border: 1px solid var(--alert-border);
  padding: var(--space-16) var(--space-24);
  margin-bottom: var(--space-24);
}
.warning-panel p {
  margin: 0;
  font-size: var(--body-s);
}
.warning-panel .eyebrow {
  --eyebrow-color: var(--alert-text);
}

/* Command-line copy bar */
.cli-command-bar {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: var(--gray-12);
  border-radius: 4px;
  padding: var(--space-12) var(--space-16);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--eyebrow-m);
  line-height: 1.5;
  margin-bottom: var(--space-24);
  border: 1px solid var(--surface-fill-3);
}
.cli-command-bar span {
  flex: 1 1 auto;
  background: transparent;
  color: var(--gray-1);
  overflow-x: auto;
  white-space: nowrap;
  padding: 0;
}

.cli-copy-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--gray-5);
  transition: color 0.2s ease;
}
.cli-copy-btn:hover {
  color: var(--gray-1);
}
.cli-copy-btn i.fa-check {
  color: var(--cli-green);
}

/* Hello-world band */
.hello-world-band {
  padding: var(--space-24) 0;
}
.hello-world-band .hw-copy {
  padding-right: var(--space-24);
}
.hello-world-band .cols-7-md {
  position: relative;
}

/* Stat strip — between hero and router */
.stat-strip-section {
  padding: var(--space-48) 0;
}

.stat-strip .stat-number {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "case";
  font-size: var(--display-s);
  font-weight: 500;
  line-height: var(--line-height-100);
  color: var(--brand-logo);
  margin-bottom: var(--space-8);
}
.stat-strip .stat-label {
  font-family: var(--font-eyebrow);
  font-size: var(--title-s);
  line-height: var(--line-height-120);
  color: var(--text-fill-2);
}

/* Pillar grid (single-panel 3-column layout for feature triplets) */
.pillar-grid {
  display: grid;
  border: 1px solid var(--surface-fill-3);
  border-radius: var(--border-radius);
  background-color: var(--surface-fill-1);
}
.pillar-grid > div {
  padding: var(--space-32) var(--space-24);
  border-bottom: 1px solid var(--surface-fill-3);
}
.pillar-grid > div:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pillar-grid > div {
    border-right: 1px solid var(--surface-fill-3);
    border-bottom: none;
  }
  .pillar-grid > div:last-child {
    border-right: none;
  }
}
.hw-terminal-wrapper {
  position: relative;
}

.hw-terminal, .qs-terminal {
  background: var(--gray-12);
  color: var(--gray-1);
  border-radius: var(--border-radius);
  padding: var(--space-24);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  overflow: auto;
  white-space: pre;
  border: 1px solid var(--surface-fill-3);
}

.hw-terminal {
  height: 420px;
}

.qs-terminal {
  min-height: 80px;
}

.hw-replay {
  position: absolute;
  right: 0;
  bottom: -32px;
  background: transparent;
  border: 0;
  color: var(--text-fill-3);
  cursor: pointer;
  font-size: var(--label-s);
  padding: var(--space-4) 0;
  display: flex;
  gap: 5px;
  align-items: center;
}
.hw-replay:hover {
  color: var(--text-fill-1);
}
.hw-replay::before {
  font-family: var(--font-icon);
  content: "\f0e2";
  font-size: 0.9em;
}

.hw-line {
  white-space: pre;
}
.hw-line.hw-output {
  color: #8b949e;
}
.hw-line.hw-tool {
  color: #79c0ff;
}
.hw-line.hw-tool .hw-tool-tail {
  color: var(--cli-green, #7ee787);
  margin-left: var(--space-12);
}
.hw-line.hw-result {
  color: #e6edf3;
}
.hw-line.hw-agent {
  color: #79c0ff;
}
.hw-line.hw-link-line {
  color: #8b949e;
}

.hw-prompt,
.hw-user-prompt {
  color: var(--cli-green, #7ee787);
  font-weight: 600;
  user-select: none;
}

.hw-link {
  color: #58a6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hw-link:hover, .hw-link:focus {
  color: #79c0ff;
}

.hw-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: #e6edf3;
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: hwBlink 1s step-end infinite;
}

@keyframes hwBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .hello-world-band {
    padding: var(--space-24);
  }
  .hello-world-band .hw-copy {
    padding-right: 0;
    margin-bottom: var(--space-24);
  }
  .hw-terminal {
    font-size: 12px;
    height: 380px;
  }
}
table.bordered-rows {
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}
table.bordered-rows thead tr {
  border-bottom: 2px solid var(--surface-fill-3);
}
table.bordered-rows thead th {
  text-align: left;
  padding: var(--space-8) var(--space-12) var(--space-8) 0;
}
table.bordered-rows tbody tr {
  border-bottom: 1px solid var(--surface-fill-3);
}
table.bordered-rows tbody tr:last-child {
  border-bottom: none;
}
table.bordered-rows tbody td {
  padding: var(--space-8) var(--space-12) var(--space-8) 0;
}
table.table-bordered {
  border-color: var(--surface-fill-3);
}
table.table-bordered > thead > tr > th, table.table-bordered > tbody > tr > td {
  border-color: var(--surface-fill-3);
}