:root {

/*
* TYPOGRAPHY SYSTEM
* Uses fluid type scaling for responsive font sizes across viewports
* Generated via: https://www.fluid-type-scale.com/
*/

--font-family-default:  "Zalando Sans SemiExpanded", sans-serif;

/* Fluid font scale - scales between min/max viewports */
--font-size-xs: clamp(0.6076rem, 0.5964rem + 0.0498vw, 0.64rem);
--font-size-s: clamp(0.7292rem, 0.7046rem + 0.109vw, 0.8rem);
--font-size-r: clamp(0.875rem, 0.8317rem + 0.1923vw, 1rem);
--font-size-m: clamp(1.05rem, 0.9808rem + 0.3077vw, 1.25rem);
--font-size-l: clamp(1.26rem, 1.1553rem + 0.4654vw, 1.5625rem);
--font-size-xl: clamp(1.512rem, 1.3593rem + 0.6787vw, 1.9531rem);
--font-size-2xl: clamp(1.8144rem, 1.5974rem + 0.9646vw, 2.4414rem);
--font-size-3xl: clamp(2.1773rem, 1.8746rem + 1.3454vw, 3.0518rem);
--font-size-4xl: clamp(2.6127rem, 1.926rem + 3.0524vw, 4.2915rem);

/* Font weights and line heights */
--font-weight-l: 300;
--font-weight-r: 400;
--font-weight-m: 500;
--font-weight-bd: 600;
--font-weight-xbd: 900;
--lineheight-r: 1.6;
--lineheight-s: 1.3;

/*
* COLOR SYSTEM
* Light theme with accent colors for visual hierarchy
*/

--color-accent: oklch(0.6966 0.2001 44.73); /* Accent (orange) */
--color-brand: oklch(0.8338 0.1688 91.32); /* Brand (yellow) */
--color-background-default: oklch(0.1915 0.0265 276.87); /* Main background */
--color-background-alt: oklch(0.9217 0.0029 264.54); /* Alternative background */
--color-base: oklch(0.1377 0.0228 272.65); /* Darker background for contrast */
--color-border: oklch(0.5603 0.1954 258.66); /* Border and secondary accent */
--color-text-default: oklch(0.9217 0.0029 264.54); /* Primary text color */
--color-text-alt: oklch(0.1915 0.0265 276.87); /* Text on dark backgrounds */
--color-text-link: var(--color-brand);
--color-text-link-hover: var(--color-accent);
--color-text-link-decoration: var(--color-accent);
--color-button-background: var(--color-brand);
--color-button-text: var(--color-text-alt);
--color-input-background: oklch(0 0 0 / 0.15);

/*
* BORDER SYSTEM
* Consistent border widths and radii
*/

--border-width-r: 1px;
--border-width-l: 3px;
--border-radius-s: 3px;
--border-radius-r: 6px;
--border-radius-l: 12px;

/*
* LAYOUT SYSTEM
* Grid and spacing for consistent layouts
*/

--grid-12-col: repeat(12, 1fr); /* 12-column grid system */
--grid-4-5: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; /* 4+6 grid system */
--grid-column-gap: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
--grid-row-gap: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.31rem);
--max-width: 85rem; /* Maximum content width */

/*
* SPACING SYSTEM
* Fluid spacing scale for consistent vertical rhythm
*/

--spacing-xs: clamp(0.375rem, 0.355rem + 0.1vi, 0.5rem);
--spacing-s: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
--spacing-r: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
--spacing-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
--spacing-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
--spacing-xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

/* Sizing for SVG icons */
--svg-width: clamp(1.50rem, calc(1.34rem + 0.80vw), 2.06rem);

/*
* ANIMATION SYSTEM
* Standardized timing for consistent interactions
*/

--animate-duration: 1s;
--animate-duration-fast: .5s;
--animate-duration-faster: .25s;
--animate-delay: 1s;
--animate-function: ease-in;
--animate-repeat: 1;

/* Transform scales for interactive elements */
--scale-up: 1.025;
--scale-down: .98;

/* Filter effects for hover states */
--brightness-up: 1.15;
--brightness-down: .85;
--saturate-up: 1.25;
--saturate-down: .85; }

@supports (color: color(display-p3 1 1 1)) {
:root { }
}

/* ==========================================================================
UTILITY STYLES
========================================================================== */

/* Viewport configuration for responsive design */
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* CSS View Transitions API for page navigation animations */
@view-transition { navigation: auto; }

/* Text selection styling */
::-moz-selection {
background-color: oklch(0 0 0 / 0.5);
text-shadow: none; }

::selection {
background-color: oklch(0 0 0 / 0.5);
text-shadow: none; }

/* Custom scrollbar styling */
::-webkit-scrollbar {
height: 3px;
width: 3px; }

::-webkit-scrollbar-thumb {
background-color: var(--color-accent);
border-radius: 3px;
width: 4px3px }

::-webkit-scrollbar-track {
background-color: var(--color-base);
border-radius: 0; }

/* Anchor positioning for jump links */
[id] { scroll-margin-top: var(--spacing-l); }

/* Visually hidden utility for accessibility */
[data-visibility="hidden"],
.visually-hidden {
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
border: 0;
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px; }

/*
* LAYOUT UTILITIES
* Helper classes for common layout patterns
*/

/* Horizontal alignment */
[data-align-h="center"] {
text-align: center;
text-wrap: balance; /* Balances text for better readability */}
[data-align-h="right"] { text-align: right; }

/* Vertical alignment */
[data-align-v="center"] { align-items: center; }

/* Responsive visibility */
[data-visibility="small"] { display: block; }
[data-visibility="large"] { display: none; }

/* ==========================================================================
BASE ELEMENT STYLES
========================================================================== */

/* HTML base styles */
/* ================================================
   REDUCED MOTION — GLOBAL METHODOLOGY
   ================================================ */

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}

@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}

html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: 100%;
background-color: var(--color-background-default);
overflow-x: hidden;
scroll-behavior: smooth;
text-size-adjust: none; }

/* Body base styles */
body {
-webkit-font-smoothing: auto;
background-color: var(--color-background-default);
color: var(--color-text-default);
font-family: var(--font-family-default);
font-feature-settings: liga 1;
font-optical-sizing: auto;
font-size: 1em;
font-style: normal;
font-weight: var(--font-weight-l);
line-height: var(--lineheight-r);
margin: 0 auto;
max-width: var(--max-width);
padding-inline: var(--spacing-m); }

/* Enhanced ligature support */
@supports (font-variant-ligatures: common-ligatures) {

body {
font-feature-settings: normal;
font-variant-ligatures: common-ligatures; }
}

/* ==========================================================================
LINK STYLES
========================================================================== */

/* Base link styles */
a,
a:visited {
color: var(--color-text-link);
text-decoration: underline;
transform: translateY(0);
transition: all 100ms var(--animate-function); }

/* Link interaction states */
a:hover,
a:active,
a:focus-visible {
color: var(--color-text-link-hover);
text-decoration: underline;
text-decoration-color: var(--color-text-link-decoration);
text-decoration-style: solid;
text-decoration-thickness: .5px;
text-underline-offset: .25em; }

