/* RATELi CFI — application styles. Colours, sizes and spaces come from tokens.css only. */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-4)); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: calc(100vh / var(--fit-zoom));
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-base);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--color-atmosphere-top), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 45%, var(--color-atmosphere-lift), transparent 70%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-bright); }
[data-theme='light'] a:hover { color: var(--color-accent-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); word-spacing: 0.06em; margin: 0 0 var(--space-4); text-wrap: balance; color: var(--color-text-bright); }
/* Main and section headings carry the same faint dark-mode glow as the top menu; highlighted (orange) words do not. */
h1, h2 { text-shadow: var(--text-glow); }
h1 .accent, h2 .accent, h1 [class*='accent'], h2 [class*='accent'] { text-shadow: none; }
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
hr { border: 0; border-top: 1px solid var(--color-hairline); margin: var(--space-8) 0; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); background: var(--color-accent-fill); color: var(--color-on-accent); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight: var(--fw-bold); text-decoration: none; }
.skip-link:focus { top: var(--space-3); }

/* ---------------------------------------------------------------- icons: one scale, optically centred */
.icon, .icon-sm, .icon-lg { display: inline-block; flex: none; vertical-align: -0.18em; stroke-width: 1.75; }
.icon { width: var(--icon-md); height: var(--icon-md); }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); vertical-align: -0.2em; }
.icon-xs { width: 0.875rem; height: 0.875rem; vertical-align: -0.125em; flex: none; }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.btn .icon, .btn .icon-sm { vertical-align: middle; }
.rot-up { transform: rotate(-90deg); }
.rot-down { transform: rotate(90deg); }
.icon-tile { width: var(--icon-tile); height: var(--icon-tile); border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); color: var(--color-accent-text); margin-bottom: var(--space-5); flex: none; transition: transform var(--duration-normal) var(--ease-out-expo), background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard); }
.icon-tile .icon { width: var(--icon-lg); height: var(--icon-lg); }
.icon-tile-sm { width: var(--icon-tile-sm); height: var(--icon-tile-sm); border-radius: var(--radius-md); margin: 0; }
.icon-tile-sm .icon { width: var(--icon-md); height: var(--icon-md); }
.icon-tile-muted { background: var(--color-surface-2); border-color: var(--color-hairline-strong); color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- brand: RATELi wordmark + CFI */
.wordmark { font-family: var(--font-brand); font-weight: var(--fw-bold); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.wordmark-i { color: var(--color-accent); }
.brand-name { display: inline-flex; align-items: baseline; gap: 0.32em; white-space: nowrap; }
.cffi { font-family: var(--font-display); font-weight: var(--fw-extrabold); letter-spacing: 0.02em; }
.f2 { position: relative; }
.f2 sup { font-size: 0.56em; vertical-align: 0; position: relative; top: -0.62em; margin-left: 0.04em; color: var(--color-accent-text); font-weight: var(--fw-extrabold); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text-primary); min-height: var(--touch-target); flex: none; }
.brand:hover { color: var(--color-text-primary); }
.brand-mark { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-deep)); color: var(--color-on-accent); box-shadow: var(--shadow-glow-sm); overflow: hidden; transition: transform var(--duration-normal) var(--ease-out-expo); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.04); }
.brand-mark .icon { width: 21px; height: 21px; }
.brand-mark-img { background: none; box-shadow: none; }
.brand-mark-img img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .brand-name { font-size: var(--text-xl); }
.brand-sub { font-size: 0.6875rem; color: var(--color-text-muted); letter-spacing: var(--tracking-wide); margin-top: 3px; }
@media (max-width: 380px) { .brand-sub { display: none; } }

/* ---------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); }
.container-narrow { max-width: calc(var(--container-narrow) + var(--container-gutter) * 2); }
.container-article { max-width: calc(var(--container-article) + var(--container-gutter) * 2); }
.section { padding-block: var(--space-section); position: relative; }
.section-tight { padding-block: var(--space-section-tight); }
.section-alt { background: var(--color-section-alt); border-block: 1px solid var(--color-hairline); }
.section-head { max-width: 780px; margin-bottom: var(--space-12); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head .lead { margin-bottom: 0; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-4); }
.lead { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.muted { color: var(--color-text-muted); }
.secondary { color: var(--color-text-secondary); }
.small { font-size: var(--text-sm); }
.xs { font-size: var(--text-xs); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; word-break: break-word; }
.min-w-0 { min-width: 0; }
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { color: var(--color-accent-text); }

.grid { display: grid; gap: var(--grid-gap); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-span-all { grid-column: 1 / -1; }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .split-rev { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .split-aside { grid-template-columns: minmax(0, 1fr) 360px; } }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.grow-1 { flex: 1; }
.pre-line { white-space: pre-line; }

/* ---------------------------------------------------------------- navigation */
.site-nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--color-nav-glass); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--color-hairline); }
.nav-inner { display: flex; align-items: center; gap: var(--space-4); height: var(--nav-height-mobile); }
@media (min-width: 1024px) { .nav-inner { height: var(--nav-height); } }
.nav-links { display: none; list-style: none; margin: 0 auto; padding: 0; gap: var(--space-1); align-items: center; }
@media (min-width: 1280px) { .nav-links { display: flex; } }
/* Desktop menu: large, bold, evenly spaced. Below 1440px it steps down slightly and the brand tagline hides so nothing is clipped. */
.site-nav .nav-inner { max-width: var(--container-wide); }
/* Spacer between the logo and the first menu item: a hairline with a small accent light gliding down it. */
.nav-links::before { content: ''; flex: none; align-self: center; width: 2px; height: 30px; margin: 0 var(--space-4) 0 var(--space-2); border-radius: var(--radius-full); background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 -12px / 100% 12px, var(--color-hairline-strong); animation: nav-spark 3.6s var(--ease-standard) infinite; }
@keyframes nav-spark { 0% { background-position: 0 -12px, 0 0; } 55%, 100% { background-position: 0 30px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .nav-links::before { animation: none; background: var(--color-accent-edge); } }
@media (min-width: 1280px) { .site-nav .brand-sub { display: none; } }
@media (min-width: 1280px) and (max-width: 1599px) { .nav-links { gap: 0; } .nav-links .nav-link { padding-inline: 8px; font-size: 0.9375rem; } .nav-inner { gap: var(--space-3); } }
@media (min-width: 1280px) and (max-width: 1799px) { .site-nav .brand-sub { display: none; } }
.nav-links > li { position: relative; }
/* Top-level menu items: brightest text colour, heaviest heading weight, a faint glow in dark mode (tokens: --color-nav-text, --nav-text-glow). */
.nav-links > li > .nav-link { color: var(--color-nav-text); font-family: var(--font-display); font-weight: var(--fw-extrabold); text-shadow: var(--nav-text-glow); }
.nav-links > li > .nav-link-report { color: var(--color-accent-text); }
/* Admin → Settings → General → Main menu lettering = Capitals. Capitals run wider, so they are set a step smaller with a little tracking. */
.nav-caps .nav-links .nav-link { text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.9375rem; padding-inline: 8px; }
@media (min-width: 1280px) { .nav-caps .brand-sub { display: none; } }
@media (min-width: 1600px) and (max-width: 1799px) { .nav-caps .nav-links .nav-link { padding-inline: 6px; } }
@media (min-width: 1280px) and (max-width: 1599px) { .nav-caps .nav-links .nav-link { font-size: 0.875rem; padding-inline: 6px; } }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; padding: var(--space-2) 10px; min-height: 40px; border-radius: var(--radius-md); color: var(--color-text-primary); text-decoration: none; font-size: var(--text-base); font-weight: var(--fw-bold); letter-spacing: 0.005em; background: none; border: 0; cursor: pointer; font-family: inherit; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.nav-link:hover, .nav-link[aria-expanded='true'] { color: var(--color-text-primary); background: var(--color-hairline); }
.nav-link[aria-current='page'], .nav-link.is-active { color: var(--color-text-primary); }
.nav-link[aria-current='page']::after, .nav-link.is-active::after { content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 2px; height: 2px; background: var(--color-accent); border-radius: var(--radius-full); }
.nav-links > li { flex: none; }
.nav-link .chev { flex: none; width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-standard); }
.nav-link[aria-expanded='true'] .chev { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + var(--space-2)); left: 50%; min-width: 580px; background: var(--color-surface); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); z-index: var(--z-dropdown); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo), visibility 0s linear var(--duration-fast); }
.dropdown.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.dropdown-narrow { min-width: 340px; grid-template-columns: 1fr; }
.nav-links > li:nth-last-child(-n+3) .dropdown { left: auto; right: 0; transform: translateY(-6px); }
.nav-links > li:nth-last-child(-n+3) .dropdown.open { transform: none; }
.nav-links > li:first-child .dropdown, .nav-links > li:nth-child(2) .dropdown { left: 0; transform: translateY(-6px); }
.nav-links > li:first-child .dropdown.open, .nav-links > li:nth-child(2) .dropdown.open { transform: none; }
.dropdown a { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text-primary); transition: background var(--duration-fast) var(--ease-standard); }
.dropdown a:hover, .dropdown a[aria-current='page'] { background: var(--color-accent-wash); }
.dropdown .icon-tile { width: var(--icon-tile-sm); height: var(--icon-tile-sm); border-radius: var(--radius-md); margin: 0; }
/* The generic ".dropdown span" rule (block, small grey text) must not reach the icon tile: keep it a centred square in brand colour. */
.dropdown a > .icon-tile { display: grid; place-items: center; flex: none; color: var(--color-accent-text); line-height: 1; }
.dropdown a > .icon-tile-muted { color: var(--color-text-secondary); }
/* Text column: title then at most two lines of description, cut at the line end instead of mid-word on the server. */
.dropdown:not(.user-dropdown) a > span:last-child { min-width: 0; padding-top: 1px; }
.dropdown:not(.user-dropdown) a > span:last-child > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; margin-top: 2px; }
.dropdown .icon-tile .icon { width: var(--icon-md); height: var(--icon-md); }
.dropdown a:hover .icon-tile { transform: scale(1.06); }
.dropdown strong { display: block; font-size: var(--text-sm); font-weight: var(--fw-bold); }
.dropdown span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 1280px) { .nav-actions { margin-left: 0; } }
.btn.nav-cta { display: none; }
@media (min-width: 720px) { .btn.nav-cta { display: inline-flex; } }
.icon-btn { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-md); border: 1px solid var(--color-hairline-strong); background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); flex: none; }
.icon-btn:hover { color: var(--color-text-primary); border-color: var(--color-accent-edge); background: var(--color-accent-wash); }
.icon-btn .icon { width: var(--icon-md); height: var(--icon-md); }
.icon-btn-sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
@media (pointer: coarse) { .icon-btn-sm { width: var(--touch-target); height: var(--touch-target); } }
.theme-toggle .when-light { display: none; }
[data-theme='light'] .theme-toggle .when-light { display: inline-block; }
[data-theme='light'] .theme-toggle .when-dark { display: none; }
.theme-toggle:hover .icon { transform: rotate(20deg); }
.theme-toggle .icon { transition: transform var(--duration-normal) var(--ease-out-expo); }
.menu-toggle { display: inline-grid; }
@media (min-width: 1280px) { .menu-toggle { display: none; } }
.site-nav .brand, .site-nav nav, .nav-actions > * { flex: none; }

.drawer-backdrop { position: fixed; inset: 0; background: var(--color-overlay); z-index: var(--z-drawer); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-standard); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--color-surface); border-left: 1px solid var(--color-hairline-strong); z-index: var(--z-drawer); transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-out-expo); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.drawer-open .drawer { transform: none; }
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-hairline); min-height: var(--nav-height-mobile); font-size: var(--text-lg); }
.drawer nav { padding: var(--space-4) var(--space-3); }
.drawer nav a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); padding: var(--space-2) var(--space-3); color: var(--color-text-primary); text-decoration: none; border-radius: var(--radius-md); font-weight: var(--fw-semibold); }
.drawer nav a:hover, .drawer nav a[aria-current='page'] { background: var(--color-accent-wash); }
.drawer nav a .icon { color: var(--color-accent-text); }
.drawer nav .sub { padding-left: var(--space-10); font-weight: var(--fw-regular); color: var(--color-text-secondary); font-size: var(--text-sm); min-height: 38px; }
.drawer-foot { margin-top: auto; padding: var(--space-5); border-top: 1px solid var(--color-hairline); display: grid; gap: var(--space-3); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target); padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-weight: var(--fw-bold); font-size: var(--text-sm); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.btn .icon, .btn .icon-sm { transition: transform var(--duration-fast) var(--ease-out-expo); }
.btn:hover .icon-sm:last-child:not(:first-child) { transform: translateX(2px); }
.btn-primary { background: linear-gradient(180deg, var(--color-accent), var(--color-accent-deep)); color: var(--color-on-accent); box-shadow: var(--shadow-glow-sm); font-size: var(--text-base); }
.btn-primary:hover { color: var(--color-on-accent); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
/* Light theme turns links orange on hover (a:hover); a solid button's text must stay white. */
[data-theme='light'] a.btn-primary:hover, [data-theme='light'] a.btn-primary:focus-visible { color: var(--color-on-accent); }
.btn-primary:active { transform: none; background: var(--color-accent-deep); }
.btn-secondary { background: var(--color-surface-3); color: var(--color-text-primary); border-color: var(--color-hairline-strong); }
.btn-secondary:hover { color: var(--color-text-primary); border-color: var(--color-secondary-edge); background: var(--color-secondary-wash); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { color: var(--color-text-primary); background: var(--color-hairline); }
.btn-danger { background: var(--color-danger-wash); color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { color: var(--color-danger); background: var(--color-danger-wash); box-shadow: 0 0 0 1px var(--color-danger); }
.btn-success { background: var(--color-success-wash); color: var(--color-success); border-color: var(--color-success); }
.btn-success:hover { color: var(--color-success); box-shadow: 0 0 0 1px var(--color-success); }
.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
@media (pointer: coarse) { .btn-sm { min-height: var(--touch-target); } }
.btn-lg { min-height: 52px; padding: var(--space-3) var(--space-8); font-size: var(--text-base); }
.btn-block { width: 100%; white-space: normal; text-align: center; }
.btn[aria-busy='true'] { cursor: progress; opacity: 0.8; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); text-decoration: none; font-size: var(--text-sm); }
.link-arrow .icon, .link-arrow .icon-sm { transition: transform var(--duration-fast) var(--ease-out-expo); }
.link-arrow:hover .icon, .link-arrow:hover .icon-sm, .card-link:hover .link-arrow .icon-sm { transform: translateX(4px); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--space-section); overflow: hidden; }
/* Hero background touch: a soft shade cast behind the headline that dies away toward the animation on the right. Theme tokens, static, decorative. */
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 75% at 18% 48%, var(--color-accent-wash-strong), transparent 70%), linear-gradient(90deg, var(--color-accent-wash) 0%, transparent 62%); }
.hero > .hero-grid { z-index: 1; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.hero-grid > *, .page-hero-grid > *, .blog-hero-grid > *, .split > *, .proof-layout > * { min-width: 0; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.hero-pill { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1); border-radius: var(--radius-full); background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); color: var(--color-text-primary); font-size: var(--text-sm); margin-bottom: var(--space-6); transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.hero-pill > span:not(.dot):not(.live-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.hero-pill:hover { color: var(--color-text-primary); background: var(--color-accent-wash-strong); }
.hero-pill .dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent); flex: none; }
.hero-pill .dot .icon { width: 15px; height: 15px; }
.hero-pill-alert .dot { animation: ring 3.2s var(--ease-in-out) infinite; }
.hero-ticker { width: min(640px, 100%); padding-right: var(--space-2); }
.hero-ticker .dot .ic-insight, .hero-ticker[data-kind='insight'] .dot .ic-alert { display: none; }
.hero-ticker[data-kind='insight'] .dot .ic-insight { display: inline-block; }
.hero-ticker[data-kind='alert'] .dot { animation: ring 3.2s var(--ease-in-out) infinite; }
.ticker-items { display: grid; flex: 1; min-width: 0; }
.ticker-item { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 28px; color: var(--color-text-primary); text-decoration: none; transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
.ticker-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-item strong { flex: none; }
.ticker-item .icon-sm { flex: none; margin-left: auto; transition: transform var(--duration-fast) var(--ease-out-expo); }
.ticker-item:hover { color: var(--color-text-primary); }
.ticker-item:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.ticker-item:hover .icon-sm { transform: translateX(3px); }
.ticker-item:not(.is-active) { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ticker-item, .hero-ticker { transition: none; animation: none; } }
@keyframes ring { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } }
.hero h1 { font-size: var(--text-6xl); line-height: 1.02; margin-bottom: var(--space-6); }
.hero h1 .accent { color: var(--color-accent-text); }
.hero .lead { max-width: 62ch; margin-bottom: var(--space-8); }
.motto { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); margin-bottom: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.motto span { display: inline-flex; align-items: center; gap: var(--space-3); }
.motto span + span::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent); }
.hero-trust { list-style: none; padding: var(--space-6) 0 0; margin: var(--space-10) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); border-top: 1px solid var(--color-hairline); }
.hero-trust li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.hero-trust .icon { color: var(--color-accent-text); }

.hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; width: 100%; }
.hero-visual svg { width: 100%; height: 100%; }
.hero-visual-image { aspect-ratio: auto; }
.hero-img { width: 100%; border-radius: var(--radius-2xl); border: 1px solid var(--color-card-border); box-shadow: var(--shadow-lg); }
.hv-ring { fill: none; stroke: var(--color-hairline-strong); }
.hv-ring-accent { fill: none; stroke: var(--color-accent-edge); stroke-dasharray: 4 8; transform-origin: 50% 50%; animation: spin 60s linear infinite; }
.hv-edge { stroke: var(--color-hairline-strong); stroke-width: 1.2; }
.hv-edge-hot { stroke: var(--color-accent); stroke-width: 1.6; stroke-dasharray: 6 6; animation: flow 2.4s linear infinite; }
.hv-node { fill: var(--color-surface-2); stroke: var(--color-hairline-strong); stroke-width: 1.5; }
.hv-node-hot { fill: var(--color-accent-wash); stroke: var(--color-accent); stroke-width: 2; }
.hv-node-core { fill: var(--color-accent); }
.hv-pulse { fill: none; stroke: var(--color-accent); transform-box: fill-box; transform-origin: center; animation: pulse 2.8s var(--ease-out-expo) infinite; }
.hv-label { fill: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px; }
.hv-label-hot { fill: var(--color-accent-text); }
.hv-core-icon { stroke: var(--color-on-accent); stroke-width: 2; stroke-linejoin: round; }
.hv-funds { fill: var(--color-accent-bright); filter: drop-shadow(0 0 6px var(--color-accent)); }
.hero-visual[data-tone="info"] { --color-accent: var(--color-info); --color-accent-bright: var(--color-info); --color-accent-wash: var(--color-info-wash); --color-accent-edge: var(--color-info); --color-accent-text: var(--color-info); }
.hero-visual[data-tone="success"] { --color-accent: var(--color-success); --color-accent-bright: var(--color-success); --color-accent-wash: var(--color-success-wash); --color-accent-edge: var(--color-success); --color-accent-text: var(--color-success); }
.hero-visual[data-speed="calm"] .hv-edge-hot { animation-duration: 3.6s; }
.hero-visual[data-speed="calm"] .hv-pulse { animation-duration: 4s; }
.hero-visual[data-speed="still"] .hv-edge-hot, .hero-visual[data-speed="still"] .hv-pulse, .hero-visual[data-speed="still"] .hv-ring-accent { animation: none; }
@media (prefers-reduced-motion: reduce) { .hv-funds { display: none; } .hero-visual { animation: none !important; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.hero-card { position: absolute; background: var(--color-surface); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-lg); font-size: var(--text-xs); display: flex; align-items: center; gap: var(--space-3); animation: float 7s var(--ease-in-out) infinite; }
.hero-card .icon-tile { width: 36px; height: 36px; margin: 0; border-radius: var(--radius-md); }
.hero-card .icon-tile .icon { width: 18px; height: 18px; }
.hero-card strong { display: block; font-size: var(--text-sm); color: var(--color-text-primary); }
.hero-card span { color: var(--color-text-muted); }
.hero-card-a { left: 0; bottom: 4%; }
.hero-card-b { right: 0; top: 10%; animation-delay: -3.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 479px) { .hero-card { display: none; } }

/* ---------------------------------------------------------------- page hero (inner pages) */
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--space-10); position: relative; border-bottom: 1px solid var(--color-hairline); background: linear-gradient(180deg, var(--color-accent-grid), transparent 70%); }
.page-hero h1 { font-size: var(--text-5xl); max-width: 22ch; }
.page-hero .lead { max-width: 68ch; }
.page-hero-grid { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1024px) { .page-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.page-hero-figure { margin: 0; }
.page-hero-figure img { border-radius: var(--radius-2xl); border: 1px solid var(--color-card-border); box-shadow: var(--shadow-lg); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb li + li::before { content: '\203A'; margin-right: var(--space-2); color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-text); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--color-text-primary); font-weight: var(--fw-medium); }

