/* BuyMe studio design kit v2 (2026-10-24). One stylesheet for every venture site, served at /_kit/kit.css.
   Brand colours come from /_kit/brand.css (--accent, --accent-strong, --accent-soft); every tint is derived from
   them with color-mix(). Mobile first (375 px base, 640 and 900 px steps). No web fonts, no external requests,
   no JS. Every v1 class still works. Written compact on purpose (one rule per line). Catalogue: BUYME/design/README.md */

:root{
--accent:#1f6feb;/* brand.css overrides these three per venture */
--accent-strong:#1858c0;
--accent-soft:#eaf1fd;
--on-accent:#ffffff;
--ink:#12151b;
--ink-2:#464d5b;
--ink-3:#636b78;
--line:#e3e6eb;
--line-2:#d3d8df;
--bg:#ffffff;
--bg-soft:color-mix(in srgb,var(--accent-soft) 35%,#f6f7f9);
--a10:color-mix(in srgb,var(--accent) 10%,transparent);
--a20:color-mix(in srgb,var(--accent) 20%,transparent);
--a30:color-mix(in srgb,var(--accent) 30%,transparent);
--a50:color-mix(in srgb,var(--accent) 50%,transparent);
--line-a:color-mix(in srgb,var(--accent) 12%,var(--line));
--line-ah:color-mix(in srgb,var(--accent) 45%,var(--line));
--tint:color-mix(in srgb,var(--accent) 7%,#fff);
--ok:#157a3c;
--no:#b42318;
--warn-bg:#fff8e6;
--warn-line:#e9c46a;
--dark:color-mix(in srgb,var(--accent) 14%,#0e1117);
--radius:16px;
--radius-sm:10px;
--shadow-sm:0 1px 2px rgb(16 24 40/.06);
--shadow:0 1px 2px rgb(16 24 40/.05),0 6px 20px -4px rgb(16 24 40/.08);
--shadow-lg:0 2px 4px rgb(16 24 40/.05),0 18px 40px -10px color-mix(in srgb,var(--accent) 22%,rgb(16 24 40/.25));
--wrap:1120px;
--measure:68ch;
--font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-display:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--ease:cubic-bezier(.2,.7,.2,1);
color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:17px/1.65 var(--font);color:var(--ink);background:var(--bg);overflow-wrap:break-word;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--accent-strong);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--accent) 22%,#fff)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.1rem,7.4vw,3.6rem);line-height:1.06;letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(1.5rem,4.6vw,2.15rem);letter-spacing:-.022em;font-weight:750}
h3,.h3{font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.calc>h2:first-child,.form>h2:first-child,.panel>h2:first-child{font-size:1.35rem}
p,ul,ol{margin:0 0 1em}
p{text-wrap:pretty}
strong,b{font-weight:700}
small,.small{font-size:.875rem}
.muted{color:var(--ink-2)}
.center{text-align:center}
.num,.stat b,.price,td,.kicker-num{font-variant-numeric:tabular-nums}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
summary>h2,summary>h3{display:inline}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* layout */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px}
.narrow{max-width:760px}
.section{padding:52px 0;position:relative}
.section.alt{background:var(--bg-soft);border-block:1px solid var(--line-a)}
.section:not(.alt,.dark,.accent)+.section:not(.alt,.dark,.accent){padding-top:8px}
.section-head{max-width:680px;margin-bottom:28px}
.section-head p{color:var(--ink-2);font-size:1.06rem}
.section-head.center,.center .section-head{margin-inline:auto}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
.split{display:grid;gap:28px;grid-template-columns:1fr;align-items:start}
.split>*,.grid>*,.partner>*{min-width:0}
.grid:not(:last-child),.verdict:not(:last-child){margin-bottom:28px}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;padding-top:8px;padding-bottom:4px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:1.14rem;letter-spacing:-.025em;min-height:44px}
.brand svg{width:30px;height:30px;flex:none;border-radius:9px;box-shadow:0 2px 6px -1px var(--a50)}
.brand .tld{color:var(--ink-3);font-weight:600}
.nav{display:flex;gap:2px;overflow-x:auto;width:100%;margin:0 -8px;padding-bottom:2px;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;position:relative;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.94rem;padding:10px 10px;border-radius:9px;min-height:44px;display:inline-flex;align-items:center;transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--bg-soft)}
.nav a[aria-current="page"]{color:var(--accent-strong);background:var(--accent-soft)}

