/* =========================================================================
   TRIPLETS — page & component styles
   ========================================================================= */

/* ---------- HERO ---------- */
.hero { position: relative; z-index: 1; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .em { color: var(--blue-ink); }
.hero .lead { margin-bottom: 30px; }
.hero .btn-row { margin-bottom: 30px; }
.hero-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-trust .chip svg { width: 14px; height: 14px; }

/* triad badge above headline */
.kicker {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: 7px 14px 7px 10px; margin-bottom: 26px;
  background: rgba(255,255,255,.02);
}
.kicker .triad-mini { display: inline-flex; gap: 4px; }
.kicker .triad-mini i { width: 6px; height: 6px; border-radius: 50%; }

/* ---------- DEMO ---------- */
.demo {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(0,120,231,.04);
}
.demo-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.demo-bar .lights { display: flex; gap: 7px; }
.demo-bar .lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--raised); }
.demo-bar .lights i:nth-child(1){ background:#ff5f57; opacity:.85;}
.demo-bar .lights i:nth-child(2){ background:#febc2e; opacity:.85;}
.demo-bar .lights i:nth-child(3){ background:#28c840; opacity:.85;}
.demo-bar .title { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.demo-bar .live { margin-left: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--green-ink); display: flex; align-items: center; gap: 7px; }
.demo-bar .live::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--green-ink); box-shadow: 0 0 10px var(--green-ink); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.demo-body { padding: 20px 20px 22px; }
.demo-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.demo-pill {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .02em;
  padding: 7px 12px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); color: var(--muted); background: transparent;
  transition: all .18s ease;
}
.demo-pill:hover { color: var(--ink-2); border-color: var(--line-2); }
.demo-pill.on { color: var(--blue-ink); border-color: var(--blue-ink); background: var(--blue-soft); }

.demo-query { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.demo-query .qmark {
  font-family: var(--mono); font-size: .78rem; color: var(--blue-ink);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 9px; flex: none; line-height: 1;
}
.demo-prompt {
  flex: 1; font-size: .98rem; color: var(--ink); line-height: 1.5;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px; min-height: 50px;
}
.demo-run { width: 100%; justify-content: center; }
.demo-run:disabled { opacity: .7; cursor: default; transform: none; }

.demo-output { margin-top: 16px; min-height: 130px; }
.demo-idle { font-family: var(--mono); font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 10px; padding: 14px 2px; }
.demo-idle b { color: var(--ink-2); font-weight: 500; }

.demo-trace { display: flex; flex-direction: column; gap: 7px; }
.trace-line {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .78rem;
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.trace-line.show { transform: none; }
.t-tag { color: var(--muted); }
.t-label { color: var(--ink-2); }
.t-status { font-size: .72rem; text-align: right; }
.t-status.hit { color: var(--green-ink); }
.t-status.pass { color: var(--blue-ink); }
.t-status.miss { color: var(--amber-ink); }
.t-status.skip { color: var(--faint); }

.demo-result {
  border-radius: 12px; padding: 18px; border: 1px solid;
}
.demo-result.answer { background: var(--green-soft); border-color: rgba(31,201,138,.34); }
.demo-result.refuse { background: var(--amber-soft); border-color: rgba(244,167,58,.34); }
.dr-head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.dr-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.demo-result.answer .dr-icon { background: rgba(31,201,138,.18); color: var(--green-ink); }
.demo-result.refuse .dr-icon { background: rgba(244,167,58,.18); color: var(--amber-ink); }
.dr-icon svg { width: 19px; height: 19px; }
.dr-title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.demo-result.answer .dr-title { color: var(--green-ink); }
.demo-result.refuse .dr-title { color: var(--amber-ink); }
.dr-layer { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }
.dr-body { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.dr-src-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 16px 0 9px; }
.dr-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.dr-src li { font-family: var(--mono); font-size: .76rem; color: var(--ink-2); display: flex; align-items: center; gap: 9px; }
.src-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.src-dot.answer { background: var(--green-ink); }
.src-dot.refuse { background: var(--amber-ink); }

/* ---------- STATS ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--panel); padding: 32px 26px; }
.stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.03em; line-height: 1; }
.stat.b .num { color: var(--blue-ink); }
.stat.g .num { color: var(--green-ink); }
.stat.a .num { color: var(--amber-ink); }
.stat .lab { color: var(--ink-2); font-weight: 600; margin-top: 12px; font-size: .98rem; }
.stat .sub { color: var(--muted); font-size: .84rem; margin-top: 4px; }
.stats-note { font-family: var(--mono); font-size: .74rem; color: var(--faint); margin-top: 18px; line-height: 1.6; }

/* ---------- problem / two-cost ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cost-card { padding: 32px; }
.cost-card .big { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin-bottom: 12px; }
.cost-card.trust .big { color: var(--blue-ink); }
.cost-card.money .big { color: var(--amber-ink); }

/* ---------- audience / fit ---------- */
.fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fit-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.02rem; color: var(--ink-2); line-height: 1.55; }
.fit-list .mk { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; margin-top: 2px; }
.fit-list .mk svg { width: 15px; height: 15px; }
.fit-list .mk.yes { background: var(--green-soft); color: var(--green-ink); border: 1px solid rgba(31,201,138,.3); }
.fit-list .mk.no { background: var(--amber-soft); color: var(--amber-ink); border: 1px solid rgba(244,167,58,.3); }

.fit-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px){ .fit-two { grid-template-columns: 1fr; } }

/* ---------- layer stack (how it works) ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.layer {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: stretch;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.layer:hover { border-color: var(--line-2); transform: translateX(4px); }
.layer .rail { display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 1.05rem; border-right: 1px solid var(--line); }
.layer.l1 .rail { color: var(--green-ink); background: var(--green-soft); }
.layer.l2 .rail { color: var(--blue-ink); background: var(--blue-soft); }
.layer.l3 .rail { color: #b58cff; background: rgba(150,110,255,.13); }
.layer.lx .rail { color: var(--amber-ink); background: var(--amber-soft); }
.layer .body { padding: 22px 24px 22px 0; }
.layer .body .t { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.layer .body h3 { font-size: 1.22rem; }
.layer .body .guarantee { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.layer .body p { font-size: .98rem; }
.layer.lx { border-style: dashed; }

/* ---------- objections (prompt fixes) ---------- */
.obj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.obj { padding: 26px; }
.obj .quote { font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--ink); margin-bottom: 14px; display: flex; gap: 12px; align-items: flex-start; }
.obj .quote .x { color: var(--amber-ink); flex: none; font-family: var(--mono); font-size: 1rem; border:1px solid rgba(244,167,58,.34); border-radius:7px; width:26px; height:26px; display:grid; place-items:center; }
.obj p { font-size: .96rem; }
.obj-point { margin-top: 26px; padding: 30px 32px; border-radius: 14px; border: 1px solid rgba(0,120,231,.34); background: linear-gradient(180deg, rgba(0,120,231,.1), rgba(0,120,231,.03)); }
.obj-point .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 12px; }
.obj-point p { font-size: 1.1rem; color: var(--ink); line-height: 1.55; }

