:root {
    /* Padding */
    --pad-1:                6px;                                             /* app shell, buttons, compact UI */
    --pad-2:                8px;                                             /* panel content and overlay inset */
    --pad-3:                4px;                                             /* dense media-list controls */

    /* Gap */
    --gap-1:                6px;                                             /* standard layout and UI gaps */

    /* Radius */
    --radius-1:             8px;                                             /* main panels */
    --radius-2:             6px;                                             /* nested panels and buttons */
    --radius-3:             3px;                                             /* dense media-list controls */
    
    /* Borders */
    --border-1:             1px;                                             /* controls and internal separators */
    --border-2:             2px;                                             /* main panels */

    /* Interaction States */
    --opacity-disabled:     0.48;

    /* Layout */
    --navbar:               58px;
    --header:               calc(var(--btn-slim-h) + 2 * var(--pad-2));
    --footer:               32px;
    --sidebar-control-cell: var(--sidebar-control-height);
    --sidebar-control-grid-w: calc((var(--sidebar-control-cell) * 8) + (var(--gap-1) * 7));
    --sidebar:              calc(var(--sidebar-control-grid-w) + (var(--pad-2) * 2) + var(--border-2));
    --sidebar-closed:       var(--navbar);

    /* Typography */
    --font-main:            system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-numeric:         ui-monospace, "Cascadia Code", "Menlo", monospace;
    --font-code:            ui-monospace, "Cascadia Code", "Menlo", monospace;
    --font-ui:              var(--font-main);
    --fs-title:             12px;
    --fs-button:            11px;
    --fs-text:              11px;
    --fs-console:           10px;
    --lh-title:             15px;
    --lh-button:            15px;
    --lh-text:              16px;
    --lh-console:           12px;
    --title-letter-spacing: 0.12em;
    --font-title:           400 var(--fs-title) / var(--lh-title) var(--font-ui);
    --font-button:          400 var(--fs-button) / var(--lh-button) var(--font-ui);
    --font-textblock:       400 var(--fs-text) / var(--lh-text) var(--font-ui);
    --font-console:         400 var(--fs-console) / var(--lh-console) var(--font-ui);

    /* Component Sizes */
    --btn-h:                32px;
    --btn-slim-h:           20px;
    --icon-size-sm:         calc(var(--btn-h) / 2);
    --icon-size-md:         calc(var(--btn-h) / 2);
    --media-list-h:         56px;
    --media-action-size:    calc((var(--media-list-h) - (var(--pad-3) * 2)) * 0.5);
    --method-btn-size:      calc(var(--navbar) - (var(--pad-2) * 2));
    --media-list-min-slots:  3;
    --sidebar-control-height: 39px;
    --sidebar-control-inset: 2px;
    --sidebar-control-icon: calc(var(--sidebar-control-height) - ((var(--sidebar-control-inset) + var(--border-1)) * 2));
    --sidebar-control-icon-radius: calc(var(--radius-2) - var(--sidebar-control-inset));
    --sidebar-control-slider-height: 12px;
    --sidebar-control-slider-radius: 2px;
    --sidebar-control-segment-height: var(--sidebar-control-icon);
    --sidebar-section-header-height: 34px;
    --sidebar-section-icon-size: 18px;
    --scrollbar-width:       5px;
    --scrollbar-thumb-width: 3px;
    --scrollbar-radius:      999px;

    /* Motion */
    --ease-fast:            140ms ease;
    --ease-shell:           180ms ease;

    /* Effects */
    --shadow-1:             0 2px 8px rgba(0, 0, 0, 0.24);
    --filter-blur-ui:       blur(16px);

    /* Layering */
    --z-base:               1;
    --z-ui:                 10;
    --z-overlay:            20;
    --z-modal:              100;

    /* 3D Curvature Visualization */
    --c-curvature-neutral:   rgb(196, 196, 196);
    --c-curvature-concave:   rgb(0, 164, 255);
    --c-curvature-convex:    rgb(255, 64, 16);

}

