/* bytereport — design tokens and components from the design canvas. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-weight: 500 700; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-weight: 500 700; font-display: swap; src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0F1B2D;
  --ink-2: #33415A;
  --ink-3: #3E4B61;
  --muted: #56637A;
  --muted-2: #8A96A8;
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --subtle: #E9EDF2;
  --line: #DCE2EA;
  --line-2: #C3CCD8;
  --line-3: #E9EDF2;
  --dark-2: #1C2A40;
  --code-bg: #0B1422;
  /* Indigo: the accent and the main button. */
  --accent: #4338CA;
  --accent-hover: #3730A3;
  --accent-active: #312E81;
  --accent-soft: #EEF0FF;
  --accent-soft-hover: #E2E5FF;
  --accent-light: #A5B4FC; /* on dark surfaces */
  --accent-deep: #453BC9; /* next-step boxes and table heads on the public pages */
  --accent-band: #EDEFFF; /* bands across the page (section-band), with dark text */
  --accent-logo: #6366F1;
  --art-pop: #FF4D7E; /* highlight in the illustrations of the reports */
  /* Green, yellow and red are used for findings only. */
  --ok: #155A36;
  --ok-bg: #E3F1E8;
  --warn: #6E4700;
  --warn-bg: #FCEFD2;
  --danger: #8E2F0D;
  --danger-bg: #FBE4DD;
  --danger-line: #F1C4B6;
  --info: #3730A3;
  --info-bg: #EEF0FF;
  /* Score bands of the rings: 0–49, 50–89, 90–100. */
  --score-fail: #B42318;
  --score-warn: #B45A00;
  --score-ok: #1E7A4C;

  --font: "IBM Plex Sans", system-ui, sans-serif;
  --font-head: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --focus: #4338CA;
  --border-strong: #8A96A8;
  --radius: 10px;
  --radius-card: 14px;
  --container: 1440px; /* max layout width of every page, website and app */
  --header-h: 76px; /* height of the header, website and app (60px on phones) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.4; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: #000; text-decoration-thickness: 2px; }

/* Dark surfaces use the light accent as focus ring. */
.app-bar { --focus: var(--accent-light); }

/* One visible focus style for everything keyboard-reachable. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
.icon { flex-shrink: 0; }
.h { font-family: var(--font-head); letter-spacing: -0.01em; font-weight: 700; }
.mono { font-family: var(--font-mono); font-weight: 500; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Buttons and inputs ---- */
/* Buttons: every variant has a clearly different hover and pressed state;
   ghost buttons also underline on hover so the change is not colour-only. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--radius); font: 600 15px/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; background: none; color: var(--ink); transition: background-color .12s, border-color .12s, color .12s; }
.btn-a { background: var(--accent); color: #fff; }
.btn-a:hover { background: var(--accent-hover); color: #fff; }
.btn-a:active { background: var(--accent-active); }
.btn-p { background: var(--ink); color: #fff; }
.btn-p:hover { background: var(--muted); color: #fff; }
.btn-p:active { background: #000; }
.btn-s { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-s:hover { background: var(--subtle); color: var(--ink); border-color: var(--ink); }
.btn-s:active { background: var(--line); }
.btn-g { background: transparent; }
.btn-g:hover { background: var(--line); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn-g:active { background: var(--line-2); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--subtle); color: var(--muted); border-color: transparent; cursor: not-allowed; text-decoration: none; }

.inp { width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0 12px; font: 400 15px var(--font); background: var(--surface); color: var(--ink); }
.inp:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.inp.mono { font-family: var(--font-mono); }
.inp-lg { height: 52px; font-size: 16px; }
.inp[aria-invalid="true"] { border-color: var(--danger); }
.inp.is-locked { background: var(--subtle); color: var(--ink-2); } /* a price from the price list */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; font-weight: 400; color: var(--muted); }
.field .error, .check-row ~ .error { font-size: 13px; font-weight: 500; color: var(--danger); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Cards, badges, notices ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.notice { display: flex; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.notice-text { font-size: 14px; line-height: 1.5; }
.notice-warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-fail { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-mute { background: var(--subtle); color: var(--ink-3); }
.pill { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.code { background: var(--code-bg); color: var(--line); border-radius: var(--radius); padding: 12px 14px; font: 500 13px/1.5 var(--font-mono); overflow-wrap: anywhere; }

/* Score ring: the band colours the arc, the number stays ink. */
.ring-track { stroke: var(--line-3); }
.ring-fail .ring-value { stroke: var(--score-fail); }
.ring-warn .ring-value { stroke: var(--score-warn); }
.ring-ok .ring-value { stroke: var(--score-ok); }
.ring text { font: 700 22px var(--font-head); fill: var(--ink); }
.ring-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; line-height: 1.3; color: var(--ink-2); }

/* Filter chip (report lists) */
.chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: 400 14px var(--font); color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }

/* ---- Site layout (landing, legal) ---- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; }
/* The header stays at the top while the page scrolls (website and app);
   jumps to an anchor end below it. */
html { scroll-padding-top: var(--header-h); }
.site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; background: var(--bg); transition: transform .2s ease; }
/* Scrolling down it slides away, scrolling up it comes back (nav.ts sets
   .header-away); what sticks below it moves up meanwhile. */
.header-away .site-header, .header-away .app-bar { transform: translateY(-100%); }
.header-away .sub-bar { top: 0; }
.header-away .ai-layout aside { top: 16px; }
@media (prefers-reduced-motion: reduce) { .site-header, .app-bar, .sub-bar { transition: none; } }
.site-header-inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
.site-nav { display: flex; gap: 28px; font-size: 15px; }
/* Navigation links: underline on hover (non-colour cue). */
.site-nav a { text-decoration: none; padding-block: 10px; text-underline-offset: 6px; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* The current page is bold, and so is "Reports" while one of its pages is. */
.site-nav a[aria-current="page"], .site-nav .nav-drop > summary[aria-current] { font-weight: 600; }
.site-actions { display: flex; align-items: center; gap: 10px; }

/* Language switch: two segments, the current one filled. */
/* Language: a grey globe opening the languages (a drop-down like Reports). */
.lang-toggle { min-height: 44px; padding: 0 8px; border-radius: var(--radius); color: var(--muted); }
.lang-toggle:hover { background: var(--subtle); color: var(--ink); }
.lang-name { display: none; }
.nav-drop[open] > summary.lang-toggle .icon:first-child { transform: none; }
.nav-drop-panel.lang-panel { left: auto; right: 0; min-width: 200px; }
.lang-panel a { gap: 10px; }
.lang-panel a[aria-current="true"] { font-weight: 600; }

/* "Reports" with its checks: a drop-down on wide screens, an accordion
   inside the mobile menu. */
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary .icon { transition: transform .15s ease; }
.nav-drop[open] > summary .icon { transform: rotate(180deg); }
.nav-drop-panel { position: absolute; left: -12px; top: calc(100% + 6px); z-index: 20; min-width: 240px; padding: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 16px 32px rgba(15,27,45,.12); display: flex; flex-direction: column; }
/* Opened upward when there is no room below (nav.ts). */
.nav-drop-panel.drop-up { top: auto; bottom: calc(100% + 6px); }
.nav-drop-panel a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius); text-decoration: none; font-size: 15px; }
.nav-drop-panel a:hover { background: var(--subtle); text-decoration: underline; text-decoration-thickness: 2px; }
.nav-drop-panel a[aria-current="page"] { font-weight: 600; }
/* "My reports" opens the drop-down of a logged-in person: accent, icon and a line below. */
.nav-drop-panel a.drop-mine { color: var(--accent); font-weight: 500; }
/* Menus with icons (Reports, avatar): grey icons in front, light lines
   between the groups. */
.drop-sep { flex-shrink: 0; height: 1px; margin: 6px 0; background: var(--line-3); }
.nav-drop-panel a > .icon:first-child, .user-menu-links a > .icon:first-child, .menu-user-links a > .icon:first-child, .user-menu-item > .icon { flex-shrink: 0; color: var(--muted); }
.nav-drop-panel a.drop-mine > .icon:first-child { color: inherit; }
.nav-drop-panel a.drop-mine[aria-current="page"] { font-weight: 600; }
.site-nav .nav-drop > summary { padding-block: 10px; }
.site-nav .nav-drop > summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu { display: none; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-toggle { padding: 0 10px; }
.menu .menu-close, .menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: block; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(15,27,45,.12); padding: 8px 20px 20px; display: flex; flex-direction: column; }
.menu-panel > a { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); text-underline-offset: 6px; }
.menu-panel > a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.menu-panel > a[aria-current="page"], .menu-panel .nav-drop > summary[aria-current] { font-weight: 600; }
.menu-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.menu-panel .lang-toggle { min-height: 52px; padding: 0; border-radius: 0; color: var(--ink); font-size: 17px; font-weight: 500; gap: 10px; }
.menu-panel .lang-toggle:hover { background: transparent; }
.menu-panel .lang-name { display: inline; flex-grow: 1; }
.menu-who { display: flex; align-items: center; gap: 12px; padding: 8px 0 6px; overflow-wrap: anywhere; }
.menu-who div { display: flex; flex-direction: column; gap: 2px; }
.menu-user-links { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.menu-user-links a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; text-decoration: none; text-underline-offset: 6px; }
.menu-user-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.menu-user-links a[aria-current="page"] { font-weight: 600; }
/* The administration is among the avatar's links in the mobile menu. */
.menu-panel .nav-drop { position: static; }
.menu-panel .nav-drop > summary { min-height: 52px; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--line); justify-content: space-between; }
.menu-panel .nav-drop-panel { position: static; min-width: 0; padding: 4px 0 4px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.menu-panel .nav-drop-panel a { min-height: 48px; font-size: 16px; padding: 0; }
.menu-panel .nav-drop-panel a:hover { background: transparent; }
/* Imprint, privacy and terms close the mobile menu. */
.menu-legal { display: flex; flex-direction: column; margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-legal a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink-3); text-decoration: none; text-underline-offset: 6px; }
.menu-legal a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
.menu-legal a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Sibling pages on narrow screens (legal pages, account, administration):
   a drop-down in a bar that stays at the top while the page scrolls. The
   media queries below show the bar and hide the side navigation. */
