/* Wersja pliku: 0.0.11 */

:root {
    color-scheme: light;
    --te8-canvas: #f6f8fb;
    --te8-surface: #ffffff;
    --te8-surface-soft: #eef3f8;
    --te8-surface-accent: #e7f6f2;
    --te8-ink: #14283d;
    --te8-ink-soft: #526579;
    --te8-ink-muted: #586b7e;
    --te8-line: #dce4ec;
    --te8-line-strong: #c6d3df;
    --te8-brand: #176b63;
    --te8-brand-strong: #10544e;
    --te8-brand-soft: #d9f1eb;
    --te8-accent: #e58b4a;
    --te8-accent-soft: #fff1e5;
    --te8-info: #2368a2;
    --te8-info-soft: #e8f2fb;
    --te8-success: #247454;
    --te8-success-soft: #e4f4ec;
    --te8-warning: #8a6218;
    --te8-warning-soft: #fff4d8;
    --te8-danger: #a33d47;
    --te8-danger-soft: #fbeaec;
    --te8-focus: #167e74;
    --te8-shadow-sm: 0 0.35rem 1.15rem rgb(25 53 78 / 7%);
    --te8-shadow-md: 0 1.2rem 3rem rgb(25 53 78 / 11%);
    --te8-radius-sm: 0.65rem;
    --te8-radius-md: 1rem;
    --te8-radius-lg: 1.5rem;
    --te8-page: 74rem;
    --te8-reading: 46rem;
    --te8-header-height: 4.75rem;
    --te8-transition: 160ms ease;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

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

[hidden] {
    display: none !important;
}

html {
    min-width: 20rem;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--te8-header-height) + 1rem);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--te8-ink);
    background:
        radial-gradient(circle at 12% 6%, rgb(217 241 235 / 70%), transparent 22rem),
        radial-gradient(circle at 94% 24%, rgb(255 241 229 / 70%), transparent 24rem),
        var(--te8-canvas);
    line-height: 1.6;
}

body[data-surface="admin"],
body[data-surface="account"],
body[data-surface="checkout"] {
    background: var(--te8-canvas);
}

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

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

button,
[type="button"],
[type="submit"] {
    cursor: pointer;
}

a {
    color: var(--te8-brand-strong);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--te8-brand);
}

:focus-visible {
    outline: 0.2rem solid var(--te8-focus);
    outline-offset: 0.18rem;
}

::selection {
    color: var(--te8-ink);
    background: var(--te8-brand-soft);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    line-height: 1.17;
    text-wrap: balance;
}

h1 {
    margin-bottom: 1.25rem;
    font-size: clamp(2.35rem, 6vw, 4.8rem);
    letter-spacing: -0.045em;
}

h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.85rem, 4vw, 3rem);
    letter-spacing: -0.028em;
}

h3 {
    margin-bottom: 0.65rem;
    font-size: clamp(1.12rem, 2vw, 1.4rem);
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child {
    margin-bottom: 0;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--te8-radius-sm);
    color: #fff;
    background: var(--te8-brand-strong);
    box-shadow: var(--te8-shadow-sm);
    transform: translateY(-160%);
    transition: transform var(--te8-transition);
}

.skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

.container {
    width: min(calc(100% - 2rem), var(--te8-page));
    margin-inline: auto;
}

.container--reading {
    width: min(calc(100% - 2rem), var(--te8-reading));
}

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    min-height: var(--te8-header-height);
    border-bottom: 1px solid rgb(220 228 236 / 78%);
    background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(1rem);
}

.site-header__inner {
    display: flex;
    min-height: var(--te8-header-height);
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--te8-ink);
    font-size: 1.08rem;
    font-weight: 760;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.brand:hover {
    color: var(--te8-brand-strong);
}