body {
    --c-slider-track: color-mix(in srgb, var(--c-border) 48%, var(--c-surface-solid));
    --c-slider-fill: color-mix(in srgb, var(--c-accent) 72%, var(--c-font-muted));
    --c-slider-marker: var(--c-font);
    --c-control-hover-bg: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-interactive));
    --c-control-active-bg: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-interactive));
    --c-control-hover-bg-solid: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-solid));
    --c-control-active-bg-solid: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-solid));
    --c-control-hover-border: color-mix(in srgb, var(--c-accent) 72%, var(--c-border));
    --c-focus-ring: color-mix(in srgb, var(--c-accent) 82%, var(--c-font));
    --c-icon: var(--c-font);
    --c-icon-muted: var(--c-font-muted);
}

body:not([data-theme]),
body[data-theme="dark"] {
    color-scheme: dark;

    /* Color Layers */
    --c-bg:                  rgb(12, 12, 12);           /* App fallback background when ambient background is off */
    --c-surface-solid:       rgb(18, 18, 18);          /* Solid surface for overlapping UI that must fully block what sits behind it */
    --c-surface-glass:       rgba(22, 22, 22, 0.4);    /* Translucent structural surface for glass panels and chrome */
    --c-surface-interactive: rgba(28, 28, 28, 0.4);    /* Interactive surface for buttons, inputs, and controls */
    --c-border:              rgb(48, 48, 48);          /* Default border color */

    /* Accent Colors */
    --c-theme-accent:        rgb(164, 255, 0);
    --c-accent:              var(--c-theme-accent);
    --c-danger:              rgb(255, 64, 96);
    --c-alarm:               rgb(255, 188, 64);

    /* Sidebar Section Colors */
    --c-section-media-list:  var(--c-accent);
    --c-section-file:        rgb(72, 164, 255);
    --c-section-filter:      rgb(190, 112, 255);
    --c-section-analytics:   rgb(40, 204, 212);
    --c-section-controls:    rgb(225, 188, 64);
    --c-section-view:        rgb(92, 208, 132);
    --c-section-3d-camera:   rgb(32, 204, 255);
    --c-section-lighting:    rgb(255, 140, 72);
    --c-section-shading:     rgb(232, 64, 168);
    --c-section-3d-mesh:     rgb(196, 255, 12);
    --c-section-3d-splat:    rgb(168, 112, 255);

    /* Console Colors */
    --c-console-level-info:    var(--c-section-file);
    --c-console-level-action:  var(--c-section-view);
    --c-console-level-warning: var(--c-section-controls);
    --c-console-level-error:   var(--c-danger);
    --c-console-level-system:  var(--c-font);

    /* Text And Icons */
    --c-font:                rgb(255, 255, 255);
    --c-font-muted:          rgba(255, 255, 255, 0.64);
    --c-panel-zoom-neutral:  rgba(255, 255, 255, 0.75);

    /* 3D View Colors */
    --c-grid-minor:          rgba(255, 255, 255, 0.10);
    --c-grid-major:          rgba(255, 255, 255, 0.24);
    --c-axis-x:              rgba(255, 80, 80, 0.68);
    --c-axis-y:              rgba(72, 212, 116, 0.68);
    --c-axis-z:              rgba(72, 132, 255, 0.68);

    /* Effects */
    --shadow-2:              0 4px 18px rgba(0, 0, 0, 0.24);
    --shadow-panel-file-label: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.4);
    --shadow-zoom-label:     0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.5);

    /* Background */
    --bg-contour-line-opacity: 0.08;
}

