@font-face {
    font-family: Manrope;
    src: url('fonts/manrope-variable.woff2') format('woff2');
    font-display: swap;
    font-weight: 200 800;
}
:root { --paper: #f7f8f4; --ink: #152b24; --muted: #65756d; --lime: #bdeb68; --line: #dfe6dc; }
body { font-family: Manrope, system-ui, sans-serif; font-weight: 400; background: var(--paper); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, .wordmark { font-family: Manrope, system-ui, sans-serif; font-variation-settings: normal; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #527b35; outline-offset: 4px; }
.hand-underline { display: inline; width: auto; white-space: normal; }
.hand-underline:after, .hand-note { display: none; }
/* Shared icons have one box and one centered glyph, including cards and menus. */
.tw-icon { display: inline-grid; place-items: center; flex-shrink: 0; font-style: normal; }
.tw-icon:before { margin: 0; flex-shrink: 0; }
/* Shared controls: keep arrows and labels stable in every interaction state. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 20px; border-radius: 9px; box-shadow: none; font-size: 14px; font-weight: 650; transition: background .18s, border-color .18s, color .18s; }
.button:hover { transform: none; box-shadow: none; }
.button-primary { background: var(--lime); border: 1px solid var(--lime); color: #152b24; }
.button-primary:hover { background: #cbed91; border-color: #cbed91; color: #152b24; box-shadow: none; }
.button-primary>span, .button-dark>span, .button-ghost>span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0; padding: 0; border-radius: 0; background: transparent; color: inherit; transition: transform .18s; }
.button:hover>span { transform: translateX(3px); }
.button-dark { background: #20372c; color: #fff; border: 1px solid #20372c; box-shadow: none; }
.button-dark:hover { background: #36523f; color: #fff; box-shadow: none; }
.button-ghost { background: transparent; border: 1px solid #cdd7c8; color: #20372c; }
.button-ghost:hover { background: #eaf0e4; color: #20372c; }
.button:disabled { opacity: .55; cursor: wait; }
input, select, textarea { border-radius: 9px; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: #6c8a54; box-shadow: 0 0 0 3px #6c8a5418; }
/* One header frame at every breakpoint; product menu keeps its existing behavior. */
body .site-header, .route-home .site-header { position: sticky; top: 0; width: 100%; height: auto; margin: 0; padding: 0; border-bottom: 1px solid #dfe6dc; background: #f7f8f4; box-shadow: none; backdrop-filter: none; }
.site-header .site-header-inner { position: relative; width: min(1280px, calc(100% - 48px)); min-height: 88px; padding: 16px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.brand-header { gap: 12px; }
.brand-header .logo-mark { width: 44px; height: 44px; flex-basis: 44px; }
.brand-copy .wordmark { font-size: 22px; }
.brand-copy>small { font-size: 9px; letter-spacing: .025em; line-height: 1.5; font-weight: 500; }
.brand:hover .logo-mark { transform: none; }
.site-nav .nav-main { background: transparent; gap: 4px; }
.site-nav .nav-main>a, .nav-products>summary { position: relative; border-radius: 8px; padding: 10px 13px; color: #43594b; font-size: 13px; font-weight: 600; box-shadow: none; transition: background .18s, color .18s; }
.site-nav .nav-main>a:after { display: none; }
.site-nav .nav-main>a:hover, .nav-products>summary:hover { background: #e9efdf; color: #152b24; box-shadow: none; }
.site-nav .nav-main>a.active, .nav-products[open]>summary { background: #e9efdf; color: #20372c; box-shadow: none; }
.nav-product-panel { border-radius: 14px; background: #fff; box-shadow: 0 16px 35px #152b2420; animation: none; }
.nav-product-panel:before { background: #fff; }
.nav-product-grid>a:hover { transform: none; }
.nav-cta, .nav-portal { border-radius: 9px; box-shadow: none; background: #20372c; gap: 12px; }
.nav-cta:hover, .nav-portal:hover { transform: none; background: #36523f; box-shadow: none; }
.nav-cta i, .nav-portal i { display: inline-grid; place-items: center; border-radius: 6px; }
.nav-cta:hover i, .nav-portal:hover i { transform: translateX(2px); }
.nav-product-grid>a:hover .tw-icon:before, .portal-action-row>a:hover .tw-icon:before { transform: none; }
/* Landing page uses its own layout, independent of legacy hero/card rules. */
.tw-home { overflow: clip; }
.tw-home-container { width: min(1280px, calc(100% - 48px)); margin-inline: auto; }
.tw-home h1, .tw-home h2, .tw-home h3, .tw-home p { margin: 0; }
.tw-home h1, .tw-home h2, .tw-home h3 { letter-spacing: -.045em; font-weight: 650; }
.tw-home h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.18; }
.tw-home-eyebrow { font-size: 10px; letter-spacing: .13em; font-weight: 650; line-height: 1.5; color: #61735b; }
.tw-home-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 65px; padding-block: 76px 64px; }
.tw-home-intro h1 { margin-top: 22px; font-size: clamp(44px, 5.1vw, 73px); line-height: 1.06; color: #152b24; }
.tw-home-intro h1 span { color: #54723c; }
.tw-home-lede { max-width: 510px; margin-top: 24px!important; font-size: 17px; line-height: 1.8; color: #5c6c62; }
.tw-home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; margin-top: 30px; }
.tw-home-text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; color: #284930; text-decoration: none; }
.tw-home-text-link span { transition: transform .18s; }
.tw-home-text-link:hover { color: #4b6f38; }
.tw-home-text-link:hover span { transform: translateX(4px); }
.tw-home-note { margin-top: 24px!important; color: #768172; font-size: 11px; }
.tw-home-topology { position: relative; height: 440px; border: 1px solid #2f4737; border-radius: 22px; overflow: hidden; background: #192e24; color: #e3edd9; isolation: isolate; }
.tw-home-topology-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#d2e9b907 1px, transparent 1px),linear-gradient(90deg,#d2e9b907 1px,transparent 1px); background-size: 25px 25px; }
.tw-home-topology-head { display: flex; justify-content: space-between; gap: 15px; padding: 23px; font-size: 9px; letter-spacing: .13em; color: #b1c3a9; border-bottom: 1px solid #ffffff12; }
.tw-home-paths { position: absolute; left: 0; top: 65px; width: 100%; height: 285px; stroke: #6f9360; stroke-width: 1; }
.tw-home-paths circle { fill: #c0e985; stroke: none; }
.tw-home-rack { position: absolute; left: 50%; top: 50%; width: 152px; transform: translate(-50%,-50%); }
.tw-home-rack-unit { display: flex; align-items: center; gap: 9px; height: 37px; padding: 9px 11px; margin-bottom: 5px; border: 1px solid #749567; border-radius: 5px; background: linear-gradient(110deg,#d6e4c6,#a5be91); box-shadow: 0 3px 0 #0b1a13; }
.tw-home-rack-unit i { width: 5px; height: 5px; background: #253a26; border-radius: 50%; }
.tw-home-rack-unit span { width: 66px; height: 8px; background: repeating-linear-gradient(90deg,#657e56 0 2px,transparent 2px 5px); }
.tw-home-rack-unit b { width: 12px; height: 3px; margin-left: auto; background: #365a2e; }
.tw-home-rack small { display: block; text-align: center; margin-top: 14px; color: #a6be93; font-size: 8px; letter-spacing: .18em; }
.tw-home-topology-node { position: absolute; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 13px; color: #e2efd9; background: #203c2b; border: 1px solid #537346; border-radius: 8px; font-size: 11px; white-space: nowrap; transition: background .18s, border-color .18s; }
.tw-home-topology-node:hover { background: #345434; border-color: #b2d986; color: #fff; }
.tw-home-topology-node .tw-icon { --tw-icon-size: 17px; width: 20px; height: 20px; color: #c3e4a4; }
.tw-home-topology-node b { font-size: 12px; font-weight: 400; color: #a9c690; }
.tw-home-node-domain { top: 83px; left: 50%; transform: translateX(-50%); }
.tw-home-node-cloud { left: 20px; top: 260px; }
.tw-home-node-dedicated { right: 20px; top: 260px; }
.tw-home-topology-bottom { position: absolute; bottom: 20px; left: 23px; right: 23px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 17px; border-top: 1px solid #ffffff12; font-size: 10px; line-height: 1.6; color: #a9bea0; }
.tw-home-domain { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 38px; border: 1px solid #d6e1cc; border-radius: 16px; background: #ecf2e4; padding: 28px 32px; }
.tw-home-domain h2 { font-size: 29px; margin-top: 6px; }
.tw-home-domain form { display: flex; align-items: stretch; gap: 10px; }
.tw-home-domain input { flex: 1; min-width: 0; width: auto; height: 52px; margin: 0; padding: 12px 17px; border: 1px solid #cddac1; border-radius: 8px; background: #fff; font-size: 15px; }
.tw-home-domain .button { min-height: 52px; white-space: nowrap; }
.tw-home-products { padding-block: 95px; }
.tw-home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 36px; }
.tw-home-section-heading h2 { margin-top: 12px; }
.tw-home-section-heading>p { max-width: 355px; font-size: 14px; line-height: 1.8; color: #677466; }
.tw-home-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.tw-home-product { display: flex; flex-direction: column; border: 1px solid #dce4d5; border-radius: 16px; background: #fff; padding: 28px; transition: border-color .2s, background .2s; }
.tw-home-product:hover { border-color: #9db985; background: #fcfdf9; }
.tw-home-product-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 28px; }
.tw-home-product-head .tw-icon { --tw-icon-size: 24px; width: 46px; height: 46px; border-radius: 10px; color: #395a2e; background: #eef4e5; }
.tw-home-product-head>span { font-size: 10px; color: #6f7d67; }
.tw-home-product h3 { font-size: 28px; line-height: 1.2; max-width: 250px; }
.tw-home-product>p { margin-top: 17px; font-size: 13px; line-height: 1.9; color: #6b7766; }
.tw-home-product ul { list-style: none; padding: 22px 0; margin: 0; display: grid; gap: 10px; }
.tw-home-product li { display: flex; align-items: start; gap: 9px; font-size: 11px; color: #4d6344; line-height: 1.7; }
.tw-home-product li:before { content: '✓'; flex-shrink: 0; color: #739449; }
.tw-home-product>a { display: flex; justify-content: space-between; gap: 15px; padding-top: 19px; margin-top: auto; border-top: 1px solid #e2e8dc; color: #28472d; font-size: 12px; font-weight: 650; }
.tw-home-product>a span { transition: transform .18s; }
.tw-home-product>a:hover span { transform: translate(2px,-2px); }
.tw-home-workspace { padding-block: 78px; background: #1c3329; color: #ecf2e7; }
.tw-home-workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.tw-home-workspace .tw-home-eyebrow { color: #bed8a4; }
.tw-home-workspace h2 { margin-top: 15px; font-size: clamp(32px,3.5vw,47px); }
.tw-home-workspace-grid>div>p:not(.tw-home-eyebrow) { margin-top: 22px; max-width: 450px; font-size: 14px; line-height: 1.9; color: #b3c3ad; }
.tw-home-workspace .tw-home-text-link { margin-top: 27px; color: #c8ed9e; }
.tw-home-workspace-list>div { display: flex; align-items: start; gap: 20px; padding: 21px 0; border-bottom: 1px solid #b7d2a126; }
.tw-home-workspace-list>div:first-child { padding-top: 0; }
.tw-home-workspace-list>div:last-child { border: 0; padding-bottom: 0; }
.tw-home-workspace-list>div>span { padding-top: 3px; font-size: 11px; color: #99b888; }
.tw-home-workspace-list h3 { font-size: 18px; letter-spacing: -.02em; }
.tw-home-workspace-list p { margin-top: 7px; font-size: 12px; line-height: 1.8; color: #b6c8ae; }
.tw-home-network { padding-block: 88px; }
.tw-home-region-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
.tw-home-region-grid>a { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #dce4d5; border-radius: 11px; background: #fff; transition: border-color .18s, background .18s; }
.tw-home-region-grid>a:hover { border-color: #9db985; background: #f0f5e9; }
.tw-home-region-grid>a>span { font-size: 11px; color: #7a896e; }
.tw-home-region-grid strong { font-size: 12px; color: #345031; font-weight: 600; }
.tw-home-region-grid b { margin-left: auto; font-size: 14px; color: #6f8d56; }
.tw-home-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding: 44px 48px; margin-bottom: 80px; border-radius: 20px; background: #e8efdf; border: 1px solid #d4dfc8; }
.tw-home-cta h2 { margin-top: 12px; font-size: 43px; }
.tw-home-cta>div>p:not(.tw-home-eyebrow) { margin-bottom: 22px; font-size: 14px; line-height: 1.85; color: #5e7152; }
/* Footer: full-width background, bounded columns, legal links in a separate row. */
body .site-footer { display: block; width: 100%; max-width: none; margin: 0; padding: 55px 0 0; background: #eef2e8; border-top: 1px solid #dce4d4; color: #354b36; }
.tw-footer-inner { width: min(1280px,calc(100% - 48px)); margin: auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; column-gap: 40px; row-gap: 48px; }
.tw-footer-brand .brand { display: inline-flex; align-items: center; gap: 11px; }
.tw-footer-brand .logo-mark { width: 42px; height: 42px; flex-basis: 42px; }
.tw-footer-brand .wordmark { font-size: 23px; }
.site-footer .tw-footer-brand>p { margin: 18px 0 17px; font-size: 12px; line-height: 1.9; color: #6c7a62; }
.tw-footer-contact { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 600; color: #3f6132; }
.tw-footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.tw-footer-group h2 { margin: 0 0 7px; font-size: 12px; letter-spacing: 0; color: #28412a; font-weight: 650; }
.tw-footer-group a, .tw-footer-bottom a { font-size: 12px; color: #65765a; transition: color .18s; }
.tw-footer-group a:hover, .tw-footer-bottom a:hover, .tw-footer-contact:hover { color: #24451e; text-decoration: underline; text-underline-offset: 4px; }
.tw-footer-bottom { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 23px; border-top: 1px solid #d2ddc6; }
.site-footer .tw-footer-bottom p { margin: 0; font-size: 11px; color: #77856d; }
.tw-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 25px; }
/* CAPTCHA and shared panels retain the working PHP forms. */
.panel, .auth-card, .service-card, .account-panel { border-radius: 14px; border-color: var(--line); box-shadow: none; }
.security-check { padding: 16px; background: #f2f5ec; border: 1px solid var(--line); border-radius: 12px; max-width: 100%; overflow: hidden; }
.security-status { font-size: 12px; color: #4c5e46; margin: 10px 0 0; }
.security-retry { border: 0; background: transparent; text-decoration: underline; color: #254421; padding: 8px 0; cursor: pointer; }
.security-retry[hidden] { display: none; }
/* Customer workspace */
.customer-app { background: #f3f5ef; color: var(--ink); }
.customer-app .site-header { background: #fff; }
.customer-app .portal { padding-top: 28px; }
.customer-app .portal-nav-shell { top: 14px; background: #fff; backdrop-filter: none; border-radius: 13px; box-shadow: 0 3px 12px #14251f06; margin-bottom: 28px; padding: 9px 14px; }
.customer-app .portal-tabs { min-width: 0; }
.customer-app .portal-tabs a { border-radius: 8px; padding-inline: 9px; color: #52614f; transition: background .15s; }
.customer-app .portal-tabs a.active, .customer-app .portal-tabs a:hover { background: #e9f2dc; color: #294520; box-shadow: none; }
.customer-app .portal-heading { align-items: center; margin: 25px 0; }
.customer-app .portal-heading h1 { font-size: 38px; line-height: 1.15; letter-spacing: -.045em; }
.customer-app .portal-heading p { color: #667362; font-size: 14px; max-width: 580px; }
.customer-app .portal-welcome { margin-top: 10px; }
.customer-app .portal-stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.customer-app .portal-stat-grid>a { background: #fff; border-radius: 14px; padding: 22px; border: 1px solid var(--line); min-height: 145px; box-shadow: none; }
.customer-app .portal-stat-grid>a:first-child { background: #203b2d; color: #fff; border-color: #203b2d; }
.customer-app .portal-stat-grid>a:first-child span, .customer-app .portal-stat-grid>a:first-child small { color: #c9dbc1; }
.customer-app .portal-stat-grid>a>strong { font-size: 32px; }
.customer-app .portal-action-row { gap: 14px; margin: 0 0 30px; }
.customer-app .portal-action-row>a { border-radius: 12px; padding: 20px; background: #edf2e6; border: 1px solid #dbe4d1; box-shadow: none; }
.customer-app .portal-action-row>a:hover { background: #e4edd9; transform: none; }
.customer-app .panel { background: #fff; }
.customer-app table { font-size: 13px; }
.customer-app thead { background: #f3f6ee; }
.customer-app th { font-size: 10px; letter-spacing: .06em; }
.customer-app td { padding-block: 18px; border-color: #edf0e9; }
.customer-app .service-card { padding: 24px; background: #fff; min-height: 230px; transition: border-color .18s; }
.customer-app .service-card:hover { border-color: #a8bb94; box-shadow: none; transform: none; }
.customer-app .badge { border-radius: 6px; font-size: 10px; padding: 5px 8px; }
.customer-app .badge-success { background: #e9f5dc; color: #355221; }
.customer-app .badge-warning { background: #fff1d2; color: #775619; }
.customer-app .empty-state { padding: 45px 25px; background: #f7f9f3; border-radius: 14px; }
.customer-app .kicker { font-size: 10px; letter-spacing: .11em; }
.customer-app main { min-height: 65vh; }
.customer-app .portal-account-chip>span { background: #dcebc7; color: #345124; }
.customer-app .portal-account-popover { border-radius: 13px; box-shadow: 0 15px 35px #14251f18; }
.customer-app .portal-home-mark { background: #edf3e5; }
.customer-app .service-grid { gap: 18px; }
.customer-app .list-filters { background: #f7f9f3; padding: 18px; border-radius: 12px; margin: 16px 20px; }
.customer-app .customer-billing-panel .panel-heading { padding: 24px; }
.customer-app .portal-v2 { max-width: 1250px; }
.customer-app .portal-command { margin-left: auto; }
.customer-app .invoice-page { padding-top: 28px; }
.customer-app .invoice-sheet { border-radius: 16px; border: 1px solid var(--line); box-shadow: none; }
body.customer-app .site-footer { display: none; }
@media (max-width: 1150px) {
    .customer-app .portal-command>span, .customer-app .portal-command kbd { display: none; }
    .customer-app .portal-command { width: 38px; min-width: 38px; padding: 8px; }
    .customer-app .portal-home-mark>span { display: none; }
    .tw-home-hero { gap: 35px; }
    .tw-home-intro h1 { font-size: 60px; }
    .tw-home-region-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1000px) {
    .tw-home-hero { grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 56px; }
    .tw-home-intro h1 { font-size: 48px; }
    .tw-home-lede { font-size: 15px; }
    .tw-home-topology { height: 410px; }
    .tw-home-node-cloud { left: 10px; }
    .tw-home-node-dedicated { right: 10px; }
    .tw-home-product { padding: 22px; }
    .tw-home-product h3 { font-size: 23px; }
    .tw-home-workspace-grid { gap: 50px; }
    .tw-footer-inner { column-gap: 40px; }
    .customer-app .portal-stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 930px) {
    .site-header .site-header-inner { min-height: 76px; padding-block: 13px; }
    .site-nav { background: #fff; border-radius: 12px; backdrop-filter: none; }
    .site-nav.open { box-shadow: 0 14px 30px #152b2420; animation: none; }
    .site-nav .nav-main { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
    .site-nav .nav-main>a, .nav-products>summary { min-height: 44px; padding: 12px; }
    .nav-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
    .tw-home-hero { grid-template-columns: 1fr; gap: 36px; padding-block: 45px 35px; }
    .tw-home-intro h1 { font-size: clamp(40px,7.5vw,60px); }
    .tw-home-topology { height: 390px; max-width: 540px; width: 100%; margin: auto; }
    .tw-home-rack { top: 46%; }
    .tw-home-node-cloud, .tw-home-node-dedicated { top: 260px; }
    .tw-home-domain { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
    .tw-home-section-heading { flex-direction: column; align-items: start; gap: 18px; }
    .tw-home-section-heading>p { max-width: 550px; }
    .tw-home-products { padding-block: 60px; }
    .tw-home-product-grid { grid-template-columns: 1fr; }
    .tw-home-product h3 { max-width: none; font-size: 27px; }
    .tw-home-product-head { margin-bottom: 20px; }
    .tw-home-workspace { padding-block: 55px; }
    .tw-home-workspace-grid { grid-template-columns: 1fr; gap: 36px; }
    .tw-home-network { padding-block: 55px; }
    .tw-home-cta { grid-template-columns: 1fr; gap: 25px; padding: 30px; margin-bottom: 50px; }
    .tw-home-cta h2 { font-size: 35px; }
    .tw-footer-inner { grid-template-columns: 1fr 1fr; gap: 35px 24px; }
    .tw-footer-brand { grid-column: 1/-1; }
}
@media (max-width: 520px) {
    .tw-home-container, .tw-footer-inner, .site-header .site-header-inner { width: calc(100% - 36px); }
    .site-header .site-header-inner { padding-block: 12px; min-height: 72px; }
    .brand-header .logo-mark { width: 38px; height: 38px; flex-basis: 38px; }
    .brand-copy .wordmark { font-size: 20px; }
    .brand-copy>small { font-size: 8px; }
    .tw-home-eyebrow { font-size: 9px; }
    .tw-home-actions { gap: 20px; align-items: flex-start; flex-direction: column; }
    .tw-home-lede { margin-top: 20px!important; }
    .tw-home-topology-head { padding: 20px 18px; font-size: 8px; }
    .tw-home-topology-node { padding: 9px; gap: 7px; font-size: 10px; }
    .tw-home-rack { width: 135px; }
    .tw-home-domain { padding: 23px 20px; }
    .tw-home-domain form { flex-direction: column; }
    .tw-home-domain input, .tw-home-domain .button { width: 100%; }
    .tw-home-region-grid { gap: 10px; }
    .tw-home-region-grid>a { padding: 16px 12px; gap: 9px; }
    .tw-home-region-grid strong { font-size: 11px; }
    .tw-footer-bottom { flex-direction: column; align-items: flex-start; gap: 15px; }
    .tw-footer-bottom nav { gap: 18px; }
    .customer-app .portal-nav-shell { position: relative; top: 0; padding: 6px; grid-template-columns: minmax(0,1fr) auto; }
    .customer-app .portal-home-mark { display: none; }
    .customer-app .portal-tabs { overflow-x: auto; }
    .customer-app .portal-stat-grid { gap: 10px; }
    .customer-app .portal-stat-grid>a { padding: 16px; min-height: 125px; }
    .customer-app .portal-stat-grid>a>strong { font-size: 25px; }
    .customer-app .portal-action-row { grid-template-columns: 1fr; }
    .customer-app .list-filters { margin: 12px; padding: 12px; }
    .customer-app .portal-heading { gap: 16px; align-items: flex-start; }
    .customer-app .portal-heading h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}
@media print {
    body .site-header, body .site-footer, .portal-nav-shell { display: none; }
}

/* Product family and motion: preserve alignment while adding depth. */
.nav-product-grid .nav-brand-icon { background: transparent; overflow: hidden; border-radius: 10px; }
.nav-brand-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nav-product-grid .nav-brand-staticweb { background: #080808; border-radius: 50%; }
.tw-home-topology { background: radial-gradient(ellipse at 85% 0,#29635980,transparent 65%),linear-gradient(135deg,#162d26,#183b32); box-shadow: 0 24px 70px #193f3012; }
.tw-home-turbine { position: absolute; width: 350px; height: 350px; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .13; pointer-events: none; }
.tw-home-rotor { transform-origin: 100px 100px; animation: tw-turbine-turn 35s linear infinite; animation-play-state: paused; }
.tw-home-topology[data-in-view] .tw-home-rotor { animation-play-state: running; }
.tw-home-turbine+ .tw-home-paths { opacity: .8; }
.tw-home-intro h1 span { color: #3d7556; }
.tw-home-product { transition: transform .25s, border-color .25s, box-shadow .25s, background .25s; }
.tw-home-product:hover { transform: translateY(-4px); box-shadow: 0 15px 35px #254f2810; }
.tw-home-product-head .tw-icon { transition: background .25s, color .25s; }
.tw-home-product:hover .tw-icon { background: #d7ebbd; color: #294b34; }
.tw-home-topology-node:hover { box-shadow: 0 0 22px #a4df8b12; }
.tw-home-domain { background: linear-gradient(110deg,#ecf2e4,#eaf3ea); }
.tw-home-cta { background: linear-gradient(120deg,#e8efdf,#dceee7); }
.tw-hosting-platforms { padding-bottom: 90px; }
.tw-hosting-platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.tw-hosting-platform { display: flex; align-items: start; gap: 25px; padding: 32px; border: 1px solid #d9e2d2; border-radius: 18px; background: #eef4e8; color: #1c3727; transition: transform .25s, box-shadow .25s, border-color .25s; }
.tw-hosting-platform:hover { transform: translateY(-3px); border-color: #99b984; box-shadow: 0 15px 35px #254f2810; }
.tw-hosting-platform>img { flex-shrink: 0; width: 64px; height: 64px; object-fit: contain; border-radius: 14px; }
.tw-hosting-staticweb { background: #edf2f3; border-color: #d4e1df; }
.tw-hosting-staticweb>img { border-radius: 50%; background: #080808; }
.tw-hosting-platform>div { min-width: 0; }
.tw-hosting-platform div>span { font-size: 9px; letter-spacing: .1em; color: #66845b; }
.tw-hosting-platform h3 { margin-top: 10px; font-size: 27px; }
.tw-hosting-platform p { margin-top: 12px; font-size: 13px; color: #637961; line-height: 1.8; }
.tw-hosting-platform strong { display: inline-flex; gap: 15px; margin-top: 24px; font-size: 12px; font-weight: 650; }
.tw-hosting-platform strong b { transition: transform .2s; }
.tw-hosting-platform:hover strong b { transform: translate(2px,-2px); }
/* Use the screen width in portals; constrain cells instead of forcing tables wider. */
.customer-app .portal-v2, .customer-app .invoice-page, .admin-shell.shell { width: min(1560px,calc(100% - 64px)); max-width: 1560px; }
.admin-shell { grid-template-columns: 185px minmax(0,1fr); gap: 28px; }
.admin-content { min-width: 0; }
.admin-content td { overflow-wrap: anywhere; }
.admin-content .list-filters { flex-wrap: wrap; }
.tw-admin-tickets-table { table-layout: fixed; width: 100%; min-width: 0; }
.tw-admin-tickets-table th,.tw-admin-tickets-table td { padding: 15px 10px; font-size: 11px; }
.tw-admin-tickets-table th { font-size: 9px; letter-spacing: .035em; }
.tw-admin-tickets-table .sort-link { display: inline; white-space: normal; overflow-wrap: anywhere; }
.tw-admin-tickets-table .tw-ticket-number { width: 11%; }
.tw-admin-tickets-table .tw-ticket-customer { width: 18%; }
.tw-admin-tickets-table .tw-ticket-department { width: 9%; }
.tw-admin-tickets-table .tw-ticket-subject { width: 23%; }
.tw-admin-tickets-table .tw-ticket-priority { width: 7%; }
.tw-admin-tickets-table .tw-ticket-messages { width: 6%; }
.tw-admin-tickets-table .tw-ticket-updated { width: 10%; }
.tw-admin-tickets-table .tw-ticket-status { width: 9%; }
.tw-admin-tickets-table .tw-ticket-action { width: 7%; }
.tw-admin-tickets-table td:nth-child(1),.tw-admin-tickets-table td:nth-child(4) { line-height: 1.6; }
.tw-admin-tickets-table .subline { overflow-wrap: anywhere; }
.tw-admin-tickets-table .badge { white-space: normal; text-align: center; }
.tw-admin-tickets-table .table-link { white-space: normal; }
@keyframes tw-turbine-turn { to { transform: rotate(360deg); } }
@media(max-width:1000px) { .admin-shell { grid-template-columns: 160px minmax(0,1fr); gap: 20px; } .tw-hosting-platform { padding: 24px; gap: 18px; } .tw-hosting-platform h3 { font-size: 24px; } }
@media(max-width:900px) { .admin-shell { grid-template-columns: minmax(0,1fr); } }
@media(max-width:760px) { .tw-hosting-platform-grid { grid-template-columns: 1fr; } .tw-hosting-platforms { padding-bottom: 55px; } .customer-app .portal-v2,.customer-app .invoice-page,.admin-shell.shell { width: calc(100% - 32px); } .tw-home-turbine { width: 290px; height: 290px; } }
@media(max-width:600px) { .tw-hosting-platform { gap: 18px; padding: 24px; } .tw-hosting-platform>img { width: 48px; height: 48px; } .tw-hosting-platform h3 { font-size: 24px; } .tw-admin-tickets-table { min-width: 760px; } }
@media(prefers-reduced-motion:reduce) { .tw-home-rotor { animation: none; } .tw-home-product:hover,.tw-hosting-platform:hover { transform: none; } }