/* Folio look for the website's own pages (PREVIEW, design/folio-site-preview, 2026-10-21).
   Loaded LAST in <head>, so it wins over each page's inline <style> at equal specificity.
   Tokens: design/rebrand-2026-10-20/README.md (direction A). Burgundy once per screen. */
/* Fraunces 400 + 600 (SIL OFL 1.1, @fontsource/fraunces 5.3.0), self-hosted: no Google Fonts request. */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/fraunces-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/fraunces-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/plusjakartasans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/plusjakartasans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fo-page: #F6F3EE; --fo-card: #FFFFFF; --fo-sunk: #EFEAE2;
  --fo-ink: #1C1A17; --fo-ink2: #5A5651; --fo-ink3: #6B665F;
  --fo-hair: rgba(28,26,23,.10); --fo-wine: #6B1F28; --fo-wine-bg: #F4E6E6;
  --fo-green: #0E7A5A; --fo-green-bg: #E6F2EC;
  --fo-serif: Fraunces, Georgia, 'Times New Roman', serif;
  --fo-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* every page's own token names, pointed at Folio */
  --bg: var(--fo-page); --card: var(--fo-card); --surface: var(--fo-card); --panel: var(--fo-sunk);
  --ink: var(--fo-ink); --text: var(--fo-ink); --navy: var(--fo-ink);
  --muted: var(--fo-ink2); --muted-2: var(--fo-ink2); --faint: var(--fo-ink3);
  --hair: var(--fo-hair); --line: var(--fo-hair); --line-2: var(--fo-hair); --border: var(--fo-hair);
  --blue: var(--fo-wine); --accent: var(--fo-wine); --accent-2: var(--fo-wine); --violet: var(--fo-wine); --pro: var(--fo-wine);
  --green: var(--fo-green); --good: var(--fo-green); --lime: var(--fo-green);
  --gold: var(--fo-ink); --gold-bg: var(--fo-sunk); --gold-border: var(--fo-hair);
}

