/* ============================================================================
   VORPCEL SITE SYSTEM (24/10/2026)

   Plain enterprise layout: dark top and footer, light page body, regular-weight
   headlines, thin rules, short paragraphs. No drawn product mock-ups, no glow,
   no gradients, no scroll animations, no monospace labels. Color is the brand
   only where it means something: the primary action.

   Tokens are light by default; `.on-dark` redefines the same tokens for the
   dark areas (nav, hero, bands, footer), so a component written once reads
   on both.
   ============================================================================ */

.v-wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.v-wrap{padding:0 20px}}

/* ---------- type ---------- */
.v-h1{font-size:clamp(2.5rem,5.2vw,4.4rem);font-weight:400;letter-spacing:-.03em;line-height:1.04;color:var(--ink);text-wrap:balance}
.v-h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:400;letter-spacing:-.025em;line-height:1.1;color:var(--ink);text-wrap:balance}
.v-h3{font-size:1.18rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.v-lead{font-size:1.12rem;line-height:1.65;color:var(--ink-dim);max-width:60ch}
.v-p{font-size:1rem;line-height:1.7;color:var(--ink-dim);max-width:68ch}
.v-p+.v-p{margin-top:16px}
.v-small{font-size:.9rem;line-height:1.6;color:var(--muted)}
.v-kicker{font-size:.95rem;font-weight:600;color:var(--accent-ink);margin-bottom:14px}

/* ---------- actions ---------- */
.v-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.v-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.v-btn-primary{background:var(--btn-bg);color:var(--btn-ink)}
.v-btn-primary:hover{background:var(--btn-bg-hover)}
.v-btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-2)}
.v-btn-secondary:hover{border-color:var(--ink)}
.v-link{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.v-link:hover{text-decoration-thickness:2px}
.v-btn:focus-visible,.v-link:focus-visible,.v-cell a:focus-visible,.v-faq summary:focus-visible,.v-related a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- bands ---------- */
.v-band{padding:104px 0;background:var(--bg);color:var(--ink)}
.v-band.alt{background:var(--panel)}
.v-band.tight{padding:72px 0}
@media (max-width:760px){.v-band{padding:72px 0}.v-band.tight{padding:56px 0}}
.v-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.v-head .v-p{margin-left:auto}
.v-head.solo{grid-template-columns:1fr}
.v-head.solo .v-p{margin-left:0;margin-top:20px}
@media (max-width:860px){.v-head{grid-template-columns:1fr;gap:20px}.v-head .v-p{margin-left:0}}

/* ---------- hero (dark) ---------- */
.v-hero{padding:96px 0 104px;background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.v-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px;align-items:start}
.v-hero .v-lead{margin-top:28px}
.v-crumb{font-size:.92rem;color:var(--muted);margin-bottom:26px}
.v-crumb a{color:var(--ink-dim)}
.v-crumb a:hover{color:var(--ink)}
.v-glance{border-top:1px solid var(--line-2)}
.v-glance li{list-style:none;padding:15px 0;border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink-dim);line-height:1.45}
.v-glance li b{color:var(--ink);font-weight:600}
.v-glance-title{font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:14px}
@media (max-width:960px){.v-hero{padding:64px 0 72px}.v-hero-grid{grid-template-columns:1fr;gap:48px}}

/* ---------- cells: a bordered grid of short entries ---------- */
.v-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line)}
.v-cells.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.v-cells.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.v-cell{padding:34px 32px 38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.v-cell .v-h3{font-size:1.3rem;font-weight:500}
.v-cell p{font-size:.97rem;line-height:1.65;color:var(--ink-dim)}
.v-cell .go{margin-top:auto;padding-top:14px;align-self:flex-start;color:var(--accent-ink);font-weight:600;font-size:.95rem}
.v-cell .go:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){.v-cells,.v-cells.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.v-cells,.v-cells.two,.v-cells.four{grid-template-columns:1fr}.v-cell{padding:28px 22px 30px}}