/* hero: layered brand glow + faint grid,CSS only */
.hero,.page-head{position:relative;isolation:isolate;overflow:hidden}
.hero{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 70%,#fff),var(--bg) 96%);padding:44px 0 52px;border-bottom:1px solid var(--line-a)}
.hero::before,.page-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:linear-gradient(var(--a10) 1px,transparent 1px),linear-gradient(90deg,var(--a10) 1px,transparent 1px);
background-size:44px 44px;mask-image:radial-gradient(ellipse 70% 80% at 80% 0%,#000 10%,transparent 70%)}
.hero::after,.page-head::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:720px;height:720px;right:-260px;top:-380px;border-radius:50%;
background:radial-gradient(closest-side,var(--a20),transparent)}
.hero h1{max-width:16ch}
.hero .narrow h1,.hero.center h1{max-width:none}
.hero.center{text-align:center}
.hero.center .lead{margin-inline:auto}
.hero.center .actions{justify-content:center}
.hero.center::after{right:50%;transform:translateX(50%)}
.hero.compact{padding:32px 0 34px}
.hero.compact h1{font-size:clamp(1.9rem,6vw,2.8rem)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:14px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent)}
.center>.eyebrow::before,.hero.center .eyebrow::before{display:none}
.lead{font-size:clamp(1.08rem,2.6vw,1.28rem);line-height:1.55;color:var(--ink-2);max-width:640px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-note{margin-top:14px;font-size:.9rem;color:var(--ink-3)}
.hero .calc,.hero .panel,.hero .card{box-shadow:var(--shadow-lg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;border:1px solid var(--accent-strong);background:var(--accent);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));color:var(--on-accent);font:650 1rem/1.2 var(--font);text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgb(16 24 40/.12),0 6px 16px -6px var(--a50),inset 0 1px 0 rgba(255,255,255,.18);transition:background-color .15s,box-shadow .15s,transform .15s var(--ease)}
.btn:hover{background-color:var(--accent-strong);transform:translateY(-1px);box-shadow:0 2px 4px rgb(16 24 40/.12),0 10px 22px -8px var(--a50)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,#fff);outline-offset:3px;border-radius:999px}
.btn.ghost{background:#fff;background-image:none;color:var(--accent-strong);border-color:var(--line-ah);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn.block{width:100%}
.btn.lg{min-height:56px;padding:15px 30px;font-size:1.06rem}
.btn.light{background:#fff;color:var(--accent-strong);border-color:#fff}
.btn.light:hover{background:var(--accent-soft)}

/* cards */
.card,.panel,.partner,.calc,.form,.tool,.faq details,.notice,.callout,.verdict,.toc{color:var(--ink)}
.card{display:block;position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);text-decoration:none;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-2)}
.card p:last-child{margin-bottom:0}
.card .icon,.feature .icon{width:46px;height:46px;border-radius:13px;color:var(--accent-strong);display:grid;place-items:center;margin-bottom:16px;flex:none;
background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,#fff),var(--accent-soft));box-shadow:inset 0 0 0 1px var(--a20)}
.card .icon svg,.feature .icon svg{width:24px;height:24px}
a.card:hover,.card:has(a.more:hover){border-color:var(--line-ah);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card .more,a.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:650;color:var(--accent-strong)}
.card .more::after,.more::after{content:"\2192";transition:transform .2s var(--ease)}
a.card:hover .more::after,a.more:hover::after{transform:translateX(3px)}
.card.flat{box-shadow:none;background:var(--bg)}
.section.alt .card.flat{border-color:var(--line-a)}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}

/* numbered steps with a connecting line */
.steps{list-style:none;padding:0;margin:0 0 1em;counter-reset:s;display:grid;gap:18px}
.steps li{counter-increment:s;position:relative;padding:4px 0 0 56px;min-height:40px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:750;display:grid;place-items:center;box-shadow:0 0 0 5px var(--accent-soft);font-variant-numeric:tabular-nums}
.steps li:not(:last-child)::after{content:"";position:absolute;left:18px;top:46px;bottom:-14px;width:2px;background:linear-gradient(var(--accent-soft),var(--a20))}
.steps strong{display:block;margin-bottom:2px}

/* check list */
.checks{list-style:none;padding:0}
.checks li{position:relative;padding-left:32px;margin-bottom:10px}
.checks li::before{content:"";position:absolute;left:0;top:.2em;width:21px;height:21px;border-radius:50%;background:var(--accent-soft)}
.checks li::after{content:"";position:absolute;left:0;top:.2em;width:21px;height:21px;background:var(--accent-strong);
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat}

/* notice and callout */
.notice{background:var(--tint);border:1px solid var(--line-a);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:16px 18px}
.notice:not(:last-child){margin-bottom:1.2em}
.notice.warn{background:var(--warn-bg);border-color:#f1dca6;border-left-color:var(--warn-line)}
.notice p:last-child,.callout>:last-child{margin-bottom:0}
.callout{position:relative;margin:1.6em 0;padding:20px 22px 20px 24px;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 40%,#fff));border:1px solid var(--a20)}
.callout::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)}
.callout-title{display:block;font-size:.78rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:6px}
.callout p{font-size:1.06rem}

/* figures */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 16px 14px;box-shadow:var(--shadow-sm);overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--a30))}
.stat b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin-bottom:2px}
.stat span{display:block;font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.kicker-num{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,9vw,4.2rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--accent-strong);margin-bottom:8px}
.kicker-num+p,.kicker-num+span{color:var(--ink-2)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);box-shadow:var(--shadow-sm);margin-bottom:1em;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--bg-soft);font-size:.78rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
th{background:var(--bg-soft);font-weight:650}
tbody th{background:transparent;color:var(--ink)}
tbody tr{background:var(--bg)}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg-soft) 55%,#fff)}
tbody tr:hover{background:var(--tint)}
tr:last-child td,tr:last-child th{border-bottom:0}
.table-wrap.sticky th:first-child,.table-wrap.sticky td:first-child,.compare th:first-child,.compare td:first-child{position:sticky;left:0;z-index:1;background:inherit;box-shadow:1px 0 0 var(--line)}
.table-wrap.sticky thead th:first-child,.compare thead th:first-child{background:var(--bg-soft)}
td.best,th.best{background:var(--accent-soft);font-weight:650}