.brand__mark {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: 0.8rem;
    color: #fff;
    background: linear-gradient(140deg, var(--te8-brand), var(--te8-brand-strong));
    box-shadow: 0 0.4rem 1rem rgb(16 84 78 / 22%);
    font-size: 0.83rem;
    letter-spacing: 0;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.site-nav__link,
.language-switcher__link {
    display: inline-flex;
    min-height: 2.6rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.75rem;
    border-radius: 0.7rem;
    color: var(--te8-ink-soft);
    font-size: 0.94rem;
    font-weight: 650;
    text-decoration: none;
    transition: color var(--te8-transition), background-color var(--te8-transition);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"],
.language-switcher__link:hover,
.language-switcher__link[aria-current="true"] {
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
}

.header-actions,
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.help-shortcut {
    min-width: 2.6rem;
    font-size: 1.05rem;
}

.account-menu {
    position: relative;
}

.account-menu > summary {
    list-style: none;
    cursor: pointer;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-menu[open] > summary {
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
}

.account-menu__popover {
    position: absolute;
    z-index: 120;
    top: calc(100% + 0.6rem);
    right: 0;
    display: grid;
    min-width: 13rem;
    overflow: hidden;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-md);
    background: var(--te8-surface);
    box-shadow: var(--te8-shadow-md);
}

.account-menu__popover form {
    margin: 0;
}

.account-menu__link,
.account-menu__action {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border: 0;
    color: var(--te8-ink-soft);
    background: var(--te8-surface);
    font-size: 0.92rem;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
}

.account-menu__action {
    border-top: 1px solid var(--te8-line);
}

.account-menu__link:hover,
.account-menu__action:hover {
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
}

.language-switcher {
    padding-inline-start: 0.45rem;
    border-inline-start: 1px solid var(--te8-line);
}

.language-switcher__link {
    min-width: 2.65rem;
    padding-inline: 0.55rem;
    text-transform: uppercase;
}

.nav-toggle {
    display: none;
    min-width: 2.8rem;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--te8-line);
    border-radius: 0.75rem;
    background: var(--te8-surface);
}

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 10vw, 8.5rem) clamp(4rem, 8vw, 7rem);
}

