/* assets/css/landing.css v2
   The landing page visual system.

   Loaded only by index.php, after site.css. Every token comes from app.css,
   so both themes inherit. Honest page rule inherited: every animated window
   shows demonstrative arithmetic, never claimed results. Motion respects
   prefers-reduced-motion everywhere.

   v2 fixes, found in the browser after v1 shipped:
   - The reading device animated on a .cbwin.in gate, but it lives in a
     .cb-reveal container. The gate now listens on the right selector.
   - The cost fill bars were spans, and transforms and height percentages
     do nothing on inline elements. They are display:block now.
   - "twice over" is more pronounced and flickers far more often.
   - New: intent demo, protected link conveyor, side figures, puzzle section.
*/

/* ============ 1. THE TWICE OVER EFFECT ============ */

.hero h1 em.twice {
  font-style: normal;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--amber);
  animation: cb-dangle 4.6s ease-in-out infinite;
}

/* The dizzy shadow: two hues pulling opposite ways, faster and brighter. */
.hero h1 em.twice::before {
  content: '';
  position: absolute;
  inset: -42% -16%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(15, 123, 108, 0) 0deg,
    rgba(15, 123, 108, .34) 55deg,
    rgba(214, 57, 75, 0) 140deg,
    rgba(214, 57, 75, .30) 220deg,
    rgba(15, 123, 108, 0) 300deg,
    rgba(15, 123, 108, .34) 360deg
  );
  filter: blur(24px);
  opacity: .9;
  animation: cb-dizzy 5.5s linear infinite;
}

/* The flicker: a burst of chromatic splits every 2.2 seconds. */
.hero h1 em.twice::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  pointer-events: none;
  animation: cb-glitch 2.2s steps(1) infinite;
}