html, body { background: var(--fo-page) !important; }
body { color: var(--fo-ink); font-family: var(--fo-sans) !important; -webkit-font-smoothing: antialiased; }
body :is(p, li, td, th, dd, dt, label, input, select, textarea, button, span, small, summary, figcaption) { font-family: var(--fo-sans); }
/* code and mono stay mono */
body :is(code, pre, kbd, samp, .mono, #fo-none) { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }

/* Headings: Fraunces, regular weight, warm ink. #fo-none lifts specificity above page classes. */
body :is(h1, h2, h3, #fo-none) {
  font-family: var(--fo-serif) !important; font-weight: 400 !important; color: var(--fo-ink) !important;
  letter-spacing: -.01em; -webkit-text-fill-color: currentColor; background: none !important;
}
body :is(h1, #fo-none) { line-height: 1.1; }
body :is(h4, h5, h6, #fo-none) { font-family: var(--fo-sans) !important; color: var(--fo-ink) !important; }

/* Body copy */
body :is(p, li, td, dd, #fo-none) { color: var(--fo-ink2); }
body main :is(a, #fo-none), body .container :is(a, #fo-none), body article :is(a, #fo-none) {
  color: var(--fo-ink); text-decoration: underline; text-decoration-color: rgba(107,31,40,.45); text-underline-offset: 3px;
}

/* Cards, tables, rules */
body :is(.card, .plan, .step, .faq-item, .callout, .box, .tile, .feature, details, #fo-none) {
  background: var(--fo-card); border-color: var(--fo-hair) !important; box-shadow: 0 1px 2px rgba(28,26,23,.04);
}
body table { border-color: var(--fo-hair); }
body :is(th, #fo-none) { background: var(--fo-sunk) !important; color: var(--fo-ink) !important; font-family: var(--fo-sans); }
body :is(td, th) { border-color: var(--fo-hair) !important; }
body hr { border: 0; border-top: 1px solid var(--fo-hair); }

/* Primary buttons: solid burgundy, no gradient, no glow */
html body :is(.btn, .button, .cta, .cta-btn, .plan-cta, #contact-submit, button.go, .btn-primary, .nav-cta, .hero-cta, button[type=submit], #fo-none) {
  text-decoration: none !important;
  background: var(--fo-wine) !important; color: #F6F3EE !important; border-color: transparent !important;
  box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: currentColor;
}
html body :is(.btn-secondary, .btn-ghost, .btn-outline, #fo-none) {
  background: var(--fo-card) !important; color: var(--fo-ink) !important; box-shadow: 0 0 0 1px rgba(28,26,23,.14) !important;
}
/* Small labels / eyebrows / badges */
body :is(.eyebrow, .badge, .article-eyebrow, .pill, .tag, .chip, #fo-none) {
  background: var(--fo-wine-bg) !important; color: var(--fo-wine) !important; border-color: transparent !important;
}
/* Forms */
body :is(input, select, textarea) { background: var(--fo-card); border-color: rgba(28,26,23,.18) !important; color: var(--fo-ink); }
body :is(input, select, textarea):focus { outline: 2px solid rgba(107,31,40,.35); outline-offset: 1px; }

/* ---- Folio top bar and footer (fo-) ---- */
.fo-bar { max-width: 1120px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; box-sizing: border-box; }
.fo-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--fo-ink) !important; font-family: var(--fo-serif); font-size: 24px; font-weight: 600; }
.fo-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--fo-wine); color: #F6F3EE; font-family: var(--fo-sans); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* 2026-10-22 polish (Djoko 23:34): bigger header logo, mark 40px desktop / 34px phone, wordmark scaled to match. */
html body .fo-bar .fo-brand { font-size: 30px; gap: 12px; line-height: 1; }
html body .fo-bar .fo-brand .fo-mark { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; font-size: 17px; }
@media (max-width: 560px) {
  html body > .fo-bar, html body .fo-bar { padding-top: 16px; padding-bottom: 16px; }
  html body .fo-bar .fo-brand { font-size: 26px; gap: 10px; }
  html body .fo-bar .fo-brand .fo-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; font-size: 15px; }
}
.fo-links { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; margin-left: auto; }
.fo-links a { color: var(--fo-ink2) !important; text-decoration: none !important; font-family: var(--fo-sans); }
.fo-links a:hover { color: var(--fo-ink) !important; }
.fo-get { padding: 11px 20px; border-radius: 999px; background: var(--fo-ink); color: #F6F3EE !important; font-weight: 600; font-size: 15px; text-decoration: none !important; font-family: var(--fo-sans); }
@media (max-width: 560px) { .fo-links { order: 3; width: 100%; margin-left: 0; gap: 6px 18px; } .fo-get { margin-left: auto; padding: 10px 16px; } }

.fo-foot { margin-top: 64px; box-shadow: 0 -1px 0 rgba(28,26,23,.08); background: var(--fo-page); font-family: var(--fo-sans); }
.fo-cols { max-width: 1160px; margin: 0 auto; padding: 56px 24px 32px; display: flex; flex-wrap: wrap; gap: 36px 28px; box-sizing: border-box; }
.fo-col { min-width: 0; flex: 1 1 140px; }
.fo-col.fo-first { flex: 1.4 1 250px; }
.fo-name { display: flex; align-items: center; gap: 10px; font-family: var(--fo-serif); font-size: 22px; font-weight: 600; color: var(--fo-ink); }
.fo-tag { margin: 14px 0 0; font-size: 14px; color: var(--fo-ink2) !important; line-height: 1.5; }
.fo-social { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.fo-social a { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(28,26,23,.12); display: inline-flex; align-items: center; justify-content: center; color: var(--fo-ink2) !important; }
.fo-h { font-size: 13px; font-weight: 600; color: var(--fo-ink); margin-bottom: 14px; }
.fo-list { display: grid; gap: 10px; }
.fo-list a { color: var(--fo-ink2) !important; text-decoration: none !important; font-size: 14px; }
.fo-list a:hover { color: var(--fo-ink) !important; }
.fo-base { max-width: 1160px; margin: 0 auto; padding: 18px 24px 28px; border-top: 1px solid rgba(28,26,23,.08); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--fo-ink2); box-sizing: border-box; }
.fo-base a { color: inherit !important; text-decoration: none !important; }
.fo-base .fo-mail { margin-left: auto; }

/* Shared widgets injected by assistant.js / privacy-notice.js */
html body #vta-fab { background: var(--fo-ink) !important; color: #F6F3EE !important; box-shadow: 0 6px 18px rgba(28,26,23,.18) !important; }
html body #vt-privacy-notice { font-family: var(--fo-sans); }
html body #vt-privacy-notice .vt-pn-link { color: var(--fo-wine) !important; }

/* Page-specific: dark store badge, Dragon notice banner */
html body .web-pill :is(b, small, span, #fo-none) { color: #FFFFFF !important; }
html body .alert-banner, html body .alert-banner * { background-color: var(--fo-wine-bg) !important; color: var(--fo-wine) !important; }

html body .demo-status-text { color: #0B6448 !important; }

/* Pages whose body is a flex box (centred card): keep bar and footer full width on top/bottom */
html body:has(> header.fo-bar) { flex-direction: column; flex-wrap: nowrap; }
html body > .fo-bar, html body > .fo-foot { align-self: stretch; width: 100%; max-width: none; }
html body > .fo-bar { max-width: 1120px; align-self: center; }

/* Phones: wide tables scroll inside themselves, never the page (ios had this bug live too) */
@media (max-width: 560px) { html body main table, html body .container table, html body table { display: block; max-width: 100%; overflow-x: auto; } html body .nav-cta { padding-left: 12px !important; padding-right: 12px !important; } }

/* ios: numbered steps were flex rows, so words could not wrap (live bug at 375 px) */
html body ol.steps li { display: block; position: relative; padding-left: 35px; }
html body ol.steps li::before { position: absolute; left: 0; top: 9px; display: block; width: 23px; }
html body ol.steps li:first-child::before { top: 0; }

/* Footer links: one 44 px tap row each (audit 2026-09-15), no indent, no double gap */
html body .fo-foot .fo-list { gap: 0; }
html body .fo-foot .fo-list a { display: flex; align-items: center; min-height: 44px; padding: 0 !important; }
html body .fo-foot .fo-base a, html body .fo-foot .fo-base span { padding: 0 !important; min-height: 44px; display: inline-flex; align-items: center; }
html body .fo-foot .fo-social a { padding: 0 !important; min-height: 44px; min-width: 44px; }
html body .fo-foot .fo-h { margin-bottom: 4px; }
/* teams: plan bullets were flex rows, so the bold words stood in a narrow column (live bug at 375 px) */
html body .plan li { display: block; position: relative; padding-left: 26px; }
html body .plan li svg { position: absolute; left: 0; top: 3px; }
html body .vta-head { background: #1C1A17 !important; }

/* =====================================================================
   Home layout, round 2 (design review 2026-10-22, Djoko "build all 8").
   Layout only: no wording, prices or claims change. Classes fh-*.
   Burgundy = the one primary action; device green only in #privacy.
   ===================================================================== */
/* 4. one primary colour: the top-bar "Get VoltType" is burgundy (was ink) */
.fo-get { background: var(--fo-wine); }
.fo-get:hover { background: #5A1922; }

/* 1. Hero: text left, the app window right, tops lined up with the headline */
.fo-home .fh-hero { max-width: 1280px; margin: 0 auto; padding: 72px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; box-sizing: border-box; }
@media (min-width: 980px) { .fo-home .fh-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; padding-top: 80px; }
  .fo-home .fh-hero .fh-stack { min-height: 420px; }
  .fo-home .fh-hero .fh-demo .vt-card { padding: 48px 52px 52px; }
  .fo-home .fh-demo .vt-card > div:nth-child(2) { font-size: 32px !important; }
  .fo-home .fh-demo .vt-card :is(p, ul) { font-size: 17px !important; }
  .fo-home .fh-demo .vt-card > div:nth-child(3) { font-size: 16px !important; }
  .fo-home .fh-hero h1 { font-size: clamp(42px, 4.7vw, 66px) !important; } }
.fo-home .fh-hero-text { min-width: 0; }
.fo-home .fh-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: #6B1F28; background: #F1E4E4; padding: 8px 16px; border-radius: 999px; max-width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .fo-home .fh-eyebrow { font-size: 11px; letter-spacing: .06em; padding: 7px 12px; } }
/* stats: three equal cells, same number size, hairline between them */
.fo-home .fh-stats { margin-top: 40px; border-top: 1px solid var(--fo-hair); display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); }
.fo-home .fh-stat { padding: 20px 16px 0 0; min-width: 0; }
.fo-home .fh-stat + .fh-stat { padding-left: 20px; box-shadow: inset 1px 0 0 var(--fo-hair); }
.fo-home .fh-stat-n { font-family: var(--fo-serif); font-size: 30px; line-height: 1.1; color: var(--fo-ink); white-space: nowrap; }
.fo-home .fh-stat-l { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--fo-ink2); }
@media (max-width: 560px) { .fo-home .fh-stats { grid-template-columns: repeat(3, minmax(min-content, 1fr)); } .fo-home .fh-stat { padding-right: 10px; } .fo-home .fh-stat + .fh-stat { padding-left: 12px; } .fo-home .fh-stat-n { font-size: 22px; } .fo-home .fh-stat-l { font-size: 12px; } }

/* the demo becomes an app window: title bar with real tabs, one page inside */
.fo-home .fh-demo { min-width: 0; background: var(--fo-card); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(28,26,23,.08), 0 1px 2px rgba(28,26,23,.05), 0 28px 56px -28px rgba(28,26,23,.28); }
@media (min-width: 980px) { .fo-home .fh-demo { margin-top: 56px; } }
.fo-home .fh-tabs { position: relative; display: flex; align-items: stretch; gap: 2px; padding: 10px 14px 0 72px; background: var(--fo-sunk); box-shadow: inset 0 -1px 0 rgba(28,26,23,.08); }
.fo-home .fh-tabs::before { content: ""; position: absolute; left: 18px; top: 50%; width: 9px; height: 9px; margin-top: -2px; border-radius: 50%; background: rgba(28,26,23,.16); box-shadow: 15px 0 0 rgba(28,26,23,.16), 30px 0 0 rgba(28,26,23,.16); }
.fo-home .fh-tabs .vt-tab { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 16px 11px; border-radius: 8px 8px 0 0; color: var(--fo-ink2); }
.fo-home .fh-tabs .vt-tab.a { animation-name: vt-tab-a, fh-tab-a; } .fo-home .fh-tabs .vt-tab.b { animation-name: vt-tab-b, fh-tab-b; } .fo-home .fh-tabs .vt-tab.c { animation-name: vt-tab-c, fh-tab-c; }
@keyframes fh-tab-a { 0%,28% { background: #FFFFFF } 36%,92% { background: transparent } 100% { background: #FFFFFF } }
@keyframes fh-tab-b { 0%,28% { background: transparent } 36%,61% { background: #FFFFFF } 69%,100% { background: transparent } }
@keyframes fh-tab-c { 0%,61% { background: transparent } 69%,92% { background: #FFFFFF } 100% { background: transparent } }
.fo-home .fh-stack { position: relative; display: grid; min-height: 360px; }
.fo-home .fh-demo .vt-card { box-shadow: none; border-radius: 0; padding: 40px 44px 44px; background: #FFFFFF; }
.fo-home .fh-demo .vt-card.a { animation-name: fh-card-a; } .fo-home .fh-demo .vt-card.b { animation-name: fh-card-b; } .fo-home .fh-demo .vt-card.c { animation-name: fh-card-c; }
@keyframes fh-card-a { 0%,28% { opacity: 1; transform: none } 36%,92% { opacity: 0; transform: translateY(-6px) } 100% { opacity: 1; transform: none } }
@keyframes fh-card-b { 0%,28% { opacity: 0; transform: translateY(6px) } 36%,61% { opacity: 1; transform: none } 69%,100% { opacity: 0; transform: translateY(-6px) } }
@keyframes fh-card-c { 0%,61% { opacity: 0; transform: translateY(6px) } 69%,92% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-6px) } }
.fo-home .fh-card-note { margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--fo-ink2); }
@media (prefers-reduced-motion: reduce) { .fo-home .fh-tabs .vt-tab { animation: none; } .fo-home .fh-tabs .vt-tab.a { background: #FFFFFF; color: var(--fo-wine); } }
@media (max-width: 560px) { .fo-home .fh-tabs { padding: 8px 6px 0 44px; } .fo-home .fh-tabs::before { left: 12px; width: 6px; height: 6px; box-shadow: 9px 0 0 rgba(28,26,23,.16), 18px 0 0 rgba(28,26,23,.16); }
  .fo-home .fh-tabs .vt-tab { padding: 9px 8px 10px; font-size: 10.5px; letter-spacing: .03em; } .fo-home .fh-demo .vt-card { padding: 26px 22px 28px; } .fo-home .fh-stack { min-height: 340px; } }
@media (max-width: 400px) { .fo-home .fh-tabs { padding-left: 6px; } .fo-home .fh-tabs::before { display: none; } }

/* 5. How it works: 01 02 03 on one thin line, the shortcut as keys */
.fo-home .fh-how { counter-reset: fh-step; max-width: 1120px; margin: 0 auto; padding: 104px 24px 112px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; box-sizing: border-box; }
.fo-home .fh-how::before { content: ""; position: absolute; left: 24px; right: 24px; top: 115px; height: 1px; background: rgba(28,26,23,.14); }
.fo-home .fh-step { counter-increment: fh-step; position: relative; padding-top: 44px; min-width: 0; }
.fo-home .fh-step::before { content: "0" counter(fh-step); position: absolute; left: 0; top: 0; padding-right: 14px; background: var(--fo-page); font-family: var(--fo-sans); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--fo-wine); line-height: 22px; }
.fo-home .fh-step-t { font-family: var(--fo-serif); font-size: 40px; font-weight: 400; line-height: 1.1; color: var(--fo-ink); }
.fo-home .fh-step-p { margin: 12px 0 0; color: var(--fo-ink2); font-size: 16px; line-height: 1.6; }
.fo-home .fh-step-p kbd { display: inline-block; font-family: var(--fo-sans) !important; font-size: 13px; font-weight: 600; line-height: 1; color: var(--fo-ink); padding: 5px 9px 6px; border-radius: 6px; background: var(--fo-card); box-shadow: 0 0 0 1px rgba(28,26,23,.14), 0 2px 0 rgba(28,26,23,.14); vertical-align: 1px; }
@media (max-width: 760px) { .fo-home .fh-how { grid-template-columns: minmax(0, 1fr); padding: 64px 24px 72px; gap: 36px; }
  .fo-home .fh-how::before { left: 37px; right: auto; top: 80px; bottom: 96px; width: 1px; height: auto; }
  .fo-home .fh-step { padding: 0 0 0 64px; } .fo-home .fh-step::before { padding: 6px 0; width: 28px; text-align: center; } .fo-home .fh-step-t { font-size: 32px; } }

/* 8. feature icons: line icons, no boxes, thinner stroke */
.fo-home .fh-ico { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: flex-start; justify-content: flex-start; padding-top: 1px; }
.fo-home .fh-ico svg { width: 24px; height: 24px; stroke: var(--fo-wine); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* 3. Privacy: a full section with one instrument (the 0-bytes readout) */
.fo-home .fh-privacy { background: var(--fo-page); box-shadow: inset 0 1px 0 rgba(28,26,23,.06), inset 0 -1px 0 rgba(28,26,23,.06); }
.fo-home .fh-privacy-in { max-width: 1120px; margin: 0 auto; padding: 120px 24px; min-height: min(86vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; box-sizing: border-box; }
.fo-home .fh-privacy-h { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.015em; }
.fo-home .fh-privacy-p { margin: 24px 0 0; max-width: 460px; font-size: 19px; line-height: 1.6; color: var(--fo-ink2); }
.fo-home .fh-meter { background: var(--fo-card); border-radius: 16px; padding: 32px 36px 30px; box-shadow: 0 0 0 1px rgba(28,26,23,.08), 0 1px 2px rgba(28,26,23,.05); }
.fo-home .fh-meter-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; box-shadow: inset 0 -1px 0 rgba(28,26,23,.08); }
.fo-home .fh-led { width: 8px; height: 8px; border-radius: 50%; background: var(--fo-green); box-shadow: 0 0 0 4px var(--fo-green-bg); }
.fo-home .fh-meter-head svg { width: 22px; height: 22px; stroke: var(--fo-green); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fo-home .fh-meter-n { margin-top: 30px; font-family: var(--fo-serif); font-size: clamp(56px, 6.2vw, 92px); line-height: .95; letter-spacing: -.02em; color: #0B6448; white-space: nowrap; }
.fo-home .fh-meter-l { margin-top: 12px; font-size: 15px; color: var(--fo-ink2); }
.fo-home .fh-meter-graph { position: relative; margin-top: 30px; height: 72px; display: flex; align-items: flex-end; gap: 5px; padding: 0 2px; border-bottom: 1px solid var(--fo-green); }
.fo-home .fh-meter-graph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(28,26,23,.07); box-shadow: 0 24px 0 rgba(28,26,23,.07), 0 48px 0 rgba(28,26,23,.07); }
.fo-home .fh-meter-graph i { flex: 1; height: 2px; background: var(--fo-green); opacity: .55; }
.fo-home .fh-meter-ticks { display: flex; justify-content: space-between; margin-top: 8px; }
.fo-home .fh-meter-ticks i { width: 1px; height: 6px; background: rgba(28,26,23,.22); }
@media (max-width: 860px) { .fo-home .fh-privacy-in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 80px 24px; min-height: 0; } .fo-home .fh-meter { padding: 24px 22px; } }

/* 6. Pricing: heading, equal cards, buttons on one line; only Pro (monthly) is filled */
.fo-home .fh-h2 { margin: 0 0 28px; font-family: var(--fo-serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; }
.fo-home .fh-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.fo-home .fh-plan ul { flex: 1 0 auto; align-content: start; }
.fo-home .fh-plan .fo-ctas { margin-top: auto; padding-top: 20px; flex-direction: column; align-items: stretch; gap: 10px; }
html body :is(.fo-home .fh-plan a.plan-cta, #fo-none#fo-none) { justify-content: center; min-height: 46px; padding: 0 20px !important; border-radius: 10px; background: var(--fo-card) !important; color: var(--fo-ink) !important; box-shadow: 0 0 0 1px rgba(28,26,23,.16) !important; }
html body :is(.fo-home .fh-plan a.plan-cta[data-checkout-interval="month"], #fo-none#fo-none) { background: var(--fo-wine) !important; color: #F6F3EE !important; box-shadow: none !important; }

/* 6. Comparison: even columns, VoltType column lightly tinted, cards on phones */
.fo-home .fh-cmp-wrap { margin-top: 24px; background: var(--fo-card); border-radius: 14px; box-shadow: 0 0 0 1px rgba(28,26,23,.08); overflow: hidden; }
html body .fo-home table.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.fo-home table.cmp :is(th, td) { padding: 16px 18px !important; vertical-align: top; text-align: left; }
.fo-home table.cmp tr:first-child th { padding-top: 18px !important; padding-bottom: 14px !important; }
.fo-home table.cmp tr > :first-child { width: 24%; }
html body .fo-home table.cmp tr > :nth-child(2) { background: rgba(107,31,40,.045) !important; }
@media (max-width: 640px) {
  .fo-home .fh-cmp-wrap { background: none; box-shadow: none; overflow: visible; border-radius: 0; }
  html body .fo-home table.cmp, .fo-home table.cmp tbody, .fo-home table.cmp tr, .fo-home table.cmp th, .fo-home table.cmp td { display: block; width: auto !important; min-width: 0; overflow: visible; }
  .fo-home table.cmp tr:first-child { display: none; }
  .fo-home table.cmp tr { background: var(--fo-card); border-radius: 14px; box-shadow: 0 0 0 1px rgba(28,26,23,.08); margin-bottom: 12px; border: 0 !important; overflow: hidden; }
  .fo-home table.cmp th[scope="row"] { padding: 16px 18px 10px !important; font-size: 15px; }
  .fo-home table.cmp td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; padding: 10px 18px !important; box-shadow: inset 0 1px 0 rgba(28,26,23,.07); }
  .fo-home table.cmp td::before { content: attr(data-label); color: var(--fo-ink2); font-weight: 500; }
  html body .fo-home table.cmp td:nth-child(2) { color: var(--fo-ink); font-weight: 600; }
}

/* 4 + 8. Download: Windows pill is the burgundy action; phones get equal-width pills; fine print breathes */
.fo-home #smartscreen-note { line-height: 1.75; }
@media (max-width: 560px) {
  html body .fo-home .get-badges { display: grid !important; grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-left: auto; margin-right: auto; }
  .fo-home .get-badges a { display: block; text-align: center; }
}

/* 1. FAQ: title left, questions right, airy rows, a small round +/- by the question */
.fo-home .fh-faq { max-width: 1120px; margin: 0 auto; padding: 112px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 72px; align-items: start; box-sizing: border-box; }
.fo-home .fh-faq > h2 { position: sticky; top: 32px; }
.fo-home .fh-faq-list { border-bottom: 1px solid rgba(28,26,23,.1); }
html body :is(.fo-home .fh-faq details.fo-q, #fo-none) { background: none !important; box-shadow: none; border: 0 !important; border-top: 1px solid rgba(28,26,23,.1) !important; border-radius: 0; padding: 0; }
.fo-home .fh-faq .fo-q:last-child { border-bottom: 0; }
.fo-home .fh-faq .fo-q summary { display: flex; align-items: flex-start; gap: 18px; min-height: 0; padding: 24px 8px 24px 0; font-size: 18px; font-weight: 500; line-height: 1.45; }
.fo-home .fh-faq .fo-q summary:hover { color: var(--fo-wine); }
.fo-home .fh-faq .fo-q summary::after { content: none; }
.fo-home .fh-faq .fo-q summary::before { content: "+"; flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(107,31,40,.45); color: var(--fo-wine); font-size: 17px; font-weight: 400; line-height: 26px; text-align: center; }
.fo-home .fh-faq .fo-q[open] summary::before { content: "\2212"; background: var(--fo-wine); color: #F6F3EE; box-shadow: none; }
.fo-home .fh-faq .fo-q summary:focus-visible { outline: 2px solid rgba(107,31,40,.35); outline-offset: 4px; border-radius: 4px; }
.fo-home .fh-faq .fo-q p { margin: -8px 0 0; padding: 0 8px 28px 44px; font-size: 16px; line-height: 1.7; color: var(--fo-ink2); }
@media (max-width: 860px) { .fo-home .fh-faq { grid-template-columns: minmax(0, 1fr); padding: 72px 24px; gap: 20px; } .fo-home .fh-faq > h2 { position: static; }
  .fo-home .fh-faq .fo-q summary { font-size: 16px; padding: 20px 0; gap: 14px; } .fo-home .fh-faq .fo-q p { padding: 0 0 22px 40px; font-size: 15px; } }

/* 8. footer social icons: thinner, no boxes */
html body .fo-foot .fo-social { gap: 2px; margin-left: -12px; }
.fo-social a { box-shadow: none !important; border-radius: 50%; }
.fo-social a:hover { color: var(--fo-ink) !important; background: var(--fo-sunk); }
.fo-social a svg { stroke-width: 1.4; }

/* 7. floating notices: the privacy line is a slim bottom bar; the contact button waits on phones */
html body #vt-privacy-notice { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; border-radius: 0 !important; justify-content: center; gap: 14px !important;
  padding: 6px 16px !important; background: rgba(246,243,238,.97) !important; color: var(--fo-ink2) !important; border: 0 !important; box-shadow: 0 -1px 0 rgba(28,26,23,.10) !important; font-size: 13px !important; }
html body #vt-privacy-notice .vt-pn-icon { display: none; }
html body #vt-privacy-notice .vt-pn-ok { background: var(--fo-ink) !important; }
@media (max-width: 520px) { html body #vt-privacy-notice .vt-pn-text { flex: 0 1 auto !important; white-space: nowrap !important; overflow: hidden !important; } html body #vt-privacy-notice { gap: 10px !important; font-size: 12.5px !important; } }
html body:has(#vt-privacy-notice) #vta-fab { bottom: 56px !important; }
@media (max-width: 560px) {
  html body #vta-fab { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  html body #vta-fab.vta-fab-wait { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
}

/* 8. /verify: evidence blocks stay inside their box (long lines wrap) */
html body pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fo-sunk); border-radius: 10px; padding: 16px 18px; font-size: 13px; line-height: 1.6; box-shadow: inset 0 0 0 1px rgba(28,26,23,.06); }

/* 4. /pricing: the VT mark at the top; only Pro (monthly) has the filled button */
html body .fo-mark.fo-mark-lg { width: 56px; height: 56px; border-radius: 14px; font-family: var(--fo-serif); font-size: 22px; font-weight: 600; margin-bottom: 14px; }
@media (min-width: 980px) and (max-width: 1180px) { .fo-home .fh-tabs { padding-left: 62px; } .fo-home .fh-tabs .vt-tab { padding: 10px 10px 11px; letter-spacing: .04em; font-size: 11.5px; } }
/* 8. long unbroken strings (paths, commands) wrap instead of pushing the page sideways on phones (/verify) */
html body :is(main, article, .container) :is(p, li, td) { overflow-wrap: break-word; }
.fo-home .fh-demo .vt-card span[style*="min-width: 40px"] { flex: none; }
html body :is(h1, h2) { overflow-wrap: break-word; }
/* side pages (gift, 404, mac, ios, reset-password): the VT mark replaces the old V image, centred like the image was */
html body .fo-mark.fo-mark-lg.logo { display: flex; margin-left: auto; margin-right: auto; }
html body .vta-badge { background: var(--fo-wine) !important; }

/* Toggle chips (survey, language-survey, feedback): the badge rule above made "on" and "off" look the same.
   Off = white with a hairline, on = solid burgundy. (2026-10-22 site audit) */
html body :is(.chips, #fo-none) .chip { background: var(--fo-card) !important; color: var(--fo-ink) !important; border-color: rgba(28,26,23,.18) !important; }
html body :is(.chips, #fo-none) .chip.on { background: var(--fo-wine) !important; color: #F6F3EE !important; border-color: transparent !important; }