/* Velmar: one stylesheet for the public site.
   Type: Barlow Condensed SemiBold for headings, figures and labels; Inter for text (both SIL OFL, self-hosted).
   Colour: night #0b1e23 and paper #f6f3ec carry the pages, teal #146b78 is the brand, orange #ee824b is the saw kerf:
   it marks the one thing to do (the primary button) and the cut lines in the drawings.
   Motifs from the workshop floor: dimension lines, crop marks, a measuring-tape edge, dashed cut lines. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/inter-latin-v1.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2009, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/inter-latin-ext-v1.woff2") format("woff2");
    unicode-range: U+0100-017F;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow-condensed-latin-v1.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2009, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122, U+2212;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/barlow-condensed-latin-ext-v1.woff2") format("woff2");
    unicode-range: U+0100-017F;
}

@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
    size-adjust: 107.12%;
}

@font-face {
    font-family: "Barlow Condensed Fallback";
    src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow"), local("Roboto Condensed");
    ascent-override: 100%;
    descent-override: 20%;
    line-gap-override: 0%;
    size-adjust: 96%;
}

:root {
    --ink: #0f252b;
    --ink-2: #3a4f55;
    --ink-3: #5a6d72;
    --paper: #f6f3ec;
    --paper-2: #ece6da;
    --white: #fff;
    --line: #e2dccf;
    --line-2: #d1c9b9;
    --teal: #146b78;
    --teal-600: #11606c;
    --teal-700: #0e5561;
    --teal-900: #0b3a42;
    --teal-50: #e6f0f0;
    --teal-100: #cde2e3;
    --sea: #74c5cd;
    --night: #0b1e23;
    --night-2: #10282e;
    --night-3: #163740;
    --night-line: rgb(255 255 255 / 10%);
    --night-text: #c8d7d9;
    --night-muted: #8ea7ab;
    --orange: #ee824b;
    --orange-600: #e2703a;
    --orange-700: #b04d1d;
    --cream: #fff6e5;
    --green: #217a4b;
    --amber: #865400;
    --red: #b3261e;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgb(15 37 43 / 6%);
    --shadow: 0 1px 2px rgb(15 37 43 / 5%), 0 14px 34px rgb(15 37 43 / 9%);
    --shadow-lg: 0 2px 6px rgb(15 37 43 / 6%), 0 34px 70px rgb(15 37 43 / 16%);
    --max: 1200px;
    --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    --grid-line: rgb(255 255 255 / 4.5%);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); text-wrap: balance; }
h1, h2, .display {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.004em;
    font-feature-settings: "kern", "tnum" 0;
}
h1 { font-size: clamp(2.5rem, 1.45rem + 4.1vw, 4.6rem); line-height: .98; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.05rem); line-height: 1.02; }
h3, .h3 { font-size: 1.12rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Long Croatian and German words may be hyphenated in running text, never in short lines, leads, links or buttons. */
p:is(:lang(de), :lang(hr)):not(.lead, .hint, .note, .cta-note, .muted, .field-error, .result p, .alert p) { hyphens: auto; hyphenate-limit-chars: 10 4 4; }
a, .btn, .pill, small, label, figcaption { hyphens: manual; }
/* E-mail addresses, links, order and licence numbers, names (SiteText.FL): one piece, never hyphenated; wider than
   the line, an address wraps after "@" or before a dot. */
.literal { display: inline-block; max-width: 100%; hyphens: none; overflow-wrap: break-word; text-wrap: wrap; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; }

a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-700); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

code, pre { font-family: var(--mono); font-size: .9em; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 820px; }

.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--ink); color: var(--white); }
.skip-link:focus { top: 12px; }

.nobreak { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.hint { color: var(--ink-3); font-size: .92rem; }
.note { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.6rem; color: var(--ink-2); font-size: .97rem; }
.note .icon { color: var(--teal); margin-top: .2em; }

.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 15px; height: 15px; }

/* Labels with a dimension-line mark: |----| */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--teal);
    font-family: var(--display);
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    width: 30px;
    height: 10px;
    border-inline: 1.5px solid var(--orange);
    background: linear-gradient(var(--orange), var(--orange)) center / 100% 1.5px no-repeat;
}

.lead { color: var(--ink-2); font-size: clamp(1.08rem, 1rem + .38vw, 1.25rem); line-height: 1.58; }

/* Header ------------------------------------------------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(11 30 35 / 94%);
    backdrop-filter: saturate(1.3) blur(12px);
    border-bottom: 1px solid var(--night-line);
    color: var(--night-text);
}

.header-inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--white); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.62rem; letter-spacing: .01em; }
.brand:hover { color: var(--white); }
.brand-mark { display: block; flex: none; }
/* The page's one copy of the Velmar mark (_BrandSprite), shown with <use> in the header and the footer */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.main-nav > ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.main-nav a, .main-nav summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--night-text);
    font-weight: 550;
    font-size: .96rem;
    text-decoration: none;
    cursor: pointer;
}
.main-nav > ul > li > a, .main-nav summary, .header-cta { white-space: nowrap; }
.main-nav a:hover, .main-nav summary:hover { color: var(--white); background: rgb(255 255 255 / 6%); }
.main-nav [aria-current="page"], .main-nav .is-active { color: var(--white); }
.main-nav [aria-current="page"]::after, .main-nav .is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -14px;
    height: 2px;
    background: var(--orange);
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.menu, .lang { position: relative; }
.menu-panel, .lang-panel {
    position: absolute;
    top: calc(100% + 14px);
    z-index: 60;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}
/* Under the sticky header a panel's bottom cannot be scrolled to, so the menu has two columns and a short window scrolls inside it. */
.menu-panel { left: -8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 760px; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); gap: 2px; overflow-y: auto; }
.main-nav .menu-item { display: flex; gap: 14px; align-items: flex-start; padding: 11px 12px; color: var(--ink); }
.main-nav .menu-item:hover { background: var(--paper); color: var(--ink); }
.main-nav .menu-item[aria-current="page"]::after { display: none; }
.menu-item strong { display: block; color: var(--ink); font-weight: 650; }
.menu-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 4px; padding: 10px 6px 4px; border-top: 1px solid var(--line); }
.menu-foot span { flex-basis: 100%; padding: 2px 6px; color: var(--ink-3); font-size: .86rem; font-weight: 600; }
.main-nav .menu-foot a { padding: 4px 6px; color: var(--teal); font-size: .9rem; font-weight: 650; white-space: nowrap; }
.main-nav .menu-foot a:hover { background: var(--paper); color: var(--teal); }
.main-nav .menu-foot a[aria-current="page"]::after { display: none; }
.menu-item small { display: block; color: var(--ink-3); font-size: .86rem; font-weight: 450; line-height: 1.4; }
.menu-icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--teal); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 7px; color: var(--night-text); font-weight: 600; font-size: .9rem; cursor: pointer; }
.lang summary:hover { background: rgb(255 255 255 / 6%); color: var(--white); }
.lang-panel { right: 0; min-width: 170px; margin: 0; list-style: none; }
.lang-panel a { display: block; padding: 8px 12px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.lang-panel a:hover, .lang-panel a[aria-current="true"] { background: var(--paper); }
.lang-panel a[aria-current="true"] { font-weight: 650; }

.mobile-nav { display: none; position: relative; }
.mobile-nav summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; cursor: pointer; color: var(--white); }
.mobile-nav summary:hover { background: rgb(255 255 255 / 7%); }
.mobile-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 60;
    display: grid;
    width: min(320px, calc(100vw - 32px));
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}
.mobile-panel a { padding: 11px 12px; border-radius: 7px; color: var(--ink); font-weight: 560; text-decoration: none; }
.mobile-panel a:hover, .mobile-panel a[aria-current="page"] { background: var(--paper); }
.mobile-panel hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
.mobile-panel .mobile-cta { margin-top: 8px; color: #1c0d04; }
.mobile-panel .mobile-cta:hover { background: #f39462; }
.mobile-heading { margin: 6px 12px 2px; color: var(--ink-3); font-family: var(--display); font-size: .86rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }

/* Buttons ----------------------------------------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 38px; padding: 7px 15px; font-size: .93rem; }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--orange); color: #1c0d04; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%); }
.btn-primary:hover { background: #f39462; color: #1c0d04; }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--teal-900); color: var(--white); }
.btn-ghost { border-color: var(--line-2); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: rgb(255 255 255 / 60%); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--cream); color: var(--ink); }
.btn-outline-light { border-color: rgb(255 255 255 / 28%); color: var(--white); }
.btn-outline-light:hover { border-color: var(--white); color: var(--white); background: rgb(255 255 255 / 6%); }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* Dark bands: home hero, page heroes, dark sections, final call to action ----------------------------------------- */

.hero, .page-hero, .section-dark, .final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--night);
    color: var(--night-text);
}
.hero::before, .page-hero::before, .section-dark::before, .final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: -1px -1px;
    pointer-events: none;
}
/* The measuring-tape edge: a tick every 11 px, a long one every 55 px. */
.hero::after, .page-hero::after, .final-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    z-index: -1;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / 26%) 0 1px, transparent 1px 55px) left bottom / 100% 12px no-repeat,
        repeating-linear-gradient(90deg, rgb(255 255 255 / 16%) 0 1px, transparent 1px 11px) left bottom / 100% 6px no-repeat;
    pointer-events: none;
}
.final-cta::after { top: 0; bottom: auto; transform: scaleY(-1); }

.hero h1, .page-hero h1, .section-dark h2, .section-dark h3, .final-cta h2 { color: var(--white); }
.hero .lead, .page-hero .lead { color: var(--night-text); }
.hero .eyebrow, .page-hero .eyebrow, .section-dark .eyebrow, .final-cta .eyebrow { color: var(--sea); }
.hero .btn-ghost, .page-hero .btn-ghost, .final-cta .btn-ghost { border-color: rgb(255 255 255 / 26%); color: var(--white); }
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover, .final-cta .btn-ghost:hover { border-color: var(--white); background: rgb(255 255 255 / 6%); }
.hero a:not(.btn), .page-hero a:not(.btn), .section-dark a:not(.btn), .final-cta a:not(.btn) { color: var(--sea); }

/* Home hero */
.hero { padding: clamp(52px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); }
.hero::before { mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 100%); }
.hero-glow { position: absolute; z-index: -1; inset: auto -10% -30% 40%; height: 120%; background: radial-gradient(closest-side, rgb(20 107 120 / 45%), transparent); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.9rem, 1.5rem + 3.9vw, 4.45rem); line-height: .95; letter-spacing: -.008em; }
.hero .hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 4vw, 56px); }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-copy .lead { max-width: 33em; margin-top: 22px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-row.center { justify-content: center; }
.cta-note { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; color: var(--ink-3); font-size: .9rem; }
.hero .cta-note, .page-hero .cta-note { color: var(--night-muted); }
.cta-note .icon { display: inline-block; margin-right: 6px; vertical-align: -2px; }
.hero-media { position: relative; }

/* Spec strip under the hero */
.facts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(44px, 6vw, 76px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--night-line); }
.facts li { display: flex; align-items: center; gap: 12px; padding: 20px 20px 4px 0; color: var(--white); font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15; }
.facts li + li { padding-left: 20px; border-left: 1px solid var(--night-line); }
.facts .icon { color: var(--orange); }