@keyframes cb-dangle {
  0%   { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(5px) rotate(.55deg); }
  50%  { transform: translateY(7px) rotate(0deg); }
  80%  { transform: translateY(3px) rotate(-.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes cb-dizzy {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.18); }
  to   { transform: rotate(360deg) scale(1); }
}

@keyframes cb-glitch {
  0%, 76%, 100% { opacity: 0; transform: none; }
  77%  { opacity: .95; transform: translateX(3px) skewX(-4deg);
          text-shadow: -4px 0 var(--teal), 4px 0 var(--coral); }
  79%  { opacity: .95; transform: translateX(-3px) skewX(3deg);
          text-shadow: 4px 0 var(--teal), -4px 0 var(--coral); }
  81%  { opacity: .95; transform: translateX(2px);
          text-shadow: -3px 1px var(--teal), 3px -1px var(--coral); }
  83%  { opacity: .95; transform: translateX(-2px) skewX(-2deg);
          text-shadow: 3px 0 var(--teal), -3px 0 var(--coral); }
  85%  { opacity: 0; transform: none; }
}

/* ============ 2. SECTION TINTS ============ */

.sect.cb-tint-teal {
  background: radial-gradient(120% 90% at 85% 10%, var(--teal-dim) 0%, transparent 55%);
  border-top: 1px solid var(--hairline-soft);
}
.sect.cb-tint-coral {
  background: radial-gradient(120% 90% at 12% 8%, var(--coral-dim) 0%, transparent 55%);
  border-top: 1px solid var(--hairline-soft);
}
.sect.cb-tint-amber {
  background: radial-gradient(120% 90% at 50% 0%, var(--amber-dim) 0%, transparent 60%);
  border-top: 1px solid var(--hairline-soft);
}
.sect.cb-tint-slate {
  background: linear-gradient(180deg, var(--slate-dim, rgba(100,116,139,.07)) 0%, transparent 45%);
  border-top: 1px solid var(--hairline-soft);
}

/* ============ 3. THE WINDOW MOCKUP ============ */

.cbwin {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 48px -18px rgba(0,0,0,.28);
  margin: 26px auto 8px;
}
.cbwin-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-hover);
  border-bottom: 1px solid var(--hairline-soft);
}
.cbwin-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.cbwin-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; background: var(--hairline); }
.cbwin-dots i:first-child { background: #ed6a5f; }
.cbwin-dots i:nth-child(2) { background: #f5bf4f; }
.cbwin-dots i:nth-child(3) { background: #62c554; }
.cbwin-tab {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--hairline-soft); border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 5px 14px 6px;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cbwin-tab b { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; background: var(--amber); }
.cbwin-url {
  flex: 1; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--hairline-soft); border-radius: 100px;
  padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.cbwin-body { padding: 18px; min-height: 210px; font-family: var(--font-body); }

@media (min-width: 900px) {
  .sect.has-win { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 34px; align-items: start; }
  .sect.has-win .cbwin { margin: 0; grid-column: 2; grid-row: 1 / span 5; }
  .sect.has-win .sect-eyebrow, .sect.has-win h2, .sect.has-win .sect-copy,
  .sect.has-win .cards, .sect.has-win .tierlist { grid-column: 1; }
  .sect.has-win h2 { max-width: 24ch; }
  .sect.has-win .sect-copy p { max-width: none; }
}

/* ============ 4. SCROLL REVEAL ============ */

.cb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.cb-reveal.in { opacity: 1; transform: none; }

/* ============ 5. SPLIT CANVAS SECTIONS (bug.jpg, puzzle.png) ============
   Copy left, image right, no border, no shadow, no dividing line. The section
   tint runs behind both columns so the join is invisible. The image is
   height-capped and object-fit covered, which is what stops a tall source
   image from dominating the whole section: it fills the column it is given
   and never a pixel more. */

.sect-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
}
.sect-split .sect-copy-col { min-width: 0; }
.sect-split .sect-fig {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Height capped: the column is as tall as the copy beside it, and the
     image fills that shape. This is the forceful scale-down. */
  max-height: 440px;
  min-height: 300px;
  align-self: stretch;
  margin: 0;
  border: none;
  box-shadow: none;
}
.sect-split .sect-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
}
/* Wide source images keep more of their content; tall ones crop to the
   column. object-fit does the deciding, and no size can break the layout. */

/* The existing h2 and eyebrow keep their own margins; inside the split the
   heading belongs to the copy column. */
.sect-split .sect-eyebrow, .sect-split h2 { grid-column: 1; }
.sect-split .sect-copy-col { grid-column: 1; }
.sect-split .sect-fig { grid-column: 2; grid-row: 1 / span 3; }

/* Mobile: one column, image after the copy, still capped and seamless. */
@media (max-width: 760px) {
  .sect-split { grid-template-columns: 1fr; gap: 20px; }
  .sect-split .sect-fig {
    grid-column: 1; grid-row: auto;
    max-height: 260px; min-height: 180px;
  }
}

/* ============ 6. THE DEMOS ============ */

/* -- 6a. The reading, animated. GATE FIX: the device lives in a
   .cb-reveal container, not a window, so the gate listens there. -- */

.demo-reading .reading-seg {
  display: block;
  width: var(--w);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.25,.8,.25,1);
}
.cb-reveal.in .demo-reading .reading-seg { transform: scaleX(1); }
.cb-reveal.in .demo-reading .reading-seg.s2 { transition-delay: .55s; }
.cb-reveal.in .demo-reading .reading-seg.s3 { transition-delay: .85s; }
.cb-reveal.in .demo-reading .reading-seg.s4 { transition-delay: 1.15s; }

.demo-reading .demo-wrongval { display: inline-block; margin-left: 8px; }
.cb-reveal.in .demo-reading .demo-wrongval { animation: cb-strike 1.4s ease .9s forwards; }
@keyframes cb-strike {
  0%   { opacity: 1; }
  60%  { opacity: 1; text-decoration: line-through; }
  100% { opacity: .4; text-decoration: line-through; }
}

/* -- 6b. Evidence: signals fire one by one -- */

