*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    /* Transparent on purpose — `html` above already paints var(--bg), so this
       is visually identical, and it is what lets the fixed .tg-backdrop layer
       show at all. A negative z-index child of <body> paints BEFORE body's own
       background in the CSS painting order, so an opaque background here hides
       the backdrop completely while leaving it present and animating. */
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--lh-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button {
    cursor: pointer;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
}

::selection {
    background: var(--accent-strong);
    color: var(--text-strong);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: none;
}

.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wrap,
.wrap-wide,
.wrap-narrow,
.wrap-admin {
    width: var(--wrap-wide);
    margin-inline: auto;
}

.wrap {
    max-width: 1160px;
}

.wrap-narrow {
    max-width: 760px;
}

.wrap-admin {
    max-width: 1580px;
}

.is-hidden,
[hidden] {
    display: none !important;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: max-content;
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.brand-wordmark {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.inline-link,
.text-link {
    color: var(--accent-link);
    font-weight: 600;
}

.inline-link {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
    text-underline-offset: 3px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.text-link span {
    transition: transform var(--dur-fast) var(--ease-out-soft);
}

.text-link:hover span {
    transform: translateX(3px);
}

@media (max-width: 720px) {
    :root {
        --wrap: min(100% - 32px, 1160px);
        --wrap-wide: min(100% - 32px, 1320px);
        --wrap-narrow: min(100% - 32px, 760px);
        --wrap-admin: min(100% - 24px, 1640px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* ===== BEGIN restored-from-HEAD (redesign drop recovery) ===== */
/* Rules that existed before the redesign and that the app still depends on:
   every class targeted here had NO styling at all afterwards, so the markup
   was rendering unstyled. Appended so they win on equal specificity.
   Delete everything between the BEGIN/END markers to undo the restoration. */
.badge-premium {
color: #231705; background: linear-gradient(135deg, #ffe39a, #ffb84f);
}
.promo-banner {
width: min(calc(100% - 28px), 1280px);
margin: 24px auto 0;
border-radius: 14px;
}
/* Authenticated / utility surfaces inherit the same shell.
   They must NOT re-apply an opaque colour to <body>: `html` already paints
   var(--bg), and a background here paints over the negative-z .tg-backdrop
   layer, which hid the animated backdrop on every legal, sign-in, checkout and
   phone-pairing page. Same trap as the base `body` rule above. */
.utility-page, .legal-page {
background-color: transparent;
}
.utility-panel, .utility-aside, .auth-card, .console-shell, .legal-article, .legal-toc {
border-color: var(--line);
border-radius: 22px;
background: color-mix(in srgb, var(--surface) 94%, transparent);
box-shadow: 0 25px 70px rgba(0,0,0,.1);
}
.capability-card .badge {
align-self: flex-start; margin-top: 18px;
}
@media (max-width: 768px) {
    .site-nav.is-scrolled {
    padding: 0;
    }
    .promo-banner {
    width: calc(100% - 16px);
    margin-top: 16px;
    padding: 12px;
    gap: 10px;
    }
    .promo-banner-cta {
    width: 100%;
    }
    .utility-grid {
    gap: 0;
    }
    .utility-card {
    padding: 20px;
    gap: 18px;
    border-radius: 18px;
    }
    .utility-card .mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 14px;
    }
    .utility-card .mode-switch-button {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: .88rem;
    }
    .legal-hero,
    .legal-content,
    .legal-rail,
    .legal-toc,
    .legal-article {
    border-radius: 16px;
    }
    body.is-app-shell .portal-grid,
    body[data-page='account'].is-app-shell .portal-grid,
    body[data-page='admin'].is-app-shell .admin-wrap {
    width: calc(100% - 24px);
    }
    .console-view-head,
    .console-view-actions,
    .admin-overview-actions,
    .pulse-header-actions {
    align-items: stretch;
    }
    .console-view-actions,
    .admin-overview-actions,
    .pulse-header-actions,
    .form-actions,
    .item-actions {
    width: 100%;
    }
    body[data-page='account'] .customer-catalog-view .catalog-panel,
    body[data-page='account'] .customer-support-view .support-panel--feedback {
    min-height: 0;
    }
    body[data-page='account'] .portal-item-card,
    body[data-page='account'] .customer-whatsnew-view .news-item {
    padding: 15px;
    }
    body[data-page='admin'] .admin-revenue-view,
    body[data-page='admin'] :is(.admin-promos-view, .admin-announcements-view, .admin-releases-view, .admin-staff-view),
    body[data-page='admin'] .admin-support-view {
    grid-template-columns: 1fr;
    }
    body[data-page='admin'] :is(.admin-promos-view, .admin-announcements-view, .admin-releases-view, .admin-staff-view, .admin-support-view, .admin-revenue-view) > * {
    grid-column: 1;
    }
    body[data-page='admin'] .pulse-control-bar .range-tabs,
    body[data-page='admin'] .pulse-compare-field,
    body[data-page='admin'] .pulse-metric-field {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    }
    body[data-page='admin'] .pulse-trend-card .chart-host,
    body[data-page='admin'] :is(.admin-reports-view, .admin-revenue-view) .chart-host {
    min-height: 220px;
    }
    .portal-table,
    .portal-table.compact {
    min-width: 620px;
    }
}
@media (max-width: 420px) {
    .utility-card,
    .legal-hero,
    .legal-content,
    .legal-rail {
    padding: 16px;
    }
    .utility-card .mode-switch-button {
    font-size: .82rem;
    }
    .portal-appbar-row,
    body[data-page='account'] .portal-appbar-row,
    body[data-page='admin'] .portal-appbar-row,
    body.is-app-shell .portal-grid,
    body[data-page='account'].is-app-shell .portal-grid,
    body[data-page='admin'].is-app-shell .admin-wrap {
    width: calc(100% - 20px);
    }
}
/* ===== END restored-from-HEAD ===== */