/* Alcophone site CSS — built from docs/Website/css/ (scripts/website/css/build.mjs). Edit the partials, not this file. */
/* @ 00-tokens/01-palette.css */
/* ---------- PALETTE (dark default · light) ----------
   Every colour of the site is written here and nowhere else; components only name tokens.
   <html data-theme> is set before first paint by snippet #25 (wp_head): the visitor's stored choice
   from the header toggle, else the system setting. Without JS the system setting decides too: the
   build re-emits the light block below under @media (prefers-color-scheme: light) for a page with no
   explicit dark choice (css/build.mjs systemTheme) — the light values are still written once.
   Values = the app's palette (src/constants/Colors.ts: dark, and `light` + the *Light risk colours,
   WCAG AA on white); text/link colours darkened where the app's would fall under 4.5:1.
   A colour that is also used see-through has an `-rgb` channel token: rgb(var(--alco-link-rgb) / 0.18). */
:root {
  color-scheme: dark;
  /* surfaces */
  --alco-bg: #0B1929;
  --alco-surface-rgb: 15 35 48;
  --alco-surface: rgb(var(--alco-surface-rgb));
  --alco-card: rgba(20, 45, 61, 0.6);
  --alco-card-solid: #142E3E;
  --alco-card-solid-commas: 20, 46, 62;   /* the same, for Kadence's rgba(var(--global-palette9rgb), a) */
  --alco-border: #163141;
  --alco-hairline: rgba(255, 255, 255, 0.04);
  /* text, strongest → faintest. Every text token passes WCAG AA (4.5:1) on every surface token, in
     both themes — __tests__/website/paletteContrast.test.ts holds it. There is no fainter level. */
  --alco-text: #FFFFFF;
  --alco-text-2: #9DB5C4;
  --alco-text-3: #799AA9;
  /* outline of an input / select: WCAG 1.4.11 wants 3:1 against the page, which the field shares as
     its background (--alco-border was 1.31:1 in dark). Every text level passes 4.5:1, so text-3 does. */
  --alco-field-border: var(--alco-text-3);
  /* the <select> arrow, painted in --alco-text-3 (a data: image cannot read a custom property) */
  --alco-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23799AA9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* accent: links, primary actions; tinted fills behind eyebrows / icons / callouts */
  --alco-link-rgb: 0 180 216;
  --alco-link: rgb(var(--alco-link-rgb));
  --alco-link-hover: #48CAE4;
  --alco-link-strong: #48CAE4;     /* pressed / hovered filled buttons (Kadence palette 2) — lighter in
                                      dark: palette9 text on the former #0096B4 was 4.04:1 */
  --alco-accent-rgb: 15 46 61;   /* #0F2E3D — text-3, severe and error read on it (≥ 4.6:1; #123749 gave 4.12–4.20) */
  --alco-accent: rgb(var(--alco-accent-rgb));
  --alco-accent-text: var(--alco-link-hover);
  --alco-on-link: #0B1929;          /* text on a filled --alco-link (calculator buttons) */
  --alco-menu-bg: #0F2330;          /* native <select> option lists */
  --alco-error: #EC6C6A;            /* form validation messages */
  --alco-grad-from: #FFFFFF;
  --alco-grad-to: #48CAE4;
  --alco-badge-blend: lighten;
  --alco-price-now: #00e676;
  /* BAC risk levels */
  --alco-safe: #00E5A0;
  --alco-low: #4ADE80;
  --alco-caution-rgb: 255 184 0;
  --alco-caution: rgb(var(--alco-caution-rgb));
  --alco-danger: #FF6B6B;
  --alco-severe: #FF5967;
  /* drink markers on the charts (bac-chart) */
  --alco-marker: #FFD93D;
  /* a highlighted table row (the stricter jurisdiction): a surface every text token reads on */
  --alco-row-highlight: rgb(var(--alco-caution-rgb) / 0.06);
  /* header (Kadence) */
  --alco-header-bg: rgba(11, 25, 41, 0.85);
  --alco-stuck-edge: rgba(255, 255, 255, 0.06);
  --alco-stuck-shadow: rgba(0, 0, 0, 0.35);
  /* elevation */
  --alco-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --alco-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.40);
  --alco-shadow-md: 0 8px 32px -6px rgba(0, 0, 0, 0.45);
  --alco-shadow-lg: 0 20px 60px -12px rgb(var(--alco-cyan-rgb) / 0.28);
  /* constants — the same in both themes */
  --alco-cyan-rgb: 0 180 216;      /* brand cyan: glows, hairlines, form chrome of the content pages */
  --alco-blue-rgb: 0 149 255;      /* second glow of the home hero */
  /* premium badge gradient — white text reads on both stops (≥ 4.5:1); until 2026-10-12 it ran
     #7B61FF → brand cyan, white on the cyan end was 2.46:1 */
  --alco-whatsapp: #25D366;        /* WhatsApp brand green */
  --alco-scrim: rgba(7, 9, 13, 0.92);
  --alco-on-scrim: #FFFFFF;
  --alco-cyan-deep: #0096B7;       /* end of the content pages' submit-button gradient */
  --alco-on-cyan: #0B1929;         /* text on that gradient (white on its cyan start was 2.46:1) */
  --alco-on-accent: #FFFFFF;       /* text on the premium badge */
  /* native <option> lists of the content forms (amber on brown in dark, plain in light) */
  --alco-option-bg: #2D1B00;
  --alco-option-text: #FFB800;
  --alco-option-checked: #4A2D00;
  /* elements shown in one theme only (the header toggle's sun / moon) */
  --alco-show-in-dark: block;
  --alco-show-in-light: none;
}
html[data-theme="light"] {
  color-scheme: only light; /* "only": a browser's forced dark mode must not recolour the light theme (it left light bands under light text on a Samsung phone, 2026-10-12) — the site has its own dark theme */
  --alco-bg: #F0F7FA;
  --alco-surface-rgb: 230 241 246;
  --alco-card: #FFFFFF;
  --alco-card-solid: #FFFFFF;
  --alco-card-solid-commas: 255, 255, 255;
  --alco-border: #D4E5ED;
  --alco-hairline: #D4E5ED;
  --alco-text: #0B1929;
  --alco-text-2: #3E5C6B;
  --alco-text-3: #536F7E;
  --alco-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23536F7E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --alco-link-rgb: 0 116 140;
  --alco-link-hover: #005F73;
  --alco-link-strong: #005F73;
  --alco-accent-rgb: 220 244 249;
  --alco-accent-text: #006880;
  --alco-on-link: #FFFFFF;
  --alco-menu-bg: #FFFFFF;
  --alco-error: #D12222;
  --alco-grad-from: #0B1929;
  --alco-grad-to: #007A94;
  --alco-badge-blend: normal;
  --alco-price-now: #047B56;
  --alco-safe: #047857;
  --alco-low: #14793A;
  --alco-caution-rgb: 173 80 9;
  --alco-danger: #D12222;
  --alco-severe: #B91C1C;
  --alco-marker: #7F6500;
  --alco-row-highlight: rgb(var(--alco-caution-rgb) / 0.05);
  --alco-option-bg: var(--alco-menu-bg);
  --alco-option-text: var(--alco-text);
  --alco-option-checked: var(--alco-surface);
  --alco-show-in-dark: none;
  --alco-show-in-light: block;
  --alco-header-bg: rgba(240, 247, 250, 0.92);
  --alco-stuck-edge: #D4E5ED;
  --alco-stuck-shadow: rgba(11, 25, 41, 0.08);
  --alco-shadow-sm: 0 1px 2px 0 rgba(31, 51, 71, 0.06);
  --alco-shadow: 0 4px 16px -4px rgba(31, 51, 71, 0.10);
  --alco-shadow-md: 0 8px 32px -6px rgba(31, 51, 71, 0.14);
  --alco-shadow-lg: 0 20px 60px -12px rgb(var(--alco-link-rgb) / 0.22);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
  color-scheme: only light; /* "only": a browser's forced dark mode must not recolour the light theme (it left light bands under light text on a Samsung phone, 2026-10-12) — the site has its own dark theme */
  --alco-bg: #F0F7FA;
  --alco-surface-rgb: 230 241 246;
  --alco-card: #FFFFFF;
  --alco-card-solid: #FFFFFF;
  --alco-card-solid-commas: 255, 255, 255;
  --alco-border: #D4E5ED;
  --alco-hairline: #D4E5ED;
  --alco-text: #0B1929;
  --alco-text-2: #3E5C6B;
  --alco-text-3: #536F7E;
  --alco-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23536F7E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --alco-link-rgb: 0 116 140;
  --alco-link-hover: #005F73;
  --alco-link-strong: #005F73;
  --alco-accent-rgb: 220 244 249;
  --alco-accent-text: #006880;
  --alco-on-link: #FFFFFF;
  --alco-menu-bg: #FFFFFF;
  --alco-error: #D12222;
  --alco-grad-from: #0B1929;
  --alco-grad-to: #007A94;
  --alco-badge-blend: normal;
  --alco-price-now: #047B56;
  --alco-safe: #047857;
  --alco-low: #14793A;
  --alco-caution-rgb: 173 80 9;
  --alco-danger: #D12222;
  --alco-severe: #B91C1C;
  --alco-marker: #7F6500;
  --alco-row-highlight: rgb(var(--alco-caution-rgb) / 0.05);
  --alco-option-bg: var(--alco-menu-bg);
  --alco-option-text: var(--alco-text);
  --alco-option-checked: var(--alco-surface);
  --alco-show-in-dark: none;
  --alco-show-in-light: block;
  --alco-header-bg: rgba(240, 247, 250, 0.92);
  --alco-stuck-edge: #D4E5ED;
  --alco-stuck-shadow: rgba(11, 25, 41, 0.08);
  --alco-shadow-sm: 0 1px 2px 0 rgba(31, 51, 71, 0.06);
  --alco-shadow: 0 4px 16px -4px rgba(31, 51, 71, 0.10);
  --alco-shadow-md: 0 8px 32px -6px rgba(31, 51, 71, 0.14);
  --alco-shadow-lg: 0 20px 60px -12px rgb(var(--alco-link-rgb) / 0.22);
}
}
@media print {
:root, html[data-theme] {
  color-scheme: only light; /* "only": a browser's forced dark mode must not recolour the light theme (it left light bands under light text on a Samsung phone, 2026-10-12) — the site has its own dark theme */
  --alco-bg: #F0F7FA;
  --alco-surface-rgb: 230 241 246;
  --alco-card: #FFFFFF;
  --alco-card-solid: #FFFFFF;
  --alco-card-solid-commas: 255, 255, 255;
  --alco-border: #D4E5ED;
  --alco-hairline: #D4E5ED;
  --alco-text: #0B1929;
  --alco-text-2: #3E5C6B;
  --alco-text-3: #536F7E;
  --alco-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23536F7E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --alco-link-rgb: 0 116 140;
  --alco-link-hover: #005F73;
  --alco-link-strong: #005F73;
  --alco-accent-rgb: 220 244 249;
  --alco-accent-text: #006880;
  --alco-on-link: #FFFFFF;
  --alco-menu-bg: #FFFFFF;
  --alco-error: #D12222;
  --alco-grad-from: #0B1929;
  --alco-grad-to: #007A94;
  --alco-badge-blend: normal;
  --alco-price-now: #047B56;
  --alco-safe: #047857;
  --alco-low: #14793A;
  --alco-caution-rgb: 173 80 9;
  --alco-danger: #D12222;
  --alco-severe: #B91C1C;
  --alco-marker: #7F6500;
  --alco-row-highlight: rgb(var(--alco-caution-rgb) / 0.05);
  --alco-option-bg: var(--alco-menu-bg);
  --alco-option-text: var(--alco-text);
  --alco-option-checked: var(--alco-surface);
  --alco-show-in-dark: none;
  --alco-show-in-light: block;
  --alco-header-bg: rgba(240, 247, 250, 0.92);
  --alco-stuck-edge: #D4E5ED;
  --alco-stuck-shadow: rgba(11, 25, 41, 0.08);
  --alco-shadow-sm: 0 1px 2px 0 rgba(31, 51, 71, 0.06);
  --alco-shadow: 0 4px 16px -4px rgba(31, 51, 71, 0.10);
  --alco-shadow-md: 0 8px 32px -6px rgba(31, 51, 71, 0.14);
  --alco-shadow-lg: 0 20px 60px -12px rgb(var(--alco-link-rgb) / 0.22);
}
}
/* The `--alco-surface` / `--alco-link` / `--alco-accent` above are built from their channels on :root;
   html[data-theme=light] is the same element, so changing the channels there is enough. */

