/*
   InvoiceNET ERP - the public website.

   One stylesheet, no framework, nothing fetched from a third party.

   THE LOOK IS THE ERP'S OWN. The ERP dresses itself in one of four colour
   families, each light or dark, and a high-contrast one; the website offers
   the same choice with the same colours, so what a visitor sees here is what
   they will work in. The choice is two attributes on <html> - the same two
   the ERP uses:

       data-theme-family      bootstrap | fluent2 | material3 | tailwind3 | fluent2-highcontrast
       data-theme-appearance  light | dark | highcontrast

   They are set before the first paint by the small script in index.html
   (which also remembers the choice), so a page never flashes in the wrong
   colours. With no script at all the page is the first family, light.

   Every colour below is a token. Nothing outside the token blocks names a
   colour, except white on the accent-coloured header, hero and footer.

   Order: tokens (five families), base, buttons, frame (header, theme menu,
   footer), page blocks, the home page, help, forms, pricing, buy, narrow
   screens, motion.
*/

/* ── tokens: Bootstrap blue, light - also what a browser without script shows ── */

:root {
    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bg: radial-gradient(circle at top right, rgba(13, 110, 253, .14), transparent 28%), linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    --bg-solid: #f4f8ff;
    --ground-alt: rgba(13, 110, 253, .05);
    --surface: linear-gradient(145deg, #ffffff 0%, #f7faff 100%);
    --surface-solid: #ffffff;
    --line: rgba(13, 110, 253, .16);
    --line-strong: rgba(13, 110, 253, .32);
    --text: #1b2a41;
    --heading: #14274f;
    --muted: #5f718d;
    --accent: #0d6efd;
    --accent-strong: #0b5ed7;
    --on-accent: #ffffff;
    --pill-bg: #e7f0ff;
    --pill-text: #0d6efd;
    --hero: radial-gradient(circle at top right, rgba(255, 255, 255, .16), transparent 24%), linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    --hero-text: #ffffff;
    --hero-muted: rgba(234, 242, 255, .86);
    --hero-line: rgba(255, 255, 255, .28);
    --hero-glass: rgba(255, 255, 255, .12);
    --foot: rgba(20, 39, 79, .97);
    --shadow: 0 18px 48px rgba(13, 41, 98, .12);
    --shadow-soft: 0 6px 18px rgba(13, 41, 98, .08);
    --focus: rgba(13, 110, 253, .3);
    --field: #ffffff;
    --field-line: #cfdbf3;
    --good: #1b5e20;
    --good-ground: #e8f5e9;
    --bad: #b71c1c;
    --bad-ground: #fde7e7;
    --warn-text: #8d4d11;
    --warn-ground: #fff4e5;
    --warn-line: #ffb74d;
    --info-ground: #e3f2fd;
    --mark: #ffe58a;
    --radius: 14px;
    --radius-sm: 9px;

    /* names the older pages still use */
    --navy: var(--heading);
    --blue: var(--accent);
    --blue-strong: var(--accent-strong);
    --ground: var(--bg-solid);
}

/* What every dark family shares. */
html[data-theme-appearance="dark"] {
    --surface-solid: #172033;
    --ground-alt: rgba(255, 255, 255, .03);
    --on-accent: #0b1526;
    --hero-text: #ffffff;
    --hero-muted: rgba(232, 239, 252, .8);
    --hero-line: rgba(255, 255, 255, .18);
    --hero-glass: rgba(255, 255, 255, .07);
    --shadow: 0 18px 48px rgba(0, 0, 0, .3);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, .22);
    --field: rgba(255, 255, 255, .08);
    --good: #a5d6a7;
    --good-ground: rgba(76, 175, 80, .18);
    --bad: #ef9a9a;
    --bad-ground: rgba(211, 47, 47, .22);
    --warn-text: #ffcc80;
    --warn-ground: rgba(255, 152, 0, .18);
    --warn-line: rgba(255, 183, 77, .42);
    --info-ground: rgba(25, 118, 210, .2);
    --mark: rgba(255, 213, 79, .34);
    color-scheme: dark;
}