.hero::before {
    position: absolute;
    inset: 10% auto auto 46%;
    width: 42rem;
    height: 42rem;
    border: 1px solid rgb(23 107 99 / 8%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.hero__grid {
    position: relative;
    display: grid;
    align-items: center;
    gap: clamp(2.5rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr);
}

.hero__copy {
    max-width: 42rem;
}

.hero__lead {
    max-width: 39rem;
    margin-bottom: 1.8rem;
    color: var(--te8-ink-soft);
    font-size: clamp(1.07rem, 2vw, 1.27rem);
    text-wrap: pretty;
}

.hero__actions,
.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.hero__visual {
    position: relative;
    border: 1px solid rgb(198 211 223 / 78%);
    border-radius: 2rem;
    background: rgb(255 255 255 / 70%);
    box-shadow: var(--te8-shadow-md);
    transform: rotate(1.2deg);
}

.hero__visual img {
    width: 100%;
    height: auto;
}

.eyebrow,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    border: 1px solid rgb(23 107 99 / 13%);
    border-radius: 999px;
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
    font-size: 0.82rem;
    font-weight: 760;
    letter-spacing: 0.025em;
}

.eyebrow {
    padding: 0.45rem 0.72rem;
    text-transform: uppercase;
}

.badge {
    margin: 0;
    padding: 0.28rem 0.58rem;
}

.badge--neutral {
    border-color: var(--te8-line);
    color: var(--te8-ink-soft);
    background: var(--te8-surface-soft);
}

.section {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.section--compact {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section--surface {
    border-block: 1px solid rgb(220 228 236 / 80%);
    background: rgb(255 255 255 / 72%);
}

.section--tint {
    background: linear-gradient(145deg, rgb(217 241 235 / 55%), rgb(246 248 251 / 25%));
}

.section-heading {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3.4rem);
}

.section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.section-heading p {
    color: var(--te8-ink-soft);
    font-size: 1.06rem;
}

.grid {
    display: grid;
    gap: 1.25rem;
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card,
.plan-card,
.panel,
.bootstrap-card,
.status-card,
.auth-card {
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-lg);
    background: var(--te8-surface);
    box-shadow: var(--te8-shadow-sm);
}

.feature-card,
.plan-card,
.bootstrap-card,
.status-card {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.feature-card {
    display: grid;
    min-height: 100%;
    align-content: start;
    gap: 0.85rem;
}

.feature-card__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 0.9rem;
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
}

.feature-card p,
.plan-card p,
.bootstrap-card p,
.status-card p {
    color: var(--te8-ink-soft);
}

.illustrated-section {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 7vw, 6rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.illustrated-section--reverse .illustrated-section__visual {
    order: -1;
}

.illustrated-section__visual {
    overflow: hidden;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-lg);
    background: var(--te8-surface);
    box-shadow: var(--te8-shadow-sm);
}

.check-list,
.link-list,
.meta-list,
.footer-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list {
    display: grid;
    gap: 0.7rem;
}

.check-list li {
    position: relative;
    padding-inline-start: 1.75rem;
}

.check-list li::before {
    position: absolute;
    top: 0.28rem;
    left: 0;
    display: grid;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--te8-brand);
    content: "\2713";
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.plan-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 1rem;
}

.plan-card--featured {
    border-color: rgb(23 107 99 / 40%);
    box-shadow: 0 1.1rem 2.5rem rgb(23 107 99 / 12%);
}

.plan-card__label {
    align-self: flex-start;
}

.plan-card__price {
    color: var(--te8-ink);
    font-size: 1.65rem;
    font-weight: 780;
}

.plan-card__features {
    display: grid;
    flex: 1;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    color: var(--te8-ink-soft);
    list-style: none;
}

.button {
    display: inline-flex;
    height: 3.25rem;
    min-height: 3.25rem;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    color: #fff;
    background: var(--te8-brand);
    font-size: 0.95rem;
    font-weight: 720;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition: border-color var(--te8-transition), color var(--te8-transition), background-color var(--te8-transition), box-shadow var(--te8-transition), transform var(--te8-transition);
}

.button:hover {
    color: #fff;
    background: var(--te8-brand-strong);
    box-shadow: 0 0.5rem 1.1rem rgb(16 84 78 / 16%);
    transform: translateY(-0.05rem);
}

.button:active {
    transform: translateY(0);
}

.button--secondary {
    border-color: var(--te8-line-strong);
    color: var(--te8-ink);
    background: var(--te8-surface);
}

.button--secondary:hover {
    border-color: var(--te8-brand);
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
}

.button--quiet {
    color: var(--te8-brand-strong);
    background: transparent;
}

.button--quiet:hover {
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
    box-shadow: none;
}

.button--danger {
    background: var(--te8-danger);
}

.button--danger:hover {
    background: #842f38;
}

.button--small {
    padding-inline: 0.75rem;
    font-size: 0.9rem;
}

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.callout {
    display: grid;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.5rem, 5vw, 3.2rem);
    border: 1px solid rgb(23 107 99 / 20%);
    border-radius: 2rem;
    color: var(--te8-ink);
    background: linear-gradient(135deg, var(--te8-brand-soft), var(--te8-surface));
    box-shadow: var(--te8-shadow-sm);
    grid-template-columns: minmax(0, 1fr) auto;
}

.callout h2 {
    margin-bottom: 0.6rem;
}

.page-hero {
    padding-block: clamp(2.8rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
}

.page-hero__content {
    max-width: var(--te8-reading);
}

.page-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.75rem);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    color: var(--te8-ink-muted);
    font-size: 0.9rem;
}

.breadcrumb a {
    color: inherit;
}

.panel {
    min-width: 0;
    overflow: hidden;
}

.panel h1 {
    font-size: clamp(1.75rem, 4vw, 2.55rem);
    overflow-wrap: anywhere;
}

.panel h2 {
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    overflow-wrap: anywhere;
}

.panel p,
.panel dd {
    overflow-wrap: anywhere;
}

.panel__header,
.panel__body,
.panel__footer {
    padding: clamp(1.15rem, 3vw, 1.8rem);
}

.panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--te8-line);
}

.panel__header h1,
.panel__header h2,
.panel__header h3 {
    margin: 0;
}

.panel__footer {
    border-top: 1px solid var(--te8-line);
    background: var(--te8-surface-soft);
}

.auth-shell {
    display: grid;
    min-height: calc(100vh - var(--te8-header-height));
    place-items: center;
    padding-block: 3rem;
}

.auth-card {
    width: min(100%, 32rem);
    padding: clamp(1.5rem, 5vw, 2.5rem);
}

.auth-card__title {
    max-width: 100%;
    font-size: clamp(1.75rem, 7vw, 2.55rem);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.auth-card__header {
    margin-bottom: 1.6rem;
}

.auth-card__header p {
    color: var(--te8-ink-soft);
}

.form {
    display: grid;
    gap: 1.15rem;
}

.form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
    display: grid;
    gap: 0.42rem;
}

.field label,
.field__label {
    color: var(--te8-ink);
    font-size: 0.93rem;
    font-weight: 700;
}

.field__hint {
    color: var(--te8-ink-muted);
    font-size: 0.86rem;
}

.field__error {
    color: var(--te8-danger);
    font-size: 0.88rem;
    font-weight: 620;
}

.confirmation-control {
    display: grid;
    align-items: start;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--te8-line);
    border-radius: 0.72rem;
    color: var(--te8-ink-soft);
    background: var(--te8-surface-soft);
    cursor: pointer;
    font-size: 0.92rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.confirmation-control input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2rem 0 0;
}

.licence-domain-form .button-row > .button {
    flex: 1 1 10rem;
}

.input,
.select,
.textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.68rem 0.78rem;
    border: 1px solid var(--te8-line-strong);
    border-radius: 0.72rem;
    color: var(--te8-ink);
    background: var(--te8-surface);
    transition: border-color var(--te8-transition), box-shadow var(--te8-transition);
}

textarea,
.textarea {
    min-height: 8rem;
    resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
    border-color: var(--te8-focus);
    box-shadow: 0 0 0 0.2rem rgb(22 126 116 / 14%);
    outline: none;
}

[aria-invalid="true"] {
    border-color: var(--te8-danger) !important;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--te8-brand);
}

.notice {
    padding: 0.9rem 1rem;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-sm);
    color: var(--te8-ink);
    background: var(--te8-surface-soft);
}

.notice--success {
    border-color: rgb(36 116 84 / 25%);
    background: var(--te8-success-soft);
}

.notice--warning {
    border-color: rgb(138 98 24 / 25%);
    background: var(--te8-warning-soft);
}

.notice--danger {
    border-color: rgb(163 61 71 / 25%);
    background: var(--te8-danger-soft);
}

.notice--info {
    border-color: rgb(35 104 162 / 25%);
    background: var(--te8-info-soft);
}

.status-dot {
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    margin-inline-end: 0.4rem;
    border-radius: 50%;
    background: var(--te8-ink-muted);
}

.status-dot--ok {
    background: var(--te8-success);
}

.status-dot--warning {
    background: var(--te8-warning);
}

.status-dot--error {
    background: var(--te8-danger);
}

.account-layout,
.admin-layout,
.checkout-layout {
    display: grid;
    align-items: start;
    gap: 1.5rem;
    padding-block: 2rem 5rem;
    grid-template-columns: 15rem minmax(0, 1fr);
}

.account-page {
    display: grid;
    gap: 1.5rem;
    padding-block: 2rem 5rem;
}