.demo-ev .ev-fire {
  opacity: 0; transform: translateX(-8px);
  transition: opacity .45s ease, transform .45s ease;
}
.cbwin.in .demo-ev .ev-fire { opacity: 1; transform: none; }
.cbwin.in .demo-ev .ev-fire:nth-of-type(1) { transition-delay: .3s; }
.cbwin.in .demo-ev .ev-fire:nth-of-type(2) { transition-delay: .75s; }
.cbwin.in .demo-ev .ev-fire:nth-of-type(3) { transition-delay: 1.2s; }
.cbwin.in .demo-ev .ev-fire:nth-of-type(4) { transition-delay: 1.65s; }
.demo-ev .demo-verdict {
  opacity: 0; transform: scale(.85);
  transition: opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cbwin.in .demo-ev .demo-verdict { opacity: 1; transform: scale(1); transition-delay: 2.2s; }

/* -- 6c. Intent: what it is, what it is doing. Rows slide in. -- */

.demo-int .int-head, .demo-int .int-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.1fr) minmax(90px, 1fr) minmax(130px, 1.3fr);
  gap: 10px; align-items: center;
  padding: 8px 10px;
}
.demo-int .int-head {
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--surface-hover);
}
.demo-int .int-row {
  border-bottom: 1px solid var(--hairline-soft);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.demo-int .int-row:last-child { border-bottom: none; }
.cbwin.in .demo-int .int-row { opacity: 1; transform: none; }
.cbwin.in .demo-int .int-row:nth-of-type(1) { transition-delay: .25s; }
.cbwin.in .demo-int .int-row:nth-of-type(2) { transition-delay: .55s; }
.cbwin.in .demo-int .int-row:nth-of-type(3) { transition-delay: .85s; }
.cbwin.in .demo-int .int-row:nth-of-type(4) { transition-delay: 1.15s; }
.cbwin.in .demo-int .int-row:nth-of-type(5) { transition-delay: 1.45s; }
.cbwin.in .demo-int .int-row:nth-of-type(6) { transition-delay: 1.75s; }
.demo-int .int-agent { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.demo-int .int-fn { font-size: 11.5px; color: var(--text-secondary); }
.demo-int .int-tag {
  font-family: var(--font-mono); font-size: 10px;
  border-radius: 100px; padding: 3px 10px;
  width: fit-content; white-space: nowrap;
}
.demo-int .int-tag.support { background: var(--teal-dim); color: var(--teal); }
.demo-int .int-tag.neutral { background: var(--gold-dim); color: var(--gold); }
.demo-int .int-tag.against { background: var(--coral-dim); color: var(--coral); }
@media (max-width: 560px) {
  .demo-int .int-head, .demo-int .int-row { grid-template-columns: 1fr 1.2fr; }
  .demo-int .int-fn { display: none; }
  .demo-int .int-head span:nth-child(2) { display: none; }
}

/* -- 6d. Protected link: the conveyor. Clicks arrive in groups, checks
   run, verdicts stamp. One real person passes, two machines do not. -- */

.demo-pl .pl-group {
  padding: 10px 0;
  border-bottom: 1px dashed var(--hairline-soft);
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.demo-pl .pl-group:last-child { border-bottom: none; padding-bottom: 0; }
.cbwin.in .demo-pl .pl-group { opacity: 1; transform: none; }
.cbwin.in .demo-pl .pl-group.g2 { transition-delay: 1.2s; }
.cbwin.in .demo-pl .pl-group.g3 { transition-delay: 2.4s; }

.demo-pl .pl-click {
  font-family: var(--font-mono); font-size: 11.5px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--hairline-soft);
  margin-bottom: 8px;
}
.demo-pl .pl-click .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.demo-pl .pl-click .dot.ok { background: var(--teal); }
.demo-pl .pl-click .dot.bad { background: var(--coral); }

.demo-pl .pl-check {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 11px 4px 26px;
  opacity: 0; transform: translateY(3px);
  transition: all .35s ease;
}
.cbwin.in .demo-pl .pl-group.g1 .pl-check { transition-delay: .5s, .5s; }
.cbwin.in .demo-pl .pl-check { opacity: 1; transform: none; }
.cbwin.in .demo-pl .pl-group.g1 .pl-check:nth-of-type(1) { transition-delay: .55s; }
.cbwin.in .demo-pl .pl-group.g1 .pl-check:nth-of-type(2) { transition-delay: .8s; }
.cbwin.in .demo-pl .pl-group.g2 .pl-check:nth-of-type(1) { transition-delay: 1.75s; }
.cbwin.in .demo-pl .pl-group.g2 .pl-check:nth-of-type(2) { transition-delay: 2s; }
.cbwin.in .demo-pl .pl-group.g3 .pl-check:nth-of-type(1) { transition-delay: 2.95s; }
.cbwin.in .demo-pl .pl-group.g3 .pl-check:nth-of-type(2) { transition-delay: 3.2s; }
.demo-pl .pl-check .ok { color: var(--teal); }
.demo-pl .pl-check .bad { color: var(--coral); font-weight: 600; }

/* Verdict tags: THROUGH for the person, BLOCKED for the machines. */
.demo-pl .pl-stamp {
  display: inline-block;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: 6px; padding: 5px 13px;
  margin: 6px 0 2px 26px;
  transform: rotate(-5deg) scale(2.2);
  opacity: 0;
  transition: all .26s cubic-bezier(.34,1.56,.64,1);
}
.demo-pl .pl-stamp.blocked { color: var(--coral); border: 2px solid var(--coral); }
.demo-pl .pl-stamp.through { color: var(--teal); border: 2px solid var(--teal); transform: rotate(3deg) scale(2.2); }
.cbwin.in .demo-pl .pl-group.g1 .pl-stamp { opacity: 1; transform: rotate(3deg) scale(1); transition-delay: 1.15s; }
.cbwin.in .demo-pl .pl-group.g2 .pl-stamp { opacity: 1; transform: rotate(-5deg) scale(1); transition-delay: 2.35s; }
.cbwin.in .demo-pl .pl-group.g3 .pl-stamp { opacity: 1; transform: rotate(-5deg) scale(1); transition-delay: 3.55s; }
.demo-pl .pl-speed {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  margin-left: 8px;
}

/* Desktop: the conveyor window gets room to breathe. */
@media (min-width: 900px) {
  .demo-pl .cbwin-body, .cbwin-body.demo-pl { min-height: 330px; }
}

/* -- 6e. Costs: the counterweight. DISPLAY FIX: the fills are spans and
   transforms do nothing on inline elements, so they are block now. -- */

.demo-cost .cw-row {
  display: grid; grid-template-columns: 108px 1fr 78px;
  gap: 12px; align-items: center;
  padding: 10px 0; font-size: 12.5px;
}
.demo-cost .cw-name { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.demo-cost .cw-val { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-align: right; }
.demo-cost .cw-track {
  display: block;
  height: 10px; border-radius: 100px;
  background: var(--surface-hover); overflow: hidden;
}
.demo-cost .cw-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 100px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s cubic-bezier(.25,.8,.25,1);
}
.cbwin.in .demo-cost .cw-fill { transform: scaleX(1); }
.cbwin.in .demo-cost .cw-fill.back { transition-delay: .55s; }
.demo-cost .cw-verdict {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12px; color: var(--text-secondary);
  opacity: 0; transform: translateY(6px);
  transition: all .5s ease 1.6s;
}
.cbwin.in .demo-cost .cw-verdict { opacity: 1; transform: none; }
.demo-cost .cw-verdict strong { color: var(--teal); }

/* -- 6f. Campaign audit -- */

.demo-audit .au-bar { height: 14px; border-radius: 6px; overflow: hidden; display: flex; margin: 6px 0 14px; }
.demo-audit .au-seg {
  display: block;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.25,.8,.25,1);
}
.cbwin.in .demo-audit .au-seg { transform: scaleX(1); }
.cbwin.in .demo-audit .au-seg.s2 { transition-delay: .35s; }
.cbwin.in .demo-audit .au-seg.s3 { transition-delay: .7s; }
.demo-audit .au-sig {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  padding: 4px 0;
  opacity: 0; transform: translateX(-8px); transition: all .4s ease;
}
.cbwin.in .demo-audit .au-sig { opacity: 1; transform: none; }
.cbwin.in .demo-audit .au-sig:nth-of-type(1) { transition-delay: 1s; }
.cbwin.in .demo-audit .au-sig:nth-of-type(2) { transition-delay: 1.3s; }
.cbwin.in .demo-audit .au-sig:nth-of-type(3) { transition-delay: 1.6s; }

/* -- 6g. Outcomes -- */

.demo-out .ou-event {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--surface); border: 1px solid var(--hairline-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-md); padding: 9px 12px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
  opacity: 0; transform: translateY(-14px);
  transition: all .5s cubic-bezier(.25,.8,.25,1);
}
.cbwin.in .demo-out .ou-event { opacity: 1; transform: none; transition-delay: .3s; }
.demo-out .ou-event .sig-ok { color: var(--teal); font-size: 10px; }
.demo-out .ou-rate { display: flex; gap: 20px; align-items: baseline; font-family: var(--font-mono); flex-wrap: wrap; }
.demo-out .ou-naive { font-size: 13px; color: var(--text-muted); }
.cbwin.in .demo-out .ou-naive { animation: cb-strike 1s ease 1s forwards; }
.demo-out .ou-true {
  font-size: 20px; font-weight: 700; color: var(--teal);
  opacity: 0; transform: translateY(6px); transition: all .5s ease 1.4s;
}
.cbwin.in .demo-out .ou-true { opacity: 1; transform: none; }

