:root {
    --hue-color: 250;
    --first-color: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 62%, 52%);
    --first-color-soft: hsl(var(--hue-color), 88%, 96%);
    --first-color-border: hsl(var(--hue-color), 62%, 84%);
    --body-color: hsl(var(--hue-color), 38%, 98%);
    --surface-color: hsl(0, 0%, 100%);
    --surface-elevated: hsl(0, 0%, 100%);
    --surface-muted: hsl(var(--hue-color), 30%, 96%);
    --title-color: hsl(var(--hue-color), 22%, 13%);
    --text-color: hsl(var(--hue-color), 10%, 34%);
    --text-light: hsl(var(--hue-color), 9%, 46%);
    --border-color: hsl(var(--hue-color), 18%, 88%);
    --success-color: hsl(148, 63%, 36%);
    --danger-color: hsl(0, 68%, 48%);
    --code-bg: hsl(var(--hue-color), 29%, 11%);
    --code-text: hsl(var(--hue-color), 22%, 90%);
    --shadow-sm: 0 1px 2px hsla(var(--hue-color), 24%, 12%, .06);
    --shadow-md: 0 16px 40px hsla(var(--hue-color), 30%, 18%, .09);
    --shadow-lg: 0 28px 70px hsla(var(--hue-color), 35%, 14%, .14);
    --radius-sm: .6rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --container: 1180px;
    --header-height: 4.5rem;
    --transition: 220ms ease;
    --z-header: 100;
    --z-overlay: 90;
    --z-fixed: 200;
}

[data-theme="dark"] {
    --first-color: hsl(var(--hue-color), 78%, 69%);
    --first-color-alt: hsl(var(--hue-color), 75%, 75%);
    --first-color-soft: hsl(var(--hue-color), 35%, 18%);
    --first-color-border: hsl(var(--hue-color), 35%, 34%);
    --body-color: hsl(var(--hue-color), 28%, 9%);
    --surface-color: hsl(var(--hue-color), 26%, 12%);
    --surface-elevated: hsl(var(--hue-color), 25%, 15%);
    --surface-muted: hsl(var(--hue-color), 24%, 13%);
    --title-color: hsl(var(--hue-color), 18%, 96%);
    --text-color: hsl(var(--hue-color), 13%, 76%);
    --text-light: hsl(var(--hue-color), 10%, 65%);
    --border-color: hsl(var(--hue-color), 20%, 25%);
    --success-color: hsl(148, 60%, 53%);
    --danger-color: hsl(0, 78%, 68%);
    --code-bg: hsl(var(--hue-color), 34%, 6%);
    --code-text: hsl(var(--hue-color), 20%, 91%);
    --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, .2);
    --shadow-md: 0 16px 40px hsla(0, 0%, 0%, .24);
    --shadow-lg: 0 28px 70px hsla(0, 0%, 0%, .3);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body { margin: 0; min-width: 320px; background: var(--body-color); color: var(--text-color); font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.7; text-rendering: optimizeLegibility; transition: background-color var(--transition), color var(--transition); }
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--first-color-alt); text-decoration: none; transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition); }
a:hover { color: var(--first-color); }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; }
h1, h2, h3, h4 { margin: 0; color: var(--title-color); font-weight: 720; line-height: 1.12; letter-spacing: -.035em; }
h1 { font-size: clamp(2.45rem, 9vw, 5rem); }
h2 { font-size: clamp(1.9rem, 6vw, 3.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
::selection { background: var(--first-color); color: white; }
:focus-visible { outline: 3px solid var(--first-color); outline-offset: 3px; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.narrow-container { max-width: 780px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .7rem 1rem; border-radius: var(--radius-sm); background: var(--title-color); color: var(--body-color); }
.skip-link:focus { top: 1rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--first-color-alt); font-size: .78rem; font-weight: 750; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.status-dot { width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: var(--success-color); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--success-color) 14%, transparent); }
.section-space { padding-block: 5rem; }
.section-space-sm { padding-block: 3rem 5rem; }
.section-muted { background: var(--surface-muted); border-block: 1px solid var(--border-color); }
.section-heading { margin-bottom: 2rem; }
.section-heading .eyebrow { margin-bottom: .8rem; }
.section-heading h2 { max-width: 720px; }
.centered-heading { max-width: 760px; margin-inline: auto; text-align: center; }
.centered-heading h2 { margin-inline: auto; }
.split-heading { display: flex; flex-direction: column; gap: 1rem; }
.cards-grid { display: grid; gap: 1.25rem; }
.lead { color: var(--text-color); font-size: 1.1rem; line-height: 1.65; }

.btn { --bs-btn-font-weight: 700; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: .75rem; padding: .65rem 1.05rem; border-width: 1px; letter-spacing: -.01em; transition: transform 160ms ease, box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { --bs-btn-bg: var(--first-color-alt); --bs-btn-border-color: var(--first-color-alt); --bs-btn-hover-bg: var(--first-color); --bs-btn-hover-border-color: var(--first-color); --bs-btn-active-bg: var(--first-color-alt); box-shadow: 0 9px 24px color-mix(in srgb, var(--first-color) 24%, transparent); color: white; }
.btn-ghost { border: 1px solid var(--border-color); background: var(--surface-color); color: var(--title-color); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--first-color-border); background: var(--first-color-soft); color: var(--first-color-alt); }
.btn-outline { border: 1px solid var(--first-color-border); background: var(--first-color-soft); color: var(--first-color-alt); }
.btn-outline:hover { border-color: var(--first-color); background: var(--first-color); color: white; }
.btn-lg { min-height: 52px; padding-inline: 1.25rem; font-size: 1rem; }
.btn-sm { min-height: 42px; padding: .45rem .9rem; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--title-color); font-size: .9rem; font-weight: 700; }
.text-link span { color: var(--first-color); transition: transform var(--transition); }
.text-link:hover span { transform: translateX(.2rem); }
.badge-soft { padding: .25rem .55rem; border: 1px solid var(--first-color-border); border-radius: 99px; background: var(--first-color-soft); color: var(--first-color-alt); font-size: .68rem; font-weight: 750; }

.site-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-height); border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--body-color) 88%, transparent); backdrop-filter: blur(16px); transition: border-color var(--transition), box-shadow var(--transition); }
.site-header.scrolled { border-color: var(--border-color); box-shadow: var(--shadow-sm); }
.navbar-shell { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--title-color); }
.brand-image { justify-content: center; min-width: 48px; border-radius: .75rem; }
.brand-image:hover { opacity: .86; }
.brand-logo { width: auto; height: 2.75rem; }
.nav-toggle, .theme-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: .65rem; background: transparent; color: var(--title-color); cursor: pointer; }
.nav-toggle { align-content: center; gap: .27rem; }
.nav-toggle span { width: 1.35rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(.39rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-.39rem) rotate(-45deg); }
.primary-nav { position: fixed; inset: var(--header-height) 0 auto; max-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-inline: 1rem; background: var(--surface-color); border-bottom: 1px solid var(--border-color); opacity: 0; visibility: hidden; transition: max-height 300ms ease, opacity var(--transition), visibility var(--transition); }
.primary-nav.open { max-height: calc(100dvh - var(--header-height)); padding-block: 1rem 1.5rem; opacity: 1; visibility: visible; box-shadow: var(--shadow-md); }
.primary-nav > a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); color: var(--text-color); font-weight: 650; }
.primary-nav > a.active { color: var(--first-color-alt); }
.nav-actions { display: flex; align-items: center; gap: .5rem; padding-top: 1rem; }
.theme-toggle { border: 1px solid var(--border-color); background: var(--surface-muted); }
.theme-toggle svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
[data-theme="light"] .theme-icon-sun, [data-theme="dark"] .theme-icon-moon { display: none; }