/* ---------------------------------------------------------------- cards */
.card { background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: var(--space-6); position: relative; }
.card-pad-lg { padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem); }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-hairline); }
.card-head h2, .card-head h3 { margin: 0; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.card-body { padding: var(--space-6); }
.card h3 { margin-bottom: var(--space-2); }
.card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); height: 100%; }
.card-link:hover { color: inherit; transform: translateY(-4px); border-color: var(--color-accent-edge); box-shadow: var(--shadow-lg); }
.card-link:hover .icon-tile, .feature-card:hover .icon-tile { transform: translateY(-2px) rotate(-4deg); background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.card-link p { color: var(--color-text-secondary); font-size: var(--text-sm); flex: 1; }
.card-link .link-arrow { margin-top: var(--space-4); color: var(--color-accent-text); }
.feature-card { transition: border-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
.feature-card:hover { border-color: var(--color-accent-edge); transform: translateY(-2px); }
.card-featured { border-color: var(--color-accent-edge); background: linear-gradient(160deg, var(--color-accent-wash), var(--color-surface) 50%); }
.card-col { display: flex; flex-direction: column; }
.card-col > .btn:last-child, .card-col > .push { margin-top: auto; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-secondary); }
.check-list li .icon { color: var(--color-accent-text); margin-top: 2px; width: 18px; height: 18px; flex: none; }
.check-list.two-col { grid-template-columns: 1fr; }
@media (min-width: 768px) { .check-list.two-col { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } }

/* Service page: "What this includes" and "How an engagement works" (public/service.php). Card + icon-tile head as on
   the partnership cards; steps numbered 01, 02 … in mono like the home process, joined by a line. */
.svc-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.svc-card-head h2 { margin: 0; }
.svc-includes-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; }
.svc-includes-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-hairline); color: var(--color-text-primary); font-weight: var(--fw-medium); line-height: var(--lh-snug, 1.35); }
.svc-includes-list li:first-child { border-top: 0; }
@media (min-width: 768px) {
  .svc-includes-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .svc-includes-list li:nth-child(2) { border-top: 0; }
}
.svc-tick { width: 24px; height: 24px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none; background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); color: var(--color-accent-text); }
.svc-tick .icon { width: 14px; height: 14px; }
.svc-steps { list-style: none; padding: 0; margin: 0; display: grid; }
.svc-steps li { position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; }
.svc-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: calc(var(--space-2) + 40px); bottom: calc(-1 * var(--space-2)); width: 2px; background: linear-gradient(var(--color-accent-edge), var(--color-hairline)); }
.svc-step-num { width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-accent-text); background: var(--color-surface-2); border: 1px solid var(--color-accent-edge); }
.svc-steps li:last-child .svc-step-num { background: var(--color-accent-wash); }
.svc-step-text { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-hairline-strong); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); background: var(--color-surface); transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.chip .icon-sm { color: var(--color-accent-text); }
.chip:hover { border-color: var(--color-secondary-edge); color: var(--color-text-primary); }

/* ---------------------------------------------------------------- process */
.process { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .process { grid-template-columns: repeat(4, 1fr); } }
.process li { background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: var(--space-6); position: relative; overflow: hidden; transition: border-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
.process li:hover { border-color: var(--color-accent-edge); transform: translateY(-2px); }
.process .num { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-text); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); }
.process h3 { margin: var(--space-2) 0; }
.process p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.process .process-cta { border-color: var(--color-accent-edge); background: linear-gradient(160deg, var(--color-accent-wash), var(--color-surface) 60%); }

/* ---------------------------------------------------------------- stats, metrics */
.section-stats { padding-block: 0 var(--space-6); margin-top: calc(var(--space-section) * -0.5); position: relative; z-index: 1; }
.stats-heading { font-size: var(--text-lg); text-align: center; margin-bottom: var(--space-4); }
.stat-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background: var(--color-hairline); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
@media (min-width: 1024px) { .stat-band { grid-template-columns: repeat(4, 1fr); } }
.stat-band > div { background: var(--color-surface); padding: var(--space-6); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1); }
.stat-band dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-4xl); letter-spacing: var(--tracking-display); color: var(--color-text-primary); line-height: 1.05; }
.stat-band dt { font-size: var(--text-sm); color: var(--color-text-secondary); }
.metrics { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.metric { background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: inherit; }
a.metric:hover { border-color: var(--color-accent-edge); color: inherit; }
.metric-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--fw-bold); }
.metric-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-extrabold); line-height: 1.1; letter-spacing: var(--tracking-display); }
.metric-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.metric-accent { border-color: var(--color-accent-edge); }
.metric-accent .metric-value { color: var(--color-accent-text); }

/* ---------------------------------------------------------------- CTA band */
.cta-band { position: relative; border-radius: var(--radius-2xl); padding: clamp(2rem, 1rem + 4vw, 4rem); background: radial-gradient(ellipse at 100% 0%, var(--color-accent-wash-strong), transparent 60%), var(--color-surface); border: 1px solid var(--color-accent-edge); overflow: hidden; display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .cta-band { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { margin-bottom: var(--space-3); }
.cta-band p { color: var(--color-text-secondary); margin: 0; max-width: 64ch; }

/* ---------------------------------------------------------------- audiences */
.audience { display: flex; gap: var(--space-4); align-items: flex-start; }
.audience .icon-tile { margin: 0; }
.audience h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.audience p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ---------------------------------------------------------------- prose (rich article content) */
.prose { font-size: var(--text-md); line-height: 1.78; color: var(--color-text-secondary); max-width: 70ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: var(--text-2xl); margin: var(--space-12) 0 var(--space-4); scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }
.prose h3 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }
.prose h4 { margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--space-5); }
.prose li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.prose li::marker { color: var(--color-accent); font-weight: var(--fw-bold); }
/* Admin → Maintenance (Rollout 1) */
.maint-tables { border: 0; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.maint-tables .label { font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
.maint-tables label { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); }
.maint-tables input { margin-top: 3px; }
.maint-danger { border-color: var(--color-danger-wash); }
[data-recovery] [data-step] .btn, [data-seed-form] .btn { margin-top: var(--space-2); }
/* Admin → Release Center (development installs only) */
.rc-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); max-width: 920px; }
.rc-steps > li.is-done { border-color: var(--color-success-wash); }
.rc-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.rc-head h2 { flex: 1; min-width: 0; }
.rc-job { position: sticky; bottom: var(--space-4); max-width: 920px; margin-top: var(--space-6); z-index: 5; box-shadow: var(--shadow-lg); }
.rc-bar { height: 8px; border-radius: var(--radius-full); background: var(--color-hairline); overflow: hidden; margin-top: var(--space-2); }
.rc-bar span { display: block; height: 100%; width: 0; background: var(--color-accent); border-radius: inherit; transition: width var(--duration-normal) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { .rc-bar span { transition: none; } }
/* About: certifications & affiliations (badge cards) */
.cert-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.cert-card { display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl);
  background: var(--color-surface); border: 1px solid var(--color-card-border); transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
@media (prefers-reduced-motion: reduce) { .cert-card { transition: none; } .cert-card:hover { transform: none; } }
.cert-card:hover { border-color: var(--color-accent-edge); transform: translateY(-3px); }
.cert-badge { width: 120px; height: 120px; object-fit: contain; margin-bottom: var(--space-2); }
.cert-badge-fallback { display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-wash); color: var(--color-accent-text); }
.cert-card h3 { margin: 0; font-size: var(--text-base); line-height: 1.35; }
.cert-issuer { margin: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-text); }
.cert-text { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.cert-link { margin-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
/* Service pages: lists in the service text read as tidy rows (tick for bullets, number badge for steps) */
.service-prose ul, .service-prose ol { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-6); display: grid; gap: var(--space-2); counter-reset: svc; }
.service-prose ul > li, .service-prose ol > li { position: relative; margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 30px);
  background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); }
.service-prose ul > li::before, .service-prose ol > li::before { content: ""; position: absolute; left: var(--space-4); top: calc(var(--space-3) + 5px); width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent-wash-strong); }
.service-prose ul > li::after { content: ""; position: absolute; left: calc(var(--space-4) + 7px); top: calc(var(--space-3) + 9px); width: 5px; height: 9px; border: solid var(--color-accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.service-prose ol > li { counter-increment: svc; }
.service-prose ol > li::before { content: counter(svc); display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-accent-text); }
.prose strong { color: var(--color-text-primary); font-weight: var(--fw-bold); }
.prose a { font-weight: var(--fw-medium); }
.prose blockquote { margin: var(--space-8) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 3px solid var(--color-accent); font-size: var(--text-lg); color: var(--color-text-primary); font-style: italic; }
.prose blockquote p:last-child { margin: 0; }
.prose code { background: var(--color-surface-2); border: 1px solid var(--color-hairline); padding: 0.1em 0.4em; border-radius: var(--radius-sm); font-size: 0.86em; color: var(--color-text-primary); }
.prose pre { background: var(--color-surface-2); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-lg); padding: var(--space-5); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-primary); margin: var(--space-6) 0; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose hr { margin: var(--space-12) auto; width: 80px; border-top: 2px solid var(--color-accent-edge); }
.prose figure { margin: var(--space-8) 0; }
.prose img { border-radius: var(--radius-lg); border: 1px solid var(--color-hairline); }
.prose figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); text-align: center; }
.prose .callout { background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); color: var(--color-text-primary); }
.prose .callout-warning { background: var(--color-warning-wash); border-color: var(--color-warning); }
.prose .callout-info { background: var(--color-info-wash); border-color: var(--color-info); }
.prose .table-scroll { overflow-x: auto; margin: var(--space-6) 0; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-lg); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5; }
.prose th, .prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-hairline); text-align: left; vertical-align: top; }
.prose th { background: var(--color-surface-2); color: var(--color-text-primary); font-weight: var(--fw-bold); }
.prose tr:last-child td { border-bottom: 0; }
.prose .embed { margin: var(--space-8) 0; }
.embed-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-hairline); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose-sm { font-size: var(--text-base); }

/* ---------------------------------------------------------------- badges, tags, tabs */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-bold); line-height: 1.5; white-space: nowrap; border: 1px solid transparent; text-decoration: none; }
.badge .icon-sm { width: 12px; height: 12px; }
a.badge { position: relative; z-index: 2; }
.badge-accent { background: var(--color-accent-wash); color: var(--color-accent-text); border-color: var(--color-accent-edge); }
a.badge-accent:hover { background: var(--color-accent-fill); color: var(--color-on-accent); }
.badge-solid { background: var(--color-accent-fill); color: var(--color-on-accent); }
.badge-info { background: var(--color-info-wash); color: var(--color-info); }
.badge-success { background: var(--color-success-wash); color: var(--color-success); }
.badge-warning { background: var(--color-warning-wash); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-wash); color: var(--color-danger); }
.badge-premium { background: var(--color-premium-wash); color: var(--color-premium); }
.badge-muted { background: var(--color-hairline); color: var(--color-text-secondary); }
.text-warning { color: var(--color-warning); }
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-2); border: 1px solid var(--color-hairline); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.tag:hover, .tag[aria-current='page'] { border-color: var(--color-accent-edge); color: var(--color-accent-text); }
.tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-8); scrollbar-width: thin; }
.tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-hairline-strong); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; font-weight: var(--fw-semibold); transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
@media (pointer: coarse) { .tab { min-height: var(--touch-target); } }
.tab:hover { color: var(--color-text-primary); border-color: var(--color-secondary-edge); }
.tab[aria-current='page'] { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
.tab-count { font-size: var(--text-xs); opacity: 0.8; }
.tabs-sm .tab { min-height: 34px; padding-block: var(--space-1); }

/* ---------------------------------------------------------------- alerts & flash */
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid; font-size: var(--text-sm); margin-bottom: var(--space-4); }
.alert .icon { margin-top: 1px; flex: none; }
.alert p:last-child { margin: 0; }
.alert-success { background: var(--color-success-wash); border-color: var(--color-success); color: var(--color-text-primary); }
.alert-success .icon { color: var(--color-success); }
.alert-error { background: var(--color-danger-wash); border-color: var(--color-danger); color: var(--color-text-primary); }
.alert-error .icon { color: var(--color-danger); }
.alert-warning { background: var(--color-warning-wash); border-color: var(--color-warning); color: var(--color-text-primary); }
.alert-warning .icon { color: var(--color-warning); }
.alert-info { background: var(--color-info-wash); border-color: var(--color-info); color: var(--color-text-primary); }
.alert-info .icon { color: var(--color-info); }
.flash-stack { position: fixed; right: var(--space-4); top: calc(var(--nav-height) + var(--space-3)); z-index: var(--z-toast); width: min(420px, calc(100vw / var(--fit-zoom) - var(--space-8))); display: grid; gap: var(--space-2); }
.flash-stack .alert { box-shadow: var(--shadow-lg); background-color: var(--color-surface); margin: 0; animation: slide-in var(--duration-slow) var(--ease-out-expo); }
.flash-stack .alert-close { margin-left: auto; background: none; border: 0; color: var(--color-text-muted); cursor: pointer; padding: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); }
@keyframes slide-in { from { transform: translateY(-8px); opacity: 0; } }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.field > label, .label, .field > legend { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text-primary); }
.field .req { color: var(--color-accent-text); }
.hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.input, .select, .textarea { width: 100%; min-height: var(--touch-target); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-base); color: var(--color-text-primary); background: var(--color-control); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.textarea { min-height: 140px; resize: vertical; line-height: var(--leading-normal); padding-block: var(--space-3); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-wash-strong); }
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--color-control-invalid); }
.input[readonly], .textarea[readonly] { background: var(--color-surface-2); }
.select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--space-10); }
.input-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.input-sm { min-height: 36px; font-size: var(--text-sm); width: auto; }
.field-error { color: var(--color-danger); font-size: var(--text-sm); margin: 0; font-weight: var(--fw-medium); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer; min-height: var(--touch-target); padding-top: var(--space-2); }
.check input { width: 20px; height: 20px; accent-color: var(--color-accent); margin: 1px 0 0; flex: none; }
.check-sm { min-height: auto; padding: 0; font-size: var(--text-xs); }
.check-sm input { width: 16px; height: 16px; }
.input-group { display: flex; gap: var(--space-2); }
.input-group .input { flex: 1; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--text-sm); font-weight: var(--fw-bold); margin-bottom: var(--space-3); padding: 0; }
fieldset.card > legend { float: left; width: 100%; margin: 0 0 var(--space-5); line-height: 1.25; }
fieldset.card > legend + * { clear: both; }
fieldset.card::after { content: ''; display: table; clear: both; }
.form-section { border-top: 1px solid var(--color-hairline); padding-top: var(--space-6); }
.form-section h2, .form-section h3 { letter-spacing: var(--tracking-tight); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.choice-grid-sm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-body { display: block; height: 100%; padding: var(--space-4); border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-control); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.choice-body strong { display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.choice-body span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.choice-body .price { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent-text); margin-top: var(--space-2); font-weight: var(--fw-extrabold); }
.choice input:checked + .choice-body { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-glow-sm); background: var(--color-accent-wash); }
.choice input:focus-visible + .choice-body { box-shadow: var(--focus-ring); }
.choice input:disabled + .choice-body { opacity: 0.45; cursor: not-allowed; }

.slot-days { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; }
.slot-day { flex: none; min-width: 76px; text-align: center; padding: var(--space-2); border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); background: var(--color-control); color: var(--color-text-primary); font: inherit; cursor: pointer; min-height: 64px; }
.slot-day small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.slot-day strong { display: block; font-size: var(--text-lg); font-family: var(--font-display); }
.slot-day[aria-pressed='true'] { border-color: var(--color-accent); background: var(--color-accent-wash); }
.slot-day:disabled { opacity: 0.4; cursor: not-allowed; }
.slot-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.slot-times .choice-body { text-align: center; padding: var(--space-3) var(--space-2); font-weight: var(--fw-bold); font-family: var(--font-mono); font-size: var(--text-sm); }

.dropzone { border: 1.5px dashed var(--color-hairline-strong); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; background: var(--color-control); color: var(--color-text-secondary); font-size: var(--text-sm); position: relative; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.dropzone > .icon { margin: 0 auto var(--space-2); color: var(--color-accent-text); width: var(--icon-lg); height: var(--icon-lg); }
.dropzone.drag { border-color: var(--color-accent); background: var(--color-accent-wash); }
.dropzone input[type=file] { width: 100%; margin-top: var(--space-3); color: var(--color-text-secondary); font: inherit; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--fw-bold); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-hairline); white-space: nowrap; background: var(--color-surface-2); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-hairline); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-hairline); }
.table a { font-weight: var(--fw-semibold); }
.table .num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-empty { padding: var(--space-10) var(--space-4); text-align: center; color: var(--color-text-muted); }
.table-flat { border: 0; border-radius: 0; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; font-size: var(--text-sm); }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; color: var(--color-text-primary); overflow-wrap: anywhere; }
.kv-stack { display: grid; gap: var(--space-4); margin: 0; }
.kv-stack > div { display: grid; gap: var(--space-1); }
.kv-stack dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); font-weight: var(--fw-bold); }
.kv-stack dd { margin: 0; overflow-wrap: anywhere; }

.pagination { display: flex; gap: var(--space-2); align-items: center; justify-content: center; margin-top: var(--space-8); flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: var(--touch-target); height: var(--touch-target); padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-hairline-strong); text-decoration: none; color: var(--color-text-secondary); font-size: var(--text-sm); }
.pagination a:hover { border-color: var(--color-accent-edge); color: var(--color-text-primary); }
.pagination [aria-current='page'] { background: var(--color-accent-fill); color: var(--color-on-accent); border-color: var(--color-accent-fill); }

.empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-text-muted); }
.empty .icon-tile { margin-inline: auto; }
.empty h3 { color: var(--color-text-bright); }

