/* =====================================================================
   QuantsBroker — Neo-Brutalist Editorial · EXTRA
   Loaded LAST. Phase-1 fixes (a11y, anchors, press) + new-section styles.
   New-section CSS is appended below the "SECTIONS" banner during integration.
   ===================================================================== */

/* =================== A11Y · CONTRAST OVERRIDES =================== */
/* White text on pink/yellow fails WCAG AA (~3.4:1). Use ink instead —
   black-on-pink is also more authentically brutalist. */
.feat--pink { color: var(--ink); }
.stat--pink { color: var(--ink); }
.tier__badge { color: var(--ink); }
.sticker--only { color: var(--ink); }

/* keep the small number chip on pink cards legible (dark chip, light glyph) */
.feat--pink .feat__no { background: var(--ink); color: var(--paper); }

/* =================== ANCHOR OFFSET (sticky nav) =================== */
/* Stop the sticky nav from covering a section you jump to. */
#features, #why, #api, #playground, #how, #compare,
#proof, #pricing, #faq, #cta, #trust {
  scroll-margin-top: clamp(74px, 9vh, 100px);
}

/* =================== TACTILE PRESS (cards) =================== */
/* Make standalone bordered cards physically "press" on hover/active.
   (Feature cells live inside one shared border-grid, so they are NOT
   translated — only their background shifts, which is already handled.) */
.step[data-press] {
  transition: transform var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease),
              background var(--d-fast);
}
.step[data-press]:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow); }
.step[data-press]:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

.tier:not(.tier--pop)[data-press]:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.tier:not(.tier--pop)[data-press]:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* the popular tier is lifted (-14px); press from that raised baseline */
.tier--pop[data-press]:hover { transform: translate(-3px, -17px); }
.tier--pop[data-press]:active { transform: translate(2px, -12px); }

@media (prefers-reduced-motion: reduce) {
  .step[data-press], .tier[data-press] { transition: none !important; }
  .step[data-press]:hover, .tier[data-press]:hover,
  .step[data-press]:active, .tier[data-press]:active { transform: none !important; }
}

/* =====================================================================
   SECTIONS  (new-section CSS appended here during integration)
   ===================================================================== */


/* ========================= SECTION: TRUST ========================= */
/* ===== TRUST BAR — full-bleed credibility band, scoped under .trust ===== */
.trust {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border-top: var(--bw-thick) solid var(--yellow);
  border-bottom: var(--bw-thick) solid var(--yellow);
  padding: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem) var(--gutter);
  overflow: hidden;
}

.trust__inner {
  max-width: 1480px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.7rem);
}

/* --- mono kicker line --- */
.trust__kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.trust__kicker::before {
  content: "";
  flex: none;
  width: 0.72rem;
  height: 0.72rem;
  background: var(--yellow);
  transform: rotate(45deg);
}

/* --- brutalist capability chips --- */
.trust__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.trust__chip {
  --c: var(--yellow);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  padding: 0.62rem 1rem;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  /* hard offset shadow rendered in the chip's accent so it reads on the dark band */
  box-shadow: 5px 5px 0 var(--c);
  cursor: default;
  transition:
    transform var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}
.trust__chip::before {
  content: "";
  flex: none;
  width: 0.68rem;
  height: 0.68rem;
  background: var(--c);
  border: 2px solid var(--ink);
}

/* accent cycle */
.trust__chip:nth-child(6n + 1) { --c: var(--blue); }
.trust__chip:nth-child(6n + 2) { --c: var(--pink); }
.trust__chip:nth-child(6n + 3) { --c: var(--yellow); }
.trust__chip:nth-child(6n + 4) { --c: var(--green); }
.trust__chip:nth-child(6n + 5) { --c: var(--blue); }
.trust__chip:nth-child(6n + 6) { --c: var(--pink); }

.trust__chip:hover,
.trust__chip:focus-visible {
  background: var(--yellow); /* ink text already meets contrast on yellow */
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--c);
  outline: none;
}
.trust__chip:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c);
}