/* @ 00-tokens/02-scale.css */
/* ---------- SCALE ----------
   Type families, radii and motion shared by every page family. Values a page family sets
   differently live in 05-skins/ as --skin-* properties, not here. */

/* Manrope — the app's own face (assets/fonts/, the BAC display), one variable file for every
   weight (200–800), self-hosted next to this stylesheet: scripts/website/css/fonts.mjs swaps the
   placeholder for the hashed name, snippet #26 preloads it. swap = text shows at once in the
   fallback below, then Manrope. Devanagari is not in Manrope: Hindi falls back per glyph. */
@font-face {
  font-family: "Manrope";
  src: url("alco-manrope.7de8ebfa.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* The fallback drawn to Manrope's metrics, so the swap does not move the layout (CLS). Measured on
   Manrope 600 vs Liberation Sans (= Arial metrics) over a mixed English sample, 2026-10-12:
   width ×1.066, ascent 1.066 / descent 0.300 em → divided by the size adjustment. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica"), local("Roboto");
  size-adjust: 106.6%;
  ascent-override: 100%;
  descent-override: 28.1%;
  line-gap-override: 0%;
}
:root {
  --alco-font-sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --alco-font-display: var(--alco-font-sans);
  /* code only — never names, labels or table values (those are --alco-font-sans + tabular figures) */
  --alco-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --alco-radius: 1rem;
  --alco-radius-sm: calc(var(--alco-radius) - 4px);
  --alco-radius-pill: 999px;
  --alco-ease-out: cubic-bezier(.16,1,.3,1);
}

/* @ 00-tokens/03-kadence-palette.css */
/* ---------- KADENCE PALETTE → OUR TOKENS ----------
   The WordPress theme (Kadence) colours its header, menus, dropdowns, buttons and headings from nine
   palette slots that the Customizer writes as literals into :root. Here every slot is bound once to a
   semantic token, so the theme follows the palette in BOTH modes — dark/light only switches the
   tokens (01-palette); nothing here, or in 40-kadence/, names a theme.
   Slot roles (Kadence's own): 1 accent · 2 accent pressed · 3 strongest text (also the desktop
   dropdown panel) · 4 body text · 5 navigation text · 6 subtle text · 7 borders / tinted band ·
   8 light background · 9 lightest background — form fields, cards, and the text on filled buttons.
   Until 2026-10-11 dark mode used the Customizer's own values: mobile menu text #0f2330 on a
   near-black drawer (1.22:1) and desktop navigation #4A5568 (≈ 2.3:1) — both under WCAG AA. */
:root {
  --global-palette1: var(--alco-link);
  --global-palette2: var(--alco-link-strong);
  --global-palette3: var(--alco-text);
  --global-palette4: var(--alco-text-2);
  --global-palette5: var(--alco-text-2);
  --global-palette6: var(--alco-text-3);
  --global-palette7: var(--alco-border);
  --global-palette8: var(--alco-surface);
  --global-palette9: var(--alco-card-solid);
  --global-palette9rgb: var(--alco-card-solid-commas);
  --global-palette-highlight: var(--alco-link);
  --global-palette-highlight-alt: var(--alco-link-hover);
  /* the theme's text (header, menus, footer, blog chrome) in the site face too */
  --global-body-font-family: var(--alco-font-sans);
}

/* @ 05-skins/01-content.css */
/* ---------- SKIN: CONTENT PAGES (.alco-skin-content) ----------
   Country limits, blog posts, bac-by-state, FAQ, legal pages, bug report. The only place this
   family differs from the landing family: component properties (--skin-*, --hero-*, …), root
   declarations, and the few rules only this family has. */
.alco-skin-content {
  background: var(--alco-bg);
  --skin-font: var(--alco-font-sans);
  --skin-link: var(--alco-link);
  --skin-section-pad: 80px;

  --hero-pad: 60px 0 40px;
  --hero-title-size: clamp(2rem, 3.6vw, 2.6rem); /* PHASE 21: long article titles ran to two 48 px lines */
  --hero-lede-size: 1.25rem;

  --hero-title-weight: 800;

  --cta-pad: 80px 0;
  --cta-glow-size: 500px;
  --cta-glow-bottom: 0;
  --cta-glow-rgb: var(--alco-cyan-rgb);
  --cta-glow-alpha: 0.08;
  --cta-title-size: 2.4rem;
  --cta-text-size: 1.05rem;
  --cta-overflow: visible;
  --cta-glow-z: auto;
  --cta-badges-gap: 0;

  --article-width: 800px;
  --article-wide: 1040px;
  --article-h2-size: 1.6rem;
  --article-h3-size: 1.15rem;
  --article-h3-color: var(--alco-link);
  --article-text-size: 1rem;
  --article-leading: 1.7;
  --article-list-indent: 24px;
  --article-h3-weight: 600;

  --callout-border: rgb(var(--alco-cyan-rgb) / 0.15);
  --callout-title-size: 1.1rem;
  --callout-bar: 1px solid var(--callout-border);
  --callout-radius: var(--alco-radius);
  --callout-bg: var(--alco-card);
  --callout-pad: 24px;

  --compare-gap: 20px;
  --compare-radius: var(--alco-radius);
  --compare-pad: 24px;
  --compare-list-indent: 20px;
  --compare-text-size: 0.9rem;
  --compare-leading: 1.5;
  --compare-title-weight: 600;
  --compare-bg: var(--alco-card);
  --compare-border: rgb(var(--alco-cyan-rgb) / 0.1);

  --disclaimer-pad: 24px 0 32px;
  --disclaimer-rule: rgb(var(--alco-cyan-rgb) / 0.1);
  --disclaimer-size: 0.75rem;
  --disclaimer-width: 600px;
  --disclaimer-bg: transparent;
  --disclaimer-leading: 1.5;

  --badge-size: 0.75rem;
  --badge-pad: 2px 10px;
  --badge-radius: 20px;
  --badge-shadow: none;
  --badge-valign: baseline;
}
/* Links fade to the hover colour (landing links inherit the text colour and do not change) */
.alco-skin-content a { transition: color 0.2s; }
.alco-skin-content a:hover { color: var(--alco-link-hover); }
@media (max-width: 768px) {
  .alco-skin-content {
    --skin-section-pad: 56px;
    --hero-title-size: 2.2rem;
    --hero-lede-size: 1.05rem;
  }
}

/* @ 05-skins/02-landing.css */
/* ---------- SKIN: LANDING PAGES (.alco-skin-landing) ----------
   Home, learn, how-bac-works, bac-chart, calculator (Apple-style, June 2026). The only place this
   family differs from the content family: component properties and root declarations of its own. */
.alco-skin-landing {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  --skin-font: var(--alco-font-display);
  --skin-link: currentcolor;
  --skin-section-pad: 72px;

  --hero-pad: 76px 0 40px;
  --hero-title-size: clamp(2rem, 4.5vw, 3rem);
  --hero-lede-size: 1.12rem;

  --hero-title-weight: 700;

  --cta-pad: 96px 0;
  --cta-glow-size: 560px;
  --cta-glow-bottom: -20%;
  --cta-glow-rgb: var(--alco-link-rgb);
  --cta-glow-alpha: 0.14;
  --cta-title-size: clamp(1.8rem, 4vw, 2.6rem);
  --cta-text-size: 1.1rem;
  --cta-overflow: hidden;
  --cta-glow-z: 0;
  --cta-badges-gap: 34px;

  --article-width: 760px;
  --article-wide: 1040px;
  --article-h2-size: clamp(1.5rem, 3vw, 2rem);
  --article-h3-size: 1.2rem;
  --article-h3-color: var(--alco-link-hover);
  --article-text-size: 1.05rem;
  --article-leading: 1.75;
  --article-list-indent: 22px;
  --article-h3-weight: 700;

  --callout-border: var(--alco-border);
  --callout-title-size: 1.05rem;
  --callout-bar: 1px solid var(--callout-border); /* no accent bar on the left (PHASE 21) — the tint marks the box */
  --callout-radius: var(--alco-radius-sm);
  --callout-bg: rgb(var(--alco-accent-rgb) / 0.4);
  --callout-pad: 20px 22px;

  --compare-gap: 16px;
  --compare-radius: var(--alco-radius-sm);
  --compare-pad: 20px;
  --compare-list-indent: 18px;
  --compare-text-size: 0.92rem;
  --compare-leading: 1.55;
  --compare-title-weight: 700;
  --compare-bg: var(--alco-card-solid);
  --compare-border: var(--alco-border);

  --disclaimer-pad: 40px 0;
  --disclaimer-rule: var(--alco-border);
  --disclaimer-size: 0.82rem;
  --disclaimer-width: 820px;
  --disclaimer-bg: rgb(var(--alco-surface-rgb) / 0.35);
  --disclaimer-leading: 1.6;

  --badge-size: 0.6em;
  --badge-pad: 4px 12px;
  --badge-radius: var(--alco-radius-pill);
  --badge-shadow: var(--alco-shadow-sm);
  --badge-valign: middle;
}
.alco-skin-landing img { display: block; }

/* @ 10-base/01-page.css */
/* ---------- PAGE ROOT, RESET, LINKS, IMAGES ----------
   The one page base, .alco, on every page root, with its skin beside it: .alco-skin-content
   (country limits, blog, FAQ, legal, forms) or .alco-skin-landing (home, learn, how-bac-works,
   bac-chart, calculator). What differs between the skins is in 05-skins/. */
.alco {
  font-family: var(--skin-font);
  color: var(--alco-text);
  line-height: 1.6;
  /* clip, not hidden: `hidden` makes .alco the scroll container of every sticky descendant (the
     on-this-page list would scroll away); `hidden` stays first for iOS 14 / Chrome 88 (no clip) */
  overflow-x: hidden;
  overflow-x: clip;
}
.alco * { margin: 0; padding: 0; box-sizing: border-box; }
.alco a { color: var(--skin-link); text-decoration: none; }
/* A link inside running text is underlined: colour alone does not mark it (WCAG 1.4.1) */
.alco-skin-content :is(p, li):not(.alco-cta-share) a, .alco-skin-landing :is(p, li) a:not(.alco-card-link, .alco-calc-btn) { text-decoration: underline; text-underline-offset: 0.15em; }
.alco img { max-width: 100%; height: auto; }

/* @ 10-base/02-layout.css */
/* ---------- CONTAINER + SECTION ----------
   One width for the whole site: the theme's content width and edge padding (Kadence Customizer,
   --global-content-width 1290px / --global-content-edge-padding 1.5rem), so every page runs in the
   same lines as the header's logo and menu at every viewport — wide on a desktop, with its margin
   (user, 2026-10-12: "use the full width … but keep a margin"). The fallbacks are those values. */
.alco .alco-container {
  width: 100%;
  max-width: var(--global-content-width, 1290px);
  margin: 0 auto;
  padding: 0 var(--global-content-edge-padding, 1.5rem);
}
.alco .alco-section { padding: var(--skin-section-pad) 0; }

/* @ 10-base/03-headings.css */
/* ---------- HEADINGS ----------
   Weight, tracking and leading of h1–h3; sizes belong to the component. Only the landing family
   sets them here — content pages still take Kadence's heading defaults (Customizer: line-height
   1.5 …); the redesign should move both families onto this rule. */
.alco-skin-landing h1, .alco-skin-landing h2, .alco-skin-landing h3 { letter-spacing: -0.02em; font-weight: 700; line-height: 1.12; }

/* @ 20-components/01-fx.css */
/* ---------- GPU PARTICLES + SCROLL REVEAL (landing) ---------- */
#gpufx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.alco-skin-landing main, .alco-skin-landing footer { position: relative; z-index: 1; }
/* The reveal is an enhancement: the page script adds .reveal itself (no JS → nothing is hidden)
   and shows everything within 3 s; the hidden start state only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .alco-skin-landing .alco-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--alco-ease-out), transform .8s var(--alco-ease-out); will-change: opacity, transform; }
  .alco-skin-landing .alco-reveal.alco-in { opacity: 1; transform: none; }
}
/* Reduced motion: no particles, and our components change state at once (hover lifts, fades).
   0.01ms rather than none, so scripts waiting for `transitionend` still get it. */
@media (prefers-reduced-motion: reduce) {
  #gpufx { display: none; }
  .alco, .alco *, .alco *::before, .alco *::after { transition-duration: 0.01ms !important; }
}

/* @ 20-components/02-eyebrow.css */
/* ---------- EYEBROW (landing) ---------- small pill label above a heading */
.alco-skin-landing .alco-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: var(--alco-accent-text); background: var(--alco-accent); border: 1px solid rgb(var(--alco-link-rgb) / 0.18); padding: 6px 14px; border-radius: var(--alco-radius-pill); }
.alco-skin-landing .alco-eyebrow .alco-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--alco-link); box-shadow: 0 0 0 3px rgb(var(--alco-link-rgb) / 0.18); }