/* ---------------------------------------------------------------- app shell (portal, partner portal, admin) */
.app-body { background-image: none; }
.app-shell { display: grid; min-height: calc(100vh / var(--fit-zoom)); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .app-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); } }
.sidebar { background: var(--color-surface); border-right: 1px solid var(--color-hairline); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: min(var(--sidebar-width), calc(86vw / var(--fit-zoom))); z-index: var(--z-drawer); transform: translateX(-100%); transition: transform var(--duration-normal) var(--ease-out-expo); overflow-y: auto; overscroll-behavior: contain; }
.drawer-open .sidebar { transform: none; }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 0; height: calc(100vh / var(--fit-zoom)); transform: none; width: auto; } }
.sidebar { overflow-x: hidden; }
.sidebar .brand-sub { white-space: normal; max-width: 170px; line-height: 1.3; }
.sidebar-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-hairline); min-height: var(--nav-height); display: flex; align-items: center; }
.side-nav { padding: var(--space-3); display: grid; gap: 2px; }
.side-group { font-size: 0.6875rem; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--fw-bold); padding: var(--space-4) var(--space-3) var(--space-2); }
.side-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 40px; border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--fw-medium); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
@media (pointer: coarse) { .side-link { min-height: var(--touch-target); } }
.side-link .icon { width: 18px; height: 18px; }
.side-link:hover { background: var(--color-hairline); color: var(--color-text-primary); }
.side-link[aria-current='page'] { background: var(--color-accent-wash); color: var(--color-text-primary); box-shadow: inset 3px 0 0 var(--color-accent); }
.side-link[aria-current='page'] .icon { color: var(--color-accent-text); }
.side-link .count { margin-left: auto; background: var(--color-accent-fill); color: var(--color-on-accent); border-radius: var(--radius-full); font-size: var(--text-xs); padding: 0 var(--space-2); font-weight: var(--fw-bold); min-width: 22px; text-align: center; }
.side-link-sub { padding-left: var(--space-8); font-size: var(--text-xs); min-height: 34px; }
.side-link-sub .icon { width: 15px; height: 15px; }
.sidebar-foot { margin-top: auto; padding: var(--space-4); border-top: 1px solid var(--color-hairline); font-size: var(--text-xs); color: var(--color-text-muted); }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--container-gutter); min-height: var(--nav-height-mobile); background: var(--color-nav-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-hairline); }
@media (min-width: 1024px) { .topbar { min-height: var(--nav-height); } .topbar .menu-toggle { display: none; } }
.topbar-search { flex: 1; max-width: 440px; }
.topbar-search .input { min-height: 40px; font-size: var(--text-sm); }
/* Live global search dropdown */
.topbar-search[data-live-search] { position: relative; }
.gsearch-pop { position: absolute; z-index: 60; top: calc(100% + var(--space-2)); left: 0; right: 0; min-width: 340px; max-height: min(70vh, 34rem); overflow-y: auto; padding: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.gsearch-item { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.gsearch-item:hover, .gsearch-item[aria-selected="true"] { background: var(--color-accent-wash); color: inherit; }
.gsearch-top { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; min-width: 0; }
.gsearch-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gsearch-top .badge { flex: none; }
.gsearch-meta { font-size: var(--text-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-module { font-size: var(--text-xs); color: var(--color-text-muted); }
.gsearch-all { display: block; margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-hairline); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-accent-text); text-decoration: none; }
.gsearch-all:hover, .gsearch-all[aria-selected="true"] { background: var(--color-accent-wash); border-radius: var(--radius-md); }
.gsearch-empty { margin: 0; padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); }
.search-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.search-jump .chip { text-decoration: none; }
.search-jump .count { font-size: var(--text-xs); }
.search-results mark { background: var(--color-accent-wash); color: inherit; border-radius: 3px; padding: 0 2px; }
.search-results .search-type { font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
@media (max-width: 599px) { .search-results .search-module { display: none; } }
.user-chip { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.avatar { width: 34px; height: 34px; border-radius: var(--radius-full); display: inline-grid; place-items: center; background: var(--color-accent-wash); color: var(--color-accent-text); font-weight: var(--fw-bold); font-size: var(--text-sm); border: 1px solid var(--color-accent-edge); flex: none; }
.avatar-lg { width: 72px; height: 72px; font-size: var(--text-xl); }
.avatar-img { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; flex: none; }
.app-content { padding: var(--space-8) var(--container-gutter) var(--space-16); width: 100%; max-width: var(--container-max); }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.page-title h1 { font-size: var(--text-3xl); margin: 0; }
.page-title p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; } /* minmax(0, …): a wide child (table, long reference) can never stretch the column past the screen */
@media (min-width: 1280px) { .app-grid { grid-template-columns: minmax(0, 1fr) 380px; } }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); align-items: flex-end; }
.filters .field { min-width: 160px; }
.filters .input, .filters .select { min-height: 40px; font-size: var(--text-sm); }

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-hairline-strong); }
.timeline li { position: relative; padding-left: var(--space-8); padding-bottom: var(--space-5); font-size: var(--text-sm); }
.timeline li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-surface); border: 2px solid var(--color-accent); }
.timeline li.internal::before { border-color: var(--color-text-muted); }
.timeline time { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }

.thread { display: grid; gap: var(--space-4); max-height: 560px; overflow-y: auto; padding: var(--space-2); }
.msg { max-width: 86%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid var(--color-hairline); font-size: var(--text-sm); }
.msg.mine { margin-left: auto; background: var(--color-accent-wash); border-color: var(--color-accent-edge); }
.msg.internal { border-style: dashed; background: var(--color-warning-wash); border-color: var(--color-warning); }
.msg-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.msg p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.file-list li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); flex-wrap: wrap; }
.file-list .grow { flex: 1; min-width: 0; }
.file-list .name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.hash { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }

.bar-chart { width: 100%; height: auto; max-height: 260px; }
.bar-chart .bar { fill: var(--color-accent); }
.bar-chart .bar-bg { fill: var(--color-hairline); }
.bar-chart text { fill: var(--color-text-muted); font-size: 11px; font-family: var(--font-body); }
.bar-chart .val { fill: var(--color-text-secondary); font-weight: 700; }

/* ---------------------------------------------------------------- auth */
.auth-wrap { min-height: calc(100vh / var(--fit-zoom) - var(--nav-height)); display: grid; place-items: center; padding: var(--space-12) var(--container-gutter); }
.auth-card { width: 100%; max-width: 460px; }
.auth-card-wide { max-width: 640px; }
.auth-card h1 { font-size: var(--text-3xl); }
.auth-alt { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-6); }
.otp-input { font-family: var(--font-mono); font-size: var(--text-2xl); letter-spacing: 0.4em; text-align: center; }
.qr-box { background: var(--color-on-accent); padding: var(--space-3); border-radius: var(--radius-lg); width: 212px; height: 212px; display: grid; place-items: center; }
.qr-box svg, .qr-box img { width: 188px; height: 188px; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-surface-2); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-hairline); }

/* ---------------------------------------------------------------- intelligence tools */
.tool-box { background: var(--color-surface); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-2xl); padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); box-shadow: var(--shadow-lg); }
.tool-input { display: flex; gap: var(--space-3); flex-direction: column; }
@media (min-width: 768px) { .tool-input { flex-direction: row; } }
.tool-input .input { font-family: var(--font-mono); font-size: var(--text-base); min-height: 56px; }
.tool-input .btn { min-height: 56px; }
.result { margin-top: var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--color-hairline-strong); overflow: hidden; }
.result-head { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); flex-wrap: wrap; }
.result-body { padding: var(--space-5); border-top: 1px solid var(--color-hairline); display: grid; gap: var(--space-5); }
.result.risk-none .result-head { background: var(--color-success-wash); }
.result.risk-low .result-head { background: var(--color-info-wash); }
.result.risk-medium .result-head { background: var(--color-warning-wash); }
.result.risk-high .result-head, .result.risk-critical .result-head { background: var(--color-danger-wash); }
.result.risk-invalid .result-head { background: var(--color-surface-2); }
.risk-dial { width: 64px; height: 64px; flex: none; }
.risk-dial .track { fill: none; stroke: var(--color-hairline-strong); stroke-width: 6; }
.risk-dial .val { fill: none; stroke-width: 6; stroke-linecap: round; }
.risk-none .risk-dial .val { stroke: var(--color-success); }
.risk-low .risk-dial .val { stroke: var(--color-info); }
.risk-medium .risk-dial .val { stroke: var(--color-warning); }
.risk-high .risk-dial .val, .risk-critical .risk-dial .val { stroke: var(--color-danger); }
.risk-invalid .risk-dial .val { stroke: var(--color-text-muted); }
.address-display { font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- trace graph */
.trace-canvas { position: relative; width: 100%; height: min(calc(70vh / var(--fit-zoom)), 640px); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); overflow: hidden; background-image: radial-gradient(var(--color-hairline-strong) 1px, transparent 1px); background-size: 22px 22px; touch-action: none; }
.trace-canvas svg { width: 100%; height: 100%; cursor: grab; user-select: none; }
.trace-canvas svg.dragging { cursor: grabbing; }
.tg-edge { stroke: var(--color-text-muted); stroke-width: 1.5; fill: none; }
.tg-edge-g { cursor: pointer; }
.tg-edge-label { fill: var(--color-text-secondary); font-family: var(--font-mono); font-size: 10px; paint-order: stroke; stroke: var(--color-surface-2); stroke-width: 4px; }
.tg-arrow { fill: var(--color-text-muted); }
.tg-node circle { stroke-width: 2.5; fill: var(--color-surface); cursor: pointer; }
.tg-node text { fill: var(--color-text-primary); font-size: 11px; font-family: var(--font-body); paint-order: stroke; stroke: var(--color-surface-2); stroke-width: 4px; pointer-events: none; }
.tg-node .tg-sub { fill: var(--color-text-muted); font-family: var(--font-mono); font-size: 9px; }
.tg-node.sel circle { stroke-width: 4; filter: drop-shadow(0 0 6px var(--color-accent)); }
.tg-victim circle { stroke: var(--trace-victim); } .tg-suspect circle { stroke: var(--trace-suspect); } .tg-intermediary circle { stroke: var(--trace-intermediary); }
.tg-exchange circle { stroke: var(--trace-exchange); } .tg-mixer circle { stroke: var(--trace-mixer); } .tg-service circle { stroke: var(--trace-service); } .tg-unknown circle { stroke: var(--trace-unknown); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend i { width: 12px; height: 12px; border-radius: var(--radius-full); border: 2.5px solid; display: inline-block; }
.lg-victim { border-color: var(--trace-victim); } .lg-suspect { border-color: var(--trace-suspect); } .lg-intermediary { border-color: var(--trace-intermediary); }
.lg-exchange { border-color: var(--trace-exchange); } .lg-mixer { border-color: var(--trace-mixer); } .lg-service { border-color: var(--trace-service); } .lg-unknown { border-color: var(--trace-unknown); }
.trace-toolbar { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; gap: var(--space-2); }
.trace-toolbar .icon-btn { background: var(--color-surface); }

/* ---------------------------------------------------------------- blog: listing */
.blog-hero { padding-bottom: var(--space-6); }
.blog-hero-grid { display: grid; gap: var(--space-8); align-items: end; }
@media (min-width: 1024px) { .blog-hero-grid { grid-template-columns: minmax(0, 1fr) 420px; } }
.blog-hero h1 { max-width: 20ch; }
.author-photo-lg { width: 88px; height: 88px; border-radius: var(--radius-full); object-fit: cover; margin-bottom: var(--space-4); border: 3px solid var(--color-accent-edge); }
.blog-search { position: relative; display: flex; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-lg); padding: var(--space-2); box-shadow: var(--shadow-md); }
.blog-search .input { border: 0; box-shadow: none; padding-left: var(--space-8); background: transparent; min-width: 0; }
.blog-search .input:focus { box-shadow: none; }
.blog-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-wash-strong); }
/* Insights search: live suggestions and result previews */
.blog-suggest { min-width: 0; text-align: left; }
.blog-suggest .gsearch-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-hits { display: grid; gap: var(--space-4); }
.search-hit { position: relative; display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-card-border);
  transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
@media (prefers-reduced-motion: reduce) { .search-hit { transition: none; } .search-hit:hover { transform: none; } }
.search-hit:hover { border-color: var(--color-accent-edge); transform: translateY(-2px); }
.search-hit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.search-hit h3 { margin: 0; font-size: var(--text-lg); line-height: 1.3; }
.search-hit h3 a { color: inherit; text-decoration: none; }
.search-hit h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.search-hit h3 a:focus-visible { outline: none; }
.search-hit:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-wash-strong); }
.search-hit-meta a, .search-hit-go { position: relative; z-index: 1; }
.search-hit-text { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.search-hit-go { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-accent-text); text-decoration: none; }
.search-hit mark, .blog-suggest mark { background: var(--color-accent-wash-strong); color: inherit; border-radius: 3px; padding: 0 2px; }
.blog-search-icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.cat-tabs { margin-bottom: 0; }
.featured-wrap { padding-bottom: 0; }
.featured-post { position: relative; display: grid; gap: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-2xl); overflow: hidden; transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
.featured-post:hover { border-color: var(--color-accent-edge); box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .featured-post { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; } }
.featured-media { display: block; aspect-ratio: 16 / 10; background: var(--color-surface-2); overflow: hidden; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out-expo); }
.featured-post:hover .featured-media img { transform: scale(1.03); }
.featured-body { padding: clamp(1.25rem, 0.8rem + 2vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 { font-size: var(--text-4xl); margin: var(--space-4) 0; }
.featured-body h2 a { color: inherit; text-decoration: none; }
.featured-body .lead { font-size: var(--text-md); }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); }
.byline-author { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text-primary); text-decoration: none; font-weight: var(--fw-semibold); position: relative; z-index: 2; }
.byline-author strong { display: block; }
.byline-author small { display: block; font-weight: var(--fw-regular); color: var(--color-text-muted); font-size: var(--text-xs); }
a.byline-author:hover { color: var(--color-accent-text); }
.byline-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stretched { color: inherit; text-decoration: none; }
.stretched::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.stretched:hover { color: var(--color-accent-text); }
.stretched:focus-visible { box-shadow: none; }
.stretched:focus-visible::after { box-shadow: var(--focus-ring); }

.blog-layout { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 1100px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.blog-main-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.post-grid { align-items: stretch; }
.post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
.post-card:hover { transform: translateY(-4px); border-color: var(--color-accent-edge); box-shadow: var(--shadow-lg); }
.post-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-2); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slower) var(--ease-out-expo); }
.post-card:hover .post-cover img { transform: scale(1.05); }
.post-cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; background-color: var(--color-surface-2); background-image: linear-gradient(160deg, var(--color-accent-wash), transparent 70%); }
.post-cover-fallback .icon { width: 44px; height: 44px; color: var(--color-accent-text); opacity: 0.8; }
.post-card-body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.post-card .meta { margin-bottom: var(--space-3); }
.post-card h3 { font-size: var(--text-lg); line-height: var(--leading-snug); margin-bottom: var(--space-2); }
.post-card p { color: var(--color-text-secondary); font-size: var(--text-sm); flex: 1; margin-bottom: var(--space-4); }
.post-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); }
.post-card-foot .views { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
.home-insights { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 700px) { .home-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-insights .most-read { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .home-insights { grid-template-columns: repeat(2, minmax(0, 1fr)) 360px; } .home-insights .most-read { grid-column: auto; } .home-insights.no-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.most-read { display: flex; flex-direction: column; }
.most-read .side-title { font-size: var(--text-sm); }
.load-more-wrap { display: flex; justify-content: center; margin-top: var(--space-8); }

.blog-sidebar, .sticky-aside { display: grid; gap: var(--space-5); }
@media (min-width: 1100px) { .blog-sidebar, .sticky-aside { position: sticky; top: calc(var(--nav-height) + var(--space-5)); } }
.side-block { background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: var(--space-5); }
.side-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-family: var(--font-body); font-weight: var(--fw-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.side-title .icon-sm { color: var(--color-accent-text); }
.side-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-cats a { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--fw-medium); }
.side-cats a:hover, .side-cats a[aria-current='page'] { background: var(--color-accent-wash); color: var(--color-text-primary); }
.side-cats .count { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.side-popular { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: none; }
.side-popular a { display: flex; gap: var(--space-3); text-decoration: none; color: var(--color-text-primary); }
.side-popular a:hover strong { color: var(--color-accent-text); }
.side-popular .rank { flex: none; width: 28px; height: 28px; border-radius: var(--radius-md); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-sm); background: var(--color-accent-wash); color: var(--color-accent-text); }
.side-popular strong { display: block; font-size: var(--text-sm); line-height: var(--leading-snug); font-weight: var(--fw-semibold); transition: color var(--duration-fast) var(--ease-standard); }
.side-popular small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.side-cta { background: linear-gradient(160deg, var(--color-accent-wash), var(--color-surface) 60%); border-color: var(--color-accent-edge); }
.side-cta .icon-tile { width: 40px; height: 40px; margin-bottom: var(--space-3); }
.side-cta .side-title { color: var(--color-text-bright); text-transform: none; letter-spacing: var(--tracking-tight); font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------- blog: article */
.preview-bar { position: sticky; top: 0; z-index: var(--z-nav); background: var(--color-info); color: var(--color-on-accent); text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--fw-bold); display: flex; justify-content: center; align-items: center; gap: var(--space-2); }
.article-hero { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) var(--space-8); background: linear-gradient(180deg, var(--color-accent-grid), transparent 80%); }
.article-head { max-width: var(--container-article); }
.article-hero h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-display); }
.article-dek { font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-text-secondary); }
.article-layout { display: grid; gap: var(--space-10); padding-bottom: var(--space-section); }
@media (min-width: 1200px) { .article-layout { grid-template-columns: minmax(0, var(--container-article)) 300px; justify-content: space-between; } }
.article-main { min-width: 0; max-width: var(--container-article); }
.article-cover { margin: 0 0 var(--space-8); }
.article-cover img { width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--color-card-border); }
.article-cover figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.article-body { max-width: none; }
.article-tags, .share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-5); border-top: 1px solid var(--color-hairline); }
.article-tags { margin-top: var(--space-10); }
.share-bar .label, .article-tags .label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text-primary); margin-right: var(--space-2); }
.share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--color-hairline-strong); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.share-btn .icon { width: 18px; height: 18px; }
.share-btn:hover { transform: translateY(-2px); color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.author-box { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6); margin-top: var(--space-6); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); }
.author-box h2 a { color: inherit; text-decoration: none; }
.author-box h2 a:hover { color: var(--color-accent-text); }
.author-photo { width: 72px; height: 72px; border-radius: var(--radius-full); object-fit: cover; flex: none; }
.article-cta { margin-top: var(--space-8); }
.article-aside { min-width: 0; }
@media (max-width: 1199px) { .article-aside { display: none; } }

/* ---------------------------------------------------------------- advertising slots */
.ad-slot { display: block; margin: var(--space-8) 0; padding: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); text-align: center; min-height: 120px; overflow: hidden; }
.ad-slot .adsbygoogle { display: block; min-height: 90px; }
.ad-label { display: block; font-size: 0.6875rem; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); text-align: left; }
.ad-sidebar { margin: 0; min-height: 280px; }
.ad-listing { margin: 0; }
.ad-house img { margin-inline: auto; border-radius: var(--radius-md); }
.ad-house a:focus-visible { display: block; }