/* --- bold stat line --- */
.trust__stat {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.78rem + 1.55vw, 1.9rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.05rem;
}
.trust__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.trust__metric b { font-weight: inherit; }
.trust__metric--yellow b { color: var(--yellow); }
.trust__metric--pink b { color: var(--pink); }
.trust__metric--green b { color: var(--green); }
.trust__sep {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--yellow);
  transform: rotate(45deg);
}

/* ===== responsive ===== */
@media (max-width: 860px) {
  .trust__chips { gap: 0.65rem; }
  .trust__chip { padding: 0.55rem 0.85rem; }
}

@media (max-width: 640px) {
  .trust {
    padding-block: clamp(1.5rem, 1rem + 3vw, 2rem);
  }
  .trust__kicker { letter-spacing: 0.16em; }
  .trust__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .trust__sep { display: none; }
}

/* ===== reduced motion (no continuous animation here; neutralize hover travel) ===== */
@media (prefers-reduced-motion: reduce) {
  .trust__chip { transition: background-color var(--d-fast) var(--ease); }
  .trust__chip:hover,
  .trust__chip:focus-visible,
  .trust__chip:active { transform: none; }
}

/* ========================= SECTION: WHY ========================= */
.why .why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,2.2vw,2rem);
  margin-top:clamp(2rem,4vw,3.5rem);
  align-items:stretch;
}

.why .why__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:var(--paper);
  color:var(--ink);
  border:var(--bw-thick) solid var(--ink);
  box-shadow:var(--shadow);
  padding:clamp(1.5rem,2.4vw,2.25rem);
  transition:transform var(--d-norm) var(--ease),box-shadow var(--d-norm) var(--ease);
}
.why .why__card:hover{
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-lg);
}
.why .why__card:active{
  transform:translate(3px,3px);
  box-shadow:0 0 0 0 var(--ink);
}
.why .why__card--blue{
  background:var(--blue);
  color:var(--paper);
  border-color:var(--ink);
}

.why .why__card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.85rem;
  border-bottom:var(--bw) solid currentColor;
}
.why .why__index{
  font-family:var(--display);
  font-size:clamp(2.4rem,5vw,3.5rem);
  line-height:.85;
  letter-spacing:-.03em;
}
.why .why__tag{
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:var(--t-small);
  letter-spacing:.12em;
  padding:.3rem .55rem;
  border:var(--bw) solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  white-space:nowrap;
}
.why .why__tag--yellow{background:var(--yellow);}
.why .why__tag--pink{background:var(--pink);}
.why .why__tag--invert{background:var(--yellow);color:var(--ink);border-color:var(--ink);}

.why .why__card-title{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:var(--t-h3);
  line-height:1;
  letter-spacing:-.01em;
  margin:0;
}
.why .why__card-body{
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.5;
  margin:0;
}
.why .why__card-foot{
  margin:auto 0 0;
  padding-top:.9rem;
  border-top:var(--bw) solid currentColor;
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:var(--t-small);
  letter-spacing:.06em;
}

.why .why__sticker{
  position:absolute;
  top:-.9rem;
  right:-.6rem;
  z-index:2;
}

/* ---- Pull quote ---- */
.why .why__quote{
  position:relative;
  margin:clamp(3rem,6vw,5rem) 0 0;
  padding:clamp(2rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem) 0;
  background:var(--ink);
  color:var(--yellow);
  border:var(--bw-thick) solid var(--ink);
  box-shadow:var(--shadow-lg);
  transform:rotate(-1deg);
  overflow:hidden;
  transition:transform var(--d-norm) var(--ease),box-shadow var(--d-norm) var(--ease);
}
.why .why__quote:hover{
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:18px 18px 0 var(--ink);
}
.why .why__quote:active{
  transform:translate(3px,3px) rotate(-1deg);
  box-shadow:0 0 0 0 var(--ink);
}
.why .why__quote-sticker{
  position:absolute;
  top:-1rem;
  right:clamp(1rem,4vw,3rem);
  z-index:3;
}
.why .why__quote-text{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,4.25rem);
  line-height:.96;
  letter-spacing:-.02em;
  margin:0;
  max-width:18ch;
}
.why .why__quote-foot{
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:var(--t-small);
  letter-spacing:.18em;
  color:var(--paper);
  margin:1.4rem 0 clamp(1.75rem,4vw,2.5rem);
}

