/* ============================================================
   HUB PAGES v8 (2026-07-17) — Pricing (15830) + About (15831) page-specific layer.
   Source: Elie's virtualix-pricing.html + virtualix-about.html (Downloads handoff).
   The shared v8 base (grounds, type, .wrap, .eyebrow, .sec-head, .lede, .btn,
   .crumb, .faq, .book, .bl, .rv[forced visible], .ph, section padding) comes from
   service-v8.css — enqueued together via sandbox/vx-hub-v8.php (filemtime).
   Rules below are copied VERBATIM from the design files; only nav/footer/legend/
   .tog (unused) and rules already present in service-v8.css are omitted.
   NOTE: the design defines no .pv rule (value-framing lines render at body size,
   as in the prototype) — flagged to Elie, do not invent styling here.
   ============================================================ */

/* ===== PRICING (15830) ===== */
.phero{padding:150px var(--gut) clamp(50px,5vw,80px);text-align:center}
.phero h1{font-size:clamp(2.4rem,5vw,4rem);max-width:16ch;margin-inline:auto}
.phero .lede{margin:22px auto 0;max-width:52ch}
.phero-note{margin-top:22px;font-family:var(--fd);font-weight:600;font-size:.9rem;color:var(--cin-acc)}

.pnav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.pnav a{font-family:var(--fd);font-weight:620;font-size:.86rem;padding:10px 18px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);background:var(--white);transition:border-color .25s,color .25s,transform .2s var(--e)}
.pnav a:hover{border-color:var(--crimson);color:var(--ink);transform:translateY(-2px)}