/* Page heroes */
.page-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 5.5vw, 80px); }
.page-hero h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.4rem); }
.page-hero-text { padding-bottom: clamp(48px, 5vw, 72px); }
.page-hero-text .hero-grid { grid-template-columns: minmax(0, 1fr); }
.page-hero-text .hero-copy { max-width: 720px; }
.page-hero .hero-copy .lead { max-width: 36em; margin-top: 18px; }

.breadcrumb { position: relative; z-index: 2; min-height: 48px; padding-top: 22px; font-size: .86rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-3); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); text-decoration: underline; }
/* Above a page hero the breadcrumb sits on its dark band. */
.breadcrumb:has(+ .page-hero) { height: 48px; margin-bottom: -48px; }
.breadcrumb:has(+ .page-hero) ol, .breadcrumb:has(+ .page-hero) a { color: var(--night-muted); }
.breadcrumb:has(+ .page-hero) li + li::before { color: rgb(255 255 255 / 25%); }
.breadcrumb:has(+ .page-hero) a:hover { color: var(--white); }
.breadcrumb:has(+ .page-hero) [aria-current] { color: var(--night-text); }
.breadcrumb + .page-hero { padding-top: calc(48px + clamp(24px, 3.2vw, 44px)); }

.hero-deco { position: absolute; z-index: -1; top: 50%; right: max(24px, calc((100% - var(--max)) / 2 + 24px)); width: min(360px, 28vw); transform: translateY(-38%); opacity: .42; pointer-events: none; }
.hero-deco .dg { filter: none; }

/* The page of a download link (owner, 2026-11-01): the error pages' drawing with a download arrow, the main buttons, and every
   platform as a row, like an app's download page. */
.dg .arrow path, .dg .tray { fill: none; stroke: var(--orange-700); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg .arrow { animation: ready-arrow 2.4s ease-in-out infinite; }
@keyframes ready-arrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .dg .arrow { animation: none; } }
.ready .cta-row { margin-top: 26px; }
.ready-note { margin: 16px 0 0; color: var(--ink-3); font-size: .9rem; }
.ready-note .icon { display: inline-block; margin-right: 6px; vertical-align: -2px; }
.platforms { max-width: 640px; margin: clamp(34px, 5vw, 52px) auto 0; padding: 4px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); list-style: none; text-align: left; }
.platforms-head { padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
.platforms-head h2 { margin: 0; font-size: 1.6rem; }
.platforms-head p { margin: 2px 0 0; color: var(--ink-3); font-size: .9rem; }
.platform { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.platform:last-child { border-bottom: 0; }
.platform-name { display: grid; gap: 2px; color: var(--ink); font-weight: 600; }
.platform-name small { color: var(--ink-3); font-size: .86rem; font-weight: 450; }
.platform .btn { flex: none; }
.platform-soon .platform-name { color: var(--ink-2); }
.ready-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.ready-files h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ready-files p { color: var(--ink-2); }
@media (max-width: 760px) { .ready-files { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .platform { flex-direction: column; align-items: flex-start; } }

/* Download by e-mail: the request form is a white card in the hero */
.request-card { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); }
.request-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
.request-form { gap: 16px; margin-top: 0; }
.request-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 4px; }
.request-head .card-icon { flex: none; margin: 0; }
.request-head h2 { margin: 0 0 4px; color: var(--ink); font-size: 1.75rem; line-height: 1.05; }
.request-head p { color: var(--ink-2); font-size: .97rem; }
.field .optional { color: var(--ink-3); font-weight: 450; }
.request-form .hint { margin: 0; }
.request-tips span { font-size: .9rem; line-height: 1.45; }
.request-privacy { margin: 2px 0 0; color: var(--ink-3); font-size: .84rem; line-height: 1.5; }
.request-privacy a { color: var(--teal); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.request-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.request-page .request-card { border: 1px solid var(--line); box-shadow: var(--shadow); }

/* The program's licence window with an invented licence (FAQ, download page) */
.licence-mock { margin: 4px 0 26px; }
.mock-window { overflow: hidden; max-width: 560px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.mock-titlebar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #f1f4f3; }
.mock-app { position: relative; width: 16px; height: 16px; border-radius: 4px; background: var(--teal); }
.mock-app::after { content: ""; position: absolute; left: 7px; top: 3px; width: 2px; height: 10px; border-radius: 1px; background: var(--orange); transform: rotate(35deg); }
.mock-title { color: var(--ink); font-size: .9rem; font-weight: 600; }
.mock-close { position: relative; width: 12px; height: 12px; margin-left: auto; }
.mock-close::before, .mock-close::after { content: ""; position: absolute; left: 5px; top: -1px; width: 1.5px; height: 14px; background: var(--ink-3); transform: rotate(45deg); }
.mock-close::after { transform: rotate(-45deg); }
.mock-body { padding: 16px 18px 18px; }
.mock-label { margin: 0 0 8px; color: var(--ink-2); font-size: .86rem; font-weight: 600; }
.mock-licence { overflow-x: auto; margin: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: #fbfaf7; color: var(--ink); font-size: .74rem; line-height: 1.55; white-space: pre; }
.mock-head { color: var(--teal-700); }
.mock-sig { color: var(--ink-3); }
.mock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mock-btn { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--white); color: var(--ink); font-size: .86rem; font-weight: 600; }
.mock-primary { border-color: var(--orange); background: var(--orange); color: #1c0d04; }
.licence-mock figcaption { margin-top: 10px; color: var(--ink-3); font-size: .84rem; }
.faq .licence-mock { max-width: 46em; }

/* Pictures and drawings in a frame, with an offset sheet behind them like a drawing on a stack */
.shot { position: relative; margin: 0; }
.shot picture, .shot > img { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lg); }
.shot img { width: 100%; }
.shot::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--line-2); border-radius: 14px; pointer-events: none; }
.page-hero .shot::before, .hero .shot::before { border-color: rgb(255 255 255 / 14%); }
.page-hero .shot picture { border-color: rgb(255 255 255 / 12%); }
.shot-diagram .dg { position: relative; filter: drop-shadow(0 1px 1px rgb(15 37 43 / 5%)) drop-shadow(0 22px 44px rgb(15 37 43 / 13%)); }
.shot-diagram::before { display: none; }
.hero .shot-diagram .dg, .page-hero .shot-diagram .dg { filter: drop-shadow(0 30px 60px rgb(0 0 0 / 38%)); }
.shot-link { display: block; border-radius: var(--radius); cursor: zoom-in; }
.gap-case .shot { margin-bottom: 34px; }
.gap-case h3 { margin: 0 0 8px; }
/* Real screenshots in the hole-over-hole page's steps, pairs and tests: no offset frame, the "on" picture marked */
:is(.story-step, .compare-figure, .versus-panel, .mcp-window, .chat-picture) .shot::before { display: none; }
:is(.story-step, .compare-figure, .versus-panel, .mcp-window, .chat-picture) .shot picture { box-shadow: var(--shadow); }
:is(.story-step, .compare-figure).is-on .shot picture { border-color: var(--teal-100); box-shadow: 0 0 0 1px var(--teal-100), var(--shadow); }
.story-step .shot { margin-bottom: 14px; }
.compare-closeup { margin: clamp(28px, 3vw, 40px) 0 0; }
.compare-closeup .shot::before { display: none; }
.compare-closeup figcaption { margin-top: 14px; color: var(--ink-2); }

/* The home page's showcase carousel (_Showcase, site.js) */
.showcase-slide:not(.is-current) { display: none; }
.showcase-slide.is-current { animation: showcase-in .35s ease both; }
@keyframes showcase-in { from { opacity: 0; } to { opacity: 1; } }
.showcase .shot img { height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
.showcase-caption { margin: 30px 0 0; color: var(--night-text); font-size: .95rem; text-align: center; }
.showcase-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.showcase-controls[hidden], .showcase-button[hidden] { display: none; }
.showcase-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; background: rgb(255 255 255 / 6%); color: var(--white); cursor: pointer; }
.showcase-button:hover { background: rgb(255 255 255 / 14%); }
.showcase-button:focus-visible, .showcase-dot:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.showcase-button .icon { width: 18px; height: 18px; }
.showcase-prev .icon { transform: scaleX(-1); }
.showcase-pause .icon-play, .showcase-pause.is-paused .icon-pause { display: none; }
.showcase-pause.is-paused .icon-play { display: block; }
.showcase-dots { display: flex; flex-wrap: wrap; justify-content: center; }
.showcase-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.showcase-dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 30%); transition: width .2s ease, background-color .2s ease; }
.showcase-dot:hover::before { background: rgb(255 255 255 / 55%); }
.showcase-dot[aria-current="true"]::before { width: 18px; background: var(--sea); }
@media (prefers-reduced-motion: reduce) {
    .showcase-slide.is-current { animation: none; }
    .showcase-dot::before { transition: none; }
}

