:root {
  --color-bg:#0b0c0f;--color-muted:#0f1115;--color-card:#fff;--color-card-foreground:#090909;
  --color-primary:#3b82f6;--color-primary-foreground:#0b1220;--color-secondary:#1f2937;--color-secondary-foreground:#e5e7eb;
  --color-muted-foreground:#9aa4b2;--color-ring:rgba(59,130,246,0.6);--color-destructive:#ef4444;
  --radius-xl:.75rem;--radius-md:.5rem;--shadow-xs:0 1px 2px rgba(0,0,0,.2);--shadow-sm:0 1px 3px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.2);
  --shadow-primary:0 0 0 1px var(--color-primary),0 4px 20px rgba(59,130,246,.35);
  --table-header-bg:#e9f7ee;
}

body{background:var(--color-bg)}

/* Layout */
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.items-baseline{align-items:baseline}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.inline-flex{display:inline-flex}
.shrink-0{flex-shrink:0}

/* Gaps */
.gap-0\.5{gap:.125rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-6{gap:1.5rem}

/* Dimensions */
.h-10{height:2.5rem}
.w-54{width:13.5rem}
.size-4\.5{width:1.125rem;height:1.125rem}

/* Padding */
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.has-\[>svg\]\:px-4:has(> svg){padding-left:1rem;padding-right:1rem}

/* Typography */
.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-2xl{font-size:1.5rem}
.text-4xl{font-size:2.25rem}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.whitespace-nowrap{white-space:nowrap}
#baremetal-pricing-table h2 {color: #fff}
/* Colors */
.bg-card{background-color:var(--color-card)}
.text-card-foreground{color:var(--color-card-foreground)}
.text-muted-foreground{color:var(--color-muted-foreground)}
.bg-primary{background-color:var(--color-primary)}
.text-primary-foreground{color:var(--color-primary-foreground)}
.bg-secondary{background-color:var(--color-secondary)}
.text-secondary-foreground{color:var(--color-secondary-foreground)}
.hover\:bg-secondary\/80:hover{background-color:color-mix(in srgb,var(--color-secondary) 80%,transparent)}
.hover\:bg-primary\/90:hover{background-color:color-mix(in srgb,var(--color-primary) 90%,transparent)}

/* Borders & Shadows */
.rounded-xl{border-radius:.75rem}
.rounded-md{border-radius:.5rem}
.border{border:1px solid rgba(255,255,255,.08)}
.border-primary{border-color:var(--color-primary)!important}
.shadow-xs{box-shadow:var(--shadow-xs)}
.shadow-sm{box-shadow:var(--shadow-sm)}
.shadow-primary{box-shadow:var(--shadow-primary)}

/* Interactions */
.transition-all{transition:all .2s ease}
.outline-none{outline:none}
.focus-visible\:ring-\[3px\]:focus-visible{box-shadow:0 0 0 3px var(--color-ring)}
.focus-visible\:ring-ring\/50:focus-visible{box-shadow:0 0 0 3px rgba(59,130,246,.5)}
.focus-visible\:border-ring:focus-visible{border-color:var(--color-ring)}
.disabled\:pointer-events-none:disabled{pointer-events:none}
.disabled\:opacity-50:disabled{opacity:.5}
.aria-invalid\:ring-destructive\/20[aria-invalid=true]{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive) 20%,transparent)}
.dark\:aria-invalid\:ring-destructive\/40[aria-invalid=true]{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive) 40%,transparent)}
.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--color-destructive)}
.items-end {align-items:flex-end;}
.w-full {width:100%;}
.h-full {height: 100%;}
.overflow-x-scroll {overflow-x:scroll;}
.justify-content-center {justify-content:center;}
.flex-wrap {flex-wrap: wrap;}
.gap-x-4 {column-gap:24px;}
.gap-y-0 {row-gap:0px;}
.pb-36 {padding-bottom:36px;}
/* SVG handling */
[&_svg]:pointer-events-none svg{pointer-events:none}
[&_svg]:shrink-0 svg{flex-shrink:0}
[&_svg\:not\(\[class*='size-'\]\)]:size-4 svg:not([class*='size-']){width:1rem;height:1rem}
table{
  width: 100%;
  border-collapse: collapse;
  position: relative;
}}
table:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
thead {
    position: relative;
    height: 40px;
}
thead:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: 100%;
}
tr {
  position: relative;
  border-top: 1px solid #ddd;
  height: 54px;
}
tr:hover td{
    background: #fff;
    cursor: default;
}
td {
  position: relative;
  white-space: nowrap;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 0.5rem;
  font-size: .875rem;
  vertical-align: middle;
}
thead th {
  text-align: start;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background: var(--table-header-bg);
}
thead th:first-child {
    padding-left: 1rem;
    padding-right: 0.5rem;
}
thead th:not(:first-child,:last-child) {
    padding-right: 0.5rem;
}
thead th:last-child {
  padding-right:2rem;
  position:sticky;
  right:0;
  background: var(--table-header-bg);
}
thead th:first-child {
  position:sticky;
  left:0;
  background: var(--table-header-bg);
  z-index:1;
}
td:not(:last-of-type,:first-of-type) {
  min-width: 5rem;
}
 td:first-of-type {
    padding-left: 1rem;
    padding-right: 0.5rem;
}
td:last-of-type {
  padding-right: 0.5rem;
  position: sticky;
  right: 0;
  background: var(--table-body-bg);
}
td:first-of-type {
  padding-right: 0.5rem;
  position: sticky;
  left: 0;
  background: var(--table-body-bg);
  z-index:1;
}
td div {
    display: flex;
    flex-direction: column;
}

.button {white-space: nowrap;}

/* Responsive - Mobile first (below 768px) */
@media (max-width:767px){
  .max-md\:flex-col{flex-direction:column}
}

/* Responsive - Small to Medium only (640px to 767px) */
@media (min-width:640px) and (max-width:767px){
  .sm\:max-md\:mx-auto{margin-left:auto;margin-right:auto}
  .sm\:max-md\:w-sm{width:24rem}
}

/* Responsive - Below 1024px */
@media (max-width:1023px){
  .max-lg\:flex-col{flex-direction:column}
  .max-lg\:gap-2{gap:.5rem}
}