/* ==========================================================================
   IPTV Abo — design tokens & base styles (Swiss brand palette, Sept 2026)
   Swiss red #DA291C primary · white surfaces · alpine slate #1C1F26 headings/footer ·
   snow grey #F4F5F7 bands · cool accent #2B6CB0 for links and the tier toggle only.
   ========================================================================== */

/* Instrument Sans, OFL, static instances from github.com/Instrument/instrument-sans (fonts/webfonts). */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --brand: #DA291C;
  --brand-dark: #B92217;
  --ink: #1C1F26;
  --white: #FFFFFF;
  --paper: #F4F5F7;
  --accent: #2B6CB0;
  --accent-dark: #235A93;
  --mist: #E3E6EB;
  --slate: #5A6170;
  --moss: #2F855A;
  --whatsapp: #25D366;
  --whatsapp-dark: #1FBF5B;
  --email: #EA4335;
  --email-dark: #D33A2C;
  /* aliases kept for the pricing component */
  --signal: var(--brand);
  --signal-dark: var(--brand-dark);
  --glacier: var(--accent);
  --glacier-dark: var(--accent-dark);

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: 3rem;
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --radius: 12px;
  --radius-card: 12px;
  --radius-control: 12px;
  --radius-chip: 999px;
  --shadow-card: 0 10px 30px rgba(28, 31, 38, .08);

  --container: 1160px;
  --gutter: 24px;
  --section: 96px;
}

@media (max-width: 720px) {
  :root {
    --fs-display: 2.25rem;
    --fs-h1: 1.875rem;
    --fs-h2: 1.5rem;
    --section: 64px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.12; font-weight: 600; margin: 0 0 .5em; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
.num, .price, .t-price, .per { font-variant-numeric: tabular-nums; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.band-white { background: var(--white); }
.band-snow, .band-paper { background: var(--paper); }
.band-ink { background: var(--ink); color: var(--white); }
.band-ink h2, .band-ink h3 { color: var(--white); }
.band-ink a { color: #BFD3EE; }
.band-red { background: var(--brand); color: var(--white); }
.band-red h2 { color: var(--white); }
.text-slate { color: var(--slate); }
.small { font-size: var(--fs-small); }
.centered { text-align: center; }
.centered p { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-control);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--paper); color: var(--ink); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-on-red { background: var(--white); color: var(--ink); }
.btn-on-red:hover { background: var(--paper); color: var(--ink); }
/* Order buttons keep the WhatsApp / e-mail brand colours. AA: slate on WhatsApp green 8.3:1. No text colour reaches 4.5:1 on
   the e-mail red (#EA4335: white 3.9, slate 4.2), so the e-mail button is outlined: red border + icon, slate text 16:1. */
.btn-whatsapp { background: var(--whatsapp); color: var(--ink); width: 100%; }
.btn-whatsapp:hover { background: var(--whatsapp-dark); color: var(--ink); }
.btn-email { background: var(--white); color: var(--ink); width: 100%; border: 2px solid var(--email); }
.btn-email:hover { background: #FDECEA; color: var(--ink); }
.btn-email svg { color: var(--email); fill: var(--email); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Cards */
.card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 24px; }

/* FAQ */
details { border-top: 1px solid var(--mist); padding: 14px 0; }
details:last-of-type { border-bottom: 1px solid var(--mist); }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); margin-top: 6px; flex: none; }
details[open] summary::after { transform: rotate(225deg); margin-top: 10px; }
details p { margin-top: 10px; }

/* Anti-copy (spec §G) */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { body { display: none !important; } }

/* ---- Layout: header, hero, bands, footer, mobile menu ---- */
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: var(--fs-small); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 36px; height: 36px; flex: none; }
.logo-word { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.03em; white-space: nowrap; }
.logo-word .lw-b { color: var(--brand); }
.logo--footer .logo-word .lw-a, .logo--footer .logo-word .lw-b { color: var(--white); }
.logo--footer { color: var(--white); }
.logo--footer .logo-word { color: var(--white); }

/* Header: 64px, never taller. Nav collapses below 1100px; the CTA stays visible at every width. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--mist); height: 64px; box-sizing: border-box; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header .nav { display: flex; align-items: center; gap: 20px; }
.site-header .nav a { color: var(--ink); text-decoration: none; padding: 6px 0; white-space: nowrap; font-weight: 400; }
.site-header .nav a:hover { color: var(--brand); }
.site-header .nav a[aria-current="page"] { color: var(--brand); }
.site-header .nav .nav-cta, .site-header .nav .lang--menu { display: none; }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-right .btn-sm { white-space: nowrap; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; }
.lang a, .lang span[aria-current] { color: var(--slate); text-decoration: none; min-width: 32px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.lang span[aria-current] { color: var(--ink); }
.lang a:hover { color: var(--ink); background: var(--paper); }
.lang .sep { color: var(--mist); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--mist); background: var(--white); border-radius: 10px; padding: 11px 10px; flex-direction: column; justify-content: space-between; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 1100px) {
  .site-header .nav { display: none; }
  .site-header.nav-open .nav { display: flex; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: var(--white); flex-direction: column; align-items: stretch; padding: 12px 24px 24px; gap: 0; overflow-y: auto; }
  .site-header.nav-open .nav a { border-bottom: 1px solid var(--mist); padding: 14px 4px; font-size: 1.125rem; color: var(--ink); }
  .site-header.nav-open .nav a[aria-current="page"] { color: var(--brand); }
  .site-header.nav-open .nav .nav-cta { display: inline-flex; margin-top: auto; border: 0; color: #fff; padding: 0 22px; font-size: 1.0625rem; justify-content: center; min-height: 52px; border-radius: var(--radius-control); }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  /* phones: the language switch moves into the menu sheet (and stays in the footer); logo, CTA and toggle fit in 320px+ */
  .site-header .container { padding: 0 16px; }
  .header-right { gap: 8px; }
  .header-right .lang { display: none; }
  .header-right .btn-sm { min-height: 38px; padding: 0 12px; }
  .logo-word { font-size: 1.125rem; }
  .site-header.nav-open .nav .lang--menu { display: inline-flex; gap: 10px; padding: 14px 0; font-size: 1rem; }
  .site-header.nav-open .nav .lang--menu a, .site-header.nav-open .nav .lang--menu span[aria-current] { min-width: 40px; }
}
html.menu-open { overflow: hidden; }

/* Hero */
.hero { padding: 72px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 52fr 48fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.hero h1 { font-size: var(--fs-display); line-height: 1.1; max-width: 20ch; margin-bottom: 16px; }
.hero .sub { font-size: 1.125rem; color: var(--slate); max-width: 52ch; margin-bottom: 28px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art svg { width: 100%; height: auto; display: block; }
.trust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mist); }
.trust li { list-style: none; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); white-space: nowrap; }
ul.trust { padding: 0; margin: 32px 0 0; }
.trust .icon { color: var(--brand); width: 22px; height: 22px; }

/* Section intro with red marker */
.section-intro { max-width: 60ch; margin: 0 0 32px; }
.section-intro::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--brand); margin-bottom: 16px; }
.section-intro p { color: var(--slate); }
.band-ink .section-intro p { color: #C3C8D2; }

/* Inner page head + prose */
.page-head { padding-top: 56px; padding-bottom: 8px; }
.page-head h1 { max-width: 26ch; }
.page-head::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--brand); margin-bottom: 20px; }
.lead { font-size: 1.125rem; color: var(--slate); max-width: 60ch; }
.prose { padding-bottom: var(--section); }
.prose h2 { margin-top: 40px; }
.prose ul, .prose ol { max-width: 68ch; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.placeholder-note { border: 1px dashed var(--slate); background: var(--white); border-radius: var(--radius-card); padding: 20px 24px; max-width: 68ch; color: var(--slate); margin: 24px 0; }
.inline-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Steps band (dark slate, red numbered badges) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step .num-badge { display: inline-flex; width: 40px; height: 40px; border-radius: 999px; background: var(--brand); color: #fff; align-items: center; justify-content: center; font-weight: 600; margin-bottom: 14px; font-size: 1.125rem; }
.step h3 { color: var(--white); }
.step p { color: #C3C8D2; }

/* Tile grid (categories) */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
.tile { display: block; background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 22px; color: var(--ink); text-decoration: none; min-height: 44px; }
.tile:hover { border-color: var(--brand); color: var(--ink); }
.tile .tile-label { font-weight: 600; display: block; }
.tile .tile-count { color: var(--slate); font-size: var(--fs-small); }

/* Device band */
.device-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 960px) { .device-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .device-band { grid-template-columns: repeat(2, 1fr); } }
.device { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 20px 12px 18px; color: var(--ink); text-decoration: none; }
.device:hover { border-color: var(--brand); color: var(--ink); }
.device svg { width: 100%; max-width: 120px; height: auto; }
.device .device-label { font-weight: 600; font-size: var(--fs-small); }

/* Payment strip */
.pay-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; padding: 24px; border: 1px solid var(--mist); border-radius: var(--radius-card); background: var(--white); }
.pay-strip .pay-item { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.pay-strip .pay-item svg { color: var(--brand); }
.pay-strip .pay-note { flex-basis: 100%; text-align: center; color: var(--slate); font-size: var(--fs-small); margin: 4px 0 0; }
.pay-mini { display: inline-flex; gap: 10px; align-items: center; color: #C3C8D2; }
.pay-mini svg { width: 26px; height: 20px; }

/* Final CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 24ch; margin: 0 auto 12px; }
.cta-band p { color: #fff; max-width: 52ch; margin: 0 auto 24px; }
.cta-band .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer { padding: 64px 0 28px; color: #C3C8D2; }
.footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px 32px; }
@media (max-width: 960px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-about p { color: #C3C8D2; font-size: var(--fs-small); margin: 14px 0 8px; }
.footer-about .footer-meta { color: #8F96A3; font-size: var(--fs-small); }
.footer-title { font-weight: 600; color: var(--white); margin-bottom: 12px; font-size: 1rem; }
.site-footer .links { display: flex; flex-direction: column; gap: 4px; }
.site-footer .links a { color: #C3C8D2; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.site-footer .links a:hover { color: var(--white); }
.site-footer .links svg { width: 18px; height: 18px; flex: none; }
.site-footer .btn-whatsapp, .band-ink a.btn-whatsapp { width: auto; font-size: 1rem; min-height: 44px; margin-bottom: 8px; color: var(--ink); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; color: #8F96A3; font-size: var(--fs-small); }
.footer-bottom a { color: #C3C8D2; text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }
.footer-bottom .lang { margin-left: auto; }
.footer-bottom .lang a, .footer-bottom .lang span[aria-current] { color: #C3C8D2; min-height: 32px; }
.footer-bottom .lang span[aria-current] { color: var(--white); }

/* 404 */
.notfound { padding-top: var(--section); padding-bottom: var(--section); text-align: center; }
.notfound .lang-block { margin: 0 auto 40px; max-width: 52ch; }
.notfound .lang-block p { margin-left: auto; margin-right: auto; }

/* ---- Image layer: atmosphere photos, page-head art, step art, payment strip, refund note, skyline, blog cards ---- */
.atmo-wrap { margin-top: 28px; }
figure.atmo { margin: 0; }
figure.atmo img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.page-head--art { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: center; }
@media (max-width: 800px) { .page-head--art { grid-template-columns: 1fr; gap: 20px; } }
.art-tile { background: var(--paper); border-radius: var(--radius-card); padding: 20px; display: flex; align-items: center; justify-content: center; }
.art-tile svg { width: 100%; height: auto; max-width: 240px; }
.art-tile--device svg { max-width: 200px; }
.why-band { position: relative; overflow: hidden; }
.why-band > .container { position: relative; }
.band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .12; pointer-events: none; }
.step-art { margin-bottom: 14px; }
.step-art svg { width: 128px; height: 96px; display: block; }
.cta-band { position: relative; overflow: hidden; padding-bottom: calc(var(--section) + 96px); }
.cta-band .container { position: relative; z-index: 1; }
.cta-alps { position: absolute; left: 0; right: 0; bottom: -16px; height: 240px; background: url(/img/illus/alpine-skyline.svg) center bottom / max(1440px, 100%) auto no-repeat; pointer-events: none; }
.pay-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; max-width: 68ch; }
@media (max-width: 640px) { .pay-trio { grid-template-columns: 1fr; } }
.pay-trio-item { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.pay-trio-item svg { width: 120px; height: 90px; }
.pay-trio-item strong { font-weight: 600; }
.pay-trio-item span { color: var(--slate); font-size: var(--fs-small); }
.refund-note { display: flex; gap: 20px; align-items: center; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 20px 24px; margin: 24px 0; max-width: 68ch; }
.refund-note svg { width: 84px; height: 84px; flex: none; }
.refund-note p { margin: 4px 0 0; color: var(--slate); }
.tile-grid--devices .tile--device svg { width: 120px; height: 96px; }
.post-list--cards { max-width: none; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .post-list--cards { grid-template-columns: 1fr; } }
.post-list--cards li { padding: 0; overflow: hidden; }
.post-card { display: block; text-decoration: none; color: var(--ink); }
.post-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card .post-title { display: block; padding: 16px 20px 0; font-weight: 600; font-size: 1.125rem; }
.post-card:hover .post-title { color: var(--brand); }
.post-list--cards p { padding: 0 20px 18px; }
.page-head--art::before { display: none; }
.page-head--art .page-head-text::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--brand); margin-bottom: 20px; }

/* ---- Content components: FAQ, guide steps, tables, CTA, tiles with icons, TOC, blog list ---- */
.icon { width: 24px; height: 24px; flex: none; }

/* Prose layout */
.prose > h2, .prose > h3, .prose > p, .prose > ul, .prose > ol:not(.steps-list), .prose > .table-wrap, .prose > .note, .prose > aside, .prose > .cta-block, .prose > .faq, .prose > figure { max-width: 68ch; }
.prose h3 { margin-top: 28px; }
.prose > p + h2 { margin-top: 48px; }
.note { background: var(--paper); border: 1px solid var(--mist); border-left: 4px solid var(--brand); border-radius: var(--radius-card); padding: 16px 20px; margin: 20px 0; }
.note p:last-child { margin-bottom: 0; }
.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; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 20px 0 28px; }
table.data { border-collapse: collapse; width: 100%; font-size: .9375rem; background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); }
table.data th, table.data td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--mist); vertical-align: top; }
table.data thead th { font-weight: 600; background: var(--paper); }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data th[scope="row"] { font-weight: 600; }
table.data .num { text-align: right; }
.yes { color: var(--moss); display: inline-flex; }
.yes .icon { width: 20px; height: 20px; }
.no { color: var(--slate); }

