/* ============================
   Pain Points – Bento Grid V4
   Staggered boundaries, FILLED cards
   ============================ */

.pain-section-wrap {
  position: relative;
  z-index: 3;
  padding-top: 0;
  padding-bottom: 0;
}

/* Smooth shadow-to-light gradient below the rounded pain section */
.pain-section-wrap::after {
  content: '';
  display: block;
  height: 120px;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.02) 30%,
      transparent 100%);
  pointer-events: none;
  margin-top: -1px;
  /* overlap rounded corner anti-alias seam */
}

.section-pain {
  position: relative;
  overflow: hidden;
  background: var(--gradient-dark-section, #0a0a0f);
  color: var(--text-dark);
  border-radius: 40px;
  box-shadow: 0 -12px 50px rgba(0, 0, 0, .15), 0 12px 50px rgba(0, 0, 0, .15);
  padding: 64px 0 56px;
  /* "Other AI" font — every child inherits unless overridden */
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pain-inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

/* ── Grid ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
    "cfg cfg cfg cfg cfg cfg set set set lim lim lim"
    "cfg cfg cfg cfg cfg cfg set set set lim lim lim"
    "cfg cfg cfg cfg cfg cfg trm trm trm trm trm trm"
    "cst cst cst cst cst sec sec sec act act act act"
    "cst cst cst cst cst sec sec sec act act act act"
    "sup sup sup sup dev dev dev dev dev dev dev dev";
  gap: 8px;
  margin-top: 48px;
  margin-bottom: 28px;
}

.bento-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: left;
  visibility: hidden;
  /* GSAP autoAlpha owns visibility — no CSS opacity conflict */
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.25s ease, border-color 0.25s ease;
  will-change: transform, opacity;
}

.bento-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.bento-setup {
  grid-area: set;
}

.bento-terminal {
  grid-area: trm;
}

.bento-config {
  grid-area: cfg;
}

.bento-cost {
  grid-area: cst;
}

.bento-acts {
  grid-area: dev;
}

.bento-security {
  grid-area: sec;
}

.bento-limit {
  grid-area: lim;
}

.bento-support {
  grid-area: sup;
}

.bento-devs {
  grid-area: act;
}

.bento-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 8px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Scene fills remaining space */
.bento-scene {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

.blink {
  animation: cursorBlink 1s step-end infinite;
}


/* ── SETUP ── bigger content */
.bento-setup {
  padding: 14px 16px;
}

.setup-day {
  font-size: 3.5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  line-height: 1;
}

.setup-counter {
  font-variant-numeric: tabular-nums;
  margin-left: 0.2em;
}

.bento-setup .bento-scene {
  justify-content: center;
  align-items: flex-start;
}

.setup-bar-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
}

.setup-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.5));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.setup-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 10px;
}

.setup-fails {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.setup-fail-item {
  font-size: 0.68rem;
  color: rgba(220, 80, 60, 0.55);
  letter-spacing: 0.01em;
}


/* ── TERMINAL (6×1 wide banner) ── */
.bento-terminal {
  padding: 0;
}

.bento-term-body {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px 16px;
}

.bento-term-body .term-line {
  width: auto;
}

.bento-term-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.term-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.term-dot.red {
  background: #DC503C;
}

.term-dot.yellow {
  background: #E8A22A;
}

.term-dot.green {
  background: #2DB55D;
}

.term-title {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 6px;
}

.bento-term-body {
  padding: 8px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.term-line {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.term-err {
  color: #DC503C;
  font-weight: 700;
}

.term-warn {
  color: #E8A22A;
  font-weight: 700;
}

.term-cursor {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 3px;
}


/* ── CONFIG: Week view grid ── */
.bento-config {
  padding: 14px 16px;
}

.config-week-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.config-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cw-header {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding-bottom: 2px;
}

.cw-cell {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 0.65rem;
  text-align: center;
  padding: 14px 2px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
}

.cw-cell.ok {
  background: rgba(232, 162, 42, 0.25);
  color: rgba(232, 162, 42, 0.9);
}

.cw-cell.fail {
  background: rgba(220, 80, 60, 0.25);
  color: rgba(220, 80, 60, 0.9);
}

.cw-cell.green {
  background: rgba(74, 222, 128, 0.25);
  color: rgba(74, 222, 128, 0.9);
}

.cw-cell.pulse {
  background: rgba(232, 162, 42, 0.2);
  color: rgba(232, 162, 42, 0.8);
}

.cw-cell.skip {
  background: rgba(255, 255, 255, 0.02);
  color: transparent;
}

.cw-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  display: inline-block;
}

.cw-dot.green {
  background: rgba(74, 222, 128, 0.45);
}

.cw-dot.ok {
  background: rgba(232, 162, 42, 0.35);
}

.cw-dot.fail {
  background: rgba(220, 80, 60, 0.4);
}

.cw-dot.skip {
  background: rgba(255, 255, 255, 0.06);
}

.config-legend-left,
.config-stats-left {
  justify-content: flex-start;
}

.config-legend {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
}

.config-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.7);
}