.why .why__ticker{
  margin:0 calc(-1 * clamp(1.5rem,4vw,3.5rem));
  background:var(--yellow);
  color:var(--ink);
  border-top:var(--bw-thick) solid var(--ink);
  overflow:hidden;
}
.why .why__ticker-track{
  display:flex;
  width:max-content;
  animation:why-marquee 22s linear infinite;
}
.why .why__ticker-group{
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  font-size:var(--t-small);
  letter-spacing:.14em;
  padding:.7rem 0;
  white-space:nowrap;
}
@keyframes why-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---- Responsive ---- */
@media (max-width:860px){
  .why .why__grid{grid-template-columns:1fr;}
  .why .why__quote-text{max-width:100%;}
}
@media (max-width:640px){
  .why .why__card{padding:1.35rem;}
  .why .why__index{font-size:2.4rem;}
  .why .why__card-top{flex-wrap:wrap;gap:.6rem;}
  .why .why__quote{padding:1.75rem 1.25rem 0;transform:rotate(0deg);}
  .why .why__quote:hover{transform:translate(-2px,-2px) rotate(0deg);}
  .why .why__quote:active{transform:translate(3px,3px) rotate(0deg);}
  .why .why__quote-text{font-size:clamp(1.75rem,8vw,2.5rem);}
  .why .why__ticker{margin:0 -1.25rem;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .why .why__ticker-track{animation:none;transform:none;}
  .why .why__card,
  .why .why__quote{transition:none;}
}

/* ========================= SECTION: PLAYGROUND ========================= */
.playground.section{ background:#0e0e0e; color:var(--paper); position:relative; overflow:hidden; }
.playground .section__lead{ color:#c5c2b6; }

.playground__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  margin-top:1.8rem; padding:.75rem 0;
  border-top:var(--bw) solid #2a2a2a; border-bottom:var(--bw) solid #2a2a2a;
  font-family:var(--mono); font-size:var(--t-small);
  text-transform:uppercase; letter-spacing:.08em; color:#a7a49a;
}
.playground__metaitem b{ color:var(--yellow); font-weight:700; margin-right:.45rem; }

.playground__grid{
  position:relative; display:grid; align-items:start;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:var(--gutter); margin-top:2.4rem;
}

.playground__sticker{ position:absolute; top:-18px; right:8px; z-index:4; }

.playground__pane{ min-width:0; border:var(--bw-thick) solid var(--paper); background:#161616; }
.playground__pane--req{ box-shadow:9px 9px 0 var(--blue); }
.playground__pane--res{ background:#0a0a0a; box-shadow:9px 9px 0 var(--yellow); }

.playground__bar{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1rem; border-bottom:var(--bw) solid var(--paper);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; font-size:var(--t-small);
}
.playground__barlabel{ font-weight:700; }
.playground__barnote,.playground__termtitle{
  margin-left:auto; color:#a7a49a; text-transform:none; letter-spacing:.02em; font-size:.78rem;
}

.playground__dots{ display:flex; gap:.5rem; }
.playground__dot{ width:13px; height:13px; border-radius:50%; border:2px solid var(--ink); }
.playground__dot--r{ background:var(--red); }
.playground__dot--y{ background:var(--yellow); }
.playground__dot--g{ background:var(--green); }

.playground__body{ padding:1.1rem; display:flex; flex-direction:column; gap:1.1rem; }

.playground__eps{ display:flex; flex-direction:column; gap:.65rem; }
.playground__ep{
  display:grid; grid-template-columns:auto 1fr; gap:.1rem .8rem; align-items:center;
  width:100%; text-align:left; cursor:pointer;
  font-family:var(--mono); background:#1b1b1b; color:var(--paper);
  border:var(--bw) solid var(--paper); padding:.7rem .8rem; box-shadow:0 0 0 var(--paper);
  transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.playground__verb{
  grid-row:1 / span 2; align-self:center;
  font-family:var(--mono); font-weight:700; font-size:.7rem; letter-spacing:.05em;
  padding:.3rem .5rem; border:2px solid var(--ink); color:var(--paper); background:#333;
}
.playground__verb[data-m="POST"]{ background:var(--blue); color:#fff; }
.playground__verb[data-m="GET"]{ background:var(--green); color:var(--ink); }
.playground__verb[data-m="WSS"]{ background:var(--pink); color:var(--ink); }
.playground__route{ grid-column:2; font-weight:700; font-size:.92rem; color:var(--paper); }
.playground__epdesc{ grid-column:2; font-size:.72rem; color:#a7a49a; text-transform:uppercase; letter-spacing:.06em; }

.playground__ep:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--paper); }
.playground__ep.is-active{ background:var(--yellow); color:var(--ink); border-color:var(--ink); box-shadow:6px 6px 0 var(--paper); }
.playground__ep.is-active .playground__route{ color:var(--ink); }
.playground__ep.is-active .playground__epdesc{ color:#2a2a2a; }
.playground__ep.is-active:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--paper); }
.playground__ep:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--paper); }
.playground__ep:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

.playground__code{
  margin:0; font-family:var(--mono); font-size:.82rem; line-height:1.65; color:var(--paper);
  background:#0c0c0c; border:var(--bw) solid #2a2a2a; padding:.9rem 1rem;
  overflow-x:auto; white-space:pre; -webkit-overflow-scrolling:touch;
}
.playground__code--res{ min-height:236px; max-height:340px; overflow-y:auto; }
.playground__code--res.is-streaming::after{
  content:"▌"; color:var(--yellow); animation:pg-blink 1s steps(1) infinite;
}

.playground__status{ display:flex; align-items:center; gap:.7rem; font-family:var(--mono); }
.playground__pill{
  font-weight:700; font-size:.78rem; letter-spacing:.06em;
  padding:.34rem .6rem; border:2px solid var(--ink);
}
.playground__pill.is-ok{ background:var(--green); color:var(--ink); }
.playground__pill.is-sending{ background:var(--yellow); color:var(--ink); }
.playground__pill.is-idle{ background:#2a2a2a; color:#cfccc1; border-color:#4a4a4a; }
.playground__pill.flash{ animation:pg-flash 420ms var(--ease-back); }
.playground__lat{ font-size:.78rem; color:#b9b6aa; letter-spacing:.04em; }

.playground .playground__send{
  margin-top:.2rem; box-shadow:6px 6px 0 var(--paper);
  transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.playground .playground__send:hover{ transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--paper); }
.playground .playground__send:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--paper); }
.playground .playground__send:disabled{ opacity:.7; cursor:progress; transform:none; box-shadow:6px 6px 0 var(--paper); }

.playground .c-c{ color:#6f6c63; }

@keyframes pg-blink{ 50%{ opacity:0; } }
@keyframes pg-flash{ 0%{ transform:scale(.7); opacity:.2; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }

@media (max-width:860px){
  .playground__grid{ grid-template-columns:1fr; gap:calc(var(--gutter) + 6px); }
  .playground__sticker{ display:none; }
  .playground__pane--req{ box-shadow:6px 6px 0 var(--blue); }
  .playground__pane--res{ box-shadow:6px 6px 0 var(--yellow); }
}

@media (max-width:640px){
  .playground__body{ padding:.85rem; gap:.9rem; }
  .playground__code{ font-size:.76rem; padding:.75rem .8rem; }
  .playground__code--res{ min-height:200px; max-height:300px; }
  .playground__ep{ grid-template-columns:1fr; gap:.35rem; }
  .playground__verb{ grid-row:auto; justify-self:start; }
  .playground__route,.playground__epdesc{ grid-column:1; }
  .playground__pane--req{ box-shadow:5px 5px 0 var(--blue); }
  .playground__pane--res{ box-shadow:5px 5px 0 var(--yellow); }
  .playground .playground__send,
  .playground .playground__send:disabled{ box-shadow:5px 5px 0 var(--paper); }
}

@media (prefers-reduced-motion: reduce){
  .playground__ep,
  .playground .playground__send{ transition:none; }
  .playground__code--res.is-streaming::after{ animation:none; content:""; }
  .playground__pill.flash{ animation:none; }
}

/* ========================= SECTION: COMPARE ========================= */
/* ============== COMPARE / SECTION 05 ============== */
.compare { position: relative; }

.compare .section__head { position: relative; }

.compare__sticker {
  position: absolute;
  top: 0;
  right: 0;
}

/* ---------- frame + safe scroll region ---------- */
.compare__frame {
  position: relative;
  margin-top: clamp(2rem, 1rem + 3.2vw, 3.5rem);
}

.compare__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 16px 18px 0;
  -webkit-overflow-scrolling: touch;
}
.compare__scroll:focus-visible {
  outline: var(--bw) solid var(--blue);
  outline-offset: 4px;
}

/* ---------- table base ---------- */
.compare__table {
  width: 100%;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border: var(--bw-thick) solid var(--ink);
  box-shadow: var(--shadow);
  font-family: var(--body);
}

.compare__col--label { width: 24%; }
.compare__col--diy   { width: 34%; }
.compare__col--qb    { width: 42%; }

.compare__table th,
.compare__table td {
  text-align: left;
  padding: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem);
  border-bottom: var(--bw) solid var(--ink);
  border-right: var(--bw) solid var(--ink);
  vertical-align: middle;
  word-break: break-word;
}
/* single 4px divider between DIY and QB (the thick qbcol left border) */
.compare__cell--diy,
.compare__col-head--diy,
.compare__foot--diy { border-right: 0; }
.compare__table tr > *:last-child { border-right: 0; }
.compare__table tbody tr:last-child td,
.compare__table tbody tr:last-child th { border-bottom: var(--bw) solid var(--ink); }

/* ---------- the framed winner column ---------- */
.compare__qbcol { border-left: var(--bw-thick) solid var(--ink); }

/* ---------- corner ---------- */
.compare__corner {
  background: var(--ink);
  text-align: center;
  vertical-align: middle;
}
.compare__vs {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--yellow);
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---------- column heads ---------- */
.compare__col-head { vertical-align: top; }
.compare__head-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.compare__head-kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.compare__head-name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: var(--t-h3);
  line-height: 0.9;
  letter-spacing: 0.01em;
}

.compare__col-head--diy {
  background: var(--paper-2);
  color: var(--ink);
}
.compare__col-head--diy .compare__head-kicker { opacity: 0.7; }

.compare__col-head--qb {
  background: var(--yellow);
  color: var(--ink);
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lg);
}

