/* ============================================================
   SiliconPath Law - Extraordinary & Exceptional Ability, v2.

   Built on the Services kinetic story: loads AFTER about-v2.css (tokens,
   glass hero, .pnv, .kx headings, [data-rv]) and services-v2.css (.skp
   stacking cards, .sko band + rail, .skf FAQ), and BEFORE cursor-layer.css.
   This file holds only what is this page's own:
     the pathway card details, the comparison matrix (rows light in one by
     one with the scroll), and the "beyond" plates on the band.
   EVERY MOTION RULE IS GATED ON html.st-scroll; without it the page is
   plain, static, complete content.
   ============================================================ */

/* ---- 2. PATHWAYS: extras on the shared stacking card ---------------- */
.xpw__eye{margin:0 0 14px}
.xpw__tl{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.xpw__tl b{padding:5px 11px;border-radius:999px;font-weight:800;letter-spacing:.06em;
  color:#fff;background:var(--brand)}
.skp__card--1 .xpw__tl{color:rgba(255,255,255,.8)}
.skp__card--1 .xpw__tl b{color:var(--brand);background:#fff}
.xpw__spec{margin:18px 0 0;padding:16px 18px;border-radius:14px;display:grid;gap:12px;
  background:var(--paper);border:1px solid var(--line)}
.xpw__spec dt{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand)}
.xpw__spec dd{margin:4px 0 0;color:var(--ink);font-size:.96rem;line-height:1.6;font-weight:600}
.skp__card--1 .xpw__spec{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.skp__card--1 .xpw__spec dt{color:#F0DCD8}
.skp__card--1 .xpw__spec dd{color:#fff}

/* ---- 3. COMPARISON MATRIX -------------------------------------------- */
.xcmp__h{max-width:26ch;margin-inline:auto;text-align:center}
.xcmp__wrap{margin:clamp(30px,3.6vw,48px) 0 0;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.xcmp__t{width:100%;border-collapse:collapse;font-size:.95rem}
/* Filled oxblood header, as the live page has it. A pale header row on a
   white table left the three visa names looking like part of the body
   rather than the columns they name. Set in the display face, not mono -
   these are the same three names the cards above use. */
.xcmp__t thead th{padding:clamp(16px,1.8vw,20px) clamp(14px,1.6vw,20px);
  background:var(--brand);
  font-family:var(--display);font-size:clamp(.96rem,1.3vw,1.08rem);
  font-weight:800;letter-spacing:-.012em;color:#fff;
  text-align:left;vertical-align:middle}
.xcmp__t tbody th{padding:clamp(14px,1.6vw,18px) clamp(14px,1.6vw,20px);
  background:var(--paper);
  font-size:.92rem;font-weight:700;color:var(--ink);text-align:left;
  vertical-align:top;white-space:nowrap}
.xcmp__t td{padding:clamp(14px,1.6vw,18px) clamp(14px,1.6vw,20px);
  color:var(--ink-2);line-height:1.62;vertical-align:top}
.xcmp__t tbody tr+tr th,.xcmp__t tbody tr+tr td{
  border-top:1px solid var(--line)}
/* Sponsorship is the row that actually separates the three, and it was the
   only highlighted row in the source. Weight, not colour-fill: a filled row
   in a table of five reads as a recommendation the copy does not make. */
.xcmp__t td.is-hi{color:var(--ink);font-weight:700}
.xcmp__tag{display:inline-block;padding:5px 12px;border-radius:999px;
  background:rgba(90,31,27,.08);border:1px solid rgba(90,31,27,.18);
  font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;color:var(--brand);white-space:nowrap}

/* PHONES: the table becomes three stacked blocks. A five-row, four-column
   table on a 390px screen can only be read by dragging it sideways, and a
   table nobody drags is a table nobody reads. Each column header is
   re-emitted per cell from the data-col attribute the markup carries. */
@media(max-width:719px){
  .xcmp__wrap{border:0;background:transparent;overflow:visible}
  .xcmp__t,.xcmp__t tbody,.xcmp__t tr,.xcmp__t td,.xcmp__t th{display:block}
  .xcmp__t thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .xcmp__t tbody tr{margin-bottom:14px;background:var(--white);
    border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .xcmp__t tbody tr+tr th,.xcmp__t tbody tr+tr td{border-top:0}
  .xcmp__t tbody th{background:var(--paper-2);white-space:normal;
    font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
    text-transform:uppercase}
  /* The label column is FIXED width, not auto. Space Mono gave EB-1A,
     EB-2 NIW and O-1A the same width for free; in a proportional face they
     differ, so `auto` let each row set its own column and the values lost
     their shared left edge. */
  .xcmp__t td{display:grid;grid-template-columns:82px 1fr;gap:12px;
    align-items:baseline;
    border-top:1px solid var(--line)}
  .xcmp__t td::before{content:attr(data-col);
    font-family:var(--mono);font-size:.66rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
}


/* Rows light in one by one as the matrix comes up the screen (the wrap's
   --progress: 0 as its top enters at the bottom, 1 as its bottom leaves). */
html.st-scroll .xcmp__t tbody tr{
  --t:clamp(0, calc((var(--progress,1) - .06 - var(--k,0) * .065) * 9), 1);
  opacity:calc(.12 + var(--t) * .88);
  transform:translateY(calc((1 - var(--t)) * 14px))}
html.st-scroll .xcmp__t thead th{
  --t:clamp(0, calc((var(--progress,1) - .03) * 9), 1);opacity:calc(.3 + var(--t) * .7)}

/* ---- 4. BEYOND THE THREE: plates on the shared .sko band ------------ */
@media(min-width:960px){
  .xby .sko__in{align-items:start}
  .xby .sko__txt{position:sticky;top:calc(var(--header-h,73px) + 48px)}
}
.xby .sko__b .xby__tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:10px}
.xby__badge{padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:.66rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:#F0DCD8}
.xby__meta{font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#E8CFC9}
.xby .sko__b strong{font-size:1.18rem}
.xby .sko__b span.xby__d{margin-top:6px}
/* .sko clips with overflow:hidden, which turns off position:sticky inside
   it; clip keeps the dots contained without that side effect. */
.xby{overflow:clip}
.xcmp__tag{justify-self:start}