/* The gallery (Gallery page, home teaser, site.js) */
.gallery-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 28px; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-filters[hidden] { display: none; }
.gallery-filter { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink-2); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.gallery-filter:hover { border-color: var(--teal-100); color: var(--ink); }
.gallery-filter[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--white); }
.gallery-filter:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.gallery-count { margin: 0; color: var(--ink-3); font-size: .9rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.gallery-teaser { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.work { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.work[hidden] { display: none; }
.work-media { display: block; border-bottom: 1px solid var(--line); background: var(--white); cursor: zoom-in; }
.gallery-teaser .work-media { cursor: pointer; }
.work-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; padding: 10px; }
.work-media:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
.work-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.work-body h2, .work-body h3 { margin: 0 0 8px; }
.work-body > p { margin: 0 0 14px; color: var(--ink-2); }
.work-body .work-kind { margin: 0 0 6px; color: var(--teal); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.work-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.work-figures dt { color: var(--ink-3); font-size: .78rem; }
.work-figures dd { margin: 2px 0 0; color: var(--ink); font-weight: 600; }
.work-figures .work-material { grid-column: 1 / -1; }
/* A wide card (the 2D page's first factory jobs) puts its figures in three columns */
.work { container-type: inline-size; }
@container (min-width: 480px) {
    .work-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.work-app { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: 14px; font-size: .9rem; white-space: nowrap; }
.work-body > .work-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; }
.work-links .work-app { margin-top: 0; }
/* The 2D page's factory jobs (Gallery.Factory): two cards, then three */
.factory-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.factory-grid > .work { grid-column: span 2; }
.factory-grid > .work:nth-child(-n+2) { grid-column: span 3; }
.factory-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 28px; }
.factory-foot .note { flex: 1 1 420px; margin: 0; }
/* The 2D page's big sheets: the brackets' two windows side by side across the section, then each job's sheet above its close-up */
.big-sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.big-sheet-lead { grid-column: 1 / -1; }
.big-sheet-pictures { display: grid; gap: 12px; }
.big-sheet-lead .big-sheet-pictures { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.big-sheet .shot { margin: 0; }
.big-sheet .shot::before { display: none; }
.big-sheet .shot img { height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.big-sheet-lead .shot img { aspect-ratio: 16 / 10; object-fit: contain; }
.big-sheet h3 { margin: 16px 0 6px; }
.big-sheet p { margin: 0; color: var(--ink-2); }
.big-sheets-note { margin: 28px 0 0; }
@media (max-width: 1000px) {
    .factory-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
    .factory-grid > .work, .factory-grid > .work:nth-child(-n+2) { grid-column: auto; }
}

/* Settings, screens and project steps (2D page, overview, Projects): real screenshots in the content */
.settings-shot { max-width: 900px; margin: 0 auto clamp(28px, 3vw, 40px); }
.settings-shot .shot::before, .screen .shot::before, .step .shot::before { display: none; }
.screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.screen .shot { margin-bottom: 16px; }
.screen h3 { margin: 0 0 6px; }
.screen p { margin: 0; color: var(--ink-2); }
.step .shot { margin-bottom: 16px; }
.step .shot img { height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #f2f3f0; }

/* The screenshot viewer (_Layout, site.js) */
html.viewer-open { overflow: hidden; }
.viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 64px 84px 36px; border: 0; background: transparent; color: var(--night-text); }
.viewer[open] { display: flex; align-items: center; justify-content: center; }
.viewer::backdrop { background: rgb(6 16 19 / 95%); }
.viewer-figure { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; max-height: 100%; margin: 0; }
.viewer-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 170px); border-radius: var(--radius-sm); background: var(--white); box-shadow: 0 30px 80px rgb(0 0 0 / 45%); }
.viewer-caption { max-width: 920px; color: var(--night-text); font-size: .95rem; line-height: 1.5; text-align: center; }
.viewer-count { position: fixed; top: 26px; left: 24px; margin: 0; color: var(--night-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.viewer-button { position: fixed; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; background: rgb(255 255 255 / 8%); color: var(--white); cursor: pointer; }
.viewer-button:hover { background: rgb(255 255 255 / 16%); }
.viewer-button:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.viewer-button[hidden] { display: none; }
.viewer-button .icon { width: 22px; height: 22px; }
.viewer-close { top: 16px; right: 16px; }
.viewer-prev, .viewer-next { top: 50%; transform: translateY(-50%); }
.viewer-prev { left: 18px; }
.viewer-prev .icon { transform: scaleX(-1); }
.viewer-next { right: 18px; }
@media (max-width: 720px) {
    .viewer { padding: 64px 12px 84px; }
    .viewer-image { max-height: calc(100vh - 230px); }
    .viewer-prev, .viewer-next { top: auto; bottom: 18px; transform: none; }
    .viewer-prev { left: calc(50% - 58px); }
    .viewer-next { right: calc(50% - 58px); }
}
.shot-note { margin-top: 26px; color: var(--ink-3); font-size: .78rem; text-align: right; }
.page-hero .shot-note { color: var(--night-muted); }

/* Sections ---------------------------------------------------------------------------------------------------------- */

.section { padding: clamp(64px, 8vw, 116px) 0; }
.section-tight { padding: clamp(36px, 4.5vw, 60px) 0 clamp(60px, 7vw, 92px); }
/* Neighbouring sections on the same background would add their paddings up to one wide gap of a single colour, so the
   second starts with its content (owner, 2026-11-01: "whats with those gigantic margins?"). */
.section:not(.section-alt, .section-white, .section-dark) + .section:not(.section-alt, .section-white, .section-dark),
.section-alt + .section-alt, .section-white + .section-white, .section-dark + .section-dark { padding-top: 0; }
.section-alt { background: var(--paper-2); }
.section-white { background: var(--white); }
.section-dark { padding: clamp(64px, 8vw, 116px) 0; }
.section-dark::before { mask-image: linear-gradient(180deg, #000, transparent 90%); }
.section-dark p { color: var(--night-text); }
.section-head { max-width: 780px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head .lead { margin-top: 16px; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; max-width: none; }
.section-head-row > div { max-width: 720px; }
.subhead { margin-top: clamp(48px, 6vw, 72px); }

.grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
    position: relative;
    display: block;
    padding: clamp(22px, 2.4vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: inherit;
    text-decoration: none;
}
.card p { color: var(--ink-2); }
.card-link { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.card-link:hover { border-color: var(--line-2); color: inherit; box-shadow: var(--shadow); transform: translateY(-3px); }
.card-row { display: flex; gap: 18px; align-items: flex-start; }
.card-icon { display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--teal); }
.card-row .card-icon { margin-bottom: 0; }
.card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--teal); font-weight: 650; font-size: .95rem; }
.card-link:hover .card-more .icon { transform: translateX(3px); }
.card-more .icon { transition: transform .18s ease; }

/* Cards with a drawing on top */
.card-media { padding: 0; overflow: hidden; }
.card-media .media { padding: 18px 18px 10px; border-bottom: 1px solid var(--line); background: var(--paper); }
.card-media .body { padding: clamp(20px, 2.2vw, 26px); }
.card-media .label { display: block; margin-bottom: 6px; color: var(--teal); font-family: var(--display); font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.card-media h3 { font-family: var(--display); font-size: 1.7rem; font-weight: 600; line-height: 1.05; letter-spacing: 0; }

/* The reports page's example files: a page of each, cropped to one shape, and its downloads */
.samples-group { margin: 38px 0 16px; }
.section-head + .samples-group { margin-top: 0; }
.sample { display: flex; flex-direction: column; }
.sample .media { padding: 14px 14px 0; }
.sample .shot::before { display: none; }
.sample .shot picture { aspect-ratio: 1.414; border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: none; }
.sample .shot img { height: 100%; object-fit: contain; object-position: top; }
.sample .body { display: flex; flex: 1; flex-direction: column; }
.sample h4 { margin: 0 0 6px; font-size: 1.12rem; }
.sample p { margin: 0; }
.sample-files { display: flex; flex-wrap: wrap; gap: 8px; }
.sample .sample-files { margin-top: auto; padding-top: 16px; }
.sample-file { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--teal); font-size: .9rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.sample-file:hover { border-color: var(--teal); background: var(--paper); color: var(--teal); }
.sample-file span { color: var(--ink-3); font-weight: 500; }
.sample-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; color: var(--ink-2); }

/* Features read like a spec sheet: a rule, a small icon, the point. */
.feature { position: relative; padding-top: 22px; border-top: 1px solid var(--line-2); }
.feature h3 { margin-top: 0; }
.feature p { color: var(--ink-2); }
.feature-icon { display: block; width: auto; height: auto; margin-bottom: 14px; color: var(--teal); }
.feature-icon .icon { width: 22px; height: 22px; }
.feature-row { display: flex; gap: 16px; align-items: flex-start; }
.feature-row .feature-icon { flex: none; margin-bottom: 0; }
/* Features in a grid are numbered like the items of a spec sheet: 01, 02, ... */
.grid:has(> .feature) { counter-reset: feature; }
.grid > .feature { counter-increment: feature; }
.grid > .feature::after { content: counter(feature, decimal-leading-zero); position: absolute; top: 20px; right: 0; color: var(--ink-3); font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .1em; opacity: .55; }
.section-dark .grid > .feature::after { color: var(--night-muted); }
.section-dark .feature { border-top-color: var(--night-line); }
.section-dark .feature p { color: var(--night-text); }
.section-dark .feature-icon { color: var(--orange); }

/* Steps joined by a dashed cut line */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 36px); margin: 0; padding: 0; list-style: none; }
.step { position: relative; padding-top: 30px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * clamp(18px, 2.5vw, 36px)); border-top: 1.5px dashed var(--line-2); }
.step:last-child::before { right: 0; }
.step::after { content: ""; position: absolute; top: -5px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--paper-2); }
.step p { color: var(--ink-2); font-size: .98rem; }
.step-number { display: block; margin-bottom: 10px; color: var(--ink); font-family: var(--display); font-size: 2.4rem; font-weight: 600; line-height: 1; font-feature-settings: "tnum"; }

/* How-to guides: numbered steps down the page, each beside the screenshots that show it */
.howto-other { display: grid; gap: 8px; margin: 0 0 clamp(28px, 4vw, 48px); }
.howto-other p { margin: 0; }
.howto-steps { display: grid; gap: clamp(44px, 6vw, 80px); margin: 0; padding: 0; list-style: none; }
.howto-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; padding-top: clamp(28px, 4vw, 44px); border-top: 1.5px dashed var(--line-2); }
.howto-step:first-child { padding-top: 0; border-top: 0; }
.howto-step-text { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.howto-step h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.howto-copy > p { margin-top: 14px; color: var(--ink-2); }
.howto-shots { display: grid; gap: 18px; }
.hero-link { margin-top: 14px; }

/* The how-to films (_Film): the picture with its chapters beside it, the film's text folded under both */
.film { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: clamp(20px, 3vw, 36px); align-items: start; }
.film-frame { overflow: hidden; border-radius: var(--radius); background: var(--night); box-shadow: var(--shadow-lg); }
.film-frame video { display: block; width: 100%; height: auto; }
.film-about { margin: 0; color: var(--ink-2); font-size: .98rem; }
.film-chapters-title { margin: 20px 0 8px; color: var(--ink); font-size: .95rem; font-weight: 650; }
.film-chapters { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.film-chapters li { border-bottom: 1px solid var(--line-2); }
.film-chapters a { display: flex; gap: 12px; padding: 9px 0; color: var(--ink); font-size: .97rem; text-decoration: none; }
.film-chapters a:hover { color: var(--teal-700); }
.film-time { flex: none; min-width: 2.6em; color: var(--teal); font-weight: 650; font-feature-settings: "tnum"; }
.film-transcript { grid-column: 1 / -1; margin-top: 0; }
.film-transcript-text { display: grid; gap: 6px; max-width: 46em; padding-bottom: 20px; color: var(--ink-2); font-size: .97rem; }
.film-transcript-text p { margin: 0; }
.film-guide .feature-icon { margin-bottom: 12px; }
@media (max-width: 900px) {
    .film { grid-template-columns: minmax(0, 1fr); }
}
/* The 3D bands (home, 1D and 2D pages): a mosaic of 3D views, the lead picture over two rows and two columns */
.strip3d { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }
.strip3d-9 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip3d li { aspect-ratio: 1.47; }
.strip3d-6 li:first-child, .strip3d-9 li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.strip3d-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strip3d-bars li { aspect-ratio: 2.8; }
.strip3d a { position: relative; display: block; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #eef0ec; }
.strip3d picture, .strip3d img { display: block; width: 100%; height: 100%; }
.strip3d img { object-fit: cover; transition: transform .3s ease; }
.strip3d a:hover img { transform: scale(1.03); }
.strip3d-tag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / 90%); color: var(--ink); font-size: .74rem; font-weight: 650; }
.strip3d-title { position: absolute; right: 0; bottom: 0; left: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgb(14 22 26 / 78%)); color: var(--white); font-size: .88rem; font-weight: 600; line-height: 1.3; }
@media (max-width: 900px) { .strip3d, .strip3d-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip3d-bars { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .strip3d, .strip3d-9 { grid-template-columns: minmax(0, 1fr); } .strip3d-6 li:first-child, .strip3d-9 li:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 1.47; } }
.howto-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.howto-band-inner p { flex: 1 1 320px; margin: 0; color: var(--ink-2); font-size: 1.05rem; }
@media (max-width: 900px) { .howto-step { grid-template-columns: minmax(0, 1fr); } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split-media { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.split-reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.split h2 + p { margin-top: 18px; }
.outputs-media { max-width: 300px; margin-bottom: 22px; padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.outputs-shot { max-width: 420px; margin-bottom: 26px; }
.outputs-shot .shot::before { display: none; }
.split .lead + p { margin-top: 16px; color: var(--ink-2); }

/* A box with crop marks at two corners, like the corner of a drawing sheet */
.callout { position: relative; padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.callout::before, .callout::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.callout::before { top: -1px; left: -1px; border-top: 2px solid var(--orange); border-left: 2px solid var(--orange); border-top-left-radius: var(--radius); }
.callout::after { right: -1px; bottom: -1px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); border-bottom-right-radius: var(--radius); }
.callout-wide { max-width: 780px; }
.callout h2 { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem); }
.callout h2, .callout .h3 { display: flex; align-items: center; gap: 10px; }

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.chip { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); font-weight: 560; }
.chip .icon { color: var(--teal); }

.check-list { display: grid; gap: 11px; margin: 18px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); }
.check-list .icon { margin-top: .24em; color: var(--orange-700); }
.section-dark .check-list li { color: var(--night-text); }
.section-dark .check-list .icon { color: var(--orange); }

