/* Bandwidth company page. Colours, radii and shadows come from brand.css (generated from bandwidth-hq/brand);
   the names below only map them onto this page. Light is the default; dark is set by the toggle
   (html[data-theme="dark"], screen only, so print stays light). House style (task 0040): flat panels
   with a fine border on plain paper, small shadows only, no glass, no colour washes, no gradients. */
:root{
  --paper:var(--bw-mint); --panel:var(--bw-surface); --ink:var(--bw-text); --muted:var(--bw-muted); --line:var(--bw-border);
  --line-strong:var(--bw-border-strong); --link:var(--bw-link); --live:var(--bw-success); --live-tint:var(--bw-success-soft);
  --warn:var(--bw-warn); --warn-tint:var(--bw-warn-soft);
  --teal:var(--bw-teal); --green:var(--bw-green);
  --r-control:var(--bw-radius-control); --r-card:var(--bw-radius-card);
  --shadow:var(--bw-shadow-sm);
  --header-bg:var(--bw-surface); --ghost-hover:var(--bw-mint);
  --body:var(--bw-font); --display:var(--bw-font); --mono:var(--bw-mono);
  color-scheme:light;
}
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --header-bg:color-mix(in srgb,var(--bw-surface) 50%,var(--bw-mint)); --ghost-hover:var(--bw-surface2);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:16px/1.6 var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;background:var(--paper)}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{letter-spacing:-.02em}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.lbl{font:400 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}

/* Buttons: white with a fine border. The page is a hub with equal product links and no single
   action that is due, so no button here takes the green action colour. */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-control);border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);font:600 14px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--ghost-hover)}

header{position:sticky;top:0;z-index:5;background:var(--header-bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:12px;height:64px}
.mark{display:flex;align-items:center;gap:10px;font:800 23px/1 var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.prefs{display:flex;align-items:center;gap:10px;margin-left:auto}
.langs{display:flex;align-items:center;gap:2px;font:600 13px/1 var(--body);color:var(--muted)}
.langs button{font:inherit;color:var(--muted);background:none;border:0;padding:8px 6px;border-radius:6px;cursor:pointer}
.langs button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.langs button:hover{color:var(--ink)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:var(--r-control);border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;transition:background .15s}
.theme-toggle:hover{background:var(--ghost-hover)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}

.hero{padding-block:64px 8px;display:grid;gap:22px}
.tag{font:700 12px/1 var(--mono);color:var(--link)}
.hero h1{font-size:clamp(40px,7vw,80px);line-height:.98;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--link)}
.lede{font-size:clamp(17px,2vw,19px);color:var(--muted);max-width:58ch}

section{padding-block:56px}
.tracks{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:560px){.tracks{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.tracks{grid-template-columns:repeat(4,1fr)}.tracks .track{padding:18px}.tracks .track h3{font-size:21px}.tracks .lbl{font-size:10.5px;letter-spacing:.08em}}
.track h3{overflow-wrap:anywhere;hyphens:auto}
.track{border-radius:var(--r-card);padding:22px;display:grid;gap:12px;grid-template-rows:auto auto auto 1fr auto;min-width:0}
.ttop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;min-width:0}
/* Pills say where a product stands: Live (green), Invite only (green outline), Opening soon (amber),
   Coming soon (grey outline). */
.pill{font:400 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;white-space:nowrap}
.pill.live{background:var(--live-tint);color:var(--live)}
.pill.invite{color:var(--live);box-shadow:inset 0 0 0 1px var(--live)}
.pill.soon{background:var(--warn-tint);color:var(--warn)}
.pill.later{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
.tracks.later{margin-top:16px}
.track.soon{background:transparent;border:1px dashed var(--line-strong);gap:10px;grid-template-rows:auto auto;align-content:start}
.track.soon h3{font-size:21px;line-height:1.2;color:var(--muted)}
.track h3{font-size:26px;line-height:1.1}
.track > p{color:var(--muted);font-size:15px}
.tools{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:end}
.tools li{display:grid;gap:2px;justify-items:start}
.tools a{white-space:nowrap;justify-self:start;max-width:100%;overflow-wrap:anywhere}

/* Impressum and Datenschutz */
.legal{max-width:760px;padding-block:48px 64px;display:grid;gap:14px}
.legal h1{font-size:clamp(32px,5vw,44px);line-height:1.05}
.legal h2{font-size:19px;line-height:1.3;margin-top:18px}
.legal h3{font-size:16px;line-height:1.3;margin-top:6px}
.legal p,.legal li{max-width:68ch}
.legal ul{margin:0;padding-left:20px;display:grid;gap:6px}
.legal .muted{color:var(--muted);font-size:14px}
.legal .note{font-size:14px;color:var(--muted);border-left:2px solid var(--line-strong);padding-left:12px}
.legal .lines > span{display:block}
.legal .lines .name{font-weight:700}

footer{border-top:1px solid var(--line);padding-block:36px 48px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:14px;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{header .prefs{display:none}header{position:static}}