.hero-section { position: relative; overflow: clip; padding-block: 4rem 3rem; }
.hero-section::before { content: ""; position: absolute; inset: -12rem -10rem auto auto; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--first-color) 15%, transparent), transparent 68%); pointer-events: none; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero-copy .eyebrow { margin-bottom: 1.2rem; }
.hero-copy h1 { max-width: 850px; }
.hero-copy h1 span { color: var(--first-color-alt); }
.hero-lead { max-width: 680px; margin-top: 1.35rem; color: var(--text-color); font-size: 1.08rem; }
.hero-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .75rem 1.1rem; margin-top: 1.6rem; color: var(--text-light); font-size: .8rem; font-weight: 650; }
.hero-proof span { display: flex; align-items: center; gap: .35rem; }
.hero-proof svg { width: 1rem; fill: none; stroke: var(--success-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.hero-console { position: relative; overflow: hidden; min-height: 340px; border: 1px solid hsl(var(--hue-color), 20%, 24%); border-radius: var(--radius-lg); background: var(--code-bg); color: var(--code-text); box-shadow: var(--shadow-lg); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; transform: perspective(1200px) rotateX(1deg); }
.console-bar { height: 3.1rem; display: flex; align-items: center; gap: .42rem; padding-inline: 1rem; border-bottom: 1px solid hsl(var(--hue-color), 18%, 21%); background: hsl(var(--hue-color), 28%, 9%); }
.console-bar span { width: .62rem; height: .62rem; border-radius: 50%; background: hsl(0, 0%, 30%); }
.console-bar span:first-child { background: hsl(4, 72%, 58%); }.console-bar span:nth-child(2) { background: hsl(42, 82%, 58%); }.console-bar span:nth-child(3) { background: hsl(141, 55%, 45%); }
.console-bar code { margin-left: auto; color: hsl(var(--hue-color), 10%, 58%); font-size: .7rem; }
.console-body { padding: 1.35rem .7rem 1rem; }
.code-line { display: grid; grid-template-columns: 2rem 1fr; min-height: 2rem; align-items: center; padding-inline: .45rem; border-radius: .35rem; font-size: clamp(.72rem, 2.8vw, .88rem); }
.code-line i { color: hsl(var(--hue-color), 10%, 38%); font-style: normal; user-select: none; }.code-line b { color: hsl(286, 72%, 73%); font-weight: 550; }.code-line em { color: hsl(202, 80%, 68%); font-style: normal; }.code-line.active { background: hsl(var(--hue-color), 30%, 15%); }
.console-result { display: flex; align-items: center; gap: .6rem; margin: 1rem .45rem 0; padding: .85rem; border: 1px solid hsl(145, 35%, 25%); border-radius: .65rem; background: hsl(145, 38%, 10%); font-size: .72rem; }
.console-result code { color: hsl(145, 42%, 66%); }.console-result strong { margin-left: auto; color: white; }
.trust-strip { border-block: 1px solid var(--border-color); background: var(--surface-color); }
.trust-strip .container { min-height: 5rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .8rem 1.35rem; color: var(--text-light); font-size: .68rem; letter-spacing: .08em; }
.trust-strip strong { color: var(--title-color); font-size: .72rem; }

.product-card, .post-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.product-card:hover, .post-card:hover { border-color: var(--first-color-border); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-preview { position: relative; min-height: 200px; display: block; overflow: hidden; border-bottom: 1px solid var(--border-color); background: linear-gradient(135deg, hsl(var(--hue-color), 42%, 18%), hsl(var(--hue-color), 38%, 11%)); }
.product-preview-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.preview-2 { --mock-accent: hsl(158, 70%, 49%); }.preview-3 { --mock-accent: hsl(28, 90%, 60%); }.preview-1 { --mock-accent: hsl(var(--hue-color), 78%, 68%); }
.preview-toolbar { position: absolute; inset: 10% 7% auto; height: 12%; display: flex; align-items: center; gap: 4px; padding-inline: 5%; border-radius: .45rem .45rem 0 0; background: hsl(var(--hue-color), 18%, 92%); }
.preview-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--hue-color), 10%, 70%); }
.preview-sidebar { position: absolute; inset: 22% auto 8% 7%; width: 20%; border-radius: 0 0 0 .45rem; background: hsl(var(--hue-color), 22%, 20%); }
.preview-content { position: absolute; inset: 22% 7% 8% 27%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; padding: 7%; border-radius: 0 0 .45rem 0; background: hsl(var(--hue-color), 25%, 96%); }
.preview-content i { height: 36%; border-radius: .25rem; background: color-mix(in srgb, var(--mock-accent) 35%, white); }
.preview-content b { grid-column: 1 / -1; height: 55%; align-self: end; border-radius: .25rem; background: repeating-linear-gradient(0deg, hsl(var(--hue-color), 15%, 86%) 0 1px, transparent 1px 10px), linear-gradient(90deg, color-mix(in srgb, var(--mock-accent) 75%, white) 35%, transparent 35%); }
.product-card-body, .post-card-body { padding: 1.25rem; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: var(--text-light); font-size: .7rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.product-card h3, .post-card h3 { margin-top: .7rem; font-size: 1.28rem; }
.product-card h3 a, .post-card h3 a { color: var(--title-color); }
.product-card-body > p, .post-card-body > p { margin-top: .65rem; color: var(--text-color); font-size: .9rem; line-height: 1.6; }
.stack-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.stack-list span { padding: .25rem .48rem; border: 1px solid var(--border-color); border-radius: .4rem; background: var(--surface-muted); color: var(--text-color); font-family: ui-monospace, monospace; font-size: .66rem; }
.card-footer-line { display: flex; align-items: end; justify-content: space-between; gap: .8rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.price { display: flex; flex-direction: column; line-height: 1.25; }.price small { color: var(--text-light); font-size: .65rem; }.price strong { color: var(--title-color); font-size: 1.16rem; font-variant-numeric: tabular-nums; }.price strong span { color: var(--text-light); font-size: .6rem; font-weight: 650; }
.benefits-grid { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--border-color); }
.benefits-grid article { min-height: 230px; padding: 1.5rem; background: var(--surface-color); }.benefits-grid h3 { margin-top: 1.7rem; font-size: 1.25rem; }.benefits-grid p { margin-top: .7rem; font-size: .9rem; }.feature-number { color: var(--first-color-alt); font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 700; }
.metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--border-color); }.metrics-grid div { padding: 1.2rem .8rem; background: var(--surface-color); text-align: center; }.metrics-grid strong { display: block; color: var(--title-color); font-size: clamp(1.6rem, 7vw, 2.6rem); letter-spacing: -.05em; }.metrics-grid span { color: var(--text-light); font-size: .72rem; }
.testimonials-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }.testimonials-grid figure { margin: 0; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }.testimonials-grid blockquote { margin: 0; color: var(--title-color); font-size: 1.05rem; line-height: 1.65; }.testimonials-grid figcaption { display: flex; align-items: center; gap: .7rem; margin-top: 1.2rem; }.testimonials-grid figcaption > span, .avatar { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--first-color-soft); color: var(--first-color-alt); font-size: .72rem; font-weight: 800; }.testimonials-grid figcaption div { display: flex; flex-direction: column; }.testimonials-grid figcaption strong { color: var(--title-color); font-size: .85rem; }.testimonials-grid figcaption small { color: var(--text-light); font-size: .72rem; }
.empty-state { grid-column: 1 / -1; padding: 3rem 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md); text-align: center; }.empty-state p { margin: .5rem auto 1rem; }

.post-visual { position: relative; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 1.25rem; border-bottom: 1px solid var(--border-color); background: var(--code-bg); color: var(--code-text); font-family: ui-monospace, monospace; }
.post-visual::after { content: ""; position: absolute; right: -20%; bottom: -45%; width: 15rem; height: 15rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--first-color) 45%, transparent), transparent 66%); }
.post-visual { min-height: 150px; }.post-visual span { position: relative; z-index: 1; color: var(--first-color); font-size: .66rem; font-weight: 700; letter-spacing: .09em; }.post-visual code { position: relative; z-index: 1; color: var(--code-text); font-size: .76rem; }

