/* Affiliate design terv — shared base (af-). REDESIGN-STANDARD-2026 G1–G8. Colours and sizes only from token variables; the site brand layer sets them. No inline display needed in page HTML. */
.af,.af :where(*,*::before,*::after){box-sizing:border-box}
.af{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);background:var(--surface)}
.af h1,.af h2,.af h3{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);color:var(--ink);text-wrap:balance;margin:0}
.af h1{font-size:var(--fs-h1);line-height:1.1}
.af h2{font-size:var(--fs-h2);line-height:1.2}
.af h3{font-size:var(--fs-h3);line-height:1.3}
.af :where(p,ul,ol){margin:0}
.af :where(ul,ol){padding-left:1.3em}
/* The theme's own bottom margins (Astra: .entry-content p 1.6em (0,1,1), headings 20px, figure 1em (0,2,1)) must not leak into the rhythm: the flow gives every gap as margin-top only */
.af .af-flow :is(p,ul,ol,dl,figure,h1,h2,h3,h4,h5,h6,blockquote,table),.af .entry-content :is(p,ul,ol,dl,figure,h1,h2,h3,h4,h5,h6,blockquote,table){margin-bottom:0}
.af .entry-content[data-ast-blocks-layout]>figure{margin-bottom:0}
.af :is(.af-facts,.af-verdict__pc,.af-toc,.af-crumbs,.af-related,.af-nav,.af-menu__panel,.af-footer) li:not(#af-li){margin-bottom:0}
.af p+p,.af p+ul,.af p+ol,.af ul+p,.af ol+p{margin-top:var(--space-4)}
/* Vertical rhythm (Fable J1): `af-flow` sits on the element whose DIRECT children are the content blocks (Astra: .entry-content); `.af .entry-content` is the built-in fallback. `.af` only on migrated pages (post meta _af_v2), never on body until every page is migrated. Page-builder containers (Spectra, Elementor) nest blocks deeper: put af-flow on that container. */
.af .af-flow>*+*,.af .entry-content>*+*{margin-top:var(--space-4)}
.af .af-flow>*+h2,.af .entry-content>*+h2{margin-top:var(--space-7)}
.af .af-flow>*+h3,.af .entry-content>*+h3{margin-top:var(--space-5)}
.af .af-flow>h2+*,.af .af-flow>h3+*,.af .entry-content>h2+*,.af .entry-content>h3+*{margin-top:var(--space-3)}
.af .af-flow>*+:is(.af-facts,.af-verdict,.af-table,.af-toc,.af-faq,.af-method,.af-related,.af-next,.af-bento,.af-sponsored-note,figure),.af .entry-content>*+:is(.af-facts,.af-verdict,.af-table,.af-toc,.af-faq,.af-method,.af-related,.af-next,.af-bento,.af-sponsored-note,figure){margin-top:var(--space-5)}
.af .af-flow>.af-crumbs+*,.af .entry-content>.af-crumbs+*{margin-top:var(--space-2)}
.af .af-flow>h1+.af-lead,.af .entry-content>h1+.af-lead{margin-top:var(--space-4)}
.af .af-flow>.af-lead+.af-meta,.af .entry-content>.af-lead+.af-meta{margin-top:var(--space-3)}
.af a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
.af a:hover{text-decoration-thickness:2px}
.af a:focus-visible,.af summary:focus-visible,.af-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.af a:not(.af-btn):focus-visible{border-radius:4px}
.af-lead{font-size:var(--fs-lead);line-height:1.55}
.af-title{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:var(--fs-h3);line-height:1.3;color:var(--ink);text-wrap:balance;margin:0}
.af-eyebrow{font-family:var(--font-body);font-size:var(--fs-label);line-height:1.4;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-muted)}
.af .af-display-xl{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-display-xl);line-height:1.02;letter-spacing:var(--ls-display-xl)}
.af-small{font-size:var(--fs-small);line-height:1.5;color:var(--ink-muted)}
@media (max-width:720px){.af h1{font-size:var(--fs-h1-phone)}.af h2{font-size:calc(var(--fs-h2) - 4px)}.af-lead{font-size:calc(var(--fs-lead) - 2px)}.af .af-display-xl{font-size:var(--fs-display-xl-phone)}}

