/* ─────────────────────────────────────────────────────────────────────────────
   AccelaStudy AI Enterprise — site-specific component layer.

   Loaded AFTER the shared /css/tailwind-compiled.css and /css/style.css via
   site.yml > Custom.ExtraStylesheets. It contains ONLY what is unique to this
   site. Everything else — design tokens, .as-card, .bg-gradient-accent,
   .text-gradient, focus rings, skip link, scrollbar, the theme-aware hero
   swap, .sr-only — now comes from the shared overlay.

   This file exists because enterprise previously shipped its OWN copy of
   style.css at the same path as the shared one. In the SharedContent overlay
   the local file wins, so that copy silently shadowed the shared stylesheet
   and froze this site on an older token set (dark background 8% vs 14%, accent
   50% vs 62%, muted-foreground 40% vs 30%) — which is precisely why the site
   stopped matching its siblings. Nothing generic belongs in here.
   ───────────────────────────────────────────────────────────────────────── */

/* Hero section */
.ent-hero {
  position: relative;
  overflow: hidden;
  padding: 7rem 0 5rem;
}
.ent-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, hsla(var(--blue) / 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, hsla(var(--accent) / 0.1) 0%, transparent 40%);
  pointer-events: none;
}

/* Page hero */
.ent-page-hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 3rem;
  border-bottom: 1px solid hsl(var(--border));
}

/* Section eyebrow */
.ent-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: hsl(var(--accent));
  margin-bottom: 0.75rem;
}

/* Comparison table */
.ent-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
}
.ent-table th {
  padding: 0.875rem 1.25rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border));
}
.ent-table td {
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  border-bottom: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}
.ent-table tr:last-child td { border-bottom: none; }
.ent-table td:last-child { font-weight: 600; color: hsl(var(--accent)); }
.ent-table tr:last-child td { font-weight: 700; }

/* ROI callout — solid white on the dark gradient band, for WCAG 1.4.3 AA */
.ent-roi-number {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

/* Confusion pair */
.ent-confusion-pair {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.ent-confusion-node {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
}
.ent-confusion-arrow {
  color: hsl(var(--accent));
  font-size: 1.2rem;
}

/* Step visual box */
.ent-visual-box {
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Path comparison */
.ent-path-col-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.ent-path-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}
.ent-path-dot {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Legal content */
.ent-legal h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: hsl(var(--foreground));
}
.ent-legal h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
}
.ent-legal p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.ent-legal ul, .ent-legal ol {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}
.ent-legal ul { list-style: disc; }
.ent-legal ol { list-style: decimal; }
.ent-legal li {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 0.375rem;
  color: hsl(var(--muted-foreground));
}
.ent-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.85rem;
  border: 1px solid hsl(var(--border));
}
.ent-legal table th,
.ent-legal table td {
  padding: 0.625rem 0.875rem;
  border: 1px solid hsl(var(--border));
  text-align: left;
}
.ent-legal table th {
  background: hsl(var(--muted));
  font-weight: 600;
  color: hsl(var(--foreground));
}
.ent-legal table td {
  color: hsl(var(--muted-foreground));
}
.ent-legal a {
  color: hsl(var(--accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ent-legal a:hover {
  text-decoration-thickness: 2px;
}

/* The privacy page carries five wide data tables. At 375px they pushed the
   whole document past the viewport — the one page on this site that failed the
   mobile-overflow gate. `display: block` turns the table itself into the
   scroll container, so the table scrolls sideways and the page does not. Kept
   to narrow viewports only, since block display gives up the table's own
   column-width distribution. */
@media (max-width: 640px) {
  .ent-legal table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Industry compliance tag */
.ent-tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: hsla(var(--accent) / 0.1);
  color: hsl(var(--accent));
  border: 1px solid hsla(var(--accent) / 0.2);
}

/* Compliance list item */
.ent-compliance-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  background: hsla(var(--accent) / 0.05);
  border: 1px solid hsla(var(--accent) / 0.15);
}
.ent-compliance-item::before {
  content: '\1F512';
  font-size: 0.85rem;
}

/* Calculator */
.ent-calc-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
}
.ent-calc-field input,
.ent-calc-field select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  transition: border-color 0.2s;
}
.ent-calc-field input:focus,
.ent-calc-field select:focus {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsla(var(--accent) / 0.25);
}
.ent-calc-hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* Benchmark bar */
.ent-bench-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted));
  position: relative;
  overflow: hidden;
}
.ent-bench-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.6s ease;
}
.ent-bench-fill.green { background: hsl(var(--success)); }
.ent-bench-fill.blue { background: hsl(var(--accent)); }
.ent-bench-fill.gold { background: hsl(var(--warning)); }
.ent-bench-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: calc(100% + 8px);
  background: hsl(0 72% 51%);
}

/* Demo form */
.ent-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}
.ent-form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.ent-form-group input,
.ent-form-group select,
.ent-form-group textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  transition: border-color 0.2s;
}
.ent-form-group input:focus,
.ent-form-group select:focus,
.ent-form-group textarea:focus {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsla(var(--accent) / 0.25);
}
.ent-form-group textarea {
  resize: vertical;
  min-height: 100px;
}
/* --destructive is lifted on dark surfaces so the required marker and inline
   field errors stay at 4.5:1 against the dark card. */
.ent-required { color: hsl(var(--destructive)); margin-left: 2px; }
.dark .ent-required { color: hsl(0 72% 68%); }