/* ============================================================
   SiliconPath Law - the three visa pages (EB-1A, EB-2 NIW, O-1A), v2.

   One page-family sheet: the three pages share one skeleton
   (hero -> split -> criteria -> paired -> method band -> pricing -> FAQ
   -> closing; O-1A swaps "paired" for its O-1A vs H1B table), so they
   share one treatment and differ only in content.

   Built on the Services kinetic story: loads AFTER about-v2.css (tokens,
   glass hero, .pnv, .kx headings, [data-rv], .wlit, .fin) and
   services-v2.css (.sko band + rail, .skf FAQ), and BEFORE
   cursor-layer.css (.st-spot, the badge).
   This file holds only what is these pages' own:
     .vint  the image split with its advantage list
     .vcr   the criteria grid - PINNED while its cards rise in one by one
            (only where the whole grid fits the screen: visa-story.js adds
            .is-pin after measuring; otherwise it is a plain grid)
     .vpr   the paired "why / who" columns
     .vmt   the method steps on the shared dark band, lighting along a rail
     .vcmp  O-1A vs H1B (rows light in one by one with the scroll)
     .vpc   the pricing tiers (plans light in one by one with the scroll)
     .vfq   the FAQ heading column extras
   EVERY MOTION RULE IS GATED ON html.st-scroll; without it (reduced
   motion, JS off) the page is plain, static, complete content. Every
   variable has a resting fallback.
   ============================================================ */
.vint,.vcr,.vpr,.vpc,.vcmp{--k-ease:cubic-bezier(.2,.8,.2,1)}

/* Hero tiles jump to these: clear the fixed header. */
#criteria,#why,#compare,#pricing,#faq{scroll-margin-top:calc(var(--header-h,73px) + 12px)}

/* A little tighter than the shared kinetic rhythm: these pages run eight
   sections, and two full paddings between each read as empty paper. */
html.st-scroll :is(.vint,.vpr,.vcmp,.vpc,.vfq){padding-block:clamp(40px,4.6vw,66px)}
html.st-scroll .vmt{padding-block:clamp(52px,5.8vw,84px)}

/* Sand ground (the band between two paper sections). */
.vsand{background:var(--paper-2);border-block:1px solid var(--line)}

/* In-copy links. */
.vlnk{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(90,31,27,.35);
  transition:border-color .25s ease}
.vlnk:hover{border-bottom-color:var(--brand)}

/* ======================================================================
   2. SPLIT - image beside the intro and its advantage list
   ====================================================================== */
.vint__g{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
.vint__fig{margin:0;position:relative}
.vint__fig img{display:block;width:100%;height:auto;border-radius:var(--r-lg);
  box-shadow:0 40px 70px -46px rgba(62,20,17,.55)}
.vint__h{margin:0;max-width:20ch}
.vint__p{margin:18px 0 0;max-width:60ch;font-size:1.02rem}
.vadv{margin:clamp(22px,2.6vw,32px) 0 0;padding:0;list-style:none;display:grid;gap:12px}
.vadv__i{display:flex;gap:16px;align-items:flex-start;border-radius:18px;padding:18px 20px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 14px 30px -26px rgba(90,31,27,.35)}
.vadv__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  font-size:1.05rem;color:var(--brand);background:var(--brand-wash);border:1px solid rgba(90,31,27,.12)}
.vadv__b strong{display:block;font-size:1.04rem;font-weight:800;letter-spacing:-.018em;
  line-height:1.3;color:var(--ink)}
