:root{color-scheme: light dark; --app-accent-rgb: 255, 31, 77; --app-secondary-rgb: 198, 180, 87; --app-positive-rgb: 76, 175, 80; --app-warning-rgb: 255, 152, 0; --app-caution-rgb: 255, 193, 7; --app-info-rgb: 33, 150, 243; --app-shadow-rgb: 0, 0, 0; --app-sunken: rgba(0, 0, 0, 0.18); --app-positive-text: #7fd68a; --app-caution-text: #ffcf6b; --app-text-primary: #e0e0e0; --app-text-secondary: #a7adb4; --app-text-hint: #7a808a; --app-border-color: #2a2a2a; --app-divider: #242424; --app-underline-quiet: rgba(167, 173, 180, 0.4); --app-canvas: #090909; --app-page-gradient: radial-gradient(circle at 50% 18%, rgba(var(--app-accent-rgb), 0.18), transparent 28%), linear-gradient(180deg, #090909 0%, #0d0d0d 100%); --app-fade-bottom: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.96) 24%); --app-surface: #141414; --app-surface-glass: rgba(20, 20, 20, 0.92); --app-surface-dialog: rgba(20, 20, 20, 0.96); --app-surface-raised: #1e1e1e; --app-surface-inset: rgba(26, 26, 26, 0.98); --app-partner-logo-surface: #ffffff; --app-partner-logo-border: #e5e7eb; --app-on-surface-rgb: 255, 255, 255; --app-overlay-field: rgba(var(--app-on-surface-rgb), 0.02); --app-overlay-hover: rgba(var(--app-on-surface-rgb), 0.03); --app-chrome: rgba(11, 11, 11, 0.92); --app-chrome-footer: rgba(11, 11, 11, 0.72); --app-chrome-gradient: linear-gradient(180deg, rgba(11, 11, 11, 0.98) 0%, rgba(18, 18, 18, 0.98) 100%); --app-shadow-chrome: 0 8px 24px rgba(var(--app-shadow-rgb), 0.28); --app-shadow-accent: 0 10px 24px rgba(var(--app-accent-rgb), 0.24); --app-shadow-accent-hover: 0 14px 28px rgba(var(--app-accent-rgb), 0.3); --app-backdrop: rgba(0, 0, 0, 0.6); --app-text-strong: #ffffff; --app-accent: #ff1f4d; --app-on-accent: #141414; --app-accent-text: #ff7d97; --app-shadow-card: 0 20px 48px rgba(var(--app-shadow-rgb), 0.42); --app-shadow-menu: 0 8px 24px rgba(var(--app-shadow-rgb), 0.4); --app-info-surface: rgba(24, 31, 40, 0.88); --app-info-accent: #2196f3; --app-info-icon: #64b5f6; --app-scrollbar-thumb: rgba(167, 173, 180, 0.22); --app-scrollbar-thumb-hover: rgba(167, 173, 180, 0.4); --text-primary: var(--app-text-primary); --text-secondary: var(--app-text-secondary); --text-hint: var(--app-text-hint); --border-color: var(--app-border-color); --divider: var(--app-divider); --scrollbar-thumb: var(--app-scrollbar-thumb); --scrollbar-thumb-hover: var(--app-scrollbar-thumb-hover); color-scheme:dark}
:root[data-theme="light"]{--app-accent-rgb: 255, 31, 77; --q-primary: #d6003a; --app-secondary-rgb: 138, 122, 32; --app-positive-rgb: 46, 125, 50; --app-warning-rgb: 199, 106, 0; --app-caution-rgb: 168, 120, 0; --app-info-rgb: 25, 118, 210; --app-sunken: rgba(16, 24, 40, 0.06); --app-positive-text: #0b5f55; --app-caution-text: #755400; --app-shadow-rgb: 16, 24, 40; --app-text-primary: #1a1c1f; --app-text-secondary: #454c55; --app-text-hint: #697079; --app-border-color: #dfe4ea; --app-divider: #eceff3; --app-underline-quiet: rgba(69, 76, 85, 0.4); --app-canvas: #f4f5f7; --app-page-gradient: radial-gradient(circle at 50% 18%, rgba(var(--app-accent-rgb), 0.05), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%); --app-fade-bottom: linear-gradient(180deg, rgba(246, 247, 249, 0) 0%, rgba(246, 247, 249, 0.96) 24%); --app-surface: #ffffff; --app-surface-glass: rgba(255, 255, 255, 0.92); --app-surface-dialog: rgba(255, 255, 255, 0.96); --app-surface-raised: #ffffff; --app-surface-inset: rgba(248, 250, 252, 0.98); --app-partner-logo-surface: #ffffff; --app-partner-logo-border: #e5e7eb; --app-on-surface-rgb: 16, 24, 40; --app-overlay-field: rgba(var(--app-on-surface-rgb), 0.02); --app-overlay-hover: rgba(var(--app-on-surface-rgb), 0.04); --app-chrome: rgba(255, 255, 255, 0.92); --app-chrome-footer: rgba(248, 250, 252, 0.72); --app-chrome-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 251, 0.98) 100%); --app-backdrop: rgba(16, 24, 40, 0.45); --app-shadow-accent: 0 6px 16px rgba(var(--app-shadow-rgb), 0.16); --app-shadow-accent-hover: 0 10px 22px rgba(var(--app-shadow-rgb), 0.22); --app-text-strong: #101318; --app-accent: #d6003a; --app-on-accent: #ffffff; --app-accent-text: #d6003a; --app-shadow-card: 0 12px 32px rgba(var(--app-shadow-rgb), 0.1); --app-shadow-menu: 0 6px 20px rgba(var(--app-shadow-rgb), 0.12); --app-info-surface: #ebf3fc; --app-info-accent: #1976d2; --app-info-icon: #1565c0; --app-scrollbar-thumb: rgba(69, 76, 85, 0.28); --app-scrollbar-thumb-hover: rgba(69, 76, 85, 0.45); color-scheme:light}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){--app-accent-rgb: 255, 31, 77; --q-primary: #d6003a; --app-secondary-rgb: 138, 122, 32; --app-positive-rgb: 46, 125, 50; --app-warning-rgb: 199, 106, 0; --app-caution-rgb: 168, 120, 0; --app-info-rgb: 25, 118, 210; --app-sunken: rgba(16, 24, 40, 0.06); --app-positive-text: #0b5f55; --app-caution-text: #755400; --app-shadow-rgb: 16, 24, 40; --app-text-primary: #1a1c1f; --app-text-secondary: #454c55; --app-text-hint: #697079; --app-border-color: #dfe4ea; --app-divider: #eceff3; --app-underline-quiet: rgba(69, 76, 85, 0.4); --app-canvas: #f4f5f7; --app-page-gradient: radial-gradient(circle at 50% 18%, rgba(var(--app-accent-rgb), 0.05), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%); --app-fade-bottom: linear-gradient(180deg, rgba(246, 247, 249, 0) 0%, rgba(246, 247, 249, 0.96) 24%); --app-surface: #ffffff; --app-surface-glass: rgba(255, 255, 255, 0.92); --app-surface-dialog: rgba(255, 255, 255, 0.96); --app-surface-raised: #ffffff; --app-surface-inset: rgba(248, 250, 252, 0.98); --app-partner-logo-surface: #ffffff; --app-partner-logo-border: #e5e7eb; --app-on-surface-rgb: 16, 24, 40; --app-overlay-field: rgba(var(--app-on-surface-rgb), 0.02); --app-overlay-hover: rgba(var(--app-on-surface-rgb), 0.04); --app-chrome: rgba(255, 255, 255, 0.92); --app-chrome-footer: rgba(248, 250, 252, 0.72); --app-chrome-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 251, 0.98) 100%); --app-backdrop: rgba(16, 24, 40, 0.45); --app-shadow-accent: 0 6px 16px rgba(var(--app-shadow-rgb), 0.16); --app-shadow-accent-hover: 0 10px 22px rgba(var(--app-shadow-rgb), 0.22); --app-text-strong: #101318; --app-accent: #d6003a; --app-on-accent: #ffffff; --app-accent-text: #d6003a; --app-shadow-card: 0 12px 32px rgba(var(--app-shadow-rgb), 0.1); --app-shadow-menu: 0 6px 20px rgba(var(--app-shadow-rgb), 0.12); --app-info-surface: #ebf3fc; --app-info-accent: #1976d2; --app-info-icon: #1565c0; --app-scrollbar-thumb: rgba(69, 76, 85, 0.28); --app-scrollbar-thumb-hover: rgba(69, 76, 85, 0.45); color-scheme:light}}
@font-face {
  font-family:Inter;
  src:url('/fonts/Inter%20Web/Inter-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap}

@font-face {
  font-family:Inter;
  src:url('/fonts/Inter%20Web/Inter-SemiBold.woff2') format('woff2');
  font-style:normal;
  font-weight:600 900;
  font-display:swap}

@font-face {
  font-family:TTFirs;
  src:url('/fonts/TTFirs/TTFirsNeueMedium.woff') format('woff');
  font-style:normal;
  font-weight:500;
  font-display:swap}

/* Colours come from the app tokens (frontend/src/css/tokens.css), which
   build-help.mjs prepends with the dark and light sets (shell plan
   10.10.2026, Phase 4). These names only map them onto the help's roles;
   no colour literal belongs here outside the print sheet. */
:root {
  --ink:var(--app-text-primary);
  --muted:var(--app-text-secondary);
  --red:var(--app-accent);
  --link:var(--app-accent-text);
  --paper:var(--app-canvas);
  --surface:var(--app-surface);
  --raised:var(--app-surface-raised);
  --wash:rgba(var(--app-accent-rgb),.1);
  --border:var(--app-border-color);
  --radius:20px;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}

* {
  box-sizing:border-box}
body {
  margin:0;
  line-height:1.65}
a {
  color:var(--link);
  text-underline-offset:.2em;
  overflow-wrap:anywhere}
a:hover {
  text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible,pre:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:5px;
  border-radius:3px}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  font-family:TTFirs,Inter,system-ui,sans-serif;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.035em}
h1 {
  font-size:clamp(2.15rem,5.2vw,4.65rem);
  font-weight:500;
  max-width:20ch;
  margin-bottom:1.3rem}
h2 {
  font-size:1.65rem}
h3 {
  font-size:1.15rem}
main:focus {
  outline:none}
.container {
  max-width:1200px;
  margin:auto;
  padding:0 32px}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  padding:12px 20px;
  background:var(--surface);
  z-index:3}
.skip-link:focus {
  top:12px}
.site-header {
  border-bottom:1px solid var(--border);
  background:var(--surface)}
.header-inner {
  max-width:1200px;
  margin:auto;
  padding:22px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.brand {
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  color:var(--ink)}
.brand-mark {
  font-size:1.65rem;
  font-weight:700;
  letter-spacing:-.07em;
  white-space:nowrap}
.brand-mark>span {
  color:var(--red)}
/* The app's public lockup: 32px logo and the TTFirs wordmark beside it,
   hidden on phones like PublicLayout's below 600px. */
.brand-logo {
  width:32px;
  height:32px;
  object-fit:contain}
.brand-product {
  font-family:TTFirs,Inter,system-ui,sans-serif;
  font-size:1rem;
  font-weight:500;
  color:var(--red);
  white-space:nowrap}
.header-nav {
  display:flex;
  align-items:center;
  gap:20px}
.header-platform {
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap}
.language-link {
  font-size:.9rem;
  font-weight:600}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.76rem;
  font-weight:700;
  color:var(--link);
  margin-bottom:16px}
.hero {
  padding:80px 0 62px;
  max-width:920px}
.lead {
  font-size:1.15rem;
  color:var(--muted);
  max-width:64ch;
  line-height:1.65;
  margin-bottom:24px}
.text-link {
  font-weight:600}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.section-heading h2 {
  font-size:1.15rem;
  letter-spacing:-.02em;
  margin:0}
.section-heading>span {
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--muted)}
.guide-grid {
  list-style:none;
  padding:0;
  margin:22px 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.guide-card {
  height:100%;
  display:grid;
  grid-template-columns:34px 1fr 18px;
  align-items:start;
  gap:18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 24px;
  background:var(--surface);
  text-decoration:none;
  color:var(--ink)}
.guide-card:hover {
  border-color:var(--link);
  background:var(--raised)}
.guide-card h3 {
  margin:2px 0 10px;
  letter-spacing:-.02em}
.guide-card p {
  font-size:.9rem;
  line-height:1.55;
  color:var(--muted);
  margin:0}
.guide-number {
  font-size:.8rem;
  font-weight:600;
  line-height:32px;
  text-align:center;
  border-radius:10px;
  background:var(--wash);
  color:var(--link)}
.guide-card>span:last-child {
  font-size:1.25rem;
  color:var(--link)}
.support-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin:64px 0}
.support-card {
  padding:32px;
  border-radius:var(--radius);
  background:var(--wash)}
.support-card h2 {
  font-size:1.4rem}
.support-card>p:not(.eyebrow) {
  color:var(--muted);
  font-size:.95rem}
.support-card>a:not(.button) {
  display:block;
  margin-top:8px;
  font-size:.9rem;
  font-weight:600}
.platform-card {
  background:var(--surface)}
.button {
  display:inline-block;
  border-radius:100px;
  background:var(--red);
  color:var(--app-on-accent);
  text-decoration:none;
  font-weight:600;
  padding:12px 22px;
  margin-top:5px;
  font-size:.9rem}
.button:hover {
  text-decoration:underline}
.site-footer {
  border-top:1px solid var(--border);
  padding:28px 0;
  color:var(--muted);
  font-size:.8rem}
.site-footer>.container {
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap}
.site-footer nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap}
.breadcrumbs {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:.8rem;
  padding:26px 0;
  color:var(--muted)}