body[data-theme="light"] {
    color-scheme: light;

    /* Color Layers */
    --c-bg:                  rgb(255, 255, 255);       /* App fallback background when ambient background is off */
    --c-surface-solid:       rgb(245, 245, 245);       /* Solid surface for overlapping UI that must fully block what sits behind it */
    --c-surface-glass:       rgba(245, 245, 245, 0.4); /* Translucent structural surface for glass panels and chrome */
    --c-surface-interactive: rgba(255, 255, 255, 0.6); /* Interactive surface for buttons, inputs, and controls */
    --c-border:              rgb(96, 96, 96);           /* Default border color */

    /* Accent Colors */
    --c-theme-accent:        rgb(149, 230, 0);
    --c-accent:              var(--c-theme-accent);
    --c-danger:              rgb(170, 25, 50);
    --c-alarm:               rgb(125, 70, 0);

    /* Sidebar Section Colors */
    --c-section-media-list:  var(--c-accent);
    --c-section-file:        rgb(0, 80, 160);
    --c-section-filter:      rgb(100, 40, 160);
    --c-section-analytics:   rgb(0, 90, 100);
    --c-section-controls:    rgb(105, 75, 0);
    --c-section-view:        rgb(10, 95, 45);
    --c-section-3d-camera:   rgb(0, 82, 125);
    --c-section-lighting:    rgb(145, 55, 10);
    --c-section-shading:     rgb(155, 20, 100);
    --c-section-3d-mesh:     rgb(60, 90, 0);
    --c-section-3d-splat:    rgb(92, 42, 145);

    /* Console Colors */
    --c-console-level-info:    var(--c-section-file);
    --c-console-level-action:  var(--c-section-view);
    --c-console-level-warning: var(--c-section-controls);
    --c-console-level-error:   var(--c-danger);
    --c-console-level-system:  var(--c-font);

    /* Text And Icons */
    --c-font:                rgb(0, 0, 0);
    --c-font-muted:          rgba(0, 0, 0, 0.64);
    --c-panel-zoom-neutral:  rgba(0, 0, 0, 0.75);

    /* 3D View Colors */
    --c-grid-minor:          rgba(0, 0, 0, 0.10);
    --c-grid-major:          rgba(0, 0, 0, 0.24);
    --c-axis-x:              rgb(170, 25, 50);
    --c-axis-y:              rgb(10, 95, 45);
    --c-axis-z:              rgb(0, 80, 160);

    /* Effects */
    --shadow-2:              0 6px 18px rgba(0, 0, 0, 0.24);
    --shadow-panel-file-label: 0 1px 3px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.4);
    --shadow-zoom-label:     0 1px 3px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.5);

    /* Background */
    --bg-contour-line-opacity: 0.33;
}

@media (max-width: 640px) {
    :root {
        --pad-1: 3px;
        --pad-2: 6px;
        --pad-3: 3px;
        --gap-1: 3px;
        --navbar: 56px;
        --sidebar: 320px;
        --sidebar-closed: calc(var(--navbar) + (var(--pad-1) * 2));
        --btn-slim-h: 28px;
        --method-btn-size: calc(var(--navbar) - 3 * var(--pad-1));
        --media-list-min-slots: 2;
    }
}





body[data-theme-variant="magenta"] {
    --c-theme-accent: rgb(196, 64, 255);
    --c-accent: var(--c-theme-accent);
}

body[data-theme-variant="cyan"] {
    --c-theme-accent: rgb(16, 255, 228);
    --c-accent: var(--c-theme-accent);
}

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

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
}

body {
    overflow: hidden;
    font: var(--font-textblock);
    background: var(--c-bg);
    color: var(--c-font);
}

/* Shared app scrollbar: a slim button-colored track with an accent thumb. */
.appScrollRegion {
    scrollbar-color: var(--c-accent) var(--c-surface-interactive);
}

@supports selector(::-webkit-scrollbar) {
    .appScrollRegion {
        scrollbar-width: auto;
    }
}

@supports not selector(::-webkit-scrollbar) {
    .appScrollRegion {
        scrollbar-width: thin;
    }
}

.appScrollRegion::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

.appScrollRegion::-webkit-scrollbar-track {
    background: var(--c-surface-interactive);
}

.appScrollRegion::-webkit-scrollbar-thumb {
    min-height: 28px;
    border: calc((var(--scrollbar-width) - var(--scrollbar-thumb-width)) / 2) solid transparent;
    border-radius: var(--scrollbar-radius);
    background: var(--c-accent);
    background-clip: content-box;
}