.page-hero { padding-block: 4rem 2.5rem; text-align: center; }.page-hero h1 { margin-top: .8rem; font-size: clamp(2.3rem, 8vw, 4.6rem); }.page-hero p { max-width: 680px; margin: 1rem auto 0; font-size: 1.08rem; }.page-hero small { display: block; margin-top: 1rem; color: var(--text-light); }.compact-hero { border-bottom: 1px solid var(--border-color); background: linear-gradient(180deg, var(--surface-muted), transparent); }
.catalog-toolbar { display: grid; gap: .7rem; padding: .8rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); }.search-field { position: relative; }.search-field svg { position: absolute; left: .9rem; top: 50%; width: 1.15rem; fill: none; stroke: var(--text-light); stroke-linecap: round; stroke-width: 1.8; transform: translateY(-50%); }.search-field input { width: 100%; min-height: 48px; padding: .7rem .8rem .7rem 2.8rem; border: 0; background: transparent; color: var(--title-color); outline: 0; }.filter-pills { display: flex; gap: .55rem; margin-block: 1.25rem; padding-bottom: .4rem; overflow-x: auto; scrollbar-width: none; }.filter-pills::-webkit-scrollbar { display: none; }.filter-pills a { min-height: 42px; display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; padding: .5rem .8rem; border: 1px solid var(--border-color); border-radius: 99px; background: var(--surface-color); color: var(--text-color); font-size: .78rem; font-weight: 650; }.filter-pills a.active { border-color: var(--first-color-alt); background: var(--first-color-alt); color: white; }.filter-pills a span { opacity: .75; }.results-line { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; color: var(--text-light); font-size: .8rem; }.results-line strong { color: var(--title-color); }.pagination-wrap { margin-top: 2rem; }.pagination { --bs-pagination-bg: var(--surface-color); --bs-pagination-border-color: var(--border-color); --bs-pagination-color: var(--text-color); --bs-pagination-hover-bg: var(--first-color-soft); --bs-pagination-hover-color: var(--first-color-alt); --bs-pagination-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--first-color) 25%, transparent); --bs-pagination-active-bg: var(--first-color-alt); --bs-pagination-active-border-color: var(--first-color-alt); justify-content: center; }

.breadcrumb-wrap { padding-top: 1.1rem; }.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; color: var(--text-light); font-size: .72rem; }.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: var(--border-color); }.breadcrumb a { color: var(--text-light); }
.product-detail-hero { padding-block: 1.5rem 3rem; }.product-detail-grid { display: grid; gap: 2rem; }.gallery-main { min-height: 310px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); }.gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .65rem; }.gallery-thumbs button { min-height: 44px; border: 1px solid var(--border-color); border-radius: .6rem; background: var(--surface-color); color: var(--text-color); font-size: .7rem; cursor: pointer; }.gallery-thumbs button.active { border-color: var(--first-color); background: var(--first-color-soft); color: var(--first-color-alt); }.gallery-main[data-view="table"] .preview-content b { background: repeating-linear-gradient(0deg, hsl(var(--hue-color), 15%, 82%) 0 1px, transparent 1px 12px); }.gallery-main[data-view="mobile"] .preview-sidebar { left: 35%; width: 14%; }.gallery-main[data-view="mobile"] .preview-content { left: 49%; right: 35%; grid-template-columns: 1fr; }
.gallery-image-thumbs { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }.gallery-image-thumbs button { min-height: 0; padding: .2rem; overflow: hidden; aspect-ratio: 8 / 5; transition: border-color var(--transition), box-shadow var(--transition); }.gallery-image-thumbs button.active { box-shadow: 0 0 0 2px var(--first-color-soft); }.gallery-image-thumbs img { width: 100%; height: 100%; display: block; border-radius: .38rem; object-fit: cover; }
.purchase-panel { align-self: start; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); box-shadow: var(--shadow-md); }.purchase-panel h1 { margin-top: .7rem; font-size: clamp(2rem, 8vw, 3.5rem); }.purchase-panel .lead { margin-top: 1rem; }.purchase-price { display: flex; flex-direction: column; margin-block: 1.5rem; }.purchase-price > span, .purchase-price > small { color: var(--text-light); font-size: .72rem; }.purchase-price strong { color: var(--title-color); font-size: 2rem; font-variant-numeric: tabular-nums; }.purchase-price strong small { font-size: .7rem; }.purchase-panel .btn + .btn { margin-top: .65rem; }.product-coupon-offer { display: grid; gap: .7rem; margin-top: .75rem; padding: 1rem; border: 1px dashed color-mix(in srgb, var(--first-color) 45%, var(--border-color)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--first-color) 7%, var(--surface-color)); }.product-coupon-offer > div { display: grid; gap: .15rem; }.product-coupon-offer span, .product-coupon-offer small { color: var(--text-light); font-size: .7rem; }.product-coupon-offer strong { color: var(--title-color); font-size: .86rem; }.purchase-includes { display: grid; gap: .55rem; margin: 1.3rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--border-color); list-style: none; color: var(--text-color); font-size: .8rem; }.purchase-includes li { display: flex; align-items: center; gap: .55rem; }.purchase-includes span { color: var(--success-color); font-weight: 800; }
.purchase-policy-link { margin-top: 1rem; font-size: .72rem; line-height: 1.55; }.purchase-policy-link a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .2rem; }
.detail-tabs { position: sticky; top: var(--header-height); z-index: 10; display: flex; gap: 1.2rem; margin-bottom: 2rem; padding-block: .7rem; overflow-x: auto; border-bottom: 1px solid var(--border-color); background: var(--body-color); scrollbar-width: none; }.detail-tabs a { min-height: 42px; display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--text-color); font-size: .78rem; font-weight: 650; }.detail-content-grid { display: grid; gap: 2rem; }.content-section { padding-block: 1.5rem 2.5rem; border-bottom: 1px solid var(--border-color); }.content-section h2 { margin-bottom: 1rem; font-size: clamp(1.65rem, 5vw, 2.4rem); }.prose, .article-prose { color: var(--text-color); }.prose > * + *, .article-prose > * + * { margin-top: 1.1rem; }.feature-list { display: grid; gap: .7rem; }.feature-list > div { display: flex; gap: .7rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .7rem; background: var(--surface-color); }.feature-list span { color: var(--success-color); font-weight: 800; }.changelog { display: grid; gap: 1rem; }.changelog article { padding-left: 1rem; border-left: 2px solid var(--first-color-border); }.changelog article > div { display: flex; align-items: center; gap: 1rem; }.changelog strong { color: var(--first-color-alt); font-family: ui-monospace, monospace; }.changelog time { color: var(--text-light); font-size: .72rem; }.changelog p { margin-top: .35rem; }.faq-list details { border-bottom: 1px solid var(--border-color); }.faq-list summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--title-color); font-weight: 680; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--first-color); font-size: 1.3rem; transition: transform var(--transition); }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { padding: 0 1.5rem 1rem 0; }.tech-specs { align-self: start; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); }.tech-specs h2 { font-size: 1.2rem; }.tech-specs dl { margin-block: 1rem; }.tech-specs dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-bottom: 1px solid var(--border-color); font-size: .78rem; }.tech-specs dt { color: var(--text-light); font-weight: 500; }.tech-specs dd { margin: 0; color: var(--title-color); font-family: ui-monospace, monospace; text-align: right; }.tech-specs h3 { margin-top: 1rem; font-size: .9rem; }.tech-specs ul { margin: .7rem 0 0; padding-left: 1.1rem; font-size: .78rem; }