/* @ 20-components/03-hero.css */
/* ---------- HERO ----------
   The title band at the top of a page: eyebrow (landing), title, lede. One component; the skin sets
   its sizes and spacing (--hero-*) and paints its own glow. The home page's two-column hero
   (.alco-home-hero) is a landing-only component below. */
.alco .alco-hero, .alco .alco-home-hero { position: relative; overflow: hidden; }
.alco .alco-hero { text-align: center; padding: var(--hero-pad); }
.alco-hero-content { position: relative; z-index: 1; }

/* Glow behind the title — each skin its own shape */
.alco-skin-content .alco-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgb(var(--alco-cyan-rgb) / 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.alco-skin-landing .alco-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 0%, rgb(var(--alco-link-rgb) / 0.13), transparent 70%); }

/* Title */
.alco .alco-hero :where(h1) { font-size: var(--hero-title-size); font-weight: var(--hero-title-weight); letter-spacing: -0.02em; }
/* Margins stay longhands per skin: the side a skin does not set is the theme's (Kadence's
   .entry-content heading margins) — a shorthand would zero it (css/README.md › Pitfalls) */
.alco-skin-content .alco-hero :where(h1) { margin-bottom: 8px; }
.alco-skin-landing .alco-hero :where(h1) { margin-top: 16px; }
/* Gradient text — the words marked .alco-grad (landing); the content skin's titles are one solid
   colour since PHASE 21 (a two-tone 48 px title on every article read as decoration) — only where the browser can clip to text: elsewhere the heading's own solid colour,
   never transparent text on nothing */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .alco .alco-grad {
    background: linear-gradient(135deg, var(--alco-grad-from) 0%, var(--alco-grad-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Lede under the title */
.alco .alco-hero .alco-lede { color: var(--alco-text-2); font-size: var(--hero-lede-size); }
.alco-skin-landing .alco-hero .alco-lede { margin: 14px auto 0; max-width: 56ch; }

/* Home hero (landing only): copy + phone visual in two columns */
.alco-skin-landing .alco-home-hero { padding: 112px 0 72px; } /* the eyebrow clear of the sticky header */
.alco-skin-landing .alco-home-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: radial-gradient(60% 50% at 80% 0%, rgb(var(--alco-link-rgb) / 0.14), transparent 70%), radial-gradient(50% 50% at 10% 10%, rgb(var(--alco-blue-rgb) / 0.10), transparent 70%); }
.alco-skin-landing .alco-home-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.alco-skin-landing .alco-home-hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); margin: 22px 0 0; }
.alco-skin-landing .alco-home-hero .alco-lede { font-size: 1.18rem; color: var(--alco-text-2); margin-top: 18px; max-width: 30ch; }
.alco-skin-landing .alco-home-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.alco-skin-landing .alco-store-badge { display: inline-block; margin-left: -14px; transition: transform .2s ease; } /* the badge PNG's own transparent margin: its visible edge lines up with the text */
.alco-skin-landing .alco-store-badge:hover { transform: scale(1.04); }
/* button size (PHASE 21: it was 532 px, larger than the headline); the PNG carries its own transparent margin */
.alco-skin-landing .alco-store-badge img { width: 216px; max-width: 100%; height: auto; aspect-ratio: 646 / 250; mix-blend-mode: var(--alco-badge-blend); } /* the ratio holds its place before the image arrives (it pushed the trust line down: CLS) */
/* the second way in: the free web calculator, for a visitor who does not install */
.alco-skin-landing .alco-hero-cta { display: inline-flex; align-items: center; min-height: 56px; padding: 12px 22px; border: 1px solid var(--alco-link); border-radius: 12px; color: var(--alco-text); font-weight: 600; text-decoration: none; transition: background-color .2s ease; }
.alco-skin-landing .alco-hero-cta:hover { background: rgb(var(--alco-link-rgb) / 0.12); }
.alco-skin-landing .alco-hero-cta:is(:focus-visible) { outline: 2px solid var(--alco-link); outline-offset: 2px; }
/* the trust facts: one ticked line that wraps item by item (the 6 / 5,800+ / 0 trio broke 2 + 1 on a phone) */
.alco-skin-landing .alco-home-hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; }
.alco-skin-landing .alco-home-hero-trust li { margin: 0; font-size: 0.92rem; color: var(--alco-text-2); }
.alco-skin-landing .alco-home-hero-trust li::before { content: "\2713"; margin-right: 7px; font-weight: 800; color: var(--alco-safe); }
.alco-skin-landing .alco-home-hero-trust b { font-weight: 700; color: var(--alco-text); }
.alco-skin-landing .alco-home-hero-visual { position: relative; display: grid; place-items: center; }
.alco-skin-landing .alco-phone-frame { border-radius: 22px; overflow: hidden; border: 1px solid var(--alco-border); box-shadow: var(--alco-shadow-lg); background: var(--alco-card-solid); transition: transform .35s ease; }
.alco-skin-landing .alco-phone-frame:hover { transform: translateY(-4px); }
.alco-skin-landing .alco-phone-frame img { cursor: pointer; }
@media (max-width: 880px) { .alco-skin-landing .alco-home-hero-grid { grid-template-columns: 1fr; gap: 40px; } .alco-skin-landing .alco-home-hero .alco-lede { max-width: none; } } /* the words stay first on a phone: headline, badge and calculator inside the first screen */
@media (max-width: 600px) { .alco-skin-landing .alco-home-hero { padding: 88px 0 48px; } }
/* A post's reading time under its lede (site/components.mjs readingTime, PHASE 21) */
.alco .alco-hero .alco-article-meta { margin-top: 14px; font-size: 0.9rem; color: var(--alco-text-3); }
.alco .alco-hero .alco-article-meta span { font-weight: 700; color: var(--alco-text-2); font-variant-numeric: tabular-nums; }

/* @ 20-components/04-section-head.css */
/* ---------- SECTION HEAD (landing) ---------- title + line over a section, on the content's left edge.
   PHASE 21: no pill eyebrow (only the hero keeps one) and not centred — "pill + centred title" on every
   section was the most templated landing pattern; the blocks under a head share its left edge. */
.alco-skin-landing .alco-section-head { max-width: 760px; margin: 0 0 40px; text-align: left; }
.alco-skin-landing .alco-section-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-top: 0; }
.alco-skin-landing .alco-section-head p { color: var(--alco-text-2); font-size: 1.05rem; margin-top: 12px; }
.alco-skin-landing .alco-section-muted { background: var(--alco-surface); } /* no hairlines: on the light theme the band and its two borders read as a glitch (PHASE 21) */

/* @ 20-components/05-card.css */
/* ---------- CARD (landing) ----------
   Feature cards (home) and learn cards (whole card clickable through a stretched link — WP-safe,
   no <a> wrapping block content). */
.alco-skin-landing .alco-features-grid, .alco-skin-landing .alco-learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .alco-skin-landing .alco-features-grid, .alco-skin-landing .alco-learn-grid { grid-template-columns: 1fr; } }
.alco-skin-landing .alco-card { background: var(--alco-card-solid); border: 1px solid var(--alco-border); border-radius: var(--alco-radius); padding: 26px; box-shadow: var(--alco-shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .8s var(--alco-ease-out); }
.alco-skin-landing .alco-card:hover { transform: translateY(-3px); box-shadow: var(--alco-shadow-md); border-color: rgb(var(--alco-link-rgb) / 0.4); }
.alco-skin-landing .alco-feature-icon { width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; line-height: 0; background: var(--alco-accent); margin-bottom: 18px; }
.alco-skin-landing .alco-feature-icon svg { width: 28px; height: 28px; display: block; flex: 0 0 auto; }
.alco-skin-landing .alco-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.alco-skin-landing .alco-card p { color: var(--alco-text-2); font-size: 0.95rem; }
.alco-skin-landing .alco-learn-card { position: relative; cursor: pointer; }
.alco-skin-landing .alco-card .alco-card-icon { width: 32px; height: 32px; margin-bottom: 14px; display: block; }
.alco-skin-landing .alco-card .alco-card-link { display: inline-block; margin-top: 14px; color: var(--alco-link); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.alco-skin-landing .alco-learn-card .alco-card-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--alco-radius); }
.alco-skin-landing .alco-learn-card:hover .alco-card-link { color: var(--alco-link-hover); }

/* @ 20-components/06-shots.css */
/* ---------- SCREENSHOT STRIP (landing) ---------- */
.alco-skin-landing .alco-shots { display: flex; gap: 18px; overflow-x: auto; padding: 6px 24px 22px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.alco-skin-landing .alco-shots::-webkit-scrollbar { height: 8px; }
.alco-skin-landing .alco-shots::-webkit-scrollbar-thumb { background: var(--alco-border); border-radius: var(--alco-radius-pill); }
.alco-skin-landing .alco-shot { flex: 0 0 auto; width: 200px; scroll-snap-align: center; text-align: center; }
.alco-skin-landing .alco-shot img { border-radius: 18px; border: 1px solid var(--alco-border); box-shadow: var(--alco-shadow); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.alco-skin-landing .alco-shot img:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--alco-shadow-lg); }
.alco-skin-landing .alco-shot-cap { font-size: 0.85rem; font-weight: 600; color: var(--alco-text-3); margin-top: 12px; }
/* Enhanced by the site script (js/04-shots.js): dragged by the mouse and drifting, so no scrollbar
   and no snap points (they would fight the drift); without JS the rules above stay as they are. */
.alco-skin-landing .alco-shots.alco-marquee { scroll-snap-type: none; scrollbar-width: none; cursor: grab; }
.alco-skin-landing .alco-shots.alco-marquee::-webkit-scrollbar { display: none; }
.alco-skin-landing .alco-shots.alco-marquee img { cursor: inherit; }
.alco-skin-landing .alco-shots.alco-dragging { cursor: grabbing; }
.alco-skin-landing .alco-shots.alco-dragging img { pointer-events: none; }