.appScrollRegion::-webkit-scrollbar-corner {
    background: var(--c-surface-interactive);
}

button {
    font: var(--font-button);
}

input,
textarea,
select {
    font: var(--font-textblock);
    -webkit-user-select: text;
    user-select: text;
}

[contenteditable]:not([contenteditable="false"]),
[contenteditable="plaintext-only"],
[data-allow-selection="true"],
.allow-selection {
    -webkit-user-select: text;
    user-select: text;
}

button {
    border: 0;
    background: none;
    color: inherit;
}

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

code,
kbd {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--lh-console) + 2px);
    padding: 0 calc(var(--pad-3) + 1px);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-3);
    background: var(--c-surface-interactive);
    color: var(--c-font);
    font-family: var(--font-code);
    font-size: 0.95em;
    line-height: 1;
}

kbd {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c-border) 72%, transparent);
}

:focus-visible {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.appShell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--navbar) minmax(0, 1fr) var(--sidebar);
    grid-template-rows: minmax(0, 1fr) auto;
}

.methodRail {
    grid-column: 1;
    grid-row: 1;
}

.contentArea {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    padding: var(--pad-1);
    overflow: hidden;
}

.sidebarPanel {
    grid-column: 3;
    grid-row: 1;
}

html,
body {
    min-width: 280px;
    min-height: 100%;
    margin: 0;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    font: var(--font-textblock);
    background: var(--c-bg);
    color: var(--c-font);
    -webkit-user-select: text;
    user-select: text;
}

.solutionPage {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 72% 8%, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 34rem),
        linear-gradient(to bottom, var(--c-bg), color-mix(in srgb, var(--c-bg) 88%, black));
}

.solutionPage__header,
.solutionPage__main,
.solutionPage__footerContent {
    width: min(100% - calc(var(--pad-2) * 4), 1120px);
    margin-inline: auto;
}

.solutionPage__header {
    min-height: var(--navbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--gap-1) * 2);
    padding-block: var(--pad-2);
}

.solutionPage__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    color: var(--c-font);
    font: var(--font-title);
    font-size: 18px;
    letter-spacing: var(--title-letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
}

.solutionPage__headerActions,
.solutionPage__languages {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
}

.solutionPage__language,
.solutionPage__button,
.solutionPage__cardAction {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    color: var(--c-font);
    font: var(--font-button);
    text-decoration: none;
    transition: border-color var(--ease-fast), background-color var(--ease-fast), color var(--ease-fast);
}

.solutionPage__language {
    min-width: 40px;
    padding-inline: var(--pad-2);
    cursor: pointer;
}

.solutionPage__language.is-active,
.solutionPage__language:hover,
.solutionPage__language:focus-visible,
.solutionPage__cardAction:hover,
.solutionPage__cardAction:focus-visible {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.solutionPage__button {
    padding-inline: calc(var(--pad-2) * 2);
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-bg);
}

.solutionPage__button:hover,
.solutionPage__button:focus-visible {
    background: color-mix(in srgb, var(--c-accent) 82%, white);
}

.solutionPage__main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 8vw, 96px);
    padding-block: clamp(48px, 9vw, 112px);
}

.solutionHero {
    width: 100%;
    min-width: 0;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap-1) * 3);
}

.solutionHero--showcase {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(520px, 1.2fr);
    align-items: center;
    gap: clamp(36px, 6vw, 76px);
}

.solutionHero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap-1) * 3);
}

.solutionHero--showcase .solutionHero__title {
    max-width: 12ch;
    font-size: clamp(42px, 5vw, 68px);
}

.solutionHero__eyebrow,
.solutionSection__eyebrow {
    margin: 0;
    color: var(--c-accent);
    font: var(--font-button);
    letter-spacing: var(--title-letter-spacing);
    text-transform: uppercase;
}