.account-profile,
.account-content {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.account-profile {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.account-profile .eyebrow,
.account-profile > .badge {
    margin-bottom: 0;
}

.account-profile .eyebrow {
    margin-bottom: 0.65rem;
}

.account-profile__name {
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.account-content {
    display: grid;
    gap: 1.25rem;
}

.account-content > h2,
.account-content > .bootstrap-meta,
.account-content > .callout {
    margin: 0;
}

.section--account-overview {
    padding-bottom: 0.75rem;
}

.section--account-content {
    padding-top: 0.75rem;
}

.account-overview {
    display: grid;
    align-items: end;
    gap: 1.25rem 2rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1fr) minmax(9rem, auto);
}

.account-overview__identity .eyebrow {
    margin-bottom: 0.65rem;
}

.account-overview__welcome {
    margin: 0.5rem 0 0;
    color: var(--te8-ink-soft);
}

.account-overview__meta {
    min-width: 9rem;
    margin: 0;
}

.account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 1rem;
    border-top: 1px solid var(--te8-line);
    grid-column: 1 / -1;
}

.account-tabs__link {
    min-height: 2.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.7rem;
    color: var(--te8-ink-soft);
    font-weight: 700;
    text-decoration: none;
}

.account-tabs__link:hover,
.account-tabs__link[aria-current="page"] {
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
}

.account-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.account-section-heading h2 {
    margin: 0;
}

.account-data-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.inline-control-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.inline-help {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.inline-help > summary {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: 1px solid var(--te8-line-strong);
    border-radius: 50%;
    color: var(--te8-brand-strong);
    background: var(--te8-surface);
    cursor: help;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    list-style: none;
}

.inline-help > summary::-webkit-details-marker {
    display: none;
}

.inline-help__content {
    position: absolute;
    z-index: 40;
    right: 0;
    bottom: calc(100% + 0.5rem);
    display: none;
    width: min(21rem, calc(100vw - 3rem));
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--te8-line-strong);
    border-radius: 0.75rem;
    color: var(--te8-ink);
    background: var(--te8-surface);
    box-shadow: var(--te8-shadow-md);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
}

.inline-help[open] .inline-help__content,
.inline-help:hover .inline-help__content,
.inline-help:focus-within .inline-help__content {
    display: block;
}

.checkout-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 0.75fr);
}

.checkout-page {
    display: grid;
    gap: 1.5rem;
    padding-block: 2rem 5rem;
}

.checkout-page > .checkout-layout {
    padding-block: 0;
}

.checkout-page-heading {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.checkout-page-heading h1,
.checkout-page-heading p:last-child {
    margin-bottom: 0;
}

.side-nav {
    position: sticky;
    top: calc(var(--te8-header-height) + 1rem);
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-md);
    background: var(--te8-surface);
    box-shadow: var(--te8-shadow-sm);
}

.side-nav__link {
    display: flex;
    min-height: 2.6rem;
    align-items: center;
    padding: 0.55rem 0.72rem;
    border-radius: 0.65rem;
    color: var(--te8-ink-soft);
    font-weight: 650;
    text-decoration: none;
}

.side-nav__link:hover,
.side-nav__link[aria-current="page"] {
    color: var(--te8-brand-strong);
    background: var(--te8-brand-soft);
}

.side-nav__form {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--te8-line);
}

.side-nav__action {
    display: flex;
    width: 100%;
    min-height: 2.6rem;
    align-items: center;
    padding: 0.55rem 0.72rem;
    border: 0;
    border-radius: 0.65rem;
    color: var(--te8-danger);
    background: transparent;
    font-weight: 650;
    text-align: left;
}

.side-nav__action:hover {
    background: var(--te8-danger-soft);
}

.admin-content {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.admin-content > .section-heading,
.admin-content > .notice,
.admin-content > .form {
    margin: 0;
}

.update-form {
    padding: clamp(1.1rem, 3vw, 1.6rem);
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-md);
    background: var(--te8-surface-soft);
}

.update-result {
    display: grid;
    gap: 0.8rem;
}

.update-result > p,
.update-result > dl,
.update-result > details {
    margin: 0;
}

.update-meta {
    padding-top: 0.2rem;
}

.update-meta > div {
    display: grid;
    gap: 0.5rem;
    padding-block: 0.45rem;
    border-top: 1px solid rgb(20 40 61 / 10%);
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
}

.update-notes summary {
    cursor: pointer;
    font-weight: 700;
}