/* -- 6h. Alerts -- */

.demo-al .al-ch {
  background: var(--surface); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg); overflow: hidden;
}
.demo-al .al-ch-head {
  padding: 8px 14px; border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--text-secondary);
  background: var(--surface-hover);
  display: flex; align-items: center; gap: 8px;
}
.demo-al .al-ch-head i { width: 10px; height: 10px; border-radius: 3px; background: var(--amber); display: block; }
.demo-al .al-msg {
  padding: 11px 14px; border-bottom: 1px solid var(--hairline-soft);
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
  opacity: 0; transform: translateX(18px);
  transition: all .45s ease;
}
.demo-al .al-msg:last-child { border-bottom: none; }
.cbwin.in .demo-al .al-msg { opacity: 1; transform: none; }
.cbwin.in .demo-al .al-msg.m2 { transition-delay: .8s; }
.cbwin.in .demo-al .al-msg.m3 { transition-delay: 1.6s; }
.demo-al .al-msg strong { color: var(--text-primary); }
.demo-al .al-msg .meta { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* -- 6i. Duration lens -- */

.demo-dur .du-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 100px;
  background: var(--surface-hover); outline: none; margin: 10px 0 16px;
}
.demo-dur .du-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--amber); cursor: default;
  border: 2px solid var(--surface-raised);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.demo-dur .du-label { font-family: var(--font-mono); font-size: 11px; color: var(--amber); }