.themes { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.themes li { display: grid; justify-items: center; gap: 7px; color: var(--ink-3); font-size: .85rem; font-weight: 600; }
.themes img { border-radius: 14px; box-shadow: var(--shadow-sm); }
.themes-small { gap: 10px; margin-top: 16px; }
.themes-small img { border-radius: 10px; }

.brand-note { display: flex; gap: clamp(22px, 3vw, 36px); align-items: flex-start; max-width: 900px; }
.brand-note img { border-radius: 16px; box-shadow: var(--shadow); }

/* Price teasers on the home page: edition, price from, three points */
.teaser { display: flex; flex-direction: column; gap: 4px; padding: clamp(24px, 2.6vw, 32px); text-align: left; }
.teaser .edition-short { align-self: flex-start; }
.teaser-edition { color: var(--ink); font-family: var(--display); font-size: 1.8rem; font-weight: 600; line-height: 1.05; }
.teaser-tagline { color: var(--ink-3); }
.teaser-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; margin-top: 22px; color: var(--ink-3); font-weight: 600; }
.teaser-price strong { color: var(--ink); font-family: var(--display); font-size: 3.1rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; font-feature-settings: "tnum"; }
.teaser-vat { color: var(--ink-3); font-size: .86rem; }
.teaser-list { display: grid; gap: 9px; margin: 22px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line); }
.teaser-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: .96rem; line-height: 1.45; }
.teaser-list .icon { margin-top: .22em; color: var(--orange-700); }
.teaser .card-more { margin-top: auto; padding-top: 22px; }
.teaser-featured { border-color: var(--night); background: var(--night); }
.teaser-featured .teaser-edition, .teaser-featured .teaser-price strong { color: var(--white); }
.teaser-featured .teaser-tagline, .teaser-featured .teaser-vat, .teaser-featured .teaser-price { color: var(--night-muted); }
.teaser-featured .teaser-list { border-top-color: var(--night-line); }
.teaser-featured .teaser-list li { color: var(--night-text); }
.teaser-featured .teaser-list .icon, .teaser-featured .edition-short { color: var(--orange); }
.teaser-featured .card-more { color: var(--sea); }
.teaser-featured.card-link:hover { border-color: var(--night); }
.teaser-note { margin-top: 26px; }

/* Home: what it plans, as a grid of drawings on a blueprint grid */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.bento-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bento-1d { grid-column: span 7; }
.bento-2d { grid-column: span 5; }
.bento-warehouse { grid-column: 1 / -1; flex-direction: row-reverse; }
.bento-warehouse .media { flex: 1 1 58%; border-bottom: 0; border-left: 1px solid var(--line); }
.bento-warehouse .body { flex: 1 1 42%; align-self: center; }
.bento .media {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: clamp(22px, 3vw, 40px);
    border-bottom: 1px solid var(--line);
    background-color: #f3f0e8;
    background-image:
        linear-gradient(rgb(15 37 43 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(15 37 43 / 5%) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center;
}
.bento .media .dg { width: 100%; max-width: 440px; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.bento-card:hover .media .dg { transform: scale(1.035); }
.bento .body { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); }
.bento .card-more { margin-top: auto; padding-top: 18px; }
.bento-1d .media, .bento-2d .media { flex: 0 0 300px; min-height: 0; }
.bento-1d .body, .bento-2d .body { flex: 1 1 auto; }
.bento .label { display: block; margin-bottom: 8px; color: var(--teal); font-family: var(--display); font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bento h3 { font-family: var(--display); font-size: clamp(1.6rem, 1.3rem + .8vw, 2.1rem); font-weight: 600; line-height: 1.05; letter-spacing: 0; }
.bento p { max-width: 38em; }

/* A heading on the left, ruled rows on the right (dark band on the home page) */
.split-rows { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-rows .section-head { margin-bottom: 0; }
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--night-line); }
.row-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--night-line); }
.row-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 12px; background: rgb(255 255 255 / 4%); color: var(--orange); }
.row-item h3 { margin-bottom: 6px; color: var(--white); font-family: var(--display); font-size: 1.55rem; font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.row-item p { color: var(--night-text); }

.section-brand .brand-note { align-items: center; }
.section-brand .brand-note img { border-radius: 20px; }

.edition-card.is-featured { border-color: var(--night); background: var(--night); color: var(--night-text); }
.edition-card.is-featured h3 { color: var(--white); }
.edition-card.is-featured p { color: var(--night-text); }
.edition-card.is-featured .edition-price { color: var(--white); }
.edition-card.is-featured .muted { color: var(--night-muted); }
.edition-card h3 { font-family: var(--display); font-size: 1.75rem; font-weight: 600; line-height: 1.05; letter-spacing: 0; }
.edition-short { display: inline-block; margin-bottom: 14px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 6px; color: var(--teal); font-family: var(--display); font-size: .92rem; font-weight: 600; letter-spacing: .1em; }
.edition-card.is-featured .edition-short { color: var(--orange); }
.edition-price { margin-top: 16px; color: var(--ink); font-family: var(--display); font-size: 1.45rem; font-weight: 600; }

/* Final call to action */
.final-cta { padding: clamp(64px, 8vw, 112px) 0; }
.final-cta::before { mask-image: radial-gradient(90% 120% at 85% 50%, #000 20%, transparent 90%); }
.final-cta-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: end; gap: 32px 56px; }
.final-cta h2 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem); }
.final-cta p { max-width: 36em; margin-top: 16px; color: var(--night-text); font-size: 1.1rem; }
.final-cta .cta-row { margin-top: 0; }

/* Pricing ---------------------------------------------------------------------------------------------------------- */

