/* mumble.com 2026
   Keeps the original site's identity (electric blue bloom, gunmetal login bar, gloss panels,
   neon green buttons, glowing server floor) on a responsive layout. */

@font-face { font-family: 'Saira Condensed'; font-weight: 700; font-display: swap; src: url('../fonts/saira-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-weight: 800; font-display: swap; src: url('../fonts/saira-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

:root {
	--ink: #041622;
	--ink-2: #051b28;
	--ink-3: #082a3f;
	--deep: #03377e;
	--blue: #0a63c9;
	--electric: #16a3ec;
	--cyan: #6fcdf0;
	--logo: #8ad9f6;
	--ice: #d4f4ff;
	--text: #e6f5fb;
	--muted: #a2c2d1;
	--faint: #6f93a5;
	--line: rgba(138, 217, 246, .2);
	--line-strong: rgba(138, 217, 246, .42);
	--neon: #2bf51f;
	--neon-hi: #a5ff74;
	--neon-lo: #00b90d;
	--neon-ink: #032c07;
	--radius: 6px;
	--display: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
	--body: 'Barlow', Tahoma, Verdana, sans-serif;
	--mono: 'JetBrains Mono', Consolas, monospace;
	--gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--logo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.04; text-transform: uppercase; letter-spacing: .01em; color: #fff; margin: 0 0 .5em; }
h1 { font-size: clamp(44px, 5.5vw, 76px); }
h2 { font-size: clamp(32px, 3.8vw, 50px); }
h3 { font-size: 25px; font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: #fff; color: #000; padding: 8px 14px; border-radius: 4px; }
.skip-link:focus { top: 8px; }

/* Buttons: the old green gloss, split highlight and all */
.btn-neon, .call, .call-to-action, .btn-success, .btn-large, .feature-button { display: inline-block; border: 1px solid #0a8a10; border-radius: var(--radius); padding: 12px 26px; font: 800 22px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--neon-ink) !important; background: linear-gradient(180deg, var(--neon-hi) 0%, var(--neon) 49%, #0ad90f 51%, var(--neon-lo) 100%); box-shadow: 0 0 22px rgba(43, 245, 31, .38), inset 0 1px 0 rgba(255, 255, 255, .7); cursor: pointer; transition: box-shadow .15s ease, filter .15s ease, transform .15s ease; }
.btn-neon:hover, .call:hover, .call-to-action:hover, .btn-success:hover, .btn-large:hover, .feature-button:hover { filter: brightness(1.08); box-shadow: 0 0 34px rgba(43, 245, 31, .62), inset 0 1px 0 rgba(255, 255, 255, .8); transform: translateY(-1px); color: var(--neon-ink) !important; text-decoration: none !important; }
.btn-neon:active { transform: translateY(1px); }
.btn-neon-small { font-size: 18px; padding: 8px 16px; }
.btn-glass, .btn-info { display: inline-block; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 22px; font: 700 20px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; color: var(--ice); background: linear-gradient(180deg, rgba(138, 217, 246, .2), rgba(138, 217, 246, .04) 50%, rgba(138, 217, 246, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transition: border-color .15s ease, background .15s ease; }
.btn-glass:hover, .btn-info:hover { border-color: var(--logo); color: #fff; }
.glass { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(92, 170, 214, .17) 0, rgba(13, 62, 92, .32) 44px, rgba(6, 34, 52, .62) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 10px 30px rgba(0, 10, 20, .35); }

/* Gunmetal login bar */
#topbar { background: #606060; border-bottom: 1px solid #2a2a2a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); font-size: 13px; position: relative; z-index: 50; }
#topbar .wrap { display: flex; align-items: center; gap: 16px; min-height: 36px; }
.topbar-lsg { display: block; line-height: 0; }
.topbar-login { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.topbar-login input[type=text], .topbar-login input[type=password] { width: 158px; height: 25px; padding: 0 8px; border: 1px solid #222d33; border-radius: 3px; background: #252f35; color: #fff; font: 400 13px var(--body); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); }
.topbar-login input::placeholder { color: #a9b8c0; opacity: 1; }
.topbar-login button { height: 25px; padding: 0 12px; border: 1px solid #222d33; border-radius: 3px; background: linear-gradient(180deg, #7d8a92, #566269); color: #fff; font: 700 15px var(--display); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.topbar-login button:hover { background: linear-gradient(180deg, #92a0a8, #66737a); }
.topbar-login-link { display: none; margin-left: auto; color: #fff; font: 700 16px var(--display); text-transform: uppercase; text-decoration: none; }

/* Masthead */
#masthead { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, #02070c, #04121c); border-bottom: 1px solid #0d3a56; box-shadow: 0 1px 0 rgba(22, 163, 236, .55), 0 6px 28px rgba(22, 163, 236, .22); }
#masthead .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-badge { width: 52px; height: 52px; filter: drop-shadow(0 0 7px rgba(111, 205, 240, .55)); }
.brand-word { width: 136px; height: auto; filter: drop-shadow(0 0 5px rgba(111, 205, 240, .7)); }
.site-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.site-nav a { padding: 8px 12px; color: #c8e2ee; text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: #fff; border-bottom-color: var(--electric); }
.site-nav a[aria-current=page] { color: #fff; border-bottom-color: var(--neon); }
.site-nav .nav-external { color: var(--faint); font-size: 16px; }

/* Hero: the original candy panel */
.hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #042b6b 0%, #0555b4 34%, #0751a8 62%, #032a68 86%, #021b3f 100%); }
.hero-light { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 760px 480px at 72% -6%, rgba(214, 252, 255, 1) 0%, rgba(110, 224, 255, .9) 26%, rgba(22, 163, 236, .55) 56%, rgba(22, 163, 236, 0) 76%), radial-gradient(ellipse 1100px 300px at 50% 100%, rgba(22, 163, 236, .5), rgba(22, 163, 236, 0) 72%); }
.hero-light::after { content: ''; position: absolute; inset: 0; opacity: .34; mix-blend-mode: screen; background: conic-gradient(from 150deg at 72% -8%, transparent 0deg, rgba(255, 255, 255, .22) 7deg, transparent 15deg, transparent 22deg, rgba(255, 255, 255, .16) 28deg, transparent 37deg, rgba(255, 255, 255, .12) 44deg, transparent 52deg, transparent 58deg, rgba(255, 255, 255, .2) 64deg, transparent 72deg); -webkit-mask-image: linear-gradient(180deg, #000, transparent 74%); mask-image: linear-gradient(180deg, #000, transparent 74%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: clamp(28px, 4vw, 60px); align-items: center; padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(52px, 6vw, 84px); }
.eyebrow { margin: 0 0 10px; font: 700 20px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ice); }
.hero h1 { margin-bottom: 16px; text-shadow: 0 2px 0 rgba(1, 28, 70, .55), 0 6px 28px rgba(1, 28, 70, .55); }
.hero-sub { max-width: 610px; font-size: 19px; line-height: 1.5; color: #f1faff; margin-bottom: 26px; text-shadow: 0 1px 3px rgba(1, 28, 70, .6); }

.builder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px; border: 1px solid rgba(190, 236, 255, .46); border-radius: 8px; background: linear-gradient(180deg, rgba(180, 232, 255, .34), rgba(2, 44, 98, .62) 50%, rgba(2, 36, 84, .72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 16px 44px rgba(0, 20, 60, .45); }
.builder label { display: block; min-width: 0; }
.builder-label { display: block; margin: 0 0 5px 2px; font: 700 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ice); }
.builder-host-field { display: flex; align-items: center; width: 100%; height: 54px; border: 1px solid #022a5a; border-radius: 5px; background: #fff; color: #06283f; box-shadow: inset 0 2px 4px rgba(2, 40, 80, .24); }
.builder-host-field { padding: 0 12px; font: 500 18px var(--mono); overflow: hidden; }
.builder-host-field:focus-within { outline: 2px solid var(--neon); outline-offset: 1px; }
.builder-host-field input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: #06283f; font: inherit; text-align: right; }
.builder-host-field input::placeholder { color: #6d8797; opacity: 1; }
.builder-suffix { flex: none; color: #0a5fa6; }
.builder-go { height: 54px; padding: 0 30px; font-size: 30px; }
.builder-error { grid-column: 1 / -1; margin: 2px 0 0; padding: 6px 10px; border-radius: 4px; background: #5c0d17; color: #fff; font-size: 15px; }
.builder-error[hidden] { display: none; }
.has-error .builder-host-field { outline: 2px solid #ff6b78; }
.builder-meta { margin: 14px 0 12px 2px; font-size: 16px; color: #e6f5fb; text-shadow: 0 1px 3px rgba(1, 28, 70, .6); }
.builder-meta strong { color: #fff; font-weight: 600; }
.builder-meta a { margin-left: 6px; color: #fff; font-weight: 600; white-space: nowrap; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: 2px; }
.hero-points li { position: relative; padding-left: 21px; font-size: 16px; font-weight: 500; color: #f1faff; }
.hero-points li::before { content: ''; position: absolute; left: 1px; top: 5px; width: 12px; height: 7px; border-left: 3px solid var(--neon); border-bottom: 3px solid var(--neon); transform: rotate(-45deg); filter: drop-shadow(0 0 3px rgba(0, 40, 10, .7)); }
.hero-beam { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: radial-gradient(ellipse 50% 100% at 50% 50%, #e3fbff 0, var(--electric) 45%, transparent 100%); box-shadow: 0 0 26px 3px rgba(22, 163, 236, .7); }

.hero-visual { position: relative; padding: 46px 0 0 0; }
.hero-badge { position: absolute; top: -34px; right: -28px; width: clamp(96px, 9vw, 128px); height: auto; z-index: 2; filter: drop-shadow(0 12px 22px rgba(0, 18, 52, .55)) drop-shadow(0 0 22px rgba(200, 245, 255, .55)); }
.tree { position: relative; background: linear-gradient(180deg, rgba(4, 34, 66, .9) 0, rgba(3, 20, 38, .96) 100%); border-color: rgba(190, 236, 255, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 22px 54px rgba(0, 16, 48, .6); font-size: 16px; max-width: 450px; }
.tree-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(138, 217, 246, .24), rgba(138, 217, 246, .04)); font: 500 14px var(--mono); color: var(--ice); min-height: 46px; border-radius: 6px 6px 0 0; }
.tree-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.tree-signal i { width: 3px; background: var(--neon); box-shadow: 0 0 5px rgba(43, 245, 31, .7); }
.tree-signal i:nth-child(1) { height: 5px; } .tree-signal i:nth-child(2) { height: 8px; } .tree-signal i:nth-child(3) { height: 11px; } .tree-signal i:nth-child(4) { height: 14px; }
.tree-list { list-style: none; padding: 10px 14px 6px; }
.tree-chan { padding: 3px 0 3px 22px; position: relative; font-weight: 600; color: #fff; }
.tree-chan::before { content: ''; position: absolute; left: 3px; top: 10px; width: 8px; height: 8px; border: solid var(--faint); border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.tree-chan.is-open::before { transform: rotate(45deg); top: 8px; border-color: var(--logo); }
.tree-chan em { font: 500 13px var(--mono); color: var(--faint); margin-left: 4px; }
.tree-chan ul { list-style: none; margin: 3px 0 6px; }
.tree-chan li { position: relative; padding: 2px 0 2px 21px; font-weight: 400; color: var(--muted); }
.tree-chan li::before, .viz-overlay li::before { content: ''; position: absolute; left: 1px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: #2b5168; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22); }
.tree-chan li.is-talking { color: #fff; font-weight: 500; }
.tree-chan li.is-talking::before, .viz-overlay li.is-talking::before { background: var(--neon); animation: talk 1.7s ease-in-out infinite; }
.is-delay::before { animation-delay: -.8s !important; }
.is-delay-2::before { animation-delay: -1.2s !important; }
.tree-chan li.is-muted { color: var(--faint); }
.tree-chan li.is-muted::before { background: #6d2732; }
.tree-chan li.tree-more { font-size: 14px; color: var(--faint); }
.tree-chan li.tree-more::before { display: none; }
.tree-foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.tree-foot b { font: 500 13px var(--mono); color: var(--neon-hi); }
@keyframes talk { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 245, 31, .7), 0 0 6px var(--neon); opacity: 1; } 55% { box-shadow: 0 0 0 5px rgba(43, 245, 31, 0), 0 0 2px var(--neon); opacity: .72; } }

/* Download band */
.download-band { background: linear-gradient(180deg, #06263a, #041a29); border-bottom: 1px solid #0d3a56; }
.download-band-inner { display: flex; align-items: center; gap: 28px; padding-top: 24px; padding-bottom: 24px; flex-wrap: wrap; }
.download-band-copy { flex: 1 1 340px; min-width: 0; }
.download-band h2 { margin: 0 0 4px; font-size: 32px; }
.download-band p { margin: 0; color: var(--muted); font-size: 16px; }
.os-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.os-button { display: flex; align-items: center; gap: 10px; min-width: 164px; padding: 8px 16px 8px 8px; border: 1px solid var(--line-strong); border-radius: 40px; background: linear-gradient(180deg, rgba(138, 217, 246, .18), rgba(138, 217, 246, .03)); text-decoration: none; color: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.os-button:hover { border-color: var(--logo); box-shadow: 0 0 16px rgba(111, 205, 240, .35); }
.os-orb { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 50% 110%, #5cc9ef, #0e5a86 58%, #083a58 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 5px rgba(170, 240, 255, .35), 0 2px 5px rgba(0, 0, 0, .4); }
.os-orb svg { width: 20px; height: 20px; }
.os-text b { display: block; font: 700 20px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.os-text small { display: block; color: var(--muted); font-size: 13px; line-height: 1.2; }

/* Sections */
.band { padding: clamp(52px, 7vw, 92px) 0; background: var(--ink-2); }
.band-tint { background: linear-gradient(180deg, #06263a 0, #05202f 100%); border-top: 1px solid #0d3a56; border-bottom: 1px solid #0d3a56; }
.band-head { max-width: 760px; margin-bottom: 34px; }
.band-head p { color: var(--muted); font-size: 18px; margin: 0; }
.band-foot { margin: 22px 0 0; font-weight: 600; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.card { grid-column: span 4; padding: 18px 20px 20px; min-width: 0; transition: border-color .18s ease, box-shadow .18s ease; }
.card:hover { border-color: rgba(43, 245, 31, .5); }
.card h3 { margin: 16px 0 6px; transition: color .15s ease; }
.card:hover h3 { color: var(--neon); }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card-wide { grid-column: span 8; }
.card-half { grid-column: span 6; }
.card-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
.card-split h3 { margin-top: 0; font-size: 34px; font-weight: 800; }
.card-split p { font-size: 18px; }

.viz { height: 128px; border: 1px solid var(--line); border-radius: 4px; background: #04141f; overflow: hidden; position: relative; }
.viz-radar { height: 236px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, #0a3650, #04141f 72%); }
.radar { position: relative; width: 208px; height: 208px; border-radius: 50%; border: 1px solid var(--line-strong); background: repeating-radial-gradient(circle, transparent 0 34px, rgba(138, 217, 246, .2) 34px 35px); }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(43, 245, 31, .3), rgba(43, 245, 31, 0) 72deg); animation: sweep 5s linear infinite; }
.radar b { position: absolute; font: 500 12px/1 var(--mono); color: var(--ice); padding-top: 15px; transform: translateX(-50%); }
.radar b::before { content: ''; position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--logo); }
.radar-you { left: 50%; top: 46%; color: #fff !important; }
.radar-you::before { background: #fff !important; box-shadow: 0 0 9px #fff; }
.mate-a { left: 21%; top: 19%; } .mate-a::before, .mate-c::before { background: var(--neon) !important; animation: talk 1.7s ease-in-out infinite; }
.mate-b { left: 79%; top: 36%; }
.mate-c { left: 66%; top: 74%; } .mate-c::before { animation-delay: -.8s !important; }
@keyframes sweep { to { transform: rotate(360deg); } }

.viz-overlay { background: linear-gradient(180deg, #16405c 0, #2b6b80 44%, #c47f4a 58%, #3a2b2b 59%, #161217 100%); }
.viz-overlay::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(115deg, transparent 0 58%, rgba(0, 0, 0, .55) 58% 72%, transparent 72%), linear-gradient(68deg, rgba(0, 0, 0, .5) 0 24%, transparent 24%); }
.viz-overlay ul { list-style: none; position: absolute; z-index: 2; left: 10px; top: 10px; padding: 6px 12px 6px 8px; border-radius: 4px; background: rgba(2, 14, 24, .72); font-size: 14px; line-height: 1.5; }
.viz-overlay li { position: relative; padding-left: 18px; color: var(--muted); }
.viz-overlay li::before { top: 6px; width: 10px; height: 10px; }
.viz-overlay li.is-talking { color: #fff; }

.viz-wave { display: flex; align-items: center; justify-content: center; gap: 5px; background: radial-gradient(ellipse at 50% 50%, #0b3a55, #04141f 76%); }
.viz-wave i { display: block; width: 6px; height: 60%; border-radius: 3px; background: linear-gradient(180deg, var(--ice), var(--electric)); transform-origin: center; animation: wave 1.5s ease-in-out infinite; }
.viz-wave i:nth-child(3n) { animation-delay: -.3s; } .viz-wave i:nth-child(3n+1) { animation-delay: -.72s; } .viz-wave i:nth-child(4n) { animation-delay: -1.1s; } .viz-wave i:nth-child(5n) { animation-delay: -.5s; }
@keyframes wave { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }

.viz-acl { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 8px 10px; font-size: 13px; }
.viz-acl div { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; }
.viz-acl b { font-weight: 600; color: #fff; }
.viz-acl span { padding: 3px 0; text-align: center; border-radius: 3px; background: #0d2a3b; color: var(--faint); }
.viz-acl span.on { background: rgba(43, 245, 31, .18); color: var(--neon-hi); }

.viz-browser .browser-bar { display: flex; gap: 5px; align-items: center; height: 28px; padding: 0 9px; background: linear-gradient(180deg, #2c3b44, #1b272e); }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #566973; }
.browser-bar span { flex: 1; margin-left: 6px; padding: 1px 8px; border-radius: 9px; background: #0a171f; font: 500 11px/1.5 var(--mono); color: var(--ice); white-space: nowrap; overflow: hidden; }
.browser-body { position: relative; padding: 14px; }
.browser-line { display: block; height: 8px; width: 62%; margin-bottom: 8px; border-radius: 4px; background: #17394d; }
.browser-line.short { width: 40%; }
.browser-join { position: absolute; right: 12px; bottom: -36px; padding: 5px 12px; border-radius: 4px; background: linear-gradient(180deg, var(--neon-hi), var(--neon) 50%, var(--neon-lo)); color: var(--neon-ink); font: 800 15px var(--display); text-transform: uppercase; }

.viz-host { display: flex; align-items: center; justify-content: center; padding: 0 14px; background: radial-gradient(ellipse at 50% 50%, #0b3a55, #04141f 78%); font: 500 clamp(19px, 2.4vw, 30px) var(--mono); color: #fff; text-shadow: 0 0 14px rgba(111, 205, 240, .9); }
.viz-host > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-host em { font-style: normal; color: var(--logo); }

.viz-status { display: grid; grid-template-columns: minmax(0, 1fr) 138px; gap: 10px; padding: 10px; }
.status-site { padding: 2px 4px; }
.status-site b { display: block; margin-bottom: 8px; font: 700 17px var(--display); text-transform: uppercase; color: #fff; }
.status-widget { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: #0a2b3f; font-size: 13px; line-height: 1.35; overflow: hidden; }
.status-widget b { display: block; color: var(--logo); font: 700 14px var(--display); text-transform: uppercase; }
.status-widget span { display: block; color: var(--muted); }
.status-widget .in { padding-left: 10px; color: #fff; }

/* The one plan */
.plan-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr); gap: 16px; align-items: stretch; }
.plan-included { padding: 24px; }
.plan-included h3 { margin: 0 0 8px; font-size: clamp(36px, 3.6vw, 48px); font-weight: 800; }
.plan-included > p { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.plan-checks { list-style: none; }
.plan-checks li { position: relative; padding: 4px 0 4px 24px; font-size: 16px; }
.plan-checks li::before { content: ''; position: absolute; left: 1px; top: 10px; width: 12px; height: 7px; border-left: 3px solid var(--neon); border-bottom: 3px solid var(--neon); transform: rotate(-45deg); }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 24px; }
.plan-card h3 { margin: 0 0 18px; color: var(--ice); }
.plan-price { margin: 0; font: 800 clamp(64px, 6vw, 82px)/.95 var(--display); color: #fff; }
.plan-price small { font-size: 21px; font-weight: 700; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.plan-card-note { margin: 12px 0 24px; color: var(--muted); font-size: 16px; }
.plan-card .btn-neon, .plan-card .btn-glass { width: 100%; margin-top: auto; text-align: center; }
.plan-card-best { border-color: var(--neon); box-shadow: 0 0 30px rgba(43, 245, 31, .2), inset 0 1px 0 rgba(255, 255, 255, .13); }
.plan-flag { position: absolute; top: 22px; right: 20px; padding: 4px 8px; border-radius: 3px; background: var(--neon); color: var(--neon-ink); font: 800 17px/1 var(--display); text-transform: uppercase; }
.sizes-head { margin: 36px 0 14px; font-size: 30px; }
.sizes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.size { padding: 18px 20px; }
.size > span { display: block; }
.size-count { font: 800 54px/.95 var(--display); color: #fff; }
.size-count small { margin-left: 6px; font-size: 19px; font-weight: 700; text-transform: uppercase; color: var(--logo); }
.size > .size-meter { height: 6px; margin: 12px 0; overflow: hidden; border-radius: 3px; background: rgba(138, 217, 246, .16); }
.size-meter i { display: block; height: 100%; min-width: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--electric), var(--neon)); }
.size-name { font: 700 23px/1.1 var(--display); text-transform: uppercase; color: var(--ice); }
.size-desc { margin: 4px 0 12px; color: var(--muted); font-size: 16px; line-height: 1.35; }
.size-price { font: 800 28px/1 var(--display); color: var(--neon); }
.size-price small { font-size: 16px; font-weight: 700; color: var(--muted); }
.plan-start { margin: 18px 0 0; font-size: 16px; color: var(--ice); }
.plan-start a { color: #fff; font-weight: 600; }
.plan-usd { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.faq article { padding: 18px 20px; }
.faq h3 { margin: 0 0 6px; }
.faq p { margin: 0; color: var(--muted); font-size: 16px; }
.page-hero-price { margin-top: 14px !important; font-size: 17px !important; }

/* Locations */
.locations-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.locations-map { position: relative; }
.locations-map img { display: block; width: 100%; opacity: .78; filter: drop-shadow(0 0 7px rgba(22, 163, 236, .45)); }
.pin { position: absolute; display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font: 700 18px/1 var(--display); text-transform: uppercase; white-space: nowrap; transform: translate(-7px, -50%); }
.pin i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--neon); animation: talk 2.2s ease-in-out infinite; }
.pin span { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 3px; background: rgba(3, 20, 32, .88); }
.pin:hover span { border-color: var(--neon); color: var(--neon-hi); }
.locations-copy > p { color: var(--muted); }
.location-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.location-list a { display: block; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 4px; text-decoration: none; color: var(--ice); font-weight: 500; }
.location-list a:hover { border-color: var(--neon); color: #fff; }
.quote { margin: 0; padding: 4px 0 0 18px; border-left: 3px solid var(--electric); }
.quote p { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.quote cite { color: var(--muted); font-style: normal; font-weight: 600; }
.quote cite::before { content: '- '; }

/* First-night guides */
.help-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.help-grid p { color: var(--muted); }
.guide-list { list-style: none; counter-reset: guide; border-top: 1px solid var(--line); }
.guide-list li { counter-increment: guide; border-bottom: 1px solid var(--line); }
.guide-list a { display: flex; gap: 16px; align-items: baseline; padding: 13px 4px; color: #fff; text-decoration: none; font-weight: 500; font-size: 18px; }
.guide-list a::before { content: counter(guide); min-width: 22px; font: 800 26px/1 var(--display); color: var(--electric); }
.guide-list a:hover { color: var(--neon-hi); }

/* GameVox promo keeps its own orange */
.gamevox-slot { padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(36px, 5vw, 60px); }
.gamevox-band { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 20px 24px; border: 1px solid rgba(235, 117, 56, .55); border-radius: var(--radius); background: linear-gradient(135deg, #18222e, #1d1720); color: #d9dee3; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.gamevox-band:hover { border-color: #ef7a3c; box-shadow: 0 0 26px rgba(235, 117, 56, .25); color: #fff; }
.gamevox-band-logo { width: 170px; height: auto; flex: none; }
.gamevox-band-copy { flex: 1 1 340px; min-width: 0; font-size: 15px; line-height: 1.45; }
.gamevox-band-tag { display: block; margin-bottom: 3px; color: #ff9a5e; font: 700 16px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.gamevox-band-btn { flex: none; padding: 10px 18px; border-radius: var(--radius); background: linear-gradient(135deg, #eb7538, #ef4d3b); color: #fff; font: 800 19px var(--display); text-transform: uppercase; letter-spacing: .03em; }

/* Horizon: the original glowing server floor */
#horizon { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--ink-2) 0, #03121c 44%, #052a44 66%, #051b28 100%); padding: 72px 0 236px; text-align: center; border-top: 1px solid #0d3a56; }
.horizon-floor { position: absolute; z-index: -1; left: -30%; right: -30%; bottom: -80px; height: 280px; transform: perspective(240px) rotateX(58deg); transform-origin: 50% 0; background-color: #051b28; background-image: linear-gradient(90deg, rgba(0, 7, 12, .95) 0 72%, rgba(111, 205, 240, .3) 72% 76%, rgba(0, 7, 12, .95) 76%), linear-gradient(180deg, rgba(111, 205, 240, .42) 0 3px, transparent 3px); background-size: 46px 100%, 100% 40px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 88%); mask-image: linear-gradient(180deg, #000, transparent 88%); }
#horizon::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 196px; height: 4px; background: radial-gradient(ellipse 50% 100% at 50% 50%, #eafcff 0, var(--electric) 52%, transparent 100%); box-shadow: 0 0 60px 16px rgba(22, 163, 236, .55); }
.horizon-cta h2 { margin: 0 0 18px; }
.horizon-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* Footer */
#footer { background: #051b28; padding: 34px 0 26px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 28px; }
#footer h3 { margin: 0 0 10px; font-size: 19px; color: #fff; }
#footer .footer-sub { margin-top: 20px; }
#footer ul { list-style: none; }
#footer li { padding: 3px 0; color: var(--muted); }
#footer a { color: #c8e2ee; text-decoration: none; }
#footer a:hover { color: #fff; text-decoration: underline; }
#footer .footer-gamevox { color: #eb7538; font-weight: 600; }
.footer-tag { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.footer-brand img { display: block; margin-bottom: 14px; }
.footer-copy { color: var(--faint); font-size: 14px; }
.footer-disclaimer { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--faint); }

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

/* Narrower screens */
@media (max-width: 1080px) {
	.site-nav .nav-external { display: none; }
	.card-wide { grid-column: span 12; }
	.card, .card-half { grid-column: span 6; }
	.card-wide { grid-column: span 12; }
	.plan-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.plan-included { grid-column: 1 / -1; }
	.sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.topbar-login { display: none; }
	.topbar-login-link { display: block; }
	.brand-badge { width: 44px; height: 44px; }
	.brand-word { width: 112px; }
	#masthead { position: relative; }
	#masthead .wrap { gap: 0 12px; min-height: 0; padding-top: 8px; padding-bottom: 0; }
	.masthead-cta { margin-left: auto; }
	.site-nav { order: 3; flex: 1 0 100%; margin: 6px calc(var(--gutter) * -1) 0; padding: 0 calc(var(--gutter) - 12px); overflow-x: auto; scrollbar-width: none; }
	.site-nav a { font-size: 18px; padding: 10px 12px; }
	.hero-grid { grid-template-columns: minmax(0, 1fr); }
	.hero-light { background: radial-gradient(ellipse 620px 420px at 74% 60%, rgba(205, 250, 255, .55) 0, rgba(90, 216, 255, .46) 28%, rgba(22, 163, 236, 0) 72%); }
	.hero-light::after { display: none; }
	.hero-visual { max-width: 460px; }
	.locations-grid, .help-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.builder { grid-template-columns: minmax(0, 1fr); }
	.plan-panel, .faq { grid-template-columns: minmax(0, 1fr); }
	.builder-host-field { font-size: 15px; padding: 0 9px; }
	.builder-go { width: 100%; }
	.card, .card-half, .card-wide { grid-column: span 12; }
	.card-split { grid-template-columns: minmax(0, 1fr); }
	.os-button { flex: 1 1 100%; }
	.pin { font-size: 13px; gap: 4px; }
	.pin i { width: 10px; height: 10px; }
	.pin span { padding: 2px 4px; }
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
	.sizes { grid-template-columns: minmax(0, 1fr); }
}

/* Interior page header */
.page-hero { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 66px) 0 clamp(34px, 4vw, 50px); background: radial-gradient(ellipse 760px 320px at 72% -30%, rgba(190, 247, 255, .9), rgba(60, 200, 255, .55) 40%, rgba(22, 163, 236, 0) 76%), linear-gradient(180deg, #04367f, #0555b4 70%, #043d8d); box-shadow: inset 0 -3px 0 rgba(22, 163, 236, .7); }
.page-hero h1 { margin-bottom: 10px; text-shadow: 0 2px 0 rgba(1, 28, 70, .55), 0 6px 28px rgba(1, 28, 70, .55); }
.page-hero p { max-width: 760px; margin: 0; font-size: 19px; color: #f1faff; text-shadow: 0 1px 3px rgba(1, 28, 70, .6); }
.page-hero + .band { padding-top: clamp(32px, 4vw, 50px); }

/* Pages that keep their existing markup sit in a panel on the bloom */
.layout-panel { padding: clamp(26px, 4vw, 44px) var(--gutter) clamp(44px, 6vw, 70px); background: radial-gradient(ellipse 900px 300px at 72% -60px, rgba(190, 247, 255, .8), rgba(60, 200, 255, .4) 40%, rgba(22, 163, 236, 0) 76%), linear-gradient(180deg, #0555b4 0, #043d8d 170px, var(--ink-2) 420px); }
.layout-panel .page-inner { position: relative; max-width: 1120px; margin: 0 auto; padding: clamp(20px, 4vw, 42px); border: 1px solid var(--line-strong); border-radius: 8px; background: linear-gradient(180deg, #082a40 0, #05202f 120px, #051b28 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 48px rgba(0, 12, 30, .5); }
.layout-panel h1 { font-size: clamp(38px, 5vw, 60px); }
.layout-panel h2 { font-size: clamp(30px, 3.6vw, 42px); }
.layout-panel h3 { font-size: 24px; }
.layout-panel .description { margin-bottom: 20px; }
.first-word { font-weight: 600; color: #fff; }
.layout-panel table { border-collapse: collapse; }
.layout-panel img { max-width: 100%; height: auto; }
.layout-panel ul.list { padding-left: 22px; }

/* Support articles */
.support ol { margin: 0 0 16px 26px; }
.support ol > li { margin-bottom: 26px; padding-left: 4px; }
.support ol > li::marker { font: 800 22px var(--display); color: var(--electric); }
.support ul { margin: 8px 0 10px 22px; }
.support li { margin-bottom: 8px; }
.support-header { font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.support .content { color: #d2e6ef; margin-bottom: 8px; }
.support img { display: block; margin: 14px 0; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; }

/* Download page */
.download-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.download-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; }
.os-orb-large { width: 64px; height: 64px; margin-bottom: 14px; }
.os-orb-large svg { width: 32px; height: 32px; }
.download-card h2 { margin: 0; font-size: 36px; }
.download-version { margin: 2px 0 18px; color: var(--muted); }
.download-card ul { list-style: none; margin-top: 20px; font-size: 15px; }
.download-card li { margin-bottom: 6px; }
.web-client { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 50px); align-items: center; }
.web-client p { color: var(--muted); }
.web-client-url a { font-family: var(--mono); font-size: 16px; }
.web-client-shot { display: block; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; line-height: 0; box-shadow: 0 16px 40px rgba(0, 12, 30, .5); }

/* Features page */
.feature-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 820px; margin: 4px 0 24px; }
.feature-chips li { padding: 6px 14px; border: 1px solid rgba(190, 236, 255, .55); border-radius: 4px; background: rgba(2, 36, 84, .5); color: #fff; font-weight: 500; }
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tour-grid figure { margin: 0; overflow: hidden; }
.tour-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #04141f; }
.tour-grid figcaption { padding: 12px 14px; color: var(--muted); font-size: 15px; line-height: 1.4; }

/* Support hub */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.support-side { display: grid; gap: 16px; min-width: 0; }
.support-group { padding: 20px 22px; }
.support-group h2 { margin: 0 0 10px; font-size: 28px; }
.support-group ul { list-style: none; }
.support-group li { border-top: 1px solid var(--line); }
.support-group li:first-child { border-top: 0; }
.support-group li a { display: block; padding: 8px 0; color: #eaf7fc; text-decoration: none; font-size: 16px; line-height: 1.35; }
.support-group li a:hover { color: var(--neon-hi); }

/* Forms on the free trial and status tool pages, on top of the shared control panel styles */
.layout-panel .form { list-style: none; }
.layout-panel .form label { display: block; margin-bottom: 4px; font: 700 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ice); }
.layout-panel .form li { padding-top: 14px; }
.layout-panel .form input[type=text], .layout-panel .form input[type=password], .layout-panel .form select, .layout-panel .form textarea, #serverListFilters input[type=text], #serverListFilters select { max-width: 100%; height: 42px; padding: 6px 10px; border: 1px solid #022a5a; border-radius: 4px; background: #fff; color: #06283f; font: 400 16px var(--body); }
.layout-panel .form textarea { height: auto; }
.validation-error { padding: 4px 8px; border-radius: 3px; font-size: 14px; }
.ui-state-error { background: #5c0d17 !important; border: 1px solid #a02432 !important; color: #fff !important; }
.ui-state-error a { color: #fff !important; }

#festive { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 44px; }
#festive h1, #festive .free-trial-desc { grid-column: 1 / -1; }
.free-trial-desc { margin-bottom: 14px; font-size: 20px; color: var(--ice); }
.form-free input[type=text], .form-free input[type=password] { width: 100%; }
.form-free input[type=checkbox] { width: 17px; height: 17px; vertical-align: -3px; margin-right: 5px; accent-color: var(--neon); }
.services-agreement { font-size: 15px; line-height: 1.4; }
#festive .product-description { align-self: center; margin: 0; font: 800 clamp(28px, 3vw, 40px)/1.08 var(--display) !important; text-transform: uppercase; color: #fff; }

/* Status tool */
.mumble-server-status .page-inner > div:first-child { width: auto !important; max-width: 700px; margin: 0 !important; }
.mumble-server-status .step { position: relative; margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(92, 170, 214, .08); }
.mumble-server-status .step h2 { font-size: 30px; margin-bottom: 10px; }
.mumble-server-status .step > div[style*="right: -200px"] { right: -340px !important; }
.mumble-server-status .step-2 ul.form { width: 236px; float: left; }
.mumble-server-status .form input { width: 230px; }
.mumble-server-status .form input#cv-url { width: 395px; max-width: 100%; }
.mumble-server-status .cv-holder { float: left; margin: 10px 0 0 30px; }
.mumble-server-status textarea#code { width: 445px; max-width: 100%; height: 70px; font: 500 12px var(--mono); }
#cv-radius-slider, #cv-height-slider, #cv-width-slider { margin-top: 6px; }

/* Public server list */
div#serverListFilters { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(92, 170, 214, .08); }
div#serverListFilters table { max-width: 100%; }
#serverListFilters td { padding: 4px 6px; }
.filterFlag { cursor: pointer; }
#serverList { width: 100%; margin-top: 18px; font-size: 16px; }
#serverList th { padding: 8px; text-align: left; border-bottom: 1px solid var(--line-strong); font: 700 20px var(--display); text-transform: uppercase; color: #fff; }
#serverList td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
#serverList td a { color: #fff; }

/* News */
.news { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(92, 170, 214, .08); }
.news .title h3 { margin: 0 0 6px; }
.pointer { cursor: pointer; }

/* jQuery UI dialogs from older pages */
.ui-widget { font-family: var(--body); }
.ui-dialog { border: 1px solid var(--line-strong) !important; background: #06263a !important; color: var(--text) !important; }
.ui-dialog .ui-dialog-titlebar { border: 0 !important; background: linear-gradient(180deg, #1a5f86, #0c3a55) !important; color: #fff !important; font: 700 20px var(--display); text-transform: uppercase; }
.ui-widget-overlay { background: #010a12 !important; opacity: .75 !important; }

@media (max-width: 900px) {
	.download-cards, .web-client, .support-grid, .tour-grid, #festive { grid-template-columns: minmax(0, 1fr); }
	.mumble-server-status .step > div[style*="right: -200px"] { display: none; }
	.mumble-server-status .cv-holder { float: none; margin: 16px 0 0; }
	.mumble-server-status .step-2 ul.form { float: none; width: auto; }
}
@media (max-width: 640px) {
	div#serverListFilters table { width: 100% !important; }
}

/* Small screen fixes */
.web-client-url a { overflow-wrap: anywhere; }
@media (max-width: 900px) {
	.hero-badge { right: -6px; top: -30px; }
	.mumble-server-status .step { display: block; width: 100%; }
	.mumble-server-status .form input, .mumble-server-status .form input#cv-url, .mumble-server-status textarea#code { width: 100%; }
}
@media (max-width: 640px) {
	.pin-left { flex-direction: row-reverse; transform: translate(calc(-100% + 5px), -50%); }
	#serverListFilters td { display: block; width: 100%; }
	#serverListFilters select, #serverListFilters input[type=text] { width: 100%; }
	#serverList { display: block; overflow-x: auto; }
}

/* Status tool script sets width and float inline on each step */
.mumble-server-status .step { float: none !important; width: auto !important; margin-bottom: 0 !important; }
.layout-panel .page-inner { display: flow-root; }
.description .call { width: auto !important; margin: 0 8px 8px 0 !important; vertical-align: top; }

@media (max-width: 640px) {
	/* Keep the input at 16px so iOS does not zoom on focus; only the suffix shrinks */
	.builder-host-field { font-size: 16px; }
	.builder-suffix { font-size: 12px; }
}

@media (max-width: 640px) {
	.builder-meta a { display: block; margin: 4px 0 0; }
}
@media (max-width: 360px) {
	.brand-badge { width: 38px; height: 38px; }
	.brand-word { width: 88px; }
	.masthead-cta { padding: 7px 12px; font-size: 16px; }
}