/* ── Escape Room Landing — page-specific styles ─────────────────────────── */
/* Light-theme page. Inherits paper palette from css/styles.css.              */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.er-hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 80px;
  overflow: visible;
  text-align: center;
}
.er-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.er-hero-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(29,78,216,0.07);
  border: 1px solid rgba(29,78,216,0.18);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-2);
  margin-bottom: 30px;
}
.er-hero-h1 {
  font-family: var(--ff-display);
  font-size: clamp(56px, 7.8vw, 108px);
  font-weight: 600;
  line-height: 1.01;
  letter-spacing: -0.035em;
  color: var(--t-1);
  margin-bottom: 28px;
  overflow: visible;
  padding-bottom: 0.04em;
}
.er-hero-sub {
  font-size: 18px;
  color: var(--t-3);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 36px;
}
.er-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Shared section header helpers ──────────────────────────────────────── */
.er-sect-eyebrow { margin-bottom: 10px; }
.er-sect-h2 { margin-bottom: 16px; }
.er-sect-lede { margin-bottom: 48px; }

/* ── Pain points ────────────────────────────────────────────────────────── */
.er-pain { background: #fff; }
.er-pain-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.er-pain-card {
  background: rgba(247,246,241,0.9);
  border: 1px solid rgba(10,10,15,0.08);
  border-left: 3px solid var(--b-1);
  border-radius: 12px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.er-pain-title {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--t-1);
}
.er-pain-desc {
  font-size: 14px;
  color: var(--t-3);
  line-height: 1.65;
}

/* ── Feature rows ───────────────────────────────────────────────────────── */
.er-feat--a { background: #fff; }
.er-feat--b { background: #f2f0ea; }
.er-feat-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.er-feat-inner--flip { direction: rtl; }
.er-feat-inner--flip > * { direction: ltr; }

.er-feat-label {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(109,40,217,0.08);
  border: 1px solid rgba(109,40,217,0.20);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b-4);
  margin-bottom: 18px;
}
.er-feat-label--b {
  background: rgba(29,78,216,0.08);
  border-color: rgba(29,78,216,0.20);
  color: var(--b-2);
}
.er-feat-h2 {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--t-1);
  margin-bottom: 16px;
  overflow: visible;
  padding-bottom: 0.02em;
}
.er-feat-body {
  font-size: 16px;
  color: var(--t-3);
  line-height: 1.7;
  margin-bottom: 28px;
}
.er-feat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.er-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10,10,15,0.04);
  border: 1px solid rgba(10,10,15,0.09);
  font-size: 12.5px;
  color: var(--t-3);
}
.er-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b-2);
  flex-shrink: 0;
}
.er-pill-dot--p { background: var(--b-4); }

/* ── Feature visual frame ────────────────────────────────────────────────── */
.er-visual-frame {
  background: rgba(10,10,15,0.02);
  border: 1px solid rgba(10,10,15,0.08);
  border-radius: 16px;
  padding: 28px 24px;
}

/* ── DIO diagram ─────────────────────────────────────────────────────────── */
.er-dio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
.er-dio-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.er-dio-in-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  align-items: flex-end;
}
.er-dio-out-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  align-items: flex-start;
}
.er-dio-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.er-dio-node {
  background: #fff;
  border: 1px solid rgba(10,10,15,0.12);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 11.5px;
  font-family: var(--ff-mono);
  color: var(--t-3);
  white-space: nowrap;
}
.er-dio-node--main {
  background: linear-gradient(135deg, rgba(29,78,216,0.08), rgba(109,40,217,0.07));
  border: 1.5px solid rgba(29,78,216,0.25);
  border-radius: 10px;
  padding: 14px 22px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--t-1);
  text-align: center;
}
.er-dio-hline {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(10,10,15,0.22) 0px,
    rgba(10,10,15,0.22) 4px,
    transparent 4px,
    transparent 8px
  );
  align-self: center;
  min-width: 8px;
}
.er-dio-vline {
  width: 1px;
  height: 24px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(10,10,15,0.22) 0px,
    rgba(10,10,15,0.22) 4px,
    transparent 4px,
    transparent 8px
  );
}
.er-dio-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 0 4px;
}
.er-dio-col-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--t-5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Dialogue bubbles ────────────────────────────────────────────────────── */
.er-dialogue {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.er-bubble-wrap { display: flex; flex-direction: column; max-width: 88%; }
.er-bubble-wrap--guest { align-self: flex-start; }
.er-bubble-wrap--char  { align-self: flex-end;   }
.er-bubble-label {
  font-size: 10px;
  font-family: var(--ff-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--t-4);
}
.er-bubble-wrap--char .er-bubble-label { text-align: right; color: var(--b-2); }
.er-bubble {
  padding: 11px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-2);
}
.er-bubble--guest {
  background: rgba(10,10,15,0.05);
  border: 1px solid rgba(10,10,15,0.09);
  border-radius: 12px 12px 12px 3px;
}
.er-bubble--char {
  background: linear-gradient(135deg, rgba(29,78,216,0.09), rgba(109,40,217,0.09));
  border: 1px solid rgba(29,78,216,0.18);
  border-radius: 12px 12px 3px 12px;
}