.pricing { text-align: center; }
.term-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 auto; padding: 5px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--white); }
.term-switch legend { float: left; width: 100%; margin-bottom: 10px; color: var(--ink-3); font-family: var(--display); font-size: .92rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
/* Each radio covers its own label: a click focuses it, and a browser scrolls to a focused field it cannot see. */
.term-option { position: relative; }
.term-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.term-switch label { display: block; padding: 9px 20px; border-radius: 8px; color: var(--ink-2); font-weight: 650; cursor: pointer; }
.term-option:hover label { color: var(--ink); }
.term-switch input:checked + label { background: var(--night); color: var(--white); }
.term-switch input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 1px; }
.term-hint { margin: 12px 0 0; color: var(--ink-3); font-size: .9rem; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 34px; text-align: left; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.plan-card.is-featured { border-color: var(--night); background: var(--night); color: var(--night-text); box-shadow: var(--shadow-lg); }
.plan-card h2 { margin-bottom: 4px; font-size: 2rem; }
.plan-card.is-featured h2, .plan-card.is-featured .amount { color: var(--white); }
.plan-tagline { color: var(--ink-3); }
.plan-card.is-featured .plan-tagline, .plan-card.is-featured .per, .plan-card.is-featured .price-sub { color: var(--night-muted); }
.badge { position: absolute; top: -13px; left: 26px; margin: 0; padding: 4px 12px; border-radius: 6px; background: var(--orange); color: #1c0d04; font-family: var(--display); font-size: .9rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.plan-price { display: none; margin: 22px 0 6px; }
.plan-price[data-term="year"] { display: block; }
@supports selector(:has(*)) {
    .plan-price[data-term="year"] { display: none; }
    .pricing:has(#term-month:checked) .plan-price[data-term="month"],
    .pricing:has(#term-year:checked) .plan-price[data-term="year"],
    .pricing:has(#term-3years:checked) .plan-price[data-term="3years"],
    .pricing:has(#term-lifetime:checked) .plan-price[data-term="lifetime"] { display: block; }
}
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.price .amount { color: var(--ink); font-family: var(--display); font-size: 3.6rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; font-feature-settings: "tnum"; }
.price .per { color: var(--ink-3); font-weight: 600; }
.price-sub { min-height: 2.6em; margin: 8px 0 18px; color: var(--ink-3); font-size: .92rem; }
.plan-card .check-list { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan-card.is-featured .check-list { border-top-color: var(--night-line); }
.plan-card.is-featured .check-list li { color: var(--night-text); }
.plan-card.is-featured .check-list .icon { color: var(--orange); }
.plan-card.is-featured .btn-primary { box-shadow: none; }

.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.included li { display: flex; gap: 11px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); font-weight: 520; }
.included .icon { margin-top: .2em; color: var(--orange-700); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.table { width: 100%; border-collapse: collapse; font-size: .98rem; font-variant-numeric: tabular-nums; }
.table caption { padding: 14px 18px; color: var(--ink-3); font-size: .88rem; text-align: left; caption-side: bottom; }
.table th, .table td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table thead th { background: var(--paper); color: var(--ink-3); font-family: var(--display); font-size: .92rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody th { font-weight: 650; }
.price-table td a { color: var(--ink); font-family: var(--display); font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.price-table td a:hover { color: var(--teal); text-decoration: underline; }
.compare-table td { text-align: center; }
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table thead th { white-space: nowrap; }
/* The full edition's column carries a light tint: it has everything. */
.compare-table th:last-child, .compare-table td:last-child { background: rgb(20 107 120 / 6%); }
.compare-table thead th:last-child { color: var(--teal-700); }
.self-links { display: grid; gap: 12px; margin-top: 14px; }
.self-link { align-items: center; padding: 16px 18px; color: var(--ink); font-weight: 600; }
.self-link .card-icon { width: 40px; height: 40px; }
.self-link .self-arrow { margin-left: auto; color: var(--teal); transition: transform .18s ease; }
.self-link:hover .self-arrow { transform: translateX(3px); }
.compare-table .yes { margin: 0 auto; color: var(--teal); }
.compare-table .no { margin: 0 auto; color: #b3bcbd; }

/* FAQ: a ruled list, + turns into x */
.faq { display: grid; margin-top: 18px; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { position: relative; padding: 20px 52px 20px 0; color: var(--ink); font-size: 1.06rem; font-weight: 650; cursor: pointer; }
.faq summary:hover { color: var(--teal-700); }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--orange); transition: transform .2s ease; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { max-width: 46em; padding: 0 0 22px; color: var(--ink-2); }
.faq-group { margin-top: 48px; color: var(--ink-3); font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.faq-group:first-child { margin-top: 0; }

/* Download ---------------------------------------------------------------------------------------------------------- */

.download-card .btn { margin-top: 10px; }
.file-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 18px 0 0; color: var(--ink-3); font-size: .86rem; }
.file-meta dd { margin: 0; }
.hash { word-break: break-all; }
.code { overflow-x: auto; margin: 12px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--night); color: var(--cream); font-size: .88rem; }

/* AI assistants page: the example conversation, a neutral chat beside Velmar Cut's window (_McpExample). */
.mcp-demo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(18px, 2.5vw, 32px); align-items: start; }
.chat { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.chat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
.chat-app { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; }
.chat-app .icon { color: var(--teal); }
.chat-connected { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: .85rem; font-weight: 600; }
.chat-connected::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.chat-thread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(16px, 2.4vw, 26px); }
.chat-msg p { margin: 0; line-height: 1.6; }
.chat-user { justify-self: end; max-width: 86%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--paper-2); color: var(--ink); }
.chat-ai { max-width: 94%; color: var(--ink-2); }
.chat-ai + .chat-tool, .chat-tool + .chat-ai { margin-top: 4px; }
.chat-tool { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .92rem; }
.chat-tool summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 38px 9px 14px; position: relative; cursor: pointer; list-style: none; }
.chat-tool summary::-webkit-details-marker { display: none; }
.chat-tool summary::after { content: ""; position: absolute; top: 50%; right: 16px; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s ease; }
.chat-tool[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.chat-tool summary:focus-visible { outline: 3px solid var(--teal-100); outline-offset: 2px; border-radius: 10px; }
.chat-tool-name { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 650; }
.chat-tool-name .icon { color: var(--teal); }
.chat-tool-name code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); font-size: .82rem; }
.chat-tool-note { color: var(--ink-3); }
.chat-tool-body { padding: 0 14px 12px; }
.chat-tool-label { margin: 8px 0 0; color: var(--ink-3); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chat-tool .code { margin-top: 4px; padding: 10px 12px; font-size: .78rem; line-height: 1.5; }
.chat-paste { display: grid; gap: 2px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--white); color: var(--ink-2); font-family: var(--mono); font-size: .8rem; }
.chat-paste span { display: flex; justify-content: space-between; gap: 18px; }
.chat-paste b { color: var(--ink); font-weight: 600; }
.chat-paste .chat-paste-more { color: var(--ink-3); font-family: var(--font); }
.chat-picture { max-width: 94%; }
.chat-question { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: .92rem; }
.chat-msg .chat-question-title { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 650; }
.chat-question-title .icon { color: var(--teal); }
.chat-msg .chat-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chat-choice { padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); font-size: .86rem; font-weight: 600; }
.chat-msg .chat-file { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: .88rem; font-weight: 600; }
.chat-file .icon { color: var(--teal); }
.chat-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 22px); padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink-3); }
.mcp-window { position: sticky; top: 92px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.mcp-window-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink); font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mcp-window-title .icon { color: var(--teal); }
.mcp-window figcaption { margin-top: 10px; color: var(--ink-3); font-size: .9rem; }
.mcp-demo-note { margin-top: 18px; }
/* From a sketch to a part (Velmar Cut 1.7): the base plate drawing itself behind the hero, the sketch, the gear and the DXF in a
   row with arrows between them (smaller in the teasers), the sketch as the photo in the chat, the pictures in pairs. */
.sketch-hero-part { width: min(360px, 30vw); color: var(--sea); }
.part-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.part-line, .part-dim { fill: none; stroke: currentColor; stroke-dasharray: 1; stroke-dashoffset: 1; animation: part-draw 2.6s ease-out .2s forwards; }
.part-line { stroke-width: 1.8; }
.part-dim { stroke-width: 1.1; opacity: .7; animation-delay: 1.6s; animation-duration: 1.2s; }
.part-dim-label { fill: currentColor; font-family: var(--display); font-size: 15px; font-weight: 600; opacity: 0; animation: part-fade .6s ease-out 2.5s forwards; }
@keyframes part-draw { to { stroke-dashoffset: 0; } }
@keyframes part-fade { to { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .part-line, .part-dim { animation: none; stroke-dashoffset: 0; } .part-dim-label { animation: none; opacity: .85; } }
.sketch-flow { --flow-gap: clamp(30px, 4.5vw, 64px); display: grid; grid-template-columns: 1.33fr .99fr 1.1fr; gap: var(--flow-gap); align-items: start; margin: 0; padding: 0; list-style: none; }
.sketch-flow > li { position: relative; }
.sketch-flow > li + li::before { content: ""; position: absolute; top: 40%; left: calc(var(--flow-gap) / -2 - 8px); width: 14px; height: 14px; border-top: 3px solid var(--orange); border-right: 3px solid var(--orange); transform: rotate(45deg); }
.sketch-flow > li > figure, .sketch-pair > figure, .library-pair > figure { margin: 0; }
.sketch-flow figcaption { margin-top: 14px; color: var(--ink); font-family: var(--display); font-size: 1.2rem; font-weight: 600; text-align: center; }
.sketch-flow-mini { --flow-gap: 26px; }
/* Columns in the pictures' proportions (photo 1600 x 1200, chat 1200 x 1208, DXF 1350 x 1230), so all three are one height. */
.sketch-side { position: sticky; top: 92px; display: grid; gap: 18px; }
.sketch-side .mcp-window { position: static; }
.mcp-window-title .literal { letter-spacing: 0; text-transform: none; }
.sketch-chat .chat-picture { max-width: 340px; }
.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sketch-flow-mini > li + li::before { left: calc(var(--flow-gap) / -2 - 5px); width: 9px; height: 9px; border-width: 2px; }
.sketch-flow-mini .shot::before, .chat-photo .shot::before { display: none; }
.sketch-flow-mini figcaption { margin-top: 10px; font-size: .98rem; }
.sketch-teaser .split { align-items: center; }
.chat-photo { max-width: 240px; margin-bottom: 10px; }
.sketch-pair figcaption, .library-pair figcaption { margin-top: 26px; color: var(--ink-2); font-size: .95rem; }
.sketch-dxf .shot::before, .sketch-nested .shot::before { border-color: rgb(255 255 255 / 12%); }
/* Drawing by hand on the drawing page: five steps of the guide, three then two, each a picture and a line. */
.draw-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(36px, 4vw, 52px) clamp(18px, 2.2vw, 28px); margin: 0; padding: 0; list-style: none; }
.draw-step { grid-column: span 2; }
.draw-step:nth-child(4) { grid-column: 2 / span 2; }
.draw-step:nth-child(5) { grid-column: 4 / span 2; }
.draw-step .shot { margin-bottom: 18px; }
.draw-step .shot::before { display: none; }
.draw-step .shot picture { box-shadow: var(--shadow); }
.draw-step h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.draw-step-number { color: var(--teal); font-family: var(--display); font-size: 1.45rem; font-weight: 600; line-height: 1; font-feature-settings: "tnum"; }
.draw-step p { color: var(--ink-2); font-size: .97rem; }
.draw-more { margin: clamp(30px, 4vw, 44px) 0 0; text-align: center; }
@media (max-width: 900px) { .draw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .draw-step, .draw-step:nth-child(4), .draw-step:nth-child(5) { grid-column: auto; } }
@media (max-width: 560px) { .draw-steps { grid-template-columns: minmax(0, 1fr); } }
/* The parts library (Velmar Cut 1.7) on the warehouse page: the page large, then its points, then two closer looks. */
.library-pair { row-gap: clamp(40px, 4.5vw, 56px); margin-top: clamp(40px, 5vw, 60px); }
/* What's new: a release's main additions as cards with a picture after its other changes, numbered on from them. */
.release-notes { counter-reset: feature; }
.release-notes .grid:has(> .feature) { counter-reset: none; }
.release-pictures { margin-top: clamp(40px, 5vw, 60px); }
.grid > .release-picture { padding-top: 0; border-top: 0; }
.grid > .release-picture::after { content: none; }
.release-picture .shot { margin: 0 16px 38px 0; }
.release-picture .shot img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.release-picture h3 { position: relative; padding: 22px 44px 0 0; border-top: 1px solid var(--line-2); }
.release-picture h3::after { content: counter(feature, decimal-leading-zero); position: absolute; top: 20px; right: 0; color: var(--ink-3); font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .1em; opacity: .55; }
/* The part templates (Velmar Cut 1.7) by the app's groups: a card per template, its picture, name and one line. */
.template-panel, .library-hero { margin: 0 0 clamp(36px, 5vw, 56px); }
.template-panel figcaption, .library-hero figcaption { margin-top: 26px; color: var(--ink-3); font-size: .92rem; text-align: center; }
.template-group { margin: clamp(30px, 4vw, 48px) 0 16px; font-size: 1.25rem; }
.template-group:first-of-type { margin-top: 0; }
.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.template-card { display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.template-card .shot { margin-bottom: 8px; }
.template-card .shot::before { display: none; }
.template-card .shot picture { aspect-ratio: 1 / 1; background: var(--white); box-shadow: none; }
/* The pictures run from a long flat bar to a square plate: each sits whole and centred in a square, so the cards line up. */
.template-card .shot img { height: 100%; object-fit: contain; }
.template-card h4 { margin: 0; color: var(--ink); font-size: 1rem; }
.template-card p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
@media (max-width: 1040px) { .template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .template-grid { grid-template-columns: minmax(0, 1fr); } }
/* The gear's conversation, folded under its pictures. */
.sketch-more { margin-top: clamp(28px, 4vw, 44px); }
.sketch-more > summary { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 650; cursor: pointer; list-style: none; }
.sketch-more > summary::-webkit-details-marker { display: none; }
.sketch-more > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.sketch-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.sketch-more[open] > summary { margin-bottom: 24px; }
@media (max-width: 700px) {
    .sketch-flow { grid-template-columns: minmax(0, 1fr); }
    .sketch-flow > li + li::before { top: calc(var(--flow-gap) / -2 - 10px); left: 50%; transform: translateX(-50%) rotate(135deg); }
    .sketch-flow-mini { grid-template-columns: 1.33fr .99fr 1.1fr; }
    .sketch-flow-mini > li + li::before { top: 40%; left: calc(var(--flow-gap) / -2 - 5px); transform: rotate(45deg); }
}
@media (max-width: 960px) {
    .mcp-demo { grid-template-columns: minmax(0, 1fr); }
    .mcp-window, .sketch-side { position: static; }
}

/* Education ------------------------------------------------------------------------------------------------------- */

.apply-actions { margin-top: 28px; }

/* The next version: hole over hole, GPU acceleration ------------------------------------------------------------- */

.next-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 5px 13px 5px 11px; border: 1px solid var(--teal-100); border-radius: 999px; background: var(--teal-50); color: var(--teal-700); font-family: var(--display); font-size: .88rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.next-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.hero .next-badge, .page-hero .next-badge, .section-dark .next-badge { border-color: rgb(116 197 205 / 32%); background: rgb(116 197 205 / 10%); color: var(--sea); }
.hero .next-badge::before, .page-hero .next-badge::before, .section-dark .next-badge::before { background: var(--sea); }

.compare { align-items: start; }
.compare-figure { margin: 0; }
.compare-figure .media { padding: clamp(14px, 2.2vw, 26px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.compare-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--ink-3); font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.compare-label::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
:is(.compare-figure, .versus-panel).is-on .compare-label { color: var(--teal); }
:is(.compare-figure, .versus-panel).is-on .compare-label::before { background: currentColor; }
.compare-figure figcaption { margin-top: 14px; color: var(--ink-2); }
/* The square packing pages: the layouts are drawings on white, with no offset frame */
.squares-hero { max-width: 460px; justify-self: center; width: 100%; }
.squares-hero .shot > img, .squares-figures .shot > img { height: auto; }
.squares-figures .shot > img { box-shadow: var(--shadow); }
.squares-figures .is-on .shot > img { border-color: var(--teal-100); box-shadow: 0 0 0 1px var(--teal-100), var(--shadow); }
.squares-pair { max-width: 860px; }
.squares-gallery { margin-top: clamp(28px, 3vw, 40px); }
.squares-gallery .compare-figure { display: block; max-width: 320px; color: inherit; text-decoration: none; }
.squares-gallery .shot { display: block; }
.squares-gallery .compare-figure:hover .squares-caption { color: var(--teal-700); }
.squares-caption { display: block; margin-top: 12px; color: var(--ink-2); font-weight: 650; }
.squares-sizes :is(th, td), .squares-grids th { white-space: nowrap; }
.squares-time-note { display: block; margin-top: 2px; color: var(--ink-3); font-size: .86rem; line-height: 1.4; text-wrap-style: balance; }
/* Croatian and German headers and notes are longer: they wrap, so the table fits beside the page instead of scrolling. */
.squares-sizes:is(:lang(de), :lang(hr)) :is(thead th, .squares-time-note) { white-space: normal; }
.squares-grids td { overflow-wrap: anywhere; }
.squares-numbers th { width: 44%; }
.squares-numbers td { overflow-wrap: anywhere; }
.squares-numbers-wrap { margin-top: 18px; }
.squares-sources { margin-top: clamp(24px, 3vw, 36px); }
.squares-history { min-width: 680px; }
.squares-command { max-width: 860px; }
.squares-command p { margin-top: 20px; color: var(--ink-2); }
.squares-command .code + p { margin-top: 20px; }
.squares-code { font-variant-ligatures: none; }
.squares-lists { margin-top: clamp(28px, 3vw, 40px); }
.squares-not .icon { color: var(--ink-3); }
.squares-files-title { margin-top: clamp(28px, 3vw, 40px); }
.squares-files { margin-top: 16px; }
.squares-files-single { display: grid; max-width: 460px; }
.squares-file { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink-2); text-decoration: none; }
.squares-file:hover { border-color: var(--teal); color: var(--ink-2); }
.squares-file-title { display: flex; gap: 8px; align-items: center; color: var(--teal); font-weight: 650; }
.squares-file-name { color: var(--ink-3); font-size: .9rem; }
.squares-more .h3 { margin-top: clamp(20px, 3vw, 28px); }
/* The benchmarks page */
.bench-results td, .bench-results th { white-space: nowrap; }
.bench-mean :is(th, td) { background: var(--paper); font-weight: 650; }
.bench-subhead { margin-top: clamp(28px, 3vw, 40px); }
.bench-sources { margin-top: clamp(24px, 3vw, 36px); }
.bench-example { margin-top: 20px; }
.bench-test { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line-2); scroll-margin-top: 90px; }
.bench-test > p { max-width: 46em; }
.bench-test .table-wrap { margin-top: 16px; }
.bench-source { color: var(--ink-3); font-size: .92rem; }
.bench-picture { width: fit-content; max-width: min(100%, 760px); margin-top: 20px; }
.bench-picture .shot > img { width: auto; max-width: 100%; max-height: 420px; }
.bench-shapes { max-width: 820px; margin-top: 20px; }
.bench-shapes .shot > img { width: 100%; height: auto; padding: clamp(10px, 2vw, 20px); background: var(--white); }
.bench-esicup { margin-top: 24px; }
.bench-steps { display: grid; gap: 10px; max-width: 46em; margin: 0; padding-left: 1.3em; color: var(--ink-2); }
.rule-note { margin-top: clamp(24px, 3vw, 36px); }

.versus + .versus { margin-top: clamp(40px, 5vw, 64px); }
/* Title and job on the left, the settings line on the right: both columns share the width, so a long translation wraps. */
.versus-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px 40px; align-items: end; margin-bottom: 22px; }
.versus-head h3 { margin: 0 0 6px; font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; line-height: 1.1; }
.versus-head p { margin: 0; color: var(--ink-2); }
.versus-head .versus-settings { color: var(--ink-3); font-size: .9rem; }
.versus-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.versus-panel { padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.versus-panel.is-on { border-color: var(--teal-100); box-shadow: 0 0 0 1px var(--teal-100), var(--shadow); }
.versus-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 16px; }
.versus-stats .compare-label { width: 100%; margin-bottom: 4px; }
.versus-figure { color: var(--ink); font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 600; line-height: 1; font-feature-settings: "tnum"; }
.versus-sub { color: var(--ink-3); font-weight: 600; }
.strips-facts { margin-top: 22px; }
.soon-note { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; color: var(--ink-2); font-weight: 600; }
.soon-note .icon { flex: none; margin-top: 3px; color: var(--teal); }
.record-band .record-copy { max-width: 640px; }
.record-band .record-copy h2 { margin-top: 6px; }
.record-band .cta-row { margin-top: 26px; }
.challenge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; margin-top: 28px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); background: var(--white); }
.challenge h3 { margin: 0 0 8px; font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 600; line-height: 1.15; }
.challenge p { margin: 0; color: var(--ink-2); }
.challenge p + p { margin-top: 10px; }
.challenge .challenge-rules { color: var(--ink-3); font-size: .92rem; }
.new17-features { margin-top: clamp(36px, 4.5vw, 56px); }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.story-step .media { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.story-step.is-on .media { border-color: var(--teal-100); box-shadow: 0 0 0 1px var(--teal-100), var(--shadow); background: var(--white); }
.story-step h3 { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px; }
.story-number { color: var(--ink-3); font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .1em; }
.story-step.is-on .story-number { color: var(--teal); }
.story-step p { color: var(--ink-2); font-size: .97rem; }
@media (max-width: 1080px) {
    .story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .story { grid-template-columns: minmax(0, 1fr); }
}
.uses .feature a { font-weight: 600; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }

.gpu { align-items: start; }

.next-list .feature-icon { color: var(--teal); }

@media (max-width: 640px) {
    .versus-head { grid-template-columns: minmax(0, 1fr); }
    .versus-panels { grid-template-columns: minmax(0, 1fr); }
    .challenge { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* Savings estimate (Views/Shared/_SavingsCalculator.cshtml, js/savings.js) ------------------------------------- */

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: stretch; }
.calc-inputs { display: grid; gap: 20px; align-content: start; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.calc .field > label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.input-unit { display: flex; align-items: center; gap: 10px; }
.input-unit input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.input-unit input:focus, .calc select:focus { border-color: var(--teal); outline: 3px solid var(--teal-100); outline-offset: 0; }
.input-unit > span { color: var(--ink-3); font-weight: 650; }
.calc input[type="range"] { width: 100%; accent-color: var(--teal); }
.calc-points { color: var(--teal); font-family: var(--display); font-size: 1.35rem; font-weight: 600; }
.calc-result { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: var(--night); color: var(--night-text); }
.calc-figures { display: grid; gap: 16px; margin: 0; }
.calc-figures dt { color: var(--night-muted); font-size: .92rem; }
.calc-figures dd { margin: 2px 0 0; color: var(--white); font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 600; line-height: 1.05; font-feature-settings: "tnum"; }
.calc-payback dd { color: var(--sea); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.calc-yield { margin: 0; color: var(--night-text); font-weight: 600; }
.calc-note { margin: 0; color: var(--night-muted); font-size: .9rem; }
.calc-result .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 860px) {
    .calc { grid-template-columns: minmax(0, 1fr); }
}

/* Support subscription (SupportController, the pricing page, My licences) ---------------------------------------- */

.support-page { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.support-copy .check-list { margin-bottom: 20px; }
.support-order .form { margin-top: 18px; }
.support-account { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.support-account h2 { margin: 0 0 6px; font-size: 1.4rem; }
.support-account p { margin: 0; color: var(--ink-2); }
.support-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.support-for { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ink-2); font-weight: 600; }
.support-for .icon { margin-top: .2em; color: var(--teal); }
.support-for > span { min-width: 0; }
.support-price { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.support-price strong { color: var(--ink); font-family: var(--display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); font-weight: 600; line-height: 1; font-feature-settings: "tnum"; }
.support-price span { color: var(--ink-3); font-weight: 600; }
.support-offer { display: grid; gap: 12px; justify-items: start; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.support-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin: 0 0 28px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.support-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.support-card p { margin: 0; color: var(--ink-2); }
.support-card.is-active { border-color: var(--teal-100); box-shadow: 0 0 0 1px var(--teal-100); }
.support-card.is-active h2 .icon { color: var(--teal); }
/* Support beside the licences on the pricing page, in the checkout summary and after the payment. */
.plan-addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 2.5vw, 32px); align-items: center; margin-top: clamp(16px, 2vw, 24px); padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); text-align: left; }
.plan-addon .feature-icon { align-self: start; margin: 0; }
.plan-addon-copy .eyebrow { margin-bottom: 8px; }
.plan-addon-copy h2 { margin: 0 0 6px; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem); }
.plan-addon-copy p { margin: 0; color: var(--ink-2); }
.plan-addon-copy .hint { margin-top: 10px; color: var(--ink-3); }
.plan-addon-offer { display: grid; gap: 10px; justify-items: start; }
.plan-addon-offer .muted { margin: 0; }
.summary-addon { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.summary-addon h3 { margin: 0 0 6px; color: var(--white); font-size: 1.05rem; }
.summary-addon p { margin: 0 0 10px; color: var(--night-muted); font-size: .94rem; }
.result .support-offer { max-width: 560px; margin: 32px auto 0; text-align: left; }
.result .support-offer h2, .result .support-offer p { margin: 0; }
@media (max-width: 860px) {
    .support-page, .plan-addon { grid-template-columns: minmax(0, 1fr); }
}

/* Projects: the app's PROJECT card, the shared warehouse and the project menu, drawn in HTML. */
.project-mock { max-width: 440px; margin-left: auto; padding: 18px; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--radius); background: var(--night-2); box-shadow: var(--shadow-lg); color: var(--night-text); }
.pm-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; color: var(--night-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.pm-actions { display: flex; gap: 12px; color: var(--night-text); }
.pm-name { margin: 0 0 12px; color: var(--white); font-family: var(--display); font-size: 1.45rem; font-weight: 600; line-height: 1.1; }
.pm-caret { color: var(--night-muted); font-size: .9em; }
.pm-jobs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pm-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--night-3); }
.pm-badge { padding: 3px 7px; border-radius: 6px; background: rgb(255 255 255 / 8%); color: var(--sea); font-family: var(--display); font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.pm-job-text { display: grid; min-width: 0; }
.pm-job-text strong { overflow: hidden; color: var(--white); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pm-job-text small { color: var(--night-muted); font-size: .82rem; }
.pm-dot { width: 9px; height: 9px; border: 1.5px solid var(--night-muted); border-radius: 50%; }
.pm-job.is-ready .pm-dot { border-color: var(--sea); background: var(--sea); box-shadow: 0 0 0 3px rgb(116 197 205 / 18%); }
.pm-add { margin: 12px 0 0; padding: 9px 12px; border: 1px dashed rgb(255 255 255 / 18%); border-radius: var(--radius-sm); color: var(--sea); font-weight: 600; }

.stock-flow { display: grid; gap: 18px; justify-items: center; padding: clamp(26px, 4vw, 44px) clamp(18px, 3vw, 32px); border: 1px solid var(--night-line); border-radius: var(--radius); background: var(--night-2); }
.sf-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--night-line); border-radius: 999px; background: var(--night-3); color: var(--white); font-size: 1rem; font-weight: 600; }
.sf-chip .icon { color: var(--sea); }
.sf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; color: var(--night-text); font-size: .95rem; }
.sf-link { display: inline-flex; align-items: center; gap: 6px; }
.sf-take .icon { color: var(--orange); transform: rotate(90deg); }
.sf-store .icon { color: var(--sea); transform: rotate(-90deg); }
.sf-hub { display: flex; align-items: center; gap: 14px; padding: 20px 40px; border: 1px solid var(--orange); border-radius: var(--radius); background: var(--night-3); box-shadow: 0 0 0 6px rgb(238 130 75 / 10%); color: var(--white); font-family: var(--display); font-size: 2.1rem; }
.sf-hub .icon { width: 36px; height: 36px; color: var(--orange); }
.sf-next { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--white); font-size: 1rem; font-weight: 600; text-align: center; }
.sf-next .icon { flex: none; color: var(--sea); }