/* comparison table:wrap a table in .compare;mark the recommended column cells with .is-pick,a row with tr.is-pick */
.compare{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow);margin-bottom:1em}
.compare table{min-width:560px}
.compare thead th{vertical-align:bottom;padding-top:16px}
.compare tbody tr:nth-child(even){background:var(--bg)}
.compare .is-pick{background:color-mix(in srgb,var(--accent-soft) 70%,#fff);box-shadow:inset 1px 0 0 var(--a30),inset -1px 0 0 var(--a30)}
.compare thead .is-pick{background:var(--accent);color:var(--on-accent)}
.compare tr.is-pick td,.compare tr.is-pick th{background:var(--accent-soft);font-weight:650}
.compare .pick-label{display:block;font-size:.7rem;letter-spacing:.08em;opacity:.9}
.yes,.no,.part{white-space:nowrap;font-weight:650}
.yes::before,.no::before,.part::before{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-right:6px;font-size:.75rem;font-weight:800;vertical-align:-3px}
.yes{color:var(--ok)} .yes::before{content:"\2713";background:#e3f4e8}
.no{color:var(--no)} .no::before{content:"\2715";background:#fde8e6}
.part{color:var(--ink-2)} .part::before{content:"~";background:var(--bg-soft)}

/* place pages: photo with licence credit,facts list,map on request */
.photo{margin:0 0 20px}
.photo img{display:block;width:100%;aspect-ratio:16 / 7;object-fit:cover;border-radius:var(--radius);background:var(--bg-soft);box-shadow:var(--shadow)}
.photo figcaption{font-size:.8rem;color:var(--ink-2);margin-top:8px}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:0 18px;margin:0 0 1em;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);padding:4px 16px;box-shadow:var(--shadow-sm)}
.facts dt,.facts dd{padding:10px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:650;color:var(--ink-2);font-size:.93rem}
.facts dd{margin:0;min-width:0}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
.map{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:1em}
.map summary{cursor:pointer;padding:14px 16px;font-weight:650;color:var(--accent-strong);background:linear-gradient(135deg,var(--accent-soft),#fff)}
.map iframe{display:block;width:100%;height:380px;border:0;border-top:1px solid var(--line)}
.map p{margin:0;padding:10px 16px;font-size:.9rem}
a[href^="tel:"]{white-space:nowrap}

/* FAQ: every question is a heading inside the summary. .faq or plain details inside .prose */
.faq{display:grid;gap:10px}
.faq:not(:last-child){margin-bottom:2em}
.faq details,.prose>details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.prose>details{margin-bottom:10px}
.faq details[open],.prose>details[open]{border-color:var(--line-ah);box-shadow:var(--shadow)}
.faq summary,.prose>details>summary{list-style:none;cursor:pointer;padding:17px 52px 17px 18px;position:relative}
.faq summary::-webkit-details-marker,.prose>details>summary::-webkit-details-marker{display:none}
.faq summary::after,.prose>details>summary::after{content:"";position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;transition:transform .2s var(--ease)}
.faq details[open] summary::after,.prose>details[open]>summary::after{transform:rotate(180deg)}
.faq summary h3,.prose>details>summary h3{display:inline;font-size:1.05rem;margin:0}
.faq summary:hover h3,.prose>details>summary:hover h3{color:var(--accent-strong)}
.faq details>:not(summary),.prose>details>:not(summary){padding:0 18px;color:var(--ink-2)}
.faq details>:last-child,.prose>details>:last-child{padding-bottom:18px;margin-bottom:0}

/* forms and calculators */
.form,.calc{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.calc{border-top:3px solid var(--accent)}
.calc .form,.form .calc,.calc .calc,.tool .calc,.panel .calc{border:0;box-shadow:none;padding:0;background:none}
fieldset{border:0;padding:0;margin:0 0 8px;min-width:0}
legend{font-weight:750;font-size:1.05rem;padding:0;margin-bottom:12px}
.field{margin-bottom:16px}
.field label,.label{display:block;font-weight:650;margin-bottom:6px;font-size:.96rem}
.field .hint,.hint{font-size:.86rem;color:var(--ink-3);margin-top:4px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=date],input[type=search],select,textarea{
width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font:inherit;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;box-shadow:inset 0 1px 2px rgb(16 24 40/.05);transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line-ah)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:0;box-shadow:0 0 0 4px var(--a20)}
input[type=range]{width:100%;accent-color:var(--accent)}
.choice{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer}
.choice input{width:20px;height:20px;margin-top:3px;accent-color:var(--accent);flex:none}
.options{display:grid;gap:8px}
.options label{display:flex;gap:10px;align-items:center;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;min-height:48px;background:#fff;transition:border-color .15s,background .15s}
.options label:hover{border-color:var(--line-ah)}
.options label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.options input{accent-color:var(--accent);width:18px;height:18px}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.calc-result{margin-top:18px;border-radius:var(--radius);padding:18px;background:linear-gradient(160deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 30%,#fff));border:1px solid var(--a30)}
.calc-result .stat{background:#fff}
.calc .grid,.form .grid,.tool .grid{align-items:end;row-gap:0;margin-bottom:0}
.calc-result .grid{gap:10px;margin-bottom:12px}
.calc-result .stat b{color:var(--accent-strong)}
.calc-result[hidden]{display:none}
.error{color:var(--no);font-size:.9rem;margin-top:4px}

/* tool shell */
.tool{display:grid;gap:16px;grid-template-columns:1fr;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-lg)}
.tool-controls{display:grid;gap:12px;align-content:start}
.tool-canvas{background:repeating-conic-gradient(#f1f3f6 0 25%,#fff 0 50%) 0 0 / 20px 20px;border:1px solid var(--line);border-radius:var(--radius-sm);min-height:220px;display:grid;place-items:center;overflow:auto;padding:14px;box-shadow:inset 0 1px 3px rgb(16 24 40/.06)}
.tool-canvas canvas,.tool-canvas img{max-width:100%;height:auto;display:block;box-shadow:0 6px 20px -6px rgb(16 24 40/.25)}
.tool-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:var(--bg-soft)}
.seg button{border:0;background:none;font:600 .9rem var(--font);padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--ink-2);min-height:40px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm)}

/* partner card: an affiliate offer with price emphasis and a clear CTA */
.partner{position:relative;display:grid;gap:12px;align-content:start;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.partner::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,#fff))}
.partner:hover{border-color:var(--line-ah);box-shadow:var(--shadow-lg)}
.partner-head{display:flex;justify-content:space-between;align-items:center;gap:10px 12px;flex-wrap:wrap}
.partner-head h2,.partner-head h3{margin:0}
.partner-head h2{font-size:clamp(1.3rem,4vw,1.7rem)}
.partner .price{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--accent-strong);background:var(--accent-soft);padding:3px 12px;border-radius:999px}
.partner>p{margin:0;color:var(--ink-2)}
.partner .checks{margin:0}
.partner .btn{margin-top:4px}
.partner.is-pick{border:2px solid var(--accent);box-shadow:var(--shadow-lg)}
.disclosure{font-size:.8rem;color:var(--ink-3);margin:0}
.notice .disclosure{color:var(--ink-2)}

/* badges,chips,pill lists */
.badge{display:inline-block;font-size:.76rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--a20);vertical-align:middle}
.chips,.pill-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 1em}
.chips>*,.pill-list>li{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line-2);font-size:.92rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.chips a:hover,.pill-list a:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}
.pill-list>li>a{color:inherit;text-decoration:none}
.chips [aria-current],.chips .on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* page furniture: breadcrumbs,meta line,table of contents */
.breadcrumbs{font-size:.86rem;color:var(--ink-3);margin:0 0 14px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:0}
.breadcrumbs li+li::before{content:"/";margin-right:4px;color:var(--line-2)}
.breadcrumbs a{color:var(--ink-2);text-decoration:none}
.breadcrumbs a:hover{color:var(--accent-strong);text-decoration:underline}
.meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:.88rem;color:var(--ink-2);margin:16px 0 0;padding:0;list-style:none}
.meta-line>*{display:inline-flex;align-items:center;gap:7px}
.meta-line>*+*::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-ah);margin-right:4px}
.meta-line strong{color:var(--ink);font-weight:650}
.toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:18px 20px;box-shadow:var(--shadow-sm);margin:0 0 1.6em}
.toc-title{display:block;font-size:.78rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:2px}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:550}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--accent-strong);font-weight:700;font-variant-numeric:tabular-nums}
.toc a:hover{background:var(--accent-soft);color:var(--ink)}