/* ── Jaw movement diagram ────────────────────────────────────────────────── */
.er-jaw-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.er-jaw-head-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.er-jaw-upper {
  width: 88px;
  height: 50px;
  background: linear-gradient(135deg, rgba(29,78,216,0.10), rgba(109,40,217,0.08));
  border: 1.5px solid rgba(29,78,216,0.22);
  border-radius: 44px 44px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.er-jaw-upper-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--b-2);
  letter-spacing: 0.06em;
}
.er-jaw-lower {
  width: 88px;
  height: 20px;
  background: rgba(109,40,217,0.07);
  border: 1.5px solid rgba(109,40,217,0.20);
  border-radius: 0 0 30px 30px;
  border-top: none;
  transform-origin: top center;
  animation: er-jaw 1.4s ease-in-out infinite;
}
@keyframes er-jaw {
  0%,100% { height: 5px;  }
  30%     { height: 22px; }
  60%     { height: 8px;  }
  80%     { height: 26px; }
}
.er-jaw-caption {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--t-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.er-jaw-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.er-jaw-spec {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--t-3);
}
.er-jaw-spec-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b-4);
  flex-shrink: 0;
}

/* ── Use cases ──────────────────────────────────────────────────────────── */
.er-uc { background: #fff; }
.er-uc-header { margin-bottom: 48px; }
.er-uc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.er-uc-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.er-uc-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 20px rgba(10,10,15,0.07);
}
.er-uc-title {
  font-family: var(--ff-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--t-1);
}
.er-uc-desc {
  font-size: 13.5px;
  color: var(--t-3);
  line-height: 1.65;
}

/* ── Capabilities bar ───────────────────────────────────────────────────── */
.er-caps {
  background: var(--bg-elev2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 56px;
}
.er-caps-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.er-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(10,10,15,0.09);
  font-size: 12.5px;
  color: var(--t-2);
  font-weight: 500;
}
.er-cap-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b-2);
  flex-shrink: 0;
}
.er-cap-dot--p { background: var(--b-4); }

/* ── CTA section ────────────────────────────────────────────────────────── */
.er-cta-sect {
  background: linear-gradient(135deg, rgba(29,78,216,0.05), rgba(109,40,217,0.05));
  text-align: center;
}
.er-cta-inner {
  max-width: 680px;
  margin: 0 auto;
}
.er-cta-h2 {
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--t-1);
  margin-bottom: 18px;
  overflow: visible;
  padding-bottom: 0.02em;
}
.er-cta-sub {
  font-size: 17px;
  color: var(--t-3);
  line-height: 1.65;
  margin-bottom: 36px;
}
.er-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .er-feat-inner { gap: 48px; }
  .er-uc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .er-pain-cards { grid-template-columns: 1fr; }
  .er-feat-inner, .er-feat-inner--flip { grid-template-columns: 1fr; direction: ltr; gap: 36px; }
  .er-uc-grid { grid-template-columns: repeat(2, 1fr); }
  .er-caps { padding: 24px 20px; }
  .er-hero-h1 { font-size: clamp(44px, 12vw, 80px); }
}
@media (max-width: 480px) {
  .er-uc-grid { grid-template-columns: 1fr; }
}