/* Critical CSS to prevent page drift */
*{box-sizing:border-box; margin:0; padding:0}
:root{
  --bg-start:#000510; --bg-mid:#001020; --bg-end:#000818;
  --accent:#4A90E2; --accent-2:#6BA3F0; --accent-glow:rgba(74,144,226,.15);
  --text:#FFFFFF; --text-sub:#E8EDF5; --muted:#9CA8B8;
  --card:#0A0F1E; --card-strong:#0F1525; --card-hover:#131A2A;
  --stroke:rgba(255,255,255,.06); --stroke-strong:rgba(255,255,255,.12);
  --radius:20px; --radius-sm:12px; --radius-lg:24px;
  --shadow:0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-hover:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --spacing-xs:.5rem; --spacing-sm:1rem; --spacing-md:1.5rem; --spacing-lg:2.5rem; --spacing-xl:4rem;
}
html{height:100%; overflow-x:hidden; scroll-padding-top:90px}
body{
  margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text); background:radial-gradient(ellipse at top, var(--bg-mid), var(--bg-start)), var(--bg-end);
  background-attachment:fixed; height:100%; overflow-x:hidden; width:100%; max-width:100vw; line-height:1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main{
  flex: 1 0 auto;
  padding-bottom: var(--spacing-xl);
}
footer{
  flex-shrink: 0;
  margin-top: auto;
  padding: 1rem !important; /* Override intelygence.css padding */
}
.container{width:100%; max-width:min(1280px,94vw); margin-inline:auto; padding:0.2rem clamp(1.5rem, 5vw, 3rem) 4rem;}
.container > * { margin-bottom: 0.2rem; }
header.site{position:sticky; top:0; z-index:100; width:100%; background:linear-gradient(to bottom, rgba(10,15,30,.85), rgba(10,15,30,.4)); border-bottom:1px solid var(--stroke)}
img{max-width:100%; display:block; height:auto}

/* Grid layout - override conflicts from both intelygence.css and surfaces */
.grid{display:grid; gap:var(--spacing-lg); width:100%; max-width:100%}
.grid.cols-2{grid-template-columns:1fr} /* Mobile first */
@media(min-width:900px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}}

/* Allow card effects to bleed (shadows, glows, etc) */
#assessments-list{
  width:100%;
  max-width:100%;
  overflow: visible; /* Allow effects to extend beyond boundaries */
  padding: 0.5rem; /* Add padding to prevent clipping at edges */
}
#assessments-list > * {
  width:100%;
  max-width:100%;
  min-width:0; /* Prevents flex/grid items from overflowing */
}

/* Assessment-specific styles */
/* Ensure product cards have consistent layout */
.pack[data-surface="product-card"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible; /* Allow surfaces effects to bleed */
}

/* Fix gem tag text wrapping - override surfaces framework */
.pack[data-surface="product-card"] [data-surface="tag"] span {
  white-space: normal !important; /* Override surfaces framework nowrap */
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
  text-align: center;
}

/* Ensure tag container allows wrapping */
.pack[data-surface="product-card"] [data-surface="tag"] {
  min-height: 2.5em;
  max-width: 100%;
}

/* Assessment details container */
.assessment-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: auto;
  flex: 1;
}

/* Detail items with icon guidance */
.detail-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
}

.detail-icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--accent);
  opacity: 0.8;
}

.detail-item p {
  margin: 0;
  color: var(--text-sub);
  line-height: 1.6;
  font-size: 0.95rem;
}

.detail-benefits {
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--stroke);
  margin-top: var(--spacing-xs);
}

.detail-benefits .detail-icon {
  color: var(--accent-2);
}

.detail-benefits p {
  font-size: 0.93rem;
  opacity: 0.9;
}

/* Card action area */
.card-action {
  margin-top: auto;
  padding-top: var(--spacing-md);
}

/* Ensure no width issues */
.pack[data-surface="product-card"] * {
  max-width: 100%;
  box-sizing: border-box;
}