.featured-post { display: grid; gap: 1.5rem; margin-block: 1.5rem 3rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); }.featured-post-visual { min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; border-radius: var(--radius-md); background: var(--code-bg); color: var(--code-text); font-family: ui-monospace, monospace; }.featured-post-visual span { color: var(--first-color); font-size: .7rem; letter-spacing: .1em; }.featured-post-visual code { color: var(--code-text); font-size: clamp(.85rem, 4vw, 1.2rem); }.featured-post > div { align-self: center; padding: .5rem; }.featured-post h2 { margin-top: .8rem; font-size: clamp(1.6rem, 5vw, 2.5rem); }.featured-post h2 a { color: var(--title-color); }.featured-post p { margin-top: .8rem; }.featured-post .btn { margin-top: 1rem; }
.article-header { padding-block: 3.5rem 2.5rem; }.article-header-inner { max-width: 850px; }.article-header h1 { margin-top: 1rem; font-size: clamp(2.35rem, 8vw, 4.5rem); }.article-header > .container > p, .article-header-inner > p { max-width: 720px; margin-top: 1rem; font-size: 1.1rem; }.author-line { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; }.author-line div { display: flex; flex-direction: column; }.author-line strong { color: var(--title-color); font-size: .82rem; }.author-line div span { color: var(--text-light); font-size: .7rem; }.article-cover { min-height: 250px; display: grid; place-items: center; background: var(--code-bg); }.article-cover .container { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; border: 1px solid hsl(var(--hue-color), 20%, 25%); border-radius: var(--radius-md); color: var(--code-text); font-family: ui-monospace, monospace; }.article-cover span { color: var(--first-color); font-size: .72rem; letter-spacing: .1em; }.article-cover code { overflow-wrap: anywhere; color: var(--code-text); font-size: clamp(.85rem, 4vw, 1.3rem); }.article-layout { display: grid; gap: 2rem; padding-block: 3rem 5rem; }.article-aside { display: none; }.article-prose { max-width: 740px; font-size: 1.03rem; line-height: 1.8; }.article-prose h2 { margin-top: 2.5rem; font-size: 1.8rem; }.article-prose h3 { margin-top: 1.8rem; }.article-prose a { text-decoration: underline; text-underline-offset: .2em; }.article-prose pre { overflow-x: auto; padding: 1rem; border-radius: .75rem; background: var(--code-bg); color: var(--code-text); }.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }.article-tags span { padding: .3rem .55rem; border-radius: .4rem; background: var(--first-color-soft); color: var(--first-color-alt); font-size: .72rem; }

.featured-post-visual { position: relative; overflow: hidden; }.post-cover-image { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.content-type-badge { display: inline-flex; align-items: center; width: fit-content; min-height: 1.65rem; padding-inline: .55rem; border: 1px solid var(--border-color); border-radius: 99px; background: var(--surface-muted); color: var(--text-color); font-size: .65rem; font-weight: 750; letter-spacing: .055em; line-height: 1; text-transform: uppercase; }
.content-type-tutorial { border-color: var(--first-color-border); background: var(--first-color-soft); color: var(--first-color-alt); }
.post-category { display: block; margin-top: .8rem; color: var(--text-light); font-size: .7rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.post-card-tags { min-height: 1.4rem; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; color: var(--text-light); font-size: .64rem; }.post-card-body > .text-link { margin-top: 1rem; }
.blog-filter-group { border-bottom: 1px solid var(--border-color); }.blog-filter-group > span { display: block; padding-top: .8rem; color: var(--text-light); font-size: .68rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }.blog-filter-group .filter-pills { margin-block: .45rem .7rem; }.tag-pills a { min-height: 36px; padding-block: .35rem; font-family: ui-monospace, monospace; font-size: .7rem; }
.article-kickers { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .8rem; color: var(--text-light); font-size: .72rem; }.article-kickers > a, .article-kickers > span:not(.content-type-badge) { color: var(--text-light); }.article-kickers > * + *:not(.content-type-badge)::before { content: "·"; margin-right: .8rem; color: var(--border-color); }
.article-cover-image { position: relative; min-height: 250px; overflow: hidden; }.article-cover-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tutorial-prerequisites { max-width: 740px; margin-bottom: 2.5rem; padding: 1.25rem; border: 1px solid var(--first-color-border); border-radius: var(--radius-md); background: var(--first-color-soft); }.tutorial-prerequisites h2 { margin-top: .4rem; font-size: 1.3rem; }.tutorial-prerequisites ul { display: grid; gap: .35rem; margin: .8rem 0 0; padding-left: 1.2rem; color: var(--text-color); font-size: .86rem; }
.article-prose h2, .article-prose h3 { scroll-margin-top: calc(var(--header-height) + 1.5rem); }.article-prose img { max-width: 100%; height: auto; display: block; margin-block: 1.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }.article-prose blockquote { margin-inline: 0; padding: 1rem 1.2rem; border-left: 3px solid var(--first-color); background: var(--surface-muted); color: var(--title-color); }.article-prose table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }.article-prose th, .article-prose td { padding: .65rem .8rem; border: 1px solid var(--border-color); white-space: nowrap; }.article-prose :not(pre) > code { padding: .15rem .35rem; border-radius: .3rem; background: var(--surface-muted); color: var(--first-color-alt); font-size: .86em; }
.code-block { max-width: min(100%, 740px); overflow: hidden; margin-block: 1.5rem; border: 1px solid hsl(var(--hue-color), 18%, 25%); border-radius: .8rem; background: var(--code-bg); box-shadow: var(--shadow-sm); }.code-block-toolbar { min-height: 2.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: .9rem; border-bottom: 1px solid hsl(var(--hue-color), 18%, 25%); color: hsl(var(--hue-color), 10%, 68%); font-family: ui-monospace, monospace; font-size: .68rem; }.code-block-toolbar button { min-height: 34px; padding-inline: .65rem; border: 1px solid hsl(var(--hue-color), 18%, 32%); border-radius: .4rem; background: transparent; color: var(--code-text); font: inherit; cursor: pointer; }.code-block-toolbar button:hover, .code-block-toolbar button:focus-visible { border-color: var(--first-color); color: white; outline: none; }.article-prose .code-block pre { max-width: 100%; margin: 0; padding: 1rem; border-radius: 0; background: transparent; font-size: clamp(.73rem, 2.6vw, .86rem); line-height: 1.65; tab-size: 4; }.code-block-terminal .code-block-toolbar::before { content: "$"; color: hsl(145, 58%, 62%); }.code-block-terminal .code-block-toolbar span { margin-right: auto; }.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #c792ea; }.hljs-string, .hljs-attr { color: #c3e88d; }.hljs-title, .hljs-function { color: #82aaff; }.hljs-number, .hljs-variable, .hljs-template-variable { color: #f78c6c; }.hljs-comment, .hljs-quote { color: #697098; font-style: italic; }.hljs-built_in, .hljs-type { color: #ffcb6b; }.article-tags a { padding: .3rem .55rem; border-radius: .4rem; background: var(--first-color-soft); color: var(--first-color-alt); font-size: .72rem; }.article-aside nav a.toc-level-three { padding-left: 1.25rem; font-size: .68rem; }

.legal-content { max-width: 820px; }.legal-content > section { padding-block: 1.75rem; border-bottom: 1px solid var(--border-color); scroll-margin-top: 6rem; }.legal-content h2 { font-size: 1.55rem; }.legal-content p { margin-top: .6rem; line-height: 1.75; }.legal-content ul { display: grid; gap: .65rem; margin: 1rem 0 0; padding-left: 1.2rem; color: var(--text-color); }.legal-content li { padding-left: .25rem; line-height: 1.65; }.legal-highlights { display: grid; gap: .75rem; margin-bottom: 1rem; }.legal-highlights a { min-height: 104px; display: flex; flex-direction: column; justify-content: center; gap: .35rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); color: inherit; box-shadow: var(--shadow-sm); transition: border-color var(--transition), background var(--transition); }.legal-highlights a:hover { border-color: var(--first-color-border); background: var(--first-color-soft); }.legal-highlights strong { color: var(--title-color); font-size: .88rem; }.legal-highlights span { color: var(--text-color); font-size: .75rem; line-height: 1.55; }.legal-note { padding: .85rem 1rem; border-left: 3px solid var(--first-color); border-radius: 0 .5rem .5rem 0; background: var(--first-color-soft); font-size: .8rem; }.legal-cta { margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--radius-md); background: var(--surface-muted); }.legal-cta p { margin: .5rem 0 1rem; }
.contact-grid { display: grid; gap: 2rem; }.contact-context h2 { margin-top: .65rem; }.contact-option { display: grid; grid-template-columns: 2.3rem 1fr; gap: .8rem; margin-top: 1.5rem; }.contact-option > span { color: var(--first-color-alt); font-family: ui-monospace, monospace; font-size: .75rem; }.contact-option h3 { font-size: 1rem; }.contact-option p { margin-top: .3rem; font-size: .85rem; }.response-note { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; color: var(--text-light); font-size: .78rem; }.contact-form-card { padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); box-shadow: var(--shadow-md); }.contact-form-card form { display: grid; gap: 1rem; }.form-row { display: grid; gap: 1rem; }.contact-form-card label { display: block; margin-bottom: .35rem; color: var(--title-color); font-size: .78rem; font-weight: 680; }.form-control { min-height: 48px; border-color: var(--border-color); border-radius: .65rem; background: var(--body-color); color: var(--title-color); }.form-control:focus { border-color: var(--first-color); background: var(--body-color); color: var(--title-color); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--first-color) 18%, transparent); }.form-control::placeholder { color: var(--text-light); }.form-hint, .privacy-note { color: var(--text-light); font-size: .7rem; }.invalid-feedback { font-size: .72rem; }.alert { border-radius: .7rem; font-size: .82rem; }.alert ul { margin-bottom: 0; }.privacy-note { text-align: center; }

