/* Shared page foundation: origin/main 929163b, support.html.
   Keep navigation, typography, spacing, theme and footer aligned with the existing site. */

  :root {
    color-scheme: light;
    --bg:#FAF9F8;
    --surface:#FFFFFF;
    --border:#E8E5E1;
    --text-1:#1A1916;
    --text-2:#4E4B46;
    --text-3:#94908A;
    --brand:#1E51E3;
    --glass:rgba(255,255,255,.76);
    --glass-border:rgba(255,255,255,.8);
    --shadow-md:0 16px 44px rgba(13,12,11,.09);
    --max:1180px;
  }
  [data-theme="dark"] {
    color-scheme:dark;
    --bg:#0D0C0B;
    --surface:#16140F;
    --border:#2F2D2A;
    --text-1:#F4F2F0;
    --text-2:#B8B3AC;
    --text-3:#706D67;
    --glass:rgba(22,20,15,.76);
    --glass-border:rgba(255,255,255,.09);
    --shadow-md:0 18px 48px rgba(0,0,0,.46);
  }

  *,*::before,*::after { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:96px; }
  body { margin:0; background:var(--bg); color:var(--text-1); font-family:var(--font-family); -webkit-font-smoothing:antialiased; line-height:1.68; overflow-x:hidden; }
  body.menu-open { overflow:hidden; }
  button,a { font:inherit; -webkit-tap-highlight-color:transparent; }
  a { color:inherit; }
  svg { display:block; }
  :focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 72%,white); outline-offset:4px; }
  .container { width:min(var(--max),calc(100% - 48px)); margin-inline:auto; }
  .wrap { width:min(780px,calc(100% - 48px)); margin-inline:auto; }
  .button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; padding:9px 18px; border:0; border-radius:999px; color:#fff; background:var(--brand); text-decoration:none; font-size:.86rem; font-weight:650; }

  .site-nav { position:fixed; inset:0 0 auto; z-index:100; padding:12px 0; transition:padding .3s ease; }
  .nav-shell { width:min(var(--max),calc(100% - 32px)); min-height:54px; margin:0 auto; padding:0 8px 0 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; border:1px solid transparent; border-radius:18px; transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease; }
  .site-nav.scrolled { padding-top:8px; }
  .site-nav.scrolled .nav-shell { background:var(--glass); border-color:var(--glass-border); box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.28); backdrop-filter:blur(22px) saturate(1.65); -webkit-backdrop-filter:blur(22px) saturate(1.65); }
  .wordmark { width:max-content; font-size:1.2rem; font-weight:800; letter-spacing:-.04em; text-decoration:none; }
  .site-nav .wordmark { color:var(--brand); }
  [data-theme="dark"] .site-nav .wordmark { color:var(--text-1); }
  .nav-links { display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; }
  .nav-links a { padding:8px 11px; border-radius:8px; color:var(--text-2); font-size:.84rem; font-weight:550; text-decoration:none; white-space:nowrap; }
  .nav-links a:hover { color:var(--text-1); background:color-mix(in srgb,var(--surface) 72%,transparent); }
  .nav-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
  .icon-button { width:40px; height:40px; padding:0; border:1px solid var(--border); border-radius:50%; display:inline-grid; place-items:center; color:var(--text-2); background:color-mix(in srgb,var(--surface) 82%,transparent); cursor:pointer; }
    .language-switch { display:inline-flex; align-items:center; gap:6px; padding:0 5px; color:var(--text-3); font-size:.75rem; font-weight:650; letter-spacing:.02em; white-space:nowrap; }
    .language-switch a { color:inherit; text-decoration:none; }
    .language-switch a:hover, .language-switch a[aria-current="page"] { color:var(--text-1); }
    .menu-toggle { display:none; }
  .mobile-menu { display:none; }

  .page { padding:142px 0 90px; }
  h1 { margin:0 0 60px; font-size:clamp(3rem,7vw,5.6rem); font-weight:800; letter-spacing:-.06em; line-height:.94; text-wrap:balance; opacity:0; transform:scale(.96); transform-origin:left center; filter:blur(7px); animation:title-pop .8s cubic-bezier(.22,1,.36,1) .08s forwards; }
  @keyframes title-pop { to { opacity:1; transform:scale(1); filter:blur(0); } }
  h2 { margin:52px 0 14px; padding-top:4px; font-size:1.3rem; font-weight:700; letter-spacing:-.025em; line-height:1.3; }
  h3 { margin:29px 0 8px; font-size:1rem; font-weight:650; letter-spacing:-.015em; }
  p { margin:0 0 14px; color:var(--text-2); font-size:.94rem; text-wrap:pretty; }
  p strong { color:var(--text-1); font-weight:650; }
  .legal a { color:var(--brand); text-decoration:none; }
  .legal a:hover { text-decoration:underline; }
  .legal address { color:var(--text-2); font-size:.94rem; font-style:normal; line-height:1.7; }
  .placeholder { display:block; margin:19px 0; padding:15px 0; border-block:1px solid var(--border); color:var(--text-3); font-size:.8rem; line-height:1.6; }
  .placeholder strong { color:var(--text-2); font-weight:650; }
  .placeholder code { color:var(--text-2); font-family:var(--font-family); font-size:.76rem; }
  .back-link { display:inline-flex; margin-top:58px; color:var(--text-3); font-size:.82rem; text-decoration:none; }
  .back-link:hover { color:var(--text-1); }

  footer { padding:72px 0 34px; border-top:1px solid var(--border); }
  .footer-top,.footer-bottom { display:flex; justify-content:space-between; gap:28px; }
  .footer-top { padding-bottom:54px; }
  .footer-tagline { max-width:350px; margin-top:12px; color:var(--text-3); font-size:.84rem; }
  .footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:15px 24px; max-width:570px; }
  .footer-links a { color:var(--text-2); font-size:.79rem; text-decoration:none; }
  .footer-links a:hover { color:var(--text-1); }
  .footer-bottom { padding-top:22px; border-top:1px solid var(--border); color:var(--text-3); font-size:.72rem; }

  @media (max-width:920px) {
    .nav-shell { grid-template-columns:1fr auto; }
    .nav-links { display:none; }
    .menu-toggle { display:inline-grid; }
    .mobile-menu { position:fixed; z-index:99; inset:70px 16px auto; display:block; padding:8px; border:1px solid var(--border); border-radius:16px; background:var(--glass); box-shadow:var(--shadow-md); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); opacity:0; visibility:hidden; transform:translateY(-10px); transition:.25s ease; }
    .mobile-menu.open { opacity:1; visibility:visible; transform:none; }
    .mobile-menu a { display:block; padding:13px 14px; border-radius:10px; color:var(--text-2); text-decoration:none; font-weight:600; }
  }
  @media (max-width:640px) {
    .container,.wrap { width:min(100% - 32px,var(--max)); }
    .site-nav { padding-top:8px; }
    .nav-shell { width:calc(100% - 16px); }
    .pricing-button { display:none; }
    .page { padding:112px 0 72px; }
    h1 { margin-bottom:48px; font-size:clamp(2.75rem,15vw,4.4rem); }
    h2 { margin-top:44px; }
    .footer-top,.footer-bottom { flex-direction:column; }
    .footer-links { justify-content:flex-start; }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; animation:none!important; } h1 { opacity:1; transform:none; filter:none; } }

  /* Brand selection colour - freeself blue instead of the browser default */
  ::selection { background: #1E51E3; color: #fff; text-shadow: none; }
  ::-moz-selection { background: #1E51E3; color: #fff; text-shadow: none; }
  /* Buttons must inherit text colour: iOS Safari otherwise paints button text
     in the system blue (#007AFF), which turned the hero wordmark blue. */
  button { color: inherit; }

  /* Social links im Footer */
  .social-links { display:flex; align-items:center; gap:8px; }
  .social-link { width:38px; height:38px; display:inline-grid; place-items:center; border:1px solid var(--border); border-radius:50%; color:var(--text-2); text-decoration:none; transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
  .social-link:hover { color:#fff; background:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
  .social-link svg { width:17px; height:17px; }
  @media (max-width:640px) { .footer-bottom .social-links { order:-1; margin-bottom:16px; } }

  .lede { max-width:62ch; margin:0 0 54px; color:var(--text-2); font-size:1.02rem; }
  .group { margin-bottom:46px; }
  .group > h2 { margin:0 0 4px; padding-bottom:14px; border-bottom:1px solid var(--border); font-size:1.18rem; font-weight:700; letter-spacing:-.02em; }
  .qa { border-bottom:1px solid var(--border); }
  .qa > h3 { margin:0; font-size:.97rem; font-weight:650; letter-spacing:-.01em; }
  .qa-toggle { width:100%; padding:19px 2px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:0; background:none; color:var(--text-1); text-align:left; font:inherit; font-size:.97rem; font-weight:650; letter-spacing:-.01em; cursor:pointer; }
  .qa-toggle:hover { color:var(--brand); }
  .qa-sign { flex:0 0 auto; width:11px; height:11px; position:relative; }
  .qa-sign::before, .qa-sign::after { content:""; position:absolute; inset:0; margin:auto; background:var(--text-3); transition:transform .25s ease, background .2s ease; }
  .qa-sign::before { width:11px; height:1.5px; }
  .qa-sign::after { width:1.5px; height:11px; }
  .qa.open .qa-sign::after { transform:scaleY(0); }
  .qa.open .qa-sign::before { background:var(--brand); }
  .qa-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
  .qa-body > div { overflow:hidden; }
  .qa.open .qa-body { grid-template-rows:1fr; }
  .qa-body p { max-width:64ch; margin:0 0 20px; padding-right:28px; color:var(--text-2); font-size:.9rem; line-height:1.68; }
  .qa-body ol, .qa-body ul { max-width:64ch; margin:0 0 20px; padding-left:20px; color:var(--text-2); font-size:.9rem; line-height:1.68; }
  .qa-body li { margin-bottom:6px; }
  .help { margin-top:44px; }
  .help h2 { margin:0 0 8px; font-size:1.1rem; font-weight:700; letter-spacing:-.02em; }
  .help p { max-width:56ch; margin:0 0 20px; color:var(--text-2); font-size:.92rem; }
  .legal a.button { color:#fff; }
  .legal a.back-link { color:var(--text-3); }
  .legal a.back-link:hover { color:var(--text-1); }

/* Guide content only. No simulated app screens or device illustrations. */
.skip-link { position:absolute; top:-100px; left:20px; z-index:110; padding:12px 18px; border-radius:8px; background:var(--surface); color:var(--brand); }
.skip-link:focus { top:12px; }
.guide-heading { margin-bottom:60px; }
.guide-lede { margin-bottom:54px; }
.guide-contents { margin:0 0 56px; }
.guide-contents > p { margin-bottom:12px; color:var(--text-3); font-size:.72rem; font-weight:650; letter-spacing:0; text-transform:none; }
.guide-contents ol { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; column-gap:30px; }
.guide-contents li { border-bottom:1px solid var(--border); }
.guide-contents a { display:flex; gap:14px; align-items:center; padding:12px 0; color:var(--text-2); font-size:.86rem; text-decoration:none; }
.guide-contents a:hover { color:var(--brand); text-decoration:none; }
.guide-contents span { color:var(--text-3); font-size:.7rem; font-variant-numeric:tabular-nums; }
.chapter { margin:0 0 58px; scroll-margin-top:108px; }
.chapter > h2 { display:flex; align-items:baseline; gap:14px; }
.chapter-number { color:var(--text-3); font-size:.73rem; font-weight:550; letter-spacing:0; }
.chapter-intro { margin:18px 0 24px; }
.step { padding:21px 0; border-bottom:1px solid var(--border); }
.step:first-child { padding-top:0; }
.step .overline { margin:0 0 7px; color:var(--text-3); font-size:.7rem; letter-spacing:.07em; }
.step h3 { margin:0 0 8px; }
.step p { margin:0; }
.chapter-list { margin:16px 0 24px; padding-left:20px; color:var(--text-2); font-size:.94rem; }
.chapter-list li { padding-left:5px; margin:0 0 10px; }
.chapter-list strong { color:var(--text-1); font-weight:650; }
.note { border-left:2px solid var(--border); padding-left:17px; margin:24px 0; }
.note p { color:var(--text-2); font-size:.84rem; margin:0; }
.media-placeholder { margin:28px 0; min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:28px; border:1px dashed var(--border); border-radius:14px; background:color-mix(in srgb,var(--surface) 52%,var(--bg)); text-align:center; }
.media-placeholder span { color:var(--text-3); font-size:.65rem; font-weight:600; letter-spacing:0; text-transform:none; }
.media-placeholder strong { color:var(--text-2); font-size:.88rem; font-weight:550; }
.media-placeholder figcaption { color:var(--text-3); font-size:.76rem; }
details.qa > summary { list-style:none; padding:19px 2px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--text-1); cursor:pointer; font-size:.97rem; font-weight:650; letter-spacing:-.01em; }
details.qa > summary::-webkit-details-marker { display:none; }
details.qa > summary:hover { color:var(--brand); }
details.qa[open] .qa-sign::after { transform:scaleY(0); }
details.qa[open] .qa-sign::before { background:var(--brand); }
details.qa > p { max-width:64ch; margin:0 0 20px; padding-right:28px; font-size:.9rem; }
.help .support-link { display:inline-block; margin:0 0 18px; font-size:.86rem; }
@media(max-width:640px) {
  .guide-heading { margin-bottom:48px; }
  .guide-contents ol { grid-template-columns:1fr; }
  .guide-contents { margin-bottom:44px; }
  .chapter { margin-bottom:44px; }
  .media-placeholder { min-height:160px; padding:22px 16px; }
}
@media print {
  .site-nav,.mobile-menu,.guide-contents,.skip-link,footer { display:none!important; }
  .page { padding:0; }
  .wrap { width:100%; }
  h1 { opacity:1; transform:none; filter:none; animation:none; }
  .step,.media-placeholder,.help { break-inside:avoid; }
  details.qa > p { display:block!important; }
}

.guide-download-link { margin:-28px 0 42px; }

/* Guide instructions: plain action headings, with no empty media on the live page. */
.guide-heading { margin-bottom:24px; }
.guide-lede { margin-bottom:28px; }
.guide-preparation { margin:0 0 36px; padding:22px 24px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.guide-preparation h2 { margin:0 0 10px; padding:0; font-size:1rem; }
.guide-preparation p { margin:0 0 10px; font-size:.9rem; }
.guide-preparation p:last-child { margin-bottom:0; }
.guide-contents > p { color:var(--text-2); font-size:.85rem; letter-spacing:0; text-transform:none; }
.media-placeholder[hidden] { display:none; }
@media(max-width:640px) {
 .guide-heading { margin-bottom:24px; }
 .guide-preparation { padding:20px; }
}