:root {
    --pf-yellow: #ffe600;
    --pf-pink: #ff4daf;
    --pf-blue: #184bff;
    --pf-black: #090909;
    --pf-white: #fff;
    --pf-paper: #fffdf2;
    --pf-muted: #4f4f4f;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--pf-black);
    background: var(--pf-yellow);
}
* { box-sizing: border-box; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; color: #000; background: #fff; border: 3px solid #000; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
html { scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--pf-black); background: var(--pf-yellow); }
a { color: var(--pf-blue); font-weight: 750; text-underline-offset: 3px; }
a:hover { color: #082cae; }
input, textarea, button, select { font: inherit; }
button, .button-link, .pf-button {
    display: inline-block;
    padding: 12px 17px;
    color: var(--pf-black);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--pf-pink);
    border: 3px solid var(--pf-black);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--pf-black);
    cursor: pointer;
}
button:hover, .button-link:hover, .pf-button:hover { color: var(--pf-black); background: var(--pf-yellow); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pf-black); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 4px solid var(--pf-blue); outline-offset: 3px; }
input, textarea, select {
    width: min(100%, 540px);
    padding: 11px 12px;
    color: var(--pf-black);
    background: var(--pf-white);
    border: 3px solid var(--pf-black);
    border-radius: 0;
}
input[type="radio"], input[type="checkbox"] { width: auto; accent-color: var(--pf-blue); }
label { color: var(--pf-black); font-weight: 800; }
code, pre { font-family: "Courier New", Courier, monospace; }
code { padding: 2px 5px; color: var(--pf-black); background: var(--pf-yellow); border: 1px solid var(--pf-black); overflow-wrap: anywhere; }
pre { padding: 18px; overflow-x: auto; color: var(--pf-white); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: var(--pf-black); border: 4px solid var(--pf-blue); }
.muted { color: var(--pf-muted); }
.flash, .errors {
    padding: 14px 17px;
    color: var(--pf-black);
    background: var(--pf-pink);
    border: 3px solid var(--pf-black);
    box-shadow: 5px 5px 0 var(--pf-black);
}
.errors { padding-left: 34px; }
.table-wrap { overflow-x: auto; margin-top: 26px; border: 4px solid var(--pf-black); background: var(--pf-white); box-shadow: 7px 7px 0 var(--pf-black); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 14px; border-right: 2px solid var(--pf-black); border-bottom: 2px solid var(--pf-black); text-align: left; vertical-align: top; white-space: nowrap; }
th:last-child, td:last-child { border-right: 0; }
tr:last-child td { border-bottom: 0; }
th { color: var(--pf-white); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; background: var(--pf-black); }
tbody tr:nth-child(even) { background: #fff6bd; }
fieldset { margin: 20px 0; padding: 18px; border: 3px solid var(--pf-black); }
legend { padding: 0 8px; font-weight: 900; }
.totp-qr { display: inline-block; padding: 12px; background: var(--pf-white); border: 4px solid var(--pf-black); box-shadow: 5px 5px 0 var(--pf-blue); }
.totp-qr canvas, .totp-qr img { display: block; max-width: 100%; height: auto; }

/* Public site */
.public-shell.documentation-shell { background: var(--pf-white); }
.public-shell.ticket-link-shell { background: var(--pf-paper); }
.public-shell.ticket-link-shell .public-main > h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .9; letter-spacing: -.06em; }
.public-shell .site-header { color: var(--pf-black); background: var(--pf-white); border-bottom: 5px solid var(--pf-black); }
.public-shell .nav-wrap { width: min(1300px, calc(100% - 34px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 30px; }
.public-shell .brand { color: var(--pf-black); font-size: 28px; font-weight: 1000; letter-spacing: -.08em; text-decoration: none; text-transform: uppercase; }
.public-shell .brand-mark { color: var(--pf-blue); }
.public-shell .primary-nav { display: flex; flex: 1; align-items: center; gap: 22px; scrollbar-width: none; }
.public-shell .primary-nav::-webkit-scrollbar { display: none; }
.public-shell .primary-nav a, .public-shell .account-links a { color: var(--pf-black); font-size: .7rem; font-weight: 950; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.public-shell .primary-nav a[aria-current="page"], .public-shell .primary-nav a:hover { color: var(--pf-blue); }
.public-shell .account-links { display: flex; align-items: center; gap: 16px; }
.public-shell .account-links .register-link { padding: 10px 13px; color: var(--pf-black); background: var(--pf-pink); border: 3px solid var(--pf-black); box-shadow: 4px 4px 0 var(--pf-black); }
.public-shell .public-main { --pf-full-bleed-margin: min(-17px, calc((1300px - 100vw) / 2)); width: min(1300px, calc(100% - 34px)); min-height: calc(100vh - 165px); margin: 0 auto; padding: 58px 0 80px; }
.public-shell .public-main > h1:first-child { margin-top: 0; }
.public-shell h1, .public-shell h2, .public-shell h3 { color: var(--pf-black); }
.public-shell .public-main > h1 { max-width: 1050px; margin-bottom: 22px; font-size: clamp(3.2rem, 8vw, 7rem); line-height: .8; letter-spacing: -.085em; text-transform: uppercase; }
.public-shell .public-main > .lead { max-width: 800px; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 750; line-height: 1.55; }
.public-shell .public-main > section:not(.shock-section) { margin-top: 48px; padding: 28px; background: var(--pf-white); border: 4px solid var(--pf-black); box-shadow: 7px 7px 0 var(--pf-black); }
.public-shell .public-main > section:not(.shock-section) h2 { margin-top: 0; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.05em; text-transform: uppercase; }
.public-shell .public-main p, .public-shell .public-main li { max-width: 850px; font-size: 1rem; line-height: 1.65; }
.public-shell .public-main > form:not(.inline), .public-shell .public-main > div > form:not(.inline) { width: min(100%, 650px); margin: 28px 0; padding: 25px; background: var(--pf-white); border: 4px solid var(--pf-black); box-shadow: 7px 7px 0 var(--pf-black); }
.public-shell .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.public-shell .card { padding: 22px; background: var(--pf-white); border: 4px solid var(--pf-black); box-shadow: 5px 5px 0 var(--pf-black); }
.public-shell .site-footer { color: var(--pf-white); background: var(--pf-black); border-top: 5px solid var(--pf-black); }
.public-shell .footer-wrap { width: min(1300px, calc(100% - 34px)); margin: 0 auto; padding: 30px 0; display: flex; justify-content: space-between; gap: 24px; }
.public-shell .footer-wrap p { margin: 0; color: var(--pf-white); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.public-shell .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.public-shell .footer-links a { color: var(--pf-white); font-size: .68rem; text-transform: uppercase; }

/* Selected homepage direction */
.shock-home { margin-top: -24px; }
.shock-kicker { display: inline-block; padding: 8px 11px; color: var(--pf-white); background: var(--pf-black); font: 800 10px/1 "Courier New", monospace; transform: rotate(-2deg); }
.shock-hero-title { margin: 28px 0 20px; font-size: clamp(66px, 12.5vw, 180px); font-weight: 1000; line-height: .69; letter-spacing: -.105em; text-transform: uppercase; }
.shock-hero-title span { color: var(--pf-blue); -webkit-text-stroke: 3px var(--pf-black); }
.shock-hero-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 18px; }
.shock-pitch, .shock-route-box { border: 5px solid var(--pf-black); box-shadow: 9px 9px 0 var(--pf-black); }
.shock-pitch { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; background: var(--pf-white); }
.shock-pitch { padding: 25px; }
.public-shell .shock-pitch p { max-width: 750px; margin: 0; font-size: 21px; font-weight: 800; line-height: 1.35; }
.shock-pitch .button-link { padding: 15px 18px; font-size: 11px; border-width: 4px; box-shadow: 5px 5px 0 var(--pf-black); }
.shock-route-box { padding: 22px; color: var(--pf-white); background: var(--pf-blue); transform: rotate(1deg); }
.shock-route-box h2 { margin: 0; color: var(--pf-white); font-size: 38px; line-height: .85; text-transform: uppercase; }
.public-shell .shock-route-box ul { list-style: none; padding: 0; margin: 25px 0 0; font: 800 11px/1.8 "Courier New", monospace; }
.public-shell .shock-route-box li { color: var(--pf-white); font: inherit; }
.shock-strip { margin: 55px var(--pf-full-bleed-margin) 0; padding: 12px max(17px, calc((100vw - 1300px) / 2)); display: flex; justify-content: space-around; gap: 30px; overflow: hidden; color: var(--pf-black); background: var(--pf-pink); border-block: 5px solid var(--pf-black); font-weight: 1000; text-transform: uppercase; white-space: nowrap; }
.shock-section { margin: 0 var(--pf-full-bleed-margin); padding: 76px max(17px, calc((100vw - 1300px) / 2)); border-bottom: 5px solid var(--pf-black); }
.shock-section-head { display: grid; grid-template-columns: .5fr 1.5fr; gap: 30px; margin-bottom: 42px; }
.shock-section-head small { font: 900 .7rem/1 "Courier New", monospace; }
.shock-section-head h2 { margin: 0; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .75; letter-spacing: -.09em; text-transform: uppercase; }
.shock-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.shock-plan { min-height: 300px; padding: 20px; display: flex; flex-direction: column; background: var(--pf-white); border: 5px solid var(--pf-black); box-shadow: 7px 7px 0 var(--pf-black); }
.shock-plan.featured { background: var(--pf-pink); transform: rotate(-1.25deg); }
.shock-plan .plan-code { font: 800 .68rem/1 "Courier New", monospace; }
.shock-plan h3 { margin: 40px 0; font-size: 34px; line-height: .85; }
.shock-plan .plan-price { margin-top: auto; font-size: 35px; font-weight: 1000; }
.public-shell .shock-plan p { margin-bottom: 0; font: 700 11px/1.5 "Courier New", monospace; }
.shock-usage { margin-top: 25px; padding: 15px; color: var(--pf-white); background: var(--pf-blue); border: 4px solid var(--pf-black); text-align: center; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.shock-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.shock-step { padding: 30px; background: var(--pf-white); border: 5px solid var(--pf-black); }
.shock-step + .shock-step { border-left: 0; }
.shock-step b { display: block; color: var(--pf-blue); font-size: 5rem; line-height: .7; }
.shock-step h3 { font-size: 1.5rem; text-transform: uppercase; }
.public-shell .shock-step p { font-weight: 700; line-height: 1.5; }
.shock-protocols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.shock-protocol { padding: 30px; color: var(--pf-black); background: var(--pf-pink); border: 5px solid var(--pf-black); box-shadow: 8px 8px 0 var(--pf-black); }
.shock-protocol h3 { margin: 0; color: inherit; font-size: 84px; line-height: .7; letter-spacing: -.08em; }
.public-shell .shock-protocol p { color: inherit; font-weight: 700; line-height: 1.6; }
.shock-final { text-align: center; background: var(--pf-pink); }
.shock-final h2 { margin: 0 0 30px; font-size: clamp(3.7rem, 10vw, 9rem); line-height: .7; letter-spacing: -.1em; text-transform: uppercase; }
.shock-final .button-link { background: var(--pf-yellow); }

/* Customer portal: same identity, calmer working surface */
.portal-shell { background: var(--pf-paper); }
.portal-header { background: var(--pf-white); border-bottom: 5px solid var(--pf-black); }
.portal-header-inner { width: min(1300px, calc(100% - 34px)); margin: 0 auto; padding: 14px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 12px 24px; align-items: center; }
.portal-brand { color: var(--pf-black); font-size: 1.45rem; font-weight: 1000; letter-spacing: -.07em; text-decoration: none; text-transform: uppercase; }
.portal-brand span { color: var(--pf-blue); }
.portal-nav { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 7px; width: 100%; padding-top: 10px; overflow-x: auto; border-top: 2px solid var(--pf-black); scrollbar-width: none; }
.portal-nav::-webkit-scrollbar { display: none; }
.portal-nav a { flex: 0 0 auto; padding: 8px 9px; color: var(--pf-black); font-size: .63rem; font-weight: 950; text-decoration: none; text-transform: uppercase; }
.portal-nav a[aria-current="page"], .portal-nav a:hover { color: var(--pf-white); background: var(--pf-blue); }
.portal-account { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.portal-email { max-width: 220px; overflow: hidden; font: 700 .67rem/1.3 "Courier New", monospace; text-overflow: ellipsis; }
.portal-account button { padding: 8px 11px; font-size: .62rem; box-shadow: 3px 3px 0 var(--pf-black); }
.portal-main { width: min(1180px, calc(100% - 34px)); min-height: calc(100vh - 112px); margin: 0 auto; padding: 45px 0 75px; }
.portal-main > h1 { margin: 0 0 25px; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.portal-main h2 { margin: 0 0 15px; font-size: clamp(1.5rem, 3vw, 2.45rem); letter-spacing: -.045em; text-transform: uppercase; }
.portal-main h3 { text-transform: uppercase; }
.portal-main p, .portal-main li { line-height: 1.6; }
.portal-main > section, .portal-main .message { margin: 26px 0; padding: 23px; background: var(--pf-white); border: 4px solid var(--pf-black); box-shadow: 6px 6px 0 var(--pf-black); }
.portal-main > form:not(.inline) { width: min(100%, 850px); margin: 25px 0; padding: 24px; background: var(--pf-white); border: 4px solid var(--pf-black); box-shadow: 6px 6px 0 var(--pf-black); }
.portal-main .message header { margin: -23px -23px 18px; padding: 12px 18px; color: var(--pf-white); background: var(--pf-blue); border-bottom: 3px solid var(--pf-black); }
.portal-main form.inline { display: inline; }
.portal-main .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.portal-main .card { padding: 20px; background: var(--pf-yellow); border: 4px solid var(--pf-black); box-shadow: 5px 5px 0 var(--pf-black); }
.portal-main .card strong { display: block; color: var(--pf-blue); font-size: 1.8rem; }
.info-tip { position: relative; display: inline-flex; margin-left: 3px; vertical-align: middle; }
.info-tip-button { width: 20px; height: 20px; padding: 0; display: inline-grid; place-items: center; color: var(--pf-white); font: 900 12px/1 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; background: var(--pf-blue); border: 2px solid var(--pf-black); border-radius: 50%; box-shadow: none; }
.info-tip-button:hover { color: var(--pf-black); background: var(--pf-yellow); transform: none; box-shadow: none; }
.info-tip-panel { position: absolute; z-index: 5; right: -10px; bottom: calc(100% + 9px); width: min(330px, calc(100vw - 34px)); padding: 11px 13px; visibility: hidden; opacity: 0; color: var(--pf-white); font-size: .76rem; font-weight: 700; line-height: 1.45; background: var(--pf-black); border: 3px solid var(--pf-blue); box-shadow: 4px 4px 0 var(--pf-pink); pointer-events: none; transition: opacity .12s ease;
}
.info-tip:hover .info-tip-panel, .info-tip.is-open .info-tip-panel { visibility: visible; opacity: 1; }
.usage-filter { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) auto; gap: 12px; align-items: end; }
.usage-filter .usage-field { min-width: 0; }
.usage-filter .usage-field label { display: block; margin-bottom: 6px; }
.usage-filter .usage-field input, .usage-filter .usage-field select { width: 100%; }
.usage-filter .usage-actions { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; white-space: nowrap; }
.pagination { display: flex; justify-content: space-between; margin-top: 20px; }
.bandwidth-chart { position: relative; margin: 22px 0; }
.bandwidth-chart-svg { display: block; width: 100%; height: auto; color: var(--pf-black); background: var(--pf-paper); border: 4px solid var(--pf-black); }
.bandwidth-chart-svg:focus-visible { outline: 4px solid var(--pf-blue); outline-offset: 3px; }
.chart-grid { stroke: #c9c5b1; stroke-width: 1; stroke-dasharray: 4 5; }
.chart-axis { stroke: var(--pf-black); stroke-width: 2; }
.chart-axis-label, .chart-axis-title, .chart-legend { fill: var(--pf-black); font-family: Arial, Helvetica, sans-serif; }
.chart-axis-label { font-size: 11px; font-weight: 750; }
.chart-axis-title { font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.chart-legend { font-size: 11px; font-weight: 850; }
.chart-legend-line, .chart-series { fill: none; stroke-width: 3; }
.chart-series { vector-effect: non-scaling-stroke; }
.chart-inbound { stroke: var(--pf-blue); }
.chart-outbound { stroke: var(--pf-pink); }
.chart-combined { stroke: var(--pf-black); }
.chart-sample-hit { fill: transparent; cursor: crosshair; outline: none; }
.chart-hover-marker { pointer-events: none; }
.chart-hover-line { stroke: var(--pf-black); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-hover-inbound { fill: var(--pf-blue); stroke: var(--pf-white); stroke-width: 2; }
.chart-hover-outbound { fill: var(--pf-pink); stroke: var(--pf-white); stroke-width: 2; }
.chart-hover-combined { fill: var(--pf-black); stroke: var(--pf-white); stroke-width: 2; }
.chart-tooltip { position: absolute; z-index: 3; width: min(300px, calc(100% - 16px)); padding: 13px 15px; display: grid; grid-template-columns: 1fr auto; gap: 5px 15px; color: var(--pf-white); background: var(--pf-black); border: 3px solid var(--pf-blue); box-shadow: 5px 5px 0 var(--pf-pink); pointer-events: none; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong, .chart-tooltip-heading { grid-column: 1 / -1; }
.chart-tooltip strong { margin-bottom: 4px; font-size: .84rem; }
.chart-tooltip-heading { margin-top: 6px; color: var(--pf-yellow); font-size: .65rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.chart-tooltip span { font-size: .72rem; }
.chart-tooltip b { font-weight: 800; }
.breakable { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.sessions-table, .audit-table { table-layout: fixed; }
.sessions-table th, .sessions-table td, .audit-table th, .audit-table td { white-space: normal; overflow-wrap: anywhere; }
.sessions-table th:nth-child(1) { width: 8%; }
.sessions-table th:nth-child(2) { width: 13%; }
.sessions-table th:nth-child(3) { width: 31%; }
.sessions-table th:nth-child(4), .sessions-table th:nth-child(5) { width: 18%; }
.sessions-table th:nth-child(6) { width: 12%; }
.sessions-table button { max-width: 100%; overflow-wrap: anywhere; }
.audit-table th:nth-child(1) { width: 22%; }
.audit-table th:nth-child(2) { width: 34%; }
.audit-table th:nth-child(3) { width: 14%; }
.audit-table th:nth-child(4) { width: 30%; }

.policy-document { width: min(100%, 980px); padding: clamp(24px, 4vw, 48px); background: var(--pf-white); border: 4px solid var(--pf-black); box-shadow: 8px 8px 0 var(--pf-black); }
.public-shell .policy-document h1 { margin: 0 0 10px; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.public-shell .policy-document h2 { margin: 38px 0 12px; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.035em; text-transform: none; }
.public-shell .policy-document p { max-width: none; }
.public-shell .policy-document .policy-version { margin: 0 0 36px; font-family: "Courier New", Courier, monospace; font-size: .82rem; font-weight: 800; text-transform: uppercase; }

@media (max-width: 720px) {
    .responsive-table, .responsive-table tbody, .sessions-table, .audit-table, .sessions-table tbody, .audit-table tbody { display: block; width: 100%; }
    .responsive-table, .sessions-table, .audit-table { table-layout: auto; }
    .responsive-table thead, .sessions-table thead, .audit-table thead { display: none; }
    .responsive-table tr, .sessions-table tr, .audit-table tr { display: block; border-bottom: 4px solid var(--pf-black); }
    .responsive-table tr:last-child, .sessions-table tr:last-child, .audit-table tr:last-child { border-bottom: 0; }
    .responsive-table td, .sessions-table td, .audit-table td {
        width: auto;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--pf-black);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .responsive-table td:last-child, .sessions-table td:last-child, .audit-table td:last-child { border-bottom: 0; }
    .responsive-table td::before, .sessions-table td::before, .audit-table td::before {
        content: attr(data-label);
        font-size: .65rem;
        font-weight: 950;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    .responsive-table .responsive-table-empty, .sessions-table .responsive-table-empty, .audit-table .responsive-table-empty { display: block; }
    .responsive-table .responsive-table-empty::before, .sessions-table .responsive-table-empty::before, .audit-table .responsive-table-empty::before { content: none; }
    .sessions-table button { overflow-wrap: normal; }
}

@media (max-width: 900px) {
    .public-shell .nav-wrap { padding: 14px 0; flex-wrap: wrap; gap: 14px; }
    .public-shell .primary-nav { order: 3; flex: 0 0 100%; width: 100%; overflow-x: auto; }
    .public-shell .account-links { margin-left: auto; }
    .public-shell .cards, .shock-plans { grid-template-columns: repeat(2, 1fr); }
    .shock-hero-grid, .shock-section-head { grid-template-columns: 1fr; }
    .shock-route-box { max-width: 480px; }
    .shock-steps { grid-template-columns: 1fr; }
    .shock-protocols { grid-template-columns: 1fr; }
    .shock-step + .shock-step { border-left: 5px solid var(--pf-black); border-top: 0; }
    .portal-header-inner { grid-template-columns: 1fr auto; }
    .portal-account { grid-column: 2; }
    .usage-filter { grid-template-columns: 1fr 1fr; }
    .usage-filter .usage-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .public-shell .nav-wrap, .public-shell .public-main, .public-shell .footer-wrap, .portal-header-inner, .portal-main { width: min(100% - 26px, 1300px); }
    .public-shell .nav-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .public-shell .brand { min-width: 0; font-size: 22px; }
    .public-shell .primary-nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-top: 10px; overflow-x: visible; border-top: 2px solid var(--pf-black); }
    .public-shell .primary-nav a { min-width: 0; padding: 6px 2px; text-align: center; }
    .public-shell .account-links { min-width: 0; gap: 8px; }
    .public-shell .account-links a { font-size: .59rem; }
    .public-shell .account-links .register-link { max-width: 100px; padding: 7px 8px; text-align: center; }
    .public-shell .cards, .shock-plans, .shock-protocols, .shock-pitch { grid-template-columns: 1fr; }
    .shock-home { margin-top: 0; }
    .shock-hero-title { font-size: 17vw; line-height: .74; letter-spacing: -.08em; overflow-wrap: anywhere; }
    .shock-pitch { min-width: 0; gap: 20px; padding: 20px; }
    .public-shell .shock-pitch p { min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
    .shock-pitch .button-link { max-width: 100%; text-align: center; }
    .public-shell .public-main > h1 { font-size: clamp(2.35rem, 12vw, 2.8rem); line-height: .9; overflow-wrap: anywhere; }
    .shock-plan.featured { transform: none; }
    .shock-strip { justify-content: flex-start; }
    .public-shell .footer-wrap, .portal-account { align-items: flex-start; flex-direction: column; }
    .portal-header-inner { grid-template-columns: 1fr auto; }
    .portal-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; overflow-x: visible; }
    .portal-nav a { min-width: 0; padding: 7px 2px; text-align: center; }
    .portal-email { display: none; }
    .usage-filter { grid-template-columns: 1fr; }
    .usage-filter .usage-actions { grid-column: 1; flex-wrap: wrap; }
    th, td { padding: 11px; }
}