/* Button — brand (in-site), accent (partner, leaves the page), outline (second action) */
.af-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--target-min);padding:12px 24px;border-radius:var(--btn-radius);border:2px solid transparent;font-family:var(--font-body);font-size:var(--fs-button);line-height:1.2;font-weight:700;text-decoration:none;cursor:pointer;background:var(--brand);color:var(--on-brand);transition:background-color .15s ease,transform .15s ease}
.af a.af-btn{background:var(--brand);color:var(--on-brand);text-decoration:none}
.af-btn:hover,.af a.af-btn:hover{background:var(--brand-strong)}
.af-btn--accent,.af a.af-btn--accent{background:var(--accent);color:var(--on-accent)}
.af-btn--accent:hover,.af a.af-btn--accent:hover{background:var(--accent-strong)}
.af-btn--outline,.af a.af-btn--outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.af-btn--outline:hover,.af a.af-btn--outline:hover{background:transparent;border-color:var(--ink)}
.af-btn:active{transform:translateY(1px)}
.af-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}

/* Disclosure — next to every partner link */
.af-disclosure{font-size:var(--fs-small);line-height:1.5;color:var(--ink-muted);margin-top:var(--space-2)}

/* Badge and the Sponsored label */
.af-badge{display:inline-flex;align-items:center;gap:var(--space-1);border-radius:var(--radius-sm);padding:2px 8px;font-size:var(--fs-label);line-height:1.5;font-weight:700;border:1px solid var(--line);color:var(--ink);background:var(--surface-raised)}
.af-badge--pick{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.af-badge--positive{color:var(--positive);border-color:currentColor;background:var(--surface-raised)}
.af-badge--negative{color:var(--negative);border-color:currentColor;background:var(--surface-raised)}
.af-sponsored{display:inline-block;border-radius:var(--radius-sm);padding:1px 7px;font-size:var(--fs-label);line-height:1.5;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--sponsored-ink);background:var(--sponsored-surface);text-decoration:none}
.af-sponsored-note{border-top:1px solid var(--line);padding-top:var(--space-3);font-size:var(--fs-small);line-height:1.5;color:var(--ink-muted)}
.af-sponsored-note strong{color:var(--ink)}
.af-sponsored-banner{background:var(--sponsored-surface);color:var(--sponsored-ink);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--fs-small);line-height:1.5}
.af-sponsored-banner a{color:inherit}

/* Breadcrumbs (Rank Math Breadcrumbs output) */
.af-crumbs{font-size:var(--fs-small);color:var(--ink-muted)}
.af-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.af-crumbs li{display:flex;align-items:center}
.af-crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-strong)}
.af-crumbs a{display:inline-flex;align-items:center;min-height:var(--target-min);color:var(--ink-muted)}
.af-crumbs [aria-current]{color:var(--ink)}
/* Rank Math raw breadcrumb output (fallback; the site filter turns it into ol/li with aria-current) */
.af-crumbs .rank-math-breadcrumb p,.af .rank-math-breadcrumb p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:var(--fs-small);color:var(--ink-muted)}
.af .rank-math-breadcrumb a{display:inline-flex;align-items:center;min-height:var(--target-min);color:var(--ink-muted)}
.af .rank-math-breadcrumb .separator{color:var(--line-strong)}
.af .rank-math-breadcrumb .last{color:var(--ink)}

/* Updated / Verified line */
.af-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-muted)}
.af-meta__verified{color:var(--positive);font-weight:650}

/* Key facts */
.af-facts{background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:var(--space-5);display:grid;gap:var(--space-2)}
.af-facts ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.af-facts .af-small{margin-top:var(--space-1)}