.solutionHero__title {
    max-width: 15ch;
    margin: 0;
    font-family: var(--font-ui);
    font-size: clamp(42px, 7vw, 82px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.solutionHero__lead {
    max-width: 65ch;
    margin: 0;
    color: var(--c-font-muted);
    font-family: var(--font-ui);
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.55;
}

.solutionHero__privacy {
    margin: 0;
    color: var(--c-font-muted);
    font: var(--font-button);
}

.solutionHeroSpecimen {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-solid);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

.solutionHeroSpecimen__toolbar {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
    padding-inline: calc(var(--pad-1) * 2);
    border-bottom: var(--border-1) solid var(--c-border);
    background: var(--c-surface-glass);
    font: var(--font-button);
}

.solutionHeroSpecimen__brand {
    overflow: hidden;
    font: var(--font-title);
    font-size: 11px;
    letter-spacing: var(--title-letter-spacing);
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.solutionPage__brandLogo {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: block;
}

.solutionHeroSpecimen__method {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    color: var(--c-accent);
}

.solutionHeroSpecimen__method img,
.solutionHeroSpecimen__railItem img {
    display: block;
    filter: invert(1);
}

.solutionHeroSpecimen__method img {
    width: 23px;
    height: 14px;
}

.solutionHeroSpecimen__fileCount {
    justify-self: end;
    color: var(--c-font-muted);
    white-space: nowrap;
}

.solutionHeroSpecimen__workspace {
    min-height: 360px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
}

.solutionHeroSpecimen__rail {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    padding: var(--pad-1);
    border-right: var(--border-1) solid var(--c-border);
    background: var(--c-surface-glass);
}

.solutionHeroSpecimen__railItem {
    height: 34px;
    display: grid;
    place-items: center;
    border: var(--border-1) solid transparent;
    border-radius: var(--radius-2);
    opacity: 0.44;
}

.solutionHeroSpecimen__railItem.is-active {
    border-color: var(--c-accent);
    background: var(--c-control-active-bg-solid);
    opacity: 1;
}

.solutionHeroSpecimen__railItem img {
    width: 25px;
    height: 15px;
}

.solutionHeroSpecimen__panels {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--border-2);
    padding: var(--border-2);
    background: var(--c-border);
}

.solutionHeroSpecimen__panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--c-bg);
}

.solutionHeroSpecimen__panelHeader {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-1);
    padding-inline: calc(var(--pad-1) * 2);
    border-bottom: var(--border-1) solid var(--c-border);
    color: var(--c-font-muted);
    font: var(--font-button);
}

.solutionHeroSpecimen__panelHeader span:first-child {
    color: var(--c-font);
}

.solutionHeroSpecimen__panelHeader span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solutionHeroSpecimen__image {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: block;
    object-fit: cover;
}

.solutionHeroSpecimen__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--gap-1) * 2);
    padding: calc(var(--pad-1) * 2);
    border-top: var(--border-1) solid var(--c-border);
    color: var(--c-font-muted);
    font: var(--font-button);
}

.solutionHeroSpecimen__caption::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--c-accent);
    content: "";
}

.solutionHeroSpecimen__caption span {
    flex: 1 1 auto;
}

.solutionHeroSpecimen__caption a {
    flex: 0 0 auto;
    color: var(--c-accent);
    text-underline-offset: 0.25em;
}

.solutionPage__backLink {
    color: var(--c-font-muted);
    font: var(--font-button);
    text-underline-offset: 0.25em;
}

.solutionPage__backLink:hover,
.solutionPage__backLink:focus-visible {
    color: var(--c-accent);
}

.solutionSection {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-1) * 3);
}

.solutionSection__heading {
    width: 100%;
    min-width: 0;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.solutionSection__title {
    max-width: 100%;
    overflow-wrap: anywhere;
    margin: 0;
    font-family: var(--font-ui);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    line-height: 1.1;
}

.solutionSection__lead,
.solutionCard__body,
.solutionPrivacy__body {
    margin: 0;
    color: var(--c-font-muted);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
}

.solutionGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--gap-1) * 2);
}

.solutionCard,
.solutionPrivacy {
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-glass);
}

