/*
    The homepage. Loaded after site.css.

    This page used to load all of Bootstrap (230 KB of render-blocking CSS on the most
    important page of the site) for nothing but the reboot's default spacing. The handful of
    reboot rules its layout was tuned against are restated just below instead. The style=""
    attributes the markup used to carry are the modifier classes marked below.
*/

body { line-height: 1.6; }
h1, h2, h3 { font-weight: 500; line-height: 1.2; margin-bottom: .5rem; }
p { margin-bottom: 1rem; }
strong { font-weight: bolder; }

/* ── HERO ── */
.hero {
  padding: 100px 5vw 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  z-index: 0;
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #e8f0fe 0%, transparent 70%);
  pointer-events: none;
}
/* Above the wash. The fade-up animation used to do this by accident (a running transform makes
   a stacking context); with reduced motion there is no animation, and the wash painted over
   the headline and washed it out. */
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #eff6ff; border: 1px solid #bfdbfe;
  color: var(--blue); font-size: .8rem; font-weight: 600;
  padding: 5px 14px; border-radius: 9999px;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 28px;
  animation: fadeUp .6s ease both;
}
.hero-eyebrow-dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  max-width: 820px; margin: 0 auto 24px;
  animation: fadeUp .7s .1s ease both;
}
.hero h1 em {
  font-style: italic; color: var(--blue);
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--gray);
  max-width: 580px; margin: 0 auto 40px;
  line-height: 1.7; font-weight: 400;
  animation: fadeUp .7s .2s ease both;
}
.hero-actions {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap;
  animation: fadeUp .7s .3s ease both;
}
.btn-primary {
  background: var(--blue); color: #fff;
  padding: 14px 32px; border-radius: 8px;
  font-weight: 600; font-size: 1rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(13,110,253,.25);
}
.btn-primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,110,253,.3); }
.btn-ghost {
  background: transparent; color: var(--navy);
  padding: 14px 28px; border-radius: 8px;
  font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1.5px solid var(--light-border);
  transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: #94a3b8; background: var(--off-white); }

/* hero visual */
.hero-visual {
  margin-top: 72px;
  animation: fadeUp .8s .4s ease both;
  position: relative;
}
.hero-card {
  max-width: 820px; margin: 0 auto;
  background: var(--navy);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(15,26,43,.18), 0 4px 16px rgba(0,0,0,.1);
}
.hero-card-header {
  background: #1a2940;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 8px;
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-r { background: #ff5f57; }
.dot-y { background: #febc2e; }
.dot-g { background: #28c840; }
.hero-card-header span {
  margin-left: auto; font-size: .75rem; color: #7d8fa9;
  font-family: monospace; letter-spacing: .05em;
}
.hero-card-body { padding: 28px 28px 20px; }
.access-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 8px;
  font-size: .85rem;
}
.access-row-label { display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-weight: 500; }
.access-row-label .pkg-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
/* The three icon tiles were colored with style="" attributes; the CSP has no
   'unsafe-inline' for styles, so each color is a modifier instead. */
.pkg-icon--blue  { background: rgba(13,110,253,.15); color: #60a5fa; }
.pkg-icon--amber { background: rgba(251,191,36,.1);  color: #fbbf24; }
.pkg-icon--slate { background: rgba(100,116,139,.1); color: #8a9bb5; }
.access-row-meta { display: flex; align-items: center; gap: 8px; }
.badge-active { background: rgba(0,200,180,.15); color: var(--teal); padding: 3px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.badge-pending { background: rgba(251,191,36,.12); color: #fbbf24; padding: 3px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.badge-expired { background: rgba(100,116,139,.18); color: #a3b1c6; padding: 3px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.timer { font-size: .72rem; color: #8a9bb5; font-family: monospace; }
.row-bg-1 { background: rgba(255,255,255,.04); }
.row-bg-2 { background: rgba(13,110,253,.08); }
.divider-line { height: 1px; background: rgba(255,255,255,.06); margin: 16px 0; }
.divider-line--inset { margin: 0 28px; }
.hero-card-footer {
  padding: 14px 28px 20px;
  display: flex; gap: 24px; align-items: center;
}
.stat-pill {
  display: flex; flex-direction: column; align-items: flex-start;
}
.stat-pill-val { font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1; }
.stat-pill-lbl { font-size: .72rem; color: var(--on-navy-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
.stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.08); }

/* ── PROBLEM ── */
.problem {
  padding: 100px 5vw;
  background: var(--off-white);
  border-top: 1px solid var(--light-border);
  border-bottom: 1px solid var(--light-border);
}
.problem-inner { max-width: 1100px; margin: 0 auto; }
/* The section paragraph rules below exclude the eyebrow with :not(), because they used to
   restyle it: half the page's eyebrows rendered as grey 16px body text, the rest as this. */
.section-eyebrow {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--navy); margin-bottom: 20px;
}
.problem-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; max-width: 1100px; margin: 60px auto 0;
}
.pain-list { display: flex; flex-direction: column; gap: 20px; }
.pain-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; background: #fff; border-radius: 10px;
  border: 1px solid var(--light-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pain-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: #fff0f0; color: var(--red-text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px;
}
.pain-text h3 { font-size: .95rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.pain-text p { font-size: .85rem; color: var(--gray); line-height: 1.5; margin-bottom: 0; }
.problem-right .section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.problem-right p:not(.section-eyebrow) { font-size: 1rem; color: var(--gray); line-height: 1.75; margin-bottom: 24px; }
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--navy); }
.check-mark { color: var(--teal-text); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }

/* ── THE TICKET TREADMILL ── */
.tickets { padding: 100px 5vw; max-width: 1100px; margin: 0 auto; }
.tickets-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.tickets-header p:not(.section-eyebrow) { font-size: 1.05rem; color: var(--gray); margin-top: 16px; line-height: 1.7; }
/* The closing paragraph under the before/after columns reuses the header's measure. */
.tickets-header--after { margin: 56px auto 0; }
.tickets-guide { margin-top: 18px; }
.tickets-guide a { color: var(--blue); font-weight: 600; }
.ticket-quote {
  max-width: 640px; margin: 0 auto 56px;
  padding: 24px 28px; background: #fff;
  border: 1px solid var(--light-border); border-left: 3px solid #ef4444;
  border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ticket-quote .label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 10px;
}
.ticket-quote p {
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--navy); line-height: 1.5; font-style: italic;
}
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.compare-col {
  padding: 28px; border-radius: 12px; border: 1px solid var(--light-border); background: #fff;
}
.compare-col.after { border-color: rgba(20,184,166,.35); background: linear-gradient(180deg,#fff, #f6fffd); }
.compare-col h3 {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 20px;
}
.compare-col.before h3 { color: var(--red-text); }
.compare-col.after h3 { color: var(--teal-text); }
.flow { display: flex; flex-direction: column; gap: 0; }
.flow-step {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .92rem; color: var(--navy); line-height: 1.5; padding: 9px 0;
}
.flow-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; margin-top: 1px;
}
.compare-col.before .flow-num { background: #fff0f0; color: var(--red-text); }
.compare-col.after .flow-num { background: #ecfdf9; color: var(--teal-text); }
.flow-loop {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--light-border);
  font-size: .85rem; color: var(--gray); line-height: 1.6;
}
.compare-col.before .flow-loop strong { color: var(--red-text); }
.compare-col.after .flow-loop strong { color: var(--teal-text); }
@media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; } }

/* ── FEATURES ── */
.features {
  padding: 100px 5vw;
  max-width: 1200px; margin: 0 auto;
}
.features-header { text-align: center; max-width: 680px; margin: 0 auto 72px; }
.features-header p:not(.section-eyebrow) { font-size: 1.05rem; color: var(--gray); margin-top: 16px; line-height: 1.7; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.feature-card {
  padding: 32px 28px;
  border: 1px solid var(--light-border);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  position: relative; overflow: hidden;
}
.feature-card::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  opacity: 0; transition: opacity .2s;
}
.feature-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.08); transform: translateY(-3px); border-color: #cbd5e1; }
.feature-card:hover::after { opacity: 1; }
.feature-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: #eff6ff; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 20px;
}
.feature-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.feature-card p { font-size: .88rem; color: var(--gray); line-height: 1.65; }
.feature-card .tag {
  display: inline-block; margin-top: 16px;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--blue);
  background: #eff6ff; padding: 3px 10px; border-radius: 9999px;
}

/* ── AI AGENTS ── */
.agents {
  background: var(--navy);
  padding: 100px 5vw;
}
.agents-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.agents .problem-inner { max-width: 1100px; margin: 0 auto; }
/* Teal only on the navy sections. Unscoped, this turned every eyebrow on the page teal,
   which is 2:1 on the light sections; the original front page scoped it, the port lost it. */
.agents .section-eyebrow, .integrations .section-eyebrow { color: var(--teal); }
.agents .section-title {
  color: var(--white);
  max-width: 800px; margin-left: auto; margin-right: auto;
}
.agents .section-title em { font-style: italic; color: var(--teal); }
.agents-lede {
  font-size: 1.02rem; color: #94a3b8; line-height: 1.75;
  max-width: 680px; margin: 0 auto 18px;
}
.agents-lede strong { color: #cbd5e1; font-weight: 600; }
.agent-chips {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin-top: 30px;
}
.agent-chip {
  font-size: .8rem; font-weight: 500; color: #94a3b8;
  background: #1a2940; border: 1px solid #243450;
  padding: 6px 14px; border-radius: 9999px;
}
.agent-math {
  margin: 48px auto 0; max-width: 700px;
  background: #1a2940; border: 1px solid #243450;
  border-radius: 14px; padding: 34px 32px 28px;
}
.agent-math-row {
  display: flex; align-items: center; justify-content: center;
  gap: 36px; flex-wrap: wrap;
}
.agent-math-cell {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 150px;
}
.agent-math-val {
  font-family: var(--font-display); font-size: 2.5rem;
  line-height: 1; color: #fff;
}
.agent-math-cell.is-good .agent-math-val { color: var(--teal); }
.agent-math-lbl {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--on-navy-muted);
}
.agent-math-note { font-size: .82rem; color: var(--on-navy-muted); }
.agent-math-arrow { font-size: 1.5rem; color: #6f84a3; line-height: 1; }
.agent-math-result {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 1rem; color: #94a3b8; line-height: 1.6;
}
/* Guide links inside the navy section: teal, because blue does not read on navy. */
.agent-guide { margin-top: 18px; }
.agent-guide + .agent-guide { margin-top: 8px; }
.agent-guide a { color: var(--teal); font-weight: 600; }
.agent-math-result strong {
  color: var(--teal); font-weight: 700; font-size: 1.3rem;
}

/* ── INTEGRATIONS ── */
.integrations {
  background: var(--navy);
  padding: 90px 5vw;
  text-align: center;
}
.integrations .problem-inner { max-width: 1100px; margin: 0 auto; }
.integrations .section-title { color: var(--white); }
.integrations-sub { font-size: 1rem; color: var(--on-navy); margin-top: 14px; max-width: 500px; margin-left: auto; margin-right: auto; }
.integration-grid {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 20px; margin-top: 56px;
}
.integration-card {
  background: #1a2940;
  border: 1px solid #243450;
  border-radius: 12px; padding: 28px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 180px;
  transition: border-color .2s, background .2s;
}
.integration-card:hover { border-color: #334e6e; background: #1e3050; }
a.integration-card { text-decoration: none; }
a.integration-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.int-guide { font-size: .7rem; font-weight: 600; color: var(--teal); opacity: .75; transition: opacity .2s; }
a.integration-card:hover .int-guide { opacity: 1; }
.int-logo {
  width: 52px; height: 52px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
/* Each platform's tile tint — formerly style="" attributes. */
.int-logo--ad     { background: rgba(13,110,253,.15); }
.int-logo--github { background: rgba(255,255,255,.06); }
.int-logo--entra  { background: rgba(0,120,212,.15); }
.int-logo--okta   { background: rgba(0,125,193,.15); }
.int-logo--google { background: rgba(255,255,255,.06); }
.int-logo--aws    { background: rgba(255,153,0,.15); }
.int-name { font-size: .85rem; font-weight: 600; color: #cbd5e1; }
.int-type { font-size: .72rem; color: var(--on-navy-muted); }
/* Six cards are 6x180 + 5x20 = 1180px of row, and the section pads 5vw a side, so
   they only share a line above ~1310px. Between there and the point where five stop
   fitting, the sixth would sit alone under a row of five. Capping the grid at three
   cards wide breaks it 3+3 instead, which is a layout rather than an accident. */
@media (max-width: 1310px) {
  .integration-grid { max-width: 580px; margin-left: auto; margin-right: auto; }
}
.integration-note {
  margin-top: 48px; font-size: .85rem; color: var(--on-navy-muted);
}
.integration-note strong { color: var(--on-navy); }

/* ── SOCIAL PROOF BAR ── */
.proof-bar {
  border-top: 1px solid var(--light-border);
  border-bottom: 1px solid var(--light-border);
  padding: 22px 5vw;
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
  background: var(--off-white);
}
.proof-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--gray); }
.proof-item svg { color: var(--teal-text); }

/* ── GUIDES ── */
.guides { background: var(--off-white); border-top: 1px solid var(--light-border); padding: 90px 5vw; }
.guides-inner { max-width: 1100px; margin: 0 auto; }
.guides-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.guides-header p:not(.section-eyebrow) { font-size: 1rem; color: var(--gray); margin-top: 14px; line-height: 1.7; }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.guide-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px; background: #fff;
  border: 1px solid var(--light-border); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.guide-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.08); transform: translateY(-3px); border-color: #cbd5e1; }
.guide-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.guide-kind { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.guide-title { font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--navy); }
.guide-note { font-size: .88rem; color: var(--gray); line-height: 1.6; }
.guides-all { text-align: center; margin-top: 36px; }
.guides-all a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── FINAL CTA ── */
.final-cta {
  padding: 100px 5vw;
  text-align: center;
  background: var(--white);
}
.final-cta .section-title { margin-bottom: 16px; }
.final-cta p:not(.section-eyebrow) { font-size: 1.05rem; color: var(--gray); max-width: 480px; margin: 0 auto 36px; line-height: 1.7; }
/* Sits under the buttons, not above them: it answers an objection for the reader who did
   not click, and must not compete with the two actions for the reader who did. */
.final-cta p.final-cta-note { font-size: .92rem; color: var(--gray); max-width: 520px; margin: 26px auto 0; line-height: 1.65; }
.final-cta-note a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.final-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hidden only where the script that reveals them can run (reveal.js) and the reader has not
   asked for less motion. With JavaScript off, or in a browser that does not understand the
   scripting media feature, the content is simply there: a fade-in is decoration, and it must
   never be the reason a section is invisible. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
}

/* The fade-ups are decoration. A reader who asked for less motion gets the page as it
   ends up, immediately. */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero h1, .hero-sub, .hero-actions, .hero-visual { animation: none; }
  .btn-primary:hover, .feature-card:hover, .guide-card:hover { transform: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-card-footer { flex-wrap: wrap; gap: 16px; }
  .agent-math-row { gap: 20px; }
  .agent-math-arrow { transform: rotate(90deg); }
}