a:hover { text-decoration-color: var(--color-text-link-decoration); }
a:active,
a:focus-visible { outline: none; }

/* Tags */
.alt-tag,
.alt-tag:visited {
border: var(--border-width-r) solid var(--color-text-link);
border-radius: var(--border-radius-r);
color: var(--color-text-default);
display: inline-block;
font-size: var(--font-size-s);
padding: var(--spacing-s);
text-decoration: none; }

.alt-tag:hover {
border-color: var(--color-accent);
color: var(--color-text-default);
text-decoration: none; }

/* ==========================================================================
TYPOGRAPHY COMPONENTS
========================================================================== */

/*
* HEADING STYLES
* Consistent heading hierarchy with variable font settings
*/

h1,
h2,
h3,
h4 {
font-family: var(--font-family-default);
font-style: normal;
font-weight: var(--font-weight-xbd);
line-height: var(--lineheight-s);
margin-block: 0 var(--spacing-r);
text-wrap: balance; /* Prevents single words on last line */}

/* Heading size scale */
h1 {
font-size: var(--font-size-3xl);
margin-block: 0 var(--spacing-l); }

h2 {
font-size: var(--font-size-xl);
margin-block: 0 var(--spacing-m); }

h3 {
font-size: var(--font-size-l);
margin-block: 0 var(--spacing-r); }


h4 {
font-size: var(--font-size-m);
margin-block: 0 var(--spacing-r); }

/* Heading link styles */
h2 a:hover,
h2 a:active,
h3 a:hover,
h3 a:active {
color: var(--color-text-link-hover);
text-decoration: underline;
text-decoration-color: var(--color-text-link-decoration);
text-decoration-style: solid;
text-decoration-thickness: .5px;
text-underline-offset: .075em; }

h1 span,
h2 span,
h3 span,
h4 span {
font-size: var(--font-size-s); }

/* Accent color for headings */
:heading .alt-accent { color: var(--color-accent); }

[data-icon] {
align-items: center;
display: flex;
gap: var(--spacing-r);
margin-block: var(--spacing-s); }

/*
* PARAGRAPH STYLES
* Basic paragraph formatting with typographic refinements
*/

p {
font-family: var(--font-family-default);
font-size: var(--font-size-r);
orphans: 3; }

/* Heading + paragraph spacing */
h3:has(+ p) { margin-block-end: 0; }

h3 + p { margin-block-start: var(--spacing-s); }

h3 .btn-heading {
all: unset;
color: var(--color-text-link);
cursor: pointer;
display: inline;
font-size: var(--font-size-r);
line-height: inherit;
text-wrap: balance; }

h3 .btn-heading:hover,
h3 .btn-heading:focus-visible,
h3 .btn-heading:active {
all: unset;
color: var(--color-text-link-hover);
cursor: pointer;
display: inline;
font-size: var(--font-size-r);
line-height: inherit;
text-wrap: balance; }

/* ==========================================================================
TEXT TREATMENT CLASSES
========================================================================== */

/*
* TEXT VARIANT CLASSES
* Utility classes for specific text treatments
*/

.alt-accent { color: var(--color-accent); } /* Accent color text */

.alt-lede {
font-family: var(--font-family-default);
font-size: var(--font-size-l);
font-weight: var(--font-weight-m); }

.alt-uppercase {
font-family: var(--font-family-default);
text-transform: uppercase; }

/* ==========================================================================
QUOTE COMPONENTS
========================================================================== */

/*
* BLOCKQUOTE STYLES
* Styled quote blocks with citation support
*/

blockquote {
margin: 0;
padding: 0;
position: relative; }

blockquote p {
font-weight: var(--font-weight-m);
margin-block: 0 var(--spacing-r); }

blockquote footer {
font-size: var(--font-size-s);
font-style: normal;
font-weight: var(--font-weight-l); }

blockquote svg {
margin-block: 0 var(--spacing-s);
max-inline-size: 48px; }

/* Medium quote variant */
blockquote[data-variant="m"] {
margin-block: var(--spacing-m); }

blockquote[data-variant="m"] svg {
display: block;
inline-size: 48px;
margin-block-end: var(--spacing-s);
margin-inline: auto; }

blockquote[data-variant="m"] p {
font-size: var(--font-size-m);
font-weight: var(--font-weight-bd);
text-align: center;
line-height: 1.1; }

blockquote[data-variant="m"] footer {
text-align: center; }

/* ==========================================================================
LIST COMPONENTS
========================================================================== */

/*
* LIST STYLES
* Various list types with custom markers
*/

/* Unordered lists with custom bullet */
ul {
font-size: var(--font-size-r);
list-style-type: none;
margin-block: 0 var(--spacing-r);
margin-inline: 0;
padding-inline-start: 0; }

ul li:before {
color: var(--color-text-default);
content: "• "; }

/* Ordered lists */
ol {
font-size: var(--font-size-r);
margin-block: 0 var(--spacing-r);
margin-inline: 0;
padding-inline-start: 0; }

ol li {
margin-block-end: var(--spacing-s); }

/* Remove default markers from styled lists */
ul[class*="alt-"] li:before,
ol[class*="alt-"] li:before {
content: "";
display: none; }

/* Inline list variant */
.alt-inline li { display: inline-block; }
.alt-inline li:not(:last-child) { margin-inline-end: var(--spacing-r); }

/* Tabs variant */
[data-tabs="using"] .alt-tabs {
display: flex;
gap: var(--spacing-s);
justify-content: center;
margin-block: -1rem var(--spacing-m); }

[data-tabs="using"] .alt-tabs li { display: inline-block; }
[data-tabs="using"] .alt-tabs li:not(:last-child) { margin-inline-end: var(--spacing-r); }

[data-tabs="using"] .alt-tabs a {
font-size: var(--font-size-r);
font-weight: var(--font-weight-m);
text-decoration: none; }

[data-tabs="using"] .alt-tabs a:hover {
color: var(--color-text-link-hover); }

[data-tabs="using"] .alt-tabs a {
color: var(--color-text-default);
transition: all var(--animate-duration-faster) var(--animate-function); }

[data-tabs="using"]:has(#install:target) .alt-tabs a[href="#install"],
[data-tabs="using"]:has(#connect:target) .alt-tabs a[href="#connect"],
[data-tabs="using"]:has(#open:target) .alt-tabs a[href="#open"],
[data-tabs="using"]:has(#edit:target) .alt-tabs a[href="#edit"],
[data-tabs="using"]:has(#sync:target) .alt-tabs a[href="#sync"],
[data-tabs="using"]:has(#share:target) .alt-tabs a[href="#share"] {
color: var(--color-text-link-hover); }

[data-tabs="using"]:not(:has(:target)) .alt-tabs a[href="#install"] {
color: var(--color-text-default); }

#banner-using-svg .using-cog {
animation: using-cog-spin 18s linear infinite;
rotate: 0deg;
transform-box: fill-box;
transform-origin: 50% 50%; }

#banner-using-svg .using-cog[data-direction="counter"] {
animation-name: using-cog-spin-counter; }

#banner-using-svg .using-bubble-particle {
opacity: 0;
pointer-events: none;
scale: var(--using-bubble-scale-start, .65);
transform-box: fill-box;
transform-origin: 50% 50%;
translate: 0 0; }

#banner-using-svg .using-bubble-particle[data-rise-active="true"] {
animation: using-bubble-rise var(--using-bubble-duration, 4.4s) ease-out 1 both; }

#banner-using-svg .using-file-particle {
opacity: 0;
pointer-events: none;
rotate: var(--using-file-rotate-start, 0deg);
scale: var(--using-file-scale-start, 1);
transform-box: fill-box;
transform-origin: 50% 50%;
translate: var(--using-file-position-x, 0px) var(--using-file-position-y, 0px); }