/* ---------------------------------------------------------------- proof of work: home carousel */
.section-proof { overflow: hidden; background: radial-gradient(ellipse 60% 70% at 85% 50%, var(--color-accent-wash), transparent 70%); }
.proof-layout { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1024px) { .proof-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.proof-intro .btn { margin-top: var(--space-2); }
.carousel-controls { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); }
.carousel-controls .when-paused { display: none; }
.carousel-controls.is-paused .when-paused { display: inline-block; }
.carousel-controls.is-paused .when-playing { display: none; }
.carousel-count { margin-left: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.proof-carousel { position: relative; min-width: 0; }
.carousel-track { display: grid; gap: var(--space-8); }
.proof-carousel.is-ready .carousel-track { gap: 0; }
.proof-carousel.is-ready .proof-slide { grid-area: 1 / 1; }
.proof-carousel.is-ready .proof-slide:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
.proof-slide { position: relative; padding: 0 0 var(--space-12) var(--space-8); transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow); }
.proof-slide.is-active { transition-delay: 0s; }
.shot-frame { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-shot-chrome); border: 1px solid var(--color-hairline-strong); box-shadow: var(--shadow-lg); transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); transform-origin: left center; transition: transform var(--duration-slower) var(--ease-out-expo); }
.proof-slide:hover .shot-frame { transform: perspective(1400px) rotateY(0) rotateX(0); }
.shot-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--color-hairline); font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }
.shot-chrome i { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-hairline-strong); }
.shot-chrome span { margin-left: var(--space-3); }
.shot-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
.shot-media img, .shot-media video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.proof-slide.is-active .shot-img { animation: shot-reveal var(--duration-slower) var(--ease-out-expo) both, ken-burns 9s var(--ease-in-out) both; }
@keyframes shot-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ken-burns { from { transform: scale(1.08); } to { transform: scale(1); } }
.shot-badge { position: absolute; right: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-scrim); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: var(--fw-bold); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.proof-card { position: absolute; left: 0; bottom: 0; width: min(420px, 88%); background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-lg); z-index: 2; }
.proof-slide.is-active .proof-card { animation: card-rise var(--duration-slower) var(--ease-out-expo) 120ms both; }
@keyframes card-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.proof-card-solo { position: relative; width: 100%; }
.proof-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.proof-quote { margin: 0 0 var(--space-3); position: relative; }
.proof-quote p { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-text-primary); margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); }
.proof-quote footer { font-size: var(--text-sm); color: var(--color-text-muted); }
.quote-mark { color: var(--color-accent); width: 26px; height: 26px; margin-bottom: var(--space-2); }
.proof-quote-sm p { font-size: var(--text-base); }
.proof-outcome { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-success); }
.proof-outcome .icon-sm { margin-top: 2px; }
.carousel-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.carousel-dot { width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.carousel-dot::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-hairline-strong); transition: width var(--duration-normal) var(--ease-out-expo), background var(--duration-normal) var(--ease-standard); }
.carousel-dot[aria-current='true']::before { width: 24px; background: var(--color-accent); }
.proof-carousel:not(.is-ready) .carousel-dots { display: none; }
@media (max-width: 639px) { .proof-slide { padding: 0; } .proof-card { position: relative; width: 100%; margin-top: calc(var(--space-8) * -1); left: auto; } .shot-frame { transform: none; } }

/* ---------------------------------------------------------------- proof of work: page + lightbox */
.proof-grid { columns: 1; column-gap: var(--grid-gap); }
@media (min-width: 700px) { .proof-grid { columns: 2; } }
@media (min-width: 1100px) { .proof-grid { columns: 3; } }
.proof-tile { break-inside: avoid; padding: 0; overflow: hidden; margin-bottom: var(--grid-gap); transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
.proof-tile:hover { border-color: var(--color-accent-edge); box-shadow: var(--shadow-lg); }
.proof-tile-media { position: relative; background: var(--color-surface-2); }
.proof-thumb { display: block; overflow: hidden; cursor: zoom-in; }
.proof-thumb img { width: 100%; transition: transform var(--duration-slower) var(--ease-out-expo); }
.proof-tile:hover .proof-thumb img { transform: scale(1.04); }
.media-count, .zoom-hint { position: absolute; top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-overlay); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: var(--fw-bold); pointer-events: none; }
.media-count { left: var(--space-3); }
.zoom-hint { right: var(--space-3); opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.proof-tile:hover .zoom-hint { opacity: 1; }
.proof-tile-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.proof-tile-body h2 { margin-bottom: var(--space-3); }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-lightbox); display: grid; grid-template-rows: auto 1fr auto; padding: var(--space-4); opacity: 0; transition: opacity var(--duration-normal) var(--ease-standard); color: var(--color-on-accent); }
.lightbox.is-open { opacity: 1; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.lightbox-bar .icon-btn, .lightbox-nav { color: var(--color-on-accent); border-color: var(--color-overlay); background: var(--color-overlay); }
.lightbox-stage { display: grid; place-items: center; min-height: 0; position: relative; }
.lightbox-stage img, .lightbox-stage video { max-width: 100%; max-height: calc(100vh / var(--fit-zoom) - 160px); width: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: lb-in var(--duration-normal) var(--ease-out-expo); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-caption { text-align: center; font-size: var(--text-sm); padding-top: var(--space-3); min-height: 2em; }
.lightbox-count { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- design partner portal */
.dp-visual { aspect-ratio: 4 / 3; }
.dp-mock { height: 100%; border-radius: var(--radius-2xl); border: 1px solid var(--color-hairline-strong); background: var(--color-surface); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; animation: float 8s var(--ease-in-out) infinite; }
.dp-mock-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--color-hairline); background: var(--color-shot-chrome); }
.dp-mock-bar i { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-hairline-strong); }
.dp-mock-body { flex: 1; display: grid; grid-template-columns: 28% 1fr; }
.dp-mock-side { border-right: 1px solid var(--color-hairline); padding: var(--space-4); display: grid; align-content: start; gap: var(--space-3); }
.dp-mock-side span { height: 10px; border-radius: var(--radius-full); background: var(--color-hairline-strong); }
.dp-mock-side span.on { background: var(--color-accent); width: 80%; }
.dp-mock-main { padding: var(--space-5); display: grid; align-content: start; gap: var(--space-5); }
.dp-mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.dp-mock-tiles span { aspect-ratio: 1.2; border-radius: var(--radius-lg); background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); display: grid; place-items: center; color: var(--color-accent-text); }
.dp-mock-tiles span:nth-child(2) { animation: tile-glow 4s var(--ease-in-out) infinite; }
@keyframes tile-glow { 0%, 100% { box-shadow: none; } 50% { box-shadow: var(--shadow-glow-sm); } }
.dp-mock-rows { display: grid; gap: var(--space-3); }
.dp-mock-rows span { height: 12px; border-radius: var(--radius-full); background: var(--color-hairline-strong); }
.dp-mock-rows span:nth-child(2) { width: 80%; } .dp-mock-rows span:nth-child(3) { width: 60%; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.step-list li { display: flex; gap: var(--space-4); align-items: flex-start; color: var(--color-text-secondary); }
.step-num { flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-accent-fill); color: var(--color-on-accent); font-family: var(--font-display); font-weight: var(--fw-extrabold); }
.resource-list { list-style: none; margin: 0; padding: 0; }
.resource-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-hairline); flex-wrap: wrap; }
.resource-item:last-child { border-bottom: 0; }
.resource-thumb { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); color: var(--color-accent-text); display: grid; place-items: center; overflow: hidden; flex: none; }
.resource-thumb img { width: 100%; height: 100%; object-fit: cover; }
.resource-title { font-size: var(--text-base); margin: 0 0 var(--space-1); letter-spacing: var(--tracking-tight); }
.announcement + .announcement { border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); margin-top: var(--space-4); }
.announcement h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.announcement.is-pinned h3 { color: var(--color-accent-text); }
.partner-logo img { max-width: 160px; border-radius: var(--radius-md); border: 1px solid var(--color-hairline); margin-bottom: var(--space-3); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--space-4); }

/* ---------------------------------------------------------------- media on public pages */
.media-frame { margin: 0; }
.media-frame img { border-radius: var(--radius-xl); border: 1px solid var(--color-card-border); }
.team-card { text-align: left; }
.team-photo { width: 88px; height: 88px; border-radius: var(--radius-full); object-fit: cover; border: 2px solid var(--color-accent-edge); }
.eyebrow-plain { color: var(--color-accent-text); font-weight: var(--fw-bold); }
.note-line { display: flex; gap: var(--space-2); align-items: flex-start; }
.note-line .icon-sm { margin-top: 3px; color: var(--color-accent-text); }
.price-tag { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); color: var(--color-accent-text); }
.price-card { transition: border-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
.price-card:hover { border-color: var(--color-accent-edge); transform: translateY(-2px); }
.service-row h2 { font-size: var(--text-3xl); }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--color-hairline); padding-block: var(--space-16) var(--space-8); margin-top: var(--space-section); background: var(--color-section-alt); }
/* A page that ends with a full section already has its bottom padding; no second gap before the footer. */
main:has(> .section:last-child) + .site-footer { margin-top: 0; }
.footer-grid { display: grid; gap: var(--space-10); grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.footer-full-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--color-text-primary); margin: var(--space-4) 0 var(--space-2); letter-spacing: var(--tracking-tight); }
.footer-grid h2 { font-size: var(--text-xs); font-family: var(--font-body); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-bright); margin-bottom: var(--space-4); font-weight: var(--fw-extrabold); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.footer-grid a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; transition: color var(--duration-fast) var(--ease-standard); }
.footer-grid a:hover { color: var(--color-accent-text); }
.footer-grid a .icon-sm, .footer-info .icon-sm { color: var(--color-accent-text); }
/* Plain (non-link) line in a footer column, e.g. office hours: same look as the links. */
.footer-info { color: var(--color-text-secondary); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.social-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.footer-grid .social-link, .social-link { display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 40px; border-radius: var(--radius-full); border: 1px solid var(--color-hairline-strong); color: var(--color-text-secondary); transition: transform var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.social-link .icon { width: 18px; height: 18px; }
.footer-grid .social-link:hover, .social-link:hover { transform: translateY(-2px); color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.footer-social { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-hairline); }
.footer-social h2 { margin-bottom: var(--space-3); }
.social-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-grid .social-pill, .social-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-hairline-strong); background: var(--color-surface); color: var(--color-text-primary); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.social-pill .icon { width: 18px; height: 18px; color: var(--color-accent-text); transition: color var(--duration-fast) var(--ease-standard); }
.footer-grid .social-pill:hover, .social-pill:hover { transform: translateY(-2px); color: var(--color-on-accent); background: var(--color-accent-fill); border-color: var(--color-accent-fill); }
.social-pill:hover .icon { color: var(--color-on-accent); }
.social-pill.social-whatsapp .icon { color: var(--color-whatsapp); }
.app-body .social-pill.social-whatsapp:hover .icon { color: var(--color-on-accent); } /* white on the solid hover fill */
@media (prefers-reduced-motion: reduce) { .social-pill, .footer-social { transition: none; } .social-pill:hover { transform: none; } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-hairline); font-size: var(--text-sm); color: var(--color-text-muted); }
.footer-copyright { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); color: var(--color-text-secondary); }
.footer-copyright .sep { color: var(--color-text-muted); }
.brand-name-sm { font-size: var(--text-base); color: var(--color-text-primary); }
.footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-legal a { color: var(--color-text-muted); text-decoration: none; }
.footer-legal a:hover { color: var(--color-accent-text); text-decoration: underline; }

/* ---------------------------------------------------------------- scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- back to top */
.back-to-top { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-sticky); opacity: 0; pointer-events: none; background: var(--color-surface); transform: translateY(8px); transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); box-shadow: var(--shadow-md); }
.back-to-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* ---------------------------------------------------------------- error / misc */
.error-page { text-align: center; padding-block: var(--space-24); }
.error-code { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-7xl); color: var(--color-accent-text); line-height: 1; margin-bottom: var(--space-4); }
.error-page .cluster, [data-center] { justify-content: center; margin-inline: auto; }
.debug { text-align: left; white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-surface-2); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; }
.notice-strip { background: var(--color-accent-wash); border-bottom: 1px solid var(--color-accent-edge); font-size: var(--text-sm); text-align: center; padding: var(--space-2) var(--container-gutter); }
.notice-strip .cluster { justify-content: center; }
.divider-label { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--color-hairline); }
.steps-inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); counter-reset: s; list-style: none; padding: 0; margin: 0 0 var(--space-8); }
.steps-inline li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.steps-inline li::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-surface-2); border: 1px solid var(--color-hairline-strong); font-size: var(--text-xs); font-weight: var(--fw-bold); flex: none; }
.steps-inline li.done::before { background: var(--color-success-wash); border-color: var(--color-success); color: var(--color-success); }
.steps-inline li.now { color: var(--color-text-primary); font-weight: var(--fw-bold); }
.steps-inline li.now::before { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
.h3-like { font-size: var(--text-2xl); }
.link-expired { text-align: center; }
.link-expired .icon-tile { width: 56px; height: 56px; margin-inline: auto; }
.link-expired h1 { font-size: var(--text-3xl); }
.link-expired .cluster { justify-content: center; }
.help-card { margin-bottom: var(--space-5); padding: 0; }
.help-card > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: var(--fw-semibold); list-style: none; }
.help-card > summary::-webkit-details-marker { display: none; }
.help-card > summary::after { content: '+'; margin-left: auto; font-size: var(--text-lg); color: var(--color-text-muted); }
.help-card[open] > summary::after { content: '\2212'; }
.help-list { display: grid; gap: var(--space-4); margin: 0; padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); }
@media (min-width: 900px) { .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
.help-list dt { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); font-size: var(--text-sm); color: var(--color-text-primary); }
.help-list dt .icon-sm { color: var(--color-accent-text); }
.help-list dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.status-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); }
.msg-routing { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-hairline); }
.tc-add { margin-bottom: var(--space-6); }
.tc-add-row { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-4); align-items: start; }
@media (min-width: 900px) { .tc-add-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) auto; } .tc-add-row > [hidden] { display: none; } }
.tc-add-row .field { margin: 0; }
.tc-submit .btn { width: 100%; min-height: 44px; }
.tc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tc-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); animation: rd-in 0.35s var(--ease-out-expo) both; }
.tc-item.is-off { opacity: 0.6; }
.tc-main { flex: 1; min-width: 0; display: grid; gap: var(--space-1); }
.tc-addr { overflow-wrap: anywhere; }
.tc-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.tc-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.tc-remove { width: 36px; height: 36px; color: var(--color-text-muted); }
.tc-remove:hover { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-wash); }
@media (max-width: 599px) { .tc-item { flex-wrap: wrap; } .tc-actions { width: 100%; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .tc-item { animation: none !important; } }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); }
.bulk-bar[hidden] { display: none; }
.bulk-bar-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.bulk-bar-note { flex-basis: 100%; }
.table .col-check { width: 1%; padding-right: 0; }
.table tr.is-selected td { background: var(--color-accent-wash); }
.form-section-title { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-1); padding-top: var(--space-5); border-top: 1px solid var(--color-hairline); }
.form > .form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.readonly-value { padding: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); font-size: var(--text-sm); overflow-wrap: anywhere; }
.thumb { max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-hairline); }
.custody { list-style: none; padding-left: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-1); }
details summary { cursor: pointer; color: var(--color-text-secondary); }
.evidence-item { align-items: flex-start; flex-wrap: wrap; }
.inline-form { display: inline; }
.upcoming + .upcoming { border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); }
.alert .cluster-between p { margin: 0; }
.pay-option { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.pay-instructions { background: var(--color-surface-2); border: 1px dashed var(--color-hairline-strong); border-radius: var(--radius-lg); padding: var(--space-4); }
.post-hero-img { width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--color-hairline); }
@media (max-width: 639px) { .hide-sm { display: none; } }

/* ---------------------------------------------------------------- anti-copy toast */
.guard-toast { position: fixed; left: 50%; bottom: var(--space-8); transform: translate(-50%, 20px); z-index: var(--z-toast); background: var(--color-surface); border: 1px solid var(--color-accent); color: var(--color-text-primary); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); box-shadow: var(--shadow-glow); font-size: var(--text-sm); font-weight: var(--fw-medium); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); display: flex; align-items: center; gap: var(--space-2); }
.guard-toast.show { opacity: 1; transform: translate(-50%, 0); }
.guard-toast .icon { color: var(--color-accent-text); }

/* ---------------------------------------------------------------- invoice / print */
.invoice { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); padding: clamp(1.25rem, 1rem + 2vw, 3rem); }
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.invoice-total { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-3xl); }
/* ================================================================ Admin sidebar: grouped, collapsible sections */
.side-nav-grouped { gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-5); }
.side-link-top { margin-bottom: var(--space-2); font-weight: var(--fw-semibold); }
.side-section { border-radius: var(--radius-lg); transition: background var(--duration-normal) var(--ease-standard); }
.side-section.is-open { background: var(--color-surface-2); }
.side-toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 42px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: left; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.side-toggle:hover { color: var(--color-text-primary); background: var(--color-hairline); }
.side-toggle .icon { width: 18px; height: 18px; flex: none; }
.side-toggle-label { flex: 1; min-width: 0; }
.side-section.is-open .side-toggle, .side-section.is-current .side-toggle { color: var(--color-text-primary); }
.side-section.is-current .side-toggle > .icon:first-child { color: var(--color-accent-text); }
.side-toggle-count { margin-left: 0; transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.side-section.is-open .side-toggle-count { opacity: 0; transform: scale(0.6); }
.side-chev { width: 16px !important; height: 16px !important; color: var(--color-text-muted); transition: transform var(--duration-normal) var(--ease-out-expo); }
.side-section.is-open .side-chev { transform: rotate(180deg); }
.side-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease-out-expo); }
.side-section.is-open .side-panel-wrap, .no-js .side-panel-wrap { grid-template-rows: 1fr; }
.side-items { overflow: hidden; min-height: 0; display: grid; gap: 2px; padding: 0 var(--space-2); }
.side-section.is-open .side-items { padding-bottom: var(--space-2); }
.side-nav-grouped .side-link-sub { padding-left: var(--space-4); font-size: var(--text-sm); min-height: 36px; margin-left: var(--space-3); border-left: 1px solid var(--color-hairline-strong); border-radius: 0 var(--radius-md) var(--radius-md) 0; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s var(--ease-standard), transform 0.25s var(--ease-out-expo), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.side-section.is-open .side-link-sub, .no-js .side-nav-grouped .side-link-sub { opacity: 1; transform: none; }
.side-section.is-open .side-link-sub:nth-child(2) { transition-delay: 0.03s; }
.side-section.is-open .side-link-sub:nth-child(3) { transition-delay: 0.06s; }
.side-section.is-open .side-link-sub:nth-child(4) { transition-delay: 0.09s; }
.side-section.is-open .side-link-sub:nth-child(n+5) { transition-delay: 0.12s; }
.side-nav-grouped .side-link-sub[aria-current='page'] { border-left-color: var(--color-accent); box-shadow: none; }
.side-no-anim .side-panel-wrap, .side-no-anim .side-link-sub, .side-no-anim .side-chev { transition: none !important; }
.mode-pill { margin-left: auto; font-size: 0.625rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 2px var(--space-2); border-radius: var(--radius-full); border: 1px solid; }
.mode-pill-sandbox { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-wash); }
.mode-pill-live { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-wash); }
.topbar .mode-pill { margin-left: 0; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.mode-dot-sm { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; }
.mode-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-warning); box-shadow: 0 0 0 4px var(--color-warning-wash); vertical-align: middle; }
.mode-live .mode-dot { background: var(--color-success); box-shadow: 0 0 0 4px var(--color-success-wash); }
.mode-card.mode-live { border-color: var(--color-success); }
.mode-card.mode-sandbox { border-color: var(--color-warning); }
.ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.ready-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.ready-list .is-ok .icon { color: var(--color-success); flex: none; margin-top: 2px; }
.ready-list .is-todo .icon { color: var(--color-warning); flex: none; margin-top: 2px; }
.sandbox-banner { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-warning); background: var(--color-warning-wash); border-radius: var(--radius-lg); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.sandbox-banner .icon { color: var(--color-warning); flex: none; }
.msg-meta .msg-del { margin-left: auto; }
details.card > summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-2); }
details.card[open] > summary { margin-bottom: var(--space-2); }
.row-check { width: 18px; height: 18px; accent-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .side-section, .side-toggle, .side-toggle-count, .side-chev, .side-panel-wrap, .side-nav-grouped .side-link-sub, .side-link-sub { transition: none !important; } }