.article-layout {
  display:grid;
  grid-template-areas:"sidebar article";
  grid-template-columns:238px minmax(0,1fr);
  gap:64px;
  padding-top:10px}
.article-layout>article {
  grid-area:article}
.sidebar {
  grid-area:sidebar;
  font-size:.8rem;
  padding-top:10px}
.sidebar summary {
  font-weight:600;
  cursor:pointer;
  margin-bottom:15px}
.sidebar ol {
  list-style:none;
  padding:0;
  margin:0}
.sidebar li+li {
  margin-top:4px}
.sidebar a {
  display:flex;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:var(--muted);
  line-height:1.45}
.sidebar a>span {
  flex:0 0 16px;
  white-space:nowrap;
  font-size:.7rem;
  color:var(--link);
  padding-top:2px}
.sidebar a[aria-current] {
  background:var(--wash);
  color:var(--ink);
  font-weight:600}
.sidebar a:hover {
  background:var(--raised)}
.article-header h1 {
  font-size:clamp(2rem,4vw,3.6rem);
  max-width:24ch}
.article-header .lead {
  font-size:1.05rem}
.reviewed {
  color:var(--muted);
  font-size:.8rem;
  margin-bottom:32px}
.toc {
  border:1px solid var(--border);
  border-left:4px solid var(--red);
  border-radius:0 14px 14px 0;
  padding:22px 26px;
  margin-bottom:38px;
  background:var(--surface)}