/* Customer authentication and account */
.nav-login-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--title-color); font-size: .78rem; font-weight: 680; }
.nav-logout-form { margin: 0; }.nav-logout-button { min-height: 44px; padding-inline: .7rem; border: 0; background: transparent; color: var(--text-color); font-size: .75rem; font-weight: 650; cursor: pointer; transition: color var(--transition), background var(--transition); }.nav-logout-button:hover { color: var(--danger-color); }.nav-logout-button:focus-visible { border-radius: .45rem; outline: 2px solid var(--first-color); outline-offset: 2px; }
.auth-body { min-height: 100dvh; background: radial-gradient(circle at 15% 10%, var(--first-color-soft), transparent 34rem), var(--body-color); }
.auth-header { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 2rem), 1080px); margin-inline: auto; }
.auth-main { width: min(calc(100% - 2rem), 510px); margin-inline: auto; padding-block: 2rem 4rem; }
.auth-card { padding: 1.4rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-color); box-shadow: var(--shadow-lg); }
.auth-intro { margin-bottom: 1.5rem; }.auth-intro h1 { margin-top: .55rem; font-size: clamp(1.8rem, 8vw, 2.65rem); }.auth-intro p { margin-top: .65rem; }
.auth-form, .account-form { display: grid; gap: 1.05rem; }.auth-form label, .account-form label { display: block; margin-bottom: .38rem; color: var(--title-color); font-size: .78rem; font-weight: 680; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.label-row a { margin-bottom: .38rem; font-size: .72rem; font-weight: 650; }
.optional-label { margin-left: .3rem; color: var(--text-light); font-size: .65rem; font-weight: 500; }
.password-field { position: relative; }.password-field .form-control { padding-right: 5.2rem; }.password-field > button { position: absolute; top: 2px; right: 2px; min-width: 4.7rem; min-height: 44px; border: 0; border-radius: .5rem; background: transparent; color: var(--first-color-alt); font-size: .7rem; font-weight: 700; cursor: pointer; }.password-field > button:hover, .password-field > button:focus-visible { background: var(--first-color-soft); outline: 2px solid var(--first-color); outline-offset: -2px; }
.check-field { min-height: 44px; display: flex !important; align-items: center; gap: .65rem; margin: 0 !important; cursor: pointer; }.check-field input { width: 1.1rem; height: 1.1rem; accent-color: var(--first-color-alt); }
.auth-submit { width: 100%; min-height: 50px; }.auth-switch, .auth-back { margin-top: 1.25rem; color: var(--text-light); font-size: .78rem; text-align: center; }.auth-switch a, .auth-back a { font-weight: 700; }
.verification-address { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.25rem; padding: .9rem; border: 1px solid var(--first-color-border); border-radius: .75rem; background: var(--first-color-soft); }.verification-address-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: .65rem; background: var(--surface-color); color: var(--first-color-alt); }.verification-address-icon svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.verification-address div { min-width: 0; display: grid; gap: .15rem; }.verification-address small { color: var(--text-light); font-size: .68rem; }.verification-address strong { overflow-wrap: anywhere; color: var(--title-color); font-size: .8rem; }.verification-steps { display: grid; gap: .7rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }.verification-steps li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: .65rem; }.verification-steps span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 50%; color: var(--first-color-alt); font-size: .68rem; font-weight: 800; }.verification-steps p { color: var(--text-color); font-size: .74rem; }.verification-help { margin-top: 1rem; color: var(--text-light); font-size: .72rem; text-align: center; }.verification-help a { font-weight: 700; }.auth-secondary-form { margin-top: .65rem; text-align: center; }.auth-secondary-form button { min-height: 44px; padding-inline: .75rem; border: 0; background: transparent; color: var(--text-light); font-size: .72rem; font-weight: 700; cursor: pointer; }.auth-secondary-form button:hover, .auth-secondary-form button:focus-visible { color: var(--danger-color); outline: 2px solid var(--first-color); outline-offset: 2px; }
.account-shell { min-height: 70dvh; }.account-heading { display: grid; gap: 1.5rem; margin-bottom: 1.6rem; }.account-heading h1 { margin-top: .55rem; font-size: clamp(2rem, 7vw, 3.6rem); }.account-heading p { max-width: 680px; margin-top: .6rem; }
.account-identity { display: flex; align-items: center; gap: .7rem; }.account-identity > span { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--first-color-soft); color: var(--first-color-alt); font-weight: 800; }.account-identity div { min-width: 0; display: flex; flex-direction: column; }.account-identity strong, .account-identity small { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-identity strong { color: var(--title-color); font-size: .78rem; }.account-identity small { color: var(--text-light); font-size: .67rem; }
.account-nav { display: flex; gap: .3rem; margin-bottom: 2rem; padding: .35rem; overflow-x: auto; border: 1px solid var(--border-color); border-radius: .8rem; background: var(--surface-color); scrollbar-width: thin; }.account-nav a { min-height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto; padding-inline: .85rem; border-radius: .55rem; color: var(--text-color); font-size: .76rem; font-weight: 680; transition: color var(--transition), background var(--transition); }.account-nav a:hover { color: var(--first-color-alt); background: var(--surface-muted); }.account-nav a.active { background: var(--first-color-soft); color: var(--first-color-alt); }
.account-alert { margin-bottom: 1.5rem; }.account-metrics { display: grid; gap: 1rem; margin-bottom: 1.5rem; }.account-metrics article { min-height: 145px; display: flex; flex-direction: column; justify-content: center; padding: 1.3rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); }.account-metrics span, .account-metrics small { color: var(--text-light); font-size: .7rem; }.account-metrics strong { margin-block: .15rem; color: var(--title-color); font-size: 2.15rem; font-variant-numeric: tabular-nums; }
.email-verification-notice { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--first-color-border); border-radius: var(--radius-md); background: var(--first-color-soft); text-align: left; }.email-verification-notice-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: .65rem; background: var(--surface-color); color: var(--first-color-alt); }.email-verification-notice-icon svg { width: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.email-verification-notice-content { min-width: 0; }.email-verification-notice-content > strong { display: block; color: var(--title-color); font-size: .82rem; }.email-verification-notice-content p { margin-top: .28rem; color: var(--text-color); font-size: .74rem; line-height: 1.6; }.email-verification-notice-content small { display: block; margin-top: .35rem; overflow-wrap: anywhere; color: var(--text-light); font-size: .65rem; }.email-verification-feedback { margin-top: .65rem; color: var(--success-color); font-size: .7rem; font-weight: 700; }.email-verification-notice-actions { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; }.email-verification-notice-actions form { margin: 0; }.email-verification-notice-actions .btn { min-height: 44px; }.email-verification-notice-actions > a { min-height: 44px; display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; }.payment-result-card .email-verification-notice { margin-top: 1.25rem; margin-bottom: 0; }
.account-content-grid, .profile-grid { display: grid; gap: 1.25rem; }.account-panel { padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); }.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }.panel-heading h2, .order-summary h2, .session-panel h2 { margin-top: .35rem; font-size: 1.25rem; }.panel-heading > a, .panel-heading > span { color: var(--text-light); font-size: .7rem; font-weight: 650; }
.library-row, .order-item-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: .85rem; padding-block: .9rem; border-top: 1px solid var(--border-color); }.library-row:first-of-type { border-top: 0; }.library-cover { width: 72px; aspect-ratio: 8 / 5; display: grid; place-items: center; overflow: hidden; border-radius: .55rem; background: var(--code-bg); color: var(--first-color); font-family: ui-monospace, monospace; font-size: .65rem; }.library-cover img { width: 100%; height: 100%; object-fit: cover; }.library-row h3, .order-item-row h3 { font-size: .9rem; }.library-row p, .order-item-row p { margin-top: .2rem; color: var(--text-light); font-size: .68rem; }.library-row .btn { grid-column: 2; justify-self: start; }
.order-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; border-top: 1px solid var(--border-color); color: inherit; }.order-row:first-of-type { border-top: 0; }.order-row > div { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }.order-row > div:last-child { align-items: end; text-align: right; }.order-row strong { color: var(--title-color); font-size: .78rem; font-variant-numeric: tabular-nums; }.order-row span:not(.status-badge), .order-row small { color: var(--text-light); font-size: .66rem; }.order-row:hover strong { color: var(--first-color-alt); }
.status-badge { width: fit-content; display: inline-flex; align-items: center; min-height: 1.55rem; padding-inline: .55rem; border: 1px solid var(--border-color); border-radius: 99px; background: var(--surface-muted); color: var(--text-color); font-size: .62rem; font-weight: 750; }.status-paid { border-color: color-mix(in srgb, var(--success-color) 35%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 12%, var(--surface-color)); color: var(--success-color); }.status-failed, .status-cancelled { border-color: color-mix(in srgb, var(--danger-color) 35%, var(--border-color)); background: color-mix(in srgb, var(--danger-color) 10%, var(--surface-color)); color: var(--danger-color); }.status-pending { border-color: hsl(38, 70%, 65%); background: hsl(38, 90%, 95%); color: hsl(32, 80%, 30%); }
[data-theme="dark"] .status-pending { border-color: hsl(38, 45%, 40%); background: hsl(38, 45%, 16%); color: hsl(38, 80%, 72%); }
.account-empty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }.account-empty > span { margin-bottom: .7rem; color: var(--first-color); font-family: ui-monospace, monospace; font-size: 1.3rem; }.account-empty h3, .account-empty h2 { font-size: 1.15rem; }.account-empty p { max-width: 430px; margin-block: .45rem 1rem; font-size: .8rem; }.account-empty.compact { min-height: 180px; }.account-pagination { margin-top: 1.5rem; }.pagination { --bs-pagination-bg: var(--surface-color); --bs-pagination-border-color: var(--border-color); --bs-pagination-color: var(--first-color-alt); --bs-pagination-hover-bg: var(--first-color-soft); --bs-pagination-active-bg: var(--first-color-alt); --bs-pagination-active-border-color: var(--first-color-alt); }
.account-back-link { margin-bottom: 1rem; font-size: .75rem; font-weight: 650; }.order-detail-grid { display: grid; gap: 1.25rem; }.order-item-row > strong { grid-column: 2; color: var(--title-color); font-size: .8rem; font-variant-numeric: tabular-nums; }.order-summary { align-self: start; }.order-summary dl { margin-block: 1rem; }.order-summary dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; border-bottom: 1px solid var(--border-color); color: var(--text-color); font-size: .76rem; }.order-summary dd { margin: 0; color: var(--title-color); font-variant-numeric: tabular-nums; }.order-summary .order-total { font-weight: 800; }.order-summary p { margin-bottom: 1rem; font-size: .72rem; }
.downloads-grid { display: grid; gap: 1.25rem; }.download-card { overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); }.download-cover { min-height: 190px; display: grid; place-items: center; overflow: hidden; background: var(--code-bg); color: var(--first-color); font-family: ui-monospace, monospace; font-size: .75rem; }.download-cover img { width: 100%; height: 100%; aspect-ratio: 8 / 5; object-fit: cover; }.download-card-body { padding: 1.25rem; }.download-card h2 { margin-top: .8rem; font-size: 1.25rem; }.download-card p { min-height: 3.2em; margin-top: .45rem; font-size: .8rem; }.download-card dl { margin-block: 1rem; }.download-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-bottom: 1px solid var(--border-color); font-size: .7rem; }.download-card dt { color: var(--text-light); font-weight: 500; }.download-card dd { margin: 0; color: var(--title-color); font-family: ui-monospace, monospace; }.download-card .license-key-row { display: grid; }.download-card .license-key-row dd { margin-top: .25rem; overflow-wrap: anywhere; font-size: .64rem; }.download-card-body > small { display: block; margin-top: .55rem; color: var(--text-light); font-size: .65rem; text-align: center; }.download-card-body .license-key-help { min-height: 0; margin-top: .75rem; color: var(--text-light); font-size: .65rem; line-height: 1.55; text-align: center; }.downloads-empty { grid-column: 1 / -1; }.order-license-key code { overflow-wrap: anywhere; color: var(--first-color-alt); font-size: .65rem; }
.profile-grid .account-form { max-width: 560px; }.inline-success { margin-bottom: 1rem; padding: .75rem; border: 1px solid color-mix(in srgb, var(--success-color) 35%, var(--border-color)); border-radius: .6rem; background: color-mix(in srgb, var(--success-color) 10%, var(--surface-color)); color: var(--success-color); font-size: .75rem; }.verification-panel > p { max-width: 560px; font-size: .78rem; line-height: 1.65; }.verification-panel > p strong { color: var(--title-color); overflow-wrap: anywhere; }.verification-status { min-height: 30px; display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; padding-inline: .6rem; border: 1px solid var(--border-color); border-radius: 99px; font-size: .65rem; font-weight: 750; }.verification-status svg { width: .95rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }.verification-status-success { border-color: color-mix(in srgb, var(--success-color) 35%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 10%, var(--surface-color)); color: var(--success-color); }.verification-status-pending { border-color: color-mix(in srgb, var(--first-color) 35%, var(--border-color)); background: var(--first-color-soft); color: var(--first-color-alt); }.verification-resend-form { margin-top: 1rem; }.verification-resend-form .btn { min-height: 46px; }.session-panel { display: flex; flex-direction: column; align-items: start; gap: 1rem; }.session-panel p { margin-top: .35rem; font-size: .78rem; }.btn-danger-outline { border: 1px solid color-mix(in srgb, var(--danger-color) 45%, var(--border-color)); background: transparent; color: var(--danger-color); }.btn-danger-outline:hover { background: var(--danger-color); color: white; }
.security-overview-panel { grid-column: 1 / -1; overflow: hidden; border-color: var(--first-color-border); background: linear-gradient(135deg, var(--first-color-soft), var(--surface-color) 62%); }.security-overview-heading { display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 1rem; }.security-overview-heading h2 { margin-top: .45rem; font-size: clamp(1.4rem, 4vw, 2rem); }.security-overview-heading p { max-width: 680px; margin-top: .45rem; font-size: .8rem; line-height: 1.65; }.security-state { min-height: 36px; display: inline-flex; align-items: center; gap: .45rem; padding-inline: .75rem; border: 1px solid var(--border-color); border-radius: 99px; font-size: .68rem; font-weight: 760; }.security-state svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.security-state-protected { border-color: color-mix(in srgb, var(--success-color) 38%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 10%, var(--surface-color)); color: var(--success-color); }.security-state-required { border-color: color-mix(in srgb, var(--danger-color) 38%, var(--border-color)); background: color-mix(in srgb, var(--danger-color) 9%, var(--surface-color)); color: var(--danger-color); }.security-summary { display: grid; gap: .65rem; margin-top: 1.2rem; }.security-summary div { min-height: 74px; display: grid; align-content: center; gap: .2rem; padding: .85rem; border: 1px solid var(--border-color); border-radius: .7rem; background: color-mix(in srgb, var(--surface-color) 88%, transparent); }.security-summary span { color: var(--text-light); font-size: .65rem; }.security-summary strong { color: var(--title-color); font-size: .8rem; }
.security-description { margin-bottom: 1rem; font-size: .78rem; line-height: 1.65; }.security-gate { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; padding: 1rem; border: 1px solid var(--first-color-border); border-radius: .8rem; background: var(--first-color-soft); }.security-gate > svg { width: 42px; height: 42px; padding: .55rem; border-radius: .6rem; background: var(--surface-color); fill: none; stroke: var(--first-color-alt); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.security-gate strong { color: var(--title-color); font-size: .78rem; }.security-gate p { margin-top: .2rem; font-size: .7rem; line-height: 1.55; }.security-gate .btn { grid-column: 1 / -1; width: fit-content; }
.security-steps { display: grid; gap: .8rem; margin: 0 0 1rem; padding: 0; list-style: none; }.security-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .7rem; }.security-steps li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--first-color-soft); color: var(--first-color-alt); font-size: .68rem; font-weight: 800; }.security-steps strong { color: var(--title-color); font-size: .76rem; }.security-steps p { margin-top: .15rem; font-size: .68rem; line-height: 1.5; }.two-factor-qr { width: fit-content; margin-block: 1rem; padding: .75rem; border: 1px solid var(--border-color); border-radius: .8rem; background: white; }.two-factor-qr svg { width: min(100%, 192px); height: auto; display: block; }.two-factor-confirm-form { margin-top: 1rem; }.recovery-codes { margin-top: 1rem; padding: .9rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--surface-muted); }.recovery-codes summary, .recovery-option summary { min-height: 44px; display: flex; align-items: center; color: var(--title-color); font-size: .75rem; font-weight: 720; cursor: pointer; }.recovery-codes > p { margin-bottom: .75rem; font-size: .68rem; line-height: 1.55; }.recovery-codes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0 0 .9rem; padding: 0; list-style: none; }.recovery-codes code { display: block; padding: .45rem; border: 1px solid var(--border-color); border-radius: .4rem; background: var(--body-color); color: var(--title-color); font-size: .67rem; text-align: center; overflow-wrap: anywhere; }.danger-action { display: flex; flex-direction: column; align-items: start; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }.danger-action strong { color: var(--title-color); font-size: .75rem; }.danger-action p { margin-top: .2rem; font-size: .68rem; line-height: 1.5; }
.passkey-list { margin-block: 1rem; }.passkey-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: .75rem; padding-block: .85rem; border-top: 1px solid var(--border-color); }.passkey-row:first-child { border-top: 0; }.passkey-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: .65rem; background: var(--first-color-soft); color: var(--first-color-alt); }.passkey-icon svg, .auth-passkey-button svg, .security-context svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.passkey-row > div { min-width: 0; display: grid; gap: .18rem; }.passkey-row strong { color: var(--title-color); font-size: .76rem; overflow-wrap: anywhere; }.passkey-row small { color: var(--text-light); font-size: .64rem; line-height: 1.45; }.passkey-row form { grid-column: 2; }.security-empty { padding: 1rem; border: 1px dashed var(--border-color); border-radius: .75rem; text-align: center; }.security-empty strong { color: var(--title-color); font-size: .78rem; }.security-empty p { margin-top: .3rem; font-size: .68rem; }.passkey-register { display: grid; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }.passkey-register label { display: block; margin-bottom: .38rem; color: var(--title-color); font-size: .78rem; font-weight: 680; }.passkey-register .form-hint { margin: 0; }.auth-separator { display: flex; align-items: center; gap: .7rem; margin-block: 1rem; color: var(--text-light); font-size: .68rem; }.auth-separator::before, .auth-separator::after { content: ""; height: 1px; flex: 1; background: var(--border-color); }.auth-passkey-button { width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid var(--first-color-border); background: var(--first-color-soft); color: var(--first-color-alt); }.auth-passkey-button:hover { border-color: var(--first-color); background: var(--first-color); color: white; }.auth-passkey-button:disabled { border-color: var(--border-color); background: var(--surface-muted); color: var(--text-light); opacity: .7; }.auth-passkey-feedback { margin-top: .6rem; color: var(--text-light); font-size: .68rem; line-height: 1.5; text-align: center; }.security-context { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .75rem; margin-bottom: 1rem; padding: .9rem; border: 1px solid var(--first-color-border); border-radius: .75rem; background: var(--first-color-soft); }.security-context > svg { width: 42px; height: 42px; padding: .55rem; border-radius: .6rem; background: var(--surface-color); color: var(--first-color-alt); }.security-context div { display: grid; align-content: center; gap: .15rem; }.security-context strong { color: var(--title-color); font-size: .76rem; }.security-context span { color: var(--text-color); font-size: .67rem; line-height: 1.45; }.recovery-option { border-top: 1px solid var(--border-color); }.recovery-option > div { padding-top: .4rem; }
.support-panel-heading { align-items: center; }.support-panel-heading .btn { color: white; font-size: .72rem; }.support-ticket-row { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--border-color); color: inherit; transition: color var(--transition), background var(--transition); }.support-ticket-row:first-of-type { border-top: 0; }.support-ticket-row:hover .support-ticket-title strong { color: var(--first-color-alt); }.support-ticket-main { min-width: 0; display: grid; gap: .4rem; }.support-ticket-title { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }.support-ticket-title strong { color: var(--title-color); font-size: .84rem; transition: color var(--transition); }.support-ticket-main > span, .support-ticket-meta { color: var(--text-light); font-size: .68rem; }.support-ticket-meta { display: none; flex: 0 0 auto; text-align: right; }.support-ticket-meta small { color: var(--first-color-alt); font-weight: 700; }
.support-status-open { border-color: color-mix(in srgb, var(--danger-color) 38%, var(--border-color)); background: color-mix(in srgb, var(--danger-color) 10%, var(--surface-color)); color: var(--danger-color); }.support-status-in_progress { border-color: hsl(38, 65%, 60%); background: hsl(38, 90%, 94%); color: hsl(32, 80%, 28%); }.support-status-waiting_customer { border-color: color-mix(in srgb, var(--first-color) 35%, var(--border-color)); background: var(--first-color-soft); color: var(--first-color-alt); }.support-status-resolved { border-color: color-mix(in srgb, var(--success-color) 35%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 10%, var(--surface-color)); color: var(--success-color); }.support-status-closed { background: var(--surface-muted); color: var(--text-color); }
[data-theme="dark"] .support-status-in_progress { border-color: hsl(38, 42%, 42%); background: hsl(38, 42%, 16%); color: hsl(38, 78%, 72%); }
.support-form-layout, .support-detail-layout { display: grid; gap: 1.25rem; }.support-form .btn, .support-reply-form .btn { width: fit-content; min-height: 46px; }.support-expectations { align-self: start; }.support-expectations h2, .support-ticket-summary h2 { margin-top: .5rem; font-size: 1.3rem; }.support-expectations ol { display: grid; gap: 1rem; margin-block: 1.35rem; padding: 0; list-style: none; }.support-expectations li { display: grid; grid-template-columns: 34px 1fr; gap: .75rem; }.support-expectations li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--first-color-soft); color: var(--first-color-alt); font-size: .7rem; font-weight: 800; }.support-expectations strong { color: var(--title-color); font-size: .78rem; }.support-expectations li p { margin-top: .2rem; font-size: .72rem; }.support-expectations .response-note { margin-top: 1rem; }
.support-thread-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); }.support-thread-header h2 { max-width: 680px; margin-top: .45rem; font-size: clamp(1.25rem, 4vw, 1.7rem); }.support-thread-header .status-badge { flex: 0 0 auto; }.support-timeline { display: grid; gap: 1rem; padding-block: 1.4rem; }.support-message { max-width: 88%; padding: 1rem; border: 1px solid var(--border-color); border-radius: .9rem; background: var(--surface-muted); }.support-message-staff { justify-self: start; border-color: var(--first-color-border); background: var(--first-color-soft); }.support-message-customer { justify-self: end; }.support-message-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .65rem; }.support-message-heading strong { color: var(--title-color); font-size: .75rem; }.support-message-heading time { color: var(--text-light); font-size: .63rem; }.support-message-body { color: var(--text-color); font-size: .8rem; line-height: 1.7; overflow-wrap: anywhere; }.support-reply-form { padding-top: 1.25rem; border-top: 1px solid var(--border-color); }.support-closed-notice { display: flex; flex-direction: column; align-items: start; gap: .35rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--surface-muted); font-size: .75rem; }.support-closed-notice strong { color: var(--title-color); }.support-closed-notice a { margin-top: .3rem; font-weight: 700; }.support-ticket-summary { align-self: start; }.support-ticket-summary dl { margin-block: 1rem; }.support-ticket-summary dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; border-bottom: 1px solid var(--border-color); font-size: .72rem; }.support-ticket-summary dt { color: var(--text-light); font-weight: 500; }.support-ticket-summary dd { margin: 0; color: var(--title-color); font-weight: 650; text-align: right; }.support-ticket-summary p { font-size: .72rem; overflow-wrap: anywhere; }