/* FAQ */
.faq { margin-top: 48px; }
.faq details { padding: 16px 0; }
.faq summary { min-height: 44px; align-items: center; }
.faq .faq-a p { margin: 10px 0 0; max-width: 62ch; }

/* CTA block (inner pages) */
.cta-block { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 24px; margin: 36px 0; }
.cta-block p { margin-bottom: 16px; }
.cta-block .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Guide steps */
.steps-list { list-style: none; padding: 0; margin: 24px 0; }
.steps-list > li { border-top: 1px solid var(--mist); padding: 24px 0 8px; }
.steps-list h3 { display: flex; align-items: center; gap: 12px; margin-top: 0; }
.step-num { display: inline-flex; width: 32px; height: 32px; border-radius: 999px; background: var(--brand); color: #fff; align-items: center; justify-content: center; font-size: .9375rem; flex: none; }
.steps-list p { max-width: 68ch; }
figure.shot { margin: 16px 0 12px; max-width: 560px; }
.shot-frame { aspect-ratio: 16 / 10; border: 1px dashed var(--slate); border-radius: var(--radius-card); background: var(--paper); display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--slate); }
.shot-frame .shot-num { display: inline-flex; width: 36px; height: 36px; border-radius: 999px; background: var(--brand); color: #fff; align-items: center; justify-content: center; font-weight: 600; }
figure.shot img { border-radius: var(--radius-card); border: 1px solid var(--mist); }
figure.shot figcaption { font-size: var(--fs-small); color: var(--slate); margin-top: 8px; }

/* Before-you-start box */
.before { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 20px 24px; margin: 24px 0; }
.before h2 { font-size: var(--fs-h3); margin: 0 0 10px; }
.before ul { margin: 0; padding-left: 20px; }

/* Guide layout with sticky TOC on desktop */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: start; }
@media (max-width: 960px) { .guide-layout { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 84px; background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 16px 20px; font-size: var(--fs-small); }
.toc-title { font-weight: 600; margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin: 6px 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--brand); }

/* Category tiles with icons */
.tile-grid--cat .tile--icon { display: flex; flex-direction: column; gap: 8px; }
.tile--icon .icon { color: var(--brand); width: 28px; height: 28px; }
.tile-grid--cat { margin: 24px 0 8px; }

/* Breadcrumbs */
.crumbs { font-size: var(--fs-small); color: var(--slate); padding-top: 24px; }
.crumbs a { color: var(--slate); }
.crumbs span { margin: 0 6px; }

/* Blog list */
.post-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 16px; max-width: 68ch; }
.post-list li { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 20px 24px; }
.post-list li:hover { border-color: var(--brand); }
.post-list a { font-weight: 600; text-decoration: none; font-size: 1.125rem; color: var(--ink); }
.post-list a:hover { color: var(--brand); }
.post-list p { margin: 6px 0 0; color: var(--slate); }
.post-meta { font-size: var(--fs-small); color: var(--slate); margin-bottom: 16px; }

/* Contact page */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; max-width: 68ch; }
@media (max-width: 640px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 20px; }
.contact-card .icon { color: var(--brand); }
.contact-card .btn { margin-top: 12px; }

/* Three-column why block */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 800px) { .cols-3 { grid-template-columns: 1fr; } }
.cols-3 .col { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-card); }
.cols-3 .col .icon { color: var(--brand); margin-bottom: 10px; width: 28px; height: 28px; }
.cols-3 h3 { margin-top: 0; }
.cols-3 p { margin-bottom: 0; }