.compare__badge {
  margin-top: 0.2rem;
  background: var(--ink);
  color: var(--yellow);
}

/* ---------- row labels ---------- */
.compare__row-label {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* ---------- body cells ---------- */
.compare__cell { color: var(--ink); }
.compare__cell--diy {
  background: var(--paper-2);
  font-weight: 500;
}
.compare__cell--qb {
  background: var(--paper);
  font-weight: 600;
}

.compare__val {
  display: flex;
  align-items: center;
  line-height: 1.25;
}
.compare__val > span:last-child { min-width: 0; }

.compare__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.55em;
  border: var(--bw) solid var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1;
}
.compare__mark--yes { background: var(--green); color: var(--ink); }
.compare__mark--no  { background: var(--red);   color: var(--ink); }

/* light up the winner on row hover (hard switch, no animated color) */
.compare__table tbody tr:hover .compare__cell--qb { background: var(--yellow); }
.compare__table tbody tr:hover .compare__row-label { background: var(--paper-2); }

/* ---------- footer punchline ---------- */
.compare__table tfoot td,
.compare__table tfoot th { border-top: var(--bw-thick) solid var(--ink); }
.compare__foot-label {
  background: var(--ink);
  color: var(--paper);
}
.compare__foot--diy {
  background: var(--paper-2);
  font-style: italic;
}
.compare__foot--qb {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
}

