/* VVFulfillment — English pages (/en/*) layout & components.
 * Palette, radius, shadow and font stacks come from /styles/tokens.css.
 * This file defines layout only; it must not redeclare colour values. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}

/* ── Nav ── */
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border)}
.nav-inner{max-width:1140px;margin:0 auto;padding:0 1.6rem;height:62px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-family:var(--font-display);font-size:.95rem;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.logo span{color:var(--color-brand)}
.nav-links{display:flex;gap:1.25rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--color-text-muted);font-size:.8rem;font-weight:500}
.nav-links a:hover{color:var(--color-text)}
.nav-cta{background:var(--color-bg-inverse);color:var(--color-text-inverse)!important;padding:.5rem 1.1rem;border-radius:100px;font-size:.78rem;font-weight:600}
.lang{border:1px solid var(--color-border);padding:.35rem .75rem;border-radius:100px;font-size:.74rem!important;font-weight:600!important}

/* ── Layout ── */
.wrap{max-width:940px;margin:0 auto;padding:0 1.6rem}
section{padding:4rem 0}
.split{border-top:1px solid var(--color-border)}
.eyebrow{font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-brand);margin-bottom:.9rem}
h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.05rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-bottom:1.1rem}
h2{font-family:var(--font-display);font-size:clamp(1.45rem,3vw,2rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;margin-bottom:1rem}
h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
p{color:var(--color-text-muted);margin-bottom:1rem}
.lede{font-size:1.05rem;color:var(--color-text-muted);max-width:640px}
.hero{padding:5rem 0 3.5rem;border-bottom:1px solid var(--color-border)}
.hero .note{font-size:.78rem;color:var(--color-text-subtle);margin-top:1.4rem}

/* ── Buttons ── */
.btn{display:inline-block;background:var(--color-bg-inverse);color:var(--color-text-inverse);padding:.85rem 1.7rem;border-radius:100px;text-decoration:none;font-size:.88rem;font-weight:700;transition:opacity .2s}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

/* ── Cards & grids ── */
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.4rem;background:var(--color-bg)}
.card p{font-size:.9rem;margin-bottom:0}
.card .k{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-brand);font-weight:700;margin-bottom:.5rem}

/* ── Tables ── */
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.87rem}
th{text-align:left;padding:.75rem .9rem;background:var(--color-bg-muted);font-weight:700;border-bottom:2px solid var(--color-border)}
td{padding:.75rem .9rem;border-bottom:1px solid var(--color-border);color:var(--color-text-muted)}

/* ── Lists ── */
ul.ticks{list-style:none;margin:1rem 0}
ul.ticks li{padding-left:1.4rem;position:relative;margin-bottom:.5rem;color:var(--color-text-muted);font-size:.92rem}
ul.ticks li::before{content:"\2192";position:absolute;left:0;color:var(--color-brand);font-weight:700}
ol{margin:1rem 0 1.2rem 1.3rem;color:var(--color-text-muted)}
ol li{margin-bottom:.5rem}

/* ── Boxes ── */
.callout{background:var(--color-bg-tint);border-radius:var(--radius-md);padding:1.4rem 1.6rem;margin:1.6rem 0;font-size:.92rem;color:var(--color-text-muted)}
.callout strong{color:var(--color-text)}
.muted-box{background:var(--color-bg-muted);border-radius:var(--radius-md);padding:1.4rem 1.6rem;margin:1.6rem 0;font-size:.85rem;color:var(--color-text-subtle)}
.muted-box a{color:var(--color-text-muted)}

/* ── Pricing ── */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin:1.8rem 0}
.plan{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.7rem}
.plan.hi{border-color:var(--color-brand);box-shadow:var(--shadow-card)}
.plan .tag{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand);font-weight:700;margin-bottom:.6rem}
.plan .amt{font-family:var(--font-display);font-size:2.2rem;font-weight:800;letter-spacing:-.03em}
.plan .amt small{font-size:.85rem;font-weight:600;color:var(--color-text-subtle)}
.plan .cond{font-size:.8rem;color:var(--color-text-subtle);margin:.4rem 0 1rem}

/* ── FAQ ── */
details{border-bottom:1px solid var(--color-border);padding:1rem 0}
summary{cursor:pointer;font-weight:700;font-size:.95rem;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--color-brand);font-weight:800}
details[open] summary::after{content:"\2013"}
details p{margin:.8rem 0 0;font-size:.9rem}

/* ── CTA ── */
.cta-band{background:var(--color-bg-tint);border-radius:var(--radius-xl);padding:3rem 2rem;text-align:center}
.cta-band h2{margin-bottom:.6rem}
.cta-band p{max-width:520px;margin:0 auto 1.4rem}

/* ── Footer ── */
footer{background:var(--color-bg-inverse);color:var(--color-text-inverse);padding:3rem 0;margin-top:4rem;font-size:.8rem;opacity:.96}
.foot-inner{max-width:940px;margin:0 auto;padding:0 1.6rem}
footer a{color:var(--color-text-inverse)}
.foot-legal{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08);font-size:.72rem;line-height:1.7;opacity:.62}

@media(max-width:760px){
  .g2,.g3,.price-grid{grid-template-columns:1fr}
  .nav-links li:not(.keep){display:none}
  section{padding:3rem 0}
  .hero{padding:3.5rem 0 2.5rem}
}

/* Return-only signup form */
.lead-form{max-width:620px;margin:1.6rem auto 0;text-align:left;position:relative}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.lead-form label{display:block;font-size:.82rem;font-weight:700;color:var(--color-text);margin-bottom:.9rem}
.lead-form .opt{font-weight:400;color:var(--color-text-subtle)}
.lead-form input[type=text],.lead-form input[type=email],.lead-form select,.lead-form textarea{display:block;width:100%;margin-top:.35rem;padding:.7rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);font:inherit;font-size:.92rem;color:var(--color-text)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--color-bg-inverse);outline-offset:1px}
.lead-pills{border:0;padding:0;margin:0 0 .9rem;min-width:0}
.lead-pills legend{font-size:.82rem;font-weight:700;margin-bottom:.45rem;padding:0}
.lead-pills label{display:inline-flex;align-items:center;gap:.4rem;margin:0 .5rem .5rem 0;padding:.45rem .85rem;border:1px solid var(--color-border);border-radius:100px;font-weight:600;background:var(--color-bg);cursor:pointer}
.lead-pills label:has(input:checked){background:var(--color-bg-inverse);color:var(--color-text-inverse);border-color:var(--color-bg-inverse)}
.lead-form .lead-consent{font-size:.78rem;color:var(--color-text-subtle);max-width:none;margin:.2rem 0 0;text-align:center}
.lead-form .btn-row{margin-top:1.1rem}
.lead-form button.btn{border:0;cursor:pointer;font:inherit;font-size:.88rem;font-weight:700}
.lead-form button.btn:disabled{opacity:.6;cursor:default}
.lead-form .lead-status{margin:.9rem auto 0;font-size:.88rem;text-align:center;max-width:none}
.lead-form .lead-status:empty{display:none}
.lead-form .lead-status.ok{color:var(--color-text)}
.lead-form .lead-status.err{color:var(--color-text);font-weight:700}
.lead-form .lead-status a{color:inherit}
@media (max-width:640px){.lead-grid{grid-template-columns:1fr}}