.update-notes pre {
    max-height: 22rem;
    overflow: auto;
    margin: 0.7rem 0 0;
    padding: 0.85rem;
    border: 1px solid rgb(20 40 61 / 12%);
    border-radius: var(--te8-radius-sm);
    background: rgb(255 255 255 / 62%);
    font-size: 0.84rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.dashboard-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric {
    padding: 1.2rem;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-md);
    background: var(--te8-surface);
}

.metric__label {
    color: var(--te8-ink-muted);
    font-size: 0.87rem;
    font-weight: 650;
}

.metric__value {
    margin-top: 0.25rem;
    font-size: 1.65rem;
    font-weight: 780;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-md);
    background: var(--te8-surface);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th,
.data-table td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--te8-line);
    vertical-align: top;
}

.data-table th {
    color: var(--te8-ink-soft);
    background: var(--te8-surface-soft);
    font-size: 0.84rem;
    font-weight: 750;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.bootstrap-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bootstrap-card {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.bootstrap-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.bootstrap-meta {
    display: grid;
    gap: 0.55rem;
}

.bootstrap-meta__row,
.definition-list__row {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
}

.bootstrap-meta dt,
.definition-list dt {
    color: var(--te8-ink-muted);
    font-size: 0.87rem;
    font-weight: 650;
}

.bootstrap-meta dd,
.definition-list dd {
    min-width: 0;
    margin: 0;
}

.hash,
code,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.hash {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--te8-ink-soft);
    font-size: 0.82rem;
}

.code-block {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.9rem 1rem;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-sm);
    color: #dceaf2;
    background: #13283b;
    font-size: 0.88rem;
}

.empty-state {
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px dashed var(--te8-line-strong);
    border-radius: var(--te8-radius-lg);
    color: var(--te8-ink-soft);
    background: rgb(255 255 255 / 55%);
    text-align: center;
}

.empty-state h2,
.empty-state h3 {
    color: var(--te8-ink);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1.5rem;
}

.pagination a,
.pagination span {
    display: grid;
    min-width: 2.45rem;
    min-height: 2.45rem;
    place-items: center;
    border: 1px solid var(--te8-line);
    border-radius: 0.65rem;
    color: var(--te8-ink-soft);
    background: var(--te8-surface);
    text-decoration: none;
}

.pagination [aria-current="page"] {
    border-color: var(--te8-brand);
    color: #fff;
    background: var(--te8-brand);
}

.site-footer {
    border-top: 1px solid var(--te8-line);
    background: var(--te8-surface);
}

.site-footer__grid {
    display: grid;
    gap: 2rem;
    padding-block: 3rem;
    grid-template-columns: minmax(12rem, 1.5fr) repeat(2, minmax(10rem, 0.75fr));
}

.site-footer__intro {
    max-width: 27rem;
    color: var(--te8-ink-soft);
}

.site-footer__title {
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    font-weight: 760;
}

.footer-nav {
    display: grid;
    gap: 0.4rem;
}

.footer-nav a {
    color: var(--te8-ink-soft);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--te8-brand-strong);
    text-decoration: underline;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.15rem;
    border-top: 1px solid var(--te8-line);
    color: var(--te8-ink-muted);
    font-size: 0.88rem;
}

.hero__note,
.form-note {
    margin-top: 1rem;
    color: var(--te8-ink-muted);
    font-size: 0.92rem;
}

.button--full {
    width: 100%;
}

.badge--success {
    border-color: rgb(36 116 84 / 24%);
    color: var(--te8-success);
    background: var(--te8-success-soft);
}

.badge--danger {
    border-color: rgb(163 61 71 / 24%);
    color: var(--te8-danger);
    background: var(--te8-danger-soft);
}

.account-layout > .panel,
.admin-layout > .panel,
.checkout-layout > .panel,
.container--reading > .panel {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.illustrated-section > img {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-lg);
    background: var(--te8-surface);
    box-shadow: var(--te8-shadow-sm);
}

.site-footer__inner {
    display: grid;
    align-items: start;
    gap: 1.5rem;
    padding-block: 2.5rem 1.25rem;
    grid-template-columns: minmax(14rem, 1fr) auto;
}