.menu-mock { max-width: 360px; margin: 0 auto; }
.menu-mock ul { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); list-style: none; }
.menu-mock li { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-2); }
.menu-mock li.is-group { margin-top: 6px; border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 13px; }
.menu-mock li.is-key { color: var(--ink); font-weight: 650; }
.menu-mock figcaption { margin-top: 12px; color: var(--ink-3); font-size: .9rem; text-align: center; }
@media (max-width: 860px) {
    .project-mock { margin: 0 auto; }
}

/* Legal and prose --------------------------------------------------------------------------------------------------- */

.prose h1 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem); }
.prose h2 { margin-top: 1.7em; font-size: 1.7rem; }
.prose > :first-child { margin-top: 0; }
.prose p { color: var(--ink-2); }
.facts-list { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 12px 24px; margin: 24px 0; }
.facts-list dt { color: var(--ink-3); font-weight: 600; }
.facts-list dd { margin: 0; }
.company { font-style: normal; color: var(--ink-2); }
.contact-email { font-family: var(--display); font-size: 1.9rem; font-weight: 600; }
.marks { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; }
.mark-figure { display: grid; justify-items: center; gap: 10px; margin: 0; }
.mark-figure img { border-radius: 24px; box-shadow: var(--shadow); }
.mark-figure figcaption { color: var(--ink-3); font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Partners and the developer -------------------------------------------------------------------------------------------- */

/* The band under the home hero: label, partner logo, one sentence, link */
.partner-band { border-bottom: 1px solid var(--line); background: var(--white); }
.partner-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(22px, 3.5vw, 44px); padding-block: 24px; }
.partner-band-label { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--teal); font-family: var(--display); font-size: .98rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.partner-band-label::before { content: ""; width: 22px; height: 10px; border-inline: 1.5px solid var(--orange); background: linear-gradient(var(--orange), var(--orange)) center / 100% 1.5px no-repeat; }
.partner-band-logo { flex: none; padding: 4px 22px 4px 0; border-right: 1px solid var(--line); }
.partner-band-logo img { width: 150px; transition: transform .18s ease; }
.partner-band-logo:hover img { transform: scale(1.03); }
.partner-band-text { flex: 1 1 340px; margin: 0; color: var(--ink-2); }