#banner-using-svg .using-file-particle[data-run-active="true"] {
animation: using-file-run var(--using-file-duration, 8.4s) linear 1 both; }

#banner-using-svg .using-file-lane-particle {
opacity: 0;
pointer-events: none;
rotate: var(--using-lane-file-rotate-start, 0deg);
scale: var(--using-lane-file-scale-start, 1);
transform-box: fill-box;
transform-origin: 50% 50%;
translate: var(--using-lane-file-position-x, 0px) var(--using-lane-file-position-y, 0px); }

#banner-using-svg .using-file-lane-particle[data-run-active="true"] {
animation: using-file-lane-run var(--using-lane-file-duration, 7.4s) linear 1 both; }

#banner-using-svg #using-rickroll {
opacity: 0;
transition: opacity .25s ease-in-out;
visibility: hidden; }

#banner-using-svg #using-trigger {
cursor: help; }

#banner-using-svg[data-rickroll="on"] #using-rickroll {
opacity: 1;
visibility: visible; }

#banner-using-svg[data-bubbles-active="true"] .using-bubbles > circle:not(.using-bubble-particle) {
opacity: 0; }

#banner-using-svg .using-dial-face {
rotate: 0deg;
transform-origin: 26px 28.5px;
transition: rotate .45s ease-in-out; }

#banner-using-svg .using-dial-hand {
rotate: 0deg;
transform-origin: 38.5px 38.5px;
transition: rotate .45s ease-in-out; }

@keyframes using-cog-spin {
0% {
rotate: 0deg; }

100% {
rotate: 360deg; }
}

@keyframes using-cog-spin-counter {
0% {
rotate: 0deg; }

100% {
rotate: -360deg; }
}

@keyframes using-bubble-rise {
0% {
opacity: 0;
scale: var(--using-bubble-scale-start, .65);
translate: 0 0; }

20% {
opacity: var(--using-bubble-opacity-peak, .8);
scale: var(--using-bubble-scale-mid, .95);
translate: calc(var(--using-bubble-drift-mid, 0px) * .4) calc(var(--using-bubble-rise, 110px) * -.18); }

55% {
opacity: var(--using-bubble-opacity-peak, .8);
scale: var(--using-bubble-scale-mid, .95);
translate: var(--using-bubble-drift-mid, 0px) calc(var(--using-bubble-rise, 110px) * -.58); }

100% {
opacity: 0;
scale: var(--using-bubble-scale-end, 1.15);
translate: var(--using-bubble-drift-end, 0px) calc(var(--using-bubble-rise, 110px) * -1); }
}

@keyframes using-file-run {
0% {
opacity: 0;
rotate: var(--using-file-rotate-start, 0deg);
scale: var(--using-file-scale-start, 1);
translate: var(--using-file-position-x, 0px) var(--using-file-position-y, 0px); }

12% {
opacity: var(--using-file-opacity-peak, .88);
rotate: calc(var(--using-file-rotate-start, 0deg) + (var(--using-file-rotate-travel, 16deg) * .18));
scale: var(--using-file-scale-start, 1);
translate: calc(var(--using-file-position-x, 0px) + (var(--using-file-run, 280px) * .12)) calc(var(--using-file-position-y, 0px) + (var(--using-file-drift-mid, 0px) * .25)); }

68% {
opacity: var(--using-file-opacity-peak, .88);
rotate: calc(var(--using-file-rotate-start, 0deg) + (var(--using-file-rotate-travel, 16deg) * .72));
scale: var(--using-file-scale-mid, .98);
translate: calc(var(--using-file-position-x, 0px) + (var(--using-file-run, 280px) * .68)) calc(var(--using-file-position-y, 0px) + var(--using-file-drift-mid, 0px)); }

100% {
opacity: 0;
rotate: calc(var(--using-file-rotate-start, 0deg) + var(--using-file-rotate-travel, 16deg));
scale: var(--using-file-scale-end, .96);
translate: calc(var(--using-file-position-x, 0px) + var(--using-file-run, 280px)) calc(var(--using-file-position-y, 0px) + var(--using-file-drift-end, 0px)); }
}

@keyframes using-file-lane-run {
0% {
opacity: 0;
rotate: var(--using-lane-file-rotate-start, 0deg);
scale: var(--using-lane-file-scale-start, 1);
translate: var(--using-lane-file-position-x, 0px) var(--using-lane-file-position-y, 0px); }

10% {
opacity: calc(var(--using-lane-file-opacity-peak, .82) * .55);
rotate: calc(var(--using-lane-file-rotate-start, 0deg) + (var(--using-lane-file-rotate-travel, 18deg) * .12));
scale: var(--using-lane-file-scale-start, 1);
translate: calc(var(--using-lane-file-position-x, 0px) + (var(--using-lane-file-run, 320px) * .1)) calc(var(--using-lane-file-position-y, 0px) + (var(--using-lane-file-drift-mid, 0px) * .18)); }

20% {
opacity: var(--using-lane-file-opacity-peak, .82);
rotate: calc(var(--using-lane-file-rotate-start, 0deg) + (var(--using-lane-file-rotate-travel, 18deg) * .24));
scale: var(--using-lane-file-scale-start, 1);
translate: calc(var(--using-lane-file-position-x, 0px) + (var(--using-lane-file-run, 320px) * .2)) calc(var(--using-lane-file-position-y, 0px) + (var(--using-lane-file-drift-mid, 0px) * .35)); }

72% {
opacity: var(--using-lane-file-opacity-peak, .82);
rotate: calc(var(--using-lane-file-rotate-start, 0deg) + (var(--using-lane-file-rotate-travel, 18deg) * .74));
scale: var(--using-lane-file-scale-mid, 1);
translate: calc(var(--using-lane-file-position-x, 0px) + (var(--using-lane-file-run, 320px) * .72)) calc(var(--using-lane-file-position-y, 0px) + (var(--using-lane-file-drift-mid, 0px) * .76)); }

84% {
opacity: calc(var(--using-lane-file-opacity-peak, .82) * .3);
rotate: calc(var(--using-lane-file-rotate-start, 0deg) + (var(--using-lane-file-rotate-travel, 18deg) * .86));
scale: var(--using-lane-file-scale-mid, 1);
translate: calc(var(--using-lane-file-position-x, 0px) + (var(--using-lane-file-run, 320px) * .84)) calc(var(--using-lane-file-position-y, 0px) + (var(--using-lane-file-drift-end, 0px) * .55)); }

92% {
opacity: 0;
rotate: calc(var(--using-lane-file-rotate-start, 0deg) + (var(--using-lane-file-rotate-travel, 18deg) * .94));
scale: var(--using-lane-file-scale-end, .95);
translate: calc(var(--using-lane-file-position-x, 0px) + (var(--using-lane-file-run, 320px) * .92)) calc(var(--using-lane-file-position-y, 0px) + (var(--using-lane-file-drift-end, 0px) * .82)); }

100% {
opacity: 0;
rotate: calc(var(--using-lane-file-rotate-start, 0deg) + var(--using-lane-file-rotate-travel, 18deg));
scale: var(--using-lane-file-scale-end, .95);
translate: calc(var(--using-lane-file-position-x, 0px) + var(--using-lane-file-run, 320px)) calc(var(--using-lane-file-position-y, 0px) + var(--using-lane-file-drift-end, 0px)); }
}