.demo-dur .du-rows .du-row {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  padding: 6px 10px; border-radius: var(--radius-md);
  background: var(--surface); margin-bottom: 4px;
  transition: opacity .5s ease, transform .5s ease;
}
.demo-dur .du-row .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.demo-dur .du-row.long .dot { background: var(--teal); }
.demo-dur .du-row.short .dot { background: var(--coral); }
.cbwin.in .demo-dur .du-row.fade { animation: cb-dufade 6s ease infinite; }
.cbwin.in .demo-dur .du-row.f2 { animation-delay: .6s; }
.cbwin.in .demo-dur .du-row.f3 { animation-delay: 1.2s; }
@keyframes cb-dufade {
  0%, 25%  { opacity: 1; }
  40%, 70% { opacity: .18; transform: translateX(10px); }
  85%, 100% { opacity: 1; transform: none; }
}

/* ============ 7. PRICING ============ */

.cb-price { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
@media (min-width: 820px) { .cb-price { grid-template-columns: repeat(4, 1fr); } }
.cb-price .price-card {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  position: relative;
  display: flex; flex-direction: column;
}
.cb-price .price-card.free {
  border-color: rgba(183,121,31,.5);
  background: radial-gradient(140% 100% at 50% 0%, var(--amber-dim) 0%, var(--surface-raised) 70%);
}
.cb-price .price-card .pc-flag {
  position: absolute; top: -11px; left: 16px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--amber); color: #fff;
  border-radius: 100px; padding: 4px 11px;
}
.cb-price .pc-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.cb-price .pc-price { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin: 10px 0 2px; }
.cb-price .pc-price span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.cb-price .pc-credit {
  font-family: var(--font-mono); font-size: 11px; color: var(--teal);
  background: var(--teal-dim); border-radius: 100px;
  padding: 4px 10px; display: inline-block; margin: 8px 0;
  width: fit-content;
}
.cb-price .pc-list { list-style: none; padding: 0; margin: 12px 0 0; flex: 1; }
.cb-price .pc-list li {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
  padding: 3px 0 3px 20px; position: relative;
}
.cb-price .pc-list li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--teal-dim); border: 1px solid var(--teal);
}
.cb-price .pc-cta { margin-top: 16px; text-align: center; }

/* ============ 8. MISC ============ */

@keyframes cb-chipfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.stack { animation: cb-chipfloat 7s ease-in-out infinite; }
.stack:nth-child(2n) { animation-delay: -2.1s; }
.stack:nth-child(3n) { animation-delay: -4.2s; }