/* ---------- CTA ---------- */
.compare__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 1rem + 3vw, 2.75rem);
}
.compare__cta .btn { transition: transform var(--d-fast) var(--ease); }
.compare__cta .btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.compare__cta .btn:active { transform: translate(3px, 3px); box-shadow: none; }
.compare__note {
  margin: 0;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ============== RESPONSIVE ============== */
@media (max-width: 860px) {
  .compare__sticker {
    position: static;
    display: inline-flex;
    margin-top: 1rem;
  }
  .compare__head-name { font-size: var(--t-body); }
  .compare__vs { font-size: var(--t-body); }
  .compare__table th,
  .compare__table td { padding: 0.8rem 0.85rem; }
}

/* under 640: restructure to stacked label/DIY/QB cards (no page overflow) */
@media (max-width: 640px) {
  .compare__scroll {
    overflow: visible;
    padding: 0;
  }
  .compare__table {
    min-width: 0;
    width: 100%;
    display: block;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .compare__table colgroup { display: none; }
  /* keep header in a11y tree (clip, not display:none) so scope assoc survives */
  .compare__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .compare__table tbody,
  .compare__table tfoot { display: block; }

  .compare__table tr {
    display: block;
    background: var(--paper);
    border: var(--bw-thick) solid var(--ink);
    box-shadow: var(--shadow-sm);
    margin-bottom: clamp(1.1rem, 4vw, 1.5rem);
  }
  .compare__table tfoot tr:last-child { margin-bottom: 0; }

  .compare__table th[scope="row"] {
    display: block;
    width: auto;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--display);
    text-transform: uppercase;
    border: 0;
    border-bottom: var(--bw) solid var(--ink);
    padding: 0.75rem 1rem;
    font-size: var(--t-small);
    letter-spacing: 0.03em;
  }

  .compare__table td {
    display: block;
    border: 0;
    border-bottom: var(--bw) solid var(--ink);
    padding: 0.85rem 1rem;
  }
  .compare__table td:last-child { border-bottom: 0; }

  .compare__cell::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--mono);
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink);
    opacity: 0.7;
  }

  .compare__cell--diy { background: var(--paper-2); }
  .compare__cell--qb,
  .compare__foot--qb {
    background: var(--yellow);
    border-left: 0;
    font-weight: 700;
  }
  .compare__qbcol { border-left: 0; }
  .compare__table tbody tr:hover .compare__cell--qb { background: var(--yellow); }
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
  .compare__cta .btn { transition: none; }
  .compare__cta .btn:hover,
  .compare__cta .btn:active { transform: none; }
}