.toc h2 {
  font-size:.9rem;
  letter-spacing:0;
  margin-bottom:12px}
.toc ol {
  padding-left:20px;
  margin:0;
  display:grid;
  gap:4px;
  font-size:.85rem}
.prose {
  max-width:75ch;
  font-size:1rem;
  overflow-wrap:anywhere}
.prose h2 {
  font-size:1.65rem;
  margin-top:42px;
  margin-bottom:18px;
  scroll-margin-top:24px}
.prose h3 {
  font-size:1.2rem;
  margin-top:28px;
  scroll-margin-top:24px}
.prose p {
  margin-bottom:20px}
.prose ul,.prose ol {
  padding-left:25px;
  margin:0 0 24px}
.prose li {
  padding-left:5px;
  margin:8px 0}
.prose ol>li::marker {
  color:var(--link);
  font-weight:600}
.prose code {
  font-size:.88em;
  background:var(--raised);
  padding:.16em .32em;
  border-radius:4px;
  overflow-wrap:anywhere}
.prose pre {
  max-width:100%;
  overflow:auto;
  border:1px solid var(--border);
  padding:20px;
  background:var(--surface);
  border-radius:12px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.prose pre code {
  padding:0;
  background:transparent}
.article-tools {
  margin:36px 0;
  font-size:.85rem;
  padding:18px 0;
  border-top:1px solid var(--border)}
.adjacent {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.adjacent a {
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid var(--border);
  padding:18px;
  border-radius:14px;
  text-decoration:none}
.adjacent span {
  font-size:.75rem;
  color:var(--muted)}
.adjacent strong {
  font-size:.85rem}
.adjacent a:hover {
  background:var(--wash)}

@media(max-width:900px) {
  .article-layout {
  grid-template-columns:190px minmax(0,1fr);
  gap:32px}
.guide-card {
  padding:22px 18px;
  gap:12px}
.support-card {
  padding:26px}
}

@media(max-width:680px) {
  .container {
  padding:0 20px}
.header-inner {
  padding:17px 20px}
.brand {
  gap:10px}
.header-nav {
  gap:14px}
.header-platform {
  font-size:.8rem}
.brand-mark {
  font-size:1.35rem}
.language-link {
  font-size:.8rem}
.hero {
  padding:46px 0 42px}
.lead {
  font-size:1rem}
.guide-grid {
  grid-template-columns:1fr;
  gap:12px}
.section-heading h2 {
  font-size:1rem}
.guide-card {
  padding:22px 18px}
.guide-card h3 {
  font-size:1.05rem}
.support-grid {
  grid-template-columns:1fr;
  gap:16px;
  margin:42px 0}
.support-card {
  padding:25px}
.article-layout {
  display:flex;
  flex-direction:column;
  gap:28px}
.sidebar {
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px}
.sidebar summary {
  margin:0}
.sidebar ol {
  margin-top:12px;
  columns:2;
  column-gap:8px}
.sidebar li {
  break-inside:avoid}
.sidebar a {
  padding:8px;
  gap:8px}
.article-header h1 {
  font-size:2.15rem}
.article-header .lead {
  font-size:1rem}
.toc {
  padding:20px}
.prose {
  font-size:.98rem}
.prose h2 {
  font-size:1.45rem}
.adjacent {
  grid-template-columns:1fr}
.site-footer>.container {
  display:block}
.site-footer nav {
  margin-top:16px;
  gap:16px}
}

@media(max-width:599px) {
  .brand-product {
  display:none}
}

@media(max-width:380px) {
  .sidebar ol {
  columns:1}
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

@media print {
  :root {
  color-scheme:light;
  --ink:#151515;
  --muted:#454545;
  --paper:#fff;
  --surface:#fff;
  --raised:#eee;
  --wash:#eee;
  --border:#bbb;
  --link:#151515;
  --red:#151515;
  --app-on-accent:#fff}
.site-header,.sidebar,.support-grid,.site-footer,.article-tools,.adjacent,.skip-link {
  display:none}
.container {
  padding:0}
.article-layout {
  display:block}
.prose {
  max-width:none}
a {
  color:inherit}
.toc {
  break-inside:avoid}
}