.site-footer__inner > small {
    grid-column: 1 / -1;
    padding-top: 1rem;
    border-top: 1px solid var(--te8-line);
    color: var(--te8-ink-muted);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem 1.1rem;
}

.site-footer__links a {
    color: var(--te8-ink-soft);
    text-decoration: none;
}

@media (max-width: 48rem) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__links {
        justify-content: flex-start;
    }
}

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

.text-muted {
    color: var(--te8-ink-muted);
}

.text-center {
    text-align: center;
}

.stack {
    display: grid;
    gap: 1rem;
}

.stack--large {
    gap: 1.75rem;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.catalog-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog-state p,
.catalog-alert p,
.catalog-callout p {
    margin: 0.35rem 0 0;
}

.catalog-callout {
    margin-top: 1.5rem;
}

.catalog-empty {
    grid-column: 1 / -1;
}

.catalog-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.catalog-card__header h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.catalog-card__header .badge {
    flex: 0 0 auto;
}

.catalog-card__description {
    flex: 1;
}

.catalog-card__meta,
.catalog-state-details,
.catalog-readonly {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.catalog-card__meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--te8-line);
}

.catalog-card__meta dt,
.catalog-card__meta dd {
    margin: 0;
    color: var(--te8-ink-muted);
    font-size: 0.86rem;
}

.catalog-card__meta dd {
    color: var(--te8-ink-soft);
    text-align: right;
}

.badge--warning {
    border-color: rgb(138 98 24 / 24%);
    color: var(--te8-warning);
    background: var(--te8-warning-soft);
}

.catalog-admin__section {
    display: grid;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--te8-line);
}

.commerce-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.commerce-card .catalog-card__header h3 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.commerce-card .bootstrap-meta {
    margin: 0;
}

.admin-emergency-tool {
    padding-block: 1.15rem;
}

.admin-emergency-tool > summary {
    color: var(--te8-ink);
    cursor: pointer;
    font-weight: 750;
}

.admin-emergency-tool__body {
    display: grid;
    gap: 1rem;
    padding-top: 0.4rem;
}

.admin-emergency-tool__body p {
    margin: 0;
    color: var(--te8-ink-soft);
}

.catalog-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.catalog-section-heading h2 {
    margin-bottom: 0.35rem;
}

.catalog-section-heading p {
    margin: 0;
    color: var(--te8-ink-soft);
}

.catalog-actions {
    display: grid;
    min-width: min(100%, 22rem);
    gap: 0.75rem;
}

.catalog-actions form {
    margin: 0;
}

.catalog-restore-form {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid rgb(163 61 71 / 20%);
    border-radius: var(--te8-radius-sm);
    background: var(--te8-danger-soft);
}

.catalog-state-details,
.catalog-readonly {
    padding: 1rem;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-sm);
    background: var(--te8-surface-soft);
}

.catalog-editor-list {
    display: grid;
    gap: 1.25rem;
}

.catalog-editor {
    display: grid;
    gap: 1.15rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-md);
    background: var(--te8-surface);
}

.catalog-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.catalog-editor__header .eyebrow {
    margin-bottom: 0.5rem;
}

.catalog-editor__header h3 {
    margin: 0;
}

.catalog-code-row input[readonly] {
    color: var(--te8-ink-soft);
    background: var(--te8-surface-soft);
    cursor: not-allowed;
}

.form-row--catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog-tax-checkbox {
    align-self: end;
    min-height: 2.85rem;
    align-items: center;
    padding: 0.65rem 0;
}

.catalog-archive-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--te8-line);
}

.catalog-table {
    min-width: 56rem;
}

.catalog-properties {
    margin-top: 0.55rem;
}

.catalog-properties summary {
    color: var(--te8-brand-strong);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
}

.catalog-properties pre {
    max-width: 28rem;
    max-height: 16rem;
    overflow: auto;
    margin: 0.55rem 0 0;
    padding: 0.7rem;
    border: 1px solid var(--te8-line);
    border-radius: var(--te8-radius-sm);
    background: var(--te8-surface-soft);
    font-size: 0.78rem;
    white-space: pre-wrap;
}