/* feature rows and media split */
.features{display:grid;gap:22px;grid-template-columns:1fr}
.feature{display:flex;gap:16px;align-items:flex-start}
.feature .icon{margin:0}
.feature h3{margin-bottom:.25em;font-size:1.08rem}
.feature p{margin:0;color:var(--ink-2)}
.media-split{display:grid;gap:24px;align-items:center;grid-template-columns:1fr}
.media-split>*{min-width:0}
.media-split img{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.media-split figcaption{font-size:.8rem;color:var(--ink-2);margin-top:8px}

/* verdict: summary box with pros and cons */
.verdict{border:1px solid var(--line-ah);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow);overflow:hidden;margin:0 0 1.4em}
.verdict-head{padding:20px 22px;background:linear-gradient(135deg,var(--accent-soft),#fff 80%);border-bottom:1px solid var(--line)}
.verdict-head h2,.verdict-head h3{margin:0 0 .3em}
.verdict-head p{margin:0;color:var(--ink-2)}
.verdict-body{display:grid;grid-template-columns:1fr}
.pros,.cons{padding:18px 22px}
.pros h3,.cons h3{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.pros h3{color:var(--ok)} .cons h3{color:var(--no)}
.pros ul,.cons ul{list-style:none;padding:0;margin:0}
.pros li,.cons li{position:relative;padding-left:28px;margin-bottom:8px}
.pros li::before,.cons li::before{position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.pros li::before{content:"\2713";background:#e3f4e8;color:var(--ok)}
.cons li::before{content:"\2715";background:#fde8e6;color:var(--no)}
.cons{border-top:1px solid var(--line)}

/* call-to-action band */
.cta-band{position:relative;isolation:isolate;overflow:hidden;padding:44px 0;color:#fff;background:linear-gradient(120deg,var(--accent-strong),color-mix(in srgb,var(--accent-strong) 70%,#000) 120%)}
.cta-band::before{content:"";position:absolute;z-index:-1;inset:-40% -10% auto auto;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent)}
.cta-band .wrap{display:grid;gap:18px;align-items:center}
.cta-band h2{color:#fff;margin:0 0 .3em}
.cta-band p{margin:0;color:rgba(255,255,255,.9);max-width:60ch}
.cta-band .btn{background:#fff;color:var(--accent-strong);border-color:#fff;box-shadow:0 8px 22px -8px rgba(0,0,0,.4);justify-self:start}
.cta-band .btn:hover{background:var(--accent-soft)}
.cta-band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,.12)}
.cta-band a:not(.btn){color:#fff}

/* dark and accent sections */
.section.dark,.section.accent{color:rgba(255,255,255,.88)}
.section.dark{background:var(--dark);background-image:radial-gradient(60% 80% at 100% 0%,var(--a30),transparent 70%)}
.section.accent{background:var(--accent-strong);background-image:linear-gradient(140deg,rgba(255,255,255,.1),transparent 60%)}
.section.dark :is(h1,h2,h3,h4),.section.accent :is(h1,h2,h3,h4){color:#fff}
.section.dark :is(.lead,.muted,.section-head p,.kicker-num+p),.section.accent :is(.lead,.muted,.section-head p,.kicker-num+p){color:rgba(255,255,255,.8)}
.section.dark>.wrap>:is(p,ul,ol) a,.section.accent>.wrap>:is(p,ul,ol) a,.section.dark .section-head a,.section.accent .section-head a{color:#fff}
.section.dark .eyebrow,.section.accent .eyebrow{color:#fff}
.section.dark .eyebrow::before,.section.accent .eyebrow::before{background:#fff}
.section.dark .stat b,.section.accent .stat b{color:var(--ink)}
.section.dark .kicker-num,.section.accent .kicker-num{color:#fff}
.section.accent .btn:not(.ghost),.section.dark .btn:not(.ghost){background:#fff;color:var(--accent-strong);border-color:#fff}
.section.accent .btn.ghost,.section.dark .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none}

/* mobile sticky CTA bar: hidden from 900 px */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgb(16 24 40/.25)}
.sticky-cta .btn{flex:1;min-height:46px}
.sticky-cta small,.sticky-cta .disclosure{flex:0 1 40%;min-width:0;font-size:.74rem;line-height:1.3;color:var(--ink-3)}
body:has(.sticky-cta){padding-bottom:76px}

/* footer */
.site-footer{position:relative;background:#0f1218;background-image:radial-gradient(50% 120% at 0% 0%,var(--a20),transparent 70%);color:#c3c9d3;padding:48px 0 28px;margin-top:0;font-size:.95rem;border-top:3px solid var(--accent)}
.site-footer a{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.site-footer a:hover{text-decoration-color:#fff}
.site-footer .cols{display:grid;gap:28px;grid-template-columns:1fr}
.site-footer .cols>div>a:not(.brand){display:inline-block;margin:0 18px 8px 0}
.site-footer h2{color:#fff;font-size:.8rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:9px}
.site-footer p{color:#aab2be}
.site-footer .brand{color:#fff}
.site-footer .brand .tld{color:#9aa3b0}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.86rem;color:#9aa3b0}
.site-footer .legal a{color:#c3c9d3}

/* long-form pages */
.prose{max-width:760px}
.prose>p,.prose>ul,.prose>ol{max-width:var(--measure)}
.prose h2{margin-top:1.7em}
.prose>h2:first-child,.prose>:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--accent-strong)}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent);color:var(--ink-2);font-size:1.08rem}
.page-head{padding:36px 0 34px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 60%,#fff),#fff);border-bottom:1px solid var(--line-a)}
.page-head h1{font-size:clamp(2rem,6.6vw,3.1rem)}
.page-head .lead{margin-bottom:0}
.page-head+.section:not(.alt,.dark,.accent){padding-top:40px}

/* wider screens */
@media (min-width: 640px){
.grid.two,.grid.three,.grid.four{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(4,1fr)}
.grid .stats,.calc-result .stats,.split .stats{grid-template-columns:repeat(2,1fr)}
.site-footer .cols{grid-template-columns:2fr 1fr 1fr}
.features{grid-template-columns:repeat(2,1fr);gap:28px 32px}
.verdict-body{grid-template-columns:1fr 1fr}
.cons{border-top:0;border-left:1px solid var(--line)}
.toc ol{grid-template-columns:1fr 1fr;column-gap:24px}
.cta-band .wrap{grid-template-columns:1fr auto}
.cta-band .btn{justify-self:end}
}
@media (min-width: 900px){
body{font-size:18px}
.wrap{padding:0 24px}
.site-header .wrap{flex-wrap:nowrap;padding-top:10px;padding-bottom:10px}
.nav{width:auto;margin:0 0 0 auto;overflow:visible;mask-image:none}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-11px;height:2px;border-radius:2px;background:var(--accent)}
.hero{padding:84px 0 92px}
.hero.compact{padding:52px 0 56px}
.page-head{padding:60px 0 52px}
.section{padding:84px 0}
.section:not(.alt,.dark,.accent)+.section:not(.alt,.dark,.accent){padding-top:12px}
.page-head+.section:not(.alt,.dark,.accent){padding-top:60px}
.cta-band{padding:60px 0}
.grid{gap:20px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.split{grid-template-columns:1.1fr .9fr;gap:56px}
.split.even{grid-template-columns:1fr 1fr}
.media-split{grid-template-columns:1fr 1fr;gap:56px}
.media-split.flip>:first-child{order:2}
.features.three{grid-template-columns:repeat(3,1fr)}
.tool{grid-template-columns:320px 1fr;padding:20px}
.tool:not(:has(.tool-canvas)){grid-template-columns:1fr}
.card,.partner{padding:26px}
.sticky-cta{display:none}
body:has(.sticky-cta){padding-bottom:0}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important} .card:hover,a.card:hover,.btn:hover{transform:none !important}}
@media print{.site-header,.site-footer,.actions,.sticky-cta,.cta-band{display:none} .hero::before,.hero::after,.page-head::before,.page-head::after{display:none}}