/* ========================= SECTION: PROOF ========================= */
.proof{ position:relative; }

.proof .proof__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gutter);
  margin-top:clamp(2rem, 5vw, 3.5rem);
}

.proof .proof__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  background:var(--paper);
  color:var(--ink);
  border:var(--bw-thick) solid var(--ink);
  box-shadow:var(--shadow);
  transition:transform var(--d-norm) var(--ease), box-shadow var(--d-norm) var(--ease);
}
.proof .proof__card:hover{
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-lg);
}
.proof .proof__card:active{
  transform:translate(3px,3px);
  box-shadow:0 0 0 0 var(--ink);
}

.proof .proof__card--yellow{ background:var(--yellow); color:var(--ink); }
.proof .proof__card--pink{ background:var(--pink); color:var(--ink); }

.proof .proof__card--tilt{ transform:rotate(-1.6deg); }
.proof .proof__card--tilt:hover{ transform:rotate(0) translate(-2px,-2px); }
.proof .proof__card--tilt:active{ transform:rotate(0) translate(3px,3px); }

.proof .proof__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

/* star badge — scoped so it overrides the global circular sticker shape */
.proof .proof__stars{
  display:inline-flex;
  align-items:center;
  gap:.05em;
  width:auto;
  height:auto;
  border-radius:0;
  font-family:var(--mono);
  font-size:.9rem;
  line-height:1;
  letter-spacing:.16em;
  color:var(--yellow);
  background:var(--ink);
  border:var(--bw) solid var(--ink);
  padding:.5rem .7rem .42rem;
  box-shadow:var(--shadow-sm);
}

.proof .proof__index{
  font-family:var(--mono);
  font-size:var(--t-small);
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:.62;
}

.proof .proof__mark{
  display:block;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(3.5rem, 8vw, 5.5rem);
  line-height:.55;
  height:.5em;
  overflow:hidden;
  user-select:none;
  opacity:.9;
}