/* Table of contents */
.af-toc{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);display:grid;gap:var(--space-1);background:var(--surface-raised)}
.af-toc ol{margin:0;padding-left:1.3em;display:grid;gap:0}
.af-toc a{display:inline-flex;align-items:center;min-height:var(--target-min)}

/* Quick verdict */
.af-verdict{background:var(--surface-raised);border:var(--card-border) solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-5);display:grid;gap:var(--space-4)}
.af-verdict__score{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4)}
.af-verdict__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin:0}
.af-verdict__facts div{background:var(--surface-sky);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}
.af-verdict__facts dt{font-size:var(--fs-label);font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-muted)}
.af-verdict__facts dd{margin:0;font-weight:650}
.af-verdict__pc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.af-verdict__pc ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.af-price{font-size:var(--fs-price);line-height:1.2;font-weight:700;color:var(--positive)}

/* Price / comparison table — a real <table> */
.af-table:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.af-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised)}
.af-table table{width:100%;border-collapse:collapse;font-size:calc(var(--fs-body) - 1.5px);line-height:1.45;min-width:560px}
.af-table th,.af-table td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}
.af-table thead th{background:var(--surface-sky);font-weight:700;color:var(--ink)}
.af-table tbody th{font-weight:700}
.af-table td.af-num,.af-table th.af-num{text-align:right;white-space:nowrap}
.af-table tr:last-child td,.af-table tr:last-child th{border-bottom:0}
.af-table tr.is-pick th,.af-table tr.is-pick td{background:var(--surface-sand)}
.af-table caption{caption-side:bottom;text-align:left;padding:10px var(--space-4);font-size:var(--fs-small);color:var(--ink-muted);border-top:1px solid var(--line)}


/* Source line and method box */
.af-source{font-size:var(--fs-small);line-height:1.5;color:var(--ink-muted)}
.af-method{background:var(--surface-sand);border-radius:var(--radius-md);padding:var(--space-5);display:grid;gap:var(--space-2)}

/* FAQ — styles the Rank Math FAQ block; answers are server-rendered, <details> works without JS */
.af-faq{border-top:1px solid var(--line)}
.af-faq details{border-bottom:1px solid var(--line)}
.af-faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--target-min);padding:var(--space-3) 0;font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:calc(var(--fs-h3) - 2px);line-height:1.3;cursor:pointer;list-style:none}
.af-faq summary::-webkit-details-marker{display:none}
.af-faq summary::after{content:"+" / "";font-family:var(--font-body);font-size:var(--fs-price);color:var(--link)}
.af-faq details[open] summary::after{content:"–" / ""}
.af-faq details>p,.af-faq details>div{padding:0 0 var(--space-4)}
/* Rank Math FAQ block (WordPress block output), always open: every answer visible without JavaScript */
.af-faq .rank-math-list{margin:0}
.af-faq .rank-math-list-item{border-bottom:1px solid var(--line);padding:var(--space-3) 0 var(--space-4)}
.af-faq .rank-math-question{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:calc(var(--fs-h3) - 2px);line-height:1.3;margin:0 0 var(--space-2)}
.af-faq .rank-math-answer>*{margin:0}
.af-faq .rank-math-answer>*+*{margin-top:var(--space-3)}

/* Related articles */
.af-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.af .af-related a{display:grid;gap:6px;align-content:start;color:var(--ink);text-decoration:none;background:var(--surface-raised);border:var(--card-border) solid var(--line);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);transition:transform .2s ease,box-shadow .2s ease}
.af .af-related a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.af-related strong{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:calc(var(--fs-h3) - 2px);line-height:1.3;color:var(--brand)}