/* @ 20-components/07-table.css */
/* ---------- TABLE ----------
   Data tables in a scrolling .alco-table-scroll (the landing skin frames it), or a framed
   .alco-table-frame (home comparison). .alco-table-chart = numeric BAC tables (tabular figures, centred).
   The two skins style the cells differently: content tables (.alco-table) have small upper-case
   headers and centred middle columns; landing tables are plain <table>s with a tinted header row. */
.alco .alco-table-scroll { overflow-x: auto; }
.alco-skin-landing .alco-table-frame { max-width: 880px; margin: 0 auto; border: 1px solid var(--alco-border); border-radius: var(--alco-radius); overflow: hidden; box-shadow: var(--alco-shadow-sm); background: var(--alco-card-solid); }
.alco-skin-landing .alco-table-scroll { border: 1px solid var(--alco-border); border-radius: var(--alco-radius); margin: 16px 0; -webkit-overflow-scrolling: touch; }

.alco-table, .alco-skin-landing table { width: 100%; border-collapse: collapse; }
.alco-table { min-width: 500px; text-align: left; }
.alco-skin-landing table { font-size: 0.94rem; }
.alco-skin-landing .alco-table-scroll table { min-width: 560px; }

.alco-table thead th, .alco-skin-landing thead th { text-align: left; padding: 16px 20px; }
.alco-table thead th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--alco-text-3);
  border-bottom: 1px solid rgb(var(--alco-cyan-rgb) / 0.15);
}
.alco-skin-landing thead th { font-weight: 600; background: rgb(var(--alco-surface-rgb) / 0.6); border-bottom: 1px solid var(--alco-border); }
.alco-skin-landing thead th.alco-col-premium { background: var(--alco-accent); color: var(--alco-accent-text); }

.alco-table tbody td, .alco-skin-landing tbody td { padding: 14px 20px; color: var(--alco-text-2); }
.alco-table tbody td { border-bottom: 1px solid var(--alco-hairline); font-size: 0.95rem; text-align: left; }
.alco-skin-landing tbody td { border-bottom: 1px solid var(--alco-border); }
.alco-skin-landing tbody tr:last-child td { border-bottom: none; }
.alco-skin-landing tbody td:first-child { color: var(--alco-text); font-weight: 500; }
.alco-skin-landing td.alco-col-premium { color: var(--alco-text); }
.alco-table thead th:nth-child(2),
.alco-table thead th:nth-child(3) { text-align: center; }
.alco-table tbody td:nth-child(2),
.alco-table tbody td:nth-child(3) { text-align: center; }
.alco-table tbody tr:hover { background: rgb(var(--alco-cyan-rgb) / 0.04); }
.alco-skin-landing .alco-check { color: var(--alco-safe); font-weight: 700; }
.alco-skin-landing .alco-cross { color: var(--alco-text-2); }

/* Numeric BAC tables: values centred in tabular figures (the site face, not monospace — 2026-10-12), the row label left. (0,2,1) — until 2026-10-12 the content
   skin's copy was (0,1,1) and lost to .alco-table tbody td, so its 4th column sat left. */
.alco .alco-table-chart td { font-variant-numeric: tabular-nums; text-align: center; font-size: 0.92rem; }
.alco .alco-table-chart thead th { text-align: center; }
.alco .alco-table-chart thead th:first-child, .alco .alco-table-chart tbody td:first-child { text-align: left; }
/* A highlighted row (e.g. the stricter jurisdiction in a limits table) — it keeps its tint under the
   pointer: (0,3,2) over the row hover above (0,2,2) */
.alco-row-highlight, .alco-table tbody tr.alco-row-highlight:hover { background: var(--alco-row-highlight); }

/* ---------- LIMIT TABLES (gen-legal-limit-pages.mjs, PHASE 21) ----------
   A column's most common value is the norm and reads quietly; a value that differs from it is marked:
   a chip in its risk tone (.alco-chip, 24-chip.css), or stronger text when it carries no tone. A dash
   ("no such rule") is the faintest. Every cell carries data-label = its column header. */
.alco .alco-table-limits td.alco-v-norm { color: var(--alco-text-2); font-weight: 400; }
.alco .alco-table-limits td.alco-v-diff { color: var(--alco-text); font-weight: 700; }
.alco .alco-table-limits td.alco-v-none { color: var(--alco-text-3); }
.alco .alco-table-limits tbody td:first-child { color: var(--alco-text); }
/* On a phone a five-column table would scroll sideways and hide two columns: each row becomes a card —
   the name on top, every other cell under its own label. display: grid / block makes Chrome and Safari
   expose the rows as plain blocks, not a table: a screen reader hears each value after its label (the
   ::before text), not as a header-mapped cell — the information is the same, the table navigation is not. */
/* the search (js/06-table-filter.js) hides rows with [hidden]: the card rule below (display: grid, an
   author rule) would override the browser's own [hidden] rule */
.alco .alco-table-limits tbody tr[hidden] { display: none; }
@media (max-width: 599px) {
  .alco .alco-table-limits { min-width: 0; }
  .alco .alco-table-limits thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .alco .alco-table-limits tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px 12px; padding: 14px 4px; border-bottom: 1px solid var(--alco-border); }
  .alco .alco-table-limits tbody td { display: block; padding: 0; border: 0; text-align: left; font-size: 0.95rem; }
  .alco .alco-table-limits tbody td:first-child { grid-column: 1 / -1; font-size: 1.02rem; }
  .alco .alco-table-limits tbody td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--alco-text-3); }
}
/* Search over a long limit table (js/06-table-filter.js adds it; without JS there is none) */
.alco .alco-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 8px 0 12px; }
.alco .alco-table-search { flex: 1 1 220px; min-width: 0; max-width: 360px; padding: 10px 14px; border: 1px solid var(--alco-field-border); border-radius: 10px; background: var(--alco-surface); color: var(--alco-text); font: inherit; font-size: 0.95rem; }
.alco .alco-table-toggle { padding: 8px 14px; border: 1px solid var(--alco-field-border); border-radius: var(--alco-radius-pill); background: transparent; color: var(--alco-text-2); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.alco .alco-table-toggle[aria-pressed="true"] { border-color: var(--alco-link); background: rgb(var(--alco-link-rgb) / 0.12); color: var(--alco-text); }
.alco .alco-table-count { margin: 0 0 0 auto; font-size: 0.85rem; color: var(--alco-text-3); font-variant-numeric: tabular-nums; }
.alco :is(.alco-table-search, .alco-table-toggle):is(:focus-visible) { outline: 2px solid var(--alco-link); outline-offset: 2px; }

/* ---------- BAC HEAT MAP (bac-chart.html, PHASE 21) ----------
   Weight × drinks: each value cell is tinted in its risk band (the app's zones — the band class is
   checked by __tests__/website/bacChartBands.test.ts), so the step where a row crosses the legal limit
   shows at a glance; danger and severe cells are outlined. The tint needs colour mixing (Chrome 111 /
   Safari 16.2) — before that the coloured digits and the outline carry the same information. */
.alco .alco-table-heat { border-collapse: separate; border-spacing: 4px; }
.alco .alco-table-heat tbody td { border-bottom: 0; border-radius: 8px; padding: 12px 8px; font-weight: 700; }
.alco .alco-table-heat tbody td:first-child { padding-left: 12px; font-weight: 600; }
.alco .alco-table-heat td:is(.alco-bac-danger, .alco-bac-severe) { box-shadow: inset 0 0 0 1.5px currentColor; }
/* With the tint, the digits move to the strongest text colour: tone digits on a tint of their own tone
   fell to 3.9–4.2:1 in light mode (axe, 2026-10-12). The tone stays in the tint and the outline; the
   colour comes from --heat-tone so the digits can change without losing it. Without colour mixing the
   tone digits stand on the plain background, where every tone token passes AA. */
.alco .alco-table-heat td[class^="alco-bac-"] { --heat-tone: currentColor; }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .alco .alco-table-heat td.alco-bac-safe { --heat-tone: var(--alco-safe); }
  .alco .alco-table-heat td.alco-bac-low { --heat-tone: var(--alco-low); }
  .alco .alco-table-heat td.alco-bac-caution { --heat-tone: var(--alco-caution); }
  .alco .alco-table-heat td.alco-bac-danger { --heat-tone: var(--alco-danger); }
  .alco .alco-table-heat td.alco-bac-severe { --heat-tone: var(--alco-severe); }
  .alco .alco-table-heat td[class^="alco-bac-"] { color: var(--alco-text); background: color-mix(in srgb, var(--heat-tone) 18%, transparent); }
  .alco .alco-table-heat td:is(.alco-bac-danger, .alco-bac-severe) { box-shadow: inset 0 0 0 1.5px var(--heat-tone); }
}
/* a phone: the seven columns fit the screen (no sideways scroll), tighter cells and smaller digits */
@media (max-width: 599px) {
  .alco .alco-table-scroll .alco-table-heat { min-width: 0; border-spacing: 2px; font-size: 0.72rem; letter-spacing: -0.01em; }
  /* (0,2,2)+ — over the desktop cell padding above */
  .alco .alco-table-heat tbody td, .alco .alco-table-heat thead th { padding: 8px 1px; }
  .alco .alco-table-heat tbody td:first-child { padding-left: 4px; white-space: nowrap; }
  .alco .alco-table-heat thead th { font-size: 0.68rem; line-height: 1.25; text-align: center; }
}

/* @ 20-components/08-badge.css */
/* ---------- PREMIUM BADGE ---------- the skin sets its size and shape (--badge-*). The brand accent,
   solid (PHASE 21: a purple-to-blue gradient was the one off-palette colour on the site) */
.alco .alco-premium-badge {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--alco-link);
  color: var(--alco-on-link);
  font-size: var(--badge-size);
  padding: var(--badge-pad);
  border-radius: var(--badge-radius);
  box-shadow: var(--badge-shadow);
  vertical-align: var(--badge-valign);
}

/* @ 20-components/09-price.css */
/* ---------- PLANS (home pricing, PHASE 21) ----------
   Two plan cards — Free and Premium, the price in the card it belongs to — then the full feature
   table folded into <details> (it was 18 equal rows with the price in a separate box below). The
   Premium card is outlined in the accent. */
.alco .alco-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; max-width: 980px; margin: 0; }
.alco .alco-plan { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--alco-card-solid); border: 1px solid var(--alco-border); border-radius: var(--alco-radius); box-shadow: var(--alco-shadow-sm); text-align: left; }
/* (0,2,0): over the theme's paragraph and list margins (.single-content p — 0,1,1) */
.alco .alco-plan > *, .alco .alco-plan-list li { margin: 0; }
.alco .alco-plan-premium { border-color: var(--alco-link); box-shadow: inset 0 0 0 1px var(--alco-link), var(--alco-shadow-sm); }
.alco .alco-plan-name { font-size: 1.15rem; font-weight: 700; color: var(--alco-text); }
.alco .alco-plan-price { font-size: 2.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--alco-text); }
.alco .alco-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--alco-text-2); }
.alco .alco-price-now { color: var(--alco-price-now); font-size: 2.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.alco .alco-plan-note { font-size: 0.9rem; color: var(--alco-text-3); }
.alco .alco-plan-lead { margin-top: 4px; font-size: 0.9rem; font-weight: 700; color: var(--alco-text-2); }
.alco .alco-plan-list { list-style: none; display: grid; gap: 10px; padding: 0; }
.alco .alco-plan-list li { position: relative; padding-left: 26px; font-size: 0.95rem; line-height: 1.5; color: var(--alco-text-2); }
.alco .alco-plan-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--alco-safe); }
/* every feature, folded */
.alco .alco-plan-compare { max-width: 980px; margin: 20px 0 0; background: var(--alco-card-solid); border: 1px solid var(--alco-border); border-radius: var(--alco-radius); }
.alco .alco-plan-compare summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; font-weight: 600; color: var(--alco-text); cursor: pointer; list-style: none; }
.alco .alco-plan-compare summary::-webkit-details-marker { display: none; }
.alco .alco-plan-compare summary::after { content: "+"; font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--alco-link); }
.alco .alco-plan-compare[open] summary::after { content: "\2013"; }
.alco .alco-plan-compare summary:is(:focus-visible) { outline: 2px solid var(--alco-link); outline-offset: 2px; border-radius: var(--alco-radius); }
.alco .alco-plan-compare .alco-table-frame { max-width: none; margin: 0 12px 12px; box-shadow: none; }
/* The folded table fits its frame on a phone (it ran 80 px past it at 390 px and lost its right edge):
   tighter cells, smaller type, long cells wrap */