.proof blockquote{
  margin:0;
  font-family:var(--body);
  font-weight:500;
  font-size:clamp(1.15rem, 1.02rem + .55vw, 1.5rem);
  line-height:1.2;
  letter-spacing:-0.01em;
  text-wrap:balance;
}

.proof cite{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  margin-top:auto;
  padding-top:1.1rem;
  border-top:var(--bw) solid var(--ink);
  font-style:normal;
}
.proof cite strong{
  font-family:var(--mono);
  font-weight:700;
  font-size:var(--t-small);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.proof cite span{
  font-family:var(--mono);
  font-size:var(--t-small);
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.72;
}

/* aggregate proof strip */
.proof .proof__strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin-top:var(--gutter);
  background:var(--paper-2);
  border:var(--bw-thick) solid var(--ink);
  box-shadow:var(--shadow);
}
.proof .proof__stat{
  padding:clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.9rem);
  border-right:var(--bw) solid var(--ink);
}
.proof .proof__stat:last-child{ border-right:0; }
.proof .proof__stat--blue{ box-shadow:inset 0 7px 0 var(--blue); }
.proof .proof__stat--pink{ box-shadow:inset 0 7px 0 var(--pink); }
.proof .proof__stat--green{ box-shadow:inset 0 7px 0 var(--green); }

.proof .proof__num{
  font-family:var(--display);
  font-size:clamp(2.6rem, 6vw, 4rem);
  line-height:.9;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.proof .proof__statlabel{
  margin:.75rem 0 0;
  font-family:var(--mono);
  font-size:var(--t-small);
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.35;
  color:var(--ink);
  opacity:.78;
}

@media (max-width:860px){
  .proof .proof__grid{ grid-template-columns:1fr; }
  .proof .proof__card--tilt{ transform:rotate(0); }
  .proof .proof__card--tilt:hover{ transform:translate(-2px,-2px); }
  .proof .proof__card--tilt:active{ transform:translate(3px,3px); }
  .proof .proof__strip{ grid-template-columns:1fr; }
  .proof .proof__stat{
    border-right:0;
    border-bottom:var(--bw) solid var(--ink);
  }
  .proof .proof__stat:last-child{ border-bottom:0; }
}

@media (max-width:640px){
  .proof .proof__card{ padding:1.4rem; }
  .proof blockquote{ font-size:1.12rem; }
  .proof .proof__mark{ font-size:3.25rem; }
  .proof .proof__top{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce){
  .proof .proof__card{ transition:none; }
}

/* ========================= SECTION: FAQ ========================= */
.faq{
  --faq-gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
}

.faq .faq__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items:start;
}

/* ---------- LIST ---------- */
.faq .faq__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: var(--faq-gap);
  counter-reset:none;
}
.faq .faq__item{ margin:0; }

.faq details{
  background: var(--paper);
  border: var(--bw-thick) solid var(--ink);
  box-shadow: var(--shadow);
  transition: transform var(--d-norm) var(--ease),
              box-shadow var(--d-norm) var(--ease),
              background-color var(--d-fast) var(--ease);
}
.faq details[open]{
  background: var(--paper-2);
}

/* ---------- SUMMARY (question row) ---------- */
.faq summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: clamp(0.8rem, 0.4rem + 1.4vw, 1.6rem);
  padding: clamp(0.95rem, 0.7rem + 1vw, 1.5rem) clamp(1rem, 0.7rem + 1.2vw, 1.7rem);
  user-select:none;
  outline:none;
}
.faq summary::-webkit-details-marker{ display:none; }

.faq summary:focus-visible{
  outline: var(--bw) solid var(--blue);
  outline-offset: 3px;
}

.faq .faq__num{
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height:1;
  font-weight:700;
  letter-spacing:0.04em;
  color: var(--ink);
  background: var(--yellow);
  border: var(--bw) solid var(--ink);
  padding: 0.4em 0.5em;
  align-self:start;
  transition: transform var(--d-norm) var(--ease-back);
}
.faq details[open] .faq__num{
  background: var(--blue);
  color: var(--paper);
}

.faq .faq__q{
  font-family: var(--display);
  text-transform:uppercase;
  font-size: clamp(1.02rem, 0.86rem + 0.95vw, 1.55rem);
  line-height:1.04;
  letter-spacing:-0.01em;
  color: var(--ink);
}