/* ---- Pricing configurator (from package/components/pricing.html) ---- */
.pricing{max-width:1120px;margin:0 auto;padding:32px 24px 64px}
.pricing h2{font-size:1.625rem;line-height:1.15;margin:0 0 6px;letter-spacing:-.01em;font-weight:600}
.pricing .lead{color:var(--slate);margin:0 0 28px;max-width:60ch}
.controls{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;margin-bottom:28px}
.control-label{font-size:.875rem;color:var(--slate);margin-bottom:8px;display:block}
/* segmented tier toggle */
.seg{display:inline-flex;background:#fff;border:1px solid var(--mist);border-radius:var(--radius-control);padding:3px}
.seg button{font:inherit;font-weight:600;padding:9px 18px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--slate);min-height:44px}
.seg button[aria-checked="true"]{background:var(--glacier);color:#fff}
.seg button:focus-visible{outline:3px solid var(--glacier);outline-offset:2px}
/* device selector: five TV screens */
.devices{display:flex;gap:10px}
.tv{position:relative;width:56px;height:52px;border:0;background:transparent;padding:0;cursor:pointer;color:var(--mist)}
.tv svg{width:100%;height:100%;display:block}
.tv .screen{fill:#fff;stroke:currentColor;stroke-width:2;transition:fill .15s,stroke .15s}
.tv .stand{stroke:currentColor;stroke-width:2;fill:none}
.tv .check{opacity:0;transition:opacity .15s}
.tv.on{color:var(--glacier)}
.tv.on .screen{fill:var(--glacier)}
.tv.on .check{opacity:1}
.tv:focus-visible{outline:3px solid var(--glacier);outline-offset:2px;border-radius:6px}
.tv .n{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:.75rem;color:var(--slate)}
.devices-wrap{padding-bottom:4px}
.device-summary{font-size:.875rem;color:var(--slate);margin-top:24px}
/* cards */
/* minmax(0,1fr), not 1fr: a bare 1fr keeps an automatic min-content floor, so a column grows to fit its
   longest unbreakable line and the whole grid pushes past its container. French list items are longer than
   the German ones, which is why /fr/ overflowed at 1280 px and /de/ did not. */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* Four across needs a column wide enough for the longest order button. The French label "Commander par
   WhatsApp" plus its icon, gap and padding measures 243px, and a 4-column track inside the 1120px container
   only reaches that from about 1068px of viewport, so the switch to two columns happens at 1100px, not 960. */
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards{grid-template-columns:minmax(0,1fr)}}
.plan{min-width:0;background:#fff;border:1px solid var(--mist);border-radius:var(--radius-card);padding:22px 20px 20px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;position:relative}
.plan.featured{border-top:3px solid var(--glacier)}
.plan .badge{position:absolute;top:-12px;left:20px;background:var(--glacier);color:#fff;font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:999px}
.plan .dur{font-weight:600;font-size:1.0625rem;margin-bottom:10px}
.plan .price{font-size:2rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;transition:opacity .12s}
.plan .price.fade{opacity:0}
.plan .cur{font-size:1rem;font-weight:600;margin-right:4px;color:var(--slate)}
.plan .per{color:var(--slate);font-size:.875rem;margin:4px 0 16px;font-variant-numeric:tabular-nums}
.plan ul{list-style:none;padding:0;margin:0 0 18px;font-size:.9375rem}
.plan li{padding:5px 0 5px 24px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:7px;border-left:2px solid var(--moss);border-bottom:2px solid var(--moss);transform:rotate(-45deg)}
.plan .actions{margin-top:auto;display:grid;gap:8px}
.pricing .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 16px;border-radius:var(--radius-control);font:inherit;font-weight:600;text-decoration:none;color:#fff;border:0;transition:filter .15s;width:100%}
.pricing .btn:hover{filter:brightness(.92)}
.pricing .btn:focus-visible{outline:3px solid var(--glacier);outline-offset:2px}
.pricing .btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.pricing .btn-wa{background:var(--whatsapp)}
.pricing .btn-mail{background:var(--email)}
/* trial strip */
.trials{margin-top:40px}
.trials h3{font-size:1.25rem;margin:0 0 4px}
.trials .lead{margin-bottom:16px}
.trial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:720px){.trial-grid{grid-template-columns:1fr}}
.trial{background:#fff;border:1px solid var(--mist);border-radius:var(--radius-card);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.trial .t-dur{font-weight:600}
.trial .t-price{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums}
.trial .t-note{font-size:.875rem;color:var(--slate);margin-bottom:8px}
.trial .actions{display:grid;gap:8px;margin-top:auto}
/* payment */
.pay{margin-top:28px;padding:16px 18px;background:#fff;border:1px solid var(--mist);border-radius:var(--radius-card);font-size:.9375rem;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.pay strong{font-weight:600}
/* the compact configurator (home page) omits the trial strip, the payment note and its own heading server-side */
@media(prefers-reduced-motion:reduce){.plan .price,.tv .screen,.tv .check{transition:none}}
.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}

/* ---- Theme overrides on the pricing component (loaded last). Logic in pricing.js is untouched. ---- */
.pricing { padding: 0; max-width: none; }
.pricing .lead { color: var(--slate); }
.pricing .seg { border-radius: var(--radius-control); }
.pricing .seg button { border-radius: 9px; }
.pricing .seg button[aria-checked="true"] { background: var(--accent); }
.pricing .tv.on { color: var(--brand); }
.pricing .tv.on .screen { fill: var(--brand); }
.pricing .plan { border-radius: var(--radius-card); box-shadow: var(--shadow-card); border-color: var(--mist); }
.pricing .plan.featured { border-top: 3px solid var(--brand); }
.pricing .plan .badge { background: var(--brand); }
.pricing .plan li::before { border-color: var(--moss); }
.pricing .btn { border-radius: var(--radius-control); }
.pricing .btn:hover { filter: none; }
.pricing .btn-wa { background: var(--whatsapp); color: var(--ink); }
.pricing .btn-wa:hover { background: var(--whatsapp-dark); }
.pricing .btn-mail { background: var(--white); color: var(--ink); border: 2px solid var(--email); }
.pricing .btn-mail svg { fill: var(--email); }
.pricing .btn-mail:hover { background: #FDECEA; }
.pricing .trial, .pricing .pay { border-radius: var(--radius-card); }
.pricing .pay { background: var(--paper); }
/* only two animations site-wide: price cross-fade and device-screen fill (both defined in the component) */

/* Screenshot placeholder: neutral grey device frame with the step number (replaced by the real WebP when present) */
.shot-frame { border: 10px solid #C3C8D2; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--mist); position: relative; }
.shot-frame::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: -24px; height: 8px; background: #C3C8D2; border-radius: 0 0 6px 6px; }
figure.shot { margin-bottom: 32px; }
figure.shot figcaption { margin-top: 22px; }

/* Configurator controls: one centred column at every width. Order: tier label, Standard/Premium toggle, 24px gap,
   devices label, five TV screens, summary sentence. Everything centred on the page axis. Cards and logic untouched. */
.pricing .controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.pricing .controls > div { text-align: center; }
.pricing .control-label { text-align: center; }
.pricing .devices { justify-content: center; }
.pricing .devices-wrap { padding-bottom: 0; }
.pricing .device-summary { text-align: center; margin-top: 12px; max-width: 52ch; }

/* ---- Motion layer (round 4) ----
   CSS-first. Only opacity and transform are animated (CLS stays 0). Durations 150–500 ms on cubic-bezier(.2,.7,.2,1).
   html.motion is added by /assets/motion.js (sync, in <head>) only when prefers-reduced-motion is not set, so every
   initially-hidden state below is keyed on it: without JS or with reduced motion the page renders fully visible. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* 6. micro-interactions (no JS) */
  /* button and card hover/press motion: see _surface.css */
  @media (min-width: 1101px) {
    .site-header .nav a { position: relative; }
    .site-header .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
    .site-header .nav a:hover::after, .site-header .nav a[aria-current="page"]::after { transform: scaleX(1); }
  }
  .site-header { transition: box-shadow .25s var(--ease); }
  .site-header.scrolled { box-shadow: 0 6px 20px rgba(28, 31, 38, .08); }
  .lang a, .lang span[aria-current] { transition: color .2s var(--ease), background-color .2s var(--ease); }
  .faq summary::after, details > summary::after { transition: transform .25s var(--ease); }
  #cards .btn-wa { animation: breathe 2s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } 50% { box-shadow: 0 6px 18px 0 rgba(37, 211, 102, .35); } }

  /* 3. live hero TV (pure CSS keyframes on SVG elements) */
  .hero-bar { transform-box: fill-box; transform-origin: left center; animation: hero-bar 20s linear infinite; }
  .hero-knob { animation: hero-knob 20s linear infinite; }
  @keyframes hero-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes hero-knob { from { transform: translateX(-336px); } to { transform: translateX(0); } }
  .hero-tile { animation: hero-tile 12s ease-in-out infinite; }
  @keyframes hero-tile { 0%, 26%, 100% { fill: #F4F5F7; } 8%, 18% { fill: #FBE4E2; } }
  .hero-pill { transform-box: fill-box; transform-origin: center; animation: hero-pill 6s ease-in-out infinite; }
  @keyframes hero-pill { 0%, 88%, 100% { transform: scale(1); opacity: 1; } 94% { transform: scale(1.06); opacity: .8; } }

  /* 5. configurator: left-to-right cascade, check pop, badge shine (played once, .shone set by motion.js) */
  .tv:nth-child(2) { --k: 1; } .tv:nth-child(3) { --k: 2; } .tv:nth-child(4) { --k: 3; } .tv:nth-child(5) { --k: 4; }
  .tv.on .screen { transition-delay: calc(var(--k, 0) * 60ms); }
  .tv .check { transform-box: fill-box; transform-origin: center; }
  .tv.on .check { animation: check-pop .3s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms + 60ms); }
  @keyframes check-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
  .plan .badge { overflow: hidden; }
  .plan .badge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%); }
  #cards.in:not(.shone) .plan .badge::after { animation: shine .9s var(--ease) .3s 1 both; }
  @keyframes shine { to { transform: translateX(420%); } }

  /* 7. steps band: numbers draw in one after another, a thin red connector grows between them */
  .step { position: relative; }
  @media (min-width: 721px) {
    .step:not(:last-child)::before { content: ""; position: absolute; top: var(--line-top, 129px); left: 52px; right: -32px; height: 2px; background: var(--brand); opacity: .8; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
    .steps.in .step:not(:last-child)::before { transform: scaleX(1); }
    .steps.in .step:nth-child(1)::before { transition-delay: .35s; }
    .steps.in .step:nth-child(2)::before { transition-delay: .8s; }
  }
  html.motion .steps .num-badge { transform: scale(.5); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); }
  html.motion .steps.in .num-badge { transform: scale(1); opacity: 1; }
  html.motion .steps.in .step:nth-child(2) .num-badge { transition-delay: .45s; }
  html.motion .steps.in .step:nth-child(3) .num-badge { transition-delay: .9s; }

  /* 8. CTA band: the skyline sits on its own layer so it can move (translateY <= 12px, set by motion.js on desktop only) */
  .cta-alps { will-change: transform; }

  /* 1. hero entrance: staggered fade-up, illustration scales from .96; total under 700 ms */
  html.motion .hero [data-enter] { opacity: .02; animation: enter .4s var(--ease) forwards; }
  html.motion .hero [data-enter="2"] { animation-delay: 80ms; }
  html.motion .hero [data-enter="3"] { animation-delay: 160ms; }
  html.motion .hero [data-enter="4"] { animation-delay: 240ms; }
  html.motion .hero .hero-art { opacity: .02; animation: enter-scale .55s var(--ease) 100ms forwards; }
  @keyframes enter { from { opacity: .02; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes enter-scale { from { opacity: .02; transform: scale(.96); } to { opacity: 1; transform: none; } }

  /* 2. scroll reveals: motion.js marks below-the-fold targets with data-reveal (single) or data-reveal="group"
        (children staggered 60 ms via --i) and adds .in at 15 % visibility; the attribute is removed afterwards. */
  html.motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  html.motion img[data-reveal] { transform: scale(1.03); }
  html.motion [data-reveal].in { opacity: 1; transform: none; }
  html.motion [data-reveal="group"] { opacity: 1; transform: none; transition: none; }
  html.motion [data-reveal="group"] > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  html.motion [data-reveal="group"].in > * { opacity: 1; transform: none; }

  /* 4. counters: fixed width while counting so nothing around them shifts */
  .num { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
  .num-wrap { display: inline; }

  /* 6. FAQ: height animates via grid-template-rows 0fr -> 1fr (no JS height maths); motion.js drives the classes */
  html.motion details.anim > .faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s var(--ease), opacity .25s var(--ease); }
  html.motion details.anim.is-open > .faq-a { grid-template-rows: 1fr; opacity: 1; }
  html.motion details.anim > .faq-a > .faq-inner { overflow: hidden; min-height: 0; }
  html.motion details.anim.closing > summary::after { transform: rotate(45deg); margin-top: 6px; }
}

/* 9. page transitions: 150 ms cross-fade where the View Transitions API exists; off under reduced motion */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- Surfaces (round 5): real buttons, gradient page, contour patterns, Swiss outline watermark, cards, pills ----
   Bundled last so it overrides the earlier button/card rules. url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231C1F26%22%20stroke-opacity%3D%220.05%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M129.9%20120.1%20Q130.3%20122.2%20128.8%20123.8%20Q127.3%20125.4%20126.2%20127.0%20Q125.2%20128.5%20124.2%20130.3%20Q123.2%20132.0%20121.9%20134.0%20Q120.7%20136.1%20118.3%20135.6%20Q115.9%20135.0%20113.9%20135.2%20Q112.0%20135.3%20109.9%20135.7%20Q107.9%20136.1%20106.4%20134.4%20Q104.9%20132.7%20103.0%20132.2%20Q101.1%20131.7%2099.2%20130.7%20Q97.2%20129.8%2095.6%20128.2%20Q93.9%20126.7%2093.7%20124.5%20Q93.6%20122.2%2093.6%20120.1%20Q93.7%20118.0%2093.8%20115.9%20Q93.8%20113.8%2094.8%20112.0%20Q95.8%20110.2%2096.9%20108.5%20Q98.0%20106.9%20100.0%20106.2%20Q102.0%20105.4%20103.0%20103.5%20Q104.1%20101.6%20106.3%20102.1%20Q108.5%20102.6%20110.2%20100.7%20Q112.0%2098.9%20113.9%20100.2%20Q115.7%20101.6%20117.9%20101.5%20Q120.0%20101.5%20121.8%20102.4%20Q123.7%20103.4%20125.1%20104.9%20Q126.6%20106.4%20127.4%20108.3%20Q128.3%20110.1%20128.8%20112.1%20Q129.3%20114.0%20129.4%20116.0%20Q129.5%20118.0%20129.9%20120.1Z%22%2F%3E%3Cpath%20d%3D%22M148.8%20122.2%20Q149.2%20126.5%20146.0%20129.7%20Q142.9%20132.9%20141.8%20136.9%20Q140.7%20140.9%20137.3%20143.2%20Q134.0%20145.6%20131.5%20149.5%20Q129.0%20153.4%20124.6%20153.8%20Q120.2%20154.1%20116.1%20151.9%20Q112.0%20149.7%20108.1%20150.8%20Q104.3%20151.8%20101.0%20149.8%20Q97.7%20147.8%2094.4%20145.9%20Q91.2%20144.1%2086.0%20143.5%20Q80.7%20142.9%2079.1%20138.8%20Q77.5%20134.6%2075.7%20130.6%20Q73.9%20126.7%2072.4%20122.3%20Q70.9%20118.0%2073.0%20113.8%20Q75.1%20109.6%2076.7%20105.6%20Q78.2%20101.7%2082.0%2099.4%20Q85.9%2097.2%2088.5%2094.5%20Q91.0%2091.7%2094.0%2089.3%20Q97.1%2087.0%20100.4%2084.2%20Q103.7%2081.4%20107.8%2079.0%20Q112.0%2076.5%20116.3%2078.4%20Q120.6%2080.3%20125.1%2080.8%20Q129.7%2081.3%20132.8%2084.6%20Q135.9%2088.0%20138.6%2091.3%20Q141.2%2094.7%20142.8%2098.5%20Q144.4%20102.4%20143.9%20106.6%20Q143.3%20110.8%20145.8%20114.4%20Q148.3%20118.0%20148.8%20122.2Z%22%2F%3E%3Cpath%20d%3D%22M169.2%20124.4%20Q168.4%20130.9%20168.0%20137.8%20Q167.7%20144.8%20161.9%20149.0%20Q156.1%20153.2%20149.5%20155.0%20Q142.9%20156.7%20139.7%20162.9%20Q136.6%20169.0%20129.6%20166.9%20Q122.7%20164.7%20117.3%20164.2%20Q112.0%20163.7%20106.3%20166.0%20Q100.5%20168.2%2094.9%20166.7%20Q89.3%20165.1%2082.0%20165.0%20Q74.7%20164.8%2069.2%20160.6%20Q63.8%20156.5%2064.5%20148.5%20Q65.3%20140.5%2060.6%20135.7%20Q55.8%20130.8%2056.4%20124.4%20Q57.0%20118.0%2062.1%20112.9%20Q67.2%20107.8%2067.6%20102.3%20Q68.0%2096.8%2070.6%2092.0%20Q73.3%2087.1%2075.4%2081.0%20Q77.6%2074.8%2081.4%2068.7%20Q85.3%2062.5%2092.8%2064.8%20Q100.4%2067.1%20106.2%2066.2%20Q112.0%2065.3%20117.6%2067.0%20Q123.3%2068.7%20129.2%2069.4%20Q135.1%2070.1%20138.1%2075.8%20Q141.2%2081.4%20144.5%2085.4%20Q147.9%2089.4%20155.3%2091.5%20Q162.8%2093.5%20165.6%2099.3%20Q168.4%20105.1%20169.2%20111.6%20Q170.1%20118.0%20169.2%20124.4Z%22%2F%3E%3Cpath%20d%3D%22M188.5%20126.3%20Q184.5%20134.5%20182.7%20142.9%20Q180.9%20151.2%20175.6%20157.8%20Q170.3%20164.5%20160.4%20165.3%20Q150.4%20166.1%20147.4%20175.8%20Q144.5%20185.4%20136.4%20187.5%20Q128.3%20189.5%20120.2%20192.7%20Q112.0%20196.0%20104.3%20190.9%20Q96.5%20185.9%2088.5%20184.7%20Q80.5%20183.4%2073.2%20179.7%20Q65.8%20175.9%2057.4%20172.1%20Q49.0%20168.2%2047.0%20159.2%20Q45.0%20150.3%2042.1%20142.4%20Q39.3%20134.6%2042.6%20126.3%20Q45.9%20118.0%2046.7%20110.6%20Q47.5%20103.3%2046.0%2094.4%20Q44.6%2085.5%2051.8%2080.6%20Q59.0%2075.7%2060.5%2065.6%20Q62.1%2055.4%2070.3%2051.9%20Q78.5%2048.5%2086.8%2046.0%20Q95.0%2043.6%20103.5%2045.9%20Q112.0%2048.1%20120.0%2048.2%20Q127.9%2048.2%20133.2%2055.5%20Q138.6%2062.8%20146.1%2064.3%20Q153.6%2065.8%20159.2%2070.9%20Q164.7%2075.9%20167.9%2082.7%20Q171.1%2089.5%20178.1%2095.4%20Q185.1%20101.3%20188.8%20109.7%20Q192.5%20118.0%20188.5%20126.3Z%22%2F%3E%3Cpath%20d%3D%22M201.3%20127.3%20Q193.2%20136.5%20190.7%20145.6%20Q188.1%20154.6%20186.0%20165.0%20Q183.8%20175.3%20170.9%20175.5%20Q158.0%20175.7%20151.5%20181.1%20Q145.0%20186.6%20138.0%20193.9%20Q131.0%20201.2%20121.5%20208.3%20Q112.0%20215.4%20102.7%20207.6%20Q93.3%20199.8%2083.6%20198.4%20Q73.9%20197.0%2062.4%20195.9%20Q50.8%20194.7%2044.8%20185.6%20Q38.7%20176.4%2040.0%20164.2%20Q41.3%20152.0%2031.9%20145.2%20Q22.6%20138.4%2028.9%20128.2%20Q35.2%20118.0%2029.2%20107.9%20Q23.2%2097.7%2029.0%2089.3%20Q34.8%2080.8%2040.7%2073.3%20Q46.6%2065.9%2047.6%2052.2%20Q48.6%2038.6%2062.2%2040.7%20Q75.8%2042.8%2085.2%2042.2%20Q94.5%2041.5%20103.3%2037.6%20Q112.0%2033.8%20120.4%2039.0%20Q128.9%2044.2%20139.3%2041.9%20Q149.7%2039.7%20159.4%2043.0%20Q169.2%2046.3%20176.9%2053.2%20Q184.5%2060.1%20187.7%2070.1%20Q190.8%2080.0%20193.3%2089.5%20Q195.7%2098.9%20202.5%20108.5%20Q209.4%20118.0%20201.3%20127.3Z%22%2F%3E%3Cpath%20d%3D%22M259.9%20239.6%20Q260.2%20241.2%20259.3%20242.6%20Q258.4%20244.0%20257.9%20245.5%20Q257.4%20247.1%20255.9%20247.8%20Q254.5%20248.6%20253.0%20249.0%20Q251.5%20249.4%20250.4%20250.8%20Q249.2%20252.1%20247.6%20251.8%20Q246.0%20251.4%20244.4%20251.7%20Q242.8%20252.0%20241.2%20251.7%20Q239.5%20251.5%20238.6%20250.0%20Q237.7%20248.5%20236.6%20247.4%20Q235.5%20246.4%20234.2%20245.4%20Q232.8%20244.3%20231.9%20242.9%20Q230.9%20241.4%20231.6%20239.7%20Q232.3%20238.0%20232.4%20236.5%20Q232.4%20234.9%20233.5%20233.7%20Q234.5%20232.5%20234.9%20230.9%20Q235.2%20229.4%20236.2%20228.2%20Q237.2%20227.0%20238.6%20226.3%20Q240.1%20225.7%20241.3%20224.3%20Q242.6%20223.0%20244.3%20223.2%20Q246.0%20223.4%20247.7%20223.4%20Q249.3%20223.4%20250.5%20224.8%20Q251.7%20226.2%20252.8%20227.2%20Q253.8%20228.2%20254.6%20229.4%20Q255.4%20230.5%20257.0%20231.2%20Q258.7%20231.9%20259.5%20233.3%20Q260.4%20234.7%20259.9%20236.4%20Q259.5%20238.0%20259.9%20239.6Z%22%2F%3E%3Cpath%20d%3D%22M276.8%20241.5%20Q276.7%20245.0%20274.1%20247.7%20Q271.6%20250.3%20271.2%20254.0%20Q270.8%20257.8%20266.8%20258.5%20Q262.9%20259.2%20260.1%20260.3%20Q257.3%20261.4%20254.6%20262.8%20Q252.0%20264.2%20249.0%20265.1%20Q246.0%20266.1%20242.6%20266.9%20Q239.2%20267.8%20235.3%20268.1%20Q231.4%20268.3%20228.1%20266.5%20Q224.8%20264.6%20223.8%20260.5%20Q222.9%20256.4%20221.8%20253.3%20Q220.8%20250.1%20217.6%20247.7%20Q214.4%20245.2%20214.1%20241.6%20Q213.7%20238.0%20215.0%20234.6%20Q216.2%20231.2%20217.6%20228.1%20Q219.0%20225.0%20221.0%20222.3%20Q222.9%20219.6%20224.2%20215.9%20Q225.4%20212.2%20229.6%20212.4%20Q233.8%20212.7%20236.5%20210.4%20Q239.2%20208.2%20242.6%20207.0%20Q246.0%20205.7%20249.1%20208.4%20Q252.2%20211.0%20255.6%20210.9%20Q259.1%20210.8%20261.2%20213.6%20Q263.2%20216.4%20265.1%20218.8%20Q267.0%20221.2%20270.8%20222.7%20Q274.6%20224.2%20275.1%20227.7%20Q275.7%20231.2%20276.3%20234.6%20Q276.9%20238.0%20276.8%20241.5Z%22%2F%3E%3Cpath%20d%3D%22M293.0%20243.1%20Q290.9%20248.2%20290.8%20253.9%20Q290.7%20259.5%20287.2%20263.8%20Q283.6%20268.0%20277.0%20268.2%20Q270.3%20268.4%20266.8%20271.1%20Q263.3%20273.9%20259.9%20279.2%20Q256.6%20284.5%20251.3%20283.2%20Q246.0%20282.0%20240.7%20283.1%20Q235.4%20284.3%20229.2%20285.1%20Q222.9%20285.9%20219.5%20280.7%20Q216.0%20275.6%20213.8%20270.5%20Q211.6%20265.4%20208.0%20261.7%20Q204.4%20258.0%20201.6%20253.4%20Q198.8%20248.8%20199.8%20243.4%20Q200.8%20238.0%20203.7%20233.5%20Q206.7%20229.0%20207.3%20224.3%20Q207.9%20219.6%20208.8%20214.3%20Q209.7%20209.0%20214.0%20206.2%20Q218.4%20203.3%20221.4%20198.3%20Q224.4%20193.2%20229.6%20190.9%20Q234.7%20188.6%20240.4%20188.8%20Q246.0%20189.0%20251.0%20191.5%20Q256.0%20194.0%20259.8%20197.8%20Q263.5%20201.6%20269.0%20202.0%20Q274.4%20202.4%20278.0%20206.0%20Q281.6%20209.6%20283.0%20214.5%20Q284.5%20219.5%20287.3%20223.7%20Q290.1%20227.9%20292.6%20233.0%20Q295.0%20238.0%20293.0%20243.1Z%22%2F%3E%3Cpath%20d%3D%22M304.1%20244.1%20Q299.3%20250.2%20299.1%20256.8%20Q298.9%20263.5%20292.2%20266.5%20Q285.5%20269.5%20285.5%20278.5%20Q285.6%20287.6%20277.7%20287.6%20Q269.9%20287.6%20264.6%20291.8%20Q259.2%20295.9%20252.6%20296.2%20Q246.0%20296.5%20239.3%20296.8%20Q232.5%20297.1%20224.5%20298.3%20Q216.4%20299.4%20214.3%20289.9%20Q212.1%20280.5%20207.9%20276.1%20Q203.7%20271.7%20201.4%20266.1%20Q199.2%20260.6%20197.8%20254.9%20Q196.4%20249.3%20192.9%20243.7%20Q189.3%20238.0%20188.5%20231.3%20Q187.6%20224.7%20187.8%20217.4%20Q188.0%20210.1%20193.3%20205.1%20Q198.5%20200.1%20203.6%20195.7%20Q208.7%20191.2%20215.0%20188.9%20Q221.3%20186.7%20227.4%20185.1%20Q233.6%20183.5%20239.8%20179.1%20Q246.0%20174.7%20251.7%20181.3%20Q257.4%20188.0%20265.0%20185.3%20Q272.7%20182.6%20276.0%20189.4%20Q279.3%20196.2%20288.7%20196.4%20Q298.0%20196.5%20299.2%20204.2%20Q300.4%20211.8%20306.2%20217.4%20Q312.0%20222.9%20310.4%20230.5%20Q308.8%20238.0%20304.1%20244.1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") / url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%220.06%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M129.9%20120.1%20Q130.3%20122.2%20128.8%20123.8%20Q127.3%20125.4%20126.2%20127.0%20Q125.2%20128.5%20124.2%20130.3%20Q123.2%20132.0%20121.9%20134.0%20Q120.7%20136.1%20118.3%20135.6%20Q115.9%20135.0%20113.9%20135.2%20Q112.0%20135.3%20109.9%20135.7%20Q107.9%20136.1%20106.4%20134.4%20Q104.9%20132.7%20103.0%20132.2%20Q101.1%20131.7%2099.2%20130.7%20Q97.2%20129.8%2095.6%20128.2%20Q93.9%20126.7%2093.7%20124.5%20Q93.6%20122.2%2093.6%20120.1%20Q93.7%20118.0%2093.8%20115.9%20Q93.8%20113.8%2094.8%20112.0%20Q95.8%20110.2%2096.9%20108.5%20Q98.0%20106.9%20100.0%20106.2%20Q102.0%20105.4%20103.0%20103.5%20Q104.1%20101.6%20106.3%20102.1%20Q108.5%20102.6%20110.2%20100.7%20Q112.0%2098.9%20113.9%20100.2%20Q115.7%20101.6%20117.9%20101.5%20Q120.0%20101.5%20121.8%20102.4%20Q123.7%20103.4%20125.1%20104.9%20Q126.6%20106.4%20127.4%20108.3%20Q128.3%20110.1%20128.8%20112.1%20Q129.3%20114.0%20129.4%20116.0%20Q129.5%20118.0%20129.9%20120.1Z%22%2F%3E%3Cpath%20d%3D%22M148.8%20122.2%20Q149.2%20126.5%20146.0%20129.7%20Q142.9%20132.9%20141.8%20136.9%20Q140.7%20140.9%20137.3%20143.2%20Q134.0%20145.6%20131.5%20149.5%20Q129.0%20153.4%20124.6%20153.8%20Q120.2%20154.1%20116.1%20151.9%20Q112.0%20149.7%20108.1%20150.8%20Q104.3%20151.8%20101.0%20149.8%20Q97.7%20147.8%2094.4%20145.9%20Q91.2%20144.1%2086.0%20143.5%20Q80.7%20142.9%2079.1%20138.8%20Q77.5%20134.6%2075.7%20130.6%20Q73.9%20126.7%2072.4%20122.3%20Q70.9%20118.0%2073.0%20113.8%20Q75.1%20109.6%2076.7%20105.6%20Q78.2%20101.7%2082.0%2099.4%20Q85.9%2097.2%2088.5%2094.5%20Q91.0%2091.7%2094.0%2089.3%20Q97.1%2087.0%20100.4%2084.2%20Q103.7%2081.4%20107.8%2079.0%20Q112.0%2076.5%20116.3%2078.4%20Q120.6%2080.3%20125.1%2080.8%20Q129.7%2081.3%20132.8%2084.6%20Q135.9%2088.0%20138.6%2091.3%20Q141.2%2094.7%20142.8%2098.5%20Q144.4%20102.4%20143.9%20106.6%20Q143.3%20110.8%20145.8%20114.4%20Q148.3%20118.0%20148.8%20122.2Z%22%2F%3E%3Cpath%20d%3D%22M169.2%20124.4%20Q168.4%20130.9%20168.0%20137.8%20Q167.7%20144.8%20161.9%20149.0%20Q156.1%20153.2%20149.5%20155.0%20Q142.9%20156.7%20139.7%20162.9%20Q136.6%20169.0%20129.6%20166.9%20Q122.7%20164.7%20117.3%20164.2%20Q112.0%20163.7%20106.3%20166.0%20Q100.5%20168.2%2094.9%20166.7%20Q89.3%20165.1%2082.0%20165.0%20Q74.7%20164.8%2069.2%20160.6%20Q63.8%20156.5%2064.5%20148.5%20Q65.3%20140.5%2060.6%20135.7%20Q55.8%20130.8%2056.4%20124.4%20Q57.0%20118.0%2062.1%20112.9%20Q67.2%20107.8%2067.6%20102.3%20Q68.0%2096.8%2070.6%2092.0%20Q73.3%2087.1%2075.4%2081.0%20Q77.6%2074.8%2081.4%2068.7%20Q85.3%2062.5%2092.8%2064.8%20Q100.4%2067.1%20106.2%2066.2%20Q112.0%2065.3%20117.6%2067.0%20Q123.3%2068.7%20129.2%2069.4%20Q135.1%2070.1%20138.1%2075.8%20Q141.2%2081.4%20144.5%2085.4%20Q147.9%2089.4%20155.3%2091.5%20Q162.8%2093.5%20165.6%2099.3%20Q168.4%20105.1%20169.2%20111.6%20Q170.1%20118.0%20169.2%20124.4Z%22%2F%3E%3Cpath%20d%3D%22M188.5%20126.3%20Q184.5%20134.5%20182.7%20142.9%20Q180.9%20151.2%20175.6%20157.8%20Q170.3%20164.5%20160.4%20165.3%20Q150.4%20166.1%20147.4%20175.8%20Q144.5%20185.4%20136.4%20187.5%20Q128.3%20189.5%20120.2%20192.7%20Q112.0%20196.0%20104.3%20190.9%20Q96.5%20185.9%2088.5%20184.7%20Q80.5%20183.4%2073.2%20179.7%20Q65.8%20175.9%2057.4%20172.1%20Q49.0%20168.2%2047.0%20159.2%20Q45.0%20150.3%2042.1%20142.4%20Q39.3%20134.6%2042.6%20126.3%20Q45.9%20118.0%2046.7%20110.6%20Q47.5%20103.3%2046.0%2094.4%20Q44.6%2085.5%2051.8%2080.6%20Q59.0%2075.7%2060.5%2065.6%20Q62.1%2055.4%2070.3%2051.9%20Q78.5%2048.5%2086.8%2046.0%20Q95.0%2043.6%20103.5%2045.9%20Q112.0%2048.1%20120.0%2048.2%20Q127.9%2048.2%20133.2%2055.5%20Q138.6%2062.8%20146.1%2064.3%20Q153.6%2065.8%20159.2%2070.9%20Q164.7%2075.9%20167.9%2082.7%20Q171.1%2089.5%20178.1%2095.4%20Q185.1%20101.3%20188.8%20109.7%20Q192.5%20118.0%20188.5%20126.3Z%22%2F%3E%3Cpath%20d%3D%22M201.3%20127.3%20Q193.2%20136.5%20190.7%20145.6%20Q188.1%20154.6%20186.0%20165.0%20Q183.8%20175.3%20170.9%20175.5%20Q158.0%20175.7%20151.5%20181.1%20Q145.0%20186.6%20138.0%20193.9%20Q131.0%20201.2%20121.5%20208.3%20Q112.0%20215.4%20102.7%20207.6%20Q93.3%20199.8%2083.6%20198.4%20Q73.9%20197.0%2062.4%20195.9%20Q50.8%20194.7%2044.8%20185.6%20Q38.7%20176.4%2040.0%20164.2%20Q41.3%20152.0%2031.9%20145.2%20Q22.6%20138.4%2028.9%20128.2%20Q35.2%20118.0%2029.2%20107.9%20Q23.2%2097.7%2029.0%2089.3%20Q34.8%2080.8%2040.7%2073.3%20Q46.6%2065.9%2047.6%2052.2%20Q48.6%2038.6%2062.2%2040.7%20Q75.8%2042.8%2085.2%2042.2%20Q94.5%2041.5%20103.3%2037.6%20Q112.0%2033.8%20120.4%2039.0%20Q128.9%2044.2%20139.3%2041.9%20Q149.7%2039.7%20159.4%2043.0%20Q169.2%2046.3%20176.9%2053.2%20Q184.5%2060.1%20187.7%2070.1%20Q190.8%2080.0%20193.3%2089.5%20Q195.7%2098.9%20202.5%20108.5%20Q209.4%20118.0%20201.3%20127.3Z%22%2F%3E%3Cpath%20d%3D%22M259.9%20239.6%20Q260.2%20241.2%20259.3%20242.6%20Q258.4%20244.0%20257.9%20245.5%20Q257.4%20247.1%20255.9%20247.8%20Q254.5%20248.6%20253.0%20249.0%20Q251.5%20249.4%20250.4%20250.8%20Q249.2%20252.1%20247.6%20251.8%20Q246.0%20251.4%20244.4%20251.7%20Q242.8%20252.0%20241.2%20251.7%20Q239.5%20251.5%20238.6%20250.0%20Q237.7%20248.5%20236.6%20247.4%20Q235.5%20246.4%20234.2%20245.4%20Q232.8%20244.3%20231.9%20242.9%20Q230.9%20241.4%20231.6%20239.7%20Q232.3%20238.0%20232.4%20236.5%20Q232.4%20234.9%20233.5%20233.7%20Q234.5%20232.5%20234.9%20230.9%20Q235.2%20229.4%20236.2%20228.2%20Q237.2%20227.0%20238.6%20226.3%20Q240.1%20225.7%20241.3%20224.3%20Q242.6%20223.0%20244.3%20223.2%20Q246.0%20223.4%20247.7%20223.4%20Q249.3%20223.4%20250.5%20224.8%20Q251.7%20226.2%20252.8%20227.2%20Q253.8%20228.2%20254.6%20229.4%20Q255.4%20230.5%20257.0%20231.2%20Q258.7%20231.9%20259.5%20233.3%20Q260.4%20234.7%20259.9%20236.4%20Q259.5%20238.0%20259.9%20239.6Z%22%2F%3E%3Cpath%20d%3D%22M276.8%20241.5%20Q276.7%20245.0%20274.1%20247.7%20Q271.6%20250.3%20271.2%20254.0%20Q270.8%20257.8%20266.8%20258.5%20Q262.9%20259.2%20260.1%20260.3%20Q257.3%20261.4%20254.6%20262.8%20Q252.0%20264.2%20249.0%20265.1%20Q246.0%20266.1%20242.6%20266.9%20Q239.2%20267.8%20235.3%20268.1%20Q231.4%20268.3%20228.1%20266.5%20Q224.8%20264.6%20223.8%20260.5%20Q222.9%20256.4%20221.8%20253.3%20Q220.8%20250.1%20217.6%20247.7%20Q214.4%20245.2%20214.1%20241.6%20Q213.7%20238.0%20215.0%20234.6%20Q216.2%20231.2%20217.6%20228.1%20Q219.0%20225.0%20221.0%20222.3%20Q222.9%20219.6%20224.2%20215.9%20Q225.4%20212.2%20229.6%20212.4%20Q233.8%20212.7%20236.5%20210.4%20Q239.2%20208.2%20242.6%20207.0%20Q246.0%20205.7%20249.1%20208.4%20Q252.2%20211.0%20255.6%20210.9%20Q259.1%20210.8%20261.2%20213.6%20Q263.2%20216.4%20265.1%20218.8%20Q267.0%20221.2%20270.8%20222.7%20Q274.6%20224.2%20275.1%20227.7%20Q275.7%20231.2%20276.3%20234.6%20Q276.9%20238.0%20276.8%20241.5Z%22%2F%3E%3Cpath%20d%3D%22M293.0%20243.1%20Q290.9%20248.2%20290.8%20253.9%20Q290.7%20259.5%20287.2%20263.8%20Q283.6%20268.0%20277.0%20268.2%20Q270.3%20268.4%20266.8%20271.1%20Q263.3%20273.9%20259.9%20279.2%20Q256.6%20284.5%20251.3%20283.2%20Q246.0%20282.0%20240.7%20283.1%20Q235.4%20284.3%20229.2%20285.1%20Q222.9%20285.9%20219.5%20280.7%20Q216.0%20275.6%20213.8%20270.5%20Q211.6%20265.4%20208.0%20261.7%20Q204.4%20258.0%20201.6%20253.4%20Q198.8%20248.8%20199.8%20243.4%20Q200.8%20238.0%20203.7%20233.5%20Q206.7%20229.0%20207.3%20224.3%20Q207.9%20219.6%20208.8%20214.3%20Q209.7%20209.0%20214.0%20206.2%20Q218.4%20203.3%20221.4%20198.3%20Q224.4%20193.2%20229.6%20190.9%20Q234.7%20188.6%20240.4%20188.8%20Q246.0%20189.0%20251.0%20191.5%20Q256.0%20194.0%20259.8%20197.8%20Q263.5%20201.6%20269.0%20202.0%20Q274.4%20202.4%20278.0%20206.0%20Q281.6%20209.6%20283.0%20214.5%20Q284.5%20219.5%20287.3%20223.7%20Q290.1%20227.9%20292.6%20233.0%20Q295.0%20238.0%20293.0%20243.1Z%22%2F%3E%3Cpath%20d%3D%22M304.1%20244.1%20Q299.3%20250.2%20299.1%20256.8%20Q298.9%20263.5%20292.2%20266.5%20Q285.5%20269.5%20285.5%20278.5%20Q285.6%20287.6%20277.7%20287.6%20Q269.9%20287.6%20264.6%20291.8%20Q259.2%20295.9%20252.6%20296.2%20Q246.0%20296.5%20239.3%20296.8%20Q232.5%20297.1%20224.5%20298.3%20Q216.4%20299.4%20214.3%20289.9%20Q212.1%20280.5%20207.9%20276.1%20Q203.7%20271.7%20201.4%20266.1%20Q199.2%20260.6%20197.8%20254.9%20Q196.4%20249.3%20192.9%20243.7%20Q189.3%20238.0%20188.5%20231.3%20Q187.6%20224.7%20187.8%20217.4%20Q188.0%20210.1%20193.3%20205.1%20Q198.5%20200.1%20203.6%20195.7%20Q208.7%20191.2%20215.0%20188.9%20Q221.3%20186.7%20227.4%20185.1%20Q233.6%20183.5%20239.8%20179.1%20Q246.0%20174.7%20251.7%20181.3%20Q257.4%20188.0%20265.0%20185.3%20Q272.7%20182.6%20276.0%20189.4%20Q279.3%20196.2%20288.7%20196.4%20Q298.0%20196.5%20299.2%20204.2%20Q300.4%20211.8%20306.2%20217.4%20Q312.0%20222.9%20310.4%20230.5%20Q308.8%20238.0%20304.1%20244.1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") are replaced by
   scripts/build.js with inline SVG data URIs (src/templates/art.js contourSvg): no external pattern file. */
:root { --line: #E6E9EE; --shadow-rest: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(28, 31, 38, .06); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .05), 0 16px 36px rgba(28, 31, 38, .10); }

/* 2. background: page gradient, contour pattern on alternating bands and the dark steps band */
html { background: #F4F5F7; }
body { background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 100%); }
.band-white { background: transparent; }
.band-snow, .band-paper { background-color: rgba(28, 31, 38, .03); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%231C1F26%22%20stroke-opacity%3D%220.05%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M129.9%20120.1%20Q130.3%20122.2%20128.8%20123.8%20Q127.3%20125.4%20126.2%20127.0%20Q125.2%20128.5%20124.2%20130.3%20Q123.2%20132.0%20121.9%20134.0%20Q120.7%20136.1%20118.3%20135.6%20Q115.9%20135.0%20113.9%20135.2%20Q112.0%20135.3%20109.9%20135.7%20Q107.9%20136.1%20106.4%20134.4%20Q104.9%20132.7%20103.0%20132.2%20Q101.1%20131.7%2099.2%20130.7%20Q97.2%20129.8%2095.6%20128.2%20Q93.9%20126.7%2093.7%20124.5%20Q93.6%20122.2%2093.6%20120.1%20Q93.7%20118.0%2093.8%20115.9%20Q93.8%20113.8%2094.8%20112.0%20Q95.8%20110.2%2096.9%20108.5%20Q98.0%20106.9%20100.0%20106.2%20Q102.0%20105.4%20103.0%20103.5%20Q104.1%20101.6%20106.3%20102.1%20Q108.5%20102.6%20110.2%20100.7%20Q112.0%2098.9%20113.9%20100.2%20Q115.7%20101.6%20117.9%20101.5%20Q120.0%20101.5%20121.8%20102.4%20Q123.7%20103.4%20125.1%20104.9%20Q126.6%20106.4%20127.4%20108.3%20Q128.3%20110.1%20128.8%20112.1%20Q129.3%20114.0%20129.4%20116.0%20Q129.5%20118.0%20129.9%20120.1Z%22%2F%3E%3Cpath%20d%3D%22M148.8%20122.2%20Q149.2%20126.5%20146.0%20129.7%20Q142.9%20132.9%20141.8%20136.9%20Q140.7%20140.9%20137.3%20143.2%20Q134.0%20145.6%20131.5%20149.5%20Q129.0%20153.4%20124.6%20153.8%20Q120.2%20154.1%20116.1%20151.9%20Q112.0%20149.7%20108.1%20150.8%20Q104.3%20151.8%20101.0%20149.8%20Q97.7%20147.8%2094.4%20145.9%20Q91.2%20144.1%2086.0%20143.5%20Q80.7%20142.9%2079.1%20138.8%20Q77.5%20134.6%2075.7%20130.6%20Q73.9%20126.7%2072.4%20122.3%20Q70.9%20118.0%2073.0%20113.8%20Q75.1%20109.6%2076.7%20105.6%20Q78.2%20101.7%2082.0%2099.4%20Q85.9%2097.2%2088.5%2094.5%20Q91.0%2091.7%2094.0%2089.3%20Q97.1%2087.0%20100.4%2084.2%20Q103.7%2081.4%20107.8%2079.0%20Q112.0%2076.5%20116.3%2078.4%20Q120.6%2080.3%20125.1%2080.8%20Q129.7%2081.3%20132.8%2084.6%20Q135.9%2088.0%20138.6%2091.3%20Q141.2%2094.7%20142.8%2098.5%20Q144.4%20102.4%20143.9%20106.6%20Q143.3%20110.8%20145.8%20114.4%20Q148.3%20118.0%20148.8%20122.2Z%22%2F%3E%3Cpath%20d%3D%22M169.2%20124.4%20Q168.4%20130.9%20168.0%20137.8%20Q167.7%20144.8%20161.9%20149.0%20Q156.1%20153.2%20149.5%20155.0%20Q142.9%20156.7%20139.7%20162.9%20Q136.6%20169.0%20129.6%20166.9%20Q122.7%20164.7%20117.3%20164.2%20Q112.0%20163.7%20106.3%20166.0%20Q100.5%20168.2%2094.9%20166.7%20Q89.3%20165.1%2082.0%20165.0%20Q74.7%20164.8%2069.2%20160.6%20Q63.8%20156.5%2064.5%20148.5%20Q65.3%20140.5%2060.6%20135.7%20Q55.8%20130.8%2056.4%20124.4%20Q57.0%20118.0%2062.1%20112.9%20Q67.2%20107.8%2067.6%20102.3%20Q68.0%2096.8%2070.6%2092.0%20Q73.3%2087.1%2075.4%2081.0%20Q77.6%2074.8%2081.4%2068.7%20Q85.3%2062.5%2092.8%2064.8%20Q100.4%2067.1%20106.2%2066.2%20Q112.0%2065.3%20117.6%2067.0%20Q123.3%2068.7%20129.2%2069.4%20Q135.1%2070.1%20138.1%2075.8%20Q141.2%2081.4%20144.5%2085.4%20Q147.9%2089.4%20155.3%2091.5%20Q162.8%2093.5%20165.6%2099.3%20Q168.4%20105.1%20169.2%20111.6%20Q170.1%20118.0%20169.2%20124.4Z%22%2F%3E%3Cpath%20d%3D%22M188.5%20126.3%20Q184.5%20134.5%20182.7%20142.9%20Q180.9%20151.2%20175.6%20157.8%20Q170.3%20164.5%20160.4%20165.3%20Q150.4%20166.1%20147.4%20175.8%20Q144.5%20185.4%20136.4%20187.5%20Q128.3%20189.5%20120.2%20192.7%20Q112.0%20196.0%20104.3%20190.9%20Q96.5%20185.9%2088.5%20184.7%20Q80.5%20183.4%2073.2%20179.7%20Q65.8%20175.9%2057.4%20172.1%20Q49.0%20168.2%2047.0%20159.2%20Q45.0%20150.3%2042.1%20142.4%20Q39.3%20134.6%2042.6%20126.3%20Q45.9%20118.0%2046.7%20110.6%20Q47.5%20103.3%2046.0%2094.4%20Q44.6%2085.5%2051.8%2080.6%20Q59.0%2075.7%2060.5%2065.6%20Q62.1%2055.4%2070.3%2051.9%20Q78.5%2048.5%2086.8%2046.0%20Q95.0%2043.6%20103.5%2045.9%20Q112.0%2048.1%20120.0%2048.2%20Q127.9%2048.2%20133.2%2055.5%20Q138.6%2062.8%20146.1%2064.3%20Q153.6%2065.8%20159.2%2070.9%20Q164.7%2075.9%20167.9%2082.7%20Q171.1%2089.5%20178.1%2095.4%20Q185.1%20101.3%20188.8%20109.7%20Q192.5%20118.0%20188.5%20126.3Z%22%2F%3E%3Cpath%20d%3D%22M201.3%20127.3%20Q193.2%20136.5%20190.7%20145.6%20Q188.1%20154.6%20186.0%20165.0%20Q183.8%20175.3%20170.9%20175.5%20Q158.0%20175.7%20151.5%20181.1%20Q145.0%20186.6%20138.0%20193.9%20Q131.0%20201.2%20121.5%20208.3%20Q112.0%20215.4%20102.7%20207.6%20Q93.3%20199.8%2083.6%20198.4%20Q73.9%20197.0%2062.4%20195.9%20Q50.8%20194.7%2044.8%20185.6%20Q38.7%20176.4%2040.0%20164.2%20Q41.3%20152.0%2031.9%20145.2%20Q22.6%20138.4%2028.9%20128.2%20Q35.2%20118.0%2029.2%20107.9%20Q23.2%2097.7%2029.0%2089.3%20Q34.8%2080.8%2040.7%2073.3%20Q46.6%2065.9%2047.6%2052.2%20Q48.6%2038.6%2062.2%2040.7%20Q75.8%2042.8%2085.2%2042.2%20Q94.5%2041.5%20103.3%2037.6%20Q112.0%2033.8%20120.4%2039.0%20Q128.9%2044.2%20139.3%2041.9%20Q149.7%2039.7%20159.4%2043.0%20Q169.2%2046.3%20176.9%2053.2%20Q184.5%2060.1%20187.7%2070.1%20Q190.8%2080.0%20193.3%2089.5%20Q195.7%2098.9%20202.5%20108.5%20Q209.4%20118.0%20201.3%20127.3Z%22%2F%3E%3Cpath%20d%3D%22M259.9%20239.6%20Q260.2%20241.2%20259.3%20242.6%20Q258.4%20244.0%20257.9%20245.5%20Q257.4%20247.1%20255.9%20247.8%20Q254.5%20248.6%20253.0%20249.0%20Q251.5%20249.4%20250.4%20250.8%20Q249.2%20252.1%20247.6%20251.8%20Q246.0%20251.4%20244.4%20251.7%20Q242.8%20252.0%20241.2%20251.7%20Q239.5%20251.5%20238.6%20250.0%20Q237.7%20248.5%20236.6%20247.4%20Q235.5%20246.4%20234.2%20245.4%20Q232.8%20244.3%20231.9%20242.9%20Q230.9%20241.4%20231.6%20239.7%20Q232.3%20238.0%20232.4%20236.5%20Q232.4%20234.9%20233.5%20233.7%20Q234.5%20232.5%20234.9%20230.9%20Q235.2%20229.4%20236.2%20228.2%20Q237.2%20227.0%20238.6%20226.3%20Q240.1%20225.7%20241.3%20224.3%20Q242.6%20223.0%20244.3%20223.2%20Q246.0%20223.4%20247.7%20223.4%20Q249.3%20223.4%20250.5%20224.8%20Q251.7%20226.2%20252.8%20227.2%20Q253.8%20228.2%20254.6%20229.4%20Q255.4%20230.5%20257.0%20231.2%20Q258.7%20231.9%20259.5%20233.3%20Q260.4%20234.7%20259.9%20236.4%20Q259.5%20238.0%20259.9%20239.6Z%22%2F%3E%3Cpath%20d%3D%22M276.8%20241.5%20Q276.7%20245.0%20274.1%20247.7%20Q271.6%20250.3%20271.2%20254.0%20Q270.8%20257.8%20266.8%20258.5%20Q262.9%20259.2%20260.1%20260.3%20Q257.3%20261.4%20254.6%20262.8%20Q252.0%20264.2%20249.0%20265.1%20Q246.0%20266.1%20242.6%20266.9%20Q239.2%20267.8%20235.3%20268.1%20Q231.4%20268.3%20228.1%20266.5%20Q224.8%20264.6%20223.8%20260.5%20Q222.9%20256.4%20221.8%20253.3%20Q220.8%20250.1%20217.6%20247.7%20Q214.4%20245.2%20214.1%20241.6%20Q213.7%20238.0%20215.0%20234.6%20Q216.2%20231.2%20217.6%20228.1%20Q219.0%20225.0%20221.0%20222.3%20Q222.9%20219.6%20224.2%20215.9%20Q225.4%20212.2%20229.6%20212.4%20Q233.8%20212.7%20236.5%20210.4%20Q239.2%20208.2%20242.6%20207.0%20Q246.0%20205.7%20249.1%20208.4%20Q252.2%20211.0%20255.6%20210.9%20Q259.1%20210.8%20261.2%20213.6%20Q263.2%20216.4%20265.1%20218.8%20Q267.0%20221.2%20270.8%20222.7%20Q274.6%20224.2%20275.1%20227.7%20Q275.7%20231.2%20276.3%20234.6%20Q276.9%20238.0%20276.8%20241.5Z%22%2F%3E%3Cpath%20d%3D%22M293.0%20243.1%20Q290.9%20248.2%20290.8%20253.9%20Q290.7%20259.5%20287.2%20263.8%20Q283.6%20268.0%20277.0%20268.2%20Q270.3%20268.4%20266.8%20271.1%20Q263.3%20273.9%20259.9%20279.2%20Q256.6%20284.5%20251.3%20283.2%20Q246.0%20282.0%20240.7%20283.1%20Q235.4%20284.3%20229.2%20285.1%20Q222.9%20285.9%20219.5%20280.7%20Q216.0%20275.6%20213.8%20270.5%20Q211.6%20265.4%20208.0%20261.7%20Q204.4%20258.0%20201.6%20253.4%20Q198.8%20248.8%20199.8%20243.4%20Q200.8%20238.0%20203.7%20233.5%20Q206.7%20229.0%20207.3%20224.3%20Q207.9%20219.6%20208.8%20214.3%20Q209.7%20209.0%20214.0%20206.2%20Q218.4%20203.3%20221.4%20198.3%20Q224.4%20193.2%20229.6%20190.9%20Q234.7%20188.6%20240.4%20188.8%20Q246.0%20189.0%20251.0%20191.5%20Q256.0%20194.0%20259.8%20197.8%20Q263.5%20201.6%20269.0%20202.0%20Q274.4%20202.4%20278.0%20206.0%20Q281.6%20209.6%20283.0%20214.5%20Q284.5%20219.5%20287.3%20223.7%20Q290.1%20227.9%20292.6%20233.0%20Q295.0%20238.0%20293.0%20243.1Z%22%2F%3E%3Cpath%20d%3D%22M304.1%20244.1%20Q299.3%20250.2%20299.1%20256.8%20Q298.9%20263.5%20292.2%20266.5%20Q285.5%20269.5%20285.5%20278.5%20Q285.6%20287.6%20277.7%20287.6%20Q269.9%20287.6%20264.6%20291.8%20Q259.2%20295.9%20252.6%20296.2%20Q246.0%20296.5%20239.3%20296.8%20Q232.5%20297.1%20224.5%20298.3%20Q216.4%20299.4%20214.3%20289.9%20Q212.1%20280.5%20207.9%20276.1%20Q203.7%20271.7%20201.4%20266.1%20Q199.2%20260.6%20197.8%20254.9%20Q196.4%20249.3%20192.9%20243.7%20Q189.3%20238.0%20188.5%20231.3%20Q187.6%20224.7%20187.8%20217.4%20Q188.0%20210.1%20193.3%20205.1%20Q198.5%20200.1%20203.6%20195.7%20Q208.7%20191.2%20215.0%20188.9%20Q221.3%20186.7%20227.4%20185.1%20Q233.6%20183.5%20239.8%20179.1%20Q246.0%20174.7%20251.7%20181.3%20Q257.4%20188.0%20265.0%20185.3%20Q272.7%20182.6%20276.0%20189.4%20Q279.3%20196.2%20288.7%20196.4%20Q298.0%20196.5%20299.2%20204.2%20Q300.4%20211.8%20306.2%20217.4%20Q312.0%20222.9%20310.4%20230.5%20Q308.8%20238.0%20304.1%20244.1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 320px 320px; }
.band-ink { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%220.06%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M129.9%20120.1%20Q130.3%20122.2%20128.8%20123.8%20Q127.3%20125.4%20126.2%20127.0%20Q125.2%20128.5%20124.2%20130.3%20Q123.2%20132.0%20121.9%20134.0%20Q120.7%20136.1%20118.3%20135.6%20Q115.9%20135.0%20113.9%20135.2%20Q112.0%20135.3%20109.9%20135.7%20Q107.9%20136.1%20106.4%20134.4%20Q104.9%20132.7%20103.0%20132.2%20Q101.1%20131.7%2099.2%20130.7%20Q97.2%20129.8%2095.6%20128.2%20Q93.9%20126.7%2093.7%20124.5%20Q93.6%20122.2%2093.6%20120.1%20Q93.7%20118.0%2093.8%20115.9%20Q93.8%20113.8%2094.8%20112.0%20Q95.8%20110.2%2096.9%20108.5%20Q98.0%20106.9%20100.0%20106.2%20Q102.0%20105.4%20103.0%20103.5%20Q104.1%20101.6%20106.3%20102.1%20Q108.5%20102.6%20110.2%20100.7%20Q112.0%2098.9%20113.9%20100.2%20Q115.7%20101.6%20117.9%20101.5%20Q120.0%20101.5%20121.8%20102.4%20Q123.7%20103.4%20125.1%20104.9%20Q126.6%20106.4%20127.4%20108.3%20Q128.3%20110.1%20128.8%20112.1%20Q129.3%20114.0%20129.4%20116.0%20Q129.5%20118.0%20129.9%20120.1Z%22%2F%3E%3Cpath%20d%3D%22M148.8%20122.2%20Q149.2%20126.5%20146.0%20129.7%20Q142.9%20132.9%20141.8%20136.9%20Q140.7%20140.9%20137.3%20143.2%20Q134.0%20145.6%20131.5%20149.5%20Q129.0%20153.4%20124.6%20153.8%20Q120.2%20154.1%20116.1%20151.9%20Q112.0%20149.7%20108.1%20150.8%20Q104.3%20151.8%20101.0%20149.8%20Q97.7%20147.8%2094.4%20145.9%20Q91.2%20144.1%2086.0%20143.5%20Q80.7%20142.9%2079.1%20138.8%20Q77.5%20134.6%2075.7%20130.6%20Q73.9%20126.7%2072.4%20122.3%20Q70.9%20118.0%2073.0%20113.8%20Q75.1%20109.6%2076.7%20105.6%20Q78.2%20101.7%2082.0%2099.4%20Q85.9%2097.2%2088.5%2094.5%20Q91.0%2091.7%2094.0%2089.3%20Q97.1%2087.0%20100.4%2084.2%20Q103.7%2081.4%20107.8%2079.0%20Q112.0%2076.5%20116.3%2078.4%20Q120.6%2080.3%20125.1%2080.8%20Q129.7%2081.3%20132.8%2084.6%20Q135.9%2088.0%20138.6%2091.3%20Q141.2%2094.7%20142.8%2098.5%20Q144.4%20102.4%20143.9%20106.6%20Q143.3%20110.8%20145.8%20114.4%20Q148.3%20118.0%20148.8%20122.2Z%22%2F%3E%3Cpath%20d%3D%22M169.2%20124.4%20Q168.4%20130.9%20168.0%20137.8%20Q167.7%20144.8%20161.9%20149.0%20Q156.1%20153.2%20149.5%20155.0%20Q142.9%20156.7%20139.7%20162.9%20Q136.6%20169.0%20129.6%20166.9%20Q122.7%20164.7%20117.3%20164.2%20Q112.0%20163.7%20106.3%20166.0%20Q100.5%20168.2%2094.9%20166.7%20Q89.3%20165.1%2082.0%20165.0%20Q74.7%20164.8%2069.2%20160.6%20Q63.8%20156.5%2064.5%20148.5%20Q65.3%20140.5%2060.6%20135.7%20Q55.8%20130.8%2056.4%20124.4%20Q57.0%20118.0%2062.1%20112.9%20Q67.2%20107.8%2067.6%20102.3%20Q68.0%2096.8%2070.6%2092.0%20Q73.3%2087.1%2075.4%2081.0%20Q77.6%2074.8%2081.4%2068.7%20Q85.3%2062.5%2092.8%2064.8%20Q100.4%2067.1%20106.2%2066.2%20Q112.0%2065.3%20117.6%2067.0%20Q123.3%2068.7%20129.2%2069.4%20Q135.1%2070.1%20138.1%2075.8%20Q141.2%2081.4%20144.5%2085.4%20Q147.9%2089.4%20155.3%2091.5%20Q162.8%2093.5%20165.6%2099.3%20Q168.4%20105.1%20169.2%20111.6%20Q170.1%20118.0%20169.2%20124.4Z%22%2F%3E%3Cpath%20d%3D%22M188.5%20126.3%20Q184.5%20134.5%20182.7%20142.9%20Q180.9%20151.2%20175.6%20157.8%20Q170.3%20164.5%20160.4%20165.3%20Q150.4%20166.1%20147.4%20175.8%20Q144.5%20185.4%20136.4%20187.5%20Q128.3%20189.5%20120.2%20192.7%20Q112.0%20196.0%20104.3%20190.9%20Q96.5%20185.9%2088.5%20184.7%20Q80.5%20183.4%2073.2%20179.7%20Q65.8%20175.9%2057.4%20172.1%20Q49.0%20168.2%2047.0%20159.2%20Q45.0%20150.3%2042.1%20142.4%20Q39.3%20134.6%2042.6%20126.3%20Q45.9%20118.0%2046.7%20110.6%20Q47.5%20103.3%2046.0%2094.4%20Q44.6%2085.5%2051.8%2080.6%20Q59.0%2075.7%2060.5%2065.6%20Q62.1%2055.4%2070.3%2051.9%20Q78.5%2048.5%2086.8%2046.0%20Q95.0%2043.6%20103.5%2045.9%20Q112.0%2048.1%20120.0%2048.2%20Q127.9%2048.2%20133.2%2055.5%20Q138.6%2062.8%20146.1%2064.3%20Q153.6%2065.8%20159.2%2070.9%20Q164.7%2075.9%20167.9%2082.7%20Q171.1%2089.5%20178.1%2095.4%20Q185.1%20101.3%20188.8%20109.7%20Q192.5%20118.0%20188.5%20126.3Z%22%2F%3E%3Cpath%20d%3D%22M201.3%20127.3%20Q193.2%20136.5%20190.7%20145.6%20Q188.1%20154.6%20186.0%20165.0%20Q183.8%20175.3%20170.9%20175.5%20Q158.0%20175.7%20151.5%20181.1%20Q145.0%20186.6%20138.0%20193.9%20Q131.0%20201.2%20121.5%20208.3%20Q112.0%20215.4%20102.7%20207.6%20Q93.3%20199.8%2083.6%20198.4%20Q73.9%20197.0%2062.4%20195.9%20Q50.8%20194.7%2044.8%20185.6%20Q38.7%20176.4%2040.0%20164.2%20Q41.3%20152.0%2031.9%20145.2%20Q22.6%20138.4%2028.9%20128.2%20Q35.2%20118.0%2029.2%20107.9%20Q23.2%2097.7%2029.0%2089.3%20Q34.8%2080.8%2040.7%2073.3%20Q46.6%2065.9%2047.6%2052.2%20Q48.6%2038.6%2062.2%2040.7%20Q75.8%2042.8%2085.2%2042.2%20Q94.5%2041.5%20103.3%2037.6%20Q112.0%2033.8%20120.4%2039.0%20Q128.9%2044.2%20139.3%2041.9%20Q149.7%2039.7%20159.4%2043.0%20Q169.2%2046.3%20176.9%2053.2%20Q184.5%2060.1%20187.7%2070.1%20Q190.8%2080.0%20193.3%2089.5%20Q195.7%2098.9%20202.5%20108.5%20Q209.4%20118.0%20201.3%20127.3Z%22%2F%3E%3Cpath%20d%3D%22M259.9%20239.6%20Q260.2%20241.2%20259.3%20242.6%20Q258.4%20244.0%20257.9%20245.5%20Q257.4%20247.1%20255.9%20247.8%20Q254.5%20248.6%20253.0%20249.0%20Q251.5%20249.4%20250.4%20250.8%20Q249.2%20252.1%20247.6%20251.8%20Q246.0%20251.4%20244.4%20251.7%20Q242.8%20252.0%20241.2%20251.7%20Q239.5%20251.5%20238.6%20250.0%20Q237.7%20248.5%20236.6%20247.4%20Q235.5%20246.4%20234.2%20245.4%20Q232.8%20244.3%20231.9%20242.9%20Q230.9%20241.4%20231.6%20239.7%20Q232.3%20238.0%20232.4%20236.5%20Q232.4%20234.9%20233.5%20233.7%20Q234.5%20232.5%20234.9%20230.9%20Q235.2%20229.4%20236.2%20228.2%20Q237.2%20227.0%20238.6%20226.3%20Q240.1%20225.7%20241.3%20224.3%20Q242.6%20223.0%20244.3%20223.2%20Q246.0%20223.4%20247.7%20223.4%20Q249.3%20223.4%20250.5%20224.8%20Q251.7%20226.2%20252.8%20227.2%20Q253.8%20228.2%20254.6%20229.4%20Q255.4%20230.5%20257.0%20231.2%20Q258.7%20231.9%20259.5%20233.3%20Q260.4%20234.7%20259.9%20236.4%20Q259.5%20238.0%20259.9%20239.6Z%22%2F%3E%3Cpath%20d%3D%22M276.8%20241.5%20Q276.7%20245.0%20274.1%20247.7%20Q271.6%20250.3%20271.2%20254.0%20Q270.8%20257.8%20266.8%20258.5%20Q262.9%20259.2%20260.1%20260.3%20Q257.3%20261.4%20254.6%20262.8%20Q252.0%20264.2%20249.0%20265.1%20Q246.0%20266.1%20242.6%20266.9%20Q239.2%20267.8%20235.3%20268.1%20Q231.4%20268.3%20228.1%20266.5%20Q224.8%20264.6%20223.8%20260.5%20Q222.9%20256.4%20221.8%20253.3%20Q220.8%20250.1%20217.6%20247.7%20Q214.4%20245.2%20214.1%20241.6%20Q213.7%20238.0%20215.0%20234.6%20Q216.2%20231.2%20217.6%20228.1%20Q219.0%20225.0%20221.0%20222.3%20Q222.9%20219.6%20224.2%20215.9%20Q225.4%20212.2%20229.6%20212.4%20Q233.8%20212.7%20236.5%20210.4%20Q239.2%20208.2%20242.6%20207.0%20Q246.0%20205.7%20249.1%20208.4%20Q252.2%20211.0%20255.6%20210.9%20Q259.1%20210.8%20261.2%20213.6%20Q263.2%20216.4%20265.1%20218.8%20Q267.0%20221.2%20270.8%20222.7%20Q274.6%20224.2%20275.1%20227.7%20Q275.7%20231.2%20276.3%20234.6%20Q276.9%20238.0%20276.8%20241.5Z%22%2F%3E%3Cpath%20d%3D%22M293.0%20243.1%20Q290.9%20248.2%20290.8%20253.9%20Q290.7%20259.5%20287.2%20263.8%20Q283.6%20268.0%20277.0%20268.2%20Q270.3%20268.4%20266.8%20271.1%20Q263.3%20273.9%20259.9%20279.2%20Q256.6%20284.5%20251.3%20283.2%20Q246.0%20282.0%20240.7%20283.1%20Q235.4%20284.3%20229.2%20285.1%20Q222.9%20285.9%20219.5%20280.7%20Q216.0%20275.6%20213.8%20270.5%20Q211.6%20265.4%20208.0%20261.7%20Q204.4%20258.0%20201.6%20253.4%20Q198.8%20248.8%20199.8%20243.4%20Q200.8%20238.0%20203.7%20233.5%20Q206.7%20229.0%20207.3%20224.3%20Q207.9%20219.6%20208.8%20214.3%20Q209.7%20209.0%20214.0%20206.2%20Q218.4%20203.3%20221.4%20198.3%20Q224.4%20193.2%20229.6%20190.9%20Q234.7%20188.6%20240.4%20188.8%20Q246.0%20189.0%20251.0%20191.5%20Q256.0%20194.0%20259.8%20197.8%20Q263.5%20201.6%20269.0%20202.0%20Q274.4%20202.4%20278.0%20206.0%20Q281.6%20209.6%20283.0%20214.5%20Q284.5%20219.5%20287.3%20223.7%20Q290.1%20227.9%20292.6%20233.0%20Q295.0%20238.0%20293.0%20243.1Z%22%2F%3E%3Cpath%20d%3D%22M304.1%20244.1%20Q299.3%20250.2%20299.1%20256.8%20Q298.9%20263.5%20292.2%20266.5%20Q285.5%20269.5%20285.5%20278.5%20Q285.6%20287.6%20277.7%20287.6%20Q269.9%20287.6%20264.6%20291.8%20Q259.2%20295.9%20252.6%20296.2%20Q246.0%20296.5%20239.3%20296.8%20Q232.5%20297.1%20224.5%20298.3%20Q216.4%20299.4%20214.3%20289.9%20Q212.1%20280.5%20207.9%20276.1%20Q203.7%20271.7%20201.4%20266.1%20Q199.2%20260.6%20197.8%20254.9%20Q196.4%20249.3%20192.9%20243.7%20Q189.3%20238.0%20188.5%20231.3%20Q187.6%20224.7%20187.8%20217.4%20Q188.0%20210.1%20193.3%20205.1%20Q198.5%20200.1%20203.6%20195.7%20Q208.7%20191.2%20215.0%20188.9%20Q221.3%20186.7%20227.4%20185.1%20Q233.6%20183.5%20239.8%20179.1%20Q246.0%20174.7%20251.7%20181.3%20Q257.4%20188.0%20265.0%20185.3%20Q272.7%20182.6%20276.0%20189.4%20Q279.3%20196.2%20288.7%20196.4%20Q298.0%20196.5%20299.2%20204.2%20Q300.4%20211.8%20306.2%20217.4%20Q312.0%20222.9%20310.4%20230.5%20Q308.8%20238.0%20304.1%20244.1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 320px 320px; }
.site-footer.band-ink { background-image: none; }
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }
.hero-map { position: absolute; right: -6%; top: -6%; width: 56%; max-width: 820px; pointer-events: none; z-index: 0; }
.hero-map svg, .cta-map svg { width: 100%; height: auto; display: block; }
@media (max-width: 960px) { .hero-map { width: 92%; right: -22%; top: 34%; } }
.cta-map { position: absolute; left: -6%; top: -8%; width: 44%; max-width: 640px; pointer-events: none; }

/* 3. Swiss accents: section badges (red pills, white text) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }

/* 1. buttons that look like buttons */
.btn, .pricing .btn { min-height: 50px; padding: 0 22px; border-radius: 10px; font-weight: 600; letter-spacing: .01em; gap: 10px; border: 1px solid transparent; position: relative; }
.btn svg, .pricing .btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary, .nav-cta.btn-primary { background: linear-gradient(180deg, #DE2E22 0%, #C8241A 100%); border-color: #B01F16; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(0, 0, 0, .12), 0 6px 14px rgba(218, 41, 28, .22); }
.btn-primary:hover { background: linear-gradient(180deg, #E2331F 0%, #D2291E 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 6px rgba(0, 0, 0, .14), 0 10px 20px rgba(218, 41, 28, .28); }
.btn-secondary { background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F6 100%); border-color: #C9CFD8; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .08), 0 6px 14px rgba(28, 31, 38, .08); }
.btn-secondary:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 6px rgba(0, 0, 0, .1), 0 10px 20px rgba(28, 31, 38, .12); }
.btn-on-red { background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F6 100%); border-color: #B01F16; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .18), 0 6px 14px rgba(0, 0, 0, .14); }
.btn-on-red:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 6px rgba(0, 0, 0, .2), 0 10px 20px rgba(0, 0, 0, .18); }
.btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 100%); border-color: rgba(255, 255, 255, .75); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.btn-whatsapp { background: linear-gradient(180deg, #34DE74 0%, #22C55E 100%); border-color: #1AA34A; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .12), 0 6px 14px rgba(37, 211, 102, .28); }
.btn-whatsapp:hover { background: linear-gradient(180deg, #3EE47E 0%, #27CD64 100%); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 6px rgba(0, 0, 0, .14), 0 10px 20px rgba(37, 211, 102, .34); }
.btn-email { background: linear-gradient(180deg, #FFFFFF 0%, #FBEDEB 100%); border: 1px solid #D63A2E; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .08), 0 6px 14px rgba(234, 67, 53, .16); }
.btn-email:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F8E1DE 100%); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 6px rgba(0, 0, 0, .1), 0 10px 20px rgba(234, 67, 53, .22); }
.btn-email svg { color: var(--email); fill: var(--email); }
/* order buttons (configurator + trial cards): the standard look, white text and icon on the brand colours */
.pricing .btn-wa { background: linear-gradient(180deg, #2FD46E 0%, #22C55E 100%); border-color: #1AA34A; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(0, 0, 0, .12), 0 6px 14px rgba(37, 211, 102, .28); white-space: nowrap; }
.pricing .btn-wa:hover { background: linear-gradient(180deg, #3ADB78 0%, #27CD64 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 6px rgba(0, 0, 0, .14), 0 10px 20px rgba(37, 211, 102, .34); }
.pricing .btn-mail { background: linear-gradient(180deg, #F04E42 0%, #D93A2E 100%); border: 1px solid #C22F24; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(0, 0, 0, .12), 0 6px 14px rgba(234, 67, 53, .22); white-space: nowrap; }
.pricing .btn-mail:hover { background: linear-gradient(180deg, #F4584C 0%, #E04034 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 6px rgba(0, 0, 0, .14), 0 10px 20px rgba(234, 67, 53, .28); }
.pricing .btn-wa svg, .pricing .btn-mail svg { color: #fff; fill: #fff; }
/* badge sits inside the card: 14px extra top padding on every plan so the row stays aligned */
.pricing .plan { padding-top: 36px; }
.pricing .plan .badge { top: 10px; }
/* pressed: 1 px down, outer shadow gone, so it reads as pushed in (placed after the hover rules on purpose) */
.btn:active, .btn:active:hover, .pricing .btn:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 2px 4px rgba(0, 0, 0, .16); }
.btn:focus-visible, .pricing .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-sm, .header-right .btn-sm { min-height: 50px; padding: 0 20px; font-size: var(--fs-small); }
@media (max-width: 640px) { .header-right .btn-sm { min-height: 44px; padding: 0 14px; } }
.site-footer .btn-whatsapp, .band-ink a.btn-whatsapp { min-height: 46px; }
.pricing .btn { width: 100%; }
.pricing .btn:hover { filter: none; }

/* 4. cards and surfaces: white on the gradient, hairline border, resting shadow; featured plan glows red */
.tile, .device, .plan, .cols-3 .col, .post-list li, .trial, .contact-card, .pay-trio-item, .refund-note, .before, .cta-block, .toc, .pay-strip, .pay, .placeholder-note, .art-tile, table.data { border: 1px solid var(--line); background-color: #fff; box-shadow: var(--shadow-rest); }
.placeholder-note { border-style: dashed; }
.plan.featured { box-shadow: var(--shadow-rest), 0 0 0 1px rgba(218, 41, 28, .16), 0 12px 32px rgba(218, 41, 28, .16); }
.tile:hover, .device:hover { border-color: var(--brand); }

/* hover/press motion for buttons and cards (moved here from _motion.css; still off under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .btn, .pricing .btn, .pricing .seg button { transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), filter .15s var(--ease); }
  .btn:hover, .pricing .btn:hover { transform: translateY(-1px); }
  .btn:active, .btn:active:hover, .pricing .btn:active { transform: translateY(1px); }
  .tile, .device, .plan, .cols-3 .col, .post-list li, .trial, .contact-card, .pay-trio-item { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
  .tile:hover, .device:hover, .plan:hover, .cols-3 .col:hover, .post-list li:hover, .trial:hover, .contact-card:hover, .pay-trio-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .plan.featured:hover { box-shadow: var(--shadow-hover), 0 0 0 1px rgba(218, 41, 28, .2), 0 16px 40px rgba(218, 41, 28, .2); }
}

/* ---- Round 6: centred layout + mobile layer (bundled last) ----
   1120 px container, centred hero (illustration below the text), centred section intros and page heads (68ch),
   flex card grids that centre an incomplete last row, centred prose column (left-aligned text), centred footer,
   ≥14 px small text, ≥44 px tap targets on phones, sticky order bar on pricing and trial pages (mobile only). */
.container { max-width: 1120px; }
@media (max-width: 640px) { .container { padding-left: 20px; padding-right: 20px; } }

/* hero: one centred column, illustration below */
.hero-grid { grid-template-columns: 1fr; gap: 40px; justify-items: center; text-align: center; }
.hero-grid > div:first-child { display: flex; flex-direction: column; align-items: center; max-width: 780px; width: 100%; }
.hero h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.hero .sub { margin-left: auto; margin-right: auto; }
.hero .ctas, .trust, .pills { justify-content: center; }
ul.trust { width: 100%; }
.hero-art { width: 100%; max-width: 760px; }
.hero-map { right: auto; left: 50%; transform: translateX(-50%); top: auto; bottom: -6%; width: 72%; max-width: 900px; }
@media (max-width: 960px) { .hero-map { width: 120%; max-width: none; bottom: -4%; } }
@media (max-width: 720px) { .hero { padding: 48px 0 40px; } .hero-grid { gap: 28px; } }

/* headings and intros */
.section-intro { max-width: 68ch; margin: 0 auto 32px; text-align: center; }
.section-intro::before, .page-head::before, .page-head--art .page-head-text::before { margin-left: auto; margin-right: auto; }
.page-head { text-align: center; }
.page-head h1, .page-head .lead, .lead { margin-left: auto; margin-right: auto; }
.page-head--art { grid-template-columns: 1fr; justify-items: center; gap: 24px; }
.page-head--art .page-head-text { width: 100%; }
.page-head-art { max-width: 320px; width: 100%; }
.section > .container > p.small, .section > .container > p[style*="max-width"] { text-align: center; margin-left: auto; margin-right: auto; max-width: 68ch; }
.pricing > h2, .pricing > .lead { text-align: center; margin-left: auto; margin-right: auto; }
.pricing .trials h3, .pricing .trials > .lead { text-align: center; margin-left: auto; margin-right: auto; }
.pricing .pay { justify-content: center; text-align: center; }
.cta-band .pills { justify-content: center; }

/* card grids: flex, centred, incomplete last row centred; 4/6/3 -> 2 -> 1 */
.tile-grid, .device-band, .cols-3, .steps, .post-list--cards { display: flex; flex-wrap: wrap; justify-content: center; }
.tile-grid > *, .device-band > *, .cols-3 > *, .steps > *, .post-list--cards > * { min-width: 0; }
.tile-grid { gap: 16px; } .tile-grid > * { flex: 0 1 calc(25% - 12px); }
.device-band { gap: 16px; } .device-band > * { flex: 0 1 calc(16.666% - 14px); }
.cols-3 { gap: 24px; } .cols-3 > * { flex: 0 1 calc(33.333% - 16px); }
.steps { gap: 32px; } .steps > * { flex: 0 1 calc(33.333% - 22px); }
.post-list--cards { gap: 16px; max-width: none; } .post-list--cards > * { flex: 0 1 calc(50% - 8px); max-width: 520px; }
@media (max-width: 960px) {
  .tile-grid > * { flex-basis: calc(50% - 8px); }
  .device-band > * { flex-basis: calc(33.333% - 11px); }
}
@media (max-width: 800px) { .cols-3 > * { flex-basis: 100%; max-width: 560px; } }
@media (max-width: 720px) { .steps > * { flex-basis: 100%; max-width: 560px; } .post-list--cards > * { flex-basis: 100%; } }
@media (max-width: 560px) { .device-band > * { flex-basis: calc(50% - 8px); } }
@media (max-width: 400px) { .tile-grid > *, .device-band > *, .post-list--cards > * { flex-basis: 100%; } }
.pay-trio, .contact-cards, .refund-note, .before, .cta-block { margin-left: auto; margin-right: auto; }

/* prose column centred (text stays left-aligned), guide layout centred */
.container.prose { max-width: calc(68ch + 2 * var(--gutter)); }
.guide-layout { max-width: 1000px; margin: 0 auto; }
.container > .atmo-wrap, .atmo-wrap { max-width: 1120px; }
.crumbs { text-align: center; }

/* footer centred as a group */
.footer-cols { max-width: 1040px; margin: 0 auto; }
.footer-bottom { justify-content: center; text-align: center; }
.footer-bottom .lang { margin-left: 0; }
@media (max-width: 560px) {
  .footer-cols { text-align: center; }
  .footer-about, .site-footer .links { align-items: center; }
  .site-footer .links a { justify-content: center; }
  .site-footer .logo { justify-content: center; }
  .site-footer .btn-whatsapp, .band-ink a.btn-whatsapp { width: 100%; }
}

/* small text ≥ 14 px */
.tv .n, .plan .badge, .pill, .t-note, .post-meta, .crumbs, figcaption, .footer-meta, .device-summary, .control-label { font-size: .875rem; }

/* tap targets ≥ 44 px with 8 px spacing on phones */
@media (max-width: 720px) {
  .site-footer .links { gap: 0; }
  .site-footer .links a, .footer-bottom a, .footer-bottom .lang a, .footer-bottom .lang span[aria-current] { min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .inline-links { gap: 8px 20px; } .inline-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .toc a { display: inline-flex; min-height: 44px; align-items: center; }
  .tile, .device { min-height: 44px; }
  .devices { gap: 10px; }
}

/* sticky order bar (pricing + trial pages, phones only, safe-area aware) */
.order-bar { display: none; }
@media (max-width: 720px) {
  .order-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 10px; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(28, 31, 38, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .order-bar .btn { flex: 1 1 0; min-height: 48px; padding: 0 12px; white-space: nowrap; }
  .order-bar .btn-wa { background: linear-gradient(180deg, #2FD46E 0%, #22C55E 100%); border: 1px solid #1AA34A; color: #fff; }
  .order-bar .btn-mail { background: linear-gradient(180deg, #F04E42 0%, #D93A2E 100%); border: 1px solid #C22F24; color: #fff; }
  .order-bar .btn svg { fill: #fff; color: #fff; }
  body[data-page="pricing"], body[data-page="trial"] { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* audit fixes: footer tagline and tables at body size on phones, logo link and footer links as full tap targets */
.footer-about p { font-size: 1rem; }
.site-header .logo { min-height: 44px; display: inline-flex; align-items: center; }
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 720px) {
  table.data { font-size: 1rem; }
  .site-footer .links a { display: flex; width: 100%; }
}

/* audit round 2: language links 44px wide, crumbs and app-list links as full targets, step numbers and trust strip at 16px,
   long tokens (server addresses, links) wrap instead of overflowing */
.lang a, .lang span[aria-current] { min-width: 44px; }
.step-num { font-size: 1rem; }
.trust li { font-size: 1rem; }
p, li, td, th, dd, code, .lead, .sub { overflow-wrap: anywhere; }
code { word-break: break-all; }
@media (max-width: 720px) {
  .crumbs a { min-width: 44px; padding: 0 8px; justify-content: center; }
  .post-list:not(.post-list--cards) li > a { display: flex; align-items: center; min-height: 44px; }
  .site-header .nav a { min-height: 44px; }
}
.plan ul, .plan li, .plan .feat { font-size: 1rem; }

/* ---- Round 7 ---- */
/* 1. order buttons: full wording on one line, Gmail icon on a white disc */
.pricing .btn-wa, .pricing .btn-mail, .order-bar .btn { font-size: .9375rem; white-space: nowrap; padding: 0 10px; gap: 8px; letter-spacing: 0; }
.pricing .btn-wa svg, .pricing .btn-mail svg { width: 18px; height: 18px; }
.gmail { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; flex: none; }
.gmail img { width: 18px; height: 18px; display: block; }
.pricing .btn-mail { background: linear-gradient(180deg, #F04E42 0%, #EA4335 55%, #D93A2E 100%); }
.order-bar .btn-wa svg { width: 18px; height: 18px; }
@media (max-width: 400px) { .pricing .btn-wa, .pricing .btn-mail { font-size: .875rem; } }

/* 3. hero photo (LCP) + the animated TV illustration in the device section */
.hero-art.hero-photo { max-width: 760px; }
.hero-art.hero-photo img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 60px rgba(28, 31, 38, .18); }
.device-tv { max-width: 520px; margin: 0 auto 28px; }
.device-tv svg { width: 100%; height: auto; display: block; }

/* 4. compact footer: ~40% shorter */
.site-footer { padding: 40px 0 24px; }
.footer-cols { gap: 24px 24px; }
.footer-about p { font-size: .875rem; margin: 10px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo--footer .logo-mark { width: 28px; height: 28px; }
.logo--footer .logo-word { font-size: 1.0625rem; }
.footer-title { font-size: .9375rem; margin-bottom: 8px; }
details.fcol > summary { list-style: none; cursor: default; display: flex; align-items: center; justify-content: space-between; }
details.fcol > summary::-webkit-details-marker { display: none; }
details.fcol > summary::after { content: none; }
.site-footer .links { gap: 0; }
.site-footer .links a { font-size: .875rem; min-height: 0; padding: 4px 0; }
.site-footer .btn-whatsapp, .band-ink a.btn-whatsapp { min-height: 40px; font-size: .9375rem; padding: 0 16px; margin-bottom: 6px; }
.site-footer .btn-whatsapp svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: 28px; padding-top: 14px; font-size: .75rem; flex-wrap: nowrap; gap: 8px 16px; white-space: nowrap; }
.footer-bottom .lang { font-size: .75rem; }
.footer-bottom .lang a, .footer-bottom .lang span[aria-current] { min-height: 32px; min-width: 32px; }
.pay-mini svg { width: 22px; height: 16px; }
@media (max-width: 720px) {
  .site-footer { padding: 32px 0 20px; }
  .footer-cols { gap: 8px; }
  details.fcol > summary { cursor: pointer; min-height: 44px; border-top: 1px solid rgba(255, 255, 255, .12); margin: 0; }
  details.fcol > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #C3C8D2; border-bottom: 2px solid #C3C8D2; transform: rotate(45deg); margin-right: 4px; transition: transform .25s var(--ease); }
  details.fcol[open] > summary::after { transform: rotate(225deg); }
  .site-footer .links a { min-height: 40px; padding: 0; justify-content: flex-start; }
  .fcol-contact { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 12px; }
  .footer-cols, .footer-about { text-align: left; }
  .site-footer .logo { justify-content: flex-start; }
  .footer-bottom { flex-wrap: wrap; white-space: normal; justify-content: center; }
  .footer-bottom .lang a, .footer-bottom .lang span[aria-current] { min-height: 44px; min-width: 44px; }
}
details.fcol { border: 0; padding: 0; }

/* ---- Round 8 ---- */
/* 1. mobile hero: full-bleed photo, 56vw tall (240–360px), focal point on the TV */
@media (max-width: 720px) {
  .hero-art.hero-photo { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .hero-art.hero-photo img { border-radius: 0; height: clamp(240px, 56vw, 360px); width: 100%; object-fit: cover; object-position: 30% 48%; box-shadow: none; }
}

/* 3. plan cards: everything centred, big price */
.plan { text-align: center; align-items: center; }
.plan .dur { width: 100%; }
.plan .price { font-size: 2.75rem; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.plan .cur { font-size: 1rem; font-weight: 600; color: var(--slate); margin: 0; }
.plan .cur--after { margin-left: 2px; }
.plan .per { text-align: center; margin: 8px 0 16px; }
.plan ul { width: 100%; }
.plan li { padding: 5px 0; display: flex; justify-content: center; align-items: flex-start; gap: 8px; text-align: center; }
.plan li::before { position: static; flex: none; margin-top: 8px; }
.plan .actions { width: 100%; }
.pricing .btn-wa, .pricing .btn-mail { width: 100%; }
@media (max-width: 720px) { .plan .price { font-size: 2.25rem; } }

/* 4. 12-month card: best seller */
.pricing .plan { padding-top: 48px; }
.pricing .plan.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-rest), 0 0 0 1px rgba(218, 41, 28, .12), 0 18px 44px rgba(218, 41, 28, .22); }
.pricing .plan .badge { position: absolute; top: 0; left: 0; right: 0; height: 32px; border-radius: 9px 9px 0 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #E4352A 0%, #C8241A 100%); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 12px; white-space: nowrap; overflow: hidden; }
.pricing .plan.featured .badge { top: -2px; left: -2px; right: -2px; }
@media (min-width: 961px) {
  .pricing .plan.featured { transform: scale(1.04); z-index: 1; }
  @media (prefers-reduced-motion: no-preference) { .pricing .plan.featured:hover { transform: scale(1.04) translateY(-2px); } }
}

/* 5. centred content site-wide; steps, tables and legal pages stay left-aligned inside the centred column */
main { text-align: center; }
main ul, main ol { list-style-position: inside; padding-left: 0; }
.prose > ul, .prose > ol:not(.steps-list) { padding-left: 0; }
.prose > * { margin-left: auto; margin-right: auto; }
.prose > figure, figure.shot { margin-left: auto; margin-right: auto; }
figure.shot img, .shot-frame { margin-left: auto; margin-right: auto; }
.faq summary { justify-content: center; text-align: center; gap: 12px; }
.faq .faq-a p { margin-left: auto; margin-right: auto; }
.cta-block .ctas, .contact-cards, .pay-trio { justify-content: center; }
.cta-block { text-align: center; }
.before ul { text-align: center; }
.tile, .device, .post-list li, .contact-card, .cols-3 .col, .trial { text-align: center; }
.post-list li p { text-align: center; }
.steps-list, .steps-list h3, .steps-list p, .steps-list figcaption { text-align: left; }
.steps-list h3 { justify-content: flex-start; }
.table-wrap, table.data { text-align: left; }
body[data-page="terms"] .prose, body[data-page="privacy"] .prose, body[data-page="imprint"] .prose { text-align: left; }
body[data-page="terms"] .prose > ul, body[data-page="privacy"] .prose > ul, body[data-page="imprint"] .prose > ul { list-style-position: outside; padding-left: 22px; }
.guide-layout .prose > h2, .guide-layout .prose > p, .guide-layout .prose > .before, .guide-layout .prose > .cta-block, .guide-layout .prose > .faq { text-align: center; }
.toc, .toc ol { text-align: left; }
.crumbs { text-align: center; }
/* round 8 audit: footer links are 44px targets on phones (40px rows stay on desktop), 8px under the WhatsApp button */
@media (max-width: 720px) { .site-footer .links a { min-height: 44px; } .site-footer .btn-whatsapp, .band-ink a.btn-whatsapp { margin-bottom: 8px; } }
@media (max-width: 720px) { .site-footer .btn-whatsapp, .band-ink a.btn-whatsapp { min-height: 44px; } }

/* ---- Round 9 ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 1. mobile: icons centred too */
@media (max-width: 720px) {
  .trust li { flex-direction: column; gap: 6px; text-align: center; }
  .tile--icon, .device, .contact-card, .cols-3 .col, .pay-trio-item { align-items: center; text-align: center; }
  .tile--icon .icon, .cols-3 .col .icon, .contact-card .icon, .section-intro::before { margin-left: auto; margin-right: auto; }
  .pay-strip { justify-content: center; } .pay-strip .pay-item { justify-content: center; }
  .site-footer .links a, .footer-about, .site-footer .logo { justify-content: center; text-align: center; }
  .footer-cols { text-align: center; }
  .trust-row { justify-content: center; }
  .plan li { flex-direction: column; gap: 2px; }
  .plan li::before { margin-top: 0; }
}

/* 2. best-seller card */
.pricing .plan.featured { background: linear-gradient(160deg, #FFFFFF 0%, #FFF5F4 100%); border: 2px solid var(--brand); box-shadow: var(--shadow-rest), 0 0 0 1px rgba(218, 41, 28, .12), 0 18px 48px rgba(218, 41, 28, .26), 0 0 60px rgba(218, 41, 28, .12); }
@media (min-width: 961px) {
  .pricing .plan.featured { transform: scale(1.05); }
  @media (prefers-reduced-motion: no-preference) { .pricing .plan.featured:hover { transform: scale(1.05) translateY(-2px); } }
}
.pricing .plan .badge .star { width: 14px; height: 14px; margin-right: 6px; flex: none; }
.pricing .plan.featured .price { font-size: 3rem; }
.plan .save { display: inline-block; margin: -6px 0 14px; color: #0C7364; font-weight: 600; font-size: .9375rem; }
.plan .bonus-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: #E6F7EE; color: #0C7364; font-weight: 600; font-size: .875rem; margin: -6px 0 14px; }
.plan .save + .bonus-pill { margin-top: -8px; }
.pricing .plan.featured .btn { min-height: 52px; }

/* 3. payment marks */
.pay-marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin: 18px auto 4px; }
.pay-marks img { height: 22px; width: auto; display: block; }
.pay-marks img[src$="visa.svg"] { height: 16px; }
.pay-mark-bank { display: inline-flex; color: var(--ink); }
.pay-mark-bank svg { width: 30px; height: 22px; }
.pay-marks--grey img { filter: grayscale(1) opacity(.72); }
.pay-marks--grey .pay-mark-bank { color: #C3C8D2; }
.pay-strip .pay-marks { flex-basis: 100%; margin: 4px auto 0; }
.pay-trio + .pay-marks { margin-top: 0; margin-bottom: 20px; }

/* 4. trust row + bottom bar */
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); color: #C3C8D2; font-size: .875rem; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.trust-item svg { width: 18px; height: 18px; color: #25D366; flex: none; }
.footer-bottom { margin-top: 14px; padding-top: 14px; }
.footer-legal { display: inline-flex; align-items: center; gap: 6px; }
.footer-legal .sep { color: #5A6170; }
.footer-bottom .pay-marks { margin: 0; gap: 10px 14px; }
.footer-bottom .pay-marks img { height: 16px; }
.footer-bottom .pay-marks img[src$="visa.svg"] { height: 12px; }
.footer-bottom .pay-mark-bank svg { width: 22px; height: 16px; }
@media (max-width: 720px) { .footer-bottom { flex-direction: column; gap: 10px; } .footer-legal a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } }

/* 5. details: WhatsApp bubble, back-to-top, reading progress, updated line, 404 tiles */
.wa-bubble { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #2FD46E 0%, #22C55E 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(37, 211, 102, .4), 0 2px 4px rgba(0, 0, 0, .15); z-index: 45; }
.wa-bubble svg { width: 30px; height: 30px; }
.wa-bubble:hover { color: #fff; }
.to-top { position: fixed; right: 16px; bottom: 84px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-rest); cursor: pointer; z-index: 45; }
.to-top svg { width: 22px; height: 22px; }
.to-top[hidden] { display: none; }
@media (max-width: 720px) { body[data-page="pricing"] .wa-bubble, body[data-page="trial"] .wa-bubble { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } body[data-page="pricing"] .to-top, body[data-page="trial"] .to-top { bottom: calc(154px + env(safe-area-inset-bottom, 0px)); } .wa-bubble { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.updated { font-size: .875rem; color: var(--slate); margin: 12px 0 0; }
.nf-tiles { margin-top: 32px; }
.nf-tiles .tile { text-align: center; }
.nf-tiles .tile-count { display: block; margin-top: 4px; }

/* 6. reviews (only rendered with real screenshots) */
.review-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.review { margin: 0; flex: 0 1 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-rest); overflow: hidden; }
.review img { display: block; width: 100%; height: auto; }
.review figcaption { padding: 10px 14px; font-size: .875rem; color: var(--slate); }
.reviews--inline { margin: 32px 0; }

/* print: guides as clean handouts */
@media print {
  .site-header, .site-footer, .order-bar, .wa-bubble, .to-top, .read-progress, .toc, .cta-block, .crumbs, .nav, .hero-map, .cta-alps, .cta-map { display: none !important; }
  body { background: #fff; color: #000; }
  main { text-align: left; }
  .guide-layout { display: block; }
  .shot-frame { border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .steps-list > li { break-inside: avoid; }
}
/* round 9 fixes: centred check above text on phones, roomier 404 tiles */
@media (max-width: 720px) { .plan li { align-items: center; } }
.notfound .lang-block { max-width: 960px; }
.notfound .lang-block .lead { max-width: 52ch; }
.nf-tiles { max-width: 900px; margin: 32px auto 0; }
.nf-tiles > * { flex: 0 1 calc(33.333% - 11px); }
@media (max-width: 720px) { .nf-tiles > * { flex-basis: calc(50% - 8px); } }
@media (max-width: 400px) { .nf-tiles > * { flex-basis: 100%; } }
/* round 9b: bigger full-bleed mobile hero; visible gap before the euro sign on cards */
@media (max-width: 720px) { .hero-art.hero-photo img { height: clamp(280px, 64vw, 400px); } }
.plan .cur--after { margin-left: 6px; }

/* 10. related posts: the block that closes every blog post, so no post depends on the index alone */
.related-posts { padding: 40px 0 56px; }
.related-posts h2 { font-size: 1.375rem; margin: 0 0 18px; }
.related-list { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related-list li { margin: 0; }
.related-list a { display: block; background: #fff; border: 1px solid var(--mist); border-radius: var(--radius-card); padding: 14px 16px; min-height: 44px; text-decoration: none; font-weight: 600; box-shadow: var(--shadow-card); }
.related-list a:hover { border-color: var(--brand); }
@media (max-width: 720px) { .related-list { grid-template-columns: minmax(0, 1fr); } }