/* Directory */

.alt-directory {
max-block-size: 50vh;
overflow-y: auto; }

.alt-directory a {
display: flex;
font-size: var(--font-size-s);
gap: var(--spacing-r);
padding-block: var(--spacing-xs);
text-decoration: none; }

.alt-directory svg {
display: block;
inline-size: 24px; }

/* Logos */
.alt-logos {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-r);
justify-content: center;
margin-block: var(--spacing-m);
margin-inline: var(--spacing-l);
padding: 0; }

.alt-logos > * {
flex: 0 1 150px;
outline:1px solid red; }

/* Description lists */

dl {
margin-block: 0 var(--spacing-r);
margin-inline: 0;
padding: 0; }

dt {
font-size: var(--font-size-r);
font-weight: var(--font-weight-m);
margin-block: 0 var(--spacing-s);
margin-inline: 0;
padding-inline-start: 0; }

dd {
font-size: var(--font-size-s);
margin-block: 0 var(--spacing-r);
margin-inline: 0;
padding-inline-start: 0; }

/* ==========================================================================
TEXT-LEVEL SEMANTICS
========================================================================== */

/* Small text for disclaimers, captions, etc. */
small {
display: block;
font-size: var(--font-size-xs);
line-height: var(--lineheight-r);
margin-block-end: var(--spacing-s); }

/* Time element styling */
time {
display: block;
font-size: var(--font-size-r);
margin-block-end: 0;
text-transform: uppercase; }

/* ==========================================================================
HORIZONTAL RULES
========================================================================== */

/* Base horizontal rule */
hr {
border: 0;
border-block-start: var(--border-width-r) solid var(--color-border);
clear: both;
display: block;
height: 1px;
margin-block: var(--spacing-m);
margin-inline: 0;
padding: 0; }

/* Width variants */
[data-width="l"] { border-width: var(--border-width-l); }

/* Functional variants */
[data-function="spacer"] {
border-block-start: 0;
grid-column: 1 / -1;
margin-block: var(--spacing-r);
margin-inline: 0; }

/* ==========================================================================
MEDIA COMPONENTS
========================================================================== */

/*
* FIGURE AND IMAGE STYLES
* Responsive images with captions
*/

figure {
margin-block: var(--spacing-m);
margin-inline: 0;
padding: 0; }

figure img { margin-block: 0 var(--spacing-s); }

figcaption {
font-size: var(--font-size-s);
font-style: normal; }

/* Responsive media elements */
img,
video {
block-size: auto;
inline-size: 100%;
max-inline-size: 100%; }

img { border-width: 0; }

video {
border-radius: var(--border-radius-r);
margin-bottom: var(--spacing-r); }

.alt-icon path {
fill: var(--color-text-default); }

/* ==========================================================================
FORM COMPONENTS
========================================================================== */

/* Form base styles */
form {
font-family: var(--font-family-default);
margin: 0;
padding: 0; }

fieldset {
border-width: 0;
padding: var(--spacing-s) 0 0; }

/* Label styles */
label {
display: inline-block;
font-family: inherit;
font-size: var(--font-size-s);
font-weight: var(--font-weight-m);
line-height: 1;
margin-block-end: var(--spacing-s);
margin-block-start: 0;
margin-inline: 0; }

/* Form input styles */
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"],
textarea {
-webkit-appearance: none;
appearance: none;
backdrop-filter: blur(0);
background-color: var(--color-input-background);
border: var(--border-width-r) solid var(--color-border);
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
caret-color: var(--color-accent);
color: var(--color-text-default);
display: inline-block;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
inline-size: 100%;
margin: 0;
padding: var(--spacing-s);
transition: all var(--animate-duration-faster) var(--animate-function); }

/* Form input states */
[type="email"]:hover,
[type="number"]:hover,
[type="password"]:hover,
[type="search"]:hover,
[type="tel"]:hover,
[type="text"]:hover,
[type="url"]:hover,
textarea:hover {
border-color: var(--color-border); }

[type="email"]:focus,
[type="number"]:focus,
[type="password"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="text"]:focus,
[type="url"]:focus,
textarea:focus {
accent-color: var(--color-accent);
backdrop-filter: blur(2px);
background-color: var(--color-input-background);
border-color: var(--color-accent);
color: var(--color-text-default);
outline: 0; }

textarea { min-height: 12rem; }

/* Placeholder styling */
input[type]::placeholder {
color: var(--color-text-default);
font-family: var(--font-family-default);
font-size: var(--font-size-s); }

input:focus::-webkit-input-placeholder {
opacity: 0;
transition: opacity .5s .25s ease !important; }

input:focus::placeholder {
opacity: 0;
transition: opacity .5s .25s ease !important; }

.radio-control {
align-items: center;
display: grid;
gap: 0 var(--spacing-s);
grid-template-columns: 24px 8rem 1fr; }

input[type="radio"] {
-webkit-appearance: none;
appearance: none;
background-color: var(--color-background-default);
block-size: 24px;
border: var(--border-width-l) solid currentColor;
border-radius: 50%;
color: currentColor;
display: grid;
inline-size: 24px;
margin: 0;
place-content: center;
translate: 0 -0.075em; }

input[type="radio"]::before {
content: "";
background-color: CanvasText;
block-size: .65em;
border-radius: 50%;
box-shadow: inset 1em 1em var(--color-accent);
inline-size: .65em;
scale: 0;
transition: 120ms transform ease-in-out; }

input[type="radio"]:checked::before {
scale: 1; }

input[type="radio"]:focus {
outline: max(2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em); }

select {
appearance: none;
background-color: transparent;
border: none;
color: var(--color-text-default);
cursor: inherit;
font-family: inherit;
font-size: inherit;
padding-block: 0;
padding-inline: 0 1em;
margin: 0;
outline: none;
inline-size: 100%;
line-height: inherit; }

select::-ms-expand {
display: none; }