.sub-bar { display: none; position: sticky; top: var(--header-h); transition: top .2s ease; z-index: 15; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.sub-drop > summary { min-height: 52px; padding: 4px 14px; gap: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.sub-drop > summary:hover { border-color: var(--ink-3); }
.sub-drop > summary .grow { display: flex; flex-direction: column; line-height: 1.3; }
.sub-drop-area { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sub-drop-current { font-size: 16px; font-weight: 600; }
.sub-drop .nav-drop-panel, .toc-drop .nav-drop-panel { left: 0; right: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.sub-drop .nav-drop-panel { max-height: calc(100dvh - 96px); }
.sub-drop .nav-drop-panel a { gap: 10px; color: var(--ink-3); }
.sub-drop .nav-drop-panel a[aria-current="page"] { background: var(--subtle); color: var(--ink); }
.sub-drop .side-label { padding: 10px 12px 6px; }
.sub-drop .side-label:not(:first-child) { margin-top: 8px; }
/* The contents of a legal text on phones: a drop-down that scrolls with
   the page; its list scrolls when it is longer than the screen. */
.toc-drop { display: none; scroll-margin-top: 88px; }
.toc-drop > summary { min-height: 48px; padding: 0 14px; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); font-size: 15px; font-weight: 600; }
.toc-drop > summary:hover { border-color: var(--border-strong); }
.toc-drop .nav-drop-panel { max-height: min(60vh, 440px); }

/* The footer sits at the bottom of the window on short pages and after the
   content on long ones: the body is a column and the footer takes the rest. */
body:has(> .site-footer) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > .site-footer { margin-top: auto; }
.site-footer { border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer-inner { padding-block: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer nav a { color: var(--ink-2); }
.site-footer .brand-line { display: flex; align-items: center; gap: 10px; }

/* ---- Landing ---- */
.hero { padding-block: 72px 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 56px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 26px; }
/* The badge sits closer to the heading than the gap between the other parts. */
.hero-badge { margin-bottom: -8px; }
.hero-badge .badge { padding: 6px 14px; font-size: 14px; white-space: normal; }
.hero h1 { font-size: 58px; line-height: 1.05; text-wrap: balance; }
.hero .lead { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 560px; }
.hero-text .note { font-size: 14px; color: var(--muted); }

.preview { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 2px 4px rgba(15,27,45,.05), 0 24px 48px rgba(15,27,45,.10); display: flex; flex-direction: column; gap: 18px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.preview-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px 0 8px; }
.preview-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-3); font-size: 15px; }
.preview-fix { display: flex; flex-direction: column; gap: 6px; }
.preview-fix > span { font-size: 13px; font-weight: 600; color: var(--ink-3); }

.section-white { background: var(--surface); }
.section-band { background: var(--accent-band); color: var(--ink); }
.section-inner { padding-block: 88px; display: flex; flex-direction: column; gap: 36px; }
.section h2 { font-size: 42px; }
.section .intro { max-width: 720px; }
.section .intro-wide { max-width: 960px; }
.section .intro p { margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--ink-2); }

.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.module { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.module-live { background: var(--bg); border: 2px solid var(--ink); padding: 23px; }
.module-live:hover { background: var(--subtle); }
.module-top { display: flex; align-items: center; justify-content: space-between; }
.module-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.module-live .module-icon { background: var(--surface); }
.module h3, .how-steps h3, .trust-card h3 { font-size: 22px; }
.module p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.module-link { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* A feature tile on the light accent ground, its illustration on top. */
.module-soft { background: var(--accent-soft); padding-top: 0; overflow: hidden; }
.module-soft-art { display: block; margin: 0 -24px 4px; }
.module-soft-art .art { border-radius: 0; }
/* Start page: the heading holds the link and stretches it over the whole
   tile; the line "To the …" sits at the bottom of every tile. */
.module-tile { position: relative; align-items: center; text-align: center; }
.module-tile .module-link { margin-top: auto; padding-top: 4px; }
.module-tile-link { color: inherit; text-decoration: none; }
.module-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.module-tile-link:focus-visible { outline: none; }
.module-tile:has(.module-tile-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.module-tile:hover .module-link { text-decoration-thickness: 2px; }
/* One row per report: its illustration fills the left edge of the tile,
   title and text in the middle, the link on the right. The rows share
   their columns (subgrid), so texts and links line up from row to row. */
.modules-rows { grid-template-columns: 200px minmax(0, 1fr) auto; grid-auto-rows: 1fr; gap: 20px; }
.module-row { --row-pad: 16px; grid-column: 1 / -1; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-columns: subgrid; column-gap: 28px; align-items: center; padding: var(--row-pad) 23px var(--row-pad) 0; text-align: left; }
.module-row-text { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.module-row-text p { margin: 0; }
.module-row .module-link { margin-top: 0; padding-top: 0; text-align: right; }
.module-row.module-live { background: var(--accent-soft); border: 1px solid var(--line); padding-right: 24px; }
.module-row.module-live:hover { background: var(--accent-soft-hover); border-color: var(--accent); --art-ground: var(--accent-soft-hover); }
.module-row .badge-info { background: var(--surface); }
.module-art { display: block; align-self: stretch; margin-block: calc(-1 * var(--row-pad)); }
.art { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--accent-soft); }
.module-art .art { height: 100%; border-radius: 0; background: none; }
.art-pop { fill: var(--art-pop); }
.art-pop-line { stroke: var(--art-pop); }
/* Rings that part a highlight from the ground take the ground's colour. */
.art-gap { stroke: var(--art-ground, var(--accent-soft)); }
@media (max-width: 1000px) {
  .modules-rows { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .module-row { grid-template-columns: 180px minmax(0, 1fr); row-gap: 12px; }
  .module-row .module-art { grid-row: span 2; }
  .module-row .module-link { text-align: left; }
}
@media (max-width: 600px) {
  .module-row { grid-template-columns: minmax(0, 1fr); padding: 0 20px 20px; }
  .module-row .module-art { grid-row: auto; margin: 0 -20px 4px; }
  .module-row .art { height: 120px; }
}

.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.how-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.how-steps p, .trust-card p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }

.trust { padding-block: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 56px; }
.trust-text { display: flex; flex-direction: column; gap: 20px; }
.trust-text h2 { line-height: 1.1; }
.trust-text > p { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.trust-list { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.trust-list li { display: flex; gap: 12px; }
.trust-list .icon { color: var(--accent); margin-top: 2px; }
.trust-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; align-content: start; }
.trust-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }

.cta-wrap { padding-block: 72px; }
.cta { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 48px 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.cta h2 { font-size: 38px; }
.cta p { margin-top: 10px; font-size: 18px; color: var(--ink-2); }

/* ---- Plain pages (notices, 404) ---- */
.plain { padding-block: 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.plain > * { max-width: 720px; }
.plain h1 { font-size: 40px; }
.plain p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* ---- Legal pages: side navigation and a readable text column ---- */
.legal { padding-block: 56px 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.legal-nav { flex: 0 1 220px; display: flex; flex-direction: column; gap: 4px; }
.side-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 12px 8px; }
.legal-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius); font-size: 15px; color: var(--ink-3); text-decoration: none; }
.legal-nav a:hover { background: var(--subtle); color: var(--ink); }
.legal-nav a[aria-current="page"] { background: var(--subtle); font-weight: 600; color: var(--ink); }
.legal-text { flex: 1 1 480px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 32px; }
.legal-text h1 { font-size: 44px; }
.legal-text section { display: flex; flex-direction: column; gap: 10px; }
.legal-text h2 { font-size: 20px; font-weight: 600; }
.legal-text p { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal-text .notice-text { color: inherit; }
.legal-text section { scroll-margin-top: 90px; }
.legal-text li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal-text ul { margin: 0; padding-left: 20px; list-style: disc; }
.legal-text ol { counter-reset: para; }
.legal-text ol > li { counter-increment: para; position: relative; padding-left: 36px; }
.legal-text ol > li::before { content: "(" counter(para) ")"; position: absolute; left: 0; }
.legal-text li > ul { margin-top: 6px; }
.legal-text li + li { margin-top: 6px; }
.legal-text .lead { font-size: 19px; line-height: 1.5; }
.stats-optout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.legal-toc { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; }

/* ---- Accessibility preferences ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .modal[open], .modal[open]::backdrop { animation: none; }
}
/* Windows high contrast: keep buttons and the current choice visible. */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn:disabled { border-color: GrayText; color: GrayText; }
  .lang-panel a[aria-current="true"], .legal-nav a[aria-current="page"], .sub-drop .nav-drop-panel a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .site-nav { display: none; }
  .menu { display: block; }
  /* Only the hamburger is left in the header: the rest sits in the menu. */
  .site-actions > .btn, .site-actions > form, .site-actions > .lang-menu, .site-actions > .user-menu { display: none; }
  /* The open menu fills the screen below the header and covers the page. */
  .menu[open] .menu-panel { position: fixed; top: var(--menu-top, var(--header-h)); bottom: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain; border-bottom: 0; box-shadow: none; }
  html:has(.menu[open]) { overflow: hidden; }
}

@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }
  :root { --header-h: 60px; }
  .brand-name { font-size: 19px; }
  .site-actions > .btn { display: none; }
  .site-actions { gap: 6px; }
  .hero { padding-block: 36px 40px; gap: 32px; }
  .hero-text { gap: 20px; }
  .hero-badge { margin-bottom: -6px; }
  .hero-badge .badge { padding: 5px 12px; font-size: 13px; }
  .hero h1 { font-size: 38px; line-height: 1.08; }
  .hero .lead { font-size: 17px; }
  .preview { padding: 16px; }
  .section-inner { padding-block: 40px; gap: 24px; }
  .section h2, .cta h2 { font-size: 28px; }
  .trust { padding-block: 40px; gap: 28px; }
  .trust-card, .how-steps li { padding: 20px; }
  .cta-wrap { padding-block: 40px; }
  .cta { padding: 28px 20px; border-radius: 16px; }
  .cta .row, .cta .btn { width: 100%; }
  .site-footer-inner { flex-direction: column; align-items: flex-start; padding-block: 20px; gap: 10px; }
  .plain { padding-block: 40px; }
  .plain h1 { font-size: 30px; }
  .legal { padding-block: 0 48px; gap: 24px; }
  .legal-nav, .legal-toc { display: none; }
  .legal-bar { display: block; flex: 0 0 calc(100% + 32px); margin-inline: -16px; }
  .toc-drop { display: block; }
  .legal-text h1 { font-size: 32px; }
}

/* ---- More components (forms, notices, status) ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.choice:hover { border-color: var(--muted); }
.choice:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice:has(input:checked) { border: 2px solid var(--accent); padding: 11px 13px; }
.choice input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.choice-title { display: block; font-size: 15px; font-weight: 600; }
.choice-text { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.card h2 { font-size: 15px; font-weight: 600; }
.card p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.form-card { gap: 14px; }
.notice-title { font-weight: 600; font-size: 15px; }
.notice-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.notice-error { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.status { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.status:empty { display: none; }
.status-ok { color: var(--ok); }
.status-error { color: var(--danger); }
.terminal { margin: 0; background: var(--code-bg); color: var(--line); border-radius: 12px; padding: 14px 16px; font: 500 12.5px/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal .hl { color: var(--accent-light); }
.unlock-card { width: 100%; max-width: 520px; }
.unlock-card h2 { font-size: 18px; }

/* ---- Setup layout ---- */
.app-header { height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: 32px; background: var(--ink); color: #fff; --focus: var(--accent-light); }
.app-header .brand-name { font-size: 20px; color: #fff; }
.app-header .tag { margin-left: 8px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--dark-2); color: var(--line); }
.app-header .meta { font-size: 14px; color: var(--line-2); }

.setup { min-height: 100vh; display: flex; flex-direction: column; }
.setup form.setup-form { flex-grow: 1; display: flex; flex-direction: column; }
.stepper { min-height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px; }
.stepper ol { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stepper li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.stepper .num { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.stepper .done { color: var(--ink-3); }
.stepper .done .num { width: 28px; height: 28px; border: 0; background: var(--ok-bg); color: var(--ok); }
.stepper .current { color: var(--ink); font-weight: 600; }
.stepper .current .num { width: 28px; height: 28px; border: 0; background: var(--ink); color: #fff; font-weight: 600; }
.stepper .bar { width: 40px; height: 2px; background: var(--line); }
.stepper .bar.done { background: var(--ink); }

/* Setup screens are designed at 1280: the content is centred beyond that. */
.setup-main { flex-grow: 1; display: flex; gap: 40px; padding: 28px max(64px, calc((100% - 1280px) / 2 + 64px)); align-items: flex-start; }
.setup-col { flex-grow: 1; display: flex; flex-direction: column; gap: 16px; max-width: 640px; min-width: 0; }
.setup-col.narrow { max-width: 520px; }
.setup-col h1 { font-size: 30px; }
.setup-col .sub, .setup-aside .sub { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.setup-aside { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.setup-footer { height: 76px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: max(48px, calc((100% - 1280px) / 2 + 48px)); background: var(--surface); border-top: 1px solid var(--line); gap: 16px; }
/* Mail step: SMTP fields only when SMTP is chosen. */
.setup-form:has(input[name="transport"][value="log"]:checked) .smtp-fields { display: none; }
/* Unseal key: the 12 words, and the snippet for the chosen way to pass it. */
.words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-weight: 400; }
.words li { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.words .n { color: var(--muted); font-size: 12px; width: 16px; text-align: right; }
.unseal-choice .snippet { display: none; }
.unseal-choice:has(#unseal-env:checked) .snippet-env, .unseal-choice:has(#unseal-file:checked) .snippet-file { display: block; }

/* Script-driven flows (admin account, verification) */
.setup-app { flex-grow: 1; display: flex; flex-direction: column; }
.flow-view { flex-grow: 1; display: flex; justify-content: center; align-items: center; gap: 64px; padding: 32px 24px; }
.flow-col { width: 520px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
.flow-col h1 { font-size: 34px; line-height: 1.15; outline: none; }
.round-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.round-lg { width: 64px; height: 64px; }
.round-ok { background: var(--ok-bg); color: var(--ok); }
.checklist { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 600; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li > div { display: flex; flex-direction: column; gap: 2px; }
.checklist .muted { font-size: 13px; font-weight: 400; }
.checklist .ok { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ok-bg); color: var(--ok); }

@media (max-width: 1100px) {
  .setup-main { flex-direction: column; padding: 24px 32px; }
  .setup-aside { width: 100%; max-width: 640px; }
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
  .app-header { padding-inline: 16px; }
  .app-header .meta { display: none; }
  .stepper .label, .stepper .bar { display: none; }
  .setup-main { padding: 20px 16px; }
  .setup-footer { padding-inline: 16px; }
  .words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-col h1 { font-size: 28px; }
}

/* ---- Auth pages (login, registration, password) ---- */
.btn-sm { min-height: 36px; padding: 0 10px; font-size: 14px; }
.btn-block { width: 100%; }
.center { justify-content: center; text-align: center; }
.row.between { justify-content: space-between; }
.small { font-size: 13px; line-height: 1.5; }
.strong { font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
.check.top { align-items: flex-start; line-height: 1.45; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.check.top input { margin-top: 1px; }
.field-head { display: flex; justify-content: space-between; gap: 12px; }
.field-head a { font-weight: 400; }
.notice-info { background: var(--info-bg); border-color: transparent; color: var(--info); }
.auth-split { min-height: 100vh; display: flex; }
.auth-aside { width: 520px; flex-shrink: 0; background: var(--ink); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; --focus: var(--accent-light); }
.auth-aside .brand-name { color: #fff; }
.auth-claim { display: flex; flex-direction: column; gap: 28px; }
.auth-claim h2 { font-size: 38px; line-height: 1.12; }
.auth-claim ul { display: flex; flex-direction: column; gap: 14px; }
.auth-claim li { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--line); }
.auth-claim .icon { color: var(--accent-light); margin-top: 2px; }
.auth-foot { margin: 0; font-size: 13px; color: var(--line-2); display: flex; flex-wrap: wrap; gap: 8px; }
.auth-foot a { color: inherit; }
.auth-foot a:hover { color: #fff; }
.auth-split > .auth-mobile-foot, .auth-split > .auth-mobile-head { display: none; }
.auth-main { position: relative; flex-grow: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 88px 24px 40px; }
.auth-lang { position: absolute; top: 24px; right: 24px; }
.auth-form { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; }
.auth-form h1 { font-size: 32px; line-height: 1.15; outline: none; }
.auth-form .sub { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.auth-alt { font-size: 15px; color: var(--ink-2); }
.auth-alt a { font-weight: 600; }
.or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
/* Login in two steps: the address, then the password */
.login-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-wrap: anywhere; }
/* Registration "coming soon": the form is shown, but greyed out */
.register-fields { gap: 18px; }
.register-fields:disabled { opacity: .5; }
.register-fields:disabled * { cursor: not-allowed; }
.inp-code { height: 56px; font-size: 26px; letter-spacing: 8px; text-align: center; }

@media (max-width: 1000px) {
  .auth-aside, .auth-lang { display: none; }
  .auth-split { flex-direction: column; }
  .auth-split > .auth-mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .auth-split > .auth-mobile-foot { display: block; padding: 24px 16px 32px; }
  .auth-mobile-foot .auth-foot { color: var(--muted); }
  .auth-mobile-foot .auth-foot a:hover { color: var(--ink); }
  .auth-main { padding: 24px 16px 40px; align-items: flex-start; }
}

/* ---- App shell (logged in) ---- */
/* Same width as the public header: logo left, navigation centre, the rest right. */
.app-bar { background: var(--ink); border-bottom: 1px solid var(--ink); color: #fff; --focus: var(--accent-light); position: sticky; top: 0; z-index: 30; transition: transform .2s ease; }
.app-bar-inner { min-height: var(--header-h); display: flex; align-items: stretch; justify-content: space-between; gap: 24px; }
.app-bar-inner > .brand { align-self: center; }
.app-bar-right { display: flex; align-items: center; gap: 12px; }
.app-bar .brand-name { color: #fff; font-size: 20px; }
.app-nav { display: flex; gap: 24px; font-size: 15px; }
/* App navigation: grey bar on hover, accent bar + bold for the current page. */
.app-nav a, .app-nav .nav-drop > summary { color: var(--line-2); text-decoration: none; display: flex; align-items: center; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.app-nav a:hover, .app-nav .nav-drop > summary:hover { color: #fff; border-bottom-color: var(--muted); }
.app-nav a[aria-current="page"], .app-nav .nav-drop > summary[aria-current] { color: #fff; font-weight: 600; border-bottom-color: var(--accent-light); }
.app-nav a:focus-visible, .app-nav .nav-drop > summary:focus-visible { outline-offset: -3px; }
.app-nav .nav-drop { display: flex; }
.app-nav .nav-drop-panel { top: calc(100% - 3px); }
.app-nav .nav-drop-panel a { color: var(--ink); border: 0; }
.app-nav .nav-drop-panel a.drop-mine { color: var(--accent); }
.app-bar-right > .lang-menu .lang-toggle { color: var(--line-2); }
.app-bar-right > .lang-menu .lang-toggle:hover { background: var(--dark-2); color: #fff; }
.plan-badge { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--dark-2); color: var(--line); white-space: nowrap; }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover .avatar { box-shadow: 0 0 0 3px var(--muted); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: 260px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 16px 32px rgba(15,27,45,.16); padding: 8px; display: flex; flex-direction: column; --focus: var(--accent); }
.user-menu-who { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 14px; overflow-wrap: anywhere; }
.user-menu-who > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avatar-menu { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
.user-menu-links { display: flex; flex-direction: column; gap: 2px; }
.user-menu-links a, .user-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; text-decoration: none; text-underline-offset: 4px; cursor: pointer; }
.user-menu-links a:hover, .user-menu-item:hover { background: var(--subtle); text-decoration: underline; text-decoration-thickness: 2px; }
.user-menu-links a[aria-current="page"] { font-weight: 600; }
.app-main { display: flex; flex-direction: column; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head .sub { margin-top: 6px; font-size: 15px; color: var(--muted); }
.page-head .sub-by { margin-top: 2px; }
/* The title side gives way to the actions, which keep one row on wide screens. */
.page-head > :first-child { min-width: 0; }
@media (min-width: 761px) { .page-head > .row { flex-wrap: nowrap; flex-shrink: 0; } }

/* ---- Account and administration: side navigation and content ---- */
.admin { flex-grow: 1; display: flex; max-width: var(--container); width: 100%; margin-inline: auto; }
.admin-nav { width: 250px; flex-shrink: 0; padding: 24px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.admin-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius); font-size: 15px; color: var(--ink-3); text-decoration: none; }
.admin-nav a:hover { background: var(--subtle); color: var(--ink); }
.admin-nav a[aria-current="page"] { background: var(--subtle); color: var(--ink); font-weight: 600; }
.admin-nav a .grow, .grow { flex-grow: 1; min-width: 0; }
.admin-nav a .badge { font-size: 11px; padding: 2px 6px; }
.admin-main { flex-grow: 1; min-width: 0; padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 16px; }
.admin-main h1 { font-size: 30px; }
.admin-main h2 { font-size: 16px; font-weight: 600; font-family: var(--font); letter-spacing: 0; }
.h3 { font-size: 14px; font-weight: 600; margin-top: 6px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.admin-col, .admin-aside, .settings-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.aside-label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.split-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* A section head with a toolbar: the toolbar moves under the text when both don't fit. */
.split-head.with-tools { flex-wrap: wrap; align-items: flex-end; }
.split-head.with-tools > :first-child { flex: 1 1 420px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.toolbar .inp { width: 260px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* position: the sr-only labels of the cells stay inside the scrolling card. */
.table-card { padding: 0; overflow-x: auto; position: relative; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line-3); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .right, .right { text-align: right; }
.row.end { justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
.nowrap { white-space: nowrap; }
.block { display: block; }
.user-cell { display: flex; gap: 12px; align-items: center; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.avatar-mute { background: var(--subtle); color: var(--ink-3); }
.inp-sm { height: 36px; width: auto; padding: 0 8px; font-size: 14px; }
.rows { display: flex; flex-direction: column; }
.rows li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--line-3); font-size: 14px; }
.rows li:first-child { border-top: 0; }
.facts { margin: 0; display: flex; flex-direction: column; }
.facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-3); font-size: 14px; }
.facts > div:first-child { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; text-align: right; }
.copy-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.copy-value { flex-grow: 1; font-size: 13px; word-break: break-all; background: var(--surface); border-radius: 8px; padding: 8px 10px; color: var(--ink); }
.words-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; padding: 14px 16px; background: var(--bg); border-radius: var(--radius); font-size: 15px; }
.totp-enrol { display: flex; gap: 20px; align-items: center; }
.qr { width: 148px; height: 148px; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.qr svg { width: 100%; height: 100%; }
.is-disabled { opacity: .5; }
.status:not(.status-ok):not(.status-error) { color: var(--muted); font-weight: 400; }

@media (max-width: 1100px) {
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .app-nav, .plan-badge, .app-bar-right > .lang-menu, .user-menu { display: none; }
  .app-bar .menu-panel { color: var(--ink); }
  .app-bar .menu-toggle { color: #fff; }
  .app-bar .menu-toggle:hover { background: var(--dark-2); }
  .admin { flex-direction: column; min-height: 0; }
  .admin-nav { display: none; }
  .admin-bar { display: block; padding-inline: 28px; }
}
@media (max-width: 760px) {
  .admin-main { padding: 20px 16px 40px; }
  .admin-bar { padding-inline: 16px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .choices { grid-template-columns: 1fr; }
  .toolbar .inp { width: 100%; }
  .totp-enrol { flex-direction: column; align-items: flex-start; }
}

/* Users table: compact, and without the last-login column where the
   invitation form sits beside it. */
.table-users th, .table-users td { padding-inline: 10px; }
@media (min-width: 1101px) and (max-width: 1500px) {
  .table-users th:nth-child(6), .table-users td:nth-child(6) { display: none; }
}

/* Company login: domain chips and copyable values */
.textarea { height: auto; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.domains { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 400; }
.domain { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; }
.domain-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1; }
.domain-x:hover { background: var(--line); color: var(--ink); }
.domain-input { width: 190px; height: 36px; }
.copy-field { display: flex; flex-direction: column; gap: 4px; }
.copy-field .copy-row { margin: 0; }
.copy-field .copy-value { background: var(--bg); font-size: 12.5px; }

/* ---- Reports ---- */
.app-page { padding-block: 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.meter { height: 8px; border-radius: 999px; background: var(--subtle); overflow: hidden; }
.meter-value { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.stat h2 { font-size: 14px; font-weight: 600; color: var(--muted); }
.stat-value { font-size: 28px; font-weight: 700; }
.stat p, .stat-foot { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.stat-foot { display: flex; justify-content: space-between; gap: 12px; }
.table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.table-tools .search .inp { width: 240px; max-width: 100%; height: 36px; }
.table-empty { padding: 28px 16px; text-align: center; }

/* Administration · Logs: filter row, rows that fold out a trace. */
.logs-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.logs-filter .field { font-size: 13px; }
.logs-filter select.inp { width: 200px; max-width: 100%; }
.logs-filter input.inp { width: 240px; max-width: 100%; font-size: 14px; }
.logs-total { margin-left: auto; padding-bottom: 10px; font-size: 13px; }
.subnav .badge { margin-left: 8px; padding: 1px 8px; font-size: 12px; }
.logs-table td { vertical-align: middle; }
.logs-target { overflow-wrap: anywhere; }
.logs-toggle .chev, .logs-toggle svg { transition: transform .15s ease; }
.logs-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.logs-open > td, .logs-detail > td { background: var(--bg); }
.logs-open > td { border-bottom: 0; }
.logs-detail > td { padding: 4px 16px 20px; }
.logs-detail-body { display: flex; flex-direction: column; gap: 16px; }
.logs-summary { margin: 0; font-size: 15px; line-height: 1.55; max-width: 80ch; }
.logs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; }
.logs-meta-item { display: flex; flex-direction: column; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.logs-meta-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.logs-h { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.logs-steps { margin: 0; padding: 0 14px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.logs-step { display: grid; grid-template-columns: 28px 76px minmax(0, 1fr) 48px 64px; gap: 4px 10px; align-items: baseline; padding: 8px 0; font-size: 13px; }
.logs-step + .logs-step { border-top: 1px solid var(--line-3); }
.logs-step-num { color: var(--muted); }
.logs-step-via { font-size: 12px; font-weight: 600; }
.logs-step-what { overflow-wrap: anywhere; }
.logs-step-note { grid-column: 3 / -1; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.logs-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.logs-copy-head .logs-h { margin: 0; }
.logs-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; max-height: 420px; overflow: auto; }
.logs-more { display: flex; justify-content: center; padding: 12px; }
/* Narrow screens: each entry a stacked block, the toggle on the right. */
@media (max-width: 760px) {
  .logs-total { margin-left: 0; padding-bottom: 0; }
  .logs-table thead { display: none; }
  .logs-table, .logs-table tbody, .logs-detail, .logs-detail > td { display: block; }
  .logs-table tbody > tr:not(.logs-detail) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .logs-table tbody > tr:not(.logs-detail) > td { display: block; grid-column: 1; padding: 0; border: 0; }
  .logs-table tbody > tr:not(.logs-detail) > td:last-child { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
  .logs-table tbody > tr.logs-open { background: var(--bg); border-bottom: 0; }
  .logs-detail > td { border-bottom: 1px solid var(--line); }
  .logs-step { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .logs-step-via { grid-column: 2; }
  .logs-step-what { grid-column: 1 / -1; }
  .logs-step-note { grid-column: 1 / -1; }
}
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; font-size: 14px; color: var(--muted); }
.pager-nav, .pager-pages { display: flex; align-items: center; gap: 4px; }
/* Only the current page and the one under the pointer carry a fill. */
.pager-nav .btn { min-width: 36px; background: transparent; text-decoration: none; }
.pager-nav .btn:hover:not(:disabled) { background: var(--line); }
.pager-nav .btn[aria-current="page"], .pager-nav .btn[aria-current="page"]:hover { background: var(--ink); color: #fff; cursor: default; }
.pager-nav .btn:disabled { background: transparent; color: var(--muted-2); }
.pager-gap { padding: 0 4px; }
.table td.mono { font-size: 13.5px; }
/* Tables whose rows open something: the whole row is the target, with a
   grey row and an underlined name on hover (not colour alone). */
.table-open tbody tr { cursor: pointer; }
.table-open tbody tr:hover td { background: var(--bg); }
.table-open tbody tr:hover .row-target { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.table-open tbody tr:hover .btn-g { background: var(--line); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.row-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.badge-new { padding: 1px 7px; font-family: var(--font); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; background: var(--accent-soft); color: var(--accent-hover); }

.report { display: flex; flex-direction: column; gap: 16px; }
.report-target { font-size: 28px; font-weight: 500; word-break: break-all; }
/* The devices of a performance report: one button each, with its score. */
.facet-switch { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.facet-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.facet-pick:hover { background: var(--bg); color: var(--ink); }
.facet-pick[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-hover); }
.facet-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.report-progress, .report-scores { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.report h2 { font-size: 16px; font-weight: 600; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-fail { background: var(--score-fail); }
.dot-warn { background: var(--score-warn); }
.dot-ok { background: var(--score-ok); }
.rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px 12px; }
.ring-none .ring-value { stroke: none; }
.ring-none text { fill: var(--muted-2); }
.report-findings { padding: 0; }
.report-findings-head { padding: 18px 20px 6px; flex-wrap: wrap; }
.audit-group { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 16px 20px 8px; }
.audit, .audit-none { border-top: 1px solid var(--line-3); }
.audit > summary, .audit-none { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 20px; font-size: 15px; }
.audit > summary { cursor: pointer; list-style: none; }
.audit > summary::-webkit-details-marker { display: none; }
.audit > summary:hover { background: var(--bg); }
.audit > summary .chev { transition: transform .15s ease; color: var(--muted); display: inline-flex; }
.audit[open] > summary .chev { transform: rotate(180deg); }
.audit-title { flex-grow: 1; font-weight: 500; }
.audit[open] .audit-title { font-weight: 600; }
.audit-cat { font-size: 13px; color: var(--muted); white-space: nowrap; }
.audit-none { color: var(--ink-2); }
.audit-passed > summary .audit-cat { overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.audit-passed > .audit > summary { padding-left: 52px; }
.audit-passed > .audit .audit-body { padding-left: 84px; }
.audit-body { padding: 4px 20px 18px 52px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.audit-body .strong { color: var(--ink); }
.fix { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.fix-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.fix .copy-row { margin: 0; }
.fix .copy-value { background: var(--surface); border: 1px solid var(--line-3); white-space: pre-wrap; }
.fix-hint { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; }
  .audit-cat { display: none; }
  .audit-body { padding-left: 20px; }
  .report-target { font-size: 22px; }
}

/* ---- Module page (e-mail check) ---- */
.module-hero { padding-block: 56px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.module-hero h1 { font-size: 48px; line-height: 1.08; text-wrap: balance; }
.module-hero .lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 760px; }
.pricing-hero, .guide-hero { align-items: center; text-align: center; }
.guide-hero .lead { max-width: 1000px; text-wrap: balance; }
.check-card { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; font: 500 15px var(--font); color: var(--muted); cursor: pointer; }
.tabs [role="tab"]:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.check-row { display: flex; gap: 10px; }
.check-row .inp { flex: 1 1 auto; width: auto; min-width: 0; }
.btn-icon { padding: 0; width: 52px; flex-shrink: 0; }
.check-options { padding: 14px 16px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.next-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 22px; border-radius: 12px; background: var(--accent-deep); color: #fff; --focus: #fff; }
.next-step-text { display: flex; gap: 14px; align-items: flex-start; }
.next-step-icon { color: #fff; margin-top: 2px; }
.next-step h2 { font-size: 18px; }
.next-step p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--accent-soft); max-width: 620px; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--subtle); color: var(--ink); }
.teaser-grid { padding-block: 32px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px; }
.teaser { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
a.teaser:hover { border-color: var(--ink); color: var(--ink); }
.teaser-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.teaser h2 { font-size: 22px; line-height: 1.25; }
.teaser h2 a { text-decoration: none; }
.teaser p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.teaser-link { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
a.chip { display: inline-flex; align-items: center; text-decoration: none; }
a.chip:hover { border-color: var(--ink); }
.prose-section { max-width: 820px; gap: 16px; }
.prose-section h2 { font-size: 32px; }
.prose-section p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
/* Questions as an accordion: the question opens its answer. */
.faq-list { border-bottom: 1px solid var(--line); }
/* On the dark band (like "Mit Konto geht mehr" on the start page). */
.faq-band .prose-section { margin-inline: auto; }
.faq-band .prose-section p { color: var(--ink-2); }
.faq-band .faq-list, .faq-band .faq-item > summary { border-color: var(--line-2); }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary h3 { margin: 0; font-size: 18px; font-weight: 600; }
.faq-item > summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.faq-item > summary .icon { flex-shrink: 0; color: var(--muted); transition: transform .15s ease; }
.faq-item[open] > summary .icon { transform: rotate(180deg); }
.faq-item > p { margin: 0 0 18px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.tier { padding: 24px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 18px; align-content: start; }
.tier h3 { font-size: 16px; font-weight: 600; }
.tier-price { font-size: 36px; font-weight: 700; }
.plan-price { font-size: 20px; font-weight: 600; margin: 0; }
.tier-pro { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
.tier-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tier .btn { margin-top: auto; }
.tier-drop { margin-top: auto; }
.tier-drop > summary.btn { width: 100%; }
.tier-drop .nav-drop-panel { left: 0; right: 0; min-width: 0; }
.check-card + .next-step { margin: 28px 0 56px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks li svg { color: var(--ok); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 760px) {
  .module-hero { padding-block: 32px 20px; }
  .module-hero h1 { font-size: 34px; }
  .check-card { padding: 16px; }
  .check-row { flex-wrap: wrap; }
  .check-row .inp { flex-basis: 100%; }
  .check-row .btn-a { flex: 1; }
}

/* ---- Guide and articles ---- */
.guide { padding-block: 8px 64px; display: flex; flex-direction: column; gap: 40px; }
.guide-topic { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.guide-topic > h2 { font-size: 26px; }
.guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.guide-list .teaser h3 { font-size: 18px; line-height: 1.3; }
/* Not found */
.notfound { padding-block: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.notfound-art { border-radius: 20px; background: var(--accent-soft); overflow: hidden; line-height: 0; }
.notfound-art svg { display: block; width: min(420px, 100%); height: auto; }
.notfound h1 { font-size: 48px; line-height: 1.08; text-wrap: balance; }
.notfound .lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 640px; text-wrap: balance; }
.notfound-actions { justify-content: center; flex-wrap: wrap; }
.notfound-cta { max-width: 860px; padding-block: 16px 64px; }
.notfound-cta .next-step { padding: 28px 32px; border-radius: 16px; }
@media (min-width: 761px) { .notfound-cta .next-step { flex-wrap: nowrap; } .notfound-cta .btn { flex-shrink: 0; } }
.notfound-cta h2 { font-size: 22px; }
.notfound-cta p { font-size: 15px; }
@media (max-width: 760px) { .notfound h1 { font-size: 34px; } .notfound { padding-block: 32px 16px; } }
/* Tiles like the rankings index: four in a row at 1440. */
.guide-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.guide-area { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); }
a.guide-area:hover { border-color: var(--accent); color: var(--ink); }
.guide-area-art { display: block; width: 100%; height: auto; aspect-ratio: 280 / 150; background: var(--accent-soft); }
.guide-area-text { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 20px; }
.guide-area h2 { font-size: 22px; line-height: 1.25; }
.guide-area p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.guide-area-count { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 600; color: var(--accent); }
.guide-area-soon { border-style: dashed; }
.guide-area-soon .guide-area-art { opacity: .5; }
.guide-area-soon h2 { color: var(--ink-2); }
.module-hero .crumbs + h1 { margin-top: -4px; }
/* Head of module, guide area and article pages: a band over the full
   width with the module's illustration (canvas: SecurityCheck, GuideArea,
   GuideArticle; on phones GuideAreaMobile). The heading sits beside the
   illustration, lead and chips below it; on wide screens the illustration
   takes the right column. */
.hero-band { background: var(--accent-soft); border-bottom: 1px solid var(--line); --art-ground: var(--accent-soft); }
.hero-band-inner { padding-block: 40px 44px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 34%, 420px); grid-template-areas: "head art" "body art"; column-gap: 48px; row-gap: 16px; }
.hero-band-head { grid-area: head; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.hero-band-body { grid-area: body; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.hero-band-art { grid-area: art; align-self: center; }
.hero-band-art .art { background: none; border-radius: 0; }
.hero-band h1 { font-size: 48px; line-height: 1.08; text-wrap: balance; }
.hero-band .lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 640px; }
.hero-band .crumbs { flex-wrap: wrap; row-gap: 4px; }
.hero-band .chips { margin-top: 4px; }
.hero-band-narrow .hero-band-inner { max-width: 860px; padding-block: 36px 40px; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 36px; row-gap: 14px; }
.hero-band-narrow .hero-band-head { gap: 14px; }
.hero-band-narrow h1 { font-size: 40px; line-height: 1.12; }
.hero-band + .wrap { padding-top: 36px; }
@media (max-width: 760px) {
  .hero-band-inner, .hero-band-narrow .hero-band-inner { padding-block: 24px 28px; grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "head art" "body body"; column-gap: 16px; row-gap: 16px; }
  .hero-band-head, .hero-band-narrow .hero-band-head { align-self: center; gap: 12px; }
  .hero-band h1, .hero-band-narrow h1 { font-size: 30px; line-height: 1.1; }
  .hero-band .lead { font-size: 17px; }
  .hero-band .chips { margin-top: 0; }
}
.article-related { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.article-related h2 { font-size: 18px; }
.article-related ul { display: flex; flex-direction: column; gap: 8px; }
.article-related a { font-weight: 600; }
.article { max-width: 860px; padding-block: 32px 64px; display: flex; flex-direction: column; gap: 24px; }
.prose { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 16px; }
.prose h2 { font: 700 26px/1.25 var(--font-head); color: var(--ink); margin-top: 36px; }
.prose > :first-child { margin-top: 0; }
.prose h3 { font: 600 19px/1.3 var(--font); color: var(--ink); margin-top: 28px; }
.prose ul, .prose ol { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose strong { color: var(--ink); }
.prose code { font: 0.9em var(--font-mono); background: var(--subtle); padding: 2px 6px; border-radius: 6px; color: var(--ink); overflow-wrap: anywhere; }
.prose pre { background: var(--ink); color: #fff; padding: 14px 16px; border-radius: 10px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: 14px; overflow-wrap: normal; }
/* Web server examples with a switch (markdown: ```nginx then ```apache):
   the server names are tabs above the code, the chosen one in the code's
   colour, the other a little lighter. */
.code-switch { border: 0; margin-inline: 0; margin-bottom: 0; padding: 0; min-width: 0; gap: 0; }
.code-switch-bar { display: flex; gap: 4px; }
.code-switch-bar label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px 8px 0 0; background: #3E4B61; color: #E9EDF2; font-size: 14px; cursor: pointer; }
.code-switch-bar label:hover { background: #33415A; color: #fff; }
.prose .code-switch pre { display: none; margin: 0; border-radius: 0 10px 10px 10px; }
.code-switch input[value="nginx"]:checked ~ pre[data-lang="nginx"],
.code-switch input[value="apache"]:checked ~ pre[data-lang="apache"] { display: block; }
.code-switch input[value="nginx"]:checked ~ .code-switch-bar [data-lang="nginx"],
.code-switch input[value="apache"]:checked ~ .code-switch-bar [data-lang="apache"] { background: var(--ink); color: #fff; font-weight: 600; }
.code-switch input[value="nginx"]:focus-visible ~ .code-switch-bar [data-lang="nginx"],
.code-switch input[value="apache"]:focus-visible ~ .code-switch-bar [data-lang="apache"] { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Administration · content */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.area { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.area.mono { font-size: 13.5px; }
.editor-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.preview-pane { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-height: 200px; max-height: 520px; overflow-y: auto; font-size: 15px; background: var(--bg); }
.preview-pane h2 { font-size: 20px; margin-top: 20px; }
.preview-pane h3 { font-size: 16px; }
@media (max-width: 1100px) { .grid-3, .editor-cols { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tabs of Administration · Content: links, each tab has its own address. */
.subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; font: 500 15px var(--font); color: var(--muted); text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
/* A tool at the right end of the tabs (the rankings' AI assistant). */
.subnav-tool { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.subnav-tool:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.subnav-tool[aria-expanded="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Rankings: the editor's table and the public page (canvas: AdminRanking, Ranking). */
.table-scroll:has(> .ranking-table) { margin-inline: -18px; border-top: 1px solid var(--line); }
.ranking-table td { vertical-align: top; }
.ranking-table th, .ranking-table td { padding-inline: 10px; }
.ranking-table .row.end { gap: 2px; }
.ranking-table td:not(.ranking-site) { padding-top: 16px; }
/* The values share one column width, centred, as on the public page. */
.ranking-table .ranking-value { width: 128px; min-width: 128px; padding-inline: 12px; text-align: center; }
.ranking-table th.ranking-value { white-space: normal; }
.ranking-table .ranking-value .ring { display: block; margin-inline: auto; }
.ranking-site-fields { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.4fr); gap: 8px; }
.ranking-site-fields .inp { width: 100%; }
.ranking-settings { align-items: start; }
.with-icon { display: flex; align-items: center; gap: 8px; }
.assistant-fields { align-items: end; }
.assistant-web { min-height: 44px; }
.table-rankings th, .table-rankings td { padding-inline: 10px; }
.table-rankings td:first-child { min-width: 220px; }
.place { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font: 700 17px var(--font-head); background: var(--subtle); color: var(--ink); }
.place-1 { background: var(--accent); color: #fff; }
.score-pill { min-width: 44px; justify-content: center; font-size: 15px; font-weight: 700; }
.segmented [role="tab"] { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font: 600 14px var(--font); color: var(--ink-3); cursor: pointer; }
.segmented [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15,27,45,.12); }
.field-head:has(.segmented) { align-items: center; }
/* The visual editor of a ranking's text: bold, italic, underline. */
.rich { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); overflow: hidden; font-weight: 400; }
.rich:focus-within { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.rich-tools { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg); }
.rich-tools button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; font: 16px var(--font); color: var(--ink); cursor: pointer; }
.rich-tools button i { font-family: Georgia, serif; font-size: 17px; }
.rich-tools button:hover { background: var(--subtle); }
.rich-tools button[aria-pressed="true"] { background: var(--line); }
.rich-area { min-height: 220px; max-height: 560px; overflow-y: auto; padding: 14px 16px; font-size: 15px; }
.rich-area:focus { outline: none; }
.prose u { text-underline-offset: 3px; }
.ranking-image { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: center; }
.ranking-image-preview { background: var(--accent-soft); border-radius: 10px; padding: 8px 20px; --art-ground: var(--accent-soft); }
.ranking-image-preview .art { background: none; }
.ranking-image-preview img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; }
.ranking-image-preview.has-image { padding: 0; background: var(--bg); }
.ranking-image-preview.has-image .art { display: none; }
.file-button:focus-within { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.hero-band-img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; border-radius: var(--radius); }
.ranking-report { display: block; width: fit-content; margin-top: 6px; font-size: 14px; font-weight: 600; }
.ranking-report::after { content: " →"; }
.ranking-tile-art.has-image { padding: 0; }
.ranking-tile-art img { display: block; width: 100%; aspect-ratio: 280 / 150; object-fit: cover; }
@media (max-width: 760px) { .ranking-image { grid-template-columns: 1fr; } }
.ranking { padding-block: 8px 64px; display: flex; flex-direction: column; gap: 40px; }
.ranking-text { max-width: 760px; }
.ranking-result { display: flex; flex-direction: column; gap: 14px; }
.ranking-result-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; }
.ranking-result-head h2 { font-size: 30px; }
.ranking-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.ranking-list { width: 100%; border-collapse: collapse; }
.ranking-list th { text-align: left; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent-deep); padding: 12px 16px; white-space: nowrap; }
.ranking-list td { padding: 16px; border-bottom: 1px solid var(--line-3); vertical-align: middle; }
.ranking-list tr:last-child td { border-bottom: 0; }
.ranking-place { width: 72px; }
/* The values (total and each module) share one column width, centred;
   the website takes the rest. */
.ranking-list th:nth-child(n+3), .ranking-total, .ranking-list .ranking-module { width: 128px; padding-inline: 12px; text-align: center; }
.ranking-list th:nth-child(n+3) { white-space: normal; }
.ranking-total .ring { display: block; margin-inline: auto; }
.ranking-list .place { width: 44px; height: 44px; font-size: 20px; }
.ranking-name { display: block; font-size: 20px; font-weight: 700; line-height: 1.25; }
.ranking-url { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.ranking-module-name { display: none; }
.ranking-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.ranking-tile { padding: 0; overflow: hidden; gap: 0; text-decoration: none; color: var(--ink); }
.ranking-tile:hover { border-color: var(--muted); }
.ranking-tile-art { background: var(--accent-soft); padding: 12px 40px; --art-ground: var(--accent-soft); }
.ranking-tile-art .art { background: none; }
.ranking-tile-text { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.ranking-tile h2 { font-size: 22px; line-height: 1.25; font-weight: 700; }
.ranking-tile p { font-size: 15px; }
.ranking-tile ol { padding-left: 20px; list-style: decimal; font-size: 14px; color: var(--ink-2); }
.ranking-tile-meta { font-size: 13px; font-weight: 600; color: var(--accent); }
@media (max-width: 760px) {
  /* Each website becomes a card: place, name and ring, the modules below. */
  .ranking-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ranking-list, .ranking-list tbody { display: block; }
  .ranking-list tr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-3); }
  .ranking-list tr:last-child { border-bottom: 0; }
  .ranking-list td { display: block; padding: 0; border: 0; }
  .ranking-place { width: 44px; }
  /* Place, name and ring fill the first line exactly, so the modules wrap. */
  .ranking-site { flex: 1 1 calc(100% - 124px); min-width: 0; }
  .ranking-total { flex: 0 0 56px; text-align: center; }
  .ranking-name { font-size: 18px; }
  .ranking-list .ranking-module { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line-3); }
  .ranking-module-name { display: block; font-size: 12px; color: var(--muted); }
  .ranking-result-head h2 { font-size: 24px; }
}
@media (max-width: 640px) { .grid-4 { grid-template-columns: 1fr; } }
.privacy-note { display: flex; gap: 8px; align-items: flex-start; }
.privacy-note svg { flex-shrink: 0; margin-top: 2px; }

/* ---- Test mail run and mailboxes ---- */
.mailtest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.step { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.step-head { display: flex; align-items: center; gap: 10px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.steps li { display: flex; gap: 12px; align-items: center; }
.address-row .copy-value { font-size: 16px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); }
.timeline li { font-size: 15px; }
.meter-busy .meter-value { width: 35%; animation: meter-busy 1.6s ease-in-out infinite; }
@keyframes meter-busy { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .meter-busy .meter-value { animation: none; width: 100%; opacity: .5; } }
.hints { padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-2); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.mini-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--muted); }
.mini-stat strong { font-size: 16px; color: var(--ink); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
@media (max-width: 1100px) { .mailtest-grid { grid-template-columns: 1fr; } .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Plans, dashboard, comparison ---- */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; align-items: start; }
.plain-fieldset { border: 0; padding: 0; margin: 0; }
.plain-fieldset legend { padding: 0; margin-bottom: 8px; font-size: 14px; }
.bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 8px; height: 200px; align-items: end; }
.bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.bar-count { font-size: 12px; color: var(--muted); min-height: 16px; }
.bar-stack { flex: 1; width: 100%; max-width: 44px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px 6px 0 0; overflow: hidden; background: var(--bg); }
.bar-part { display: block; min-height: 2px; }
.bar-part + .bar-part { border-top: 2px solid var(--surface); }
/* Report types of the dashboard chart: fixed colours, in stacking order
   (validated as a categorical palette on white, see the dataviz checks). */
:root { --type-email: #2a78d6; --type-mailtest: #eb6834; --type-security: #1baf7a; --type-performance: #eda100;
  --type-seo: #e87ba4; --type-ai: #008300; --type-a11y: #4a3aa7; --type-consent: #e34948; --type-other: #a3adbb; }
.type-email { background: var(--type-email); }
.type-mailtest { background: var(--type-mailtest); }
.type-security { background: var(--type-security); }
.type-performance { background: var(--type-performance); }
.type-seo { background: var(--type-seo); }
.type-ai { background: var(--type-ai); }
.type-a11y { background: var(--type-a11y); }
.type-consent { background: var(--type-consent); }
.type-other { background: var(--type-other); }
.type-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
/* Plans on the left, the drop-down of report types on the right. */
.runs-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.type-drop { margin-left: auto; }
.type-drop > summary { gap: 8px; }
.type-drop-label { display: inline-flex; align-items: center; gap: 6px; }
.type-panel { left: auto; right: 0; min-width: 260px; max-height: min(60vh, 440px); overflow-y: auto; gap: 2px; }
.type-panel .check { min-height: 40px; padding: 0 12px; border-radius: var(--radius); }
.type-panel .check:hover { background: var(--subtle); }
.type-panel .check .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.type-panel .type-all { border-bottom: 1px solid var(--line-3); border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 4px; font-weight: 600; }
@media (forced-colors: active) { .bar-part, .type-dot { forced-color-adjust: none; } }
.bars-wrap { position: relative; }
.bar-tip { position: absolute; z-index: 2; min-width: 140px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(15, 27, 45, .12); font-size: 12px; pointer-events: none; }
.bar-tip div { display: flex; align-items: center; gap: 6px; }
.bar-tip strong { display: block; margin-bottom: 4px; }
.bar-tip .tip-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-3); }
.bar-tip .grow { flex: 1; }
.bar-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.report-compare { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.report-compare .rows li { min-height: 40px; }

/* Print view of a report (also "Save as PDF") */
@media print {
  /* The header stays as the logo alone, dark on white. */
  .app-bar-inner > :not(.brand), .site-header-inner > :not(.brand) { display: none !important; }
  .app-bar, .site-header { position: static; }
  .app-bar { background: none; border-bottom: 0; }
  .app-bar-inner { min-height: 0; padding: 0 0 16px; }
  .site-header { border-bottom: 0; }
  .site-header-inner { min-height: 0; padding: 0 0 16px; }
  .app-bar .brand-name { color: var(--ink); }
  .app-bar .logo rect, .app-bar .logo path:last-child { stroke: #0F1B2D; }
  .app-bar .logo path:first-of-type { stroke: #6366F1; }
  .site-footer, .crumbs, [data-actions], [data-share-box], [data-shared-state], .next-step, .lang-menu, [data-page-error] { display: none !important; }
  body { background: #fff; }
  .app-page { padding: 0; }
  .card { border-color: #C3CCD8; break-inside: avoid; }
  .report-findings { break-inside: auto; }
  .audit { break-inside: avoid; }
  .audit > summary .chev, .fix .btn { display: none; }
  .badge, .ring .ring-value, .meter-value, .dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Administration is closed until the admin has a second factor */
.nav-locked { display: inline-flex; align-items: center; gap: 6px; }
.checklist .todo { background: var(--warn-bg); color: var(--warn); }
#admin-locked { scroll-margin-top: 16px; }
#totp { scroll-margin-top: 16px; }

/* ---- Combined reports and schedules ---- */
.sub a { margin-left: 8px; }
.choices-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice.is-disabled { cursor: default; background: var(--bg); }
.choice.is-disabled:hover { border-color: var(--line); }
.suite-form { gap: 20px; padding: 22px 24px 24px; }
.suite-notify { max-width: 360px; }
.suite-overall { flex-direction: row; align-items: center; gap: 32px; padding: 22px 24px; }
.suite-overall .ring-item { font-size: 14px; font-weight: 600; color: var(--ink); }
.suite-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.suite-module { padding: 0; gap: 0; }
.suite-module-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.suite-module-head h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.suite-module-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -6px 0 0; padding: 0 20px 16px; color: var(--ink-2); }
.suite-module-facets span:not(.badge):not(:first-child) { margin-left: 10px; }
/* Room for the three most urgent findings (topFindings), one line each,
   so a card keeps its height from start to end. */
.suite-module-findings { min-height: 144px; }
.suite-module .rows li { height: 48px; min-height: 0; padding: 0 20px; font-size: 15px; }
.suite-module .rows li:first-child { border-top: 1px solid var(--line-3); }
.suite-module .rows li .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suite-module-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 20px; border-top: 1px solid var(--line-3); font-size: 14px; font-weight: 600; }
.suite-module-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.suite-module-progress .meter { width: 96px; }
/* A module still running: the card is greyed and its ring turns. */
.suite-module.is-busy { background: var(--bg); border-color: var(--line); }
.suite-module.is-busy .suite-module-head h2, .suite-module.is-busy .rows { color: var(--muted); }
.suite-overall.is-busy .ring-item { color: var(--muted); }
.ring-busy .ring-spin { stroke: var(--accent); transform-origin: 40px 40px; animation: ring-spin 1.1s linear infinite; } /* 1.1s: spinTurn in audits.ts */
.ring-busy text { fill: var(--muted); font-size: 18px; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring-busy .ring-spin { animation: none; transform: rotate(-90deg); } }
/* The form of a combined report: the plan as a strip, the modules as
   wide tiles (art, text, checkbox) that fold out their settings. */
.suite-plan { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 40px; padding: 14px 20px; }
.suite-plan h2 { font-size: 17px; }
.suite-plan-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.suite-plan-item .meter { width: 96px; }
.suite-domain { max-width: 720px; }
.suite-tiles { display: flex; flex-direction: column; gap: 12px; }
.suite-tile { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; --art-ground: var(--surface); }
.suite-tile.is-on { background: var(--accent-soft); --art-ground: var(--accent-soft); }
.suite-tile:not(.is-locked):hover { border-color: var(--accent); }
.suite-tile:has(.suite-tile-check:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.suite-tile-row { display: flex; align-items: center; gap: 12px; padding-right: 20px; }
.suite-tile-pick { flex: 1; min-width: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; align-items: center; min-height: 80px; cursor: pointer; }
.suite-tile-art { display: block; align-self: stretch; }
.suite-tile-art .art { height: 100%; max-height: 96px; border-radius: 0; background: none; }
.suite-tile:not(.is-on) .suite-tile-art { opacity: .55; }
.suite-tile-text { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.suite-tile-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; }
.suite-tile-desc { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.suite-tile-sum { font-size: 13px; font-weight: 600; color: var(--accent-hover); }
.suite-tile-sum:empty, .suite-tile:not(.is-on) .suite-tile-sum { display: none; }
.suite-tile-check { width: 22px; height: 22px; margin: 0 0 0 4px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.suite-tile-gear { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2, var(--muted)); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; }
.suite-tile-gear:hover { border-color: var(--ink); }
.suite-tile-gear[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent); }
.suite-tile-gear:disabled { cursor: default; opacity: .6; }
.suite-tile-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 18px 174px; border-top: 1px solid var(--line); background: var(--surface); }
.suite-tile-panel .hint { margin: 0; }
.suite-tile-note { margin: 0; padding: 0 20px 14px 174px; color: var(--ink-2); }
.suite-tile.is-locked { background: var(--bg); }
.suite-tile.is-locked .suite-tile-pick { cursor: default; }
.suite-ai-field, .suite-estimate { max-width: 520px; }
.suite-estimate { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 14px; }
.suite-consent { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.suite-consent > * { min-width: 0; }
.suite-consent .tag-field input { min-width: 0; }
.suite-consent .consent-page-list { border: 1px solid var(--line); border-radius: var(--radius); }
.suite-consent .consent-page-list li { min-height: 40px; padding-left: 12px; font-size: 14px; }
.suite-consent .consent-page-list li:first-child { border-top: 0; }
.suite-consent .consent-page-list .mono { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.suite-module.is-skipped { background: var(--bg); }
.suite-module-note { margin: 0; padding: 0 20px 18px; }
/* A module the site's operator does not permit: the card's content only
   hinted (greyed, blurred), a box above says why. */
.suite-module.is-refused { position: relative; overflow: hidden; background: var(--bg); }
.consent-locked-ghost { filter: blur(1px) grayscale(1); opacity: .75; user-select: none; pointer-events: none; }
.suite-module-ghost { display: flex; flex-direction: column; flex-grow: 1; filter: blur(3px) grayscale(1); opacity: .5; user-select: none; pointer-events: none; }
.suite-module-ghost .ring-track { stroke: var(--line-2); }
.ghost-line { display: block; height: 12px; border-radius: 6px; background: var(--line); }
.ghost-title { width: 160px; height: 20px; margin-bottom: 12px; background: var(--line-2); }
.ghost-pill { display: inline-block; width: 64px; height: 22px; margin-left: auto; border-radius: 999px; background: var(--line); }
.chips .ghost-pill { margin-left: 0; width: 84px; }
.chips .ghost-pill-wide { width: 104px; }
.suite-module-refused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(243, 245, 248, .55); }
.suite-module-refused-box { max-width: 400px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px rgba(15, 27, 45, .08); display: flex; flex-direction: column; gap: 8px; }
.suite-module-refused-head { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.suite-module-refused-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.suite-module-refused-box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 760px) {
  .suite-tile-row { padding-right: 12px; }
  .suite-tile-pick { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
  .suite-tile-panel, .suite-tile-note { padding-left: 16px; padding-right: 16px; }
  .suite-consent { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .suite-tile-pick { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
  .suite-tile-art { display: none; }
}
.suite-offer { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.delta { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--danger); }
@media (max-width: 760px) {
  .choices-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suite-overall, .suite-offer { flex-direction: column; align-items: flex-start; }
}

/* ---- Administration · blocklists ---- */
.blocklist-key { margin-top: 6px; }
.blocklist-key .inp { width: 220px; max-width: 100%; }
.table tr.is-off td { color: var(--muted); }

/* "+ New bytereport" on the reports page: one button that opens the choice. */
.new-drop > summary.btn { gap: 6px; }
.new-drop > summary .icon:last-child { transition: transform .15s ease; }
.new-drop[open] > summary .icon:last-child { transform: rotate(180deg); }
.new-drop .nav-drop-panel { left: auto; right: 0; min-width: 260px; }
.new-drop .nav-drop-panel a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: 8px; }
.new-drop .nav-drop-panel a:first-child { border-bottom: 1px solid var(--line-3); border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 4px; }
@media (max-width: 760px) { .new-drop .nav-drop-panel { left: 0; right: auto; } }

/* ---- Administration · e-mail: two areas on one page ---- */
.section-label { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 18px; }
.section-label .icon { color: var(--muted); }

/* What a finding looked at: the record or header value as found. */
.found { display: flex; flex-direction: column; gap: 6px; }
.found-value { display: block; font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-3); overflow-wrap: anywhere; white-space: pre-wrap; }
/* What an audit found, folded below its message */
.audit-details { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.audit-details > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; border-radius: 10px; }
.audit-details > summary::-webkit-details-marker { display: none; }
.audit-details > summary:hover { background: var(--bg); }
.audit-details > summary .chev { color: var(--muted); display: inline-flex; transition: transform .15s ease; transform: rotate(-90deg); }
.audit-details[open] > summary .chev { transform: none; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.detail-table th, .detail-table td { padding: 8px 12px; border-top: 1px solid var(--line-3); text-align: left; vertical-align: top; }
.detail-table th { width: 34%; font-weight: 400; color: var(--muted); }
.detail-table td { color: var(--ink); overflow-wrap: anywhere; }
.detail-table code, .detail-table a.mono { font-size: 13px; }
/* A URL stays on one line and ends in "…" where it does not fit; the title holds it whole */
.detail-table td { max-width: 0; }
.detail-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 48px; }
.detail-image { display: inline-flex; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.detail-image img { display: block; width: 96px; height: 96px; object-fit: contain; }
/* Wide screens: the label column as wide as its longest label, no breaks */
@media (min-width: 900px) {
  .detail-table th { width: 1%; white-space: nowrap; padding-right: 24px; }
}
@media (max-width: 600px) {
  .detail-table th, .detail-table td { display: block; width: auto; max-width: none; }
  .detail-table td { border-top: 0; padding-top: 0; }
}

/* All elements of a finding: page, element, its start, a detail. */
.items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.items-table th, .items-table td { padding: 8px 12px; border-top: 1px solid var(--line-3); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.items-table th { font-weight: 400; color: var(--muted); white-space: nowrap; }
.items-table code { font-size: 13px; white-space: pre-wrap; }
.items-more { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line-3); }
@media (max-width: 600px) {
  .items-table thead { display: none; }
  .items-table td { display: block; border-top: 0; padding: 2px 12px; }
  .items-table tr { display: block; padding: 6px 0; border-top: 1px solid var(--line-3); }
}

/* A ring as a filter: click one and the findings show only its category. */
.ring-pick { border: 0; background: transparent; padding: 6px 4px; border-radius: var(--radius); cursor: pointer; font: inherit; transition: opacity .15s ease; }
.ring-pick:hover { background: var(--bg); }
.ring-pick[aria-pressed="true"] { background: var(--subtle); }
.ring-pick.is-faded { opacity: .35; }
.ring-pick.is-faded:hover { opacity: .7; }
.report-filter { margin: 0 20px 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---- Administration · reports: a card per module with its switch ---- */
/* A module card as an accordion: the head folds the body out, the switch
   stays in the head. */
.module-head { display: flex; align-items: flex-start; gap: 12px; }
.module-toggle, .module-toggle-space { flex-shrink: 0; width: 32px; height: 32px; }
.module-toggle { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.module-toggle:hover, .module-card.is-open .module-toggle { background: var(--line); color: var(--ink); }
.module-toggle svg { transition: transform .15s ease; }
.module-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.module-head-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.module-head-text h2 { margin: 4px 0 0; }
.module-toggle ~ .module-head-text { cursor: pointer; }
.module-summary:empty { display: none; }
.module-summary { margin-top: 6px; }
.module-summary .badge { font-size: 12px; padding: 2px 8px; }
.module-head .switch { margin-top: 4px; }
.module-body { display: flex; flex-direction: column; gap: 12px; margin-left: 44px; }
.module-body[hidden] { display: none; }
@media (max-width: 760px) {
  .module-body { margin-left: 0; }
  .module-head { flex-wrap: wrap; }
  .module-head-text { flex-basis: calc(100% - 44px); }
  .module-head .switch { margin-left: 44px; }
}
.module-card.is-off { background: var(--bg); }
.module-card.is-off .module-extra { opacity: .5; }
.module-extra { border-top: 1px solid var(--line-3); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
/* The AI summary switched off: the card stays white, its fields are
   disabled and grey. */
fieldset.module-extra { margin: 0; padding: 14px 0 0; border-width: 1px 0 0; border-style: solid; border-color: var(--line-3); min-inline-size: 0; }
fieldset.module-extra:disabled, fieldset.module-extra:disabled * { color: var(--muted-2); }
fieldset.module-extra:disabled .inp { background: var(--bg); color: var(--muted-2); border-color: var(--line); cursor: not-allowed; }
fieldset.module-extra:disabled input[type="checkbox"] { opacity: .5; cursor: not-allowed; }
.module-card.is-paused [data-summary-stats] .badge { background: var(--subtle); color: var(--muted-2); }
/* The exit of a module card, and the card of the exits: a list whose
   items fold out to edit and test. */
.module-exit { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.module-exit .h3 { margin: 0; }
.module-exit select { width: 300px; max-width: 100%; flex-shrink: 0; }
.exit-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.exit-item + .exit-item { border-top: 1px solid var(--line); }
.exit-head { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px; border: 0; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.exit-head:hover { background: var(--bg); }
.exit-head .chev { display: inline-flex; width: 16px; justify-content: center; font-size: 18px; color: var(--muted); transition: transform .15s ease; }
.exit-head[aria-expanded="true"] .chev { transform: rotate(90deg); }
.exit-name { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.exit-item.is-open > .exit-head, .exit-panel { background: var(--bg); }
.exit-panel { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 18px 46px; border-top: 1px solid var(--line-3); }
.exit-test { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.exit-test .btn { margin-top: 22px; }
.exit-result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 14px; }
.exit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.exit-row + .exit-row { border-top: 1px solid var(--line-3); }
.exit-row-value { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.exit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exit-actions .grow { flex: 1 1 200px; }
.exit-none { margin: 0; padding: 16px; }
@media (max-width: 760px) {
  .module-exit { flex-direction: column; align-items: stretch; }
  .module-exit select { width: 100%; }
  [data-exits-card] > .split-head { flex-direction: column; align-items: flex-start; }
  .exit-head { flex-wrap: wrap; }
  .exit-name { flex-basis: calc(100% - 40px); }
  .exit-head .badge { margin-left: 30px; }
  .exit-panel { padding-left: 16px; }
  .exit-test { grid-template-columns: 1fr; }
  .exit-test .btn { margin-top: 0; }
  .exit-row { flex-direction: column; align-items: flex-start; }
  .exit-row-value { text-align: left; }
}
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s ease; flex-shrink: 0; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.switch input:checked + .switch-track { background: var(--ok); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- E-mail domain of a combined report ---- */
.mail-target { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.mail-target-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.mail-target .switch { font-weight: 500; }

/* ---- Pricing page and the band on module pages ---- */
.pricing-table th:not(:first-child), .pricing-table td:not(:first-child) { text-align: center; }
.pricing-table td svg { display: inline-block; vertical-align: middle; color: var(--ok); }
.pricing-table th { background: var(--accent-deep); color: #fff; border-bottom: 0; font-size: 15px; }
.pricing-table td:first-child { font-weight: 600; }
.pricing-table tbody tr:nth-child(even) td { background: var(--bg); }
/* What an account adds, at the end of a module page (guests only). */
.account-cta-wrap { padding-block: 40px 64px; }
.account-cta { padding: 28px 32px; border-radius: 16px; gap: 24px 40px; }
.account-cta .next-step-text { flex: 1 1 560px; min-width: 0; }
.account-cta-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.account-cta h2 { font-size: 22px; }
.account-cta p { font-size: 15px; max-width: 720px; }
.account-cta-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; font-size: 15px; line-height: 1.5; color: var(--accent-soft); }
.account-cta-list li { display: flex; gap: 10px; align-items: flex-start; }
.account-cta-list .icon { flex-shrink: 0; margin-top: 1px; color: #C7D2FE; }
.account-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.account-cta-actions a:not(.btn) { color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
@media (max-width: 760px) {
  .account-cta { padding: 22px 20px; }
  .account-cta-list { grid-template-columns: minmax(0, 1fr); }
  .account-cta-actions { align-items: stretch; width: 100%; }
}

/* Sections and accordion rows (AI administration, account security). */
/* Series of the usage chart: answers, judge, suggestions, search results, guests, tests (summaries: --series-7 below). */
:root { --series-1: #4338CA; --series-2: #A5B4FC; --series-3: #56637A; --series-4: #B45A00; --series-5: #1E7A4C; --series-6: #C3CCD8; }
.plain-section { min-width: 0; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.acc-list { border-bottom: 1px solid var(--line-3); }
.acc-item > summary { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; border-top: 1px solid var(--line-3); cursor: pointer; list-style: none; font-size: 15px; }
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary:hover { background: var(--bg); }
.acc-item > summary .chev { color: var(--muted); display: inline-flex; transition: transform .15s ease; transform: rotate(-90deg); }
.acc-item[open] > summary .chev { transform: none; }
.acc-name { font-weight: 600; }
.acc-sub { font-size: 13px; color: var(--muted); margin-left: 8px; }
.acc-body { padding: 6px 4px 20px 36px; display: flex; flex-direction: column; gap: 14px; }
.row-sm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }
.table-tight th, .table-tight td { padding: 8px 10px; }
.table-tight .inp-sm { width: 100%; min-width: 64px; }
.table-tight .inp-num { width: 76px; min-width: 0; }
.table-tight .inp-id { min-width: 170px; }
.table-tight .inp-name { min-width: 130px; }
.nowrap-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.btn-icon-sm { min-height: 36px; width: 36px; padding: 0; }
.ai-budget { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; padding-bottom: 6px; }
.meter-mark { position: relative; overflow: visible; }
.meter-tick { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); }
.ai-usage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
.ubars { display: flex; align-items: flex-end; gap: 3px; height: 160px; border-bottom: 1px solid var(--line); }
.ubar { flex: 0 1 28px; display: flex; flex-direction: column-reverse; min-width: 4px; }
.ubar span { display: block; width: 100%; }
/* An organisation's row in the usage table folds out its members. */
.usage-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.usage-toggle .chev { display: inline-flex; transition: transform .15s; }
.usage-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.usage-member-row { background: var(--subtle); }
.usage-member { padding-left: 34px !important; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.test-result { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.field-value { min-height: 44px; display: flex; align-items: center; font-weight: 400; }
.acc-key-item > summary .chips { gap: 4px; }
@media (max-width: 900px) {
  .ai-budget, .ai-usage { grid-template-columns: 1fr; }
  .acc-item > summary { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .acc-item > summary .acc-key { display: none; }
  .acc-body { padding-left: 4px; }
}

/* AI visibility: projects. */
.grow { flex-grow: 1; }
.stack-xs { display: flex; flex-direction: column; gap: 6px; }
.credit-card { display: flex; flex-direction: column; gap: 10px; }
.ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ai-layout aside { position: sticky; top: calc(var(--header-h) + 16px); }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tools .inp-sm { width: 220px; max-width: 100%; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: 500 13px var(--font); color: var(--ink-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.suggest-box { border: 1px solid var(--accent); box-shadow: inset 0 0 0 1px var(--accent); border-radius: var(--radius-card); background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.suggest-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.topic { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 6px; background: var(--subtle); font-size: 12px; color: var(--ink-3); }
.dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.mdot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted-2); }
.mdot.on { background: var(--accent); border-color: var(--accent); }
.estimate { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--bg); font-size: 14px; }
.estimate .total { font-size: 18px; font-weight: 600; margin-top: 4px; }
.plain-fieldset { border: 0; margin: 0; padding: 0; }
.model-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
tr.is-paused td { color: var(--muted); }
@media (max-width: 1000px) {
  .ai-layout { grid-template-columns: 1fr; }
  .ai-layout aside { position: static; }
}

/* AI visibility: report views. */
.mdot.cited { background: var(--surface); border: 3px solid var(--accent); }
.ai-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; }
.ai-part { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ai-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 14px; }
.hbar-track { height: 12px; border-radius: 6px; background: var(--subtle); overflow: hidden; }
.hbar-fill { height: 100%; background: var(--muted-2); }
.hbar.own .hbar-fill { background: var(--accent); }
.hbar.own { font-weight: 600; }
.ai-matrix td, .ai-matrix th { white-space: nowrap; }
.ai-matrix td:first-child { white-space: normal; min-width: 260px; }
.ai-cell { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.ai-cell:hover, .ai-cell[aria-expanded="true"] { background: var(--subtle); }
.ai-answer td { background: var(--bg); }
.ai-answer-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 820px; }
.ai-answer-text mark { background: var(--accent-soft); color: var(--accent-active); padding: 0 2px; border-radius: 3px; }
.ai-answer-text mark.rival { background: var(--subtle); color: var(--ink); }
.ai-chart svg { width: 100%; height: auto; display: block; }
@media (max-width: 800px) { .ai-two { grid-template-columns: 1fr; } }
.col-wide { min-width: 300px; }

/* Footer: the legal links. */
.site-footer .footer-legal a { color: var(--muted); }

/* Start page: actions instead of the check form. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-actions .new-drop .nav-drop-panel { left: 0; right: auto; }
/* All modules and the overall score: four per row, the overall one first. */
.preview-rings.all { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
.preview-overall { font-weight: 600; color: var(--ink); }
/* "Check starten": the main action of the start page, larger than a menu button. */
/* Both actions of the start page share one size. */
.hero-actions > .btn-lg, .check-drop > summary.btn-lg { min-height: 60px; padding: 0 30px; font-size: 17px; box-sizing: border-box; }
.check-drop > summary.btn-lg { box-shadow: 0 8px 24px rgba(67, 56, 202, 0.28); }
.check-drop .nav-drop-panel { left: 0; right: auto; min-width: 300px; }
.check-drop:not(.with-suite) .nav-drop-panel a:first-child { border-bottom: 0; margin-bottom: 0; }

/* ---- Accessibility ---- */
.a11y-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.a11y-panel[hidden] { display: none; }
.a11y-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.a11y-options .check { margin: 0; }
.a11y-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.a11y-pages .inp { width: 84px; height: 40px; }
.a11y-crawl { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.a11y-crawl p { margin: 0; }
.a11y-pages-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.a11y-pages-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line-3); font-size: 14px; overflow-wrap: anywhere; }
.a11y-pages-list .chips { flex-shrink: 0; }
[data-module-extra]:empty, [data-module-after]:empty { display: none; }
[data-module-extra], [data-module-after] { display: flex; flex-direction: column; gap: 16px; }
.a11y-checked { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 8px; }
.a11y-checked .a11y-pages-list li { min-height: 0; }
.a11y-checked .page-row { padding: 0 8px; min-height: 44px; }
/* A checked page is picked like a score ring: it stays, the others fade. */
.page-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: opacity .15s ease; }
.page-pick:hover { background: var(--bg); }
.page-pick[aria-pressed="true"] { background: var(--subtle); }
.page-pick.is-faded { opacity: .35; }
.page-pick.is-faded:hover { opacity: .7; }
.pages-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-top: 1px solid var(--line-3); background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.pages-more:hover { color: var(--ink); background: var(--bg); }
.pages-more .chev { display: inline-flex; transition: transform .15s ease; }
.pages-more.is-open .chev { transform: rotate(180deg); }
.audit-pages { font-size: 13px; color: var(--muted); white-space: nowrap; }
.examples { display: flex; flex-direction: column; gap: 6px; }
.examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.example { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-3); min-width: 0; }
.example-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.example-sel { font-size: 12px; font-weight: 500; color: var(--ink-3); overflow-wrap: anywhere; }
.example-code { font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.example-note { color: var(--ink-2); }
@media (max-width: 640px) {
  .audit-pages { display: none; }
}
@media (max-width: 640px) {
  .hero-actions > .btn-lg, .hero-actions > .check-drop, .hero-actions > .check-drop > summary.btn-lg { width: 100%; }
}

/* ---- Organisations: the switcher, the banner of an open payment, the
   lock page ---- */
.org-switch > summary.org-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--dark-2); color: var(--line); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 260px; }
.org-switch > summary.org-pill:hover { color: #fff; }
.org-switch .org-menu { left: auto; right: 0; top: calc(100% + 10px); width: 330px; gap: 2px; }
.org-menu-label { padding: 8px 12px 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.org-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; width: 100%; }
.org-item:hover, .org-item[aria-checked="true"] { background: var(--subtle); }
.org-item .icon:last-child { color: var(--accent); }
.org-mark { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.org-mark:has(.icon) { background: var(--subtle); color: var(--ink-3); }
.org-item .grow { display: flex; flex-direction: column; }
.org-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.org-meta { font-size: 13px; color: var(--muted); }
.org-sep { height: 1px; background: var(--line-3); margin: 6px 4px; }
.org-menu a { gap: 12px; }
.menu-orgs { display: flex; flex-direction: column; gap: 2px; padding-block: 4px; border-bottom: 1px solid var(--line); }
.menu-orgs a { display: flex; align-items: center; min-height: 48px; text-decoration: none; }
.side-org { padding: 0 12px 8px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.org-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 32px; background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid #F0D9A8; font-size: 15px; }
.org-banner a { color: #4A3000; font-weight: 600; }
.org-lock { max-width: 640px; margin: 48px auto; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.org-lock-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--subtle); display: flex; align-items: center; justify-content: center; }
.org-lock .row { justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) { .org-banner { padding: 12px 16px; flex-wrap: wrap; } .org-switch { display: none; } }

/* ---- Plan, booking, invoices, members, company login of a team ---- */
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .plan-layout { grid-template-columns: minmax(0, 1fr); } }
.plan-stack { gap: 20px; }
.sp-facts dd { justify-content: space-between; flex-wrap: nowrap; min-width: 0; }
.sp-facts dd code { overflow-wrap: anywhere; min-width: 0; }
.plan-stack .facts > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; }
.plan-stack .facts dd { font-weight: 400; text-align: left; flex-wrap: wrap; }
@media (max-width: 640px) { .plan-stack .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.side-label:not(:first-child) { margin-top: 28px; }
.row.tight { gap: 6px; }
.split-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.usage-rows { display: flex; flex-direction: column; gap: 14px; }
.usage-row { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.link-row { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.link-row:hover { text-decoration: underline; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); text-decoration: none; margin-bottom: 6px; }
.back-link:hover { color: var(--ink); text-decoration: underline; }
.segmented { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; border-radius: 12px; background: var(--subtle); align-self: flex-start; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.segmented input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15,27,45,.12); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.segmented input:disabled + span { opacity: .5; }
.book-summary .facts .total { border-top: 2px solid var(--ink); font-size: 16px; }
.book-summary .facts .total dt { color: var(--ink); font-weight: 600; }
.invite-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.invite-row .field.grow { flex: 1 1 260px; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline .inp { width: 96px; }
.inp-sm { min-height: 36px; padding: 0 8px; font-size: 14px; }
.table-title { padding: 16px 16px 0; margin: 0; font-size: 16px; }
.table-lead { padding: 4px 16px 4px; margin: 0; }
.inp.area[readonly] { background: var(--subtle); color: var(--ink-2); }
.notice .btn { align-self: center; }
.who { display: inline-flex; align-items: center; gap: 10px; }
.proof { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.proof .facts dd { flex-wrap: wrap; justify-content: flex-end; }
.proof code { overflow-wrap: anywhere; }
.hint.block { display: block; margin-top: 4px; }
.settings-stack { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.settings-stack.settings-wide { max-width: none; }
.danger-zone { border-color: #F1C4B6; }
.org-mark-personal { background: var(--subtle); color: var(--ink-3); }
.modal { border: 0; border-radius: var(--radius-card); padding: 24px; max-width: 480px; width: calc(100% - 32px); box-shadow: 0 24px 48px rgba(15,27,45,.24); color: var(--ink); }
.modal::backdrop { background: rgba(15,27,45,.45); }
.modal[open] { animation: modal-in .16s ease-out; }
.modal[open]::backdrop { animation: backdrop-in .16s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes backdrop-in { from { opacity: 0; } }
html:has(.modal[open]) { overflow: hidden; }
.modal-wide { max-width: 640px; }
/* Confirmation dialog (web-src/lib/confirm.ts): the form fills the dialog,
   so a click on the dialog itself is a click on the backdrop. */
.modal.confirm { max-width: 440px; padding: 0; }
.confirm-body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.confirm-body h2 { margin: 0; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.confirm-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.confirm-body p + p { margin-top: 8px; }
.confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* A dialog that asks with a form (deleting the account): type as in the confirmation. */
.modal-ask h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.modal-ask form > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.modal-ask .confirm-actions { margin-top: 4px; }
@media (max-width: 560px) { .modal-ask h2 { font-size: 20px; } .modal-ask .confirm-actions { flex-direction: column-reverse; } .modal-ask .confirm-actions .btn { width: 100%; min-height: 48px; } }
.btn-destroy { background: var(--danger); color: #fff; }
.btn-destroy:hover { background: #6F230A; color: #fff; }
.btn-destroy:active { background: #561B08; }
/* Phones: every dialog becomes a sheet at the bottom edge. */
@media (max-width: 560px) {
  .modal { width: 100%; max-width: none; max-height: calc(100% - 48px); margin: auto 0 0; border-radius: 16px 16px 0 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(15,27,45,.18); }
  .modal.confirm { max-width: none; padding: 0; }
  .confirm-body { padding: 24px 16px calc(28px + env(safe-area-inset-bottom)); }
  .confirm-body h2 { font-size: 20px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; min-height: 48px; }
}
.center { text-align: center; }

/* ---- Pricing: monthly or yearly ---- */
.pricing-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.tier .price-year { display: none; }
.section-inner:has(input[name="pricing-interval"][value="year"]:checked) .tier .price-month { display: none; }
.section-inner:has(input[name="pricing-interval"][value="year"]:checked) .tier .price-year { display: block; }
.block { display: block; }
.pricing-addon { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--ink-3); }
.pricing-head .segmented { align-self: center; }
.tiers:has(> .tier:nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.table-card .empty { padding: 12px 16px; margin: 0; }

/* AI summary card ("in plain words: what to do now"), first card of a report. */
:root { --series-7: #0E7490; }
.section-head-plain { padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.section-head-plain .h { font-size: 18px; }
.summary-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.summary-head { display: flex; align-items: center; gap: 20px; }
.summary-head.compact { gap: 14px; }
.summary-ico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: var(--accent-soft); color: var(--info); display: flex; align-items: center; justify-content: center; }
.summary-head.compact .summary-ico { width: 44px; height: 44px; }
.summary-ico.mute { background: var(--subtle); color: var(--ink-3); }
.summary-ico.fail { background: var(--danger-bg); color: var(--danger); }
.summary-ico.ok { background: var(--ok-bg); color: var(--ok); }
.summary-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.summary-card .summary-text p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.summary-card .summary-text p.small { font-size: 13px; color: var(--muted); }
.summary-text p.small a { color: var(--ink-2); }
.summary-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.summary-title h2 { margin: 0; font-size: 18px; font-weight: 600; }
.summary-act { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.summary-act .sub, .summary-meta { font-size: 13px; color: var(--muted); }
/* Waiting for the report: an outline instead of a card, the button off. */
.summary-card.is-waiting { background: transparent; border-style: dashed; border-color: var(--line-2); }
.summary-card.is-waiting .summary-title h2 { color: var(--ink-3); }
.summary-bars { display: flex; flex-direction: column; gap: 10px; padding-left: 68px; }
.summary-bars span { height: 14px; border-radius: 7px; background: var(--subtle); }
.summary-card .summary-verdict { margin: 0; font-family: var(--font-head); font-size: 21px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); max-width: 980px; }
.summary-steps { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line-3); }
.summary-step { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-3); }
.summary-step .num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 17px; font-weight: 700; flex-shrink: 0; }
.summary-step-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.summary-step h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.summary-card .summary-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.summary-step .lbl { font-weight: 600; color: var(--ink); }
.summary-step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.summary-step-meta a, .summary-boxes a { font-size: 14px; font-weight: 600; }
.summary-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.summary-box { padding: 14px 16px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.summary-box h3 { margin: 0; font-size: 15px; font-weight: 600; }
.summary-card .summary-box p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.summary-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.summary-card .summary-foot p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.summary-helpful { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.summary-helpful .btn { padding: 0 14px; font-size: 14px; }
.summary-helpful .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
@media (max-width: 720px) {
  .summary-head { flex-wrap: wrap; }
  .summary-act { align-items: flex-start; width: 100%; }
  .summary-bars { padding-left: 0; }
}
@media print {
  .summary-head .btn, .summary-helpful, .summary-act { display: none; }
  .summary-card:not(.has-summary) { display: none; }
}
.inline-field { display: flex; gap: 8px; align-items: center; }
.inline-field .inp { flex: 1; min-width: 0; width: auto; }
.inline-field .btn { flex-shrink: 0; }
.summary-step-meta .badge { white-space: normal; }

/* ---- Schedules: three intervals on the edit page, the recipients of a
   team as a list of checkboxes ---- */
.choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .choices-3 { grid-template-columns: 1fr; } }
.recipients { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.recipient { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; cursor: pointer; }
.recipient + .recipient { border-top: 1px solid var(--line-3); }
.recipient:hover { background: var(--bg); }
.recipient input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.recipient-who { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.recipient-who .badge { margin-left: 8px; }

/* A list inside a notice, e.g. the subscriptions that end with an account. */
.notice-list { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

/* ---- Admin dashboard: the chart of reports, its period and plans ---- */
.runs-nav { gap: 8px; flex-wrap: wrap; align-items: center; }
.runs-period { min-width: 132px; text-align: center; color: var(--ink-2); }
.plan-pick { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.plan-pick:hover { border-color: var(--muted); }
.plan-pick[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.bars-dense { gap: 3px; }
.bars-dense .bar-label { overflow: visible; }

/* Price suggestions from the imported price list (AI visibility, AI summary) */
.price-hint { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--warn); }
td .price-hint { max-width: 160px; }
.price-hint-ok { color: var(--muted); }
.text-btn { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; cursor: pointer; }
.text-btn:hover { text-decoration-thickness: 2px; }
.span-all { grid-column: 1 / -1; }

/* ---- Consent check: the module page (form with the page list, or the
   introduction for visitors without the check) and the report ---- */
.consent-form-wrap { padding-bottom: 56px; }
.consent-form [data-start-row] p { max-width: 760px; }
.consent-quota { flex-wrap: wrap; }
.consent-quota > .row-sm { flex-wrap: nowrap; }
.consent-pages { padding: 0; overflow: hidden; }
.consent-pages-head { padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 6px; }
.consent-pages-head p { margin: 0; max-width: 760px; }
.consent-page-list { list-style: none; margin: 0; padding: 0; }
.consent-page-list.is-scrolling { overflow-y: auto; overscroll-behavior: contain; }
.consent-page-list li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 20px; border-top: 1px solid var(--line-3); font-size: 15px; }
.consent-page-list .mono { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consent-page-list .badge { flex-shrink: 0; }
.consent-page-list .badge.mono { flex: none; font-size: 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--subtle); color: var(--ink); }
.consent-add { border-top: 1px solid var(--line-3); padding: 16px 20px 18px; }
.consent-add .inline-field { max-width: 820px; }
.consent-policy { padding: 16px 20px; }
/* An input that holds its values as chips, each with a remove button. */
.tag-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 5px 6px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); cursor: text; }
.tag-field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tag-list { display: contents; list-style: none; margin: 0; padding: 0; }
.tag-list li { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding-left: 12px; border-radius: 999px; background: var(--subtle); font: 500 14px var(--font-mono); color: var(--ink); max-width: 100%; }
.tag-list li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-list .icon-btn { width: 32px; height: 32px; border-radius: 999px; }
.tag-field input { flex: 1 1 160px; min-width: 0; height: 32px; border: 0; padding: 0 6px; background: transparent; font: 400 15px var(--font-mono); color: var(--ink); }
.tag-field input:focus { outline: none; }
.consent-start { align-items: center; gap: 14px; flex-wrap: wrap; }
.consent-intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: stretch; padding-bottom: 56px; }
.consent-passes, .consent-plans { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.consent-passes h2, .consent-plans h2 { font-size: 22px; margin: 0; }
.consent-passes p, .consent-plans p { margin: 0; }
.consent-plans { background: var(--accent-soft); }
.consent-plans .consent-plan-grid > div { background: var(--surface); }
/* For visitors without the check: the address field greyed out, a note
   above it says why (the look of a refused suite card). */
.consent-locked { padding-bottom: 20px; }
.consent-locked-card { position: relative; overflow: hidden; background: var(--bg); }
.consent-locked-card .suite-module-refused { background: rgba(243, 245, 248, .25); }
.consent-locked-box { margin: 0; max-width: 560px; flex-direction: row; align-items: center; gap: 10px; font-size: 15px; }
.consent-locked-box svg { flex-shrink: 0; color: var(--ink-3); }
.consent-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.consent-steps li, .consent-plan-grid > div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.consent-steps strong { font-size: 16px; }
.consent-num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.consent-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.consent-plans > .row { margin-top: auto; }
@media (max-width: 1080px) {
  .consent-intro { grid-template-columns: 1fr; }
  .consent-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.consent-what { gap: 16px; }
.consent-what h2 { font-size: 32px; }
.consent-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.consent-cat { border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.consent-cat h3 { margin: 0; font-size: 17px; }
.consent-cat p { margin: 0; font-size: 15px; line-height: 1.55; }
.consent-limits { padding: 16px 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.consent-limits h3 { margin: 0 0 8px; font-size: 15px; }
.consent-limits ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) {
  .consent-steps, .consent-plan-grid, .consent-cats { grid-template-columns: 1fr; }
}
/* The report: queue, progress, banner and the evidence tables. */
.consent-run { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.consent-run h2 { margin: 0; font-size: 18px; }
.consent-passbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.consent-pass { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; color: var(--muted); }
.consent-pass strong { font-size: 15px; color: var(--ink); }
.consent-pass.is-now { border: 2px solid var(--accent); padding: 11px 13px; }
.consent-pass.is-done strong { color: var(--ok); }
.progress { height: 10px; border-radius: 999px; background: var(--subtle); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.consent-done { list-style: none; margin: 0; padding: 0; }
.consent-done li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 44px; border-top: 1px solid var(--line-3); font-size: 14px; }
.consent-done .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consent-evidence { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.consent-evidence h2 { margin: 0; }
.consent-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.consent-shot { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.consent-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.consent-facts dt { color: var(--muted); }
.consent-facts dd { margin: 0; }
@media (max-width: 760px) {
  .consent-passbar, .consent-banner { grid-template-columns: 1fr; }
}
/* Third parties of the consent report fold open to the pages they loaded on. */
.row-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.row-toggle .chev { display: inline-flex; color: var(--muted); transform: rotate(-90deg); transition: transform .15s ease; }
.row-toggle[aria-expanded="true"] .chev { transform: none; }
.row-toggle:hover .mono { text-decoration: underline; }
.consent-on > td { background: var(--bg); padding: 4px 16px 8px 40px; }
.consent-on ul { list-style: none; margin: 0; padding: 0; }
.consent-on li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font-size: 13px; }
.consent-on li + li { border-top: 1px solid var(--line-3); }
.consent-on .mono { overflow-wrap: anywhere; }
.ring-overall { padding: 6px 4px; font: inherit; }
/* The member who started a report, in a team's lists. */
.who { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--subtle); color: var(--ink-3); font-size: 11px; font-weight: 600; }

/* ---- Bot page ---- */
.bot { padding-block: 40px 64px; display: flex; flex-direction: column; gap: 20px; max-width: 900px; }
.bot-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bot-head h1 { margin: 0; font-size: 40px; line-height: 1.1; }
.bot .card { padding: 22px 24px; }
.bot-intro { background: var(--accent-soft); }
.bot-intro .lead, .bot-intro .lead p { margin: 0; }
.bot .card h2 { font-size: 22px; margin: 0; }
.bot-facts { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; align-items: baseline; font-size: 15px; }
.bot-facts dt { color: var(--muted); }
.bot-facts dd { margin: 0; overflow-wrap: anywhere; }
.bot-facts code, .bot-pre { font-size: 13px; background: var(--bg); border-radius: 6px; padding: 6px 10px; }
.bot-pre { margin: 0; padding: 12px 14px; white-space: pre; color: var(--ink); }
.bot-list { margin: 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) { .bot-facts { grid-template-columns: 1fr; gap: 4px 0; } .bot-facts dd { margin-bottom: 8px; } .bot-head h1 { font-size: 32px; } }