/* ---------- steps: a real sequence ---------- */
.v-steps{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.v-step{padding:28px 32px 0 0}
.v-step+.v-step{padding-left:32px;border-left:1px solid var(--line)}
.v-step .n{font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
.v-step .v-h3{margin-top:18px}
.v-step p{margin-top:10px;font-size:.97rem;line-height:1.65;color:var(--ink-dim)}
@media (max-width:900px){.v-steps{grid-template-columns:1fr}.v-step,.v-step+.v-step{padding:24px 0;border-left:none;border-bottom:1px solid var(--line)}}

/* ---------- features: heading on the left, text and points on the right ---------- */
.v-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;padding:48px 0;border-top:1px solid var(--line)}
.v-feature:last-child{border-bottom:1px solid var(--line)}
.v-feature .v-h3{font-size:1.55rem;font-weight:400;letter-spacing:-.02em}
.v-points{margin-top:22px}
.v-points li{list-style:none;position:relative;padding:0 0 0 22px;margin-top:12px;font-size:.98rem;line-height:1.6;color:var(--ink-dim)}
.v-points li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:2px;background:var(--ink)}
.v-points li b{color:var(--ink);font-weight:600}
@media (max-width:900px){.v-feature{grid-template-columns:1fr;gap:18px;padding:36px 0}}

/* ---------- two columns of long text ---------- */
.v-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
@media (max-width:900px){.v-split{grid-template-columns:1fr;gap:24px}}

/* ---------- table ---------- */
.v-table-wrap{overflow-x:auto;border-top:1px solid var(--line-2)}
.v-table{width:100%;border-collapse:collapse;min-width:620px}
.v-table th{text-align:left;font-size:.9rem;font-weight:600;color:var(--ink);padding:18px 24px 18px 0;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.v-table td{padding:18px 24px 18px 0;border-bottom:1px solid var(--line);font-size:.96rem;line-height:1.55;color:var(--ink-dim);vertical-align:top}
.v-table td:first-child{color:var(--ink);font-weight:500}

/* ---------- facts: only true figures ---------- */
.v-facts{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--line-2)}
.v-fact{padding:28px 28px 0 0}
.v-fact+.v-fact{padding-left:28px;border-left:1px solid var(--line)}
.v-fact b{display:block;font-size:2.6rem;font-weight:400;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.v-fact span{display:block;margin-top:8px;font-size:.95rem;line-height:1.55;color:var(--ink-dim)}
@media (max-width:760px){.v-facts{grid-template-columns:1fr}.v-fact,.v-fact+.v-fact{padding:22px 0;border-left:none;border-bottom:1px solid var(--line)}}

/* ---------- FAQ ---------- */
.v-faq{border-top:1px solid var(--line-2)}
.v-faq details{border-bottom:1px solid var(--line)}
.v-faq summary{cursor:pointer;list-style:none;padding:24px 48px 24px 0;font-size:1.12rem;font-weight:500;color:var(--ink);position:relative;line-height:1.4}
.v-faq summary::-webkit-details-marker{display:none}
.v-faq summary::after{content:"";position:absolute;right:6px;top:32px;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .15s}
.v-faq details[open] summary::after{transform:rotate(-135deg);top:38px}
.v-faq .a{padding:0 0 26px;max-width:76ch}
.v-faq .a p{font-size:1rem;line-height:1.7;color:var(--ink-dim)}
.v-faq .a p+p{margin-top:12px}

/* ---------- related ---------- */
.v-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.v-related a{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid var(--line);background:var(--bg);transition:border-color .15s}
.v-related a:hover{border-color:var(--ink)}
.v-related b{font-size:1.15rem;font-weight:500;color:var(--ink)}
.v-related span{font-size:.95rem;line-height:1.6;color:var(--ink-dim)}
.v-related em{font-style:normal;margin-top:auto;padding-top:8px;font-size:.92rem;font-weight:600;color:var(--accent-ink)}
@media (max-width:900px){.v-related{grid-template-columns:1fr}}

/* ---------- closing band ---------- */
.v-cta{padding:96px 0;background:var(--bg);color:var(--ink)}
.v-cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.v-cta .v-p{margin-top:18px}
@media (max-width:860px){.v-cta-grid{grid-template-columns:1fr;gap:8px}}

/* ---------- note on claims ---------- */
.v-note{font-size:.88rem;line-height:1.6;color:var(--muted);margin-top:28px;max-width:80ch}