/* ================================================================ App chrome polish: sidebar colours, top bar, account menu, touch feedback */
[data-tone="accent"] { --tone: var(--color-accent-text); --tone-solid: var(--color-accent); --tone-wash: var(--color-accent-wash); }
[data-tone="success"] { --tone: var(--color-success); --tone-solid: var(--color-success); --tone-wash: var(--color-success-wash); }
[data-tone="info"] { --tone: var(--color-info); --tone-solid: var(--color-info); --tone-wash: var(--color-info-wash); }
[data-tone="premium"] { --tone: var(--color-premium); --tone-solid: var(--color-premium); --tone-wash: var(--color-premium-wash); }
[data-tone="danger"] { --tone: var(--color-danger); --tone-solid: var(--color-danger); --tone-wash: var(--color-danger-wash); }
[data-tone="warning"] { --tone: var(--color-warning); --tone-solid: var(--color-warning); --tone-wash: var(--color-warning-wash); }
[data-tone="muted"] { --tone: var(--color-text-secondary); --tone-solid: var(--color-text-muted); --tone-wash: var(--color-hairline); }

/* Sidebar surface: soft vertical gradient with a warm glow behind the brand */
.app-body .sidebar { background: radial-gradient(120% 40% at 0% 0%, var(--color-accent-wash), transparent 60%), linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 50%, var(--color-surface-2) 100%); }
.app-body .sidebar-head { position: relative; }

/* Section rows */
.side-nav-grouped { gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-6); }
.side-ico { flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--tone-wash, var(--color-hairline)); color: var(--tone, var(--color-text-secondary)); transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-standard); }
.side-ico .icon { width: 17px; height: 17px; }
.side-nav-grouped .side-toggle, .side-nav-grouped .side-link-top { min-height: 48px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); gap: var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: 0.005em; }
.side-nav-grouped .side-toggle:hover, .side-nav-grouped .side-link-top:hover { background: linear-gradient(90deg, var(--tone-wash), transparent 85%); color: var(--color-text-primary); }
.side-nav-grouped .side-toggle:hover .side-ico, .side-nav-grouped .side-link-top:hover .side-ico { transform: scale(1.07); }
.side-nav-grouped .side-toggle:active, .side-nav-grouped .side-link-top:active { transform: scale(0.985); }
.side-nav-grouped .side-link-top { margin-bottom: 0; }
.side-nav-grouped .side-link-top[aria-current='page'] { background: linear-gradient(90deg, var(--tone-wash), transparent 90%); box-shadow: inset 3px 0 0 var(--tone-solid); color: var(--color-text-primary); }
.side-nav-grouped .side-link-top[aria-current='page'] .side-ico, .side-section.is-current .side-ico { box-shadow: 0 0 0 1px var(--tone-solid), 0 4px 14px -6px var(--tone-solid); }
.side-nav-grouped .side-section { border: 1px solid transparent; }
.side-nav-grouped .side-section.is-open { background: linear-gradient(160deg, var(--tone-wash), transparent 55%), var(--color-surface); border-color: var(--color-hairline); box-shadow: var(--shadow-sm); }
.side-nav-grouped .count, .side-nav-grouped .side-toggle-count { flex: none; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 var(--space-2); line-height: 1; }
.side-nav-grouped .side-toggle-count { background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-deep)); box-shadow: 0 2px 8px -3px var(--color-accent); }

.crumb-sep { display: inline-flex; vertical-align: middle; margin: 0 var(--space-1); color: var(--color-text-muted); }
.crumb-sep .icon { width: 12px; height: 12px; }
/* Pinned rows (Dashboard, Messages, Notifications): always visible, with a short status line */
.side-pinned { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-hairline); }
.side-nav-grouped .side-pin { min-height: 54px; }
.side-pin-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.side-pin-text strong { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.side-pin-text small { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-pin .count { margin-left: auto; }
/* Links inside a section: a guide line, roomy touch targets, coloured current state */
.side-nav-grouped .side-items { margin-left: var(--space-8); padding: 0 var(--space-2) 0 0; gap: 3px; }
.side-nav-grouped .side-section.is-open .side-items { padding-bottom: var(--space-3); }
.side-nav-grouped .side-link-sub { margin-left: 0; border-left: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 40px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.side-nav-grouped .side-link-sub .icon { width: 16px; height: 16px; color: var(--color-text-muted); }
.side-nav-grouped .side-link-sub:hover { background: var(--color-hairline); color: var(--color-text-primary); }
.side-nav-grouped .side-link-sub:hover .icon { color: var(--tone); }
.side-nav-grouped .side-link-sub:active { transform: scale(0.98); }
.side-nav-grouped .side-link-sub[aria-current='page'] { background: linear-gradient(90deg, var(--tone-wash), transparent 95%); color: var(--color-text-primary); font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--tone-solid); }
.side-nav-grouped .side-link-sub[aria-current='page'] .icon { color: var(--tone); }

/* Top bar: glass with a faint accent sweep */
.app-body .topbar { background-image: linear-gradient(90deg, var(--color-accent-wash), transparent 35%); border-bottom: 1px solid var(--color-hairline); gap: var(--space-3); }
.app-body .topbar .nav-actions { gap: var(--space-3); margin-left: auto; }
@media (min-width: 1024px) { .app-body .topbar { padding-right: var(--space-5); } }

/* Touch feedback on every button */
.btn:active, .icon-btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary:active { transform: translateY(1px) scale(0.98); }

/* Account menu (top right) */
.auth-actions { display: none; align-items: center; gap: var(--space-2); }
@media (min-width: 560px) { .auth-actions { display: flex; } }
.auth-actions .btn { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.auth-actions .auth-signup { box-shadow: var(--shadow-glow-sm); }
.drawer-auth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.user-menu { position: relative; }
.user-trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 4px var(--space-3) 4px 4px; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-primary); font: inherit; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.user-trigger:hover, .user-trigger[aria-expanded='true'] { border-color: var(--color-accent-edge); background: linear-gradient(135deg, var(--color-accent-wash), var(--color-surface) 70%); box-shadow: var(--shadow-glow-sm); }
.user-trigger:active { transform: scale(0.97); }
.user-avatar { width: 34px; height: 34px; border: 0; background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-deep)); color: var(--color-on-accent); font-size: var(--text-xs); letter-spacing: 0.04em; box-shadow: 0 3px 10px -4px var(--color-accent); }
.user-trigger-text { display: none; text-align: left; line-height: 1.15; }
.user-trigger-text strong { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.user-trigger-text small { display: block; font-size: 0.6875rem; color: var(--color-text-muted); }
@media (min-width: 900px) { .user-trigger-text { display: block; } }
.user-chev { color: var(--color-text-muted); transition: transform var(--duration-normal) var(--ease-out-expo); }
.user-trigger[aria-expanded='true'] .user-chev { transform: rotate(180deg); }
.dropdown.user-dropdown { left: auto; right: 0; min-width: 290px; max-width: calc(100vw / var(--fit-zoom) - 2 * var(--space-4)); grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; overflow: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; }
.dropdown.user-dropdown.open { transform: none; }
.user-dropdown span { display: inline; font-size: inherit; color: inherit; line-height: inherit; }
/* Header fit: compact account controls while the full menu is showing (1280–1535px); phones use the drawer. */
@media (min-width: 1280px) and (max-width: 1535px) {
  .site-nav .user-trigger-text { display: none; }
  .site-nav .auth-actions { gap: var(--space-1); }
  .site-nav .auth-actions .btn { padding: var(--space-2) var(--space-3); }
  .site-nav .auth-login { width: 40px; padding: 0 !important; }
  .site-nav .auth-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-nav .auth-signup .icon { display: none; }
}
@media (max-width: 559px) { .site-nav .user-menu { display: none; } }
@media (max-width: 459px) { .site-nav .brand-sub { display: none; } }
@media (max-width: 639px) { .app-body .topbar .user-trigger { padding-right: var(--space-2); } .app-body .topbar .user-chev { display: none; } .app-body .topbar .mode-pill { padding: var(--space-1) var(--space-2); } }
.user-dropdown .avatar { display: inline-grid; place-items: center; line-height: 1; }
.side-nav-grouped .side-link-sub > span:not(.count):not(.mode-pill) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-dd-head { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, var(--color-accent-wash), transparent 75%); border-bottom: 1px solid var(--color-hairline); }
.user-dd-head strong { display: block; font-size: var(--text-base); }
.user-dropdown .user-dd-email { display: block; font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown .user-dd-role { display: inline-block; margin-top: var(--space-1); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-text); background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); padding: 1px var(--space-2); border-radius: var(--radius-full); }
.avatar-md { width: 44px; height: 44px; flex: none; border: 0; background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-deep)); color: var(--color-on-accent); }
.user-dd-links { display: grid; gap: 2px; padding: var(--space-2); }
.user-dropdown .user-dd-links a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 42px; border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.user-dropdown .user-dd-links a .icon { color: var(--color-text-muted); }
.user-dropdown .user-dd-links a:hover, .user-dropdown .user-dd-links a[aria-current='page'] { background: linear-gradient(90deg, var(--color-accent-wash), transparent 95%); color: var(--color-text-primary); }
.user-dropdown .user-dd-links a:hover .icon { color: var(--color-accent-text); }
.user-dropdown .user-dd-sep { display: block; height: 1px; margin: var(--space-1) var(--space-2); background: var(--color-hairline); }
.user-dd-foot { padding: var(--space-2); border-top: 1px solid var(--color-hairline); }
.user-signout { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 42px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-danger); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.user-signout:hover { background: var(--color-danger-wash); }
.user-signout:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .side-ico, .user-trigger, .user-chev, .user-dd-links a, .user-dropdown .user-dd-links a, .user-signout, .user-dropdown { transition: none !important; } .btn:active, .icon-btn:active, .user-trigger:active, .user-signout:active, .side-nav-grouped .side-toggle:active, .side-nav-grouped .side-link-sub:active { transform: none; } }

/* ================================================================ Confirmation popup (delete / cancel / OK) */
.rdialog { --rd: var(--color-warning); --rd-wash: var(--color-warning-wash); width: min(440px, calc(100vw / var(--fit-zoom) - 2 * var(--space-4))); max-width: none; padding: 0; border: 0; background: transparent; color: var(--color-text-primary); overflow: visible; }
.rdialog-danger { --rd: var(--color-danger); --rd-wash: var(--color-danger-wash); }
.rdialog-info { --rd: var(--color-info); --rd-wash: var(--color-info-wash); }
.rdialog-success { --rd: var(--color-success); --rd-wash: var(--color-success-wash); }
.rdialog::backdrop { background: var(--color-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: rd-fade 0.22s var(--ease-standard) both; }
.rdialog.is-closing::backdrop { animation: rd-fade-out 0.17s var(--ease-standard) both; }
.rdialog-card { position: relative; overflow: hidden; text-align: center; padding: var(--space-8) var(--space-6) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); animation: rd-in 0.42s var(--ease-out-expo) both; }
.rdialog.is-closing .rdialog-card { animation: rd-out 0.17s var(--ease-standard) both; }
.rdialog-icon { position: relative; width: 68px; height: 68px; margin: 0 auto var(--space-4); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--rd-wash); color: var(--rd); }
.rdialog-icon svg { width: 32px; height: 32px; animation: rd-pop 0.55s var(--ease-out-expo) 0.08s both; }
.rdialog-ring { position: absolute; inset: 0; border-radius: var(--radius-full); border: 2px solid var(--rd); opacity: 0; animation: rd-ring 1.5s var(--ease-out-expo) 0.2s 2; }
.rdialog-danger .rdialog-icon svg { animation: rd-pop 0.55s var(--ease-out-expo) 0.08s both, rd-shake 0.5s var(--ease-standard) 0.55s 1; }
.rdialog-success .rd-check { stroke-dasharray: 16; stroke-dashoffset: 16; animation: rd-draw 0.45s var(--ease-out-expo) 0.3s forwards; }
.rdialog-title { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.rdialog-msg { margin: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); overflow-wrap: anywhere; }
.rdialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rdialog-actions .btn:only-child { grid-column: 1 / -1; }
.rdialog-actions .btn-ghost { border-color: var(--color-hairline-strong); }
.rdialog-mute { position: absolute; top: var(--space-3); right: var(--space-3); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); cursor: pointer; }
.rdialog-mute:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.rdialog-mute[aria-pressed="true"] { color: var(--color-text-muted); opacity: 0.8; }
.btn-danger-solid { background: var(--color-danger); color: var(--color-on-danger); border-color: var(--color-danger); transition: filter var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.btn-danger-solid:hover { color: var(--color-on-danger); filter: brightness(1.08); box-shadow: 0 0 0 3px var(--color-danger-wash); }
@media (max-width: 599px) {
  .rdialog { width: 100%; margin: auto 0 0; max-height: 100%; }
  .rdialog-card { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; border-bottom: 0; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); animation-name: rd-sheet; }
  .rdialog.is-closing .rdialog-card { animation-name: rd-sheet-out; }
  .rdialog-actions { grid-template-columns: minmax(0, 1fr); }
  .rdialog-actions [data-rd-ok] { order: -1; }
  .rdialog-actions .btn { min-height: var(--touch-target); }
}
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rd-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes rd-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes rd-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rd-sheet-out { to { transform: translateY(100%); } }
@keyframes rd-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { transform: none; } }
@keyframes rd-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes rd-shake { 20%, 60% { transform: rotate(-9deg); } 40%, 80% { transform: rotate(9deg); } }
@keyframes rd-draw { to { stroke-dashoffset: 0; } }
/* Success / error messages after an action: the icon pops in with the chime. */
.flash-stack .alert .icon { animation: rd-pop 0.55s var(--ease-out-expo) 0.15s both; }
@media (prefers-reduced-motion: reduce) { .rdialog, .rdialog::backdrop, .rdialog-card, .rdialog-icon svg, .rdialog-ring, .rdialog-danger, .rdialog-success, .rdialog-mute, .btn-danger-solid, .flash-stack, .flash-stack .alert .icon { transition: none !important; animation: none !important; } .rdialog-success .rd-check { stroke-dashoffset: 0; } }