/* Bento grid (homepage, hub pages) */
.af-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.af-bento__tile{border-radius:var(--tile-radius);padding:var(--space-5) var(--space-6) var(--space-5) var(--space-5);background:var(--surface-raised);border:var(--card-border) solid var(--line);display:grid;align-content:start;gap:var(--space-2);color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.af a.af-bento__tile{color:var(--ink);text-decoration:none}
.af a.af-bento__tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.af-bento__tile--wide{grid-column:span 2}
.af-bento__tile--tall{grid-row:span 2}
.af-bento__tile--raised{box-shadow:var(--shadow-soft);border-color:transparent}
.af-bento__tile--sky{background:var(--surface-sky);border-color:transparent}
.af-bento__tile--sand{background:var(--surface-sand);border-color:transparent}
.af-bento__tile--brand{background:var(--brand);border-color:transparent;color:var(--on-brand)}
.af a.af-bento__tile--brand,.af-bento__tile--brand h3,.af-bento__tile--brand .af-eyebrow,.af-bento__tile--brand .af-small{color:var(--on-brand)}
.af .af-bento__tile--brand .af-title,.af .af-bento__tile--brand strong{color:var(--on-brand)}
.af-bento__num{font-family:var(--font-body);font-size:var(--fs-figure);line-height:1.05;font-weight:700;letter-spacing:-.5px}
@media (max-width:860px){.af-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.af-bento{grid-template-columns:1fr}.af-bento__tile--wide{grid-column:auto}.af-bento__tile--tall{grid-row:auto}}

/* Next-step band */
.af-next{background:var(--surface-sky);border-radius:var(--radius-lg);padding:var(--space-6);display:grid;gap:var(--space-3);justify-items:start}

@media (prefers-reduced-motion:reduce){.af-btn,.af .af-related a,.af-bento__tile,.af .af-nav a,.af-dd summary svg{transition:none}.af .af-related a:hover,.af a.af-bento__tile:hover,.af-btn:active{transform:none}}

/* Focus inside brand-filled areas: the ring takes on-brand (the tile's own ring stays focus-ring, drawn on the surface) */
.af-bento__tile--brand a:focus-visible,.af-bento__tile--brand summary:focus-visible,.af-badge--pick a:focus-visible{outline-color:var(--on-brand)}

/* Site header — the same structure on every site; the logo, menu items and the one header button come from the site layer.
   Desktop: .af-nav is visible. Under 860px: .af-nav hides and the <details> menu (no JavaScript) takes over. */
.af-skip{position:absolute;left:var(--space-4);top:-100px;z-index:10;background:var(--brand);color:var(--on-brand);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-weight:700;text-decoration:none}
.af .af-skip{background:var(--brand);color:var(--on-brand)}
.af-skip:focus{top:var(--space-2)}
.af-header{background:var(--surface-raised);border-bottom:1px solid var(--line)}
.af-header__in{max-width:var(--wide-width);margin:0 auto;padding:var(--space-3) var(--space-5);display:flex;align-items:center;gap:var(--space-3) var(--space-5);box-sizing:border-box}
.af-header__logo{display:inline-flex;align-items:center;min-height:var(--target-min);margin-right:auto}
.af-header__logo img{display:block;height:44px;width:auto}
.af-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--space-1)}
.af .af-nav a{display:inline-flex;align-items:center;min-height:var(--target-min);padding:0 var(--space-1);margin:0 var(--space-2);color:var(--ink);font-weight:650;font-size:var(--fs-button);text-decoration:none;background-image:linear-gradient(var(--decor-2),var(--decor-2));background-repeat:no-repeat;background-position:left calc(100% - 6px);background-size:0 3px;transition:background-size .22s ease,color .22s ease}
.af .af-nav a:hover{background-size:100% 3px;color:var(--brand)}
.af .af-nav a[aria-current]{background-image:linear-gradient(var(--brand),var(--brand));background-size:100% 3px;color:var(--brand)}
.af .af-menu__panel a[aria-current]{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px;text-underline-offset:8px}
.af-menu{display:none;position:relative}
.af-menu>summary{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--target-min);padding:0 var(--space-4);border:2px solid var(--line-strong);border-radius:var(--radius-pill);font-weight:700;font-size:var(--fs-button);cursor:pointer;list-style:none}
.af-menu>summary::-webkit-details-marker{display:none}
.af-menu>summary::after{content:"≡" / "";font-size:var(--fs-price);line-height:1}
.af-menu[open]>summary::after{content:"×" / ""}
.af-menu__panel{position:absolute;right:0;top:calc(100% + var(--space-2));z-index:5;min-width:240px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-2)}
.af-menu__panel ul{list-style:none;margin:0;padding:0;display:grid}
.af .af-menu__panel a{display:flex;align-items:center;min-height:var(--target-min);padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink);font-weight:650;text-decoration:none}
.af .af-menu__panel a:hover{background:var(--surface-sand)}
@media (max-width:860px){.af-nav{display:none}.af-header__in{column-gap:var(--space-3)}.af-header__cta{min-height:var(--target-min);padding:8px 12px;font-size:var(--fs-small);white-space:nowrap}.af-menu>summary{padding:0 var(--space-3);white-space:nowrap}.af-menu{display:block}.af-header__in{padding:var(--space-2) var(--space-4)}.af-header__logo img{height:32px}}