.select {
align-items: center;
background-color: var(--color-input-background);
border: var(--border-width-r) solid var(--color-border);
border-radius: var(--border-radius-r);
box-sizing: border-box;
color: var(--color-text-default);
cursor: pointer;
display: grid;
font-size: inherit;
grid-template-areas: "select";
inline-size: 100%;
line-height: 1.1;
padding: var(--spacing-s); }

.select::after {
background-color: var(--color-border);
block-size: 0.5em;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
content: "";
inline-size: 0.8em;
justify-self: end; }

select, .select:after { grid-area: select; }

.buy-custom-input {
align-items: center;
display: flex;
gap: var(--spacing-r); }

.buy-custom-input small {
margin: 0; }
/* ==========================================================================
BUTTON COMPONENTS
========================================================================== */

/*
* BUTTON STYLES
* Interactive button elements with variants
*/

button {
align-items: center;
background-color: var(--color-button-background);
border: none;
border-radius: var(--border-radius-s);
box-shadow: none;
color: var(--color-button-text);
cursor: pointer;
display: inline-flex;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-weight: var(--font-weight-m);
gap: 5px;
inline-size: fit-content;
line-height: 1;
margin: 0;
padding-block: 15px;
padding-inline: var(--spacing-r);
scale: 1;
text-align: center;
touch-action: manipulation;
transition: all var(--animate-duration-faster) var(--animate-function);
-webkit-user-select: none;
user-select: none;
white-space: nowrap; }

button:active,
button:focus,
button:hover {
background-color: var(--color-text-link-hover);
color: var(--color-text-default);
scale: var(--scale-down);
text-decoration: none; }

button svg path {
fill: var(--color-text-alt);
transition: all var(--animate-duration-faster) var(--animate-function); }

button:hover svg path {
fill: var(--color-text-default); }

.btn,
.btn:visited {
background-color: var(--color-button-background);
border: none;
border-radius: var(--border-radius-s);
box-shadow: none;
color: var(--color-button-text);
cursor: pointer;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-weight: var(--font-weight-m);
inline-size: fit-content;
line-height: 1;
margin: 0;
padding-block: 15px;
padding-inline: var(--spacing-r);
scale: 1;
text-align: center;
text-decoration: none;
touch-action: manipulation;
transition: all var(--animate-duration-faster) var(--animate-function);
-webkit-user-select: none;
user-select: none;
white-space: nowrap; }

/* Button interaction states */
.btn:active,
.btn:focus,
.btn:hover {
background-color: var(--color-text-link-hover);
color: var(--color-text-default);
scale: var(--scale-down);
text-decoration: none; }

.btn[data-variant="s"] {
padding-block: 7px;
padding-inline: var(--spacing-s); }

.alt-btn {
margin-block-start: var(--spacing-m); }




/* ==========================================================================
TABS
========================================================================== */

[data-tab-list] {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-s);
margin-block: var(--spacing-r); }

[data-tab-button] {
background-color: transparent;
border: var(--border-width-r) solid var(--color-border);
color: inherit; }

[data-tab-button]:hover {
background-color: transparent;
border: var(--border-width-r) solid var(--color-accent);
color: inherit; }

[data-tab-button][data-active="true"] {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-text-alt); }

[data-tab-panel] > :first-child {
margin-block-start: 0; }

/* ==========================================================================
TABLE
========================================================================== */

table {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
font-family: inherit;
margin: 0 0 var(--spacing-r);
width: 100%; }

thead td,
thead th {
border-bottom: var(--border-width-l) solid var(--color-border); }

thead th:has(span) {
text-align: center; }

thead th span {
display: block;
font-size: 8px; }

tbody td,
tbody th {
border-bottom: var(--border-width-r) solid var(--color-border); }

tbody tr:last-of-type td,
tbody tr:last-of-type th {
border-bottom-width: 0; }

tbody th {
text-align: left;
white-space: unset; }

tbody td {
position: relative;
text-align: center; }

tbody td sup {
display: block;
font-size: 8px;
position: absolute;
top: 5px;
right: 5px; }

tbody td img {
inline-size: 28px; }

th,
td {
font-size: var(--font-size-s);
padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) 0;
vertical-align: middle; }

td:first-of-type {
padding-left: var(--spacing-s); }

th {
font-family: var(--font-family-default);
font-weight: var(--font-weight-m);
text-transform: uppercase; }



/* ==========================================================================
FONT SIZE UTILITIES
========================================================================== */

/* Size utility classes for consistent typography */
[data-size="2xs"] { font-size: var(--font-size-2xs); }
[data-size="xs"] { font-size: var(--font-size-xs); }
[data-size="s"] { font-size: var(--font-size-s); }
[data-size="r"] { font-size: var(--font-size-r); }
[data-size="m"] { font-size: var(--font-size-m); }
[data-size="l"] { font-size: var(--font-size-l); }
[data-size="xl"] { font-size: var(--font-size-xl); }
[data-size="2xl"] { font-size: var(--font-size-2xl); }

[data-size="3xl"] {
font-size: var(--font-size-3xl);
line-height: 1.1; }

/* ==========================================================================
TEXT COLUMN LAYOUT
========================================================================== */

/* Multi-column text layout */
.alt-columns {
column-width: 22em;
gap: var(--grid-column-gap);
margin-trim: block; /* Trims margin at block boundaries */}

.alt-columns p {
font-size: var(--font-size-s);
margin-block-start: 0; }

/* ==========================================================================
NAVIGATION COMPONENTS
========================================================================== */

/* Main navigation */
nav ul {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: var(--font-size-l);
justify-content: center;
margin: 0;
color: var(--color-border); }

nav li {
margin: 0 var(--spacing-s); }

nav li:before {
content: "";
display: none; }

nav a,
nav a:hover,
nav a:focus { text-decoration: none; }

nav a:not(.btn),
nav a:not(.btn):visited,
nav a:not(.btn):hover {
color: var(--color-text-link);
display: inline-block;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
padding-block-end: 4px;
position: relative;
text-align: center;
text-decoration: none; }

/* ============= BANNER COMPONENT ========== */

#banner-logo {
margin-block: var(--spacing-l) var(--spacing-r); }

#banner-logo a {
display: block; }

#banner-logo path {
color: var(--color-text-default); }

#banner-logo:hover path {
color: var(--color-text-link-hover); }

#img-index-scene {
display: block;
overflow: visible;
width: 100%; }

#index-banner h1 {
margin-block-end: 0; }

/* ============= HEADER COMPONENT ========== */

[role="banner"] {
align-items: center;
margin-block: var(--spacing-r) var(--spacing-l); }

/* ============= FOOTER COMPONENT ========== */

@keyframes footer-logo-shake {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-8deg); }
40% { transform: rotate(6deg); }
60% { transform: rotate(-4deg); }
80% { transform: rotate(2deg); } }

[role="contentinfo"] {
margin-block: var(--spacing-l); }

#footer-logo {
display: block;
margin-block-end: var(--spacing-s); }

#footer-logo a {
display: block;
margin-inline: auto;
max-inline-size: 200px;
scale: 1;
transform-origin: center bottom;
transition: all var(--animate-duration-faster) var(--animate-function);
translate: 0 0; }