@media (max-width: 599px) {
  .alco .alco-plan-compare .alco-table-frame { margin: 0 8px 8px; }
  .alco-skin-landing .alco-plan-compare table { font-size: 0.82rem; }
  .alco-skin-landing .alco-plan-compare :is(thead th, tbody td) { padding: 10px 8px; }
}

/* @ 20-components/10-cta.css */
/* ---------- CTA ----------
   The closing "get the app" band: heading, line, Play badge (+ the country pages' share line). One
   component; the skin sets the band's size and spacing (--cta-*). The landing skin centres its
   text in an inner column (.alco-cta-inner) and lets the glow be clipped by the band. */
.alco .alco-cta { text-align: center; position: relative; padding: var(--cta-pad); overflow: var(--cta-overflow); }

/* Glow from below */
.alco .alco-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cta-glow-size);
  height: var(--cta-glow-size);
  bottom: var(--cta-glow-bottom);
  z-index: var(--cta-glow-z);
  background: radial-gradient(circle, rgb(var(--cta-glow-rgb) / var(--cta-glow-alpha)) 0%, transparent 70%);
  pointer-events: none;
}
.alco .alco-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

.alco .alco-cta :where(h2) { font-size: var(--cta-title-size); font-weight: 700; position: relative; }
.alco .alco-cta :where(p) { color: var(--alco-text-2); font-size: var(--cta-text-size); position: relative; }
/* margins: longhands per skin (the other side stays the theme's) */
.alco-skin-content .alco-cta :where(h2) { margin-bottom: 12px; }
.alco-skin-content .alco-cta :where(p) { margin-bottom: 32px; }
.alco-skin-landing .alco-cta :where(p) { margin-top: 14px; }

/* Play badge */
.alco .alco-cta-badges { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; margin-top: var(--cta-badges-gap); }
.alco-skin-content .alco-cta-badges a { display: inline-block; transition: transform 0.2s; }
.alco-skin-content .alco-cta-badges a:hover { transform: scale(1.03); }
/* 532 × 206 at most, scaled down with its aspect ratio on a narrow phone (a fixed height stretched it) */
.alco .alco-cta-badges img { width: 532px; max-width: 100%; height: auto; aspect-ratio: 646 / 250; }
.alco-skin-landing .alco-cta-badges img { mix-blend-mode: var(--alco-badge-blend); transition: transform .2s ease; }
.alco-skin-landing .alco-cta-badges a:hover img { transform: scale(1.04); }

/* Quiet share line under the Play badge (country limit pages); scoped past the CTA's own <p> rules */
.alco .alco-cta .alco-cta-share {
  margin: 20px 0 0;
  font-size: 0.95rem;
  color: var(--alco-text-3);
  position: relative;
}
.alco-cta-share a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--alco-link);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--alco-cyan-rgb) / 0.35);
  transition: border-color 0.2s;
}
.alco-cta-share a:hover { border-bottom-color: var(--alco-link); }
.alco-wa-icon {
  width: 18px;
  height: 18px;
  color: var(--alco-whatsapp);
  flex-shrink: 0;
}

/* @ 20-components/11-disclaimer.css */
/* ---------- DISCLAIMER ----------
   Small print at the bottom of every page (site/components.mjs disclaimer). The skin sets its
   spacing, rule, size, measure and background (--disclaimer-*). */
.alco .alco-disclaimer { padding: var(--disclaimer-pad); border-top: 1px solid var(--disclaimer-rule); background: var(--disclaimer-bg); text-align: center; }
.alco .alco-disclaimer :where(p) { font-size: var(--disclaimer-size); max-width: var(--disclaimer-width); margin: 0 auto; color: var(--alco-text-3); line-height: var(--disclaimer-leading); }

/* @ 20-components/12-lightbox.css */
/* ---------- LIGHTBOX (landing) ---------- full-screen screenshot viewer, above the theme header */
.alco-skin-landing .alco-lightbox { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background: var(--alco-scrim); align-items: center; justify-content: center; }
/* the scrim is near-opaque on its own; the blur behind it is an enhancement */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .alco-skin-landing .alco-lightbox { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.alco-skin-landing .alco-lightbox.alco-open { display: flex; }
.alco-skin-landing .alco-lightbox img { max-width: 90vw; max-height: 86vh; border-radius: 14px; box-shadow: var(--alco-shadow-lg); }
.alco-skin-landing .alco-lightbox-close { position: absolute; top: 22px; right: 28px; font-size: 2.2rem; color: var(--alco-on-scrim); cursor: pointer; line-height: 1; }
.alco-skin-landing .alco-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; color: var(--alco-on-scrim); cursor: pointer; padding: 0 20px; opacity: 0.75; transition: opacity .15s; user-select: none; }
.alco-skin-landing .alco-lightbox-nav:hover { opacity: 1; }
.alco-skin-landing .alco-lightbox-prev { left: 8px; } .alco-skin-landing .alco-lightbox-next { right: 8px; }
/* the controls are buttons (keyboard, screen readers): no button chrome */
.alco-skin-landing .alco-lightbox :where(button) { background: none; border: 0; font: inherit; line-height: 1; }
.alco-skin-landing .alco-lightbox :where(button:focus-visible) { outline: 2px solid var(--alco-on-scrim); outline-offset: 2px; }

/* @ 20-components/13-facts.css */
/* ---------- NUMBERED FACTS (landing) ---------- */
.alco-skin-landing .alco-facts { max-width: 800px; margin: 0; display: grid; gap: 28px; }
.alco-skin-landing .alco-fact { display: flex; gap: 22px; align-items: flex-start; }
.alco-skin-landing .alco-fact-num { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--alco-link); flex: 0 0 auto; min-width: 46px; }
.alco-skin-landing .alco-fact h3 { font-size: 1.1rem; margin: 2px 0 6px; }
.alco-skin-landing .alco-fact p { color: var(--alco-text-2); font-size: 0.97rem; line-height: 1.6; }

/* @ 20-components/14-article.css */
/* ---------- ARTICLE ----------
   Long-form text column. The skin sets the measure, sizes and rhythm (--article-*); everything
   else is one rule. Element parts sit in :where() so the text modifiers below (.alco-note …) and
   the callout's own paragraph rules still override them. */
.alco .alco-article { max-width: var(--article-width); margin: 0 auto; }
/* An article in a page container (.alco-container.alco-article) is a --article-wide column with
   ONE left edge: its text keeps the measure (--article-width, ~70 characters) and the parts that
   carry data — tables, charts, summary boxes, fact rows — run the full column width, so a heading
   and the table under it start on the same line (user, 2026-10-12: use the width, keep a margin).
   (0,3,0): over a component's own margin shorthand (0,2,0). */
.alco .alco-container.alco-article { max-width: calc(var(--article-wide) + 2 * var(--global-content-edge-padding, 1.5rem)); }
.alco .alco-container.alco-article > * { max-width: var(--article-width); margin-left: 0; margin-right: auto; }
.alco .alco-container.alco-article > :where(.alco-table-scroll, .alco-table-frame, .alco-table-tools, .alco-chart, .alco-summary, .alco-keyfacts, .alco-facts, .alco-wide) { max-width: none; }
/* the country row sits on the column's edge like the text under it (it was centred on the page) */
.alco .alco-container.alco-article > .alco-pagenav { text-align: left; }
.alco .alco-article :where(h2) { font-size: var(--article-h2-size); color: var(--alco-text); text-align: left; margin: 48px 0 16px; }
/* the site script puts the on-this-page list (js/05-toc.js) in front of the first heading */
.alco .alco-article :where(h2:first-child, .alco-toc + h2) { margin-top: 0; }
.alco .alco-article :where(h3) { font-size: var(--article-h3-size); color: var(--article-h3-color); font-weight: var(--article-h3-weight); text-align: left; margin: 28px 0 8px; }
.alco .alco-article :where(p, ul, ol) {
  color: var(--alco-text-2);
  font-size: var(--article-text-size);
  line-height: var(--article-leading);
  text-align: left;
  margin-bottom: 16px;
}
.alco .alco-article :where(ul, ol) { padding-left: var(--article-list-indent); }
.alco .alco-article :where(li) { margin-bottom: 8px; }
/* Emphasis in the landing skin = bold only, in the muted body colour (no glaring white); an
   inline-coloured emphasis (a tone class) keeps its colour */
.alco-skin-landing .alco-article :where(strong) { font-weight: 600; color: inherit; }

/* Small print under a table or a figure: source, method, "illustrative" */
.alco .alco-note { font-size: 0.85rem; color: var(--alco-text-3); margin-top: 8px; }
/* The "more on this" line after a box */
.alco .alco-related { margin-top: 24px; }

/* @ 20-components/15-callout.css */
/* ---------- CALLOUT ----------
   Boxed aside inside an article. One component; the skin paints the box (--callout-*): the content
   skin a card, the landing skin an accent band with a bar on the left. */
.alco .alco-callout {
  border: 1px solid var(--callout-border);
  border-left: var(--callout-bar);
  border-radius: var(--callout-radius);
  background: var(--callout-bg);
  padding: var(--callout-pad);
  margin: 24px 0;
}
/* A box's own content: paragraphs 8px apart (the landing skin's without the article's bottom
   margin), nothing hanging below the last one */
.alco-skin-landing .alco-callout > :where(p) { margin: 0; }
.alco .alco-callout > :where(p + p) { margin-top: 8px; }
.alco .alco-callout > :where(:last-child) { margin-bottom: 0; }
.alco-skin-landing .alco-callout :where(table) { margin: 0; }
/* Summary box: centred, led by a short bold line */
.alco .alco-callout.alco-summary, .alco .alco-summary > :where(p) { text-align: center; } /* its <p> too: the article sets text-align on every <p> */
.alco .alco-callout .alco-callout-title { font-size: 1.1rem; color: var(--alco-text); margin-bottom: 8px; }
/* Box title. Inside a content article a box's title takes the article's h3 style (so this rule is
   fenced out of content articles); a landing callout keeps its own. */
.alco-skin-content .alco-callout :where(h3):where(:not(.alco-article h3)), .alco-skin-landing .alco-callout :where(h3) { color: var(--alco-text); font-size: var(--callout-title-size); text-align: left; }
.alco-skin-content .alco-callout :where(h3):where(:not(.alco-article h3)) { margin-bottom: 16px; }
.alco-skin-landing .alco-callout :where(h3) { margin: 0 0 12px; }
/* A warning paragraph (.alco-tone-caution on the whole <p>): only its lead word carries the amber;
   a full paragraph in amber read poorly (PHASE 21). (0,3,0) over the tone class (0,2,0). */
.alco .alco-callout > p.alco-tone-caution { color: var(--alco-text-2); }
.alco .alco-callout > p.alco-tone-caution strong:first-child { color: var(--alco-caution); }