@media (max-width:380px){.af-header__in{flex-wrap:wrap;row-gap:var(--space-2)}.af-header__cta{order:3;flex:1 1 100%}}
/* Site footer */
.af-footer{background:var(--surface-sand);border-top:1px solid var(--line);color:var(--ink);font-size:var(--fs-small);line-height:1.5}
.af-footer__in{max-width:var(--wide-width);margin:0 auto;padding:var(--space-7) var(--space-5) var(--space-5);display:grid;grid-template-columns:2fr repeat(3,minmax(0,1fr));gap:var(--space-6);box-sizing:border-box}
.af-footer h2{font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--space-2)}
.af-footer ul{list-style:none;margin:0;padding:0;display:grid}
.af .af-footer a{display:inline-flex;align-items:center;min-height:var(--target-min);color:var(--ink);text-decoration:none}
.af .af-footer a:hover{text-decoration:underline}
.af-footer__about p{color:var(--ink-muted)}
.af-footer__base{max-width:var(--wide-width);margin:0 auto;padding:var(--space-4) var(--space-5) var(--space-6);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);color:var(--ink-muted);box-sizing:border-box}
@media (max-width:860px){.af-footer__in{grid-template-columns:1fr 1fr;padding:var(--space-6) var(--space-4) var(--space-4)}.af-footer__about{grid-column:1/-1}.af-footer__base{padding:var(--space-4)}}