.site-footer { padding-top: 4rem; border-top: 1px solid var(--border-color); background: var(--surface-color); }.footer-newsletter { display: grid; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--first-color-border); border-radius: var(--radius-lg); background: var(--first-color-soft); }.footer-newsletter h2 { margin-top: .55rem; font-size: clamp(1.5rem, 5vw, 2.25rem); }.footer-newsletter p { margin-top: .4rem; }.newsletter-form { display: grid; gap: .6rem; align-self: center; }.newsletter-form .form-control { background: var(--surface-color); }.newsletter-consent { display: flex; align-items: flex-start; gap: .55rem; color: var(--text-color); font-size: .7rem; line-height: 1.5; }.newsletter-consent input { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--first-color-alt); }.newsletter-feedback { color: var(--text-color); font-size: .72rem; font-weight: 650; }.newsletter-feedback-error { color: var(--danger-color); }.newsletter-feedback-success { color: var(--success-color); }.footer-grid { display: grid; gap: 2rem; padding-block: 3rem 2rem; }.footer-brand p { max-width: 360px; margin-top: .8rem; font-size: .85rem; }.footer-grid h3 { margin-bottom: .7rem; color: var(--title-color); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }.footer-grid nav { display: flex; flex-direction: column; align-items: start; gap: .35rem; }.footer-grid nav a, .social-links a { min-height: 36px; display: inline-flex; align-items: center; color: var(--text-color); font-size: .8rem; }.social-links { display: flex; gap: 1rem; }.footer-bottom { display: flex; flex-direction: column; gap: .25rem; padding-block: 1rem 1.5rem; border-top: 1px solid var(--border-color); color: var(--text-light); font-size: .68rem; }
.back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-fixed); width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--first-color-border); border-radius: .75rem; background: var(--first-color-alt); color: white; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity var(--transition), visibility var(--transition), transform var(--transition); cursor: pointer; }.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }.back-to-top svg { width: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

@media (min-width: 576px) {
    .hero-actions { flex-direction: row; }
    .catalog-toolbar { grid-template-columns: 1fr auto; }
    .newsletter-form { grid-template-columns: 1fr auto; }
    .newsletter-consent, .newsletter-feedback, .newsletter-form > .visually-hidden { grid-column: 1 / -1; }
    .form-row { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: row; justify-content: space-between; }
    .auth-card { padding: 2rem; }
    .account-metrics { grid-template-columns: repeat(3, 1fr); }
    .email-verification-notice { grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; }.email-verification-notice-actions { grid-column: auto; justify-content: end; }
    .library-row { grid-template-columns: 72px minmax(0, 1fr) auto; }.library-row .btn { grid-column: auto; justify-self: auto; }
    .order-item-row { grid-template-columns: 72px minmax(0, 1fr) auto; }.order-item-row > strong { grid-column: auto; }
    .session-panel { flex-direction: row; align-items: center; justify-content: space-between; }
    .security-overview-heading { flex-direction: row; }.security-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.security-gate { grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; }.security-gate .btn { grid-column: auto; }.danger-action { flex-direction: row; align-items: center; justify-content: space-between; }.passkey-row { grid-template-columns: 42px minmax(0, 1fr) auto; }.passkey-row form { grid-column: auto; }.passkey-register { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }.passkey-register .form-hint { grid-column: 1 / -1; }
    .support-ticket-meta { display: grid; gap: .25rem; }
    .legal-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .container { width: min(calc(100% - 3rem), var(--container)); }
    .section-space { padding-block: 6.5rem; }.section-space-sm { padding-block: 4rem 6rem; }
    .split-heading { flex-direction: row; align-items: end; justify-content: space-between; }
    .products-grid, .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }.metrics-grid { grid-template-columns: repeat(4, 1fr); }.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-section { padding-block: 5rem 4rem; }.hero-lead { font-size: 1.18rem; }
    .product-detail-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: start; }.gallery-main { min-height: 430px; }
    .detail-content-grid { grid-template-columns: minmax(0, 1fr) 280px; }.tech-specs { position: sticky; top: calc(var(--header-height) + 4.2rem); }
    .feature-list { grid-template-columns: repeat(2, 1fr); }
    .featured-post { grid-template-columns: 1.1fr .9fr; padding: 1.25rem; }.featured-post-visual { min-height: 350px; }
    .article-cover { min-height: 360px; }.article-layout { grid-template-columns: 190px minmax(0, 740px); justify-content: center; }.article-aside { display: block; position: sticky; top: calc(var(--header-height) + 2rem); align-self: start; }.article-aside nav { display: grid; gap: .35rem; margin-top: .7rem; }.article-aside nav a { padding-left: .7rem; border-left: 1px solid var(--border-color); color: var(--text-light); font-size: .72rem; }.share-block { display: grid; margin-top: 1.5rem; font-size: .72rem; }.share-block span { color: var(--text-light); }.contact-grid { grid-template-columns: .8fr 1.2fr; }.contact-form-card { padding: 2rem; }
    .footer-newsletter { grid-template-columns: 1fr .8fr; padding: 2rem; }.footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); }.footer-brand { grid-column: auto; }
    .account-heading { grid-template-columns: 1fr auto; align-items: end; }.account-identity { justify-self: end; }
    .account-content-grid { grid-template-columns: 1.15fr .85fr; }.downloads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.order-detail-grid { grid-template-columns: minmax(0, 1fr) 320px; }.order-summary { position: sticky; top: calc(var(--header-height) + 1.5rem); }
    .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.session-panel { grid-column: 1 / -1; }
    .support-form-layout { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }.support-detail-layout { grid-template-columns: minmax(0, 1fr) 280px; }.support-ticket-summary { position: sticky; top: calc(var(--header-height) + 1.5rem); }
}

@media (min-width: 992px) {
    .nav-toggle { display: none; }
    .primary-nav { position: static; max-height: none; overflow: visible; flex-direction: row; align-items: center; gap: .2rem; padding: 0; border: 0; background: transparent; opacity: 1; visibility: visible; }
    .primary-nav > a { position: relative; min-height: 44px; padding-inline: .75rem; border: 0; font-size: .82rem; }.primary-nav > a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: 2px; border-radius: 2px; background: var(--first-color); transform: scaleX(0); transition: transform var(--transition); }.primary-nav > a.active::after { transform: scaleX(1); }
    .nav-actions { margin-left: .7rem; padding: 0; }
    .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 4rem; }.hero-console { min-height: 390px; }
    .products-grid, .posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .benefits-grid { grid-template-columns: repeat(4, 1fr); }
    .page-hero { padding-block: 5.5rem 3.5rem; }
    .account-nav { width: fit-content; }
    .downloads-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
    .status-dot, .brand-image, .btn-primary { forced-color-adjust: none; }
}