/* @ 20-components/16-compare.css */
/* ---------- COMPARE ----------
   Two side-by-side boxes (e.g. weight-based formulas vs. body composition). The skin sets the gap,
   corners, padding, type and the box paint (--compare-*). Stacks on narrow screens. */
.alco .alco-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--compare-gap); margin: 24px 0; }
.alco .alco-compare-col { border-radius: var(--compare-radius); padding: var(--compare-pad); background: var(--compare-bg); border: 1px solid var(--compare-border); }
.alco .alco-compare-col :where(h3) { font-size: 1rem; font-weight: var(--compare-title-weight); text-align: left; margin: 0 0 12px; }
.alco .alco-compare-col :where(ul) { padding-left: var(--compare-list-indent); margin: 0; }
.alco .alco-compare-col :where(li) { color: var(--alco-text-2); font-size: var(--compare-text-size); line-height: var(--compare-leading); margin-bottom: 6px; }
@media (max-width: 768px) { .alco-skin-content .alco-compare { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .alco-skin-landing .alco-compare { grid-template-columns: 1fr; } }

/* @ 20-components/17-bac-levels.css */
/* ---------- BAC LEVEL COLOURS ----------
   Risk colour of a table cell (generated tables: gen-legal-limit-pages.mjs, blog-gen.mjs) or of any
   text. A band class (.alco-bac-*) = the tone + its weight; a tone class (.alco-tone-*) = the colour
   alone. Scoped to the page root (0,2,0) so they beat the table's cell colour (.alco-table tbody td,
   0,1,2) and article / box heading colours — until 2026-10-11 the band colours of the generated
   tables never showed (the cell colour won). */
.alco :is(.alco-tone-safe, .alco-bac-safe) { color: var(--alco-safe); }
.alco .alco-bac-low { color: var(--alco-low); }
.alco :is(.alco-tone-caution, .alco-bac-caution) { color: var(--alco-caution); }
.alco :is(.alco-tone-danger, .alco-bac-danger) { color: var(--alco-danger); }
.alco :is(.alco-tone-severe, .alco-bac-severe) { color: var(--alco-severe); }
.alco .alco-bac-caution { font-weight: 600; }
.alco :is(.alco-bac-danger, .alco-bac-severe) { font-weight: 700; }

/* @ 20-components/18-form.css */
/* ---------- FORM (content: bug report) — scoped to the base like every component: unscoped, the submit
   button (0,1,0) lost its hover/focus to Kadence's `button:hover` (0,1,1) until 2026-10-12 ---------- */
.alco .alco-form-group {
  margin-bottom: 20px;
}
.alco .alco-form-group label {
  display: block;
  color: var(--alco-text);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.alco .alco-form-group .alco-form-hint {
  display: block;
  color: var(--alco-text-3);
  font-size: 0.8rem;
  margin-bottom: 6px;
}
.alco .alco-form-group input[type="text"],
.alco .alco-form-group input[type="email"],
.alco .alco-form-group select,
.alco .alco-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--alco-bg) !important;
  border: 1px solid var(--alco-field-border) !important;
  border-radius: 10px;
  color: var(--alco-text) !important;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.alco .alco-form-group input:focus,
.alco .alco-form-group select:focus,
.alco .alco-form-group textarea:focus {
  outline: none;
  border-color: var(--alco-link);
  box-shadow: 0 0 0 2px rgb(var(--alco-cyan-rgb) / 0.15);
}
.alco .alco-form-group input::placeholder,
.alco .alco-form-group textarea::placeholder {
  color: var(--alco-text-3);
}
.alco .alco-form-group select {
  background-image: var(--alco-select-arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.alco .alco-form-group select option {
  background: var(--alco-option-bg);
  color: var(--alco-option-text);
}
.alco .alco-form-group select option:checked {
  background: var(--alco-option-checked);
}
.alco .alco-form-group textarea {
  min-height: 120px;
  resize: vertical;
}
.alco .alco-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.alco .alco-form-submit {
  display: inline-block;
  padding: 14px 48px;
  background: linear-gradient(135deg, rgb(var(--alco-cyan-rgb)), var(--alco-cyan-deep));
  color: var(--alco-on-cyan);
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
  margin-top: 8px;
}
.alco .alco-form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(var(--alco-cyan-rgb) / 0.3);
}
.alco .alco-form-required {
  color: var(--alco-danger);
}
@media (max-width: 768px) { .alco .alco-form-row { grid-template-columns: 1fr; } }

/* @ 20-components/19-calc.css */
/* ---------- WEB CALCULATOR (landing: /bac-calculator/, 4 languages) ----------
   Moved here from the calculator bundle (web-calc/calc.css, injected at runtime) on 2026-10-11:
   one palette, and the page is styled before the script runs (no flash; FAQ / feature cards
   styled without JS). The markup is web-calc/page.mjs; --risk is set by ui.ts per result. */
.alco-skin-landing .alco-calc{display:grid;gap:0;max-width:none;margin:0}
/* PHASE 21: from 1024 px the form on the left and the result beside it; the result card is sticky
   in a side column as tall as the form + the app banner + the note under the form (Fable review: a
   sticky column holding the banner too was taller than a laptop screen once a result showed).
   Below 1024 px: form → result → banner → note. */
@media (min-width:1024px){
  .alco-skin-landing .alco-calc{grid-template-columns:minmax(0,1fr) minmax(320px,420px);grid-template-areas:"main side" "demo side" "note side";column-gap:28px;align-items:start}
  .alco-skin-landing .alco-calc-main{grid-area:main;min-width:0}
  .alco-skin-landing .alco-calc-side{grid-area:side;align-self:stretch}
  .alco-skin-landing .alco-calc-side .alco-result{position:sticky;top:96px}
  .alco-skin-landing .alco-calc > .alco-calc-demo{grid-area:demo}
  .alco-skin-landing .alco-calc > .alco-calc-note{grid-area:note;text-align:left}
}
/* "Calculate" scrolls to the result: on a wide screen that is UP, where the sticky header reappears */
.alco-skin-landing .alco-result{scroll-margin-top:96px}
}
.alco-skin-landing .alco-calc-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:rgb(var(--alco-accent-rgb) / .55);border:1px solid rgb(var(--alco-link-rgb) / .35);border-radius:var(--alco-radius-sm);padding:14px 18px;margin:0 0 16px}
.alco-skin-landing .alco-calc-demo p{margin:0;color:var(--alco-text);font-size:.95rem;line-height:1.45}
.alco-skin-landing .alco-calc-demo p strong{color:var(--alco-link-hover)}
.alco-skin-landing .alco-calc-card{background:var(--alco-card-solid);border:1px solid var(--alco-border);border-radius:var(--alco-radius);padding:24px;margin:0 0 20px;box-shadow:var(--alco-shadow-sm)}
.alco-skin-landing .alco-calc-card h2{font-size:1.25rem;margin:0 0 18px}
.alco-skin-landing .alco-calc-card h2 span{color:var(--alco-text-3);font-weight:400;font-size:.9rem;margin-left:8px;letter-spacing:0}
.alco-skin-landing .alco-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.alco-skin-landing .alco-calc-field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px}
.alco-skin-landing .alco-calc-field .alco-hint{display:block;color:var(--alco-text-3);font-size:.78rem;font-weight:400;margin-top:5px}
.alco-skin-landing .alco-calc input[type="number"],.alco-skin-landing .alco-calc select{width:100%;padding:12px 14px;background:var(--alco-bg);border:1px solid var(--alco-field-border);border-radius:10px;color:var(--alco-text);font:inherit;font-size:1rem;-moz-appearance:textfield;-webkit-appearance:none;appearance:none}
.alco-skin-landing .alco-calc input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none}
.alco-skin-landing .alco-calc input:focus,.alco-skin-landing .alco-calc select:focus{outline:none;border-color:var(--alco-link);box-shadow:0 0 0 3px rgb(var(--alco-link-rgb) / .18)}
.alco-skin-landing .alco-calc select{background-image:var(--alco-select-arrow);background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
.alco-skin-landing .alco-calc select option{background:var(--alco-menu-bg);color:var(--alco-text)}
.alco-skin-landing .alco-calc-inline{display:flex;gap:10px}
.alco-skin-landing .alco-calc-inline>*{flex:1;min-width:0}
.alco-skin-landing .alco-seg{display:inline-flex;background:var(--alco-bg);border:1px solid var(--alco-border);border-radius:10px;padding:3px;gap:3px}
.alco-skin-landing .alco-seg button{background:transparent;border:0;color:var(--alco-text-2);padding:9px 16px;border-radius:8px;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.alco-skin-landing .alco-seg button[aria-pressed="true"]{background:var(--alco-link);color:var(--alco-on-link)}
.alco-skin-landing .alco-seg.alco-seg-block{display:flex}
.alco-skin-landing .alco-seg.alco-seg-block button{flex:1}
.alco-skin-landing .alco-drinks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.alco-skin-landing .alco-drink{background:var(--alco-bg);border:1px solid var(--alco-border);border-radius:14px;padding:14px 12px;text-align:center;transition:border-color .15s,box-shadow .15s}
.alco-skin-landing .alco-drink.alco-has{border-color:var(--alco-link);box-shadow:0 0 0 1px rgb(var(--alco-link-rgb) / .35)}
.alco-skin-landing .alco-drink-icon{font-size:1.7rem;line-height:1}
.alco-skin-landing .alco-drink-name{font-weight:600;margin-top:6px}
.alco-skin-landing .alco-drink-size{color:var(--alco-text-3);font-size:.8rem;margin-bottom:10px}
.alco-skin-landing .alco-counter{display:inline-flex;align-items:center;gap:10px}
.alco-skin-landing .alco-counter button{width:34px;height:34px;border-radius:50%;border:1px solid rgb(var(--alco-link-rgb) / .4);background:transparent;color:var(--alco-link);font-size:1.25rem;line-height:1;cursor:pointer;font-family:inherit;transition:background .15s}
.alco-skin-landing .alco-counter button:hover{background:rgb(var(--alco-link-rgb) / .14)}
.alco-skin-landing .alco-counter output{min-width:22px;font-weight:700;font-size:1.1rem;font-variant-numeric:tabular-nums}
.alco-skin-landing .alco-custom{margin-top:12px;background:var(--alco-bg);border:1px dashed rgb(var(--alco-link-rgb) / .35);border-radius:14px;padding:14px}
.alco-skin-landing .alco-custom-row{display:grid;grid-template-columns:1.1fr .9fr 1fr auto;gap:10px;align-items:end}
.alco-skin-landing .alco-custom-row .alco-calc-field label{font-size:.8rem;color:var(--alco-text-2)}
.alco-skin-landing .alco-calc-btn{display:inline-block;background:var(--alco-link);color:var(--alco-on-link)!important;padding:13px 26px;border-radius:12px;border:0;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap}
.alco-skin-landing .alco-calc-btn:hover{background:var(--alco-link-hover);transform:translateY(-1px)}
.alco-skin-landing .alco-calc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.alco-skin-landing .alco-calc-err{color:var(--alco-error);font-size:.9rem;margin:0}
.alco-skin-landing .alco-result{background:var(--alco-card-solid);border:1px solid var(--alco-border);border-radius:var(--alco-radius);padding:28px 24px;margin:0 0 20px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--alco-shadow)}
.alco-skin-landing .alco-result::before{content:'';position:absolute;top:0;right:0;left:0;height:4px;background:var(--risk,var(--alco-safe))}
.alco-skin-landing .alco-result-label{color:var(--alco-text-2);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.alco-skin-landing .alco-result-bac{font-size:4.2rem;font-weight:800;line-height:1.05;margin:6px 0 2px;color:var(--risk,var(--alco-safe));font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.alco-skin-landing .alco-result-bac small{font-size:1.4rem;font-weight:600;color:var(--alco-text-2);margin-left:4px}
.alco-skin-landing .alco-result-risk{display:inline-block;margin-top:4px;padding:5px 14px;border-radius:999px;font-weight:700;font-size:.82rem;letter-spacing:.05em;color:var(--risk,var(--alco-safe))}
/* the tinted pill behind the risk label: an enhancement (color-mix, 2023+); without it the label reads on the card */
@supports (background: color-mix(in srgb, red 50%, blue)){.alco-skin-landing .alco-result-risk{background:color-mix(in srgb,var(--risk,var(--alco-safe)) 18%,transparent)}}
.alco-skin-landing .alco-result-range{margin:14px 0 0;color:var(--alco-text-2);font-size:.9rem}
.alco-skin-landing .alco-result-range strong{color:var(--alco-link-hover)}
.alco-skin-landing .alco-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;text-align:left}
.alco-skin-landing .alco-stat{background:var(--alco-bg);border-radius:12px;padding:12px 14px}
.alco-skin-landing .alco-stat-k{color:var(--alco-text-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.alco-skin-landing .alco-stat-v{font-weight:700;font-size:1.1rem;margin-top:2px;font-variant-numeric:tabular-nums}
.alco-skin-landing .alco-stat-s{color:var(--alco-text-2);font-size:.8rem}
.alco-skin-landing .alco-result-cta{margin-top:22px;background:rgb(var(--alco-accent-rgb) / .5);border:1px solid rgb(var(--alco-link-rgb) / .25);border-radius:14px;padding:16px 18px;text-align:left;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.alco-skin-landing .alco-result-cta p{margin:0;line-height:1.45}
.alco-skin-landing .alco-result-cta p span{display:block;color:var(--alco-text-2);font-size:.9rem;margin-top:2px}
.alco-skin-landing .alco-result-empty{color:var(--alco-text-3);padding:8px 0}
.alco-skin-landing .alco-calc-note{color:var(--alco-text-3);font-size:.8rem;margin:10px 0 0;text-align:center}
.alco-skin-landing .alco-app-features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.alco-skin-landing .alco-app-features .alco-card{padding:20px}

.alco-skin-landing .alco-app-features h3{font-size:1rem;margin:10px 0 4px}
.alco-skin-landing .alco-app-features p{font-size:.92rem;margin:0}
.alco-skin-landing .alco-app-features p em{color:var(--alco-link-hover);font-style:normal;font-weight:600}
.alco-skin-landing .alco-faq details{background:var(--alco-card-solid);border:1px solid var(--alco-border);border-radius:12px;padding:0 18px;margin:0 0 10px}
.alco-skin-landing .alco-faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.alco-skin-landing .alco-faq summary::-webkit-details-marker{display:none}
/* PHASE 21: a chevron on the right (the expected place), turning when open — it was a "+" on the left */
.alco-skin-landing .alco-faq summary::after{content:'';flex:0 0 auto;width:9px;height:9px;margin:6px 4px 0 0;border-right:2px solid var(--alco-link);border-bottom:2px solid var(--alco-link);transform:rotate(45deg);transition:transform .2s}
.alco-skin-landing .alco-faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.alco-skin-landing .alco-faq details p{color:var(--alco-text-2);margin:0 0 14px;line-height:1.6;font-size:.98rem}
@media (max-width:640px){
  .alco-skin-landing .alco-calc-grid{grid-template-columns:1fr}
  .alco-skin-landing .alco-drinks{grid-template-columns:repeat(2,1fr)}
  .alco-skin-landing .alco-custom-row{grid-template-columns:1fr 1fr}
  .alco-skin-landing .alco-result-bac{font-size:3.2rem}
  .alco-skin-landing .alco-result-stats{grid-template-columns:1fr}
  .alco-skin-landing .alco-app-features{grid-template-columns:1fr}
  .alco-skin-landing .alco-calc-demo{justify-content:center;text-align:center}
}
/* the calculator section sits close under the title band; second rows of a card step down */
.alco-skin-landing .alco-calc-section{padding-top:8px}
.alco-skin-landing .alco-custom + .alco-calc-grid{margin-top:18px}
.alco-skin-landing .alco-result-stats + .alco-result-stats{margin-top:12px}

/* Example values, not entries (PHASE 21: the placeholders 30 / 170 / 5 ft read as filled-in values):
   italic in the faintest text colour — still AA (every text token passes on every surface) */
.alco-skin-landing .alco-calc input::placeholder{color:var(--alco-text-3);font-style:italic;opacity:1}

/* @ 20-components/20-pagenav.css */
/* ---------- PAGE NAV ----------
   A one-line "see also" row of sibling pages (the country limit pages: gen-legal-limit-pages.mjs);
   the current page is marked aria-current and is not a link. */
.alco-skin-content .alco-pagenav { text-align: center; font-size: 0.95rem; margin: 0 0 24px; }
.alco-pagenav-label { color: var(--alco-text-3); }
.alco-pagenav [aria-current] { color: var(--alco-text); }

/* @ 20-components/21-chart.css */
/* ---------- INLINE SVG: CHARTS AND ICONS ----------
   An inline SVG paints with currentColor; the colour is a palette class on the element, so charts
   and icons follow the theme like text does (until 2026-10-12 they were dark-mode literals: white
   axis labels on the light theme's white). Marker rings take the chart panel's colour. */
.alco .alco-chart { width: 100%; max-width: 800px; margin: 0 auto 32px; display: block; }
.alco .alco-c-text { color: var(--alco-text); }
.alco .alco-c-text-2 { color: var(--alco-text-2); }
.alco .alco-c-text-3 { color: var(--alco-text-3); }
.alco .alco-c-link { color: var(--alco-link); }
.alco .alco-c-safe { color: var(--alco-safe); }
.alco .alco-c-low { color: var(--alco-low); }
.alco .alco-c-caution { color: var(--alco-caution); }
.alco .alco-c-danger { color: var(--alco-danger); }
.alco .alco-c-severe { color: var(--alco-severe); }
.alco .alco-c-marker { color: var(--alco-marker); }
.alco .alco-c-panel { color: var(--alco-card-solid); }
.alco .alco-c-grid { color: var(--alco-border); }
.alco .alco-ring { stroke: var(--alco-card-solid); }
/* A bar chart (blog-gen `bars`): its own measure — wide enough to read, never stretched across the
   column (the text inside scales with the drawing) */
.alco .alco-chart.alco-bars { max-width: 480px; margin: 8px 0 28px; }

/* @ 20-components/22-print.css */
/* ---------- PRINT ----------
   The palette prints light (css/build.mjs PRINT_LIGHT); what only works on a screen is left out. */
@media print {
  #gpufx, .alco-lightbox, .alco-theme-toggle-item { display: none !important; }
}

/* @ 20-components/23-toc.css */
/* ---------- ON-THIS-PAGE NAVIGATION ----------
   Built by the site script (js/05-toc.js) for an article with three or more h2: .alco-has-toc on the
   article, nav.alco-toc as its first child. From 1200 px the article takes the full container and
   reserves a sidebar on its right (padding), where the list stays in view while the page scrolls;
   below that it is a folded "On this page" box at the top of the article (the visitor opens it). (0,4,0): over the article's
   child rule (0,3,0) in 14-article.css. */
/* below 1200 px: a folded box at the top of the article */
.alco .alco-container.alco-article > .alco-toc { margin: 0 0 32px; max-width: var(--article-width); }
.alco .alco-toc details { border: 1px solid var(--alco-border); border-radius: var(--alco-radius-sm); background: var(--alco-card-solid); padding: 0 16px; }
.alco .alco-toc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 12px 0; cursor: pointer; list-style: none; }
.alco .alco-toc summary::-webkit-details-marker { display: none; }
.alco .alco-toc summary::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--alco-link); border-bottom: 2px solid var(--alco-link); transform: rotate(45deg); transition: transform .2s; }
.alco .alco-toc details[open] summary::after { transform: rotate(-135deg); }
.alco .alco-toc details ol { padding-bottom: 12px; }
@media (min-width: 1200px) {
  .alco .alco-container.alco-article.alco-has-toc {
    max-width: var(--global-content-width, 1290px);
    position: relative;
    padding-right: calc(var(--global-content-edge-padding, 1.5rem) + var(--toc-width) + var(--toc-gap));
  }
  .alco .alco-container.alco-article > .alco-toc {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--global-content-edge-padding, 1.5rem);
    width: var(--toc-width);
    max-width: none;
    margin: 0;
  }
  .alco .alco-toc-inner { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding-left: 20px; border-left: 1px solid var(--alco-border); }
  /* the sidebar: always open (05-toc.js), no box, no summary */
  .alco .alco-toc details { border: 0; border-radius: 0; background: none; padding: 0; }
  .alco .alco-toc details[open] summary { display: block; padding: 0; margin-bottom: 12px; cursor: default; pointer-events: none; }
  .alco .alco-toc details[open] summary::after { content: none; }
  /* without JS the list stays folded on a wide screen too: its summary is the way in */
}
.alco { --toc-width: 248px; --toc-gap: 72px; }

.alco .alco-toc-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alco-text-3); margin-bottom: 12px; }
/* li / a: (0,2,1) / (0,2,2), after the article's list rules and the running-text underline */
.alco .alco-toc ol { list-style: none; display: grid; gap: 2px; padding-left: 0; margin: 0; }
.alco .alco-toc li { margin: 0; }
.alco .alco-toc li a { display: block; padding: 6px 0; font-size: 0.9rem; line-height: 1.4; color: var(--alco-text-2); text-decoration: none; transition: color 0.15s; }
.alco .alco-toc li a:hover, .alco .alco-toc li a[aria-current] { color: var(--alco-link); }
.alco .alco-toc li a[aria-current] { font-weight: 600; }