.pband{margin-bottom:clamp(40px,5vw,64px)}
.pband-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.pband-h h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.pband-h p{font-size:.95rem;color:var(--ink-dim);max-width:48ch;margin-top:6px}
.pband-h a{font-family:var(--fd);font-weight:640;font-size:.86rem;color:var(--crimson-text);white-space:nowrap}
.ptiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media(max-width:900px){.ptiers{grid-template-columns:1fr}}
.pt{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px 26px;box-shadow:var(--shadow-sm);position:relative;transition:transform .3s var(--e),box-shadow .3s var(--e)}
.pt:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pt.best{border-color:var(--crimson);box-shadow:0 22px 54px -22px rgba(223,6,40,.28)}
.pt .flag2{position:absolute;top:-11px;left:24px;background:var(--crimson);color:#fff;font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:99px;padding:5px 12px}
.pt .tn{font-family:var(--fd);font-weight:700;font-size:1.15rem;margin-bottom:4px}
.pt .td{font-size:.85rem;color:var(--ink-dim);min-height:2.6em}
.pt .amt{font-family:var(--fd);font-weight:760;font-stretch:112%;font-size:2.3rem;line-height:1;color:var(--ink);margin:14px 0 2px;display:flex;align-items:baseline;gap:5px}
.pt .amt .per{font-family:var(--fb);font-weight:500;font-size:.82rem;color:var(--ink-dim)}
.pt .setup{font-size:.82rem;color:var(--ink-dim);padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.pt .cap{font-family:var(--fd);font-weight:620;font-size:.78rem;color:var(--crimson-text);margin:14px 0 0}
.pt ul{list-style:none;padding:12px 0 0;display:grid;gap:8px}
.pt li{font-size:.87rem;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
.pt li::before{content:'\2713';color:var(--crimson-text);font-weight:700;flex:0 0 auto}
.pt .btn{width:100%;justify-content:center;margin-top:20px;padding:12px}

.pline{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 30px;box-shadow:var(--shadow-sm);margin-bottom:16px}
@media(max-width:680px){.pline{grid-template-columns:1fr}}
.pline h3{font-size:1.25rem;margin-bottom:5px}
.pline p{font-size:.9rem;color:var(--ink-dim);max-width:52ch}
.pline .amt{font-family:var(--fd);font-weight:760;font-stretch:112%;font-size:2rem;color:var(--ink);white-space:nowrap;text-align:right}
.pline .amt small{display:block;font-family:var(--fb);font-weight:500;font-size:.78rem;color:var(--ink-dim)}

.ibundle-note{text-align:center;max-width:60ch;margin:0 auto clamp(36px,4vw,48px);color:var(--cin-soft)}
.btiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media(max-width:900px){.btiers{grid-template-columns:1fr}}
.bt2{background:rgba(242,238,230,.03);border:1px solid var(--cin-line);border-radius:22px;padding:32px 28px;position:relative;transition:transform .3s var(--e),border-color .3s,background .3s}
.bt2:hover{transform:translateY(-5px);border-color:var(--cin-acc);background:rgba(242,238,230,.06)}
.bt2.best{border-color:var(--cin-acc)}
.bt2 .flag2{position:absolute;top:-11px;left:26px;background:var(--cin-acc);color:#26100f;font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:99px;padding:5px 12px}
.bt2 .bn{font-family:var(--fd);font-weight:700;font-size:1.3rem;color:var(--cin-ink);margin-bottom:5px}
.bt2 .bd{font-size:.88rem;color:var(--cin-dim);min-height:3em}
.bt2 .amt{font-family:var(--fd);font-weight:760;font-stretch:112%;font-size:2.5rem;line-height:1;color:var(--cin-ink);margin:18px 0 2px;display:flex;align-items:baseline;gap:5px}
.bt2 .amt .per{font-family:var(--fb);font-weight:500;font-size:.82rem;color:var(--cin-dim)}
.bt2 .setup{font-size:.82rem;color:var(--cin-dim);padding-bottom:18px;border-bottom:1px solid var(--cin-line)}
.bt2 ul{list-style:none;padding:18px 0 0;display:grid;gap:9px}
.bt2 li{font-size:.9rem;color:var(--cin-soft);display:flex;gap:9px;align-items:flex-start}
.bt2 li::before{content:'\2713';color:var(--cin-acc);font-weight:700;flex:0 0 auto}
.bt2 .btn{width:100%;justify-content:center;margin-top:22px}

.vstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;margin-top:8px}
@media(max-width:760px){.vstrip{grid-template-columns:1fr}}
.vs{background:var(--surface-2);padding:28px 26px}
.vs b{font-family:var(--fd);font-weight:660;font-size:1.02rem;display:block;margin-bottom:6px}
.vs p{font-size:.88rem;color:var(--ink-dim)}

/* ===== ABOUT (15831) ===== */
.ahero{padding:150px var(--gut) clamp(70px,7vw,110px);position:relative;overflow:hidden}
.ahero-g{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,80px);align-items:center;max-width:1280px;margin-inline:auto}
@media(max-width:900px){.ahero-g{grid-template-columns:1fr}}
.ahero h1{font-size:clamp(2.4rem,5vw,4rem);max-width:14ch}
.ahero .lede{margin-top:22px;max-width:46ch}
.ahero-cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.portrait{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--cin-line);box-shadow:0 40px 90px -34px rgba(0,0,0,.85)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .plate{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(14,13,11,.6);border:1px solid var(--cin-line);border-radius:14px;padding:14px 17px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.portrait .plate b{font-family:var(--fd);font-weight:660;color:var(--cin-ink);display:block;font-size:.98rem}
.portrait .plate span{font-size:.8rem;color:var(--cin-soft)}

.moment{max-width:1000px;margin-inline:auto;text-align:center}
.moment .big{font-family:var(--fd);font-weight:680;font-stretch:108%;font-style:italic;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.moment .big em{color:var(--crimson-text);font-style:italic}
.moment .attr{margin-top:26px;font-size:.9rem;color:var(--ink-dim);font-family:var(--fd);font-weight:600}

.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:860px){.story{grid-template-columns:1fr}}
.story .col h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:14px}
.story .col p{font-size:1rem;margin-bottom:14px;max-width:60ch}
.story .col p:last-child{margin-bottom:0}
.pull{border-left:2px solid var(--crimson);padding-left:22px;margin:4px 0}
.pull p{font-family:var(--fd);font-weight:640;font-style:italic;font-size:1.2rem;color:var(--ink);line-height:1.4}

.prin-g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.prin-g{grid-template-columns:1fr}}
.prin{background:rgba(242,238,230,.03);border:1px solid var(--cin-line);border-radius:20px;padding:30px 28px;transition:border-color .3s,transform .3s var(--e),background .3s}
.prin:hover{border-color:var(--cin-acc);transform:translateY(-4px);background:rgba(242,238,230,.06)}
.prin .no{font-family:var(--fd);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cin-acc);display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.prin .no::before{content:'\2715';font-size:.9rem}
.prin h3{color:var(--cin-ink);font-size:1.2rem;margin-bottom:9px}
.prin p{font-size:.94rem;color:var(--cin-soft)}

.diff-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden}
@media(max-width:760px){.diff-g{grid-template-columns:1fr}}
.diff{background:var(--surface-2);padding:34px 28px}
.diff .k{font-family:var(--fd);font-weight:760;font-stretch:112%;font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--crimson);line-height:1;margin-bottom:10px}
.diff h4{font-family:var(--fd);font-weight:640;font-size:1.02rem;margin-bottom:6px}
.diff p{font-size:.9rem;color:var(--ink-dim)}

.markets{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.markets{grid-template-columns:1fr}}
.market{border:1px solid var(--cin-line);border-radius:18px;padding:28px 26px;background:rgba(242,238,230,.03)}
.market b{font-family:var(--fd);font-weight:680;font-size:1.15rem;color:var(--cin-ink);display:block;margin-bottom:6px}
.market span{font-size:.9rem;color:var(--cin-dim)}