/* +/- indicator */
.faq .faq__icon{
  position:relative;
  width: clamp(2.1rem, 1.6rem + 1.4vw, 2.85rem);
  height: clamp(2.1rem, 1.6rem + 1.4vw, 2.85rem);
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background: var(--ink);
  border: var(--bw) solid var(--ink);
  transition: background-color var(--d-fast) var(--ease),
              transform var(--d-norm) var(--ease-back);
}
.faq .faq__icon::after{
  content:"+";
  font-family: var(--display);
  font-size: 1.4em;
  line-height:0;
  color: var(--paper);
  transform: translateY(-0.02em);
}
.faq details[open] .faq__icon{
  background: var(--yellow);
  transform: rotate(180deg);
}
.faq details[open] .faq__icon::after{
  content:"–";
  color: var(--ink);
}

/* hover / press on the question block */
.faq summary:hover .faq__icon{ background: var(--pink); }
.faq summary:hover .faq__icon::after{ color: var(--ink); }
.faq details:hover{
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-lg);
}
.faq details:active{
  transform: translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}

/* ---------- ANSWER ---------- */
.faq .faq__a{
  padding: 0 clamp(1rem, 0.7rem + 1.2vw, 1.7rem) clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  border-top: var(--bw) solid var(--ink);
  margin-top:-1px;
}
.faq .faq__a p{
  font-family: var(--body);
  font-size: var(--t-body);
  line-height:1.55;
  color: var(--ink);
  max-width: 60ch;
  margin: clamp(0.8rem, 0.6rem + 0.6vw, 1.15rem) 0 0;
  padding-left: clamp(0, -1rem + 5vw, 3.6rem); /* align under question, not number */
}
.faq details[open] .faq__a{
  animation: faqReveal var(--d-norm) var(--ease) both;
}
@keyframes faqReveal{
  from{ opacity:0; transform: translateY(-8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- RAIL / CTA ---------- */
.faq .faq__rail{
  position:sticky;
  top: clamp(1rem, 0.5rem + 3vw, 3rem);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.faq .faq__sticker{
  position:relative;
  z-index:2;
  margin: 0 clamp(0.5rem, 2vw, 1.4rem) -1.1rem auto;
  background: var(--pink);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-small);
  line-height:0.95;
  text-align:center;
  transform: rotate(-7deg);
}
.faq .faq__cta{
  width:100%;
  background: var(--ink);
  border: var(--bw-thick) solid var(--ink);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}
.faq .faq__cta-eyebrow{
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--yellow);
  margin:0 0 0.9rem;
}
.faq .faq__cta-title{
  font-family: var(--display);
  text-transform:uppercase;
  font-size: var(--t-h3);
  line-height:0.98;
  letter-spacing:-0.01em;
  color: var(--paper);
  margin:0 0 0.85rem;
}
.faq .faq__cta-lead{
  font-family: var(--body);
  font-size: var(--t-body);
  line-height:1.5;
  color: var(--paper);
  opacity:0.92;
  margin:0 0 clamp(1.2rem, 0.9rem + 1vw, 1.7rem);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .faq .faq__grid{
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 1rem + 4vw, 2.6rem);
  }
  .faq .faq__rail{
    position:static;
    align-items:stretch;
  }
  .faq .faq__sticker{
    margin: 0 0 -1.1rem auto;
  }
  .faq .faq__a p{ padding-left:0; }
}

@media (max-width: 640px){
  .faq summary{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "num icon"
      "q   q";
    row-gap: 0.7rem;
  }
  .faq .faq__num{ grid-area:num; justify-self:start; }
  .faq .faq__icon{ grid-area:icon; }
  .faq .faq__q{ grid-area:q; }
  .faq .faq__a p{ padding-left:0; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .faq details,
  .faq .faq__icon,
  .faq .faq__num{ transition:none; }
  .faq details:hover{ transform:none; box-shadow: var(--shadow); }
  .faq details:active{ transform:none; }
  .faq details[open] .faq__icon{ transform:none; }
  .faq details[open] .faq__a{ animation:none; }
}