/* Thinking Datacenters R10 shared site chrome.
   Original header/footer DOM and CSS; URLs rebased for the support service.
   Do not add global type/form selectors: the forum maintains its own UI. */
:root { --accent: #EC3A3A; }
.site-header, .site-footer {line-height:1.34;letter-spacing:-.018em}
.site-header a, .site-footer a { text-decoration:none; }
.site-header img, .site-footer img { display:block; max-width:100%; }
.site-header {height:70px;background:#050505;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,70px);position:sticky;top:0;z-index:20;border-bottom:1px solid #292929}
.brand, .footer-brand {display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em;font-size:14px;line-height:.95}
.brand img, .footer-brand img {width:42px;height:42px;object-fit:contain}
.site-header nav, .site-footer nav {display:flex;gap:clamp(18px,2.8vw,46px);font-size:14px;letter-spacing:.01em}
.site-header nav a, .site-footer nav a {opacity:.82}
.site-header nav a:hover, .site-footer nav a:hover {opacity:1}
.site-footer {background:#050505;color:#fff;min-height:110px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:center;padding:26px clamp(20px,4vw,70px)}
.site-footer>p {font-size:11px;color:#bfbfbf;text-align:center;margin:0;letter-spacing:.06em}
.site-footer nav {justify-content:flex-end;font-size:12px;gap:22px}
@media  (max-width:800px){
.site-header {height:auto;padding:14px 18px;align-items:flex-start}
.site-header nav {display:none}
.brand img {width:34px;height:34px}
.site-footer {grid-template-columns:1fr;text-align:center}
.footer-brand {justify-content:center}
.site-footer nav {justify-content:center;flex-wrap:wrap}
.site-footer>p {order:3}
}
.site-header {height:auto;min-height:70px;gap:16px}
.header-main {width:100%;display:flex;align-items:center;gap:22px}
.site-header nav {margin-left:auto;gap:clamp(12px,1.4vw,25px);font-size:12px;white-space:nowrap}
.site-header nav a.active {color:#fff;border-bottom:1px solid #fff}
.referral-launch {margin-left:10px;background:transparent;color:#e4b46d;border:0;border-bottom:1px solid #795b31;padding:10px 0 9px;font:800 12px/1 Arial,sans-serif;letter-spacing:.06em;white-space:nowrap;cursor:pointer}
.nav-toggle {display:none;background:#111;color:#fff;border:1px solid #333;padding:7px 10px;font-size:18px}
.site-footer {min-height:0;display:block;padding:0}
.footer-grid {max-width:var(--page);margin:0 auto;padding:36px clamp(24px,5vw,80px);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-grid>div:not(.footer-brand) {display:flex;flex-direction:column;gap:9px}
.footer-grid h4 {font-size:11px;letter-spacing:.09em;color:#e4b46d;margin:0 0 5px}
.footer-grid a {font-size:13px;color:#ddd}
.footer-brand {align-items:flex-start}
.footer-brand img {width:58px;height:58px}
.footer-brand strong {font-size:15px;letter-spacing:.08em}
.footer-brand p {font-size:12px;color:#aaa;margin:10px 0 0}
.footer-bottom {border-top:1px solid #252525;max-width:var(--page);margin:0 auto;padding:15px clamp(24px,5vw,80px);display:flex;justify-content:space-between;font-size:10px;color:#888;letter-spacing:.04em}
#referral-modal {position:fixed;inset:0;background:rgba(0,0,0,.42);display:none;place-items:center;padding:20px;z-index:100}
#referral-modal .modal.open {display:grid}
#referral-modal .modal-card {background:#fff;border:1px solid #111;max-width:760px;width:100%;padding:36px;position:relative;box-shadow:0 28px 70px rgba(0,0,0,.25)}
#referral-modal .modal-card h2 {font-size:42px}
#referral-modal .modal-close {position:absolute;right:15px;top:12px;border:0;background:none;font-size:28px;cursor:pointer}
#referral-modal .modal-steps {display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0;border-top:1px solid #ccc;border-bottom:1px solid #ccc}
#referral-modal .modal-steps div {padding:18px;border-right:1px solid #ccc;display:flex;flex-direction:column;gap:5px}
#referral-modal .modal-steps div:last-child {border-right:0}
#referral-modal .modal-steps b {color:var(--red)}
#referral-modal .modal-steps span {font-size:13px;color:#555}
#referral-modal .modal-actions {display:flex;align-items:center;gap:20px;flex-wrap:wrap}
@media (max-width:1220px){
.site-header nav {display:none}
.nav-toggle {display:block;margin-left:auto}
.site-header.open nav {display:flex;position:absolute;left:0;right:0;top:70px;background:#050505;padding:18px 24px;flex-wrap:wrap;border-top:1px solid #222}
.referral-launch {margin-left:0}
}
@media (max-width:850px){
.footer-grid {grid-template-columns:1fr}
.footer-bottom {flex-direction:column;gap:5px}
#referral-modal .modal-steps {grid-template-columns:1fr}
#referral-modal .modal-steps div {border-right:0;border-bottom:1px solid #ccc}
#referral-modal .modal-steps div:last-child {border-bottom:0}
}
@media (max-width:520px){
.site-header {padding:12px 14px}
.referral-launch {font-size:10px}
}
@media (max-width:1380px){
.site-header nav {display:none}
.nav-toggle {display:block;margin-left:auto}
.site-header.open nav {display:flex;position:absolute;left:0;right:0;top:100%;background:#050505;padding:18px 24px;flex-wrap:wrap;border-top:1px solid #222;z-index:24}
}
@media (max-width:520px){
.header-main {flex-wrap:wrap;gap:10px}
.header-main .brand {margin-right:auto}
.header-main .nav-toggle {order:2;margin-left:auto}
.header-main .referral-launch {order:3;flex:0 0 100%;margin:0;text-align:left;padding-top:7px;padding-bottom:4px;width:max-content;border-bottom:0}
.site-header.open nav {padding:16px;gap:17px}
}
.footer-brand-with-socials {display:grid;grid-template-columns:58px 1fr;column-gap:14px;row-gap:24px}
.footer-brand-with-socials>img {grid-column:1;grid-row:1}
.footer-brand-with-socials>div:not(.footer-socials) {grid-column:2;grid-row:1}
.footer-socials {grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:9px 13px;align-items:center}
.footer-grid .footer-brand-with-socials .footer-socials a {font-size:11px;font-weight:750;color:#e0e0e0;letter-spacing:.035em;padding-bottom:5px;border-bottom:1px solid #555}
.footer-grid .footer-brand-with-socials .footer-socials a:hover {color:#fff;border-color:var(--accent)}
.footer-socials a span {color:var(--accent);margin-left:2px}
@media (max-width:850px){
.footer-brand-with-socials {justify-content:center;text-align:left}
.footer-socials {justify-content:center}
}
@media (max-width:650px){
.footer-socials {gap:12px}
}
.footer-brand-with-socials {row-gap:26px}
.footer-socials {gap:21px;align-items:center}
.footer-grid .footer-brand-with-socials .footer-socials a {
  display:inline-flex;align-items:center;justify-content:center;min-width:25px;
  min-height:29px;padding:3px 0;border:0;color:#ddd;transition:color .16s ease;
}
.footer-socials a svg {display:block;width:24px;height:24px;fill:currentColor;flex:none}
.footer-grid .footer-brand-with-socials .footer-socials a:hover, .footer-grid .footer-brand-with-socials .footer-socials a:focus-visible {color:var(--accent);border:0}
.footer-socials a[aria-label$="Discord community"] svg {width:27px}
@media (max-width:650px){
.footer-socials {gap:23px}
}

/* R10 referral panel is scoped to its own overlay so forum dialogs are unchanged. */
#referral-modal { position:fixed; inset:0; background:rgba(0,0,0,.42); display:none;
 place-items:center; padding:20px; z-index:100; }
#referral-modal.open { display:grid; }
#referral-modal .modal-card { background:#fff; border:1px solid #111; width:100%; max-width:760px;
 padding:36px; position:relative; box-shadow:0 28px 70px rgba(0,0,0,.25); }
#referral-modal .modal-card h2 {font-size:42px;line-height:1.03;letter-spacing:-.048em;margin:8px 0 16px;}
#referral-modal .modal-card p {font-size:17px;line-height:1.5;max-width:none;}
#referral-modal .eyebrow {font-size:13px;font-weight:800;letter-spacing:.045em;color:#EC3A3A;}
#referral-modal .button.dark {display:inline-flex;align-items:center;justify-content:center;
 padding:12px 16px;border:1px solid #111;background:#111;color:white;font-weight:800;font-size:14px;}
#referral-modal .text-link {font-size:14px;font-weight:700;color:#EC3A3A;}
@media(max-width:520px){
 #referral-modal .modal-card {padding:24px;}
 #referral-modal .modal-card h2 {font-size:30px;}
}

/* R10's chrome has no offset above the five SVG social icons. The forum's
   previous independent footer had margin-top:28px; reset it explicitly. */
.site-footer .footer-socials { margin-top:0; }
/* Match the R10 body typography inside the shared chrome on phones only,
   without altering the support form and discussion text. */
.site-header .nav-toggle { line-height:normal; }
@media(max-width:800px){.site-header,.site-footer{font-size:15px;}}
/* Match the R10 site's bold footer logotype rather than the older support
   footer's slightly lighter 860-weight rendering. */
.site-footer .footer-brand strong {font-weight:900;line-height:inherit;}