/* ============ 9. REDUCED MOTION ============ */

@media (prefers-reduced-motion: reduce) {
  .hero h1 em.twice, .hero h1 em.twice::before, .hero h1 em.twice::after { animation: none; }
  .hero h1 em.twice::before { opacity: .4; }
  .cb-reveal { opacity: 1; transform: none; transition: none; }
  .demo-reading .reading-seg,
  .demo-ev .ev-fire, .demo-ev .demo-verdict,
  .demo-int .int-row,
  .demo-pl .pl-group, .demo-pl .pl-check, .demo-pl .pl-stamp,
  .demo-cost .cw-fill, .demo-cost .cw-verdict,
  .demo-audit .au-seg, .demo-audit .au-sig,
  .demo-out .ou-event, .demo-out .ou-true,
  .demo-al .al-msg,
  .demo-dur .du-row {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important;
  }
  .demo-pl .pl-stamp.through { transform: rotate(3deg) scale(1); }
  .stack { animation: none; }
}

/* ============ 10. MOBILE ============ */

@media (max-width: 640px) {
  .hero h1 em.twice::before { inset: -32% -6%; filter: blur(18px); }
  .hero h1 { font-size: 34px; }
  .cbwin-body { padding: 14px; min-height: 180px; }
  .cbwin-body.demo-pl { min-height: 0; }
  .cbwin-url { display: none; }
  .cbwin-tab { max-width: 70%; }
  .demo-cost .cw-row { grid-template-columns: 84px 1fr 64px; gap: 8px; }
  .demo-al .al-msg { padding: 9px 11px; }
  .demo-pl .pl-stamp { margin-left: 14px; }
}

/* ============ 11. FUNNEL DEMO ============
   The dual conversion rate: the inflated number beside the real one, step
   bars filling beneath. The gap between the two cards IS the finding. */

.demo-funnel .fu-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.demo-funnel .fu-card{
  border-radius:var(--radius-md);padding:13px 12px;text-align:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease;
}
.demo-funnel .fu-card.inflated{background:var(--coral-dim);border:1px solid rgba(214,57,75,.25);}
.demo-funnel .fu-card.real{background:var(--teal-dim);border:1px solid rgba(15,123,108,.25);}
.cbwin.in .demo-funnel .fu-card{opacity:1;transform:none;}
.cbwin.in .demo-funnel .fu-card.real{transition-delay:.4s;}
.demo-funnel .fu-label{
  font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-muted);margin-bottom:5px;
}
.demo-funnel .fu-val{font-family:var(--font-display);font-size:26px;font-weight:700;}
.demo-funnel .fu-card.inflated .fu-val{color:var(--coral);}
.demo-funnel .fu-card.real .fu-val{color:var(--teal);}
.demo-funnel .fu-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:4px;}
.demo-funnel .fu-card.inflated .fu-val{
  animation:none;
}
.cbwin.in .demo-funnel .fu-card.inflated .fu-val{animation:fu-strike 1.2s ease .8s forwards;}
@keyframes fu-strike{
  0%{opacity:1;}
  55%{opacity:1;text-decoration:line-through;}
  100%{opacity:.45;text-decoration:line-through;}
}

/* Step bars: each fills in sequence. */
.demo-funnel .fu-steps{display:flex;flex-direction:column;gap:6px;}
.demo-funnel .fu-step{
  display:grid;grid-template-columns:76px 1fr 36px;gap:8px;align-items:center;
  font-size:11px;
}
.demo-funnel .fu-step-name{
  font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.demo-funnel .fu-step-bar{height:10px;border-radius:6px;background:var(--surface-hover);overflow:hidden;display:block;}
.demo-funnel .fu-step-fill{
  display:block;height:100%;border-radius:6px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.25,.8,.25,1);
}
.cbwin.in .demo-funnel .fu-step-fill{transform:scaleX(1);}
.cbwin.in .demo-funnel .fu-step:nth-child(1) .fu-step-fill{transition-delay:.3s;}
.cbwin.in .demo-funnel .fu-step:nth-child(2) .fu-step-fill{transition-delay:.6s;}
.cbwin.in .demo-funnel .fu-step:nth-child(3) .fu-step-fill{transition-delay:.9s;}
.cbwin.in .demo-funnel .fu-step:nth-child(4) .fu-step-fill{transition-delay:1.2s;}
.demo-funnel .fu-step-pct{font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary);text-align:right;}
.demo-funnel .fu-gap{
  margin-top:10px;padding:9px 11px;border-radius:var(--radius-md);
  background:var(--gold-dim);border:1px solid rgba(183,121,31,.25);
  font-size:11.5px;color:var(--text-secondary);line-height:1.5;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease 1.6s,transform .5s ease 1.6s;
}
.cbwin.in .demo-funnel .fu-gap{opacity:1;transform:none;}
.demo-funnel .fu-gap strong{color:var(--text-primary);}