html[data-theme-family="bootstrap"][data-theme-appearance="dark"] {
    --bg: radial-gradient(circle at top right, rgba(110, 168, 254, .12), transparent 26%), linear-gradient(180deg, #0f1728 0%, #111b30 100%);
    --bg-solid: #101a2d;
    --surface: linear-gradient(145deg, #172033 0%, #1c2740 100%);
    --line: rgba(147, 197, 253, .16);
    --line-strong: rgba(147, 197, 253, .34);
    --text: #eef4ff;
    --heading: #ffffff;
    --muted: #b8c7df;
    --accent: #6ea8fe;
    --accent-strong: #8bb9ff;
    --pill-bg: rgba(110, 168, 254, .18);
    --pill-text: #cfe2ff;
    --hero: radial-gradient(circle at top right, rgba(110, 168, 254, .16), transparent 24%), linear-gradient(135deg, #24304d 0%, #172033 100%);
    --foot: rgba(11, 16, 28, .97);
    --focus: rgba(110, 168, 254, .4);
    --field-line: rgba(184, 199, 223, .26);
}

html[data-theme-family="fluent2"] {
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}
html[data-theme-family="fluent2"][data-theme-appearance="light"] {
    --bg: radial-gradient(circle at top right, rgba(15, 108, 189, .12), transparent 28%), linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
    --bg-solid: #f3f9ff;
    --ground-alt: rgba(15, 108, 189, .05);
    --surface: linear-gradient(145deg, #ffffff 0%, #f6fbff 100%);
    --line: rgba(15, 108, 189, .16);
    --line-strong: rgba(15, 108, 189, .32);
    --heading: #10385d;
    --accent: #0f6cbd;
    --accent-strong: #115ea3;
    --pill-bg: #dff0ff;
    --pill-text: #0f6cbd;
    --hero: radial-gradient(circle at top right, rgba(255, 255, 255, .16), transparent 24%), linear-gradient(135deg, #0f6cbd 0%, #115ea3 100%);
    --foot: rgba(16, 56, 93, .97);
    --focus: rgba(15, 108, 189, .3);
    --field-line: #c5dcf2;
}
html[data-theme-family="fluent2"][data-theme-appearance="dark"] {
    --bg: radial-gradient(circle at top right, rgba(96, 165, 250, .12), transparent 26%), linear-gradient(180deg, #111827 0%, #172033 100%);
    --bg-solid: #131c2c;
    --surface: linear-gradient(145deg, #16263d 0%, #1b314d 100%);
    --surface-solid: #16263d;
    --line: rgba(125, 211, 252, .16);
    --line-strong: rgba(125, 211, 252, .34);
    --text: #eff6ff;
    --heading: #ffffff;
    --muted: #b8c7dd;
    --accent: #60a5fa;
    --accent-strong: #93c5fd;
    --pill-bg: rgba(96, 165, 250, .18);
    --pill-text: #dbeafe;
    --hero: radial-gradient(circle at top right, rgba(96, 165, 250, .16), transparent 24%), linear-gradient(135deg, #1d3557 0%, #16263d 100%);
    --foot: rgba(10, 16, 26, .97);
    --focus: rgba(96, 165, 250, .4);
    --field-line: rgba(184, 199, 221, .26);
}

html[data-theme-family="material3"] {
    --font: Roboto, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}
html[data-theme-family="material3"][data-theme-appearance="light"] {
    --bg: radial-gradient(circle at top right, rgba(103, 80, 164, .14), transparent 28%), linear-gradient(180deg, #faf7ff 0%, #f4efff 100%);
    --bg-solid: #f7f3ff;
    --ground-alt: rgba(103, 80, 164, .05);
    --surface: linear-gradient(145deg, #ffffff 0%, #faf7ff 100%);
    --line: rgba(103, 80, 164, .18);
    --line-strong: rgba(103, 80, 164, .34);
    --text: #241f33;
    --heading: #3d3160;
    --muted: #675d7d;
    --accent: #6750a4;
    --accent-strong: #5b4692;
    --pill-bg: #ede6ff;
    --pill-text: #6750a4;
    --hero: radial-gradient(circle at top right, rgba(255, 255, 255, .16), transparent 24%), linear-gradient(135deg, #6750a4 0%, #5b4692 100%);
    --foot: rgba(61, 49, 96, .97);
    --focus: rgba(103, 80, 164, .3);
    --field-line: #d8cfed;
}
html[data-theme-family="material3"][data-theme-appearance="dark"] {
    --bg: radial-gradient(circle at top right, rgba(208, 188, 255, .12), transparent 26%), linear-gradient(180deg, #1d1b20 0%, #241f2c 100%);
    --bg-solid: #201c26;
    --surface: linear-gradient(145deg, #241f2c 0%, #2f2738 100%);
    --surface-solid: #29222f;
    --line: rgba(208, 188, 255, .16);
    --line-strong: rgba(208, 188, 255, .34);
    --text: #f4eff4;
    --heading: #ffffff;
    --muted: #d1c5d8;
    --accent: #d0bcff;
    --accent-strong: #e7ddff;
    --on-accent: #21183a;
    --pill-bg: rgba(208, 188, 255, .18);
    --pill-text: #f4eff4;
    --hero: radial-gradient(circle at top right, rgba(208, 188, 255, .16), transparent 24%), linear-gradient(135deg, #332d41 0%, #241f2c 100%);
    --foot: rgba(20, 18, 24, .97);
    --focus: rgba(208, 188, 255, .4);
    --field-line: rgba(209, 197, 216, .26);
}

html[data-theme-family="tailwind3"] {
    --font: Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}
html[data-theme-family="tailwind3"][data-theme-appearance="light"] {
    --bg: radial-gradient(circle at top right, rgba(14, 165, 233, .14), transparent 28%), linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%);
    --bg-solid: #effdfc;
    --ground-alt: rgba(15, 118, 110, .05);
    --surface: linear-gradient(145deg, #ffffff 0%, #f3fdfb 100%);
    --line: rgba(15, 118, 110, .18);
    --line-strong: rgba(15, 118, 110, .36);
    --text: #12302d;
    --heading: #0c4a45;
    --muted: #4c6b68;
    --accent: #0f766e;
    --accent-strong: #115e59;
    --pill-bg: #d1fae5;
    --pill-text: #0f766e;
    --hero: radial-gradient(circle at top right, rgba(255, 255, 255, .16), transparent 24%), linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
    --foot: rgba(12, 74, 69, .97);
    --focus: rgba(15, 118, 110, .3);
    --field-line: #b8e5df;
}
html[data-theme-family="tailwind3"][data-theme-appearance="dark"] {
    --bg: radial-gradient(circle at top right, rgba(45, 212, 191, .12), transparent 26%), linear-gradient(180deg, #0f172a 0%, #111827 100%);
    --bg-solid: #101829;
    --surface: linear-gradient(145deg, #111827 0%, #162033 100%);
    --surface-solid: #131c2d;
    --line: rgba(45, 212, 191, .16);
    --line-strong: rgba(45, 212, 191, .34);
    --text: #ecfeff;
    --heading: #ffffff;
    --muted: #bfe9e5;
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --on-accent: #06211e;
    --pill-bg: rgba(45, 212, 191, .18);
    --pill-text: #ccfbf1;
    --hero: radial-gradient(circle at top right, rgba(45, 212, 191, .16), transparent 24%), linear-gradient(135deg, #134e4a 0%, #0f172a 100%);
    --foot: rgba(2, 6, 23, .97);
    --focus: rgba(45, 212, 191, .4);
    --field-line: rgba(191, 233, 229, .26);
}

/* High contrast: black, white and one yellow - no gradients, no soft shadows. */
html[data-theme-appearance="highcontrast"] {
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --bg: #000000;
    --bg-solid: #000000;
    --ground-alt: #0a0a0a;
    --surface: #000000;
    --surface-solid: #000000;
    --line: rgba(255, 255, 255, .55);
    --line-strong: #ffd939;
    --text: #ffffff;
    --heading: #ffffff;
    --muted: #f0f0f0;
    --accent: #ffd939;
    --accent-strong: #ffe36f;
    --on-accent: #000000;
    --pill-bg: #ffd939;
    --pill-text: #000000;
    --hero: #000000;
    --hero-text: #ffffff;
    --hero-muted: #ffffff;
    --hero-line: #ffd939;
    --hero-glass: #000000;
    --foot: #000000;
    --shadow: none;
    --shadow-soft: none;
    --focus: #ffd939;
    --field: #000000;
    --field-line: #ffd939;
    --good: #9cff9c;
    --good-ground: #001a00;
    --bad: #ffb3b3;
    --bad-ground: #200000;
    --warn-text: #ffffff;
    --warn-ground: #1a1400;
    --warn-line: #ffd939;
    --info-ground: #00101f;
    --mark: #ffd939;
    color-scheme: dark;
}

/* ── base ── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-solid);
    background-image: var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}
#app { display: flex; flex-direction: column; flex: 1; }
main { flex: 1; }

h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; margin: 0 0 .6rem; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 650; }
h4 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 .9rem; }
/* The page's heading is given the focus when a page opens, so a screen reader starts there; it needs no ring. */
h1:focus { outline: none; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-strong); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
html[data-theme-appearance="highcontrast"] :focus-visible { outline-color: #ffd939; }

img, svg { max-width: 100%; }
img { height: auto; }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 .12em; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; width: 100%; }
.wrap.narrow { max-width: 820px; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 65ch; }
.hint { display: block; font-size: .85rem; color: var(--muted); margin-top: .25rem; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: 999px; background: var(--pill-bg); color: var(--pill-text); font-size: .8rem; font-weight: 650; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

.boot { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: var(--heading); font-weight: 650; }
.boot::after { content: ""; width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); }

#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: .75rem 1rem; background: var(--surface-solid); border-top: 2px solid var(--warn-line); color: var(--text); }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ── buttons ── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .62rem 1.15rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface-solid); color: var(--accent);
    font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; line-height: 1.3;
}
.btn:hover { border-color: var(--accent); color: var(--accent-strong); box-shadow: var(--shadow-soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn.small { padding: .38rem .85rem; font-size: .92rem; }
.btn.big { padding: .8rem 1.5rem; font-size: 1.05rem; }
.btn.wide { width: 100%; margin-top: .75rem; }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.1rem; }
.center .btn-row { justify-content: center; }
.link-arrow { font-weight: 650; text-decoration: none; }
.link-arrow::after { content: " \2192"; }

/* ── header: the ERP's own accent bar ── */

.top { background: var(--hero); color: var(--hero-text); position: sticky; top: 0; z-index: 30; box-shadow: 0 10px 28px rgba(13, 41, 98, .16); }
html[data-theme-appearance="highcontrast"] .top { border-bottom: 2px solid #ffd939; box-shadow: none; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; padding-top: .55rem; padding-bottom: .55rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--hero-text); flex: none; }
/* THE MARK: the InvoiceNET logo with no background and no border
   (images/app-icon.svg, made by tools/brand/make_icons.py). Its depth is drawn
   into it - a lit top, a darker side - and that is also what keeps it clear of
   a header whose blue is close to its own. Here it only gets the shadow it
   would cast. */
.brand-mark { display: block; width: 3rem; height: 3rem; flex: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .28)); }
.brand-mark.big { width: 5rem; height: 5rem; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .22)); }
html[data-theme-appearance="highcontrast"] .brand-mark { filter: none; }
.brand-name { display: flex; align-items: center; font-weight: 750; font-size: 1.22rem; color: var(--hero-text); line-height: 1.15; letter-spacing: -.015em; }
.brand-name sup, .foot-name sup, .boot-name sup { font-size: .5em; font-weight: 600; margin-left: .08em; align-self: flex-start; line-height: 1.6; opacity: .85; }
.brand-erp { margin-left: .45rem; padding: .08rem .42rem .1rem; border: 1.5px solid currentColor; border-radius: 6px; font-size: .68em; font-weight: 700; letter-spacing: .09em; opacity: .92; }
.brand-tag { display: block; font-size: .7rem; color: var(--hero-muted); letter-spacing: .14em; text-transform: uppercase; margin-top: .12rem; }
.brand:hover .brand-mark { transform: translateY(-1px); }
.boot-name { font-size: 1.3rem; font-weight: 750; letter-spacing: -.015em; }
.boot-name span { color: var(--accent); }
.brand:hover { color: var(--hero-text); }

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a:not(.btn) { color: var(--hero-text); text-decoration: none; padding: .42rem .7rem; border-radius: 8px; font-weight: 550; font-size: .96rem; white-space: nowrap; }
.nav a:not(.btn):hover { background: var(--hero-glass); color: var(--hero-text); }
.nav a.active:not(.btn) { background: var(--hero-glass); box-shadow: inset 0 -2px 0 var(--hero-text); }
.top .btn { background: transparent; border-color: var(--hero-line); color: var(--hero-text); margin-left: .35rem; }
.top .btn:hover { border-color: var(--hero-text); color: var(--hero-text); box-shadow: none; }
.top .btn.primary { background: #ffffff; border-color: #ffffff; color: #14274f; }
html[data-theme-appearance="highcontrast"] .top .btn.primary { background: #ffd939; border-color: #ffd939; color: #000000; }
.top .btn.primary:hover { background: #ffffff; color: #0b1a33; }

.top-tools { display: flex; align-items: center; gap: .35rem; flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--hero-line); border-radius: 9px; background: transparent; color: var(--hero-text); cursor: pointer; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { background: var(--hero-glass); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.menu-toggle { display: none; }

/* ── the theme menu ── */

.theme { position: relative; }
.theme-panel {
    position: absolute; right: 0; top: calc(100% + .6rem); width: min(19.5rem, calc(100vw - 2rem)); z-index: 40;
    background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1rem 1.05rem 1.05rem;
}
.theme-panel h3 { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.theme-panel h3 + * { margin-bottom: .95rem; }
.theme-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.swatch { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-align: left; }
.swatch:hover { border-color: var(--accent); }
.swatch i { width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none; border: 2px solid var(--surface-solid); box-shadow: 0 0 0 1px var(--line-strong); }
.swatch i.sw-bootstrap { background: #0d6efd; }
.swatch i.sw-fluent2 { background: #0f6cbd; }
.swatch i.sw-material3 { background: #6750a4; }
.swatch i.sw-tailwind3 { background: linear-gradient(135deg, #0f766e, #0891b2); }
.swatch i.sw-hc { background: #000000; box-shadow: 0 0 0 2px #ffd939; border-color: #000000; }
.theme-panel .swatch[data-set-family="fluent2-highcontrast"] { grid-column: 1 / -1; }
.theme-panel .seg { width: 100%; }
.theme-panel .seg button { flex: 1; padding: .45rem .5rem; font-size: .92rem; }
.theme-note { font-size: .82rem; color: var(--muted); margin: 0; }
/* which one is in use - marked from the attributes on <html>, so it is right before the page's own program starts */
html[data-theme-family="bootstrap"] .swatch[data-set-family="bootstrap"],
html:not([data-theme-family]) .swatch[data-set-family="bootstrap"],
html[data-theme-family="fluent2"] .swatch[data-set-family="fluent2"],
html[data-theme-family="material3"] .swatch[data-set-family="material3"],
html[data-theme-family="tailwind3"] .swatch[data-set-family="tailwind3"],
html[data-theme-family="fluent2-highcontrast"] .swatch[data-set-family="fluent2-highcontrast"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
html[data-theme-choice="auto"] .seg button[data-set-appearance="auto"],
html:not([data-theme-choice]) .seg button[data-set-appearance="auto"],
html[data-theme-choice="light"] .seg button[data-set-appearance="light"],
html[data-theme-choice="dark"] .seg button[data-set-appearance="dark"] { background: var(--accent); color: var(--on-accent); }
html[data-theme-family="fluent2-highcontrast"] .theme-appearance { opacity: .5; pointer-events: none; }

/* ── footer ── */

.foot { background: var(--foot); color: rgba(234, 242, 255, .82); margin-top: 3rem; }
html[data-theme-appearance="highcontrast"] .foot { border-top: 2px solid #ffd939; }
.foot a { color: #ffffff; text-decoration: none; }
.foot a:hover { text-decoration: underline; color: #ffffff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 1.75rem 2rem; padding-top: 2.5rem; padding-bottom: 2rem; }
.foot-brand { display: flex; align-items: center; gap: .7rem; }
.foot-name { display: flex; align-items: center; font-weight: 750; color: #ffffff; font-size: 1.18rem; letter-spacing: -.015em; }
.foot-tag { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .1rem; }
.foot-co { margin-top: .75rem; font-size: .92rem; max-width: 34ch; }
.foot h4 { color: #ffffff; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .94rem; }
/* Every module, by group, above the copyright line. */
.foot-modules { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.6rem; padding-bottom: 1.8rem; }
.foot-module-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.foot h5 { color: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 600; margin: 0 0 .55rem; }
.foot-modules ul { font-size: .9rem; gap: .32rem; }
@media (max-width: 900px) { .foot-module-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot-module-groups { grid-template-columns: minmax(0, 1fr); } }
.foot-base { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1rem; padding-bottom: 1.25rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; }
.foot-contact { font-size: .94rem; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

/* ── legal documents ── */

.legal h2 { margin-top: 1.75rem; }
.legal p, .legal li { max-width: 70ch; }
.legal ul { padding-left: 1.3rem; margin: 0 0 .9rem; }

/* ── page blocks ── */

.hero { background: var(--hero); color: var(--hero-text); padding: 3.25rem 0 3.75rem; position: relative; overflow: hidden; }
html[data-theme-appearance="highcontrast"] .hero, html[data-theme-appearance="highcontrast"] .page-head { border-bottom: 2px solid #ffd939; }
.hero h1 { color: var(--hero-text); font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.02em; }
.hero .lead { color: var(--hero-muted); font-size: 1.18rem; }
.hero .btn { background: transparent; border-color: var(--hero-line); color: var(--hero-text); }
.hero .btn:hover { border-color: var(--hero-text); color: var(--hero-text); box-shadow: none; }
.hero .btn.primary { background: #ffffff; border-color: #ffffff; color: #14274f; }
html[data-theme-appearance="highcontrast"] .hero .btn.primary { background: #ffd939; border-color: #ffd939; color: #000000; }
.hero .pill { background: var(--hero-glass); color: var(--hero-text); border: 1px solid var(--hero-line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; align-items: center; }
.hero-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--hero-muted); font-size: .95rem; }
.hero-points li { display: flex; align-items: center; gap: .45rem; }
.hero-points li::before { content: ""; width: .5rem; height: .9rem; border: solid var(--hero-text); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); flex: none; }
/* The parts of the ERP, as tags under the hero's buttons. */
.hero-tags { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; max-width: 40rem; }
.hero-tags li { display: flex; }
.hero-tags a, .hero-tags li.more { background: var(--hero-glass); color: var(--hero-text); border: 1px solid var(--hero-line); border-radius: 999px; padding: .28rem .8rem; font-size: .88rem; font-weight: 600; line-height: 1.3; white-space: nowrap; text-decoration: none; }
.hero-tags a:hover, .hero-tags a:focus-visible { border-color: var(--hero-text); background: var(--hero-line); }
.hero-tags a:focus-visible { outline: 2px solid var(--hero-text); outline-offset: 2px; }
.hero-tags li.more { background: transparent; border-style: dashed; color: var(--hero-muted); font-weight: 500; }
/* What makes it different: the module cards, with a line of text and the module's name as the link. */
.edge-cards .area-card { display: flex; flex-direction: column; }
.edge-cards .area-tag { flex: 1; color: var(--muted); font-weight: 400; line-height: 1.55; }
.edge-cards .link-arrow { margin-top: .6rem; font-size: .92rem; }

/* The top of every other page: the same accent band, shorter. */
.page-head { background: var(--hero); color: var(--hero-text); padding: 2.4rem 0 2.6rem; }
.page-head h1 { color: var(--hero-text); }
.page-head .lead { color: var(--hero-muted); }
.page-head a:not(.btn) { color: var(--hero-text); }
.page-head .crumbs, .page-head .crumbs a { color: var(--hero-muted); }
.page-head .pill { background: var(--hero-glass); color: var(--hero-text); border: 1px solid var(--hero-line); }
.page-head .btn { background: transparent; border-color: var(--hero-line); color: var(--hero-text); }
.page-head .btn.primary { background: #ffffff; border-color: #ffffff; color: #14274f; }

.band { padding: 3rem 0; }
.band.tight { padding: 2rem 0; }
.band.alt { background: var(--ground-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-head { max-width: 46rem; margin-bottom: 1.75rem; }
.center .band-head, .band-head.center { margin-left: auto; margin-right: auto; }

.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.1rem; box-shadow: var(--shadow-soft); position: relative; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 1.05rem; font-weight: 700; margin-bottom: .8rem; }
.steps li p:last-child { margin-bottom: 0; color: var(--muted); }

.chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .32rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--pill-bg); color: var(--pill-text); font-size: .9rem; font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem; box-shadow: var(--shadow-soft); }
.card p:last-child { margin-bottom: 0; }
.card h4 a, .card h3 a { text-decoration: none; }
a.card.link { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
a.card.link:hover { border-color: var(--accent); box-shadow: var(--shadow); }
a.card.link h3 { color: var(--accent); }
.card-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-top: auto; padding-top: .75rem; }
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 11px; background: var(--pill-bg); color: var(--pill-text); margin-bottom: .8rem; font-weight: 700; flex: none; }
.card-icon svg { width: 1.35rem; height: 1.35rem; }

.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: .6rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.plain { margin: 0 0 .75rem; padding-left: 1.2rem; }
.plain li { margin-bottom: .25rem; }
a.row-name { color: var(--accent); }

.notice { background: var(--warn-ground); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-top: 1rem; }
.notice p { margin: .35rem 0 .75rem; }
.notice p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 1rem 0 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-solid); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.table-wrap tr:last-child td { border-bottom: 0; }
th { color: var(--heading); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; background: var(--ground-alt); }
th.num, td.num { text-align: right; }

/* ── the home page ── */

/* A drawing of the ERP's own screen in the theme that is chosen: its side
   panel, its accent bar, its panels. Shapes only - no figure in it is a claim. */
.mock { background: var(--surface-solid); border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .32); border: 1px solid var(--hero-line); overflow: hidden; color: var(--text); font-size: .74rem; transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
.mock-bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; background: var(--ground-alt); border-bottom: 1px solid var(--line); }
.mock-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--line-strong); }
.mock-bar span { margin-left: .5rem; flex: 1; height: 1.1rem; border-radius: 6px; background: var(--bg-solid); border: 1px solid var(--line); }
.mock-body { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); min-height: 17.5rem; }
.mock-side { background: var(--hero); color: var(--hero-text); padding: .75rem .6rem; display: grid; gap: .3rem; align-content: start; }
.mock-side b { font-size: .8rem; margin-bottom: .35rem; display: block; }
.mock-side span { padding: .32rem .5rem; border-radius: 6px; color: var(--hero-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-side span.on { background: var(--hero-glass); color: var(--hero-text); font-weight: 650; }
.mock-main { padding: .8rem; display: grid; gap: .7rem; align-content: start; background: var(--bg-solid); }
.mock-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.mock-tile { background: var(--surface-solid); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .6rem; }
.mock-tile small { display: block; color: var(--muted); }
.mock-tile u { display: block; height: .55rem; width: 70%; border-radius: 4px; background: var(--accent); margin-top: .45rem; opacity: .85; }
.mock-tile:nth-child(2) u { width: 48%; }
.mock-tile:nth-child(3) u { width: 86%; }
.mock-panel { background: var(--surface-solid); border: 1px solid var(--line); border-radius: 9px; padding: .6rem .65rem; }
.mock-chart { display: flex; align-items: flex-end; gap: .45rem; height: 4.6rem; margin-top: .5rem; }
.mock-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .8; }
.mock-chart i:nth-child(even) { background: var(--line-strong); }
.mock-rows { display: grid; gap: .38rem; margin-top: .5rem; }
.mock-rows i { height: .5rem; border-radius: 4px; background: var(--line); }
.mock-rows i:nth-child(2) { width: 82%; }
.mock-rows i:nth-child(3) { width: 64%; }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.15rem; box-shadow: var(--shadow-soft); }
.value p { color: var(--muted); margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.checks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.checks li { position: relative; padding-left: 1.9rem; }
.checks li::before { content: ""; position: absolute; left: .1rem; top: .28rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--pill-bg); }
.checks li::after { content: ""; position: absolute; left: .5rem; top: .47rem; width: .33rem; height: .6rem; border: solid var(--pill-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.theme-show { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.theme-show .theme-swatches { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }

.cta { background: var(--hero); color: var(--hero-text); border-radius: 20px; padding: 2.6rem 2rem; text-align: center; box-shadow: var(--shadow); }
html[data-theme-appearance="highcontrast"] .cta { border: 2px solid #ffd939; }
.cta h2 { color: var(--hero-text); font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta p { color: var(--hero-muted); max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta .btn-row { justify-content: center; }
.cta .btn { background: transparent; border-color: var(--hero-line); color: var(--hero-text); }
.cta .btn:hover { border-color: var(--hero-text); box-shadow: none; }
.cta .btn.primary { background: #ffffff; border-color: #ffffff; color: #14274f; }
html[data-theme-appearance="highcontrast"] .cta .btn.primary { background: #ffd939; border-color: #ffd939; color: #000000; }
.cta a:not(.btn) { color: var(--hero-text); }

/* ── help centre and getting-started guides ── */

.help-search { position: relative; max-width: 640px; margin: 1.4rem 0 0; }
.help-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.help-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--muted); pointer-events: none; }
.help-search input[type=search] { width: 100%; padding: .95rem 1rem .95rem 3rem; border: 1px solid transparent; border-radius: 12px; background: var(--surface-solid); color: var(--text); font: inherit; font-size: 1.05rem; box-shadow: 0 14px 34px rgba(0, 0, 0, .2); }
html[data-theme-appearance="highcontrast"] .help-search input[type=search] { border-color: #ffd939; }
.help-search input[type=search]:focus { outline: 3px solid var(--hero-line); outline-offset: 2px; }
.help-quick { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; align-items: center; color: var(--hero-muted); font-size: .9rem; }
.help-quick button { border: 1px solid var(--hero-line); background: var(--hero-glass); color: var(--hero-text); border-radius: 999px; padding: .2rem .7rem; font: inherit; font-size: .88rem; cursor: pointer; }
.help-quick button:hover { border-color: var(--hero-text); }

.help-results { display: grid; gap: .8rem; margin-top: 1rem; }
.help-hit { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow-soft); }
.help-hit:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow); }
.help-hit-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; justify-content: space-between; }
.help-hit b { color: var(--accent); font-size: 1.06rem; }
.help-hit p { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }

.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.1rem; }
.guide-card { display: flex; gap: .9rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.15rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow-soft); }
.guide-card:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow); }
.guide-card .card-icon { margin: 0; }
.guide-card h3 { color: var(--accent); margin-bottom: .2rem; font-size: 1.04rem; }
.guide-card p { margin: 0; font-size: .92rem; color: var(--muted); }
.guide-card.first { grid-column: 1 / -1; background: var(--pill-bg); border-color: var(--line-strong); }

.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; align-items: start; }
.area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.area-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.area-head h3 { margin: 0; }
.area ul { list-style: none; margin: 0; padding: .35rem 0; }
.area li a { display: block; padding: .42rem 1.1rem; text-decoration: none; color: var(--text); }
.area li a:hover { background: var(--ground-alt); color: var(--accent); }
.area details > summary { cursor: pointer; padding: .55rem 1.1rem .75rem; color: var(--accent); font-weight: 650; font-size: .92rem; list-style: none; border-top: 1px solid var(--line); }
.area details > summary::-webkit-details-marker { display: none; }
.area details[open] > summary { border-top: 0; border-bottom: 1px solid var(--line); order: 2; }
.area details[open] > summary .more { display: none; }
.area details:not([open]) > summary .less { display: none; }
.area details ul { padding-top: 0; }

/* one topic or one guide: what is in it on the left, the text on the right */
.doc { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.doc-toc { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem .6rem 1rem 1rem; box-shadow: var(--shadow-soft); }
.doc-toc b { display: block; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.doc-toc a { display: block; padding: .32rem .6rem; border-left: 2px solid var(--line); text-decoration: none; color: var(--text); font-size: .93rem; line-height: 1.35; }
.doc-toc a:hover { border-left-color: var(--accent); color: var(--accent); background: var(--ground-alt); }
.doc-toc .doc-back { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); display: grid; gap: .35rem; font-size: .92rem; }
.doc-toc .doc-back a { border-left: 0; padding-left: 0; color: var(--accent); font-weight: 600; }

.help-doc { min-width: 0; }
.help-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.5rem 1.2rem; margin-bottom: 1.1rem; box-shadow: var(--shadow-soft); scroll-margin-top: 5.5rem; }
.help-sec > h2 { font-size: 1.25rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.help-sec > h2 .sec-no { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .3rem; border-radius: 8px; background: var(--pill-bg); color: var(--pill-text); font-size: .85rem; font-weight: 700; flex: none; }
.help-sec > h2 a.anchor { margin-left: auto; opacity: 0; text-decoration: none; font-weight: 400; color: var(--muted); }
.help-sec:hover > h2 a.anchor, .help-sec > h2 a.anchor:focus-visible { opacity: 1; }
.help-sec h3 { margin: 1.2rem 0 .4rem; font-size: 1.02rem; color: var(--accent); }
.help-sec p, .help-sec li { max-width: 72ch; }
.help-sec > :last-child { margin-bottom: 0; }
.help-sec ul { margin: 0 0 .9rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.help-sec ul > li { position: relative; padding-left: 1.25rem; }
.help-sec ul > li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }
.help-sec ol { margin: 0 0 .9rem; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .65rem; }
.help-sec ol > li { counter-increment: s; position: relative; padding-left: 2.5rem; min-height: 1.75rem; }
.help-sec ol > li::before { content: counter(s); position: absolute; left: 0; top: .02rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.help-sec strong { color: var(--heading); }
.help-sec .table-wrap { margin: .4rem 0 1rem; }
.help-lead { font-size: 1.12rem; color: var(--hero-muted); max-width: 68ch; margin: .2rem 0 0; }
.help-tip { background: var(--info-ground); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 1rem 0; max-width: 72ch; }

/* "you see this - it means this - do this" */
.trouble { display: grid; gap: .7rem; margin: .3rem 0 1rem; }
.trouble-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-solid); overflow: hidden; }
.trouble-item > summary { cursor: pointer; padding: .7rem 1rem .7rem 2.4rem; font-weight: 650; position: relative; list-style: none; color: var(--heading); }
.trouble-item > summary::-webkit-details-marker { display: none; }
.trouble-item > summary::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: .5rem; height: .5rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.trouble-item[open] > summary::before { transform: rotate(45deg); top: .95rem; }
.trouble-item > summary:hover { background: var(--ground-alt); }
.trouble-item dl { margin: 0; padding: .2rem 1rem .9rem 2.4rem; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .45rem 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.trouble-item dt { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-top: .18rem; }
.trouble-item dd { margin: 0; }
.trouble-item dd.fix { color: var(--good); font-weight: 600; }

.doc-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.doc-nav a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1.1rem; text-decoration: none; color: var(--text); }
.doc-nav a:hover { border-color: var(--accent); }
.doc-nav a small { display: block; color: var(--muted); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.doc-nav a b { color: var(--accent); }
.doc-nav a.next { text-align: right; grid-column: 2; }

.skeleton { display: grid; gap: .8rem; }
.skeleton i { display: block; height: 1rem; border-radius: 6px; background: var(--line); }
.skeleton i:nth-child(1) { width: 45%; height: 1.6rem; }
.skeleton i:nth-child(3) { width: 85%; }
.skeleton i:nth-child(4) { width: 70%; }

/* older help markup, kept working */
.help-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1.25rem 0; }
.help-toc ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.help-list { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .75rem 1.5rem; }
.help-list li { display: flex; flex-direction: column; gap: .15rem; }
.help-list a { font-weight: 600; }

/* ── forms ── */

label { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=tel], input[type=search], select, textarea {
    width: 100%; padding: .6rem .7rem; border: 1px solid var(--field-line); border-radius: var(--radius-sm);
    background: var(--field); color: var(--text); font: inherit;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
select option { background: var(--surface-solid); color: var(--text); }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; margin-top: .2rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin-top: 1.1rem; box-shadow: var(--shadow-soft); }
.panel h2 { font-size: 1.2rem; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.25rem; }

.check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; margin-top: 1.1rem; }

/* "Renew automatically", beside a pay button */
.auto-renew { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: .1rem; }
.auto-renew .check { font-size: .95rem; }
.auto-renew-methods { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin: .6rem 0 0 1.7rem; font-size: .95rem; }
.auto-renew-methods label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; }
.auto-renew-methods input { margin-top: 0; }
.auto-renew .hint { margin-left: 1.7rem; }

/* ── pricing ── */

.config { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 1.5rem; align-items: start; margin-top: 1rem; }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-solid); }
.seg button { padding: .5rem 1rem; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.seg button:focus-visible { outline-offset: -3px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.row-name { display: block; font-weight: 650; }

.stepper { display: flex; align-items: center; gap: .5rem; flex: none; }
.stepper button { width: 2.3rem; height: 2.3rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-solid); color: var(--accent); font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.stepper button:hover:not(:disabled) { border-color: var(--accent); background: var(--pill-bg); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper span { min-width: 2.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.pick { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-weight: 400; margin: 0; cursor: pointer; }
.pick > span:nth-child(2) { flex: 1; min-width: 0; }
.pick.feature { padding-left: 1.8rem; }
.pick.off { opacity: .6; cursor: default; }
.price { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--heading); }
.price small { font-weight: 400; color: var(--muted); }

.summary { position: sticky; top: 5.5rem; background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 1.3rem; margin-top: 1.1rem; box-shadow: var(--shadow); }
.summary h2 { font-size: 1.2rem; }

.lines td { padding-left: 0; padding-right: 0; }
.lines td.num { padding-left: .75rem; }
.lines tfoot td { border-bottom: 0; padding-top: .35rem; padding-bottom: .35rem; }
.lines tfoot tr:first-child td { padding-top: .7rem; }
.lines tr.total td { font-weight: 700; font-size: 1.12rem; color: var(--heading); border-top: 2px solid var(--line-strong); padding-top: .6rem; }

.errors { margin: 0; padding-left: 1.2rem; color: var(--bad); }

/* ── buy ── */

.progress { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: p; }
.progress li { counter-increment: p; padding: .32rem .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--muted); background: var(--surface-solid); }
.progress li::before { content: counter(p) ". "; }
.progress li.now { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 650; }
.progress li.done { border-color: var(--good); color: var(--good); background: var(--good-ground); }

.errors-box { background: var(--bad-ground); border: 1px solid var(--bad); color: var(--bad); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-top: 1rem; }
.errors-box p, .errors-box ol { margin: 0; }
.errors-box ol { padding-left: 1.3rem; }

.ticks { list-style: none; margin: 1rem 0; padding: 0; }
.ticks li { padding: .35rem 0 .35rem 1.8rem; position: relative; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 1rem; height: 1rem; border: 2px solid var(--line-strong); border-radius: 50%; }
.ticks li.done { color: var(--text); font-weight: 650; }
.ticks li.done::before { border-color: var(--good); background: var(--good); }

/* ── narrow screens ── */

@media (max-width: 1040px) {
    .menu-toggle { display: inline-flex; }
    .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: .15rem; padding: .6rem 20px 1rem; background: var(--hero); box-shadow: 0 18px 30px rgba(0, 0, 0, .25); margin: 0; }
    .top.open .nav { display: flex; }
    .nav a:not(.btn) { padding: .65rem .7rem; font-size: 1.02rem; }
    .top .nav .btn { margin: .4rem 0 0; }
    .top-row { position: static; }
    .top { position: sticky; }
}

@media (max-width: 900px) {
    .config { grid-template-columns: minmax(0, 1fr); }
    .summary { position: static; }
    .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
    .mock { transform: none; }
    .doc { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .doc-toc { position: static; max-height: none; }
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-grid > :first-child { grid-column: 1 / -1; }
    .band { padding: 2.25rem 0; }
}

@media (max-width: 560px) {
    .wrap { padding: 0 16px; }
    .brand-tag { display: none; }
    .mock-body { grid-template-columns: 6rem minmax(0, 1fr); }
    .mock-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mock-tile:nth-child(3) { display: none; }
    .help-sec { padding: 1.1rem 1.05rem 1rem; }
    .trouble-item dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .trouble-item dt { margin-top: .5rem; }
    .doc-nav { grid-template-columns: minmax(0, 1fr); }
    .doc-nav a.next { grid-column: auto; text-align: left; }
    .cta { padding: 2rem 1.1rem; border-radius: 16px; }
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── motion ── */

@media (prefers-reduced-motion: no-preference) {
    .btn, .seg button, .stepper button, .swatch, .card, .value, .guide-card, .help-hit, .nav a, .icon-btn, .brand-mark { transition: background-color .14s, border-color .14s, color .14s, box-shadow .18s, transform .18s; }
    a.card.link:hover, .guide-card:hover, .help-hit:hover { transform: translateY(-2px); }
    .boot::after { animation: spin .8s linear infinite; }
    .skeleton i { animation: pulse 1.3s ease-in-out infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulse { 50% { opacity: .45; } }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

@media print {
    .top, .foot, .doc-toc, .doc-nav, .btn-row, .help-search { display: none !important; }
    body { background: #ffffff; color: #000000; }
    .help-sec { box-shadow: none; break-inside: avoid; }
    .trouble-item > dl { display: grid !important; }
}

/* ── the parts of the product: the modules page, a module's page, the home page ── */

.pill.good { background: var(--good-ground); color: var(--good); }
.soft-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .7rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: .95rem; }
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.jump a { padding: .35rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-solid); text-decoration: none; font-weight: 600; font-size: .92rem; }
.jump a:hover { border-color: var(--accent); background: var(--pill-bg); }

.area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.area-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.3rem 1.15rem; box-shadow: var(--shadow-soft); text-decoration: none; color: var(--text); }
.area-card:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--text); }
.area-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.area-card-top .card-icon { margin-bottom: .85rem; }
.area-card h3 { font-size: 1.18rem; margin-bottom: .25rem; }
.area-tag { color: var(--accent); font-weight: 600; margin-bottom: .7rem; }
.area-card .checks { margin: 0 0 1rem; gap: .4rem; }
.area-card .link-arrow { margin-top: auto; color: var(--accent); }
.checks.small { font-size: .93rem; color: var(--muted); }

.module { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.25rem; align-items: start; }
.module-summary { font-size: 1.2rem; line-height: 1.6; max-width: 62ch; margin-bottom: 1.75rem; }
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; }
.feature { display: flex; gap: .8rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-soft); }
.feature p { margin: 0; }
.feature-tick { position: relative; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); flex: none; margin-top: .1rem; }
.feature-tick::after { content: ""; position: absolute; left: .53rem; top: .3rem; width: .35rem; height: .68rem; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.module-side { margin-top: 0; display: grid; gap: .1rem; }
.module-side .pill { justify-self: start; }
.module-price { font-size: 1.7rem; font-weight: 750; color: var(--heading); margin: .5rem 0 .2rem; font-variant-numeric: tabular-nums; }
.module-price.small { font-size: 1.2rem; }
.module-price small { font-size: .95rem; font-weight: 400; color: var(--muted); }

/* ── module value content (SDD 2026-10-19): Description, Why use it, Advantages,
      Benefits, Use Cases, then Cost-Effectiveness - between the summary and the
      feature list. Tokens only, so every theme and dark mode follow. ── */
.value-head { margin-top: 2.25rem; }
.value-description { font-size: 1.05rem; line-height: 1.65; max-width: 68ch; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.why-list li { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: .85rem 1.1rem; box-shadow: var(--shadow-soft); display: grid; gap: .3rem; }
.why-problem { font-weight: 650; color: var(--heading); }
.why-answer { color: var(--text); }
.benefit-grid, .usecase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.benefit h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.benefit p { color: var(--muted); }
.usecase { display: grid; gap: .45rem; align-content: start; }
.usecase .pill { justify-self: start; }
.usecase-situation { margin: 0; font-weight: 600; color: var(--heading); }
.usecase-outcome { margin: 0; color: var(--muted); }
.cost-panel { margin-top: .5rem; }
.cost-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.25rem; background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-soft); }
.cost-price { font-size: 1.6rem; font-weight: 750; color: var(--heading); font-variant-numeric: tabular-nums; }
.cost-price.small { font-size: 1.2rem; }
.cost-price small { font-size: .95rem; font-weight: 400; color: var(--muted); }
.cost-sub { font-size: 1rem; margin: 1.1rem 0 .5rem; }
.cost-calc .cost-sub { margin-top: 0; }
.calc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.calc-fields label { font-size: .85rem; }
.calc-fields input { width: 100%; font-variant-numeric: tabular-nums; }
.calc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; margin-top: 1rem; }
.calc-results strong { display: block; font-size: 1.15rem; color: var(--heading); font-variant-numeric: tabular-nums; }
.calc-payback strong { color: var(--good); }
.calc-problem { color: var(--bad); }

@media (max-width: 900px) {
    .module { grid-template-columns: minmax(0, 1fr); }
    .module-side { position: static; }
}
@media (max-width: 720px) {
    .cost-grid { grid-template-columns: minmax(0, 1fr); }
    .calc-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
    .area-card, .feature, .jump a { transition: border-color .14s, box-shadow .18s, transform .18s, background-color .14s; }
    .area-card:hover { transform: translateY(-2px); }
}

/* ── the demo form: which parts to try ── */
.demo-pick { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1.1rem; }
.demo-pick h3 { margin-bottom: .2rem; }
.demo-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; margin-top: .9rem; }
.demo-pick-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-solid); padding: .7rem .85rem; }
.demo-pick-item .check { margin-top: 0; }
.demo-pick-item .check.feature { margin: .5rem 0 0 1.7rem; font-size: .94rem; }
.demo-pick-item .check.off { opacity: .6; }

/* ── my account ── */

.acct h3 { margin: 1.4rem 0 .5rem; }
.acct textarea { width: 100%; }
.panel.accent { border-top: 4px solid var(--accent); border-color: var(--line-strong); border-top-color: var(--accent); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .6rem; }
.panel-head h2 { margin: 0; }
.pill.late { background: var(--bad-ground); color: var(--bad); }
.ok-box { background: var(--good-ground); border: 1px solid var(--good); color: var(--good); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-top: 1rem; }
.ok-box p { margin: 0; }
/* ── My account: a side menu of six areas (SDD 2026-10-19). At phone width the
      menu is a row of tabs above the area, scrolled sideways inside itself. ── */
.acct-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.acct-menu { position: sticky; top: 5.6rem; display: grid; gap: .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; box-shadow: var(--shadow-soft); }
.acct-menu a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; }
.acct-menu a:hover { background: var(--pill-bg); color: var(--pill-text); }
.acct-menu a.on { background: var(--accent); color: var(--on-accent); }
.acct-menu a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.acct-menu .badge { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--bad); color: #ffffff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.4rem; }
.acct-main { min-width: 0; }
.acct-main > .panel:first-child, .acct-main > .acct-said + .panel { margin-top: 0; }
.acct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.acct-card { display: grid; gap: .35rem; align-content: start; text-decoration: none; color: var(--text); }
.acct-card h3 { margin: 0; font-size: 1.05rem; }
.acct-card p { margin: 0; }
.acct-card .pill { justify-self: start; }
.acct-card.warn { border-left: 4px solid var(--accent); }
a.acct-card:hover { border-color: var(--accent); }
@media (max-width: 900px) {
    .acct-shell { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .acct-menu { position: static; display: flex; overflow-x: auto; padding: .35rem; }
    .acct-menu a { flex: none; white-space: nowrap; }
}

.acct-said { position: sticky; top: 5.2rem; z-index: 20; }
.acct-said > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; background-color: var(--surface-solid); box-shadow: var(--shadow-soft); }
.acct-said .errors-box { background-image: linear-gradient(var(--bad-ground), var(--bad-ground)); }
.acct-said .ok-box { background-image: linear-gradient(var(--good-ground), var(--good-ground)); }
.acct-said button { flex: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem 1.5rem; margin: .4rem 0 1rem; }
.facts dt { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .1rem 0 0; font-weight: 650; color: var(--heading); }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.meter { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; background: var(--surface-solid); }
.meter b { display: block; font-size: 1.25rem; color: var(--heading); font-variant-numeric: tabular-nums; }
.meter span { font-size: .85rem; color: var(--muted); }
.scroll-x { overflow-x: auto; }
/* My account: one invoice shown on the page */
.invoice-frame { display: block; width: 100%; height: min(80vh, 60rem); min-height: 24rem; margin-top: .75rem; border: 1px solid var(--line, rgba(127,127,127,.35)); border-radius: .5rem; background: #fff; }
.lines td.num .btn.small + .btn.small { margin-left: .35rem; }
.scroll-x .lines th { background: transparent; padding-left: 0; padding-right: 0; }
.scroll-x .lines th.num, .scroll-x .lines td.num { padding-left: .75rem; }
input.qty { width: 5.5rem; padding: .4rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-solid); color: var(--text); font: inherit; text-align: right; }
input.qty:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--accent); }
.lic-card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.lic-card h3 { margin: 0; }
.lic-card p { margin: 0; }
.lic-card .btn { margin-top: .4rem; }

/* ── work that is going on: a bar, a spinner on the step under way, ticks on those done (Layout/WorkSteps.razor) ── */

.work { margin: 1rem 0; }
.work-bar { height: .55rem; border-radius: 999px; background: var(--pill-bg); border: 1px solid var(--line); overflow: hidden; }
.work-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.work-bar.full span { background: var(--good); }
.work-say { margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--heading); }
.work .ticks { margin: .6rem 0 0; }
.ticks li.done::after { content: ""; position: absolute; left: .34rem; top: .78rem; width: .32rem; height: .58rem; border: solid var(--surface-solid); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ticks li.now { color: var(--heading); font-weight: 650; }
.ticks li.now::before { border-color: var(--line-strong); border-top-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
    .work-bar span { transition: width .6s ease; }
    .work-bar.moving span { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 200% 100%; animation: work-shine 1.4s linear infinite; }
    .ticks li.now::before { animation: spin .8s linear infinite; }
    @keyframes work-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}

/* ── Modules page as a shop window (2026-10-15): what each card is, and the cart ── */
.card-icon .ei { font-size: 1.3rem; }
.guide-card .card-icon .ei { font-size: 1.2rem; }
.shop-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.pill.kind { background: transparent; border: 1px solid currentColor; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .16rem .6rem; }
.pill.kind .ei { font-size: .8rem; }
.kind-company { color: var(--accent); }
.kind-user { color: var(--good); }
.kind-branch { color: var(--warn-text); }
.kind-module { color: var(--heading); }
.kind-feature { color: var(--accent-strong); }
.shop-card h3 .shop-title { color: inherit; text-decoration: none; }
.shop-card h3 .shop-title:hover { color: var(--accent); text-decoration: underline; }
.shop-descr { color: var(--muted); font-size: .9rem; margin: 0 0 .4rem; }
.shop-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: 1rem; }
.shop-foot .spacer, .cart-bar .spacer { flex: 1 1 auto; }
.in-cart { font-weight: 650; font-size: .88rem; color: var(--good); }
.feature-list { display: grid; gap: .55rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.feature-row { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; padding-bottom: .55rem; border-bottom: 1px dashed var(--line); }
.feature-row:last-child { border-bottom: none; padding-bottom: 0; }
.feature-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.feature-name { font-weight: 650; color: var(--heading); min-width: 0; }
.feature-descr { margin: 0; font-size: .82rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feature-buy { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.feature-row .price { font-size: .85rem; }
.cart-bar { position: sticky; bottom: 0; z-index: 50; background: var(--surface-solid); border-top: 1px solid var(--line-strong); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); }
.cart-bar-inner { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; }
.cart-bar-count { color: var(--heading); white-space: nowrap; }
.cart-bar-items { min-width: 0; max-width: 52ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .88rem; }
@media (max-width: 560px) {
    .cart-bar-items { display: none; }
}

/* ── Help: the contents down the side of every help page (Layout/HelpContents) ── */
.help-contents { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem .55rem .9rem .8rem; box-shadow: var(--shadow-soft); font-size: .92rem; }
.help-contents .hc-toggle { display: none; }
.hc-body { display: grid; gap: .55rem; }
.hc-search { position: relative; display: flex; }
.hc-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hc-search input { width: 100%; min-width: 0; padding: .5rem 2.3rem .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); color: var(--text); font: inherit; font-size: .9rem; }
.hc-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hc-search button { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: .3rem; cursor: pointer; display: inline-flex; }
.hc-search button svg { width: 1.05rem; height: 1.05rem; }
.hc-search button:hover, .hc-search button:focus-visible { color: var(--accent); }
.hc-links { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: 0 .2rem .35rem; border-bottom: 1px solid var(--line); }
.hc-links a { color: var(--accent); font-weight: 600; text-decoration: none; }
.hc-links a:hover { text-decoration: underline; }
.hc-links a.on { color: var(--text); }
.hc-group summary { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; cursor: pointer; padding: .3rem .25rem; border-radius: 8px; font-weight: 650; color: var(--text); list-style: none; }
.hc-group summary::-webkit-details-marker { display: none; }
.hc-group summary::before { content: ""; flex: none; width: .45rem; height: .45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); margin-right: .15rem; align-self: center; transition: transform .15s ease; }
.hc-group[open] > summary::before { transform: rotate(45deg); }
.hc-group summary span:first-of-type { flex: 1; }
.hc-group summary:hover { background: var(--ground-alt); }
.hc-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hc-count { font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.help-contents ol { list-style: none; margin: .15rem 0 .35rem; padding: 0 0 0 .55rem; display: grid; gap: .05rem; }
.help-contents li > a { display: block; padding: .26rem .55rem; border-left: 2px solid var(--line); text-decoration: none; color: var(--text); line-height: 1.35; }
.help-contents li > a:hover { border-left-color: var(--accent); color: var(--accent); background: var(--ground-alt); }
.help-contents li.on > a { border-left-color: var(--accent); color: var(--accent); font-weight: 650; background: var(--ground-alt); }
.help-contents .hc-sections { margin: .1rem 0 .3rem .55rem; padding-left: .2rem; }
.help-contents .hc-sections a { font-size: .86rem; color: var(--muted); border-left-style: dotted; }
.help-contents .doc-back { margin-top: .3rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .9rem; }
.help-contents .doc-back a { color: var(--accent); font-weight: 600; text-decoration: none; }
.help-ask-link { color: var(--hero-text); font-weight: 600; margin-left: .35rem; }

/* ── Help: Ask (Pages/HelpAsk) ── */
.ask-thread { display: grid; gap: .8rem; }
.ask-empty .ask-examples { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.ask-examples button { border: 1px solid var(--line); background: var(--surface-solid); color: var(--accent); border-radius: 999px; padding: .4rem .9rem; font: inherit; font-size: .92rem; cursor: pointer; }
.ask-examples button:hover { border-color: var(--accent); }
.ask-who { display: block; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.ask-q { justify-self: end; max-width: min(36rem, 92%); background: var(--ground-alt); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 4px var(--radius); padding: .65rem .9rem; }
.ask-q p { margin: 0; }
.ask-a { max-width: 46rem; background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) var(--radius) 4px; padding: .8rem 1rem; box-shadow: var(--shadow-soft); }
.ask-a p { margin: 0; white-space: pre-line; line-height: 1.55; }
.ask-a.failed { border-color: var(--bad); }
.ask-a.failed p { color: var(--bad); }
.ask-sources { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .88rem; }
.ask-sources span { color: var(--muted); }
.ask-sources a { border: 1px solid var(--line); border-radius: 999px; padding: .15rem .65rem; text-decoration: none; color: var(--accent); background: var(--ground-alt); }
.ask-sources a:hover { border-color: var(--accent); }
.ask-box { margin-top: 1.4rem; }
.ask-box label { display: block; font-weight: 650; margin-bottom: .35rem; }
.ask-row { display: flex; gap: .6rem; }
.ask-row input { flex: 1; min-width: 0; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); color: var(--text); font: inherit; font-size: 1rem; }
.ask-row input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }

@media (max-width: 900px) {
    .help-contents { position: static; max-height: none; overflow: visible; padding: .55rem .7rem; }
    .help-contents .hc-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; border: 0; background: none; color: var(--text); font: inherit; font-weight: 650; padding: .3rem .1rem; cursor: pointer; }
    .help-contents .hc-toggle svg { width: 1.1rem; height: 1.1rem; transition: transform .15s ease; }
    .help-contents.open .hc-toggle svg { transform: rotate(180deg); }
    .help-contents .hc-body { display: none; margin-top: .5rem; }
    .help-contents.open .hc-body { display: grid; }
}
@media (max-width: 560px) {
    .ask-row { flex-direction: column; }
    .ask-q, .ask-a { max-width: 100%; }
}
@media print {
    .help-contents, .ask-box { display: none !important; }
}

/* ── Offers on the price list (2026-10-19): the list price struck through,
   the % off, and the renewal discount apart ── */
.offer-was { color: var(--muted); font-size: .85em; margin-left: .35rem; }
.offer-tag, .renew-tag {
    display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.offer-tag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.renew-tag { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
tr.discount td { color: var(--accent); }

/* ── The trial-run notice (2026-10-19): above every page ── */
.trial-banner {
    background: var(--warn-ground);
    color: var(--warn-text);
    border-bottom: 1px solid var(--warn-line);
    font-size: .9rem;
    line-height: 1.45;
}
.trial-banner__row { display: flex; gap: .7rem; align-items: baseline; padding-top: .55rem; padding-bottom: .55rem; }
.trial-banner__tag {
    flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--warn-line);
}
.trial-banner a { color: inherit; font-weight: 600; white-space: nowrap; }

/* ── Suggestions & Feedback page (2026-10-19) ── */
.fb-label { display: block; font-weight: 600; margin-bottom: .3rem; }
.fb-stars { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.fb-star {
    font-size: 1.7rem; line-height: 1; padding: .1rem .15rem; background: none; border: 0; cursor: pointer;
    color: var(--line-strong); border-radius: var(--radius-sm);
}
.fb-star.on { color: #e0a100; }
.fb-star:hover { color: #f0b72f; }
.fb-star:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.fb-stars__word { margin-left: .6rem; color: var(--muted); font-size: .95rem; }
.fb-texts { display: grid; gap: 1rem; margin-top: .6rem; }
.fb-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.fb-captcha__image {
    min-width: 10rem; min-height: 3.2rem; display: flex; align-items: center; justify-content: center;
    background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .25rem .5rem;
}
.fb-captcha__image svg { display: block; max-width: 100%; height: auto; }