.catalog-job-error {
    max-width: 24rem;
    overflow-wrap: anywhere;
}

.legal-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legal-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
}

.legal-card h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}

.legal-card__heading {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--te8-ink-muted);
    font-size: 0.9rem;
}

.legal-card .bootstrap-meta,
.legal-card__status {
    width: 100%;
}

.legal-card .button {
    margin-top: auto;
}

.legal-meta > div,
.legal-card .bootstrap-meta > div {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
}

.legal-document {
    overflow-wrap: anywhere;
}

.legal-document h1 {
    font-size: clamp(1.65rem, 4vw, 2.4rem);
}

.legal-document h2 {
    margin-top: 2.2rem;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.legal-document h3 {
    margin-top: 1.7rem;
}

.legal-document table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.legal-document th,
.legal-document td {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--te8-line);
    text-align: left;
    vertical-align: top;
}

.legal-document th {
    background: var(--te8-surface-soft);
}

@media (max-width: 64rem) {
    .site-nav {
        gap: 0;
    }

    .site-nav__link {
        padding-inline: 0.55rem;
    }

    .grid--4,
    .dashboard-grid,
    .catalog-grid,
    .legal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 52rem) {
    :root {
        --te8-header-height: 4.25rem;
    }

    .hero__grid,
    .illustrated-section,
    .callout,
    .account-layout,
    .admin-layout,
    .checkout-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__copy {
        max-width: none;
    }

    .hero__visual {
        width: min(100%, 38rem);
        margin-inline: auto;
        transform: none;
    }

    .illustrated-section--reverse .illustrated-section__visual {
        order: 0;
    }

    .grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .callout {
        align-items: start;
    }

    .side-nav {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__intro {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .site-header__inner {
        flex-wrap: wrap;
        padding-block: 0.6rem;
    }

    .site-nav {
        width: 100%;
        order: 3;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .site-nav__link {
        flex: 0 0 auto;
    }

    .header-actions .button {
        display: none;
    }

    .account-menu__popover {
        position: fixed;
        top: calc(var(--te8-header-height) + 0.5rem);
        right: 1rem;
        left: 1rem;
    }

    .account-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-overview {
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
    }

    .account-tabs {
        grid-column: auto;
    }

    .account-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .catalog-grid,
    .legal-grid,
    .bootstrap-grid,
    .dashboard-grid,
    .form-row,
    .form-row--catalog,
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-card__header,
    .catalog-editor__header,
    .catalog-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-actions {
        width: 100%;
    }

    .site-footer__intro {
        grid-column: auto;
    }

    .site-footer__bottom,
    .panel__header,
    .bootstrap-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bootstrap-meta__row,
    .update-meta > div,
    .definition-list__row {
        gap: 0.15rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .button-row .button,
    .hero__actions .button {
        width: 100%;
    }
}

.payment-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    color: var(--te8-ink-soft);
}

.payment-progress[hidden] {
    display: none;
}

.payment-spinner {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    border: 0.18rem solid var(--te8-line);
    border-top-color: var(--te8-accent, #246bce);
    border-radius: 50%;
    animation: te8-payment-spin 0.8s linear infinite;
    will-change: transform;
}

@keyframes te8-payment-spin {
    to {
        transform: rotate(360deg);
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .payment-spinner {
        animation: te8-payment-spin 2s steps(8, end) infinite;
    }
}

@media (prefers-contrast: more) {
    :root {
        --te8-line: #8998a7;
        --te8-line-strong: #677889;
        --te8-ink-soft: #344b61;
        --te8-ink-muted: #455b6e;
    }

    .button {
        border-color: currentcolor;
    }
}

@media print {
    .site-header,
    .site-footer,
    .button,
    .side-nav,
    .skip-link {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .panel,
    .feature-card,
    .plan-card,
    .bootstrap-card {
        border: 1px solid #aaa;
        box-shadow: none;
        break-inside: avoid;
    }
}