/* ============================================================
   Comparison board (src/components/v2/CompareBoard.astro).
   Used by O-1A (versus: one raised panel, checks) and E-1/E-2 (two equal
   raised panels). Loads after about-v2.css (tokens) and before
   cursor-layer.css - whose .st-spot sets position:relative, hence the
   doubled selector on the panel.
   Motion is gated on html.st-scroll; without it the board is complete.
   ============================================================ */
.cbd{position:relative;isolation:isolate;margin:clamp(44px,5vw,64px) 0 20px;border-radius:26px;
  background:var(--white,#fff);border:1px solid var(--line,#E4DACF);
  box-shadow:0 40px 80px -56px rgba(62,20,17,.45)}
.cbd .cbd__panel{position:absolute;z-index:0;top:-20px;bottom:-20px;left:var(--l);width:var(--w);
  border-radius:26px;
  background:radial-gradient(120% 70% at 50% 0%,rgba(182,90,80,.45) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(170deg,var(--brand-2,#7C2E28) 0%,var(--brand,#5A1F1B) 50%,#3E1411 100%);
  box-shadow:0 34px 70px -30px rgba(62,20,17,.65),0 0 0 1px rgba(255,255,255,.06) inset}
/* Two routes: the panels sit apart so they read as two equal options. */
.cbd--dual .cbd__panel{left:calc(var(--l) + 7px);width:calc(var(--w) - 14px)}
.cbd__t{position:relative;z-index:1;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.98rem}
.cbd__t th,.cbd__t td{padding:clamp(16px,1.7vw,20px) clamp(16px,1.8vw,26px);text-align:left;vertical-align:middle;background:transparent}
.cbd--dual .cbd__t td.is-p,.cbd--dual .cbd__t thead th.is-p{padding-inline:clamp(22px,2.2vw,32px)}
.cbd__t thead th{padding-block:clamp(22px,2.4vw,30px) clamp(18px,2vw,24px);
  font-size:clamp(1.08rem,1.55vw,1.32rem);font-weight:900;letter-spacing:-.025em;color:var(--ink-2,#6E5C55)}
.cbd__t thead th.is-p{color:#fff}
.cbd__hd{display:inline-flex;align-items:center;gap:12px}
.cbd__hd i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;font-size:1rem;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24)}
.cbd__t tbody th{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--ink,#241310)}
.cbd__t tbody th::before{content:"";display:inline-block;width:7px;height:7px;margin-right:12px;
  border-radius:50%;background:var(--brand,#5A1F1B);vertical-align:middle;box-shadow:0 0 0 4px var(--brand-wash,#F3E8E5)}
.cbd__t td{color:var(--ink-2,#6E5C55);line-height:1.6}
.cbd__t td.is-p{color:#fff;font-weight:600}
.cbd:not(.cbd--dual) .cbd__t td.is-p{font-weight:700}
.cbd__ok{display:flex;align-items:flex-start;gap:12px}
.cbd__ok i{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;
  font-size:.8rem;color:var(--brand,#5A1F1B);background:#F0DCD8}
/* Row rules: ink hairlines on the board, faint white ones on a panel. */
.cbd__t tbody th,.cbd__t tbody td{border-top:1px solid var(--line,#E4DACF)}
.cbd__t tbody td.is-p{border-top-color:rgba(255,255,255,.12)}
@media(hover:hover){
  .cbd__t tbody th,.cbd__t tbody td{transition:background-color .25s ease}
  .cbd__t tbody tr:hover th,.cbd__t tbody tr:hover td:not(.is-p){background:rgba(243,232,229,.5)}
  .cbd__t tbody tr:hover td.is-p{background:rgba(255,255,255,.06)}
}

/* PHONES: every row is a full-width card - the criterion on top, then one
   line per visa, each under its own small label. The versus column keeps
   its oxblood; two equal routes stay white with oxblood labels. */
@media(max-width:719px){
  .cbd{background:transparent;border:0;box-shadow:none;margin-top:28px}
  .cbd .cbd__panel{display:none}
  .cbd__t,.cbd__t tbody,.cbd__t tr,.cbd__t th,.cbd__t td{display:block}
  .cbd__t colgroup{display:none}
  .cbd__t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .cbd__t tbody tr{margin-bottom:14px;border-radius:20px;overflow:hidden;
    background:var(--white,#fff);border:1px solid var(--line,#E4DACF);box-shadow:0 18px 34px -28px rgba(62,20,17,.45)}
  .cbd__t tbody th{padding:15px 18px;border:0;background:var(--paper-2,#EFE9E1);font-size:.98rem}
  .cbd__t tbody td,.cbd__t tbody td.is-p{padding:14px 18px;border-top:1px solid var(--line,#E4DACF);
    font-size:.95rem;color:var(--ink,#241310);font-weight:600}
  .cbd__t tbody tr th + td{border-top:0}
  .cbd__t td::before{content:attr(data-col);display:table;margin-bottom:8px;padding:3px 10px;border-radius:999px;
    font-family:var(--mono);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-2,#6E5C55);background:var(--paper,#F7F4EF);border:1px solid var(--line,#E4DACF)}
  .cbd__t td.is-p::before{color:var(--brand,#5A1F1B);background:var(--brand-wash,#F3E8E5);border-color:rgba(90,31,27,.18)}
  /* The versus column: an oxblood strip. */
  .cbd:not(.cbd--dual) .cbd__t td.is-p{color:#fff;border-top:0;
    background:linear-gradient(165deg,var(--brand-2,#7C2E28),var(--brand,#5A1F1B))}
  .cbd:not(.cbd--dual) .cbd__t td.is-p::before{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
  .cbd:not(.cbd--dual) .cbd__t td:not(.is-p){color:var(--ink-2,#6E5C55);font-weight:500}
  .cbd__ok{gap:10px}
  .cbd__ok i{width:22px;height:22px;font-size:.72rem}
}

/* MOTION - the wrap's --progress runs 0 (its top at the bottom of the
   screen) to 1 (its bottom at the top). Panels rise and glow in first,
   then the rows light one by one and each check pops. */
html.st-scroll .cbd .cbd__panel{
  --t:clamp(0, calc((var(--progress,1) - .02 - var(--pk,0) * .015) * 6), 1);
  transform:translateY(calc((1 - var(--t)) * 48px)) scaleY(calc(.9 + var(--t) * .1));
  transform-origin:50% 0;opacity:calc(.2 + var(--t) * .8)}
html.st-scroll .cbd__t thead th{--t:clamp(0, calc((var(--progress,1) - .04) * 8), 1);opacity:calc(.2 + var(--t) * .8)}
html.st-scroll .cbd__t tbody tr{
  --t:clamp(0, calc((var(--progress,1) - .08 - var(--k,0) * .045) * 9), 1);
  opacity:calc(.12 + var(--t) * .88);
  transform:translateY(calc((1 - var(--t)) * 14px))}
html.st-scroll .cbd__ok i{
  --p:clamp(0, calc((var(--progress,1) - .12 - var(--k,0) * .045) * 9), 1);
  transform:scale(var(--p)) rotate(calc((1 - var(--p)) * -90deg))}
@media(prefers-reduced-motion:reduce){.cbd__t tbody th,.cbd__t tbody td{transition:none}}