#footer-logo a:hover {
translate: 0 -10px; }

#footer-logo a:hover .logo-mark {
animation: footer-logo-shake .45s ease-in-out 1;
transform-box: fill-box;
transform-origin: center center; }

#footer-logo a:active,
#footer-logo a:focus {
scale: var(--scale-down); }

/* ============= FAQS COMPONENT ========== */

@keyframes svg-tail-shake {
0%, 88%, 100% { transform: rotate(0deg); }
90% { transform: rotate(-8deg); }
92% { transform: rotate(6deg); }
94% { transform: rotate(-4deg); }
96% { transform: rotate(2deg); }
98% { transform: rotate(-1deg); } }

@keyframes svg-arm-wave {
0%, 100% { transform: rotate(0deg); }
4% { transform: rotate(-5deg); }
8% { transform: rotate(-10deg); }
12%, 54% { transform: rotate(-15deg); }
60% { transform: rotate(-10deg); }
66% { transform: rotate(-5deg); }
72% { transform: rotate(0deg); } }

@keyframes svg-eyelid-blink {
0%, 7%, 9%, 31%, 33%, 34%, 58%, 60%, 72%, 74%, 78%, 80%, 100% { fill: oklch(1 0 0); }
8%, 32%, 59%, 73%, 79% { fill: oklch(0.8433 0.1707 85.12); } }

@keyframes svg-pupil-blink {
0%, 7%, 9%, 31%, 33%, 34%, 58%, 60%, 72%, 74%, 78%, 80%, 100% { opacity: 1; }
8%, 32%, 59%, 73%, 79% { opacity: 0; } }

@keyframes svg-wink {
0%, 24%, 36%, 72%, 84%, 100% { opacity: 0; }
25%, 26%, 27%, 28%, 29%, 30%, 31%, 32%, 33%, 34%, 73%, 74%, 75%, 76%, 77%, 78%, 79%, 80%, 81%, 82% { opacity: 1; }
35%, 83% { opacity: 0; } }

[role="contentinfo"] {
display: grid;
gap: 0 var(--grid-column-gap);
grid-template-columns: 1fr 1fr; }

[role="contentinfo"] > *:nth-child(5) {
grid-column: 1 / -1;
padding-block-start: var(--spacing-r);
text-align: center; }

[role="contentinfo"] li a {
font-size: var(--font-size-s);
text-decoration: none; }

[role="contentinfo"] small {
grid-column: 1 / -1;
text-align: center; }



/* ==========================================================================
CTA
========================================================================== */

.alt-cta {
display: inline-flex;
gap: var(--spacing-r);
margin-block-start: var(--spacing-s); }

.alt-cta > * {
flex: 1; }

.alt-trial > h2 {
font-size: var(--font-size-m);
margin-block: 0; }

.alt-trial > p {
font-size: var(--font-size-s);
margin-block: 0; }

[data-download-link][aria-disabled="true"],
[data-download-link]:disabled {
cursor: not-allowed;
filter: saturate(var(--saturate-down));
opacity: .4;
pointer-events: none; }



/* ==========================================================================
CUSTOMERS
========================================================================== */

.enterprise-pile {
translate: 0 75px; }

.enterprise-pile use[href^="#enterprise-file-"] {
opacity: 1;
pointer-events: none;
transition: opacity .18s ease-out; }

.enterprise-pile use[href^="#enterprise-file-"][data-stack-visible="false"] {
opacity: 0; }

.enterprise-file-rise-particle {
opacity: 0;
rotate: var(--enterprise-file-rotate-start, 0deg);
scale: var(--enterprise-file-scale-start, .98);
transform-box: fill-box;
transform-origin: 50% 50%;
translate: var(--enterprise-file-position-x, 0px) var(--enterprise-file-position-y, 0px); }

.enterprise-file-fall-particle {
opacity: 0;
rotate: var(--enterprise-file-fall-rotate-start, 0deg);
scale: var(--enterprise-file-fall-scale-start, .98);
transform-box: fill-box;
transform-origin: 50% 50%;
translate: var(--enterprise-file-fall-position-x, 0px) var(--enterprise-file-fall-position-y, 0px); }

@media (prefers-reduced-motion: no-preference) {
.enterprise-file-rise-particle[data-rise-active="true"] {
animation: enterprise-file-rise var(--enterprise-file-duration, 10s) linear 1 both; }

.enterprise-file-fall-particle[data-fall-active="true"] {
animation: enterprise-file-fall var(--enterprise-file-fall-duration, 10s) linear 1 both; }
}

@media (prefers-reduced-motion: no-preference) {
.enterprise-pile {
animation: enterprise-pile-pump 4.8s cubic-bezier(.45, 0, .55, 1) infinite; }

.enterprise-pile:nth-of-type(1) {
animation-delay: -.6s;
animation-duration: 3.6s;
animation-timing-function: cubic-bezier(.42, .08, .58, .98); }

.enterprise-pile:nth-of-type(2) {
animation-delay: -2.8s;
animation-duration: 5.1s;
animation-timing-function: cubic-bezier(.5, 0, .45, 1); }

.enterprise-pile:nth-of-type(3) {
animation-delay: -1.7s;
animation-duration: 4.3s;
animation-timing-function: cubic-bezier(.38, .12, .6, .96); }

.enterprise-pile:nth-of-type(4) {
animation-delay: -4.1s;
animation-duration: 6.9s;
animation-timing-function: cubic-bezier(.48, .02, .52, 1); }

.enterprise-pile:nth-of-type(5) {
animation-delay: -3.3s;
animation-duration: 5.9s;
animation-timing-function: cubic-bezier(.4, .1, .62, .94); }
}

@keyframes enterprise-pile-pump {
0% {
translate: 0 75px; }

50% {
translate: 0 15px; }

100% {
translate: 0 75px; } }

@keyframes enterprise-file-rise {
0% {
opacity: 0;
rotate: var(--enterprise-file-rotate-start, 0deg);
scale: var(--enterprise-file-scale-start, .98);
translate: var(--enterprise-file-position-x, 0px) var(--enterprise-file-position-y, 0px); }

14% {
opacity: var(--enterprise-file-opacity-peak, .86); }

62% {
opacity: var(--enterprise-file-opacity-mid, .42);
rotate: var(--enterprise-file-rotate-mid, 18deg);
scale: var(--enterprise-file-scale-mid, .88);
translate: calc(var(--enterprise-file-position-x, 0px) + var(--enterprise-file-drift-mid, 0px)) calc(var(--enterprise-file-position-y, 0px) + (var(--enterprise-file-rise, 720px) * -.62)); }

84% {
opacity: 0;
rotate: var(--enterprise-file-rotate-end, 36deg);
scale: var(--enterprise-file-scale-end, .76);
translate: calc(var(--enterprise-file-position-x, 0px) + var(--enterprise-file-drift-end, 0px)) calc(var(--enterprise-file-position-y, 0px) + (var(--enterprise-file-rise, 720px) * -.84)); }

100% {
opacity: 0;
rotate: var(--enterprise-file-rotate-end, 36deg);
scale: var(--enterprise-file-scale-end, .76);
translate: calc(var(--enterprise-file-position-x, 0px) + var(--enterprise-file-drift-end, 0px)) calc(var(--enterprise-file-position-y, 0px) + (var(--enterprise-file-rise, 720px) * -1)); } }