.vadv__b>span{display:block;margin-top:4px;color:var(--ink-2);font-size:.95rem;line-height:1.6}
@media(min-width:960px){
  .vint__g{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}

/* ======================================================================
   3. CRITERIA - pinned; the cards rise in one by one
   ====================================================================== */
.vcr{position:relative}
.vcr__sticky{padding-block:clamp(56px,7vw,100px)}
.vcr__hd{display:grid;gap:14px 48px;align-items:end}
.vcr__hd .h-sec{margin:0;max-width:22ch}
.vcr__hd .lead{margin:0;max-width:56ch}
.vcr__ext{color:inherit;text-decoration:none;border-bottom:3px solid rgba(90,31,27,.3);
  transition:border-color .25s ease}
.vcr__ext:hover{border-bottom-color:var(--brand)}
@media(min-width:1024px){.vcr__hd{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.vcr__bar{display:none}
.vcr__g{margin:clamp(26px,3.4vw,44px) 0 0;padding:0;list-style:none;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
/* Tablet and small laptop: an even column count (set per page as --cm in
   VisaCriteria.astro), never auto-fill, which left 10 criteria as 3/3/3/1. */
@media(min-width:600px) and (max-width:1099px){.vcr__g{grid-template-columns:repeat(var(--cm,2),minmax(0,1fr))}}
@media(min-width:1100px){.vcr__g{grid-template-columns:repeat(var(--c,4),minmax(0,1fr))}}
.vcr__c{display:flex;flex-direction:column;border-radius:18px;padding:clamp(18px,1.7vw,22px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -34px rgba(90,31,27,.4)}
.vcr__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vcr__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;font-size:1.05rem;
  color:var(--brand);background:var(--brand-wash);border:1px solid rgba(90,31,27,.12)}
.vcr__n{font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--ink-3)}
.vcr__t{margin:14px 0 0;font-size:1.04rem;font-weight:800;letter-spacing:-.018em;line-height:1.28;color:var(--ink)}
.vcr__p{margin:6px 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.58}
/* Three wide cards (EB-2 NIW's prongs) carry more text. */
.vcr--wide .vcr__t{font-size:clamp(1.1rem,1.5vw,1.28rem)}
.vcr--wide .vcr__p{font-size:.97rem;line-height:1.68}
.vcr--wide .vcr__c{padding:clamp(22px,2.4vw,30px)}

/* Pinned (visa-story.js adds .is-pin only when the heading and the whole
   grid fit on one screen; a grid that cannot fit simply scrolls).
   The stage is NOT a centred 100svh box: a short grid (EB-2 NIW's three
   prongs) left ~280px of empty sand above and below it. Instead the stage
   sticks just under the header at its own height, and a spacer after it
   (.vcr__run) is the distance it holds for; visa-story.js writes
   --progress from how far through that spacer the page has scrolled. */
.vcr__run{display:none}
html.st-scroll .vcr__sticky{padding-block:clamp(40px,4.6vw,66px)}
html.st-scroll .vcr.is-pin{padding-block:clamp(40px,4.6vw,66px)}
html.st-scroll .vcr.is-pin .vcr__sticky{position:sticky;top:calc(var(--header-h,73px) + 16px);padding-block:0}
html.st-scroll .vcr.is-pin .vcr__run{display:block;height:calc(var(--n,8) * 11svh + 10svh)}
/* Card k rises as the section's progress passes its turn; the last one
   lands about 75% of the way through, so the full grid holds a moment. */
html.st-scroll .vcr.is-pin .vcr__c{
  --t:clamp(0, calc(var(--progress,1) * var(--n,8) / .72 - var(--k,0)), 1);
  opacity:calc(.08 + var(--t) * .92);
  transform:translateY(calc((1 - var(--t)) * 56px)) scale(calc(.95 + var(--t) * .05))}
html.st-scroll .vcr.is-pin .vcr__bar{display:block;margin-top:18px;height:3px;max-width:280px;
  border-radius:3px;background:var(--line-2);overflow:hidden}
html.st-scroll .vcr.is-pin .vcr__bar i{display:block;height:100%;transform-origin:0 50%;background:var(--brand);
  transform:scaleX(clamp(0, calc(var(--progress,1) / .72), 1))}

/* ======================================================================
   4. PAIRED - why / who, side by side
   ====================================================================== */
.vpr__g{display:grid;gap:clamp(16px,2vw,24px)}
@media(min-width:900px){.vpr__g{grid-template-columns:1fr 1fr}}
.vpr__c{border-radius:var(--r-lg);padding:clamp(26px,3.2vw,44px);
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(62,20,17,.45)}
.vpr__t{margin:0;font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;color:var(--ink)}
.vpr__p{margin:14px 0 0;color:var(--ink-2);font-size:1.02rem;line-height:1.74}
.vpr__c--dark{border-color:transparent;
  background:radial-gradient(120% 90% at 100% 0%,rgba(182,90,80,.3) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%)}
.vpr__c--dark .vpr__t{color:#fff}
.vpr__c--dark .vpr__p{color:rgba(255,255,255,.88)}
.vtags{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.vtags li{font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:6px 12px;border-radius:999px;
  color:var(--brand);background:var(--paper);border:1px solid var(--line-2)}
/* The chips drop in one after another once the card is revealed. */
html.st-scroll .vpr__c .vtags li{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .6s var(--k-ease);
  transition-delay:calc(.25s + var(--k,0) * 70ms)}
html.st-scroll .vpr__c.in .vtags li{opacity:1;transform:none}

/* ======================================================================
   5. METHOD - the shared dark band (.sko): heading holds, steps light
   along the rail, words light up in the lead
   ====================================================================== */
/* .sko clips with overflow:hidden, which turns off position:sticky inside
   it; clip keeps the dots contained without that side effect. */
.vmt{overflow:clip}
.vmt .sko__in{align-items:start}
.vmt .sko__txt .h-sec{max-width:20ch}
@media(min-width:960px){
  .vmt .sko__txt{position:sticky;top:calc(var(--header-h,73px) + 48px)}
}
.vmt .sko__big{font-size:clamp(1.08rem,1.6vw,1.38rem)}
/* Five or six steps, not Services' three: lit from the section's progress,
   the last ones only lit as the band was leaving. Each step carries its OWN
   StringProgress instead and lights as it rises into the lower third. */
html.st-scroll .vmt .sko__p{--t:clamp(0, calc((var(--progress,1) - .1) * 7), 1)}
.vmt__n{font-size:.86rem;font-weight:900;letter-spacing:.02em}
.vmt .sko__b strong{font-size:1.16rem}
.vmt__lnk{color:#fff;text-decoration:none;border-bottom:1px solid rgba(240,220,216,.55);
  transition:border-color .25s ease}
.vmt__lnk:hover{border-bottom-color:#fff}
.vmt__note{margin:clamp(30px,4vw,48px) 0 0;display:flex;gap:16px;align-items:flex-start;
  border-radius:18px;padding:18px 22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-left:4px solid #F0DCD8}
.vmt__note i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-size:1.1rem;color:#fff;background:rgba(255,255,255,.12)}
.vmt__note p{margin:0;color:rgba(255,255,255,.88);font-size:.97rem;line-height:1.65}

/* ======================================================================
   O-1A vs H1B - a real table; rows light in one by one with the scroll
   ====================================================================== */
.vcmp__h{margin-inline:auto;max-width:26ch;text-align:center}
.vcmp__l{margin:16px auto 0;text-align:center}
/* The board itself: compare-board.css (shared with E-1/E-2). */

/* ======================================================================
   6. PRICING - the three plans light in one by one with the scroll
   ====================================================================== */
.vpc__h{margin-inline:auto;max-width:22ch;text-align:center}
.vpc__l{margin:16px auto 0;text-align:center}
.vpc__g{margin:clamp(30px,3.6vw,48px) 0 0;display:grid;gap:16px;align-items:stretch}
@media(min-width:960px){.vpc__g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vpc__c{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,36px);background:var(--white);border:1px solid var(--line);
  box-shadow:0 30px 60px -44px rgba(62,20,17,.45)}
.vpc__badge{position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;color:var(--brand);background:#F0DCD8}
.vpc__label{display:block;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.vpc__name{margin:10px 0 0;font-size:clamp(1.3rem,1.9vw,1.6rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.2;color:var(--ink)}
.vpc__price{margin:14px 0 0;font-size:clamp(2.2rem,3.6vw,2.9rem);font-weight:900;letter-spacing:-.04em;
  line-height:1;color:var(--ink)}
.vpc__list{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:0}
.vpc__list li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:.95rem;line-height:1.55}
.vpc__list i{flex:none;margin-top:1px;color:var(--brand);font-size:1.05rem}
.vpc__go{margin-top:auto;width:100%}
.vpc__list{margin-bottom:26px}
.vpc__c--hero{border-color:transparent;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(182,90,80,.32) 0%,rgba(182,90,80,0) 60%),
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%);
  box-shadow:0 40px 70px -40px rgba(62,20,17,.7)}
.vpc__c--hero .vpc__label{color:#F0DCD8}
.vpc__c--hero .vpc__name,.vpc__c--hero .vpc__price{color:#fff}
.vpc__c--hero .vpc__list li{color:rgba(255,255,255,.88);border-top-color:rgba(255,255,255,.18)}
.vpc__c--hero .vpc__list i{color:#F0DCD8}
.vpc__c--hero .cta{background:#fff;color:var(--brand)}
.vpc__c--hero .cta:hover{color:var(--brand)}
.vpc__note{margin:clamp(22px,2.6vw,32px) auto 0;max-width:86ch;text-align:center;
  color:var(--ink-2);font-size:.92rem;line-height:1.65}
html.st-scroll .vpc__c{
  --t:clamp(0, calc((var(--progress,1) - .05 - var(--k,0) * .07) * 8), 1);
  opacity:calc(.12 + var(--t) * .88);
  transform:translateY(calc((1 - var(--t)) * 26px))}

/* ======================================================================
   7. FAQ - extras in the sticky heading column (.skf)
   ====================================================================== */
.vfq .skf__hd .h-sec{max-width:16ch}
.vfq__p{margin:16px 0 0;max-width:40ch}
.vfq__b{margin:22px 0 0}

@media(prefers-reduced-motion:reduce){
  .vlnk,.vcr__ext,.vmt__lnk{transition:none}
}
/* Unnumbered steps (EB-1A, EB-2 NIW: their sources do not number them):
   the marker is a plain lit dot. */
.vmt__n--dot::before{content:"";width:10px;height:10px;border-radius:50%;background:#F0DCD8;
  box-shadow:0 0 0 5px rgba(240,220,216,.18)}