/* The partners page: the company card (logo, facts, link) beside its story */
.partner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.partner-card { display: grid; gap: 24px; }
.partner-logo { display: grid; place-items: center; padding: clamp(26px, 3.4vw, 42px) 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); transition: border-color .18s ease, box-shadow .18s ease; }
.partner-logo:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.partner-logo img { width: min(100%, 300px); }
.partner-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.partner-facts dt, .partner-facts dd { padding: 11px 0; border-top: 1px solid var(--line); }
.partner-facts dt { padding-right: 20px; }
.partner-facts dt { color: var(--ink-3); font-family: var(--display); font-size: .9rem; font-weight: 600; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
.partner-facts dd { margin: 0; font-weight: 600; }
.partner-visit { justify-self: start; }
.partner-story { padding-top: clamp(0px, 2vw, 18px); }
.partner-story .lead { margin-top: 18px; }
.partner-story .lead + p { margin-top: 16px; }
.partner-story p:not(.lead, .eyebrow) { color: var(--ink-2); }
.partner-join { margin: 26px 0 0; }

/* The partner link under the story on the about page */
.partner-mini { display: flex; align-items: center; gap: 18px; width: fit-content; max-width: 100%; margin-top: 28px; padding: 14px 20px 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: inherit; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
.partner-mini:hover { border-color: var(--line-2); color: inherit; box-shadow: var(--shadow); }
.partner-mini img { width: 112px; padding-right: 18px; border-right: 1px solid var(--line); box-sizing: content-box; }
.partner-mini strong { display: block; font-weight: 650; }
.partner-mini small { display: block; color: var(--ink-3); font-size: .9rem; }
.partner-mini > .icon { margin-left: 6px; color: var(--teal); transition: transform .18s ease; }
.partner-mini:hover > .icon { transform: translateX(3px); }

/* The developer's profile, set out like the title block of a technical drawing */
.founder { align-items: start; }
.founder .lead + p { margin-top: 16px; }
.founder p:not(.lead, .eyebrow) { color: var(--ink-2); }
.title-block { margin: 0; border: 2px solid var(--ink); border-radius: 4px; background: var(--white); box-shadow: var(--shadow); }
.title-block figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 20px 24px 18px; border-bottom: 2px solid var(--ink); }
.title-block-name { font-family: var(--display); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 600; line-height: 1.05; }
.title-block-org { color: var(--teal); font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.title-block dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.title-block dl > div { padding: 14px 24px 18px; border-bottom: 1px solid var(--line-2); }
.title-block dl > div:nth-child(odd) { border-right: 1px solid var(--line-2); }
.title-block dl > div:nth-last-child(-n + 2):nth-child(odd), .title-block dl > div:last-child { border-bottom: 0; }
.title-block dt { color: var(--ink-3); font-family: var(--display); font-size: .86rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.title-block dd { margin: 5px 0 0; color: var(--ink); font-weight: 600; line-height: 1.4; }

/* Forms, checkout, My licences -------------------------------------------------------------------------------------- */

.form { display: grid; gap: 20px; margin-top: 24px; }
.field { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-weight: 650; }
.field input[type="text"], .field input[type="email"], .field input:not([type]), .field input[type="password"], .field select, .field textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font: inherit;
}
.field input:focus { border-color: var(--teal); outline: 3px solid var(--teal-100); outline-offset: 0; }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field-error { margin: 0; color: var(--red); font-size: .92rem; font-weight: 600; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 6px; }
.radio-row label, .checkbox { display: inline-flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.radio-row input, .checkbox input { flex: none; width: 20px; height: 20px; margin: .15em 0 0; accent-color: var(--teal); }
.checkbox span { color: var(--ink-2); font-size: .95rem; }
.hint-person { display: none; }
@supports selector(:has(*)) {
    .form:has(input[name="Kind"][value="person"]:checked) .hint-person { display: inline; }
    .form:has(input[name="Kind"][value="person"]:checked) .hint-company { display: none; }
}
.renewal { padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--white); }
.renewal summary { color: var(--teal); font-weight: 650; cursor: pointer; }
.renewal[open] summary { margin-bottom: 8px; }

.alert { padding: 14px 16px; border-radius: var(--radius-sm); font-weight: 560; }
.alert-error { border: 1px solid #f0c4c1; background: #fdf0ef; color: var(--red); }
.alert-info { border: 1px solid var(--teal-100); background: var(--teal-50); color: var(--teal-900); }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.checkout-summary { position: sticky; top: 92px; padding: 28px; border-radius: var(--radius); background: var(--night); color: var(--night-text); }
.checkout-summary h2 { color: var(--white); font-family: var(--display); font-size: 1.6rem; }
.checkout-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin: 18px 0; }
.checkout-summary dt { color: var(--night-muted); }
.checkout-summary dd { margin: 0; color: var(--white); font-weight: 650; text-align: right; }
.checkout-summary .hint { color: var(--night-muted); }
.checkout-summary .text-link { color: var(--sea); }
.summary-price { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1; }
.summary-price small { display: block; margin-top: 4px; color: var(--night-muted); font-family: var(--font); font-size: .8rem; font-weight: 500; }

.form-inline-card { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }

.result { text-align: center; }
.result .numbered { display: inline-block; margin: 0 auto 20px; text-align: left; }
.result-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--teal-50); color: var(--teal); }
.result-icon .icon { width: 30px; height: 30px; }
.result-icon-muted { background: var(--paper-2); color: var(--ink-3); }
.result form { margin-top: 24px; }
.error-drawing { max-width: 420px; margin: 0 auto 28px; }
.dg .gap { fill: none; stroke: var(--dg-kerf); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg .code { fill: var(--orange-700); font-size: 19px; letter-spacing: .06em; }

/* Customer accounts: one narrow column, the form in a card. */
.account-page { max-width: 520px; }
.account-page h1 { font-size: clamp(2.3rem, 1.75rem + 1.9vw, 3.2rem); }
.account-page .lead { margin: 0 0 26px; font-size: 1.08rem; }
.account-page .alert { margin-bottom: 18px; }
.account-page .form { margin-top: 0; }
.account-step { margin: 0; color: var(--ink-2); }
.field-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.field-label-row label { font-weight: 650; }
.field-label-row a { font-size: .92rem; font-weight: 600; text-decoration: none; }
.field-label-row a:hover { text-decoration: underline; }
.account-switch { margin: 22px 0 0; color: var(--ink-2); text-align: center; }
/* The sign-in form's second way in: a one-time link by e-mail */
.form-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.form-or::before, .form-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.form-link-hint { margin: 10px 0 0; text-align: center; }
.account-switch a { font-weight: 650; }
.account-note { margin: 12px auto 0; max-width: 32em; text-align: center; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.list-tools form { margin: 0; }
.list-notice { margin: -8px 0 24px; }

.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.licence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.licence-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.licence-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.licence-card h2 { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.licence-card dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; }
.licence-card dt { color: var(--ink-3); }
.licence-card dd { margin: 0; }
.licence-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.status { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: .8rem; font-weight: 700; }
.status-ok { background: #e3f3ea; color: var(--green); }
.status-warn { background: #fdf1d8; color: var(--amber); }
.status-off { background: #eef0ef; color: #4c5e63; }

/* Footer ------------------------------------------------------------------------------------------------------------ */

.site-footer { padding: clamp(56px, 7vw, 84px) 0 30px; background: #08171b; color: var(--night-muted); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) repeat(2, minmax(0, .9fr)); gap: 36px; }
.site-footer h2 { margin-bottom: 14px; color: var(--white); font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.site-footer ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-product ul { display: block; columns: 2; column-gap: 28px; }
.footer-product li { margin-bottom: 9px; break-inside: avoid; }
.site-footer a { color: var(--night-text); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.brand-light, .brand-light:hover { color: var(--white); }
.footer-brand p { max-width: 30em; margin-top: 16px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--night-line); color: #7d979b; font-size: .86rem; }
.footer-bottom p { margin: 0; }

/* Drawings (tools/build-diagrams.py) -------------------------------------------------------------------------------- */

.dg {
    --dg-panel: var(--white);
    --dg-panel-line: var(--line);
    --dg-stock: #e7ece9;
    --dg-p1: #146b78;
    --dg-p2: #1f7f8c;
    --dg-p3: #3a98a4;
    --dg-in: #fff;
    --dg-hatch: #a9b9b6;
    --dg-waste: #c9d2cf;
    --dg-dim: #95a6a9;
    --dg-label: #5a6d72;
    --dg-strong: #23383e;
    --dg-kerf: var(--orange);
    --dg-sheet: #eef2f0;
    --dg-sheet-line: #c5d1ce;
    --dg-paper: #fff;
    --dg-chrome: #f1f4f3;
    --dg-side: #f7f9f8;
    --dg-tool: #e5ebe9;
    --dg-sel: rgb(20 107 120 / 9%);
    --dg-float: #fff;
    --dg-float-line: #dfe5e3;
    --dg-hole: #22343a;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--display);
    font-weight: 600;
    font-feature-settings: "tnum";
}
.hero .dg, .page-hero .dg, .section-dark .dg {
    --dg-panel: #11303a;
    --dg-panel-line: rgb(255 255 255 / 11%);
    --dg-stock: rgb(255 255 255 / 6%);
    --dg-p1: #1b7d8a;
    --dg-p2: #2590a0;
    --dg-p3: #35a3b0;
    --dg-in: #fff;
    --dg-hatch: rgb(255 255 255 / 30%);
    --dg-waste: rgb(255 255 255 / 18%);
    --dg-dim: rgb(255 255 255 / 34%);
    --dg-label: #9fb8bc;
    --dg-strong: #e6eff0;
    --dg-sheet: rgb(255 255 255 / 5%);
    --dg-sheet-line: rgb(255 255 255 / 18%);
    --dg-paper: #f4f2ec;
    --dg-chrome: rgb(255 255 255 / 3.5%);
    --dg-side: rgb(0 0 0 / 14%);
    --dg-tool: rgb(255 255 255 / 8%);
    --dg-sel: rgb(116 197 205 / 11%);
    --dg-float: #14363f;
    --dg-float-line: rgb(255 255 255 / 13%);
    --dg-hole: #020b0e;
}
/* A card lifted off a dark window in paper colours (the hero's part close-up). */
.dg .light {
    --dg-float: #f7f5ef;
    --dg-float-line: rgb(15 37 43 / 8%);
    --dg-panel-line: #e4e0d6;
    --dg-p1: #146b78;
    --dg-p2: #1f7f8c;
    --dg-p3: #3a98a4;
    --dg-dim: #9aaaac;
    --dg-label: #5a6d72;
    --dg-strong: #1d3238;
}
.dg .panel { fill: var(--dg-panel); stroke: var(--dg-panel-line); }
/* The application window around the large drawings */
.dg .panel-fill { fill: var(--dg-panel); }
.dg .frame { fill: none; stroke: var(--dg-panel-line); }
.dg .chrome { fill: var(--dg-chrome); }
.dg .app { fill: var(--dg-p1); }
.dg .app-mountain { fill: #fff6e5; }
.dg .app-v { fill: none; stroke: #4d94ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dg .tab { fill: var(--dg-label); font-size: 12px; letter-spacing: .06em; }
.dg .tab.is-on { fill: var(--dg-strong); }
.dg .tab-on { fill: var(--dg-tool); }
.dg .ctl { fill: none; stroke: var(--dg-dim); stroke-width: 1.3; stroke-linecap: round; }
.dg .tool { fill: var(--dg-tool); }
.dg .glyph { fill: none; stroke: var(--dg-label); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dg .glyph-fill { fill: var(--dg-label); opacity: .55; }
.dg .go { fill: var(--dg-kerf); }
.dg .go-icon { fill: #1c0d04; }
.dg .side { fill: var(--dg-side); }
.dg .sel { fill: var(--dg-sel); }
.dg .sel-bar { fill: var(--dg-kerf); }
.dg .cell { fill: var(--dg-label); font-size: 13px; }
.dg .cell.strong { fill: var(--dg-strong); font-size: 13px; }
.dg .float-panel { fill: var(--dg-float); stroke: var(--dg-float-line); }
@media (prefers-reduced-motion: no-preference) {
    .dg-hero .float { animation: lift-in .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
    .dg-hero .float + .float { animation-delay: .25s; }
}
/* Only a slide, no fade: if a browser pauses the animation, the cards are still there. */
@keyframes lift-in { from { translate: 0 16px; } }
.dg .stock { fill: var(--dg-stock); }
.dg .p1 { fill: var(--dg-p1); }
.dg .p2 { fill: var(--dg-p2); }
.dg .p3 { fill: var(--dg-p3); }
.dg .kerf { stroke: var(--dg-kerf); stroke-width: 2; stroke-linecap: round; }
.dg .rest { stroke: var(--dg-hatch); stroke-width: 1; }
.dg .hatch { stroke: var(--dg-hatch); stroke-width: 1.4; }
.dg .waste { fill: var(--dg-waste); }
.dg text { fill: var(--dg-label); letter-spacing: .02em; }
.dg .in { fill: var(--dg-in); font-size: 13px; }
.dg .in.big { font-size: 16px; letter-spacing: .08em; }
.dg .rest-label { fill: var(--dg-strong); font-size: 12px; }
.dg .count { fill: var(--dg-strong); font-size: 16px; }
.dg .count.big { font-size: 20px; }
.dg .dim, .dg .tick, .dg .leader { stroke: var(--dg-dim); stroke-width: 1; }
.dg .dim-label { font-size: 13.5px; }
.dg .strong { fill: var(--dg-strong); font-size: 15px; }
.dg .rule { stroke: var(--dg-panel-line); }
.dg .sheet { fill: var(--dg-sheet); stroke: var(--dg-sheet-line); }
.dg .cut { stroke: var(--dg-kerf); stroke-width: 1.5; stroke-dasharray: 5 4; }
/* Hole over hole (tools/build-diagrams.py, from the test plans) */
.dg .sheet-hole { fill: var(--dg-hole); stroke: var(--dg-sheet-line); stroke-width: .5; }
.dg .hole-mark { fill: none; stroke: var(--dg-kerf); stroke-width: 1.6; }
.dg .gap-ring { fill: none; stroke: var(--dg-kerf); stroke-width: 1.5; stroke-dasharray: 4 3; }
.dg .ghost { fill: rgb(20 107 120 / 7%); stroke: var(--dg-p1); stroke-width: 1.5; stroke-dasharray: 7 5; }
.dg .slot { fill: none; stroke: var(--dg-dim); stroke-width: 1.5; stroke-dasharray: 7 5; }
.dg .slot-label { fill: var(--dg-label); font-size: 30px; letter-spacing: .04em; }
.dg .trial { opacity: .42; }
.dg .best-frame { fill: none; stroke: var(--dg-p1); stroke-width: 2.5; }
.dg .angle { stroke: var(--dg-kerf); stroke-width: 1.6; }
.dg .post, .dg .arm { fill: var(--dg-strong); opacity: .75; }
.dg .outline { fill: none; stroke: var(--dg-p3); stroke-width: 1.5; }
.dg .flow { stroke: var(--dg-kerf); stroke-width: 2; stroke-dasharray: 6 5; }
.dg .flow-head { fill: var(--dg-kerf); }
.dg .paper { fill: var(--dg-paper); stroke: var(--dg-panel-line); }
.dg .paper-head { fill: #e3e8e6; }
.dg .paper .text, .dg .text-line { fill: #c3ccca; }
.dg .mark { fill: var(--dg-kerf); }
.dg-report .count, .dg-report-card .count, .dg-report .dim-label, .dg-report-card .dim-label { fill: #3b4d52; }
.dg-report .stock, .dg-report-card .stock { fill: #e7ece9; }
.dg-report .rule, .dg-report-card .rule { stroke: #dde3e1; }
.dg .grid-dot { fill: var(--dg-dim); opacity: .55; }
.dg .editing { opacity: .92; }
.dg .select { stroke: var(--dg-kerf); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dg .handle { fill: var(--dg-panel); stroke: var(--dg-kerf); stroke-width: 1.5; }
.dg .tile { fill: var(--dg-sheet); stroke: var(--dg-panel-line); }
.dg .tile.is-selected { stroke: var(--dg-kerf); stroke-width: 2; }
.dg .badge { fill: var(--dg-stock); }
.dg .badge-text { fill: var(--dg-label); font-size: 12px; }

/* Responsive -------------------------------------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .header-inner { gap: 18px; }
    .main-nav > ul { gap: 2px; }
    .main-nav a, .main-nav summary { padding: 8px 9px; }
}

/* Six menu entries in Croatian need about 1 040 px; below that the header uses the menu button. */
@media (max-width: 1040px) {
    .main-nav { display: none; }
    .mobile-nav { display: block; }
    .grid-4, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .step:nth-child(2n)::before { right: 0; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 960px) {
    .main-nav { display: none; }
    .mobile-nav { display: block; }
    .hero-grid, .split, .split-media, .split-reverse, .checkout-grid, .final-cta-inner { grid-template-columns: minmax(0, 1fr); }
    .split-reverse > .shot { order: 2; }
    .grid-3, .plans, .included { grid-template-columns: minmax(0, 1fr); }
    .plans { max-width: 540px; margin-inline: auto; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand, .footer-product { grid-column: 1 / -1; }
    .checkout-summary { position: static; order: -1; }
    .licence-list { grid-template-columns: minmax(0, 1fr); }
    .hero-media { max-width: 680px; }
    .hero-deco { display: none; }
    .hero .hero-grid, .split-rows, .request-page { grid-template-columns: minmax(0, 1fr); }
    .bento-1d, .bento-2d { grid-column: 1 / -1; }
    .bento-warehouse { flex-direction: column; }
    .bento-warehouse .media { border-left: 0; border-bottom: 1px solid var(--line); }
    .partner { grid-template-columns: minmax(0, 1fr); }
    .partner-card { max-width: 560px; }
}

@media (max-width: 640px) {
    body { font-size: 1rem; }
    .container { padding-inline: 16px; }
    .grid-2, .grid-4, .steps, .chips { grid-template-columns: minmax(0, 1fr); }
    .step::before { right: 0; }
    .facts { grid-template-columns: minmax(0, 1fr); }
    .facts li, .facts li + li { padding: 14px 0; border-left: 0; }
    .facts li + li { border-top: 1px solid var(--night-line); }
    .header-inner { gap: 10px; min-height: 62px; }
    .header-cta { display: none; }
    .term-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .term-switch legend { grid-column: 1 / -1; }
    .term-switch label { text-align: center; }
    .cta-row .btn { width: 100%; }
    .card-row, .brand-note { flex-direction: column; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .facts-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .facts-list dd { margin-bottom: 10px; }
    .partner-band-logo { padding-right: 0; border-right: 0; }
    .partner-facts { grid-template-columns: minmax(0, 1fr); }
    .partner-facts dd { padding-top: 0; border-top: 0; }
    .partner-facts dt { padding-bottom: 2px; }
    .partner-visit { justify-self: stretch; }
    .title-block dl { grid-template-columns: minmax(0, 1fr); }
    .title-block dl > div:nth-child(odd) { border-right: 0; }
    .title-block dl > div:nth-last-child(-n + 2):nth-child(odd) { border-bottom: 1px solid var(--line-2); }
    .title-block dl > div:last-child { border-bottom: 0; }
    .shot::before { inset: 10px -8px -10px 8px; }
    .breadcrumb + .page-hero { padding-top: calc(48px + 22px); }
    .table th, .table td { padding: 13px 10px; }
    .compare-table thead th { letter-spacing: .06em; }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .section .section-head, .bento > *, .section .grid > *, .steps > *, .rows > *, .section .split > *, .final-cta-inner > * {
            animation: reveal linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 12%;
        }
    }
}
@keyframes reveal { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: none; } }

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

@media print {
    *, *::before, *::after { animation: none !important; }
    .site-header, .site-footer, .final-cta, .breadcrumb { display: none; }
    .hero, .page-hero { background: none; color: var(--ink); }
    .hero h1, .page-hero h1 { color: var(--ink); }
    .section { padding: 16px 0; }
}