/* Divider (C: soft, organic; SVG only, no image file). Colour from decor-2; the brand may use the plain line variant instead */
.af-divider{height:24px;margin:var(--space-7) 0;background:var(--decor-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath d='M0 12 C40 0 80 0 120 12 S200 24 240 12' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center/240px 24px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cpath d='M0 12 C40 0 80 0 120 12 S200 24 240 12' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center/240px 24px;border:0}
.af-divider--line{height:1px;background:var(--line);-webkit-mask:none;mask:none}

/* ===== v16 (2026-09-27, Imre: promote the WL40/SSN "richer" parts to the base; handover §3.2) ===== */
/* Top bar: the brand strip above the header (one short line of the site's promise + one link) */
.af-topbar{background:var(--brand);color:var(--on-brand);font-size:var(--fs-small);line-height:1.4}
.af-topbar__in{max-width:var(--wide-width);margin:0 auto;padding:var(--space-2) var(--space-5);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-1) var(--space-5)}
.af-topbar strong{font-weight:700}
.af .af-topbar a{color:var(--on-brand)}
.af-topbar a:focus-visible{outline-color:var(--on-brand)}
/* Header with the logo band: larger logo, two-tone line in the logo colours */
.af-header--band{border-bottom:3px solid var(--decor-1);box-shadow:0 3px 0 var(--decor-2)}
.af-header--band .af-header__logo img{height:56px}
/* Mixed menu: the item's name opens its hub page, the arrow opens up to six of its pages. <details name>, no hover menus, no JavaScript */
.af-dd{position:relative;display:flex;align-items:center}
.af-dd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:var(--target-min);min-height:var(--target-min);margin:0 calc(var(--space-2) * -1) 0 calc(var(--space-4) * -1);color:var(--ink);border-radius:var(--radius-sm)}
.af-dd summary::-webkit-details-marker{display:none}
.af-dd summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.af-dd summary:hover,.af-dd details[open]>summary{color:var(--brand)}
.af-dd details[open]>summary svg{transform:rotate(180deg)}
.af-dd__panel{position:absolute;left:0;top:100%;z-index:6;min-width:300px;list-style:none;margin:0;padding:var(--space-2);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);display:grid}
.af .af-nav .af-dd__panel{display:grid;gap:0}
.af .af-dd__panel li:not(#af-li){margin-bottom:0}
.af .af-nav .af-dd__panel a,.af .af-menu__panel .af-dd__panel a{display:flex;align-items:center;min-height:var(--target-min);margin:0;padding:0 var(--space-3);border-radius:var(--radius-sm);font-weight:400;font-size:var(--fs-body);color:var(--ink);background-image:none;text-decoration:none}
.af .af-nav .af-dd__panel a:hover,.af .af-menu__panel .af-dd__panel a:hover{color:var(--brand);background:transparent;text-decoration:underline;text-decoration-color:var(--decor-2);text-decoration-thickness:3px;text-underline-offset:6px}
.af .af-nav .af-dd__panel .af-dd__all a,.af .af-menu__panel .af-dd__panel .af-dd__all a{font-weight:650;border-top:1px solid var(--line);border-radius:0;margin-top:var(--space-1)}
/* the same lists inside the phone menu */
.af-menu__panel--dd{width:min(340px,calc(100vw - 32px));max-height:80vh;overflow:auto}
.af-menu__panel .af-dd{justify-content:space-between;flex-wrap:wrap}
.af-menu__panel .af-dd>a{flex:1 1 auto}
.af-menu__panel .af-dd summary{margin:0}
.af-menu__panel .af-dd details{display:contents}
.af-menu__panel .af-dd__panel{position:static;flex:1 1 100%;min-width:0;border:0;box-shadow:none;padding:0 0 var(--space-2) var(--space-4);background:transparent}
@media (max-width:860px){.af-topbar__in{padding:var(--space-2) var(--space-4)}.af-topbar__more{display:none}.af-header--band .af-header__logo img{height:40px}}

/* Photo (a real photo; AI-generated only where the site allows it, captioned "Illustrative image") and Screenshot (a dated product screenshot in a browser frame) */
.af-photo,.af-shot{margin:0}
.af-photo img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.af-photo figcaption,.af-shot figcaption{margin-top:var(--space-2)}
.af-shot__frame{border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--line);box-shadow:var(--shadow-card);overflow:hidden}
.af-shot__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-sand);border-bottom:1px solid var(--line)}
.af-shot__bar i{width:10px;height:10px;border-radius:50%;background:var(--line-strong);display:inline-block}
.af-shot__url{margin-left:var(--space-3);flex:1;min-width:0;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px var(--space-3);font-size:var(--fs-small);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-shot__frame img{display:block;width:100%;height:auto}
/* placeholders (design canvas only; on the live site the slot is the <img>) */
.af-photo__slot,.af-shot__slot{display:grid;place-items:center;align-content:center;gap:var(--space-2);text-align:center;padding:var(--space-5);color:var(--ink-muted);font-size:var(--fs-small);line-height:1.5}
.af-photo__slot{border-radius:var(--radius-lg);background:var(--decor-3)}
.af-shot__slot{background:linear-gradient(var(--surface-sky),var(--surface-sky)) top/100% 38% no-repeat,var(--surface-raised)}

/* Charts: plain HTML bars (no JavaScript, text at real size on phones), a legend for two series, a table view and a source line */
.af-chart{margin:0;background:var(--surface-raised);border:var(--card-border) solid var(--line);border-radius:var(--radius-md);padding:var(--space-5);display:grid;gap:var(--space-4)}
.af-chart__head{display:grid;gap:var(--space-1)}
.af .af-chart__head>*,.af .af-chart__head p+p{margin:0}
.af-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--fs-small);color:var(--ink)}
.af-legend span{display:inline-flex;align-items:center;gap:var(--space-2)}
.af-legend i{width:12px;height:12px;border-radius:3px;background:var(--chart-muted);display:inline-block}
.af-legend i.is-1{background:var(--chart-1)}
.af-legend i.is-2{background:var(--chart-2)}
.af-bars,.af-pairs{display:grid;gap:var(--space-3)}
.af-pairs{gap:var(--space-4)}
.af-bar,.af-pair{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);align-items:center;gap:var(--space-3)}
.af-bar__label,.af-pair__label{font-size:var(--fs-small);line-height:1.3;color:var(--ink)}
.af-pair__label{font-weight:650}
.af-pair__label span{display:block;font-weight:400;color:var(--ink-muted)}
.af-pair__bars{display:grid;gap:2px;border-left:1px solid var(--line)}
.af-bar__track{display:flex;align-items:center;gap:var(--space-2);min-height:22px}
.af-bar>.af-bar__track{border-left:1px solid var(--line);min-height:32px}
.af-bar__fill{display:block;height:18px;border-radius:0 4px 4px 0;background:var(--chart-muted)}
.af-bar>.af-bar__track .af-bar__fill{height:24px}
.af-bar__fill--1{background:var(--chart-1)}
.af-bar__fill--2{background:var(--chart-2)}
.af-bar__value{font-weight:700;font-size:var(--fs-small);color:var(--ink);white-space:nowrap}
.af-bar__value em{font-style:normal;font-weight:400;color:var(--ink-muted)}
.af-chart__data{font-size:var(--fs-small);color:var(--ink-muted)}
.af-chart__data summary{cursor:pointer;min-height:var(--target-min);display:inline-flex;align-items:center;color:var(--link);text-decoration:underline}
.af-chart__data table{border-collapse:collapse;margin-top:var(--space-2)}
.af-chart__data th,.af-chart__data td{text-align:left;padding:4px var(--space-4) 4px 0;border-bottom:1px solid var(--line);color:var(--ink)}
@media (max-width:560px){.af-bar,.af-pair{grid-template-columns:1fr;gap:4px}}
/* Pictogram: "one in five" */
.af-picto{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end}
.af-picto svg{width:44px;height:88px;fill:var(--chart-muted)}
.af-picto svg.is-on{fill:var(--chart-2)}

/* Infographic: two columns of icon + short line (e.g. what changes / what helps) */
.af-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.af-info__col{border-radius:var(--radius-lg);padding:var(--space-5);display:grid;gap:var(--space-4);align-content:start;background:var(--surface-sand)}
.af-info__col--sky{background:var(--surface-sky)}
.af-info__item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--space-3);align-items:center}
.af-info__icon{width:48px;height:48px;border-radius:50%;background:var(--surface-raised);display:grid;place-items:center;box-shadow:var(--shadow-card)}
.af-info__icon svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.af-info__item strong{font-weight:650}
@media (max-width:720px){.af-info{grid-template-columns:1fr}}
.af .af-flow>*+:is(.af-chart,.af-info,.af-photo,.af-shot),.af .entry-content>*+:is(.af-chart,.af-info,.af-photo,.af-shot){margin-top:var(--space-5)}


/* v18 (2026-09-29, Bankkalauz proposal, approved by Imre + WL40): tabular figures only where numbers line up — not in running text, where some faces widen commas and colons */
.af :is(.af-table,.af-price,.af-bento__num,.af-chart,.af-bar__value,.af-verdict__facts,.af-meta time,.af-num){font-variant-numeric:tabular-nums}