/* @ 20-components/24-chip.css */
/* ---------- CHIP ----------
   A small marked value — an exception in a limit table (gen-legal-limit-pages.mjs). The tone class
   names the risk colour (--chip-tone); the chip is outlined in it and, where the browser can mix
   colours (Chrome 111 / Safari 16.2), tinted with it. The digits stay in the strongest text colour:
   tone-coloured digits on a tint of the same tone fell to 4.08:1 in light mode (amber, Lighthouse
   2026-10-12) — under WCAG AA for 15 px text. */
.alco .alco-chip { --chip-tone: var(--alco-text-2); display: inline-block; padding: 1px 8px; border: 1px solid var(--chip-tone); border-radius: 6px; color: var(--alco-text); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; }
.alco .alco-chip-low { --chip-tone: var(--alco-low); }
.alco .alco-chip-caution { --chip-tone: var(--alco-caution); }
.alco .alco-chip-danger { --chip-tone: var(--alco-danger); }
.alco .alco-chip-severe { --chip-tone: var(--alco-severe); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .alco .alco-chip { background: color-mix(in srgb, var(--chip-tone) 16%, transparent); }
}

/* @ 20-components/25-keyfacts.css */
/* ---------- KEY FACTS ----------
   The row of facts at the top of a limits page (gen-legal-limit-pages.mjs `keyFacts`, PHASE 21 — it
   replaced the pipe-separated Quick Summary sentence). One tile per fact; the label comes first in
   the markup (read "Utah — 0.05%"), the value is drawn on top, large, in its tone. */