/* SMS / WhatsApp popup (reuses the confirmation popup shell) */
.qm-dialog { width: min(460px, calc(100vw / var(--fit-zoom) - 2 * var(--space-4))); }
.qm-dialog[data-channel="whatsapp"] { --rd: var(--color-success); --rd-wash: var(--color-success-wash); }
.qm-dialog[data-channel="sms"] { --rd: var(--color-info); --rd-wash: var(--color-info-wash); }
.qm-card { text-align: left; padding: var(--space-6); }
/* Never taller than the screen: the form scrolls inside and Cancel / Send stay pinned at the bottom. */
.qm-dialog { max-height: calc(100dvh / var(--fit-zoom) - 2 * var(--space-4)); }
.qm-dialog .qm-card { max-height: calc(100dvh / var(--fit-zoom) - 2 * var(--space-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.qm-dialog .qm-fields > .rdialog-actions { position: sticky; bottom: calc(-1 * var(--space-6)); z-index: 1; margin-inline: calc(-1 * var(--space-6)); padding: var(--space-3) var(--space-6) var(--space-6); background: var(--color-surface); border-top: 1px solid var(--color-hairline); }
@media (max-height: 820px) { .qm-card { padding: var(--space-5) var(--space-6); } .qm-dialog .qm-fields > .rdialog-actions { bottom: calc(-1 * var(--space-5)); padding-bottom: var(--space-5); } .qm-dialog .textarea[name="message"] { min-height: 7.5rem; } }
@media (max-width: 599px) { .qm-dialog, .qm-dialog .qm-card { max-height: calc(92dvh / var(--fit-zoom)); } .qm-dialog .qm-fields > .rdialog-actions { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); } }
.qm-close { top: var(--space-3); right: var(--space-3); }
.qm-head { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); padding-right: var(--space-6); }
.qm-icon { flex: none; width: 48px; height: 48px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--rd-wash); color: var(--rd); animation: rd-pop 0.5s var(--ease-out-expo) 0.05s both; }
.qm-icon .icon { width: 24px; height: 24px; }
.qm-head .rdialog-title { margin-bottom: var(--space-1); font-size: var(--text-lg); }
.qm-sub { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.qm-fields { display: grid; gap: var(--space-3); }
.qm-fields .field { display: grid; gap: var(--space-1); margin: 0; }
.qm-fields .label { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.qm-note { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.qm-alt { margin: var(--space-1) 0 0; text-align: center; font-size: var(--text-xs); }
.qm-alt[hidden] { display: none; }
.qm-dialog .btn-primary { background: var(--rd); border-color: var(--rd); box-shadow: none; color: var(--color-on-status); }
.qm-dialog .btn-primary:hover { color: var(--color-on-status); filter: brightness(1.06); }
.qm-done { text-align: center; padding: var(--space-4) 0 0; }
.qm-done-title { display: flex; justify-content: center; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--rd); margin: 0 0 var(--space-2); }
.qm-done .rdialog-actions { margin-top: var(--space-5); }
/* Track: "Can't remember your ticket number?" list */
.track-pick-list { display: grid; gap: var(--space-2); max-height: min(50vh, 22rem); overflow-y: auto; padding: var(--space-1); margin: 0 calc(var(--space-1) * -1); }
.track-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-card-border); color: inherit; font: inherit; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { .track-pick { transition: none; } }
.track-pick:hover, .track-pick:focus-visible { border-color: var(--color-accent-edge); background: var(--color-accent-wash); }
a.track-pick { text-decoration: none; }
.track-pick-ref { font-weight: var(--fw-bold); font-size: var(--text-sm); }
.track-pick-status { justify-self: end; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
.track-pick-title { grid-column: 1 / -1; font-size: var(--text-sm); overflow-wrap: anywhere; }
.track-pick-meta { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-text-muted); }
.track-picked { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--color-success-wash, var(--color-accent-wash)); color: var(--color-text-primary); }
.track-picked .icon { flex: none; color: var(--color-success); margin-top: 2px; }
.rdialog-detail { display: inline-block; max-width: 100%; margin: calc(-1 * var(--space-3)) 0 var(--space-5); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-hairline); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.qm-dialog[data-channel="email"] { --rd: var(--color-accent); --rd-wash: var(--color-accent-wash); }
.qm-dialog[data-channel="email"] .btn-primary { color: var(--color-on-accent); }
.qm-dialog[data-channel="track"] { --rd: var(--color-info); --rd-wash: var(--color-info-wash); }
.qm-to { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-hairline); }
.qm-to[hidden], .qm-fields [hidden] { display: none; }
.qm-to .label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.qm-to-value { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.qm-link { display: block; margin: 0 0 var(--space-5); }
.qm-alt a { display: inline-flex; align-items: center; gap: var(--space-1); }
.qm-alt a .icon { transition: transform var(--duration-fast) var(--ease-out-expo); }
.qm-alt a:hover .icon { transform: translateX(3px); }
@media (max-width: 599px) { .qm-dialog { width: 100%; } }
.qm-points, .qm-hours { display: none; }
/* Wide screens: brand panel on the left, the form on the right, short fields in pairs. Narrow screens keep one column. */
@media (min-width: 900px) {
  #quick-message { width: min(860px, calc(100vw / var(--fit-zoom) - 2 * var(--space-8))); }
  #quick-message .qm-card { padding: 0; }
  #quick-message .qm-form { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: stretch; }
  #quick-message .qm-head { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; gap: var(--space-5); margin: 0; padding: var(--space-8) var(--space-6); background: linear-gradient(165deg, var(--rd-wash), transparent 75%), var(--color-surface-2); border-right: 1px solid var(--color-hairline); }
  #quick-message .qm-icon { width: 56px; height: 56px; }
  #quick-message .qm-head .rdialog-title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
  #quick-message .qm-sub { line-height: var(--leading-relaxed); }
  #quick-message .qm-points { display: grid; gap: var(--space-3); list-style: none; margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-hairline); }
  #quick-message .qm-points li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.45; }
  #quick-message .qm-points .icon-sm { flex: none; margin-top: 2px; color: var(--rd); }
  #quick-message .qm-hours { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
  #quick-message .qm-fields, #quick-message .qm-done { grid-column: 2; padding: calc(var(--space-8) + var(--space-6)) var(--space-6) 0; }
  #quick-message .qm-done { grid-row: 1 / span 2; align-self: center; padding-bottom: calc(var(--space-8) + var(--space-6)); }
  #quick-message .qm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); align-content: start; }
  #quick-message .qm-fields > * { grid-column: 1 / -1; }
  #quick-message .qm-fields > .field:has([name="name"]), #quick-message .qm-fields > .field:has([name="email"]),
  #quick-message .qm-fields > .field:has([name="phone"]), #quick-message .qm-fields > .field:has([name="subject"]) { grid-column: auto; }
  #quick-message .qm-fields > .rdialog-actions { bottom: 0; margin-inline: calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6) var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .qm-icon, .qm-alt a .icon, .qm-alt { animation: none !important; transition: none !important; } }

/* Service pages: a related article presented as a feature, not a random link */
.insight-feature { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-accent-wash), var(--color-surface) 55%); transition: border-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
.insight-feature:hover { border-color: var(--color-accent-edge); transform: translateY(-2px); }
@media (min-width: 820px) { .insight-feature { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.insight-feature-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-2); }
.insight-feature-media img, .insight-feature-media .post-cover-fallback { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 820px) { .insight-feature-media { aspect-ratio: auto; min-height: 260px; } }
.insight-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.insight-feature-body h3 { margin: 0; font-size: var(--text-xl); line-height: var(--leading-snug); }
.insight-feature-body p { margin: 0; }
.insight-more { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .insight-feature { transition: none !important; } .insight-feature:hover { transform: none; } }
/* ================================================================ Consultations: cards, prices, booking flow */
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes consult-spin { to { --spin: 360deg; } }
.num { display: inline-block; font-family: var(--font-figures); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
/* Amount columns: same figures font, calm weight, right-aligned so digits line up. */
.table td.num, .table th.num { display: table-cell; text-align: right; white-space: nowrap; }
.table td.num { font-family: var(--font-figures); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums lining-nums; }
.table th.num { font-family: inherit; white-space: normal; }
.tabular { font-family: var(--font-figures); font-variant-numeric: tabular-nums lining-nums; }
.consult-card { position: relative; isolation: isolate; }
.consult-card::before, .consult-choice .choice-body::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg, transparent 200deg, var(--color-accent) 290deg, var(--color-accent-bright) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  opacity: 0; transition: opacity var(--duration-normal) var(--ease-standard); animation: consult-spin 5s linear infinite; animation-play-state: paused; }
.consult-card:hover::before, .consult-card:focus-within::before, .consult-card.is-featured::before { opacity: 1; animation-play-state: running; }
.consult-card.is-featured { border-color: var(--color-accent-edge); background: linear-gradient(170deg, var(--color-accent-wash), var(--color-surface) 45%); }
.consult-card:focus-within { box-shadow: var(--focus-ring); }
.consult-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.consult-audience { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-full); padding: 2px var(--space-3); }
.consult-time { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.consult-flag { align-self: flex-start; margin-bottom: var(--space-2); }
.consult-name { margin: 0 0 var(--space-2); }
.consult-price { margin: 0 0 var(--space-4); line-height: 1.1; }
.num-price { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: var(--tracking-tight); color: var(--color-accent-text); }
.consult-card.is-compact .num-price { font-size: var(--text-2xl); }
.consult-highlights { margin: 0 0 var(--space-4); }
.consult-highlights li { font-size: var(--text-sm); }
/* Card rhythm: one even gap between every part, so wrapped titles, chips and the button never touch. */
.consult-card { gap: var(--space-3); }
.consult-card > .consult-meta, .consult-card > .consult-flag, .consult-card > .consult-name, .consult-card > .consult-price, .consult-card > p, .consult-card > .chips, .consult-card > .consult-highlights { margin: 0; }
.consult-card > .consult-name { line-height: 1.12; overflow-wrap: anywhere; }
.consult-card > .consult-price { padding-top: var(--space-1); }
.consult-card > .chips { row-gap: var(--space-3); }
.consult-card > .chip, .consult-card > .chips .chip { line-height: 1.3; }
.consult-card > .push { margin-top: auto; }
/* Home cards: price sits just above the button behind a hairline, so prices line up across a row. */
.consult-card > .consult-price-foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); }
.consult-card > .consult-price-foot + .push { margin-top: 0; }
.consult-card.is-compact .consult-audience { padding-inline: calc(var(--space-2) + 2px); }
/* Four home cards are too narrow below 1280px: two per row keeps labels on one line. */
@media (min-width: 1024px) and (max-width: 1279px) { .consult-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.consult-card > :nth-last-child(2) { margin-bottom: var(--space-3); }
.consult-card > .btn { white-space: normal; line-height: 1.3; min-height: 48px; padding-block: var(--space-3); text-wrap: balance; }
.consult-card .consult-meta { row-gap: var(--space-2); }
.consult-choice .choice-body { position: relative; isolation: isolate; }
.consult-choice:hover .choice-body::before, .consult-choice input:focus-visible + .choice-body::before, .consult-choice input:checked + .choice-body::before { opacity: 1; animation-play-state: running; }
.consult-choice .choice-body .price .num { font-size: var(--text-xl); }
/* Prices everywhere: small currency label, large tabular figure, left aligned on one baseline. */
.money { display: inline-flex; align-items: baseline; gap: 0.35em; white-space: nowrap; line-height: 1; }
.money-cur { font-size: 0.5em; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); text-transform: uppercase; }
.money-fig { font-family: var(--font-figures); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums lining-nums; color: var(--color-accent-text); }
.money-lg { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.money-md { font-size: var(--text-2xl); }
.money-sm { font-size: var(--text-lg); }
/* Booking page consultation options: name and tick, details, price pinned to the bottom so prices line up per row. */
.consult-choice .choice-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.consult-choice .co-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.consult-choice .co-name { display: block; margin: 0; font-size: var(--text-base); line-height: 1.3; color: var(--color-text-primary); }
.consult-choice .co-tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); border: 1.5px solid var(--color-control-border); color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.consult-choice input:checked + .choice-body .co-tick { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.consult-choice .co-meta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
.consult-choice .co-aud { display: block; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.consult-choice .co-price { display: block; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); }
/* The generic ".choice-body span" rule (small, muted) must not reach the price parts. */
.consult-choice .co-price .money { display: inline-flex; font-size: var(--text-2xl); color: inherit; }
.consult-choice .co-price .money-cur { display: inline; font-size: 0.5em; color: var(--color-text-muted); }
.consult-choice .co-price .money-fig { display: inline-block; font-size: 1em; color: var(--color-accent-text); }
@media (prefers-reduced-motion: reduce) { .consult-choice .co-tick { transition: none !important; } }
.booking-steps { margin-bottom: var(--space-2); }
.booking-summary { border-color: var(--color-accent-edge); }
.booking-summary .consult-price-sm { font-family: var(--font-display); font-weight: var(--fw-extrabold); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .consult-card::before, .consult-choice .choice-body::before, .consult-card, .consult-choice { animation: none !important; transition: none !important; } .consult-card.is-featured::before, .consult-choice input:checked + .choice-body::before { opacity: 1; } }

@media print {
  body { background: none; }
  .site-nav, .site-footer, .sidebar, .topbar, .no-print, .flash-stack, .rdialog, .qm-dialog, .back-to-top, .ad-slot, .share-bar, .preview-bar { display: none !important; }
  .app-shell { display: block; }
  .invoice { border: 0; padding: 0; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- preloader + live-refresh note */
.preloader { position: fixed; inset: 0; z-index: calc(var(--z-toast) + 10); display: grid; place-items: center; background: var(--color-base); background-image: radial-gradient(ellipse 60% 50% at 50% 45%, var(--color-accent-wash), transparent 70%); transition: opacity var(--duration-normal) var(--ease-standard), visibility 0s linear var(--duration-normal); animation: preloader-failsafe 0s linear 4s forwards; }
.no-js .preloader { display: none; }
html.is-loaded .preloader { opacity: 0; visibility: hidden; animation: none; }
html.is-leaving .preloader { opacity: 1; visibility: visible; animation: none; transition: opacity var(--duration-fast) var(--ease-standard); }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }
.preloader-inner { display: grid; justify-items: center; gap: var(--space-5); }
.preloader-mark { position: relative; width: 108px; height: 108px; display: grid; place-items: center; }
.preloader-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 1.1s linear infinite; }
.preloader-ring circle { fill: none; stroke-width: 3; }
.preloader-ring .track { stroke: var(--color-hairline-strong); }
.preloader-ring .arc { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 70 207; }
.preloader .brand-mark { width: 60px; height: 60px; border-radius: var(--radius-lg); animation: preloader-beat 1.6s var(--ease-in-out) infinite; }
.preloader .brand-mark .icon { width: 32px; height: 32px; }
@keyframes preloader-beat { 0%, 100% { transform: scale(1); box-shadow: var(--shadow-glow-sm); } 50% { transform: scale(1.06); box-shadow: var(--shadow-glow); } }
.preloader-name { font-size: var(--text-2xl); color: var(--color-text-primary); }
.preloader-bar { width: 160px; height: 3px; border-radius: var(--radius-full); background: var(--color-hairline-strong); overflow: hidden; }
.preloader-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--color-accent); animation: preloader-slide 1.2s var(--ease-in-out) infinite; }
@keyframes preloader-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.live-note { position: fixed; left: 50%; top: calc(var(--nav-height) + var(--space-3)); z-index: var(--z-toast); transform: translate(-50%, -8px); opacity: 0; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-accent-edge); box-shadow: var(--shadow-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); pointer-events: none; }
.live-note::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-success); }
.live-note.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .preloader, .preloader-ring, .preloader-bar, .preloader-mark, .live-note { transition: none !important; } .preloader-ring, .preloader .brand-mark, .preloader-bar i { animation: none !important; } }

/* ---------------------------------------------------------------- reduced motion: one answer for every animated component */
@media (prefers-reduced-motion: reduce) { .icon-tile, .brand-mark, .nav-link, .dropdown, .dropdown a, .icon-btn, .theme-toggle, .drawer, .drawer-backdrop, .btn, .link-arrow, .hero-pill, .hero-pill-alert, .hv-ring-accent, .hv-edge-hot, .hv-pulse, .hero-card, .card-link, .feature-card, .chip, .process, .process li, .tag, .tab, .flash-stack, .input, .select, .textarea, .choice-body, .dropzone, .side-link, .sidebar, .featured-post, .featured-media, .post-card, .post-cover, .side-popular, .share-btn, .proof-slide, .shot-frame, .shot-img, .proof-card, .carousel-dot, .proof-tile, .proof-thumb, .zoom-hint, .lightbox, .lightbox-stage, .dp-mock, .dp-mock-tiles, .price-card, .footer-grid, .social-link, .reveal, .back-to-top, .guard-toast { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } .card-link:hover, .feature-card:hover, .post-card:hover, .price-card:hover, .process li:hover { transform: none; } .shot-frame { transform: none; } .featured-post:hover .featured-media img, .post-card:hover .post-cover img, .proof-tile:hover .proof-thumb img { transform: none; } }

/* ================================================================ Patch 1.0.0 — Report First, assistant, partner onboarding */
.text-left { text-align: left; }
.mt-auto { margin-top: auto; }
.center-cluster { justify-content: center; }
.tagline { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); color: var(--color-accent-text); margin: 0 0 var(--space-3); }
.footer-brand .tagline { margin: var(--space-2) 0; }
.hero-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.nav-link-report { color: var(--color-accent-text); font-weight: var(--fw-bold); }
.nav-link-report::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-accent); margin-right: var(--space-2); vertical-align: middle; box-shadow: 0 0 0 3px var(--color-accent-wash); }
@media (min-width: 1200px) { .process-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Ticket reference (confirmation page) */
.ticket-ref { font-family: var(--font-figures); font-variant-numeric: tabular-nums lining-nums; font-size: var(--text-3xl); font-weight: var(--fw-extrabold); color: var(--color-accent-text); letter-spacing: var(--tracking-wide); margin: 0; overflow-wrap: anywhere; }
.card.stack { display: flex; flex-direction: column; }

/* Contact: quick options */
.quick-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quick-card { display: flex; align-items: flex-start; gap: var(--space-3); height: 100%; padding: var(--space-4); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-primary); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.quick-card:hover { border-color: var(--color-accent-edge); transform: translateY(-2px); }
.quick-card-primary { border-color: var(--color-accent-edge); background: var(--color-accent-wash); }
.quick-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.quick-text strong { font-size: var(--text-sm); }
.quick-text span { font-size: var(--text-xs); color: var(--color-text-muted); }
.quick-arrow { flex: none; color: var(--color-accent-text); margin-top: var(--space-1); }

/* Become a Partner: welcome */
.join-welcome { position: relative; overflow: hidden; padding: calc(var(--space-6) * 2 + 56px) 0 var(--space-16); background: radial-gradient(ellipse at 50% 30%, var(--color-accent-wash), transparent 65%); border-bottom: 1px solid var(--color-hairline); }
.join-welcome h1 { font-size: var(--text-6xl); margin: var(--space-2) 0 var(--space-4); }
.join-welcome-art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.join-ring { position: absolute; width: 260px; height: 260px; border-radius: var(--radius-full); border: 1px solid var(--color-accent-edge); opacity: 0; animation: join-ring 4.5s var(--ease-out-expo) infinite; }
.join-ring-2 { animation-delay: 1.5s; }
.join-ring-3 { animation-delay: 3s; }
.join-mark { position: absolute; top: var(--space-6); width: 56px; height: 56px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-glow); animation: join-pop 0.8s var(--ease-out-expo) both; }
.join-welcome .container { position: relative; }
.join-rise { animation: join-rise 0.9s var(--ease-out-expo) both; }
.join-rise-2 { animation-delay: 0.15s; }
.join-rise-3 { animation-delay: 0.3s; }
.join-rise-4 { animation-delay: 0.45s; }
.join-welcome.is-begun .join-mark { animation: join-pop 0.8s var(--ease-out-expo) both, join-glow 1.2s var(--ease-standard) 2; }
.join-steps { justify-content: center; margin: var(--space-8) 0 0; }
@keyframes join-ring { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes join-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes join-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes join-glow { 50% { box-shadow: 0 0 0 14px var(--color-accent-wash); } }
@media (max-width: 699px) { .join-welcome { padding: calc(var(--space-6) * 2 + 56px) 0 var(--space-12); } .join-welcome h1 { font-size: var(--text-4xl); } }
#why:focus { outline: none; }
.join-offers { align-items: start; }
.join-offer h3 { margin: var(--space-3) 0 var(--space-2); }
.join-offer-head { display: flex; align-items: center; justify-content: space-between; }
.join-num { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--color-accent-text); letter-spacing: var(--tracking-wide); }
/* Partner card lists (Become a Partner offers, Partnerships categories): same tick badge + hairline rows as the
   service page "What this includes" (.svc-includes-list). */
