/* vender-online.es identity (25 Oct 2026). Loads after /_kit/kit.css and /_kit/brand.css and overrides both.
   Idea: the shop counter. Warm paper, ink lettering in a book serif, one bermellón (the shop sign), ochre for
   marketplaces, petrol for social selling. Price tags, an awning stripe, pegboard dots, parcel tape. Every number
   tabular. Colour carries meaning in the tool: bermellón = tienda propia, ocre = marketplace. See DESIGN.md. */

:root{
--accent:#C8401F;--accent-strong:#9E2F14;--accent-soft:#FBE6DC;--on-accent:#fff;
--ink:#1E1B24;--ink-2:#4A4553;--ink-3:#6E6774;
--line:#E5DACA;--line-2:#D6C8B3;
--bg:#FFFDF9;--paper:#FAF5EC;--paper-2:#F3EADB;--kraft:#E2CFAE;
--bg-soft:var(--paper-2);
--ochre:#B97C0E;--ochre-ink:#7D5306;--ochre-soft:#FBEFD6;
--petrol:#2C6A6E;--petrol-soft:#DDEDEC;
--tint:#FDF1EA;
--line-a:var(--line);--line-ah:#CDB89A;
--dark:#1E1B24;
--radius:14px;--radius-sm:9px;
--shadow-sm:0 1px 0 rgb(30 27 36/.05);
--shadow:0 1px 0 rgb(30 27 36/.06),0 8px 22px -12px rgb(60 40 20/.22);
--shadow-lg:0 1px 0 rgb(30 27 36/.06),0 22px 44px -18px rgb(60 40 20/.35);
--serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L",P052,Georgia,serif;
--font-display:var(--serif);
--stripe:repeating-linear-gradient(90deg,var(--accent) 0 16px,var(--paper) 16px 32px);
}
body.vo{background:var(--paper);color:var(--ink)}
.vo ::selection{background:#F7C9B5}
.vo h1,.vo h2,.vo h3{font-family:var(--serif);font-weight:700;letter-spacing:-.012em}
.vo h1{letter-spacing:-.022em;line-height:1.04}
.vo h3{letter-spacing:0}
.vo .num,.vo td,.vo .stat b,.vo .price,.vo .kicker-num,.vo input{font-variant-numeric:tabular-nums lining-nums}
.vo a{color:var(--accent-strong)}

/* header: paper counter with an awning stripe */
.vo .site-header{background:rgb(250 245 236/.94);border-bottom:0;box-shadow:none}
.vo .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:repeating-linear-gradient(90deg,var(--accent) 0 16px,#F0DCC4 16px 32px);-webkit-mask:radial-gradient(circle at 8px 0,#000 7.5px,transparent 8px) 0 0/16px 8px repeat-x;mask:radial-gradient(circle at 8px 0,#000 7.5px,transparent 8px) 0 0/16px 8px repeat-x;pointer-events:none}
.vo-brand{gap:8px;font-weight:700}
.vo .brand svg{width:34px;height:34px;border-radius:0;box-shadow:none}
.vo-word{font-family:var(--serif);font-size:1.22rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.vo-word i{font-style:normal;color:var(--accent)}
.vo .brand .tld{font-family:var(--font);font-size:.82em;font-weight:600;color:var(--ink-3);margin-left:1px}
.vo .nav a{border-radius:0;color:var(--ink-2);font-weight:600}
.vo .nav a:hover{background:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--line-2)}
.vo .nav a[aria-current="page"]{background:none;color:var(--accent-strong);box-shadow:inset 0 -2px 0 var(--accent)}
.vo .nav a[aria-current="page"]::after{display:none}

/* page head and hero: pegboard dots instead of the kit grid */
.vo .hero,.vo .page-head{background:var(--paper);border-bottom:1px solid var(--line)}
.vo .hero::before,.vo .page-head::before{background-image:radial-gradient(circle,var(--kraft) 1.6px,transparent 2.2px);background-size:22px 22px;mask-image:radial-gradient(ellipse 60% 90% at 100% 0%,#000 15%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 90% at 100% 0%,#000 15%,transparent 70%);opacity:.9}
.vo .hero::after,.vo .page-head::after{display:none}
.vo .page-head{padding:30px 0 30px}
.vo .page-head h1{font-size:clamp(2rem,7vw,3.1rem)}
.vo .eyebrow{font-family:var(--font);color:var(--accent-strong);letter-spacing:.1em;font-size:.74rem}
.vo .eyebrow::before{width:9px;height:9px;border-radius:50%;background:none;border:2px solid var(--accent)}
.vo .lead{color:var(--ink-2)}

/* buttons: shop signs with a hard ink edge */
.vo .btn{border-radius:10px;border:1.5px solid var(--ink);background:var(--accent);background-image:none;color:#fff;box-shadow:0 3px 0 var(--ink);font-weight:700;transition:transform .12s var(--ease),box-shadow .12s,background-color .15s}
.vo .btn:hover{background-color:var(--accent-strong);transform:translateY(1px);box-shadow:0 2px 0 var(--ink)}
.vo .btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.vo .btn:focus-visible{outline:3px solid #F2C14E;outline-offset:3px;border-radius:10px}
.vo .btn.ghost{background:var(--bg);color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 var(--line-2)}
.vo .btn.ghost:hover{background:var(--paper-2)}
.vo .btn.light{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.vo .btn.ink{background:var(--ink);color:var(--paper)}
.vo .btn.ink:hover{background:#000}

/* sections */
.vo .section.alt{background:var(--paper-2);border-block:1px solid var(--line)}
.vo .section-head h2{margin-bottom:.35em}
.vo .section.dark{background:var(--ink);background-image:radial-gradient(circle,rgb(255 255 255/.06) 1.4px,transparent 2px);background-size:22px 22px}
.vo .section.dark .eyebrow{color:#F2C14E}
.vo .section.dark .eyebrow::before{background:none;border-color:#F2C14E}

/* cards: shipping labels (punched hole, perforation) */
.vo .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.vo a.card{padding-right:44px}
.vo a.card::before{content:"";position:absolute;top:16px;right:16px;width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgb(60 40 20/.35)}
.vo a.card::after{content:"";position:absolute;top:0;bottom:0;right:38px;border-left:1.5px dashed var(--line-2)}
.vo a.card:hover{border-color:var(--line-ah);box-shadow:var(--shadow-lg)}
.vo .card .more{color:var(--accent-strong)}
.vo .card .icon,.vo .feature .icon{background:var(--paper-2);color:var(--accent-strong);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:12px}
.vo .card .kicker{display:block;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.vo .panel{background:var(--bg);border-color:var(--line);box-shadow:var(--shadow)}

/* the three ways to sell */
.vo-ways{display:grid;gap:16px}
.vo-way{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px;box-shadow:var(--shadow);border-top:6px solid var(--c,var(--accent))}
.vo-way.own{--c:var(--accent)} .vo-way.market{--c:var(--ochre)} .vo-way.social{--c:var(--petrol)}
.vo-way h3{font-size:1.3rem;margin-bottom:.3em}
.vo-way .tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.vo-way.market .tag{color:var(--ochre-ink)}
.vo-way p{color:var(--ink-2)}
.vo-way dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:14px 0 0;font-size:.94rem}
.vo-way dt{font-weight:700;color:var(--ink)}
.vo-way dd{margin:0;color:var(--ink-2)}

/* "what nobody puts in the price": a receipt of hidden lines */
.vo-hidden{list-style:none;margin:0;padding:6px 20px;background:var(--bg);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);counter-reset:h;position:relative}
.vo-hidden::before,.vo-hidden::after{content:"";position:absolute;left:0;right:0;height:8px;background:radial-gradient(circle at 6px 8px,var(--paper-2) 5.5px,transparent 6px) 0 0/12px 8px repeat-x}
.vo-hidden::before{top:-1px;transform:scaleY(-1)}
.vo-hidden::after{bottom:-1px}
.vo-hidden li{counter-increment:h;display:grid;grid-template-columns:2.2em 1fr;gap:0 10px;padding:14px 0;border-bottom:1.5px dashed var(--line-2)}
.vo-hidden li:last-child{border-bottom:0}
.vo-hidden li::before{content:counter(h,decimal-leading-zero);font-weight:700;color:var(--accent-strong);font-variant-numeric:tabular-nums}
.vo-hidden b{display:block;font-family:var(--serif);font-size:1.08rem}
.vo-hidden span{color:var(--ink-2);font-size:.95rem}

/* FAQ */
.vo .faq details{background:var(--bg);border-color:var(--line);border-radius:var(--radius-sm);box-shadow:none}
.vo .faq details[open]{border-color:var(--ink);box-shadow:0 3px 0 var(--line-2)}
.vo .faq summary h3{font-size:1.1rem}
.vo .faq summary::after{background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%231E1B24' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;border-radius:6px}
.vo .faq details[open] summary::after{transform:rotate(45deg)}
.vo .faq summary:hover h3{color:var(--accent-strong)}

/* comparison table */
.vo .compare,.vo .table-wrap{border-color:var(--line);border-radius:var(--radius-sm);background:var(--bg);box-shadow:var(--shadow)}
.vo thead th{background:var(--ink);color:var(--paper);letter-spacing:.06em}
.vo .compare thead th:first-child,.vo .table-wrap.sticky thead th:first-child{background:var(--ink)}
.vo tbody tr:nth-child(even){background:#FCF8F1}
.vo tbody tr:hover{background:var(--tint)}
.vo th,.vo td{border-bottom-color:var(--line)}
.vo .compare .is-pick{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}
.vo .compare thead .is-pick{background:var(--accent);color:#fff}
.vo td.best{background:var(--accent-soft)}

/* callout: a strip of parcel tape on top */
.vo .callout{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:26px 22px 20px;box-shadow:var(--shadow)}
.vo .callout::before{left:22px;top:-9px;bottom:auto;width:96px;height:18px;border-radius:2px;background:rgb(226 191 120/.75);transform:rotate(-3deg);box-shadow:0 1px 1px rgb(60 40 20/.12)}
.vo .callout-title{color:var(--accent-strong)}
.vo .notice{background:var(--bg);border-color:var(--line);border-left-color:var(--accent)}
.vo .notice.warn{background:var(--ochre-soft);border-color:#EBD3A0;border-left-color:var(--ochre)}

/* verdict */
.vo .verdict{border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 0 var(--line-2)}
.vo .verdict-head{background:var(--paper-2);border-bottom:1.5px dashed var(--line-2)}
.vo .verdict-head .badge{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vo .pros h3{color:#2B6A3F} .vo .cons h3{color:var(--accent-strong)}

/* partner: a hanging price tag */
.vo .partner{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow);padding-left:30px}
.vo .partner::before{inset:0 auto 0 0;width:8px;height:auto;background:var(--accent)}
.vo .partner.is-pick{border:1.5px solid var(--ink)}
.vo .partner .price{font-family:var(--font);background:var(--paper-2);color:var(--ink);border:1px solid var(--line-2)}

/* badges, chips */
.vo .badge{background:var(--paper-2);color:var(--ink-2);border-color:var(--line-2)}
.vo .chips>*,.vo .pill-list>li{background:var(--bg);border-color:var(--line-2);color:var(--ink-2)}
.vo .chips a:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}
.vo .chips [aria-current],.vo .chips .on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* breadcrumbs, meta line, sources */
.vo .breadcrumbs a{color:var(--ink-2)}
.vo .breadcrumbs li+li::before{content:"›";color:var(--ink-3)}
.vo .meta-line{gap:8px}
.vo .meta-line>*{border:1px solid var(--line-2);background:var(--bg);border-radius:999px;padding:3px 11px;font-size:.82rem}
.vo .meta-line>*+*::before{display:none}
.vo .sources-title{font-size:1.2rem}
.vo .sources{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:8px;counter-reset:s}
.vo .sources li{counter-increment:s;display:grid;grid-template-columns:2em 1fr;font-size:.94rem;overflow-wrap:anywhere}
.vo .sources li::before{content:"[" counter(s) "]";color:var(--ink-3);font-variant-numeric:tabular-nums}
.vo .meta-note{font-size:.88rem;color:var(--ink-3)}
.vo .disclosure{font-size:.8rem;color:var(--ink-3)}
.vo-aff{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;vertical-align:middle}

/* sticky bar and steps */
.vo .sticky-cta{background:rgb(250 245 236/.97);border-top:0;transition:transform .25s var(--ease)}
.vo .sticky-cta.away{transform:translateY(130%)}
.vo .sticky-cta::before{content:"";position:absolute;left:0;right:0;top:-5px;height:5px;background:var(--stripe)}
.vo .steps li::before{background:var(--ink);color:var(--paper);box-shadow:0 0 0 5px var(--paper-2)}
.vo .steps li:not(:last-child)::after{background:var(--line-2)}
.vo .checks li::before{background:var(--accent-soft)}
.vo .stat{background:var(--bg);border-color:var(--line)}
.vo .stat::before{background:var(--accent)}
.vo .cta-band{background:var(--accent-strong);background-image:radial-gradient(circle,rgb(255 255 255/.09) 1.4px,transparent 2px);background-size:22px 22px}
.vo .cta-band .btn{background:var(--paper);color:var(--ink);border-color:var(--ink)}

/* footer: ink counter, awning on top */
.vo .site-footer{background:var(--ink);background-image:none;border-top:0;color:#D9D2C8;margin-top:6px}
.vo .site-footer::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:var(--stripe)}
.vo .site-footer p,.vo .site-footer .legal{color:#BDB4A8}
.vo .site-footer a{color:#F4EEE4;text-decoration-color:rgb(255 255 255/.35)}
.vo .site-footer a:hover{color:#fff;text-decoration-color:#F2C14E}
.vo a.card{color:var(--ink)}
.vo .site-footer .brand .vo-word{color:var(--paper)}
.vo .site-footer .brand .tld{color:#A79E92}
.vo .site-footer .legal{border-top-color:rgb(255 255 255/.12)}
.vo .site-footer .legal a{color:#E5DED3}
.vo-tagline{max-width:40ch;margin-top:10px}
.vo-fine{font-size:.84rem;max-width:80ch;margin:28px 0 0;color:#BDB4A8}

/* ================= home hero with the teaser tag ================= */
.vo-hero{padding:22px 0 36px}
.vo-hero .wrap{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.vo-hero .wrap>*,.vo-tag .row>*{min-width:0}
.vo-next{margin:26px 0 0}
.vo-hero h1{font-size:clamp(2.05rem,8.6vw,3.7rem);max-width:15ch;margin-bottom:.15em}
.vo-hero h1 em{font-style:italic;color:var(--accent-strong)}
.vo-hero .lead{margin:0}
.vo-hero .hero-note{margin-top:4px}
.vo-tag{position:relative;background:var(--bg);border:1.5px solid var(--ink);border-radius:16px 16px 16px 16px;padding:22px 18px 18px;box-shadow:0 5px 0 var(--ink);margin-top:14px}
.vo-tag::before{content:"";position:absolute;top:-15px;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);box-shadow:inset 0 2px 3px rgb(60 40 20/.25)}
.vo-tag::after{content:"";position:absolute;top:-34px;left:50%;width:1.5px;height:24px;background:var(--ink);transform:rotate(14deg);transform-origin:bottom}
.vo-tag-title{display:block;text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 12px}
.vo-tag .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vo-tag label{display:block;font-size:.86rem;font-weight:700;margin-bottom:5px}
.vo-tag input{min-height:52px;font-size:1.3rem;font-weight:700;border-color:var(--ink);border-width:1.5px;border-radius:10px;background:var(--paper)}
.vo-tag input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgb(200 64 31/.18)}
.vo-ans{margin-top:14px;display:grid;gap:8px}
.vo-ans .line{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:8px;font-size:.95rem}
.vo-ans .line b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.vo-ans .dot{width:10px;height:10px;border-radius:50%;background:var(--c);align-self:center}
.vo-ans .line.own{--c:var(--accent)} .vo-ans .line.market{--c:var(--ochre)}
.vo-ans .line span{min-width:0}
.vo-ans .say{margin:6px 0 0;padding-top:10px;border-top:1.5px dashed var(--line-2);font-family:var(--serif);font-size:1.12rem;line-height:1.35}
.vo-ans .say strong{color:var(--accent-strong)}
.vo-ans .fine{font-size:.78rem;color:var(--ink-3);margin:0}
.vo-tag .btn{margin-top:14px}
.vo-spark{display:block;width:100%;height:auto;margin-top:6px}

/* ================= comparador ================= */
.vt-head{padding:16px 0 16px}
.vt-head h1{font-size:clamp(1.75rem,6.6vw,2.9rem);margin-bottom:.2em}
.vt-head .lead{font-size:1rem}
.vt-head .breadcrumbs{margin-bottom:8px}
.vt-head .eyebrow{margin-bottom:8px}
.vt-head .meta-line{margin-top:10px}
.vo .vt-sec{padding:16px 0 48px}
.vt{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.vt>*,.vt-num>*{min-width:0}
.vt-in{background:var(--bg);border:1.5px solid var(--ink);border-radius:var(--radius);padding:18px 16px 8px;box-shadow:0 4px 0 var(--ink);align-self:start}
.vt-in h2{font-size:1.25rem;margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.vt-in h2 small{font-family:var(--font);font-size:.78rem;font-weight:600;color:var(--ink-3)}
.vt-f{margin-bottom:14px}
.vt-f>label,.vt-f>.lab{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:.94rem;margin-bottom:6px}
.vt-f>label small,.vt-f>.lab small{font-weight:500;color:var(--ink-3)}
.vt-num{display:grid;grid-template-columns:48px 1fr 48px;gap:6px}
.vt-num input{text-align:center;font-size:1.25rem;font-weight:700;min-height:48px;border-radius:10px;border-color:var(--line-2);background:var(--paper)}
.vt-num button{min-height:48px;border:1.5px solid var(--line-2);background:var(--bg);border-radius:10px;font:700 1.3rem/1 var(--font);color:var(--ink);cursor:pointer}
.vt-num button:hover{border-color:var(--ink)}
.vt-f input[type=range]{margin-top:10px;accent-color:var(--accent);height:28px}
.vt-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vt-two>*{min-width:0}
.vt-two .vt-f>label{flex-direction:column;gap:0;line-height:1.25}
.vt-two .vt-num{grid-template-columns:38px minmax(0,1fr) 38px;gap:4px}
.vt-two input[type=range]{display:none}
.vt-more{border-top:1.5px dashed var(--line-2);margin:0 -16px;padding:0 16px}
.vt-more>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;font-weight:700;font-size:.94rem}
.vt-more>summary::-webkit-details-marker{display:none}
.vt-more>summary small{font-weight:500;color:var(--ink-3);flex:1}
.vt-more>summary::after{content:"+";width:24px;height:24px;border-radius:6px;background:var(--paper-2);display:grid;place-items:center;font-weight:800}
.vt-more[open]>summary::after{content:"\2212"}
.vt-more[open]{padding-bottom:4px}
.vo .seg{display:flex;width:100%;border-radius:10px;border-color:var(--line-2);background:var(--paper-2);padding:3px}
.vo .seg button{flex:1;border-radius:8px;font-weight:650;min-height:42px;padding:8px 6px;color:var(--ink-2)}
.vo .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.vt-out{min-width:0;display:grid;gap:16px;align-content:start}
.vt-say{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.vt-say .k{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.vt-say p.big{font-family:var(--serif);font-size:clamp(1.25rem,4.6vw,1.6rem);line-height:1.25;margin:0 0 10px}
.vt-say p.big strong{color:var(--accent-strong)}
.vt-say .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.vt-say .pair div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;border-top:4px solid var(--c);background:var(--paper)}
.vt-say .pair .own{--c:var(--accent)} .vt-say .pair .market{--c:var(--ochre)}
.vt-say .pair span{display:block;font-size:.8rem;color:var(--ink-2)}
.vt-say .pair b{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1.2}
.vt-say .pair em{display:block;font-style:normal;font-size:.82rem;color:var(--ink-3)}
.vt-chart{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px 10px 10px;box-shadow:var(--shadow)}
.vt-chart h3{font-size:1.05rem;margin:0 6px 2px}
.vt-chart p{font-size:.86rem;color:var(--ink-2);margin:0 6px 6px}
.vt-chart svg{display:block;width:100%;height:auto;touch-action:pan-y}
.vt-chart figcaption{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--ink-2);padding:4px 6px 0}
.vt-chart figcaption span{display:inline-flex;align-items:center;gap:6px}
.vt-chart figcaption i{width:18px;height:3px;border-radius:2px;background:var(--c)}
.vt-chart figcaption .own{--c:var(--accent)} .vt-chart figcaption .market{--c:var(--ochre)} .vt-chart figcaption .you{--c:var(--ink)}
.vt-chart figcaption .you i{height:0;border-top:2px dashed var(--ink);background:none}
.vt-ax{font:12px var(--font);fill:var(--ink-3);font-variant-numeric:tabular-nums}
.vt-grid{stroke:var(--line);stroke-width:1}
.vt-ln{fill:none;stroke-width:1.6;stroke-linejoin:round;opacity:.38}
.vt-ln.own{stroke:var(--accent)} .vt-ln.market{stroke:var(--ochre)}
.vt-ln.best{stroke-width:3.2;opacity:1}
.vt-you{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 4}
.vt-x circle{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.vt-x text{font:700 12px var(--font);fill:var(--ink)}
.vt-x rect{fill:#F2C14E;stroke:var(--ink);stroke-width:1.5}
.vt-tip text{font:600 12px var(--font);fill:var(--ink)}
.vo .prose .eyebrow+h2,.vo .eyebrow+h2{margin-top:0}
.vt-listh{font-size:1.35rem;margin:8px 0 -4px}
.vt-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vt-opt{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 16px 14px 22px;overflow:hidden}
.vt-opt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--c)}
.vt-opt.own{--c:var(--accent)} .vt-opt.market{--c:var(--ochre)}
.vt-opt.first{border:1.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.vt-opt.dim{opacity:.92}
.vt-top{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start}
.vt-pos{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1;color:var(--ink-3);font-variant-numeric:tabular-nums lining-nums;padding-top:2px}
.vt-opt.first .vt-pos{color:var(--accent-strong)}
.vt-name h3{margin:0;font-size:1.18rem;line-height:1.2}
.vt-name .kind{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.vt-opt.own .kind{color:var(--accent-strong)} .vt-opt.market .kind{color:var(--ochre-ink)}
.vt-cost{text-align:right}
.vt-cost b{display:block;font-size:1.45rem;line-height:1.1;font-variant-numeric:tabular-nums}
.vt-cost span{display:block;font-size:.8rem;color:var(--ink-3);white-space:nowrap}
.vt-meter{height:8px;border-radius:4px;background:var(--paper-2);margin:12px 0 4px;overflow:hidden}
.vt-meter i{display:block;height:100%;width:var(--w,0%);background:var(--c);border-radius:4px;transition:width .35s var(--ease)}
.vt-sub{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.86rem;color:var(--ink-2);margin:0}
.vt-sub b{color:var(--ink);font-variant-numeric:tabular-nums}
.vt-opt details{margin-top:10px;border-top:1.5px dashed var(--line-2);padding-top:8px}
.vt-opt summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--accent-strong);min-height:36px;display:flex;align-items:center}
.vt-rows{width:100%;font-size:.88rem;margin:6px 0 8px}
.vt-rows td{padding:6px 0;border-bottom:1px dotted var(--line-2);background:none}
.vt-rows td:last-child{text-align:right;white-space:nowrap;padding-left:10px;font-weight:650}
.vt-rows tr:hover,.vt-rows tr:nth-child(even){background:none}
.vt-why{font-size:.9rem;color:var(--ink-2);margin:8px 0 0}
.vt-flag{display:inline-block;margin:8px 6px 0 0;font-size:.78rem;font-weight:650;padding:2px 8px;border-radius:4px;background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line-2)}
.vt-flag.bad{background:var(--ochre-soft);color:var(--ochre-ink);border-color:#EBD3A0;font-weight:700}
.vt-usd{font-size:.84rem;color:var(--ochre-ink);margin:6px 0 0}
.vt-opt.nodata{background:var(--paper);box-shadow:none;border-style:dashed}
.vt-opt.nodata::before{opacity:.35}
.vt-aside{font-size:.9rem;color:var(--ink-2);background:var(--bg);border:1px dashed var(--line-2);border-radius:10px;padding:12px 14px;margin:0}
.vo .seg{flex-wrap:wrap}
.vt-src{font-size:.8rem;color:var(--ink-3);margin:6px 0 0;overflow-wrap:anywhere}
.vt-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px}
.vt-go .btn{min-height:42px;padding:9px 16px;font-size:.92rem}
.vt-go .nolink{font-size:.86rem;color:var(--ink-2)}
.vt-nodata{font-size:.88rem;color:var(--ink-3);margin:4px 0 0}
.vt-tools{display:flex;flex-wrap:wrap;gap:8px}
.vt-tools .btn{min-height:44px;padding:10px 16px;font-size:.92rem}
.vt-toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-size:.92rem;font-weight:600;z-index:60;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.vt-toast.on{opacity:1;transform:translate(-50%,0)}
.vt-empty{background:var(--ochre-soft);border:1px solid #EBD3A0;border-radius:10px;padding:12px 14px;margin:0;font-size:.95rem}
.vt-left{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.vt-left li{position:relative;padding-left:26px}
.vt-left li::before{content:"+";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:4px;background:var(--ochre-soft);color:var(--ochre-ink);font-weight:800;display:grid;place-items:center;font-size:.85rem;margin-top:.25em}

/* reveal on scroll (site.js adds .rv, then .in) */
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (min-width:640px){
.vo-ways{grid-template-columns:repeat(3,1fr)}
.vt-say .pair{gap:14px}
}
@media (min-width:900px){
.vo .page-head{padding:48px 0 44px}
.vo-hero{padding:48px 0 70px}
.vo-hero .wrap{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.vo-hero .vo-copy{grid-column:1;grid-row:1;align-self:end}
.vo-hero .vo-after{align-self:start}
.vo-hero .vo-tag{grid-column:2;grid-row:1 / span 2;margin-top:30px;transform:rotate(1.2deg)}
.vo-hero .vo-after{grid-column:1;grid-row:2}
.vo-tag{padding:30px 26px 24px}
.vt-head{padding:34px 0 26px}
.vt{grid-template-columns:330px 1fr;gap:26px}
.vt-in{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.vt-two{grid-template-columns:1fr;gap:0}
.vt-two .vt-f>label{flex-direction:row}
.vt-two .vt-num{grid-template-columns:48px minmax(0,1fr) 48px;gap:6px}
.vt-two input[type=range]{display:block}
.vt-sec{padding:30px 0 70px}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.vo-hero .vo-tag{transform:none}}
@media print{
body.vo{background:#fff}
.vo .site-header::after,.vo .site-footer::before,.vt-tools,.vt-num button,.vt-f input[type=range],.vo-tag::after{display:none}
.vt{grid-template-columns:1fr}.vt-in{position:static;box-shadow:none}
.vt-opt,.vt-chart,.vt-say{break-inside:avoid;box-shadow:none}
.vt-opt details>*{display:block}
.rv{opacity:1;transform:none}
}