.alco .alco-keyfacts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin: 0 0 40px; padding: 0; }
.alco .alco-keyfact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; margin: 0; padding: 16px 18px; background: var(--alco-card-solid); border: 1px solid var(--alco-border); border-radius: var(--alco-radius-sm); color: var(--alco-text); }
/* no colour of its own: the value keeps its tone class (.alco-tone-*, 17-bac-levels.css) or the tile's text colour */
.alco .alco-keyfact-value { font-size: clamp(1.3rem, 4.6vw, 1.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.alco .alco-keyfact-value small { display: block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0; color: var(--alco-text-2); }
.alco .alco-keyfact-label { font-size: 0.88rem; line-height: 1.4; color: var(--alco-text-2); }

/* @ 20-components/26-app-more.css */
/* ---------- "ALSO IN THE APP" (calculator page, web-calc/locales/*.mjs) ----------
   Six more things the app does, under the six feature cards: a quiet two-column list, an icon and the
   lead words in bold per item (user's choice, variant A, 2026-10-12 — it was one run-on paragraph
   with "·" separators). One column on a phone. */
.alco .alco-app-more { margin-top: 28px; padding: 24px 28px; background: var(--alco-card-solid); border: 1px solid var(--alco-border); border-radius: var(--alco-radius); }
.alco .alco-app-more h3 { margin: 0 0 16px; font-size: 1.05rem; font-weight: 700; color: var(--alco-text); text-align: left; }
.alco .alco-app-more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px 28px; }
.alco .alco-app-more-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--alco-text-2); }
.alco .alco-app-more-list strong { font-weight: 600; color: var(--alco-text); }
.alco .alco-app-more-icon { width: 22px; height: 22px; margin-top: 1px; color: var(--alco-link); }
@media (max-width: 599px) { .alco .alco-app-more { padding: 20px; } }

/* @ 20-components/27-get-app.css */
/* ---------- "GET THE APP" ICON (header button, snippet #28; calculator app links) ----------
   The app's BAC gauge ring, open at the bottom, with the arrow arriving through the gap (user's
   choice 2026-10-12 — the generic download tray read as a file from a dubious download site). On
   hover, keyboard focus or a tap the arrow drops into the gap and the ring lights up once; no motion
   for people who ask for less. Unscoped (no .alco): the header button sits in the theme's markup. Markup: GET_APP_ICON (site/components.mjs) = snippet #28's $icon. */
.alco-get-app-icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.alco-get-app-ring { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  a:is(:hover, :focus-visible, :active) > .alco-get-app-icon .alco-get-app-arrow { animation: alco-get-app-drop 0.65s ease-out; }
  a:is(:hover, :focus-visible, :active) > .alco-get-app-icon .alco-get-app-ring { animation: alco-get-app-glow 0.65s ease-out; }
  @keyframes alco-get-app-drop { 0% { transform: translateY(0); } 30% { transform: translateY(-3px); } 65% { transform: translateY(2px); } 100% { transform: translateY(0); } }
  @keyframes alco-get-app-glow { 0%, 45% { opacity: 0.55; } 70% { opacity: 1; } 100% { opacity: 0.55; } }
}
/* the calculator's app links: a pill with the icon, like the header button */
.alco-skin-landing .alco-calc-btn.alco-get-app { display: inline-flex; align-items: center; gap: 0.5em; padding: 12px 24px 12px 20px; border-radius: 999px; }

/* @ 40-kadence/01-layout.css */
/* ---------- KADENCE OVERRIDE ---------- */
.entry-content-wrap, .content-wrap, .site-main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.entry.single-entry {
  padding: 0 !important;
  margin: 0 !important;
}
.content-container.site-container {
  max-width: 100% !important;
  padding: 0 !important;
}
/* The rule above is for our full-width pages (.alco). The blog index, category archives and
   search use Kadence's own post loop, which has no inner container — give their margins back,
   aligned with the header (Kadence content width + edge padding). */
.blog .content-container.site-container,
.archive .content-container.site-container,
.search .content-container.site-container {
  max-width: var(--global-content-width, 1290px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--global-content-edge-padding, 1.5rem) !important;
}
/* Sticky header (Kadence theme mods, snippet #24): the stuck bar has the page's own background, so
   a faint edge separates it from the content (themed below); in-page anchors land below the 60px
   stuck bar. */
html { scroll-padding-top: 76px; }

/* Footer: the top row is a 3-column Kadence row with only the legal menu in column 1 (2 and 3 are
   empty in every language), so the menu was squeezed into a third of the width and wrapped in
   es/fr (463 / 554 px vs 394 px) while the copyright below sits centred on the page. One full-width,
   centred column instead. If a widget is ever added to section 2 or 3, drop the display:none. */
#colophon .site-top-footer-inner-wrap.site-footer-row-columns-3 { grid-template-columns: 1fr !important; }
#colophon .site-footer-top-section-2, #colophon .site-footer-top-section-3 { display: none !important; }
#colophon .site-footer-top-section-1 .footer-navigation { justify-content: center; }
/* Kadence's footer is static, so the fixed particle canvas (z-index 0, 20-components/01-fx.css)
   painted over its text; lift it above the canvas like our own main and footer */
#colophon { position: relative; z-index: 1; }

/* @ 40-kadence/02-theme.css */
/* ---------- KADENCE THEME SURFACES ----------
   Kadence writes these backgrounds as literals (Customizer) or leaves them to its own defaults, so
   they are bound to the palette here. Theme-agnostic: the tokens carry dark/light. */
body, .content-bg, body.content-style-unboxed .site { background: var(--alco-bg) !important; }
.transparent-header #wrapper #masthead { background: var(--alco-header-bg) !important; }
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner { background: var(--alco-bg) !important; }
.kadence-sticky-header.item-is-stuck { box-shadow: 0 1px 0 var(--alco-stuck-edge), 0 6px 16px var(--alco-stuck-shadow) !important; }
/* Archive title band (Blog, categories): Kadence paints it palette7 (muted text colour) — a surface instead */
.entry-hero-container-inner { background: var(--alco-surface) !important; }
/* The logo is an opaque dark square: shown as an app icon */
.custom-logo { border-radius: 22%; }

/* Mobile drawer: Kadence's own near-black panel → the page background; links in text colour,
   the current page in the accent; hairlines from the palette */
#mobile-drawer .drawer-inner { background: var(--alco-bg) !important; }
#mobile-drawer .drawer-header .drawer-toggle,
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap,
.mobile-navigation .drawer-sub-toggle { color: var(--alco-text) !important; }
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap { color: var(--alco-link) !important; }
.mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
.mobile-navigation ul li:not(.menu-item-has-children) a,
.mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button { border-color: var(--alco-border) !important; }

/* Mobile language switcher: the links are a 16px flag — WCAG 2.5.8 wants a 24px target */
.mobile-navigation a[href="#pll_switcher"], .mobile-navigation .lang-item > a { display: block; min-width: 48px; }

/* Desktop "open sub-menu" arrows: 16px wide in Kadence — WCAG 2.5.8 wants a 24px target */
.header-navigation .dropdown-nav-special-toggle { min-width: 24px; min-height: 24px; }

/* Desktop dropdown: hovered / current item was palette9 on palette4 (white on light grey-blue in
   dark mode, ≈ 2:1) → text on a filled accent */
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a { color: var(--alco-on-link) !important; background: var(--alco-link) !important; }

/* @ 40-kadence/03-theme-toggle.css */
/* ---------- THEME TOGGLE (menu button, snippet #25) ---------- */
.alco-theme-toggle-item { display: flex; align-items: center; }
/* the button needs JS; without it (no data-theme) the system setting rules and the button is hidden */
html:not([data-theme]) .alco-theme-toggle-item { display: none; }
.alco-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 4px; padding: 0 !important;
  background: transparent !important; border: 1px solid var(--alco-stuck-edge) !important;
  border-radius: 50% !important; color: var(--alco-text-2) !important; cursor: pointer;
  box-shadow: none !important;
}
.alco-theme-toggle:is(:hover, :focus-visible) { color: var(--alco-link) !important; border-color: var(--alco-link) !important; }
.alco-theme-toggle svg { width: 18px; height: 18px; display: block; }
.alco-theme-toggle .alco-icon-sun { display: var(--alco-show-in-dark); }
.alco-theme-toggle .alco-icon-moon { display: var(--alco-show-in-light); }
.mobile-navigation .alco-theme-toggle-item { padding: 12px 0; }
/* Drawer: the toggle sits at the right end of the first row (Home) instead of a lone 60 px row near
   the bottom (user, 2026-10-12: "too small to be a menu row of its own"). Rows are 51 px, the button
   36 px → 7 px from the top. The Home link keeps clear of it. */
.mobile-navigation #mobile-menu { position: relative; }
.mobile-navigation #mobile-menu > li.alco-theme-toggle-item { position: absolute; top: 7px; right: 0; z-index: 1; padding: 0; margin: 0; border: 0; }
.mobile-navigation #mobile-menu > li:first-child > a { padding-right: 52px; }

/* @ 40-kadence/04-blog-post.css */
/* ---------- BLOG POST — HIDE KADENCE THEME ELEMENTS ---------- */
.single .post-navigation,
.single .entry-navigation,
.single .nav-links,
.single .entry-related,
.single .related-posts,
.single .wp-block-kadence-advancedheading + .related-posts { display: none !important; }

/* @ 40-kadence/05-header-app.css */
/* ---------- HEADER: ONE ROW + "GET THE APP" (snippet #28) ----------
   The menu items never change (user, 2026-10-12) and must fit on one row. Since the site face is
   Manrope (wider than the system face) the es/fr menus wrapped between 1025 and 1199 px; there the
   items get a little less padding and a slightly smaller size. The app button shows on the desktop
   menu only from the width where, in that language, it still fits on the same row (measured on the
   live header, scripts/website/header-fit.mjs). In the mobile drawer it is the last entry. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .main-navigation .primary-menu-container > ul > li.menu-item:not(.alco-menu-app) > a { padding-left: 0.42em; padding-right: 0.42em; font-size: 15px; }
}
/* French is the longest menu: from 1280 px its items are a little closer (0.6em → 0.5em) so the app
   button with its icon still fits on the row (header-fit.mjs, 2026-10-12). */
@media (min-width: 1280px) {
  html[lang^="fr"] .main-navigation .primary-menu-container > ul > li.menu-item:not(.alco-menu-app) > a { padding-left: 0.5em; padding-right: 0.5em; }
}
.alco-menu-app { display: flex; align-items: center; }
/* (0,5,3): over Kadence's Customizer rule for top-level menu links (.main-navigation
   .primary-menu-container > ul > li.menu-item > a, 0,3,3 — colour and padding) and its :hover (0,4,3).
   In the drawer, over the site's own `.mobile-navigation ul li > a { color … !important }` (02-theme.css).
   Fable review 2026-10-12: the text came out at 1.5:1 (desktop) and 2.4:1 (light drawer). */
.main-navigation .primary-menu-container > ul > li.menu-item.alco-menu-app > a.alco-menu-app-link,
.mobile-navigation ul li.menu-item.alco-menu-app > a.alco-menu-app-link {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 38px; padding: 6px 14px 6px 10px; margin-left: 8px;
  border-radius: 999px; background: var(--alco-link); color: var(--alco-on-link);
  font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; text-decoration: none;
}
.mobile-navigation ul li.menu-item.alco-menu-app > a.alco-menu-app-link { margin: 12px 0 4px; color: var(--alco-on-link) !important; border-bottom: 0 !important; }
.main-navigation .primary-menu-container > ul > li.menu-item.alco-menu-app > a.alco-menu-app-link:hover,
.mobile-navigation ul li.menu-item.alco-menu-app > a.alco-menu-app-link:hover { background: var(--alco-link-strong); color: var(--alco-on-link); }
.alco-menu-app > a.alco-menu-app-link:is(:focus-visible) { outline: 2px solid var(--alco-link); outline-offset: 2px; }
/* desktop: shown only where the menu still fits on one row with it (per language) */
.header-navigation .alco-menu-app { display: none; }
@media (min-width: 1200px) { html[lang^="en"] .header-navigation .alco-menu-app, html[lang^="hi"] .header-navigation .alco-menu-app { display: flex; } }
@media (min-width: 1280px) { html[lang^="es"] .header-navigation .alco-menu-app, html[lang^="fr"] .header-navigation .alco-menu-app { display: flex; } }