@keyframes enterprise-file-fall {
0% {
opacity: 0;
rotate: var(--enterprise-file-fall-rotate-start, 0deg);
scale: var(--enterprise-file-fall-scale-start, .98);
translate: var(--enterprise-file-fall-position-x, 0px) var(--enterprise-file-fall-position-y, 0px); }

12% {
opacity: var(--enterprise-file-fall-opacity-peak, .82); }

62% {
opacity: var(--enterprise-file-fall-opacity-mid, .38);
rotate: var(--enterprise-file-fall-rotate-mid, 18deg);
scale: var(--enterprise-file-fall-scale-mid, .88);
translate: calc(var(--enterprise-file-fall-position-x, 0px) + var(--enterprise-file-fall-drift-mid, 0px)) calc(var(--enterprise-file-fall-position-y, 0px) + (var(--enterprise-file-fall-drop, 720px) * .62)); }

84% {
opacity: 0;
rotate: var(--enterprise-file-fall-rotate-end, 36deg);
scale: var(--enterprise-file-fall-scale-end, .76);
translate: calc(var(--enterprise-file-fall-position-x, 0px) + var(--enterprise-file-fall-drift-end, 0px)) calc(var(--enterprise-file-fall-position-y, 0px) + (var(--enterprise-file-fall-drop, 720px) * .84)); }

100% {
opacity: 0;
rotate: var(--enterprise-file-fall-rotate-end, 36deg);
scale: var(--enterprise-file-fall-scale-end, .76);
translate: calc(var(--enterprise-file-fall-position-x, 0px) + var(--enterprise-file-fall-drift-end, 0px)) calc(var(--enterprise-file-fall-position-y, 0px) + (var(--enterprise-file-fall-drop, 720px) * 1)); } }

#alt-customers {
margin-block-end: var(--spacing-l);
margin-trim: block;
text-align: center; }

#alt-customers h2 {
text-align: center; }

#alt-customers svg {
display: block;
margin-block: var(--spacing-l);
margin-inline: auto;
max-inline-size: 800px; }



/* ==========================================================================
BENEFITS AND FEATURES
========================================================================== */

.item-benefit img,
.item-feature img {
display: block;
margin-block-end: var(--spacing-r); }

.item-benefit h3,
.item-feature h2,
.item-feature h3 {
margin-block-end: var(--spacing-s); }

.item-benefit p,
.item-feature p {
margin-block-end: 0; }

[data-content="benefits"] .item-benefit h3,
[data-content="benefits"] .item-benefit p {
opacity: 1;
transition: opacity var(--animate-duration-faster) var(--animate-function); }

[data-content="benefits"]:has(.item-benefit:target) .item-benefit:not(:target) h3,
[data-content="benefits"]:has(.item-benefit:target) .item-benefit:not(:target) p {
opacity: .5; }

[data-content="benefits"]:has(.item-benefit:target) .item-benefit:not(:target):focus-within h3,
[data-content="benefits"]:has(.item-benefit:target) .item-benefit:not(:target):focus-within p,
[data-content="benefits"]:has(.item-benefit:target) .item-benefit:not(:target):hover h3,
[data-content="benefits"]:has(.item-benefit:target) .item-benefit:not(:target):hover p {
opacity: 1; }



/* ==========================================================================
PROMO
========================================================================== */

.alt-promo {
align-items: center;
border: var(--border-width-r) solid var(--color-border);
border-radius: var(--border-radius-r);
display: grid;
gap: var(--spacing-m);
padding-block: var(--spacing-r) var(--spacing-m);
padding-inline: var(--spacing-r); }

.alt-promo > * {
margin-trim: block;
text-align: center; }

.alt-promo h3 {
font-size: var(--font-size-r);
margin-block: 0; }

.alt-promo p {
font-size: var(--font-size-s);
margin-block: 0; }



/* ==========================================================================
TESTIMONIALS
========================================================================== */

#data-testimonials {
margin-block: var(--spacing-l);
margin-inline: var(--spacing-r); }

#data-testimonials h2 {
margin-block-end: var(--spacing-m);
text-align: center; }

#data-testimonials-scroller {
display: grid;
gap: var(--spacing-l);
grid-auto-columns: 32ch;
grid-auto-flow: column;
margin-inline: calc(var(--spacing-r) * -1);
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-block: var(--spacing-r) var(--spacing-m);
scroll-padding-inline: var(--spacing-r);
scroll-snap-type: x proximity; }

#data-testimonials-scroller blockquote {
scroll-snap-align: start; }



/* ==========================================================================
FLEX LAYOUT
========================================================================== */

[data-layout="flex"] { text-align: left; }

[data-layout="flex"] > * { margin-block-end: var(--spacing-s); }



/* ==========================================================================
PAGE LAYOUTS
========================================================================== */

section {
margin-block-end: var(--spacing-l); }

.layout {
margin-block-end: var(--spacing-l); }

.buy-form > * {
margin-block-end: var(--spacing-l); }

.layout > * {
margin-block-end: var(--spacing-l);
margin-trim: block; }

[data-layout="stockholm"] > *:empty { display: none; }

[data-layout="stockholm"] svg {
display: block;
margin-inline: auto;
max-inline-size: 150px; }



/* ==========================================================================
RESPONSIVE DESIGN - MEDIA QUERIES
========================================================================== */

/*
* TABLET AND DESKTOP STYLES (48em+ / 768px+)
*/

@media screen and (min-width: 48em) {

/* Body padding adjustment */
body { padding-inline: var(--spacing-m); }

/* Enhanced textarea for larger screens */
textarea {
min-block-size: 12rem;
resize: vertical; }

.alt-promo {
display: flex;
justify-content: center;
padding: var(--spacing-r); }

#footer-logo a {
margin-inline: unset; }
}

/*
* DESKTOP STYLES (64em+ / 1024px+)
* Comprehensive desktop layout enhancements
*/

@media screen and (min-width: 64em) {

/* Responsive visibility */
[data-visibility="small"] { display: none; }
[data-visibility="large"] { display: block; }

/* Body padding adjustment */
body { padding-inline: var(--spacing-l); }

[role="banner"] {
display: grid;
gap: 0 var(--grid-column-gap);
grid-template-columns: var(--grid-4-5); }

[role="banner"] > *:nth-child(1) {
grid-column: 1 / 3; }

[role="banner"] > *:nth-child(2) {
grid-column: 4 / -1; }

#banner-logo {
margin-block: var(--spacing-s) 0; }

/* Navigation */
nav li {
margin: 0; }

nav li:not(:last-of-type):after {
content: " • ";
color: var(--color-border);
display: inline-block;
font-size: var(--font-size-l);
line-height: 1;
margin: 0;
padding-inline: var(--spacing-r);
translate: 0 4px; }