.config-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--ff-mono, 'Courier New', monospace);
}



/* ── COSTS ── */
.bento-cost {
  padding: 14px 16px;
}

.cost-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cost-list {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cost-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.cost-line .cost-num {
  font-family: var(--ff-mono, 'Courier New', monospace);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  font-size: 0.72rem;
}

.cost-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
  flex-shrink: 0;
}

.cost-total {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.cost-total-num {
  font-family: var(--ff-mono, 'Courier New', monospace);
  color: #ef4444;
  font-weight: 700;
  font-size: 0.85rem;
}


/* ── ACTS AS YOU ── two mini-cards */
.bento-acts {
  padding: 10px 14px;
}

.acts-row {
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

.acts-mini-card {
  flex: 0 0 26%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acts-mini-card:last-child {
  flex: 1;
}

.acts-mini-header {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.acts-mini-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.acts-cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E8A22A;
  flex-shrink: 0;
}

.acts-chat-icon {
  font-size: 0.7rem;
}

.acts-cal-title {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.acts-cal-time {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.65);
}

.acts-cal-note {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
}

.acts-chat-incoming {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
}

.acts-chat-outgoing {
  background: rgba(45, 181, 93, 0.15);
  border: 1px solid rgba(45, 181, 93, 0.1);
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
}

.acts-sent {
  font-size: 0.5rem;
  color: rgba(45, 181, 93, 0.6);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.acts-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.acts-msg-right {
  justify-content: flex-end;
}

.acts-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.acts-avatar-client {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.acts-avatar-bot {
  background: rgba(45, 181, 93, 0.2);
  color: rgba(45, 181, 93, 0.8);
}

.acts-mini-error {
  border-color: rgba(220, 80, 60, 0.2);
}

.acts-dot-red {
  background: #DC503C;
}

.acts-note-error {
  color: rgba(220, 80, 60, 0.8);
}


/* ── SECURITY ── compact */
.bento-security {
  padding: 14px 16px;
}

.bento-security .bento-scene {
  justify-content: center;
}

.sec-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sec-line {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
}

.sec-val {
  color: rgba(220, 80, 60, 0.85);
  font-weight: 600;
}

.sec-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #DC503C;
  border: 3px solid #DC503C;
  padding: 8px 20px;
  border-radius: 6px;
  opacity: 1;
  z-index: 2;
}

.sec-leak {
  margin-top: 10px;
  padding: 6px 0;
  text-align: center;
}

.sec-leak-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(220, 80, 60, 0.7);
  font-family: var(--ff-mono, 'Courier New', monospace);
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
}

.sec-leak-label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ── LIMITED USE CASES ── */
.bento-limit {
  padding: 14px 16px;
}

.limit-sub {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.limit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.limit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.limit-chip.available {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.limit-chip.available .limit-chip-icon {
  color: rgba(45, 181, 93, 0.7);
  font-size: 0.6rem;
}

.limit-chip.locked {
  background: rgba(220, 80, 60, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(220, 80, 60, 0.15);
}

.limit-chip.locked .limit-chip-icon {
  font-size: 0.65rem;
  color: rgba(220, 80, 60, 0.7);
}

.limit-chip.locked s {
  text-decoration: line-through;
  text-decoration-color: rgba(220, 80, 60, 0.5);
}

.limit-sep {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 3px 0;
}

.limit-prompt {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.limit-prompt-q {
  display: block;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
}

.limit-prompt-a {
  display: block;
  font-size: 0.62rem;
  color: rgba(220, 80, 60, 0.55);
  font-weight: 600;
  margin-top: 2px;
}


/* ── SUPPORT ── two tickets side-by-side */
.bento-support {
  padding: 12px 16px;
}

.support-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

.support-ticket {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.support-ticket-num {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 1.2rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.support-ticket-subject {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

.support-ticket-wait {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.support-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8A22A;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0.3
  }
}


/* ── CODING EXPERIENCE REQUIRED ── 4×2 vertical */
.bento-devs {
  position: relative;
  padding: 14px 16px;
}

.bento-devs .bento-scene {
  justify-content: center;
  align-items: center;
}

.locked-code {
  font-family: var(--ff-mono, 'Courier New', monospace);
  font-size: 0.68rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  filter: blur(0.5px);
  width: 100%;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(10, 10, 15, 0.35);
}

.locked-overlay svg {
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.7);
}

.locked-overlay span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
}


/* ── Resolve ── */
.pain-resolve {
  margin-top: 32px;
  visibility: hidden;
  /* GSAP autoAlpha owns visibility */
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resolve-text {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.resolve-accent {
  position: relative;
  display: inline-block;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.resolve-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--gradient-1);
  opacity: 0.6;
}


/* ── Mobile ── */
@media (max-width: 768px) {
  .section-pain {
    padding: 44px 0 36px;
  }

  .pain-inner {
    padding: 0 14px;
  }

  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "set    lim"
      "cfg    cfg"
      "cst    sec"
      "act    trm"
      "sup    dev";
    gap: 6px;
    min-height: unset;
  }

  .bento-card {
    visibility: visible;
    opacity: 1;
    padding: 14px 16px;
  }

  .bento-label {
    font-size: 0.65rem;
  }

  .term-line {
    opacity: 1;
  }

  .pain-resolve {
    visibility: visible;
    opacity: 1;
  }

  .setup-day {
    font-size: 1.4rem;
  }

  .resolve-text {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  }

  .sec-stamp {
    opacity: 0.8;
  }

  .config-task {
    width: 80px;
  }
}


/* ════════════════════════════════════════════════════════════
   Pain Section — "Other AI" Font Identity
   Roboto on .section-pain: ALL children inherit automatically.
   .section-h2 and .eyebrow also get Roboto (not brand font).
   Only .resolve-text stays in Young Serif (that’s our brand moment).
   IBM Plex Mono for all tech/code/numeric elements.
   ════════════════════════════════════════════════════════════ */

/* Heading + eyebrow: Roboto ("other AI" style, not brand) */
.section-pain .section-h2,
.section-pain .eyebrow {
  font-family: 'Roboto', sans-serif !important;
}

/* ONLY "We fixed all of that." stays in oneBot brand font */
.section-pain .resolve-text {
  font-family: var(--ff-serif) !important;
}

/* Tech / numeric elements → IBM Plex Mono
   !important needed to beat explicit var(--ff-mono) declarations */
.section-pain .term-title,
.section-pain .term-line,
.section-pain .term-cursor,
.section-pain .cw-header,
.section-pain .cw-cell,
.section-pain .config-stats,
.section-pain .config-stats span,
.section-pain .cost-num,
.section-pain .cost-total-num,
.section-pain .sec-leak-num,
.section-pain .sec-stamp,
.section-pain .setup-day,
.section-pain .support-ticket-num,
.section-pain .acts-cal-time,
.section-pain .locked-code {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
}