.solutionCard {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap-1) * 2);
    padding: clamp(22px, 4vw, 38px);
}

.solutionCard__index {
    color: var(--c-accent);
    font-family: var(--font-numeric);
}

.solutionCard__title,
.solutionPrivacy__title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 500;
}

.solutionCard__body {
    flex: 1 1 auto;
}

.solutionPage__cardAction {
    padding-inline: calc(var(--pad-2) * 2);
}

.solutionComparisonFigure {
    margin: 0;
    display: grid;
    gap: var(--gap-1);
}

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

.solutionComparisonFigure__image {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-solid);
}

.solutionComparisonFigure__image span {
    position: absolute;
    top: var(--pad-1);
    left: var(--pad-1);
    z-index: 1;
    padding: var(--pad-1) var(--pad-2);
    border-radius: var(--radius-2);
    background: var(--c-surface-solid);
    font: var(--font-button);
}

.solutionComparisonFigure__image img {
    width: 100%;
    height: clamp(220px, 34vw, 420px);
    object-fit: cover;
}

.solutionComparisonFigure figcaption {
    color: var(--c-font-muted);
    font: var(--font-textblock);
}

.solutionMethodFigure {
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-solid);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.solutionMethodFigure__toolbar {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-1);
    padding-inline: calc(var(--pad-1) * 2);
    border-bottom: var(--border-1) solid var(--c-border);
    color: var(--c-font-muted);
    font: var(--font-button);
}

.solutionMethodFigure__method {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    color: var(--c-accent);
}

.solutionMethodFigure__method img {
    width: 25px;
    height: 16px;
    display: block;
    filter: invert(1);
}

.solutionMethodFigure__columns,
.solutionDifferenceDemo {
    display: grid;
    gap: var(--border-2);
    padding: var(--border-2);
    background: var(--c-border);
}

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

.solutionMethodFigure__panel,
.solutionDifferenceDemo__panel {
    min-width: 0;
    overflow: hidden;
    background: var(--c-bg);
}

.solutionMethodFigure__panelLabel,
.solutionDifferenceDemo__label {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-1);
    padding-inline: calc(var(--pad-1) * 2);
    border-bottom: var(--border-1) solid var(--c-border);
    color: var(--c-font-muted);
    font: var(--font-button);
}

.solutionMethodFigure__panel img,
.solutionDifferenceDemo__panel > img,
.solutionDifferenceDemo__result {
    width: 100%;
    height: clamp(230px, 34vw, 420px);
    display: block;
    object-fit: cover;
}

.solutionMethodFigure > figcaption {
    padding: calc(var(--pad-1) * 2);
    border-top: var(--border-1) solid var(--c-border);
    color: var(--c-font-muted);
    font: var(--font-textblock);
}

.solutionSwipeDemo {
    --swipe-position: 52%;
    position: relative;
    min-height: clamp(280px, 50vw, 560px);
    overflow: hidden;
    background: var(--c-bg);
}

.solutionSwipeDemo:focus-within { box-shadow: inset 0 0 0 var(--border-2) var(--c-accent); }
.solutionSwipeDemo__base,
.solutionSwipeDemo__reveal,
.solutionSwipeDemo__reveal img { position: absolute; inset: 0; width: 100%; height: 100%; }
.solutionSwipeDemo__base,
.solutionSwipeDemo__reveal img { display: block; object-fit: cover; }
.solutionSwipeDemo__reveal {
    width: 100%;
    overflow: hidden;
    clip-path: inset(0 calc(100% - var(--swipe-position)) 0 0);
}

.solutionSwipeDemo__divider {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: var(--swipe-position);
    width: 2px;
    transform: translateX(-1px);
    background: var(--c-accent);
    pointer-events: none;
}

.solutionSwipeDemo__divider::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: var(--border-2) solid var(--c-accent);
    border-radius: 50%;
    background: var(--c-surface-solid);
    color: var(--c-accent);
    content: "↔";
    font: var(--font-button);
}