/* ---------- healing loop ---------- */
.loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.loop-step { padding: 26px 24px; position: relative; }
.loop-step .n { font-family: var(--mono); font-size: .74rem; color: var(--blue-ink); letter-spacing: .12em; margin-bottom: 16px; }
.loop-step .li { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--blue-soft); color: var(--blue-ink); border: 1px solid var(--line-2); }
.loop-step .li svg { width: 22px; height: 22px; }
.loop-step h3 { font-size: 1.18rem; margin-bottom: 9px; }
.loop-step p { font-size: .92rem; }
.loop-arrow { position: absolute; top: 50%; right: -12px; transform: translateY(-50%); color: var(--faint); z-index: 2; }
.loop-step:last-child .loop-arrow { display: none; }
@media (max-width: 880px){
  .loop { grid-template-columns: 1fr 1fr; }
  .loop-arrow { display: none; }
}

/* ---------- substrate / integration ---------- */
.subs { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,56px); align-items: center; }
.subs-diagram { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.subs-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.015); font-family: var(--mono); font-size: .82rem; color: var(--ink-2); }
.subs-row.gov { border-color: rgba(0,120,231,.4); background: var(--blue-soft); color: var(--ink); }
.subs-stack { display: flex; flex-direction: column; gap: 10px; }
.subs-conn { height: 22px; width: 1px; background: var(--line-2); margin: 0 auto; }
.subs-tag { font-family: var(--mono); font-size: .64rem; letter-spacing:.1em; color: var(--muted); margin-left: auto; }

/* ---------- use-cases ---------- */
.beachhead { padding: clamp(30px, 4vw, 46px); border: 1px solid rgba(31,201,138,.32); background: linear-gradient(135deg, rgba(31,201,138,.08), rgba(0,120,231,.05)); border-radius: 20px; }
.beachhead .tagrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.beachhead h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 16px; }
.beachhead p { font-size: 1.06rem; max-width: 70ch; }

.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.uc-card { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.uc-card .uc-ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); border: 1px solid var(--line-2); }
.uc-card .uc-ico svg { width: 22px; height: 22px; }
.uc-card h3 { font-size: 1.16rem; }
.uc-card p { font-size: .93rem; }
.uc-card .uc-tag { margin-top: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 940px){ .uc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .uc-grid { grid-template-columns: 1fr; } }

/* audience cards (3) */
.aud-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.aud-card { padding: 28px; }
.aud-card .aud-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; }
.aud-card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.aud-card p { font-size: .95rem; }

/* exclusions */
.excl { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.excl-card { padding: 24px; border: 1px dashed var(--line-2); border-radius: 14px; background: rgba(244,167,58,.03); }
.excl-card .h { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; font-family: var(--display); font-weight: 600; font-size: 1.06rem; }
.excl-card .h .mk { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber-ink); flex: none; }
.excl-card p { font-size: .9rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; z-index: 1; overflow: hidden; }
.cta-inner {
  border: 1px solid var(--line-2); border-radius: 24px;
  padding: clamp(40px, 6vw, 72px); text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(0,120,231,.18), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  position: relative; overflow: hidden;
}
.cta-inner h2 { margin-bottom: 18px; }
.cta-inner .lead { margin: 0 auto 28px; }
.cta-email { font-family: var(--mono); font-size: .9rem; color: var(--blue-ink); margin-top: 22px; }
.cta-email a:hover { text-decoration: underline; }

/* section heading block spacing */
.sec-head { margin-bottom: clamp(36px, 5vw, 60px); }

/* generic responsive collapses */
@media (max-width: 900px){
  .hero-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .split, .obj-grid, .aud-grid, .excl { grid-template-columns: 1fr; }
  .subs { grid-template-columns: 1fr; }
  .layer { grid-template-columns: 52px 1fr; gap: 16px; }
  .aud-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .stats-grid { grid-template-columns: 1fr; }
}