/* ============================================================
   SiliconPath Law - E-1/E-2 treaty visas, v2.

   Built on the Services kinetic story: loads AFTER about-v2.css (tokens,
   glass hero, .pnv, .kx headings, [data-rv], .wlit) 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 intro (photo + lit statement + advantages), the routes deck
     tweaks, the E-1 vs E-2 table (rows light in with the scroll), the
     why/who pair, the method band extras, pricing and the government
     fees note.
   EVERY MOTION RULE IS GATED ON html.st-scroll; without it the page is
   plain, static, complete content. Every variable has a fallback.

   Page rhythm: hero (paper) -> intro paper -> routes sand -> table paper
   -> why/who sand -> BAND -> pricing sand -> FAQ paper -> closing (sand).
   Palette: oxblood #5A1F1B / #7C2E28, paper, ink. No yellow.
   ============================================================ */

#criteria,#compare,#approach,#pricing,#faq{scroll-margin-top:calc(var(--header-h,73px) + 16px)}

/* Kx words never break at their own hyphen ("E-/1/E-2"). Under
   html.st-scroll the shared kit makes words inline-block, which already
   holds them together; without it (reduced motion, no JS) they are plain
   inline spans and the browser breaks after the hyphen. */

/* Inline links in body copy. */
.tlnk{color:var(--brand,#5A1F1B);text-decoration:none;
  border-bottom:1px solid var(--line-2,#D0C1B4);transition:border-color .3s ease}
.tlnk:hover{border-bottom-color:var(--brand,#5A1F1B)}

/* ---- 2. INTRO ---------------------------------------------------------- */
.xint__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
.xint__fig{margin:0;position:relative;overflow:hidden;border-radius:var(--r-lg,22px);
  box-shadow:0 40px 70px -46px rgba(62,20,17,.55)}
.xint__fig picture{display:block}
/* A genuine photograph (no baked-in text), so cropping is safe. */
.xint__fig img{display:block;width:100%;height:auto;object-fit:cover;
  aspect-ratio:16/10;object-position:50% 38%}
.xint__fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(90,31,27,.08),rgba(90,31,27,.08))}
.xint__h{margin:0 0 clamp(28px,3.4vw,48px);max-width:none}
.xint__big{margin:0;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.5;font-weight:700;
  letter-spacing:-.018em;color:var(--ink,#241310);max-width:46ch}
.xedge{margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none;display:grid}
.xedge__i{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line,#E4DACF)}
.xedge__i:last-child{border-bottom:1px solid var(--line,#E4DACF)}
.xedge__ic{grid-row:span 2;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--brand-wash,#F3E8E5);color:var(--brand,#5A1F1B);font-size:1rem;
  border:1px solid rgba(90,31,27,.12)}
.xedge__i strong{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink,#241310)}
.xedge__p{color:var(--ink-2,#6E5C55);font-size:.95rem;line-height:1.66}
@media(min-width:1024px){
  .xint__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .xint__fig img{aspect-ratio:4/5}
  /* The photo holds while the statement lights up. */
  .xint__fig{position:sticky;top:calc(var(--header-h,73px) + 32px)}
}
html.st-scroll .xedge__i{transition-delay:calc(var(--k,0) * 80ms)}

/* ---- 3. THE THREE ROUTES (shared .skp deck) --------------------------- */
.xrt__hd{display:grid;gap:14px 48px;align-items:end}
.xrt__l{margin:0;max-width:60ch}
@media(min-width:1024px){.xrt__hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* One paragraph per route: the deck's 320px card floor left them hollow. */
.xrt .skp__card{align-items:center}
@media(min-width:900px){.xrt .skp__card{min-height:220px}}
.xrt__d{font-size:clamp(1.02rem,1.3vw,1.14rem)}
.xrt .skp__t{margin-top:18px}

/* ---- 4. E-1 vs E-2 ----------------------------------------------------- */
.xcm__h{margin:0;max-width:26ch}
.xcm__l{margin:16px 0 0;max-width:72ch}
.xcm__note{margin:clamp(20px,2.4vw,28px) 0 0;color:var(--ink-2,#6E5C55);font-size:.95rem;
  line-height:1.7;max-width:80ch}
/* The board itself: compare-board.css (shared with O-1A). */

/* ---- 5. WHY + WHO ------------------------------------------------------ */
.xww__grid{display:grid;gap:clamp(16px,2.2vw,28px);align-items:stretch}
@media(min-width:860px){.xww__grid{grid-template-columns:1fr 1fr}}
.xww__c{border-radius:var(--r-lg,22px);padding:clamp(26px,3vw,42px);
  background:var(--white,#fff);border:1px solid var(--line,#E4DACF);
  box-shadow:0 18px 40px -34px rgba(90,31,27,.4)}
.xww__t{margin:0 0 16px;font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.18;color:var(--ink,#241310)}
.xww__c .body{margin:0;font-size:1rem;line-height:1.72}
.xww__tags{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.xww__tags li{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  padding:6px 12px;border-radius:999px;white-space:nowrap;color:var(--brand,#5A1F1B);
  background:var(--paper,#F7F4EF);border:1px solid var(--line-2,#D0C1B4)}

/* ---- 6. METHOD on the shared .sko band --------------------------------- */
/* .sko clips with overflow:hidden, which turns off position:sticky inside
   it; clip keeps the dots contained without that side effect. */
.xmth{overflow:clip}
.xmth .sko__txt .h-sec{max-width:18ch}
.xmth__l{margin:20px 0 0;color:rgba(255,255,255,.86);font-size:clamp(1.02rem,1.4vw,1.16rem);
  line-height:1.65;max-width:46ch}
@media(min-width:960px){
  .xmth .sko__in{align-items:start}
  .xmth .sko__txt{position:sticky;top:calc(var(--header-h,73px) + 48px)}
}
.xmth .sko__rail{gap:12px}
/* Five plates, not the kit's three: each lights a little sooner so the
   last is lit while it is still mid-screen, and the rail fill keeps pace. */
html.st-scroll .xmth .sko__p{
  --t:clamp(0, calc((var(--progress,1) - .2 - var(--k,0) * .07) * 8), 1)}
.xmth .sko__rail::after{transform:scaleY(clamp(0, calc((var(--progress,1) - .18) * 2.3), 1))}
.xmth .sko__b strong{font-size:1.08rem;line-height:1.3}
.xmth .sko__b span{font-size:.95rem}
.xmth__note{margin:clamp(30px,3.6vw,46px) 0 0;display:flex;gap:14px;align-items:flex-start;
  padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-left:4px solid #F0DCD8;
  color:rgba(255,255,255,.84);font-size:.92rem;line-height:1.66}
.xmth__note i{flex:none;font-size:1.15rem;color:#F0DCD8;line-height:1.4}

/* ---- 7. PRICING -------------------------------------------------------- */
.xprc__h{margin:0;max-width:20ch}
.xprc__l{margin:16px 0 0;max-width:64ch}
.xprc__g{margin:clamp(34px,4vw,52px) 0 0;display:grid;gap:clamp(16px,2vw,24px);align-items:stretch}
@media(min-width:880px){.xprc__g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.xprc__c{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg,22px);
  padding:clamp(26px,2.8vw,34px);background:var(--white,#fff);border:1px solid var(--line,#E4DACF);
  box-shadow:0 18px 40px -34px rgba(90,31,27,.4)}
.xprc__c--hero{color:#fff;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,#7C2E28) 0%,var(--brand,#5A1F1B) 55%,#3E1411 100%);
  box-shadow:0 30px 60px -34px rgba(62,20,17,.7)}
/* Inside the card's top-right corner, as on the other visa pages: the card is a
   cursor spotlight (.st-spot = overflow:hidden), so a badge hung above its top
   edge was cut off. */
.xprc__badge{position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);z-index:3;padding:6px 14px;border-radius:999px;
  background:var(--ink,#241310);color:#fff;font-family:var(--mono);font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.xprc__lbl{margin:0;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand,#5A1F1B)}
.xprc__c--hero .xprc__lbl{color:#F0DCD8}
.xprc__n{margin:8px 0 0;font-size:clamp(1.16rem,1.7vw,1.4rem);font-weight:800;letter-spacing:-.024em;
  line-height:1.25;color:var(--ink,#241310)}
.xprc__c--hero .xprc__n{color:#fff}
.xprc__v{margin:12px 0 0;font-size:clamp(2.1rem,3.2vw,2.7rem);font-weight:900;letter-spacing:-.04em;
  line-height:1;color:var(--brand,#5A1F1B)}
.xprc__c--hero .xprc__v{color:#fff}
.xprc__f{margin:22px 0 0;padding:22px 0 0;list-style:none;display:grid;gap:12px;flex:1 1 auto;
  align-content:start;border-top:1px solid var(--line,#E4DACF)}
.xprc__c--hero .xprc__f{border-top-color:rgba(255,255,255,.18)}
.xprc__f li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  color:var(--ink-2,#6E5C55);font-size:.94rem;line-height:1.6}
.xprc__f i{color:var(--brand,#5A1F1B);font-size:.95rem;line-height:1.5}
.xprc__c--hero .xprc__f li{color:rgba(255,255,255,.9)}
.xprc__c--hero .xprc__f i{color:#F0DCD8}
.xprc__go{margin-top:26px;width:100%}
.xprc__c--hero .xprc__go{background:#fff;color:var(--brand,#5A1F1B);border-color:#fff}
.xprc__c--hero .xprc__go:hover{background:var(--paper,#F7F4EF);color:var(--brand,#5A1F1B)}
.xprc__notes{margin:clamp(22px,2.6vw,30px) 0 0;display:grid;gap:8px}
.xprc__notes p{margin:0;color:var(--ink-2,#6E5C55);font-size:.86rem;line-height:1.66;max-width:90ch}
/* Plans rise in one by one as the row comes up the screen (desktop, where
   they sit side by side). */
@media(min-width:880px){
  html.st-scroll .xprc__c{
    --t:clamp(0, calc((var(--progress,1) - .05 - var(--k,0) * .06) * 6), 1);
    opacity:calc(.1 + var(--t) * .9);
    transform:translateY(calc((1 - var(--t)) * 48px)) scale(calc(.97 + var(--t) * .03))}
}

/* Government fees: a factual disclosure, not a plan feature. */
.xgov{margin:clamp(24px,3vw,36px) 0 0;display:flex;gap:16px;align-items:flex-start;
  padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg,22px);
  background:var(--paper,#F7F4EF);border:1px dashed var(--line-2,#D0C1B4)}
.xgov__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--brand-wash,#F3E8E5);color:var(--brand,#5A1F1B);font-size:1.15rem}
.xgov__t{margin:0 0 8px;font-size:1rem;font-weight:800;letter-spacing:-.015em;line-height:1.35;
  color:var(--ink,#241310)}
.xgov p{margin:0;color:var(--ink-2,#6E5C55);font-size:.93rem;line-height:1.7;max-width:92ch}

/* ---- 8. FAQ (shared .skf) ---------------------------------------------- */
.xfq .skf__hd .h-sec{max-width:16ch}
.xfq__p{margin:18px 0 0;max-width:40ch}
.xfq__b{margin:24px 0 0}