.solutionSwipeDemo__control {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.solutionSwipeDemo__label {
    position: absolute;
    z-index: 2;
    top: var(--pad-2);
    padding: var(--pad-1) var(--pad-2);
    border-radius: var(--radius-2);
    background: var(--c-surface-solid);
    font: var(--font-button);
    pointer-events: none;
}

.solutionSwipeDemo__label--left { left: var(--pad-2); }
.solutionSwipeDemo__label--right { right: var(--pad-2); }

.solutionDifferenceDemo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.solutionDifferenceDemo__panel--result .solutionDifferenceDemo__label { color: var(--c-accent); }

.solutionDifferenceDemo__result {
    position: relative;
    overflow: hidden;
    background: black;
    filter: contrast(1.35) brightness(2.1);
}

.solutionDifferenceDemo__result img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.solutionDifferenceDemo__result img:last-child { mix-blend-mode: difference; }

.solutionDetailGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--gap-1) * 2);
}

.solutionDetailCard,
.solutionRelated {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--gap-1) * 2);
    padding: clamp(22px, 4vw, 38px);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-glass);
}

.solutionDetailCard__title,
.solutionRelated__title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 500;
}

.solutionDetailCard__body,
.solutionDetailCard__list {
    margin: 0;
    color: var(--c-font-muted);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
}

.solutionDetailCard__list {
    display: grid;
    gap: var(--gap-1);
    padding-inline-start: 1.25em;
}

.solutionDetailCard__list--steps {
    flex: 1 1 auto;
}

.solutionRelated__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-1);
}

.solutionPrivacy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(var(--gap-1) * 4);
    padding: clamp(24px, 5vw, 48px);
}

.solutionPrivacy__copy {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.solutionPage__footer {
    border-top: var(--border-1) solid var(--c-border);
}

.solutionPage__footerContent {
    min-height: var(--footer);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-1);
    padding-block: var(--pad-2);
    color: var(--c-font-muted);
}

.solutionPage__footerLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: calc(var(--gap-1) * 2);
}

.solutionPage__footerLink {
    color: inherit;
}

@media (max-width: 640px) {
    .solutionPage__header,
    .solutionPage__main,
    .solutionPage__footerContent {
        width: min(100% - calc(var(--pad-1) * 4), 1120px);
    }

    .solutionPage__headerActions > .solutionPage__button {
        display: none;
    }

    .solutionPage__main {
        padding-block: 44px 60px;
    }

    .solutionHero__title {
        font-size: clamp(38px, 12vw, 56px);
    }

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

    .solutionHero--showcase .solutionHero__title {
        font-size: clamp(38px, 12vw, 56px);
    }

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

    .solutionHeroSpecimen__brand {
        display: none;
    }

    .solutionHeroSpecimen__workspace {
        min-height: 260px;
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .solutionHeroSpecimen__railItem {
        height: 30px;
    }

    .solutionHeroSpecimen__railItem img {
        width: 21px;
    }

    .solutionHeroSpecimen__panelHeader {
        min-height: 34px;
        padding-inline: var(--pad-1);
    }

    .solutionHeroSpecimen__panelHeader span:last-child {
        display: none;
    }

    .solutionHeroSpecimen__image {
        min-height: 220px;
    }

    .solutionHeroSpecimen__caption {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .solutionHeroSpecimen__caption span {
        flex-basis: calc(100% - 24px);
    }

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

    .solutionComparisonFigure__images,
    .solutionDetailGrid,
    .solutionMethodFigure__columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .solutionDifferenceDemo {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
        overflow-x: auto;
    }

    .solutionMethodFigure__panel img,
    .solutionDifferenceDemo__panel > img,
    .solutionDifferenceDemo__result { height: 260px; }

    .solutionCard {
        min-height: 220px;
    }

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

    .solutionPage__footerContent {
        align-items: flex-start;
        flex-direction: column;
        padding-block: calc(var(--pad-2) * 2);
    }

    .solutionPage__footerLinks {
        justify-content: flex-start;
    }
}