nav a:not(.btn)::after {
background-color: var(--color-accent);
border-radius: 3px;
bottom: 0;
content: '';
height: 3px;
left: 50%;
position: absolute;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform .5s ease;
width: 100%; }

nav a:not(.btn):hover::after,
nav a:not(.btn):focus-visible::after {
transform: translateX(-50%) scaleX(1); }

nav a:not(.btn):focus-visible::after {
background-color: var(--color-accent); }

nav:has(a:hover) a:not(.btn):not(:hover) {
opacity: .5; }

[data-download-link][aria-disabled="true"],
[data-download-link]:disabled {
cursor: not-allowed;
filter: saturate(var(--saturate-down));
opacity: .4;
pointer-events: none; }

/* contentinfo */
[role="contentinfo"] {
grid-template-columns: var(--grid-4-5); }

[role="contentinfo"] > *:nth-child(1) {
grid-column: 1; }

[role="contentinfo"] > *:nth-child(2) {
grid-column: 2 / 4; }

[role="contentinfo"] > *:nth-child(3) {
grid-column: 4; }

[role="contentinfo"] > *:nth-child(4) {
grid-column: 5; }

[role="contentinfo"] > *:nth-child(5) {
grid-column: 7 / -1;
padding-block-start: unset; }

[role="contentinfo"] small {
grid-column: 1 / -1;
text-align: unset; }

/* Flex layout */
[data-layout="flex"] {
display: flex;
gap: var(--spacing-r);
margin-block-end: var(--spacing-r); }

[data-layout="flex"] > * {
flex: 1;
margin-block-end: unset; }

/* Main layout system */
.layout {
display: grid;
gap: var(--grid-row-gap) var(--grid-column-gap);
grid-template-columns: var(--grid-4-5); }

.layout > * { margin-block-end: var(--spacing-r); }

/* Named layout systems (city-themed) */

[data-layout="amsterdam"] > * { grid-column: 1 / -1; }

[data-layout="athens"] > *:nth-child(1) { grid-column: 1 / 7; }
[data-layout="athens"] > *:nth-child(2) { grid-column: 8; }

[data-layout="berlin"] > *:nth-child(1) { grid-column: 1 / 5; }
[data-layout="berlin"] > *:nth-child(2) { grid-column: 5; }
[data-layout="berlin"] > *:nth-child(3) { grid-column: 7 / -1; }

[data-layout="brussels"] > * { grid-column: 2 / 8; }


[data-layout="edinburgh"] > *:nth-child(1) { grid-column: 1 / 4; }
[data-layout="edinburgh"] > *:nth-child(2) { grid-column: 4 / -1; }

[data-layout="edinburgh"]#index-banner > *:nth-child(1) {
align-self: start;
grid-column: 4 / -1;
grid-row: 1;
padding-inline-end: var(--spacing-l); }

[data-layout="edinburgh"]#index-banner > *:nth-child(2) {
grid-column: 1 / 4;
grid-row: 1;
padding-inline-start: var(--spacing-l); }

[data-layout="london"] > *:nth-child(1) { grid-column: 1 / 5; }
[data-layout="london"] > *:nth-child(2) { grid-column: 5 / -1; }

<!-- Cart templates -->
[data-layout="stockholm"] { grid-template-columns: var(--grid-12-col); }

[data-layout="stockholm"] > *:empty { display: block; }

[data-layout="stockholm"] svg {
margin-inline: unset;
max-inline-size: unset; }

[data-layout="stockholm"] > *:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
[data-layout="stockholm"] > *:nth-child(2) { grid-column: 4 / 10; grid-row: 1; }
[data-layout="stockholm"] > *:nth-child(3) { grid-column: 10 / -1; grid-row: 1; }

[data-layout="stockholm"]#buy-you { grid-template-columns: var(--grid-12-col); }
[data-layout="stockholm"]#buy-you > *:nth-child(1) { grid-column: 10 / -1; grid-row: 1; }
[data-layout="stockholm"]#buy-you > *:nth-child(2) { grid-column: 4 / 10; grid-row: 1; }
[data-layout="stockholm"]#buy-you > *:nth-child(3) { grid-column: 1 / 4; grid-row: 1; }

[data-layout="stockholm"]#buy-payment { grid-template-columns: var(--grid-12-col); }
[data-layout="stockholm"]#buy-payment > *:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
[data-layout="stockholm"]#buy-payment > *:nth-child(2) { grid-column: 4 / 10; grid-row: 1; }
[data-layout="stockholm"]#buy-payment > *:nth-child(3) { grid-column: 10 / -1; grid-row: 1; }

[data-layout="stockholm"]#buy-discounts { grid-template-columns: var(--grid-12-col); }
[data-layout="stockholm"]#buy-discounts > *:nth-child(1) { grid-column: 10 / -1; grid-row: 1; }
[data-layout="stockholm"]#buy-discounts > *:nth-child(2) { grid-column: 4 / 10; grid-row: 1; }
[data-layout="stockholm"]#buy-discounts > *:nth-child(3) { grid-column: 1 / 4; grid-row: 1; }

#buy-cart {
align-self: start;
background-color: oklch(0.1915 0.0265 276.87 / 0.9);
position: sticky;
top: var(--spacing-m); }

.buy-form {
display: grid;
gap: var(--spacing-l) var(--grid-column-gap);
grid-template-columns: var(--grid-12-col); }

.buy-license-panel {
grid-column: 4 / 10;
grid-row: 1; }

.buy-form > #buy-payment,
.buy-form > #buy-you {
grid-column: 1 / -1; }

#buy-cart {
grid-column: 10 / -1;
grid-row: 1 / 4;
margin-block-end: 0; }

[data-layout="tallinn"] > * { grid-column: 3 / 7; }

[data-layout="valletta"],
[data-layout="vienna"],
[data-layout="vienna"] { grid-template-columns: var(--grid-12-col); }

[data-layout="valletta"] > * { grid-column: span 6; }
[data-layout="vienna"] > * { grid-column: span 4; }

[data-layout="zagreb"] > *:nth-child(1) { grid-column: 1 / 6; }
[data-layout="zagreb"] > *:nth-child(2) { grid-column: 7 / -1; }

[data-width="full"] {
box-sizing: border-box;
margin-inline: calc(50% - 50vw);
width: 100vw; }

.btn[data-variant="l"] {
font-size: var(--font-size-r);
padding-block: 20px;
padding-inline: var(--spacing-m); }

/* Size utilities */
[data-size="xs"] { font-size: var(--font-size-xs); }

[data-size="3xl"] {
font-size: 5cqi; /* Container query units for responsive sizing */
margin-block: 0 var(--spacing-r); }

/* Tabs variant */
[data-tabs="using"] .alt-tabs {
margin-block: -3rem var(--spacing-m); }

[data-tabs="using"] .alt-tabs a {
font-size: var(--font-size-m); }
}


/* ==========================================================================
ACCESSIBILITY: REDUCED MOTION
========================================================================== */

/* Respect user motion preferences */
@media screen and (prefers-reduced-motion: reduce) {

html {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto;
transition-duration: 1ms !important; }}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important; }
}