.check-list.join-bullets { gap: 0; }
.join-bullets li { font-size: var(--text-sm); align-items: flex-start; padding: var(--space-2) 0; border-top: 1px solid var(--color-hairline); color: var(--color-text-primary); }
.join-bullets li:first-child { border-top: 0; }
.join-bullets li > .icon { box-sizing: border-box; width: 22px; height: 22px; padding: 4px; margin-top: 0; border-radius: var(--radius-full); background: var(--color-accent-wash); border: 1px solid var(--color-accent-edge); color: var(--color-accent-text); }
.join-bullets li > span { padding-top: 1px; }
.join-closing { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-extrabold); color: var(--color-accent-text); margin: var(--space-8) 0 0; }
.join-terms { max-height: 340px; overflow-y: auto; padding: var(--space-4); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); background: var(--color-surface-2); }
.join-terms h2 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-1); }
.join-terms h2:first-child { margin-top: 0; }
.join-types { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.join-types .choice-body .cluster { display: flex; margin-bottom: var(--space-2); gap: var(--space-2); }
.join-types .choice-body .cluster strong { margin: 0; font-size: var(--text-base); color: var(--color-text-primary); }
.join-types .choice-body .icon-tile { display: grid; }
.price-card { display: flex; flex-direction: column; }
.join-levels { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.join-levels .choice-body strong { font-size: var(--text-base); color: var(--color-text-primary); }
.join-levels .choice-body .badge { display: inline-flex; margin-left: var(--space-1); vertical-align: middle; }
.join-levels .price .xs { display: inline; font-family: var(--font-body); font-weight: var(--fw-regular); }
.join-levels .price[hidden] { display: none; }
.join-level-list { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.choice-body .join-level-list span { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-text-secondary); }
.join-level-list .icon { color: var(--color-success); flex: none; margin-top: 2px; }
.level-table td, .level-table th { vertical-align: top; }

/* Floating assistant */
.assistant { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-sticky); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.assistant-launch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-5) 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: var(--color-accent-fill); color: var(--color-on-accent); font: inherit; font-weight: var(--fw-bold); font-size: var(--text-sm); cursor: pointer; box-shadow: var(--shadow-lg); transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.assistant-launch:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.assistant-launch[hidden], .assistant-panel[hidden] { display: none; }
.assistant.is-open .assistant-launch { display: none; }
.assistant-panel { width: min(380px, calc(100vw / var(--fit-zoom) - 2 * var(--space-4))); max-height: min(640px, calc(100vh / var(--fit-zoom) - 2 * var(--space-5))); display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: join-rise 0.35s var(--ease-out-expo) both; }
.assistant-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-hairline); background: var(--color-accent-wash); }
.assistant-head h2 { font-size: var(--text-base); margin: 0; }
.assistant-head p { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.assistant-dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-success); margin-right: var(--space-1); }
.assistant-body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.assistant-body:focus-visible { outline: var(--focus-ring); }
.assistant-bubble { background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); border-top-left-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.assistant-bubble-ok { border-color: var(--color-success); background: var(--color-success-wash); }
.assistant-options { display: grid; gap: var(--space-2); }
.assistant-option { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-control); color: var(--color-text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); text-align: left; text-decoration: none; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.assistant-option:hover { border-color: var(--color-accent); background: var(--color-accent-wash); }
.assistant-option .icon { color: var(--color-accent-text); flex: none; }
.assistant-option-primary { border-color: var(--color-accent-edge); background: var(--color-accent-wash); font-weight: var(--fw-bold); }
.assistant-form { display: grid; gap: var(--space-3); }
.assistant-form .field { display: grid; gap: var(--space-1); margin: 0; }
.assistant-form .label { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.assistant-form .check { font-size: var(--text-xs); }
.assistant-error { color: var(--color-danger); font-size: var(--text-sm); margin: 0; }
.assistant-foot { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-hairline); }
.has-assistant .back-to-top { bottom: calc(var(--space-5) + 64px); }
@media (max-width: 699px) { .assistant { right: var(--space-4); bottom: var(--space-4); } .assistant-launch-label { display: none; } .assistant-launch { padding: 0 var(--space-4); } .has-assistant .back-to-top { bottom: calc(var(--space-4) + 64px); right: var(--space-4); } }
@media print { .assistant { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .quick-card, .join-welcome, .join-welcome .join-mark, .join-ring, .join-mark, .join-rise, .assistant-launch, .assistant-panel, .assistant-option { transition: none !important; animation: none !important; } .join-ring { display: none; } .quick-card:hover, .assistant-launch:hover { transform: none; } }

/* ---------------------------------------------------------------- report received: confirmation as a popup card */
.receipt { display: grid; place-items: center; padding: var(--space-4) 0; }
.receipt-card { position: relative; width: min(620px, 100%); display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-10) var(--space-8) var(--space-8); background: linear-gradient(165deg, var(--color-accent-wash), var(--color-surface) 45%); border: 1px solid var(--color-accent-edge); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg), 0 0 0 6px var(--color-accent-wash); animation: rd-in 0.55s var(--ease-out-expo) both; }
.receipt-icon { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-success-wash); color: var(--color-success); }
.receipt-icon svg { width: 38px; height: 38px; animation: rd-pop 0.6s var(--ease-out-expo) 0.2s both; }
.receipt-ring { position: absolute; inset: 0; border-radius: var(--radius-full); border: 2px solid var(--color-success); opacity: 0; animation: rd-ring 1.6s var(--ease-out-expo) 0.4s 2; }
.receipt-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0; text-wrap: balance; }
.receipt-label { margin: var(--space-2) 0 0; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.receipt-ref { padding: var(--space-3) var(--space-6); border: 1px dashed var(--color-accent-edge); border-radius: var(--radius-lg); background: var(--color-surface); animation: rd-fade 0.5s var(--ease-standard) 0.35s both; }
.receipt-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; margin-top: var(--space-3); }
.receipt-actions .btn { min-height: 48px; white-space: normal; line-height: 1.25; animation: receipt-rise 0.5s var(--ease-out-expo) both; transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-standard); }
.receipt-actions .btn:nth-child(1) { animation-delay: 0.45s; } .receipt-actions .btn:nth-child(2) { animation-delay: 0.55s; } .receipt-actions .btn:nth-child(3) { animation-delay: 0.65s; }
.receipt-actions .btn:hover { transform: translateY(-2px); }
@keyframes receipt-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.receipt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); width: 100%; margin: var(--space-3) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-hairline); text-align: left; }
.receipt-facts > div { display: grid; gap: var(--space-1); align-content: start; }
.receipt-facts dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); font-weight: var(--fw-bold); }
.receipt-facts dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.receipt-facts .badge { white-space: normal; text-align: left; line-height: 1.3; }
.receipt-print-head, .receipt-print-meta { display: none; }
@media (max-width: 699px) { .receipt-card { padding: var(--space-8) var(--space-5) var(--space-6); } .receipt-actions { grid-template-columns: minmax(0, 1fr); } .receipt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .receipt-card, .receipt-icon svg, .receipt-ring, .receipt-ref, .receipt-actions .btn { animation: none !important; transition: none !important; } .receipt-actions .btn:hover { transform: none; } }
/* Printing the confirmation: only the slip, on a plain white page. */
@media print {
  html.print-scoped body :not(.print-path, .print-area, .print-area *) { display: none !important; }
  html.print-scoped .print-path { margin: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; }
  html.print-scoped .print-area { padding: 0; }
  html.print-scoped .print-area .no-print { display: none !important; }
  html.print-scoped body { background: var(--print-paper); }
  .receipt-card { box-shadow: none !important; background: var(--print-paper) !important; color: var(--print-ink) !important; border: 1px solid var(--print-line) !important; animation: none !important; margin: 24px auto; }
  .receipt-card * { color: var(--print-ink) !important; animation: none !important; }
  .receipt-print-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--print-line); width: 100%; font-size: 12px; }
  .receipt-print-meta { display: block; font-size: 12px; margin: 4px 0 0; }
  .receipt-ref { border: 1px dashed var(--print-rule) !important; background: var(--print-paper) !important; }
  .receipt-icon { background: var(--print-tint) !important; }
}

/* ---------------------------------------------------------------- spacing utilities
   Last in the file on purpose: a utility on an element must win over the component's own margin. */
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }

/* ---------------------------------------------------------------- fit to screen size (Settings, General)
   CSS zoom scales text, spacing and images together before the first paint. Media queries still read the real
   screen, so there is no feedback loop, and a visitor's own browser zoom changes the width these rules see.
   --fit-zoom lets screen-height units (vh, dvh) be corrected where zoom would otherwise distort them. */
:root { --fit-zoom: 1; }
@media (min-width: 1280px) and (max-width: 1439px) and (max-height: 800px) { html.auto-fit { zoom: 0.9; --fit-zoom: 0.9; } }
@media (min-width: 1680px) { html.auto-fit { zoom: 1.08; --fit-zoom: 1.08; } }
@media (min-width: 2200px) { html.auto-fit { zoom: 1.2; --fit-zoom: 1.2; } }
@media (min-width: 2800px) { html.auto-fit { zoom: 1.4; --fit-zoom: 1.4; } }

/* ================================================================ Secure payment modal + result page (Pesapal) */
.btn-pay { min-height: var(--touch-target); gap: var(--space-2); }
.pay-modal { width: min(480px, calc(100vw / var(--fit-zoom) - 24px)); }
.pay-modal .rdialog-card { padding-top: var(--space-10, 2.5rem); }
.pay-modal-close { position: absolute; top: var(--space-3); right: var(--space-3); width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); cursor: pointer; }
.pay-modal-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.pay-modal-close:focus-visible { outline: 2px solid var(--color-focus, var(--color-accent)); outline-offset: 2px; }
.pay-modal-ref { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.pay-modal-amount { margin: var(--space-2) 0 var(--space-4); font-family: var(--font-figures); font-weight: var(--fw-extrabold); font-size: var(--text-3xl); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--color-text-primary); }
.pay-modal-note { display: flex; gap: var(--space-2); align-items: center; justify-content: center; margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-warning); }
.pay-modal-secure { display: flex; gap: var(--space-2); align-items: center; justify-content: center; margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.pay-modal-erricon { --rd: var(--color-danger); --rd-wash: var(--color-danger-wash); }
.pay-modal [data-pm-state="loading"] { padding: var(--space-6) 0 var(--space-2); }
.pay-modal [data-pm-loading-text]:focus { outline: none; }
.pay-spinner { width: 48px; height: 48px; margin: 0 auto var(--space-6); border-radius: var(--radius-full); border: 4px solid var(--color-hairline-strong); border-top-color: var(--color-accent); animation: spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pay-spinner { animation-duration: 2.4s; } }
@media (max-width: 599px) { .pay-modal { width: 100%; } }

.pay-result { --pr: var(--color-info); --pr-wash: var(--color-info-wash); display: grid; justify-items: center; padding: var(--space-8) 0; }
.pay-result[data-tone="success"] { --pr: var(--color-success); --pr-wash: var(--color-success-wash); }
.pay-result[data-tone="danger"] { --pr: var(--color-danger); --pr-wash: var(--color-danger-wash); }
.pay-result[data-tone="warning"] { --pr: var(--color-warning); --pr-wash: var(--color-warning-wash); }
.pay-result-card { width: min(520px, 100%); text-align: center; padding: var(--space-10, 2.5rem) var(--space-6) var(--space-6); border-radius: var(--radius-2xl); }
.pay-result-icon { width: 76px; height: 76px; margin: 0 auto var(--space-4); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--pr-wash); color: var(--pr); }
.pay-result-icon svg { width: 36px; height: 36px; }
.pay-result-icon.is-pending svg { animation: spin 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pay-result-icon.is-pending svg { animation: none; } }
.pay-result-title { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.pay-result-msg { margin: 0 auto var(--space-4); max-width: 42ch; color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.pay-result-facts { display: grid; gap: 0; margin: var(--space-6) 0; padding: 0; text-align: left; border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); }
.pay-result-facts > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-hairline); }
.pay-result-facts > div:first-child { border-top: 0; }
.pay-result-facts dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.pay-result-facts dd { margin: 0; text-align: right; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.pay-result-facts dd.num { font-family: var(--font-figures); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.pay-result-actions { display: grid; gap: var(--space-3); }
.pay-result-actions .btn { min-height: var(--touch-target); }
.pay-result-test { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--color-warning); }
.pay-result-facts dd.pr-ref { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); white-space: nowrap; }
.pay-result-facts dd.mono { font-size: var(--text-sm); }
@media (max-width: 380px) { .pay-result-facts > div { flex-wrap: wrap; } .pay-result-facts dd { margin-left: auto; } }
@media (max-width: 599px) { .pay-option > .grow-1 { flex: 1 1 100%; } .pay-option .btn-pay { width: 100%; justify-content: center; } }
.pay-test-hint { color: var(--color-warning); margin-top: var(--space-1); }

/* ================================================================ Conversations (WhatsApp-style): partials/chat.php */
.chat { --chat-c: var(--color-info); --chat-wash: var(--color-info-wash); display: flex; flex-direction: column; max-height: 600px; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-3) var(--space-3) var(--space-4); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg);
  background-color: var(--color-surface-2); background-image: radial-gradient(var(--color-hairline) 1px, transparent 1.2px); background-size: 18px 18px; }
.chat-empty { align-items: center; justify-content: center; gap: var(--space-2); min-height: 160px; text-align: center; }
.chat-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); }
.chat-day { align-self: center; margin: var(--space-4) 0 var(--space-1); }
.chat-day:first-child { margin-top: 0; }
.chat-day span { display: inline-block; padding: 3px var(--space-3); border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-hairline);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); box-shadow: var(--shadow-sm); }
.chat-row { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); }
.chat-row.is-grouped { margin-top: 3px; }
.chat-row.is-mine { flex-direction: row-reverse; }
/* Who is who, at a glance: each kind of sender has its own colour (avatar, name, role chip). */
.chat-row[data-kind="staff"], .chat-row[data-kind="team"] { --chat-c: var(--color-accent-text); --chat-wash: var(--color-accent-wash); }
.chat-row[data-kind="client"], .chat-row[data-kind="reporter"] { --chat-c: var(--color-info); --chat-wash: var(--color-info-wash); }
.chat-row[data-kind="partner"] { --chat-c: var(--color-premium); --chat-wash: var(--color-premium-wash); }
.chat-row.is-internal { --chat-c: var(--color-warning); --chat-wash: var(--color-warning-wash); }
.chat-avatar, .chat-avatar-gap { flex: 0 0 34px; width: 34px; height: 34px; }
.chat-avatar { display: grid; place-items: center; border-radius: var(--radius-full); background: var(--chat-wash); color: var(--chat-c); border: 1px solid currentColor;
  font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.02em; line-height: 1; }
.chat-avatar.is-brand { background: var(--color-accent-fill); color: var(--color-on-accent); border-color: var(--color-accent-fill); }
.chat-avatar.is-brand svg { width: 18px; height: 18px; }
.chat-bubble { position: relative; min-width: 96px; max-width: min(78%, 560px); padding: var(--space-2) var(--space-3) 4px; border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-hairline); box-shadow: var(--shadow-sm); }
.chat-row:not(.is-grouped):not(.is-mine) .chat-bubble { border-top-left-radius: 4px; }
.chat-row.is-mine:not(.is-grouped) .chat-bubble { border-top-right-radius: 4px; }
.chat-row.is-mine .chat-bubble { background: var(--color-accent-wash); border-color: var(--color-accent-edge); }
.chat-row.is-internal .chat-bubble { background: var(--color-warning-wash); border: 1px dashed var(--color-warning); }
.chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px; padding-right: var(--space-6); }
.chat-name { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--chat-c); }
.chat-role { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--chat-wash); color: var(--chat-c);
  font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.5; }
.chat-role-internal { background: var(--color-warning-wash); color: var(--color-warning); }
.chat-text { margin: 0; font-size: var(--text-sm); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; color: var(--color-text-primary); }
.chat-foot { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.chat-ticks { display: inline-flex; color: var(--color-text-muted); }
.chat-ticks.is-read { color: var(--color-info); }
.chat-ticks svg { width: 17px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-actions { position: absolute; top: 2px; right: 2px; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.chat-bubble:hover .chat-actions, .chat-bubble:focus-within .chat-actions { opacity: 1; }
.chat-actions form { margin: 0; }
@media (hover: none) { .chat-actions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-actions { transition: none !important; } }
@media (max-width: 599px) {
  .chat { padding: var(--space-2) var(--space-2) var(--space-3); max-height: 70vh; }
  .chat-bubble { max-width: 84%; }
  .chat-avatar, .chat-avatar-gap { flex-basis: 28px; width: 28px; height: 28px; font-size: 11px; }
}
.chat-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.chat-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chat-legend-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--chat-c); border: 1px solid var(--chat-c); }
.chat-legend [data-kind="staff"] { --chat-c: var(--color-accent-text); }
.chat-legend [data-kind="client"] { --chat-c: var(--color-info); }
.chat-legend [data-kind="partner"] { --chat-c: var(--color-premium); }
.chat-legend [data-kind="internal"] { --chat-c: var(--color-warning); }
.chat-legend [data-kind="reporter"] { --chat-c: var(--color-info); }

/* Assistant launcher: sits a little higher (clear of phone home bars) and, once scrolled, shrinks to a round icon
   so it covers far less page text (e.g. "Beware of recovery scams" in the Honest advice card). */
.assistant { bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); }
.has-assistant .back-to-top { bottom: calc(var(--space-8) + 64px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) {
  .assistant.is-compact .assistant-launch { width: 52px; padding: 0; gap: 0; justify-content: center; }
  .assistant.is-compact .assistant-launch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .assistant.is-compact .assistant-launch:hover, .assistant.is-compact .assistant-launch:focus-visible { width: auto; padding: 0 var(--space-5) 0 var(--space-4); gap: var(--space-2); }
  .assistant.is-compact .assistant-launch:hover .assistant-launch-label, .assistant.is-compact .assistant-launch:focus-visible .assistant-launch-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (max-width: 699px) {
  .assistant { right: var(--space-3); bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
  .has-assistant .back-to-top { bottom: calc(var(--space-6) + 64px + env(safe-area-inset-bottom)); right: var(--space-3); }
}@media (max-width: 699px) { .has-assistant .note-line { padding-right: 60px; } } /* keep the recovery-scam warning clear of the floating Assistant on phones */

/* ================================================================ PWA: install card, offline page */
.pwa-install { position: fixed; left: var(--space-5); bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); z-index: var(--z-sticky); width: min(400px, calc(100vw / var(--fit-zoom) - 2 * var(--space-5)));
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-xl);
  background: var(--color-surface); border: 1px solid var(--color-card-border); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px);
  transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard); }
.pwa-install.is-in { opacity: 1; transform: none; }
.pwa-install[hidden] { display: none; }
.pwa-install-icon { width: 44px; height: 44px; border-radius: var(--radius-md); }
.pwa-install-title { margin: 0 0 2px; font-weight: var(--fw-bold); font-size: var(--text-sm); }
.pwa-install-text { margin: 0; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.pwa-share { display: inline-flex; vertical-align: -2px; color: var(--color-info); }
.pwa-install-actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); justify-content: flex-end; }
.pwa-install-actions .btn { min-height: var(--touch-target); }
@media (max-width: 699px) { .pwa-install { left: var(--space-3); right: calc(var(--space-3) + 64px); width: auto; bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .pwa-install { transition: none !important; transform: none; } }
@media print { .pwa-install { display: none !important; } }
.link-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--color-accent-text); }
.offline-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.offline-card { width: min(440px, 100%); text-align: center; display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-8) var(--space-6); }
.offline-card h1 { margin: 0; font-size: var(--text-2xl); }
.offline-card p { margin: 0; }
.offline-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--color-accent-wash); color: var(--color-accent-text); }
.offline-icon svg { width: 30px; height: 30px; }
/* ================================================================ Mobile audit (2026-10-04): readable text, finger-sized targets */
.mode-pill { font-size: 0.6875rem; } /* 11px minimum */
@media (pointer: coarse) {
  .link-arrow, .link-btn, a.small, .footer-legal a { min-height: 40px; display: inline-flex; align-items: center; }
  a.badge { min-height: 32px; display: inline-flex; align-items: center; }
  .topbar .mode-pill { min-height: 36px; }
  details > summary { min-height: 40px; padding-block: var(--space-2); }
  input[type=file] { min-height: 44px; padding: var(--space-2); }
  .ticker-item { min-height: 40px; }
  /* Carousel dots: real 44px tap targets side by side (no overlap), slightly larger visible dot */
  .carousel-dots { gap: 0; margin-top: var(--space-3); }
  .carousel-dot { width: 44px; height: 44px; }
  .carousel-dot::before { width: 10px; height: 10px; }
  .carousel-dot[aria-current='true']::before { width: 28px; }
}@media (max-width: 479px) { .btn-wrap { white-space: normal; text-align: center; max-width: 100%; } }
@media (pointer: coarse) {
  .flash-stack .alert-close, .alert-close { min-width: 40px; min-height: 40px; }
  .check-list li > a, .file-list li > a.name { display: inline-flex; align-items: center; min-height: 36px; }
}.pwa-install { z-index: calc(var(--z-sticky) - 1); } /* always beneath the Assistant, menus and dialogs */
.assistant.is-open ~ .pwa-install, body.drawer-open .pwa-install { display: none; }
/* Phones: dashboard numbers two per row; search becomes an icon; a stacked table turns each row into a small card. */
.topbar-search-btn { display: none; }
@media (max-width: 599px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .metric { padding: var(--space-4); }
  .table-stack thead { display: none; }
  .table-stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-hairline); }
  .table-stack td { display: block; padding: 0; border: 0; white-space: normal; }
  .table-stack td:first-child { grid-column: 1; grid-row: 1; }
  .table-stack td.stack-end { grid-column: 2; grid-row: 1; text-align: right; }
  .table-stack td:not(:first-child):not(.stack-end) { grid-column: 1 / -1; }
  .table-stack td:empty { display: none; }
  .table-stack td[data-label]:not(:first-child):not(:nth-child(2)):not(.stack-end):not(:empty)::before { content: attr(data-label) ": "; color: var(--color-text-muted); font-size: var(--text-xs); }
}
@media (max-width: 479px) {
  .topbar-search { display: none; }
  .topbar-search-btn { display: inline-grid; margin-right: auto; }
}@media (max-width: 599px) { .table-stack td:first-child { white-space: nowrap; } .table-stack td.stack-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: var(--space-1); } }

/* ================================================================ Password eye (every password field) + sign-in fallback */
.pw-field { position: relative; display: block; }
.pw-field > .input { padding-right: 52px; }
.pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-muted); cursor: pointer; }
.pw-toggle:hover { color: var(--color-text-primary); background: var(--color-surface-2); }
.pw-toggle:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.pw-field.is-shown .pw-toggle { color: var(--color-accent-text); }
.auth-fallback { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.auth-fallback-or { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.auth-fallback-or::before, .auth-fallback-or::after { content: ""; flex: 1; height: 1px; background: var(--color-hairline); }
.auth-fallback-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.auth-fallback-note .icon-sm { flex: none; margin-top: 3px; color: var(--color-accent-text); }
.auth-fallback-hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.auth-fallback-wait { font-variant-numeric: tabular-nums; opacity: 0.8; }
/* Dashboard footer credit (admin, client portal, partner portal) */
.app-credit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); align-items: center; margin-top: var(--space-12, 3rem); padding: var(--space-5) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-hairline); font-size: var(--text-xs); color: var(--color-text-muted); }
.app-credit-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.app-credit-ver { font-family: var(--font-mono); opacity: 0.8; }
@media (max-width: 599px) { .app-credit { flex-direction: column; text-align: center; padding-inline: var(--space-4); } }