/* ============ 12. WAF GUARD DEMO ============
   A rule is checked; the guard refuses it with the number in front of
   the reader. The big figure is the product's most persuasive moment. */

.demo-waf .wg-check{
  display:flex;gap:8px;align-items:center;
  font-family:var(--font-mono);font-size:11.5px;
  background:var(--surface);border:1px solid var(--hairline-soft);
  border-radius:var(--radius-md);padding:9px 12px;margin-bottom:12px;
  opacity:0;transform:translateX(-10px);
  transition:opacity .45s ease,transform .45s ease;
}
.cbwin.in .demo-waf .wg-check{opacity:1;transform:none;}
.demo-waf .wg-check .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:0 0 auto;}

.demo-waf .wg-signal{
  display:flex;gap:8px;align-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);
  padding:4px 12px 4px 26px;
  opacity:0;transform:translateY(4px);
  transition:all .35s ease;
}
.cbwin.in .demo-waf .wg-signal{opacity:1;transform:none;}
.cbwin.in .demo-waf .wg-signal:nth-of-type(1){transition-delay:.4s;}
.cbwin.in .demo-waf .wg-signal:nth-of-type(2){transition-delay:.7s;}
.demo-waf .wg-signal .ok{color:var(--teal);}
.demo-waf .wg-signal .bad{color:var(--coral);font-weight:600;}

.demo-waf .wg-figure{
  text-align:center;padding:18px 0 14px;
  opacity:0;transform:scale(.92);
  transition:opacity .5s cubic-bezier(.34,1.3,.64,1),transform .5s cubic-bezier(.34,1.3,.64,1);
}
.cbwin.in .demo-waf .wg-figure{opacity:1;transform:scale(1);transition-delay:1.1s;}
.demo-waf .wg-figure-n{
  display:block;font-family:var(--font-display);font-size:44px;
  font-weight:700;line-height:1;color:var(--coral);
}
.demo-waf .wg-figure-l{
  display:block;font-size:12px;color:var(--text-secondary);margin-top:6px;line-height:1.5;
}

.demo-waf .wg-stamp{
  display:inline-block;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);border:2px solid var(--coral);border-radius:6px;
  padding:5px 14px;margin:8px 0 4px 26px;
  transform:rotate(-5deg) scale(2.2);opacity:0;
  transition:all .28s cubic-bezier(.34,1.5,.64,1);
}
.cbwin.in .demo-waf .wg-stamp{transform:rotate(-5deg) scale(1);opacity:1;transition-delay:1.6s;}

.demo-waf .wg-note{
  margin-top:10px;padding:9px 11px;
  font-size:11px;color:var(--text-muted);line-height:1.5;
  opacity:0;
  transition:opacity .4s ease 2s;
}
.cbwin.in .demo-waf .wg-note{opacity:1;}

@media (max-width:640px){
  .demo-funnel .fu-compare{grid-template-columns:1fr;}
  .demo-funnel .fu-step{grid-template-columns:60px 1fr 30px;}
  .demo-waf .wg-figure-n{font-size:34px;}
}

@media (prefers-reduced-motion:reduce){
  .demo-funnel .fu-card,.demo-funnel .fu-step-fill,.demo-funnel .fu-gap,
  .demo-waf .wg-check,.demo-waf .wg-signal,.demo-waf .wg-figure,
  .demo-waf .wg-stamp,.demo-waf .wg-note{
    transition:none!important;animation:none!important;
    opacity:1!important;transform:none!important;
  }
  .demo-funnel .fu-card.inflated .fu-val{text-decoration:line-through;opacity:.45;}
  .demo-waf .wg-stamp{transform:rotate(-5deg) scale(1);}
}