/* Official logo on authentication cards */
.auth-logo { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--color-text-primary); text-decoration: none; }
.auth-logo:hover { color: var(--color-text-primary); }
.auth-logo .brand-mark { flex: none; }
.auth-logo-name { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }

/* Hero floating cards 3 and 4: clickable actions in the same floating style.
   "Create a ticket now" wears a green confirmed-action treatment with a soft pulse. */
a.hero-card { text-decoration: none; color: inherit; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
a.hero-card:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.hero-card-c { left: 4%; top: 2%; animation-delay: -1.75s; }
.hero-card-d { right: 0; top: 29%; animation-delay: -5.25s; }
.hero-card-go { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success-wash) 60%, var(--color-surface)); box-shadow: var(--shadow-lg), 0 0 0 0 var(--color-success-wash); animation: float 7s var(--ease-in-out) infinite, go-glow 2.8s var(--ease-standard) infinite; }
.hero-card-go .icon-tile { background: var(--color-success-wash); color: var(--color-success); }
.hero-card-go strong { color: var(--color-success); }
.hero-card-go:hover { border-color: var(--color-success); box-shadow: var(--shadow-lg), 0 0 0 4px var(--color-success-wash); }
.hero-card-link:hover { border-color: var(--color-accent-edge); }
@keyframes go-glow { 0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 var(--color-success-wash); } 50% { box-shadow: var(--shadow-lg), 0 0 0 7px var(--color-success-wash); } }
@media (prefers-reduced-motion: reduce) { .hero-card-go { animation: none !important; } a.hero-card { transition: none !important; } }
@media (max-width: 899px) { .hero-card-c { top: 0; left: 0; } .hero-card-d { top: 30%; right: 0; } }
/* ================================================================ Final polish 1: partnership pages, shared components */
/* Connected step indicator (partner registration overview) */
.stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: st; list-style: none; padding: 0; margin: var(--space-8) auto 0; max-width: 900px; }
.stepper li { position: relative; display: grid; justify-items: center; gap: var(--space-2); text-align: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); padding: 0 var(--space-1); }
.stepper li::before { counter-increment: st; content: counter(st); position: relative; z-index: 1; width: 34px; height: 34px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-accent-edge); color: var(--color-accent-text); font-family: var(--font-figures); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.stepper li::after { content: ""; position: absolute; top: 17px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 1px; background: linear-gradient(90deg, var(--color-accent-edge), var(--color-hairline-strong)); }
.stepper li:last-child::after { display: none; }
.stepper li:first-child::before { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
@media (max-width: 699px) {
  .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-5); }
  .stepper li:nth-child(3)::after { display: none; }
}

/* Numbered benefit cards with icon, gentle lift and a staggered reveal */
.benefit-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); counter-reset: bn; }
.benefit-card { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface);
  border: 1px solid var(--color-card-border); overflow: hidden; transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), opacity var(--duration-slow) var(--ease-out-expo); }
.benefit-card::after { counter-increment: bn; content: counter(bn, decimal-leading-zero); position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-figures); font-weight: var(--fw-extrabold);
  font-size: var(--text-2xl); line-height: 1; color: var(--color-hairline-strong); }
.benefit-card .icon-tile { margin: 0 0 var(--space-2); }
.benefit-card h3 { margin: 0; font-size: var(--text-base); padding-right: var(--space-10, 2.5rem); }
.benefit-card p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.benefit-card:hover { transform: translateY(-4px); border-color: var(--color-accent-edge); box-shadow: var(--shadow-lg); }
.benefit-card:hover::after { color: var(--color-accent-edge); }
.benefit-grid > .reveal:nth-child(2) { transition-delay: 60ms; } .benefit-grid > .reveal:nth-child(3) { transition-delay: 120ms; } .benefit-grid > .reveal:nth-child(4) { transition-delay: 180ms; }
.benefit-grid > .reveal:nth-child(5) { transition-delay: 240ms; } .benefit-grid > .reveal:nth-child(6) { transition-delay: 300ms; } .benefit-grid > .reveal:nth-child(7) { transition-delay: 360ms; } .benefit-grid > .reveal:nth-child(8) { transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce) { .benefit-card { transition: none !important; } .benefit-card:hover { transform: none; } }

/* Partnerships hub: deep links */
.hub-links { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.hub-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl);
  background: var(--color-surface); border: 1px solid var(--color-card-border); color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-normal) var(--ease-out-expo); }
.hub-link:hover { border-color: var(--color-accent-edge); transform: translateY(-2px); color: inherit; }
.hub-link strong { display: block; font-size: var(--text-base); }
.hub-link span.small { color: var(--color-text-secondary); }
.hub-link .hub-arrow { color: var(--color-accent-text); transition: transform var(--duration-fast) var(--ease-standard); }
.hub-link:hover .hub-arrow { transform: translateX(3px); }
.hub-link.is-primary { border-color: var(--color-accent-edge); background: var(--color-accent-wash); }
@media (prefers-reduced-motion: reduce) { .hub-link, .hub-link .hub-arrow { transition: none !important; } .hub-link:hover { transform: none; } }

/* Areas as chips */
.area-chips { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.area-chips li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-card-border); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.area-chips .icon-tile { width: 32px; height: 32px; margin: 0; flex: none; }
.area-chips .icon-tile .icon { width: 16px; height: 16px; }

/* Registration steps: number badge in each step heading, and what happens after submitting */
.step-legend { display: flex; align-items: center; gap: var(--space-3); }
.step-badge { flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-accent-fill); color: var(--color-on-accent);
  font-family: var(--font-figures); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.join-next { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.join-next .card { display: grid; gap: var(--space-2); align-content: start; }
.join-next h3 { margin: 0; font-size: var(--text-base); }
.join-next p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.join-account-logo { margin-bottom: var(--space-2); }.stepper li { align-content: start; }
@media (min-width: 1200px) { .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr) 1.1fr; gap: var(--space-8); } }

/* Public ID verification */
.verify-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .verify-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.verify-input { font-size: var(--text-lg); letter-spacing: 0.06em; text-transform: uppercase; }
.verify-input::placeholder { text-transform: none; letter-spacing: 0.04em; }
.verify-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-4); text-align: left;
  border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); background: var(--color-surface-2); font-size: var(--text-sm); }
.verify-facts dt { color: var(--color-text-muted); }
.verify-facts dd { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.verify-facts[hidden] { display: none; }
.verify-trust-line { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.verify-trust-line strong { color: var(--color-text-primary); }
.verify-dialog-trust { margin: var(--space-4) 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-accent-wash); text-align: left; }
.verify-dialog { width: min(480px, calc(100vw / var(--fit-zoom) - 24px)); }
.verify-dialog .rdialog-msg { margin-bottom: 0; }
.verify-tips { margin: var(--space-3) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.verify-tip .icon-tile { margin-bottom: var(--space-3); }
.verify-inline { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-hairline-strong); display: grid; gap: var(--space-3); }
.verify-inline.verify-active { border-color: var(--color-success); background: var(--color-success-wash); }
.verify-inline.verify-missing { border-color: var(--color-danger); background: var(--color-danger-wash); }
.verify-inline.verify-pending, .verify-inline.verify-inactive { border-color: var(--color-warning); background: var(--color-warning-wash); }
.verify-inline-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--fw-bold); }
@media (max-width: 599px) { .verify-dialog { width: 100%; } }
.public-id-card { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.public-id-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.public-id-head .icon-tile { flex: none; margin: 0; }
.public-id-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.public-id-value .mono { font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--color-accent-text); }

/* MoMo & card checkout pages (app/Views/payment) */
.pay-wrap { display: flex; justify-content: center; }
.pay-card { width: 100%; max-width: 520px; }
.pay-card.center { text-align: center; }
.pay-total { font-size: var(--text-lg); margin: var(--space-4) 0; }
.pay-methods { border: 0; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.pay-method { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); cursor: pointer; }
.pay-method:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-wash); }
/* Payment method options: artwork or icon on the left. The card option shows a real-looking Visa card. */
.pay-method { position: relative; }
.pay-method-art { flex: none; display: grid; place-items: center; width: 80px; }
.pay-method-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-accent-text); }
.pay-method-icon .icon { width: 22px; height: 22px; }
.pay-method > input { flex: none; }
.cardart { display: block; overflow: visible; }
.cardart-mini { width: 80px; height: 50px; filter: drop-shadow(0 4px 8px rgba(11, 15, 69, 0.35)); transform: rotate(-4deg); transition: transform var(--duration-normal) var(--ease-out-expo); }
.pay-method-card:hover .cardart-mini, .pay-method-card:has(input:checked) .cardart-mini { transform: rotate(0deg) translateY(-2px) scale(1.06); }
.cardart-full { width: 100%; max-width: 340px; height: auto; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(11, 15, 69, 0.45)); }
.cardart-stage { padding: var(--space-6) var(--space-4) var(--space-8); margin: var(--space-4) 0; border-radius: var(--radius-xl); background: radial-gradient(ellipse at 50% 35%, var(--color-accent-wash), transparent 70%); perspective: 900px; }
.cardart-stage .cardart-full { transform: rotateX(8deg) rotateY(-10deg); transition: transform var(--duration-slow, 0.6s) var(--ease-out-expo); }
.cardart-stage:hover .cardart-full { transform: none; }
.cardart-stop-1 { stop-color: var(--card-navy-2); }
.cardart-stop-2 { stop-color: var(--card-navy-1); }
.cardart-stop-3 { stop-color: var(--card-navy-3); }
.cardart-chip-1 { stop-color: var(--card-chip-1); }
.cardart-chip-2 { stop-color: var(--card-chip-2); }
.cardart-sheen { fill: rgba(255, 255, 255, 0.07); }
.cardart-sheen-2 { fill: rgba(255, 255, 255, 0.06); }
.cardart-chip-line { fill: none; stroke: var(--card-chip-2); stroke-width: 1.5; opacity: 0.8; }
.cardart-wave { fill: none; stroke: var(--card-ink); stroke-width: 4; stroke-linecap: round; opacity: 0.85; }
.cardart text { fill: var(--card-ink); font-family: var(--font-display); }
.cardart-number { font-family: var(--font-mono); font-size: 21px; letter-spacing: 1px; opacity: 0.95; }
.cardart-small { font-size: 12px; letter-spacing: 2px; opacity: 0.75; }
.cardart-amount { font-size: 20px; font-weight: var(--fw-bold); opacity: 0.95; }
.cardart-visa { font-size: 46px; font-weight: var(--fw-extrabold); font-style: italic; letter-spacing: -1px; }
.cardart-mini .cardart-visa { font-size: 64px; }
/* Acceptance marks */
.card-marks { display: inline-flex; gap: var(--space-1); margin-top: var(--space-1); }
.card-mark { width: 38px; height: 24px; }
.card-mark-bg { fill: var(--card-ink); stroke: var(--color-hairline-strong); stroke-width: 1; }
.card-mark-visa { fill: var(--card-navy-1); font-family: var(--font-display); font-size: 14px; font-weight: var(--fw-extrabold); font-style: italic; letter-spacing: -0.5px; }
.card-mark-red { fill: var(--card-mc-red); }
.card-mark-yellow { fill: var(--card-mc-yellow); }
.card-mark-mix { fill: var(--card-mc-mix); }
@media (prefers-reduced-motion: reduce) { .cardart-mini, .cardart-stage .cardart-full { transition: none; transform: none; } }
.pay-method-text { display: grid; gap: 2px; min-width: 0; }
.pay-method-text > span { font-size: var(--text-xs); color: var(--color-text-secondary); }
.pay-free-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-hairline); font-size: var(--text-xs); color: var(--color-text-secondary); }
.pay-free-note .icon { flex: none; color: var(--color-secondary-text); margin-top: 1px; }
.pay-wait-icon { background: var(--color-warning-wash); color: var(--color-warning); }
/* Manual / offline payment popup (reuses the .qm-dialog popup shell) */
.mp-dialog { --rd: var(--color-accent); --rd-wash: var(--color-accent-wash); width: min(520px, calc(100vw / var(--fit-zoom) - 2 * var(--space-4))); }
.mp-dialog .btn-primary, .mp-dialog .btn-primary:hover { color: var(--color-on-accent); }
.mp-dialog .qm-sub { overflow-wrap: anywhere; }
.mp-dialog .rdialog-actions { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.mp-dialog .rdialog-actions .btn { white-space: normal; text-align: center; line-height: 1.25; }
@media (max-width: 599px) { .mp-dialog .rdialog-actions { grid-template-columns: minmax(0, 1fr); } }
.mp-step-label { margin: 0; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-text); }
.mp-summary { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-hairline); }
.mp-summary > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.mp-summary dt { font-size: var(--text-sm); color: var(--color-text-secondary); }
.mp-summary dd { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: right; overflow-wrap: anywhere; }
.mp-summary .mp-amount { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-extrabold); }
.mp-channels { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.mp-channel { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-card-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.mp-channel:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-wash); }
.mp-channel > input { margin-top: 4px; flex: none; }
.mp-channel-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-accent-text); }
.mp-channel-body { display: grid; gap: 2px; min-width: 0; font-size: var(--text-sm); }
.mp-channel-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.mp-channel-note { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.mp-copy { min-height: 28px; padding: 0 var(--space-2); }
.mp-done-ref { margin: var(--space-3) 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .mp-channel { transition: none; } }
@media (max-width: 599px) { .mp-dialog { width: 100%; } }
.pay-facts { text-align: left; margin-top: var(--space-4); }
.pay-done, .pay-fail { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: var(--space-3); }
.pay-done { background: var(--color-success-wash); color: var(--color-success); }
.pay-fail { background: var(--color-danger-wash); color: var(--color-danger); }
.pay-done .icon, .pay-fail .icon { width: 32px; height: 32px; }
.pay-spinner { display: inline-block; width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--color-hairline); border-top-color: var(--color-accent); margin-bottom: var(--space-4); animation: pay-spin 0.9s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pay-spinner { animation: none; border-top-color: var(--color-accent); } }
.pay-stalled { margin-top: var(--space-4); }

/* Admin → MoMo & card payments: payment log timeline */
.cp-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cp-log > li { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-hairline-strong); background: var(--color-surface-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.cp-log > li.cp-log-state { border-left-color: var(--color-accent); }
.cp-log > li.cp-log-callback { border-left-color: var(--color-info); }
.cp-log > li.cp-log-error { border-left-color: var(--color-danger); }
.cp-log pre { margin: var(--space-2) 0 0; max-height: 240px; overflow: auto; }

/* Delete actions (partials/delete-form.php): danger-zone cards, compact row buttons, the "type DELETE" box. */
.danger-zone { border-color: var(--color-danger-wash); box-shadow: inset 3px 0 0 var(--color-danger); }
.danger-zone .h3-like { color: var(--color-danger); }
.delete-form { margin: 0; }
.delete-form-protected:not(.delete-form-compact) { display: grid; gap: var(--space-3); }
.delete-form-compact { display: inline-flex; align-items: center; gap: var(--space-1); }
.delete-icon { color: var(--color-text-muted); }
.delete-icon:hover, .delete-icon:focus-visible { color: var(--color-danger); background: var(--color-danger-wash); }
.delete-confirm-inline { width: 6.5rem; min-height: 32px; padding: 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; }
.check-inline { display: inline-flex; align-items: center; gap: var(--space-2); align-self: end; min-height: 44px; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Secondary colour (deep teal): quiet links in card headers, form controls. Orange stays the colour of action. */
.card-head .link-arrow, .cluster-between > .link-arrow { color: var(--color-secondary-text); }
.card-head .link-arrow:hover, .cluster-between > .link-arrow:hover { color: var(--color-text-primary); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--color-secondary); }

/* Phones: in two-column figure grids an odd last card spans the full row, so nothing sits in half the screen. */
@media (max-width: 599px) {
  .metrics > :last-child:nth-child(odd), .fin-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Book training: billing comparison, package choices, live total */
.training-compare { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.training-compare-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.training-compare-item .icon-tile { flex: none; margin: 0; }
.training-compare-item.is-training { border-color: var(--color-secondary-edge); background: var(--color-secondary-wash); }
.training-compare-item.is-training .icon-tile { color: var(--color-secondary-text); }
.training-packages { border: 0; display: grid; gap: var(--space-3); }
.training-packages legend { padding: 0; margin-bottom: var(--space-3); }
.training-package { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.training-package:has(input:checked) { border-color: var(--color-secondary); background: var(--color-secondary-wash); }
.training-package > input { margin-top: 4px; flex: none; }
.training-package-body { display: grid; gap: var(--space-1); min-width: 0; }
.training-price { font-weight: var(--fw-bold); white-space: nowrap; }
.training-total { position: sticky; top: calc(var(--nav-height) + var(--space-4)); }
.training-sum { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-extrabold); margin: var(--space-4) 0 var(--space-2); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .training-package { transition: none; } }
@media (max-width: 1023px) { .training-total { position: static; } }

/* Public website (not the admin or portals, which use .app-body): hovers have a transparent background. Only the
   text and/or border change; the main orange buttons (.btn-primary) keep their solid fill. */
body:not(.app-body) :is(.nav-link, .dropdown a, .icon-btn, .drawer nav a, .btn-secondary, .btn-ghost, .btn-danger, a.hero-pill, a.badge-accent, .side-cats a,
  .share-btn, .social-link, .social-pill, .user-trigger, .user-dropdown .user-dd-links a, .user-signout, .rdialog-mute, .track-pick, .assistant-option,
  .pay-modal-close, .pw-toggle, .gsearch-item, .gsearch-all, .chip, .tab:not([aria-current='page'])):hover { background: transparent; box-shadow: none; }
body:not(.app-body) .table tbody tr:hover td { background: transparent; }
body:not(.app-body) :is(.nav-link, .drawer nav a, .dropdown a, .side-cats a, .btn-ghost, .user-dropdown .user-dd-links a):hover { color: var(--color-accent-text); }
body:not(.app-body) .dropdown a:hover strong { color: var(--color-accent-text); }
body:not(.app-body) :is(.share-btn, .social-link, .social-pill, a.badge-accent):hover { color: var(--color-accent-text); border-color: var(--color-accent-edge); }
body:not(.app-body) .btn-secondary:hover { border-color: var(--color-secondary); color: var(--color-secondary-text); }
body:not(.app-body) :is(.card-link, .feature-card):hover .icon-tile { background: transparent; color: var(--color-accent-text); border-color: var(--color-accent); }
/* Public website: solid buttons get a neutral (non-orange) overlay on hover: a soft light sheen and a plain shadow
   instead of the orange glow. */
body:not(.app-body) .btn-primary:hover { background-image: linear-gradient(var(--hover-sheen), var(--hover-sheen)), linear-gradient(180deg, var(--color-accent), var(--color-accent-deep)); box-shadow: var(--shadow-lift); }
body:not(.app-body) :is(.assistant-launch, .btn-success, .btn-danger-solid):hover { background-image: linear-gradient(var(--hover-sheen), var(--hover-sheen)); box-shadow: var(--shadow-lift); filter: none; }