/* Self-hosted fonts (SIL Open Font License, from Google Fonts): Inter Tight, Geist, Geist Mono, Instrument Sans, Instrument Serif.
   Latin and Latin Extended subsets; the files are named family-subset.woff2. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2?v=824f485b5d) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2?v=19f9c92546) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin-ext.woff2?v=84c2a01e0e) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2?v=72971bd490) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2?v=c4fcfea41f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2?v=2ee17598a9) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin-ext.woff2?v=d001482125) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin.woff2?v=5a51946dff) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-ext.woff2?v=fd9beddaae) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin.woff2?v=77fefe8ca1) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Store tokens: light glass. The brand lives here; layout CSS only reads these.
   Grounds are near-white with a faint cool bias; frosted glass is kept for what floats (the nav, overlay cards on the
   film, drawers). Hairlines, soft long shadows and one faint cool accent taken from the hero film's beam.
   Dark mode is its own designed set (dark glass), not an inversion: the system setting picks it unless the visitor
   chose a theme (html[data-theme], set by site.js). */
:root {
  color-scheme: light;

  /* grounds and ink */
  --bg: #F6F7F9;
  --bg-soft: #EEF0F4;
  --surface: #FFFFFF;
  --ink: #0E1013;
  --text-2: #4A5059;
  --text-3: #5E646E;
  --line: rgb(14 16 19 / 0.08);
  --line-2: rgb(14 16 19 / 0.15);
  --on-ink: #FFFFFF;

  /* the one accent: the film's cool beam. --beam is an RGB triplet for glows; --accent is the readable ink of it */
  --beam: 111 147 214;
  --accent: #3D63B8;

  /* glass */
  --glass: rgb(255 255 255 / 0.66);
  --glass-strong: rgb(255 255 255 / 0.84);
  --glass-edge: rgb(255 255 255 / 0.8);
  --blur: blur(20px) saturate(1.5);

  /* deep panels (pricing highlight, code): ink, not a gradient */
  --dark: #0E1013;
  --on-dark: #EEF0F4;
  --on-dark-2: rgb(238 240 244 / 0.64);
  --dark-line: rgb(255 255 255 / 0.1);

  /* legacy names some page CSS still reads; all map to the one accent */
  --blue: var(--beam);
  --violet: var(--beam);
  --orchid: var(--beam);
  --grad: linear-gradient(180deg, rgb(var(--beam)), var(--accent));

  /* type: a confident display face, a quiet text face, one italic for the secondary word, a mono for small labels */
  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* type scale (fluid, 1.25 below and wide above) */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-lg: clamp(19px, 1.5vw, 21px);
  --t-h3: clamp(21px, 1.8vw, 25px);
  --t-h2: clamp(34px, 4.4vw, 60px);
  --t-h1: clamp(44px, 6.4vw, 92px);

  /* spacing rhythm: 8px base; sections breathe at --sec */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --sec: clamp(88px, 10vw, 152px);

  /* layout */
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --shadow: 0 1px 1px rgb(14 16 19 / 0.03), 0 12px 32px -18px rgb(24 34 60 / 0.22);
  --shadow-lg: 0 1px 2px rgb(14 16 19 / 0.04), 0 40px 80px -36px rgb(24 34 60 / 0.32);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* dark glass */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0C0F; --bg-soft: #111419; --surface: #15181D; --ink: #ECEEF2; --text-2: #A8AEB8; --text-3: #8A909B;
    --line: rgb(255 255 255 / 0.08); --line-2: rgb(255 255 255 / 0.16); --on-ink: #0A0C0F;
    --beam: 143 178 240; --accent: #9DBBF2;
    --glass: rgb(22 25 30 / 0.6); --glass-strong: rgb(22 25 30 / 0.82); --glass-edge: rgb(255 255 255 / 0.1);
    --dark: #15181D; --dark-line: rgb(255 255 255 / 0.1);
    --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 36px -18px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -36px rgb(0 0 0 / 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0C0F; --bg-soft: #111419; --surface: #15181D; --ink: #ECEEF2; --text-2: #A8AEB8; --text-3: #8A909B;
  --line: rgb(255 255 255 / 0.08); --line-2: rgb(255 255 255 / 0.16); --on-ink: #0A0C0F;
  --beam: 143 178 240; --accent: #9DBBF2;
  --glass: rgb(22 25 30 / 0.6); --glass-strong: rgb(22 25 30 / 0.82); --glass-edge: rgb(255 255 255 / 0.1);
  --dark: #15181D; --dark-line: rgb(255 255 255 / 0.1);
  --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 36px -18px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -36px rgb(0 0 0 / 0.8);
}

/* Shared layout: reset, type, buttons, the glass nav, footer, entrance. Reads tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }

/* smooth scrolling (assets/js/smooth.js, Lenis, every page): the library's own required rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* type: display face for headings, quiet text face for everything else */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
h1 { letter-spacing: -0.025em; }
em.it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
::selection { background: rgb(var(--beam) / 0.28); }

/* buttons: ink pill, glass pill */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font: 500 15px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background .3s var(--ease), color .3s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 10px 24px -12px rgb(14 16 19 / 0.55); }
.btn-primary:hover { box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 16px 32px -14px rgb(var(--beam) / 0.9); transform: translateY(-1px); }
.btn-secondary, .btn-glass { background: var(--glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-secondary:hover, .btn-glass:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-light { background: var(--on-dark); color: #0E1013; }
.btn-light:hover { background: #fff; }

/* header: a floating glass bar */
.hd { position: sticky; top: 0; z-index: 30; padding: 12px var(--gutter) 0; pointer-events: none; }
.hd .wrap { pointer-events: auto; display: flex; align-items: center; gap: 20px; height: 60px; max-width: calc(var(--max) + 24px); padding: 0 8px 0 18px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow); }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 600 21px/1 var(--display); letter-spacing: -0.025em; }
.logo svg { width: 24px; height: 24px; flex: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav .dd > button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; white-space: nowrap; border: 0; background: none; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: color .2s, background .2s; }
.nav > a:hover, .nav .dd > button:hover, .nav .dd.open > button { color: var(--ink); background: rgb(var(--beam) / 0.1); }
.nav .chev { width: 14px; height: 14px; transition: transform .2s; }
.dd { position: relative; }
.dd.open .chev { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 14px); left: -8px; width: 290px; padding: 8px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; }
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
.dd-panel a { display: block; padding: 10px 12px; border-radius: 11px; }
.dd-panel a:hover { background: rgb(var(--beam) / 0.1); }
.dd-panel b { display: block; font-size: 15px; font-weight: 550; }
.dd-panel small { display: block; font-size: 13px; color: var(--text-3); }
.hd .cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.sheet { display: none; }

@media (max-width: 1180px) {
  .nav > a, .nav .dd > button { padding: 0 10px; }
}
@media (max-width: 1100px) { /* six header links and the CTA need 1100px */
  .nav, .hd .cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hd { padding-top: 8px; }
  .hd .wrap { height: 56px; padding: 0 6px 0 16px; }
  .sheet { pointer-events: auto; position: absolute; top: 72px; left: var(--gutter); right: var(--gutter); max-height: calc(100svh - 88px); overflow: auto; padding: 12px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg); }
  .sheet.open { display: block; }
  .sheet p { margin: 14px 12px 4px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .sheet a { display: block; padding: 11px 12px; border-radius: 11px; font-weight: 500; }
  .sheet a:hover { background: rgb(var(--beam) / 0.1); }
  .sheet .btn { width: 100%; margin-top: 10px; }
}

/* footer: hairline columns on the ground, a giant quiet wordmark, the press-publish sign-off */
.ft { position: relative; overflow: hidden; margin-top: 0; border-top: 1px solid var(--line); background: var(--bg); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding-block: 80px 56px; }
.ft h2 { margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 34px); }
.ft-lede { margin: 0; color: var(--text-2); }
.nl { display: flex; gap: 8px; max-width: 440px; margin-top: 24px; }
.nl input { flex: 1; min-width: 0; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 15px var(--font); }
.nl input::placeholder { color: var(--text-3); }
.nl input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.nl .btn { background: var(--ink); color: var(--on-ink); }
.nl-note { min-height: 22px; margin: 10px 0 0 20px; font-size: 13px; color: var(--text-2); }
.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ft-cols h3 { margin: 6px 0 16px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ft-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ft-cols a { color: var(--text-2); transition: color .2s; }
.ft-cols a:hover { color: var(--ink); }
.ft-word { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.ft-word b { font: 600 clamp(88px, 21vw, 300px)/.8 var(--display); letter-spacing: -0.05em; margin: 0 0 -.06em -.05em; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.ft-word span { padding-bottom: 14px; font: italic 400 clamp(22px, 2.4vw, 32px)/1 var(--serif); color: var(--text-2); white-space: nowrap; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 20px 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.ft-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ft-legal span { color: var(--line-2); } .ft-legal .bar { margin-inline: 4px; }
.ft-bottom a:hover { color: var(--ink); }
.theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.theme button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 13px; color: var(--text-2); cursor: pointer; }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
@media (max-width: 860px) {
  .ft-top { grid-template-columns: minmax(0, 1fr); padding-block: 64px 40px; }
  .ft-word { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ft-word span { padding: 0 0 8px; }
}
@media (max-width: 520px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .nl { flex-direction: column; }
  .nl .btn { width: 100%; }
}

/* first-view entrance: each section rises in once as it enters (site.js adds .rv-on to <html> and .in to sections) */
.rv-on :is(main > section:not(.hc), main > div > section, .ft > .wrap) { opacity: 0; transform: translateY(32px); transition: opacity 1.2s var(--slow), transform 1.4s var(--slow); }
.rv-on :is(main > section, main > div > section, .ft > .wrap).in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } html { scroll-behavior: auto; } }

/* skip link, current page in menus */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 550; transition: top .15s; }
.skip:focus { top: 12px; }
.nav > a[aria-current="page"], .dd-panel a[aria-current="page"] b, .sheet a[aria-current="page"] { color: var(--ink); }
.nav > a[aria-current="page"] { background: rgb(var(--beam) / 0.12); }

/* Home: the hero card, then the catalogue. */

/* hero card (after sections/heroes/video-card): the glass film in an inset card that fills the first view */
.top { position: relative; isolation: isolate; background: var(--bg); }
.hc { --m: clamp(8px, 1vw, 16px); --gx: clamp(18px, 2.4vw, 40px); --r: clamp(22px, 2.4vw, 36px); padding: 10px var(--m) 0; margin-top: -72px; }
.hc-card { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto; column-gap: var(--gx); min-height: max(640px, calc(100svh - 10px - var(--m))); padding: calc(var(--gx) + 72px) var(--gx) var(--gx); border-radius: var(--r); overflow: hidden; isolation: isolate; background: #E9ECF0; color: #0E1013;
  box-shadow: inset 0 0 0 1px rgb(14 16 19 / 0.06), var(--shadow-lg); clip-path: inset(0 round var(--r)); transition: clip-path 1.6s cubic-bezier(.76, 0, .24, 1); }
.hc-media { position: absolute; inset: 0; z-index: -3; }
.hc-media img, .hc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; transform: scale(1.04); transition: transform 2.4s var(--slow); }
.hc-media video { z-index: 1; }
.hc-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(38% 26% at 0% 0%, rgb(246 247 249 / .5), rgb(246 247 249 / 0) 100%), radial-gradient(44% 34% at 0% 100%, rgb(246 247 249 / .34), rgb(246 247 249 / 0) 100%), linear-gradient(180deg, rgb(246 247 249 / .32) 0%, rgb(246 247 249 / 0) 20%, rgb(246 247 249 / 0) 80%, rgb(246 247 249 / .22) 100%); }
.hc-marks { position: absolute; inset: 0 var(--gx); z-index: -1; pointer-events: none; }
.hc-marks i { position: absolute; width: 11px; height: 11px; margin: -5px 0 0 -5px; }
.hc-marks i::before, .hc-marks i::after { content: ""; position: absolute; background: rgb(14 16 19 / .3); }
.hc-marks i::before { left: 5px; top: 0; width: 1px; height: 11px; } .hc-marks i::after { top: 5px; left: 0; height: 1px; width: 11px; }
.hc-top { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.hc h1 { grid-column: 1 / 3; margin: 0; max-width: 21ch; font-size: clamp(32px, 3.3vw, 52px); line-height: 1.02; letter-spacing: -0.025em; }
/* the wordmark, with "Templates" set under its tail in the same face (a studio's second word) */
.hc-word { --ws: clamp(64px, min(calc(128vw / var(--n, 5)), 30svh), 440px); grid-column: 1 / -1; grid-row: 3; align-self: end; display: flex; margin: clamp(20px, 4svh, 56px) 0 0; pointer-events: none; }
.hc-wm { display: inline-flex; flex-direction: column; align-items: flex-end; }
.hc-word b { display: flex; font: 600 var(--ws)/.8 var(--display); letter-spacing: -0.045em; margin-left: -.055em; color: #0E1013; }
.hc-word b > span { display: block; overflow: hidden; padding: .04em .012em .1em; margin-bottom: -.1em; }
.hc-word b > span > span { display: block; transition: transform 1.3s var(--slow) calc(.8s + var(--i) * 60ms); }
.hc-word em { display: block; margin: calc(var(--ws) * .06) calc(var(--ws) * .03) 0 0; font: normal 600 calc(var(--ws) * .27)/.9 var(--display); letter-spacing: -0.03em; color: #0E1013; }
.hc-foot { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: subgrid; align-items: end; margin-top: clamp(24px, 3vw, 44px); }
.hc-acts { grid-column: 1 / 4; display: grid; gap: clamp(16px, 1.6vw, 22px); justify-items: start; }
.hc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hc-btns .btn { height: 58px; padding: 0 28px; font-size: 17px; }
/* trust next to the action: the platforms each template ships for, big enough to read at a glance */
.hc-pf { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 1.8vw, 28px); margin: 0; padding: 0; list-style: none; font: 600 clamp(15px, 1.15vw, 17px)/1 var(--display); letter-spacing: -0.02em; }
.hc-pf li { display: flex; align-items: center; gap: 9px; color: rgb(14 16 19 / .86); }
.hc-pf svg { width: clamp(22px, 1.7vw, 26px); height: clamp(22px, 1.7vw, 26px); fill: currentColor; flex: none; }
.hc .btn-primary { background: #0E1013; color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 14px 32px -12px rgb(14 16 19 / .55); }
.hc .btn-glass { background: rgb(255 255 255 / .55); color: #0E1013; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 8px 24px -14px rgb(24 34 60 / .4); }
.hc-play { position: absolute; right: var(--gx); bottom: var(--gx); z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); color: #0E1013; cursor: pointer; }
.hc-play svg { width: 16px; height: 16px; } .hc-play .is-play { display: none; } .hc.is-paused .is-play { display: block; } .hc.is-paused .is-pause { display: none; }

/* the one moment: the card opens out of a band, the film settles, the letters rise (only when site.js runs) */
.rv-on .hc.is-pre .hc-card { clip-path: inset(36% 20% 36% 20% round var(--r)); }
.rv-on .hc.is-pre .hc-media img, .rv-on .hc.is-pre .hc-media video { transform: scale(1.3); }
.rv-on .hc.is-pre .hc-word b > span > span { transform: translateY(105%); }
.hc-word em, .hc-top, .hc-foot, .hc-play { transition: opacity 1s var(--slow) 1.2s, transform 1s var(--slow) 1.2s; }
.rv-on .hc.is-pre .hc-word em, .rv-on .hc.is-pre .hc-top, .rv-on .hc.is-pre .hc-foot, .rv-on .hc.is-pre .hc-play { opacity: 0; transform: translateY(14px); }

@media (max-width: 1100px) { /* the header turns compact here (base.css) */
  .hc { margin-top: -64px; }
  .hc-card { padding-top: calc(var(--gx) + 64px); }
}
@media (max-width: 1020px) {
  .hc h1 { grid-column: 1 / 4; }
  .hc-acts { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hc { --gx: 16px; }
  .hc-card { grid-template-columns: minmax(0, 1fr); min-height: max(620px, calc(100svh - 18px)); }
  .hc-top, .hc-foot { grid-template-columns: minmax(0, 1fr); display: flex; flex-direction: column; align-items: stretch; }
  .hc h1 { font-size: clamp(32px, 9vw, 40px); }
  .hc-pf { gap: 12px 18px; font-size: 15px; }
  .hc-pf svg { width: 20px; height: 20px; }
  .hc-word { --ws: calc(160vw / var(--n, 5)); }
  .hc-foot { gap: 14px; }
  .hc-btns { width: calc(100% - 60px); }
  .hc-btns .btn { flex: 1 1 auto; height: 56px; padding: 0 16px; font-size: 16px; }
  .hc-media::after { background: linear-gradient(180deg, rgb(246 247 249 / .82) 0%, rgb(246 247 249 / .6) 15%, rgb(246 247 249 / 0) 27%, rgb(246 247 249 / 0) 70%, rgb(246 247 249 / .4) 100%); }
  .hc-marks i:nth-child(-n+5), .hc-marks i:nth-child(n+7):nth-child(-n+9) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-card, .hc-media img, .hc-media video, .hc-word b > span > span, .hc-word em, .hc-top, .hc-foot, .hc-play { transition: none !important; }
}

/* film plates you can pick (hero-plates.js, on when the film has tracks): the hero's text layers let the pointer
   through to the film except on the headline and the actions; the picked plate sits over the film, under the text */
.hc[data-tracks] .hc-top, .hc[data-tracks] .hc-foot { pointer-events: none; }
.hc[data-tracks] .hc-top h1, .hc[data-tracks] .hc-btns, .hc[data-tracks] .hc-pf { pointer-events: auto; }
.hp-plate { position: absolute; left: 0; top: 0; z-index: -1; transform-origin: 0 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease), visibility 0s .35s; }
.hc.is-focus .hp-plate { opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; transition: opacity .35s var(--ease); }
.hp-lift { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; }
.hp-lift img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: reduce) { .hp-plate { transition: none !important; } }

/* catalogue */
.catalogue { position: relative; z-index: 3; padding-block: clamp(72px, 8vw, 120px) clamp(72px, 8vw, 112px); background: var(--bg); border-top: 1px solid var(--line); }
/* on home it follows the hero card directly: no rule under the card, the heading one calm step below it */
.top + main > .catalogue { padding-top: clamp(48px, 5.6vw, 84px); border-top: 0; }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.cat-head h2 { margin: 0; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.toolbar { position: relative; flex: 0 1 720px; display: flex; align-items: center; min-width: 0; height: 62px; padding: 0 8px 0 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.toolbar .ico { color: var(--text-3); }
.toolbar input { flex: 1; min-width: 0; height: 100%; margin-left: 12px; border: 0; background: none; font: 400 16px var(--font); color: var(--ink); }
.toolbar input::placeholder { color: var(--text-3); }
.toolbar input:focus { outline: none; }
.toolbar:focus-within { box-shadow: var(--shadow), 0 0 0 1.5px var(--accent); }
.filter-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 18px; margin-left: 8px; border: 0; border-left: 1px solid var(--line); border-radius: 0 12px 12px 0; background: none; font-size: 15px; font-weight: 550; cursor: pointer; }
.filter-btn:hover { color: var(--accent); }
.filter-btn .count { display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 12px; line-height: 20px; text-align: center; }
.filter-btn.active .count { display: inline-block; }
.filters { position: absolute; z-index: 10; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 2 * var(--gutter))); padding: 20px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.filters[hidden] { display: none; }
.fgroup + .fgroup { margin-top: 18px; }
.fgroup h3 { margin: 0 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; cursor: pointer; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.ffoot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.ffoot button { border: 0; background: none; font-weight: 550; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; margin: 0; padding: 0; list-style: none; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card[hidden] { display: none; }
/* the card (after lexingtonthemes.com): home large, five inner pages small, on a quiet ground; one link over all of
   it, and the only hover is a slight fade (parts.mjs) */
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: 2px; }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a a b" "a a c" "d e f"; gap: 7px; padding: 16px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); transition: opacity .15s cubic-bezier(.4, 0, .2, 1); }
.card:hover .mosaic { opacity: .85; }
.mosaic img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #fff; }
.mosaic .m-hero { grid-area: a; aspect-ratio: auto; }
.m-t1 { grid-area: b; } .m-t2 { grid-area: c; } .m-t3 { grid-area: d; } .m-t4 { grid-area: e; } .m-t5 { grid-area: f; }
.cmeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; min-width: 0; font-size: 14.5px; line-height: 1.45; }
.cline { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; font: 400 14.5px/1.45 var(--font); letter-spacing: 0; color: var(--text-2); }
.cline .cname { color: var(--ink); }
.cline .sep { color: var(--text-3); opacity: .6; }
.cmeta .price { margin: 0; padding: 0; font-size: 14.5px; font-weight: 400; color: var(--ink); }
.cdesc { grid-column: 1 / -1; margin: 0; max-width: 52ch; color: var(--text-2); text-wrap: pretty; }
.meta { display: flex; align-items: center; gap: 14px; }
.picon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 13px; font-size: 21px; font-weight: 650; letter-spacing: -0.03em; box-shadow: inset 0 0 0 1px rgb(12 12 22 / 0.08); }
.picon.grad { background: var(--ink); }
.picon.grad::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.9); }
.names { flex: 1; min-width: 0; }
.names span { display: block; font-size: 15px; color: var(--text-3); }
.names a, .names b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.names a:hover { text-decoration: underline; text-underline-offset: 3px; }
.price { align-self: flex-start; padding-top: 2px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price.soon { font-size: 14px; font-weight: 500; color: var(--text-3); }
.empty { padding: 48px 0; text-align: center; color: var(--text-2); }
.empty button { border: 0; background: none; font-weight: 600; text-decoration: underline; cursor: pointer; }

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cat-head { flex-direction: column; align-items: stretch; }
  .toolbar { flex: none; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .catalogue { padding-block: 64px 88px; }
  .filter-btn span.lbl { display: none; }
}

/* category shortcuts under the grid */
.cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.cats > span { margin-right: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cat { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; cursor: pointer; }
.cat:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.cat[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }

/* section heads */
.eyebrow { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.sec-head { max-width: 660px; margin-bottom: 48px; }
.sec-head h2 { margin: 14px 0 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.sec-lede { margin: 16px 0 0; max-width: 52ch; font-size: 18px; color: var(--text-2); }

/* platforms */
.platforms { padding-block: 0 24px; }
.pf { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 32px; border-radius: 24px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.pf h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.025em; }
.pf ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pf li { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.pmark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 17px; font-weight: 700; }
.pmark svg { width: 12px; height: 18px; }
.pf li:not(.on) .pmark { background: var(--bg-soft); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.pf li b { font-weight: 600; }
.pf li span { font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.pf li.on span { color: var(--ink); }

/* exclusive + custom work */
.studio { padding-block: 0 var(--sec); }
.studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sc { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; min-height: 340px; padding: clamp(28px, 3.4vw, 48px); overflow: hidden; border-radius: var(--r-lg); isolation: isolate; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.sc h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -0.025em; }
.sc p:not(.eyebrow) { margin: 0; max-width: 40ch; font-size: 17px; }
.sc .btn { margin-top: auto; }
.sc-dark { background: var(--surface); }
.sc p:not(.eyebrow) { color: var(--text-2); }
.sc::after { content: ""; position: absolute; right: -8%; bottom: -30%; width: 46%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--beam) / .16), transparent); pointer-events: none; }
.sc-light::after { display: none; }
.sc-light p:not(.eyebrow) { color: var(--text-2); }

/* buyer quotes, rendered only when data/site.json has real ones */
.voices { padding-block: 0 96px; }
.voice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.voice-list li { padding: 28px; border-radius: 20px; background: var(--bg-soft); }
.voice-list blockquote { margin: 0 0 16px; font-size: 17px; }

@media (max-width: 1080px) {
  .voice-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pf { flex-direction: column; align-items: flex-start; padding: 24px; }
  .studio { padding-bottom: 88px; }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .sc { min-height: 300px; padding: 28px; }
}

/* one template, every format: three tall cards on painterly textures, column rules behind */
.fx { position: relative; padding-block: var(--sec); background: var(--bg); overflow: hidden; }
.fx-wrap { position: relative; }
.fx-rules { position: absolute; inset: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; pointer-events: none; }
.fx-rules i { border-inline: 1px solid var(--line); }
.fx-rules i + i { border-left: 0; }
.fx h2 { position: relative; margin: 0 0 clamp(44px, 6vw, 80px); max-width: 14ch; font-size: var(--t-h2); line-height: .98; letter-spacing: -0.03em; }
.fx-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fx-cards > article { min-width: 0; }
.fx-stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; isolation: isolate; background: #E9ECF0; box-shadow: inset 0 0 0 1px var(--line); }
.fx-tex { position: absolute; inset: -8%; z-index: -2; }
.fx-tex img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(1.04); animation: fx-drift 28s ease-in-out infinite alternate; transform-origin: 40% 50%; }
@keyframes fx-drift { from { transform: scale(1.02); } to { transform: scale(1.16) rotate(3deg) translate(-3%, 2%); } }
.fx-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(76%, 360px); background: rgb(255 255 255 / .58); color: #0E1013;
  border: 1px solid rgb(255 255 255 / .8); border-radius: 18px; box-shadow: 0 1px 1px rgb(14 16 19 / .04), 0 40px 80px -30px rgb(24 34 60 / .4);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
.fx-choose { padding: 18px 14px 14px; }
.fx-choose > p { margin: 0 6px 12px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(14 16 19 / .5); text-align: center; }
.fx-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 10px; font-size: clamp(15px, 1.35vw, 18px); font-weight: 500; letter-spacing: -0.01em; transition: background .35s var(--ease); }
.fx-row.on { background: rgb(255 255 255 / .75); box-shadow: 0 1px 2px rgb(14 16 19 / .06); }
.fx-g { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font: 600 13px/1 var(--mono); }
.fx-g { background: rgb(255 255 255 / .8); color: #0E1013; box-shadow: inset 0 0 0 1px rgb(14 16 19 / .08); }
.fx-row.on .fx-g { background: #0E1013; color: #fff; box-shadow: none; }
.fx-cursor { position: absolute; width: 26px; height: 26px; right: 18%; top: 30%; pointer-events: none; transition: top .7s var(--ease), right .7s var(--ease); filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); }
.fx-stack { position: absolute; left: 50%; top: 50%; width: min(78%, 380px); transform: translate(-50%, -42%); }
.fx-sheet { position: absolute; left: 0; right: 0; top: 0; border-radius: 16px; background: rgb(255 255 255 / .62); border: 1px solid rgb(255 255 255 / .85); padding: 10px 10px 0; -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  color: #0E1013; box-shadow: 0 40px 80px -30px rgb(24 34 60 / .45); transform-origin: 50% 0; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease), filter 1.1s var(--ease); }
.fx-sheet.fx-sizer { position: relative; visibility: hidden; transition: none; }
.fx-sheet[data-pos="0"] { z-index: 3; }
.fx-sheet[data-pos="1"] { z-index: 2; transform: translateY(-18px) scale(.93); opacity: .75; }
.fx-sheet[data-pos="2"] { z-index: 1; transform: translateY(-36px) scale(.86); opacity: .4; filter: blur(1px); }
.fx-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #DDE1E7; box-shadow: 0 0 0 1px rgb(14 16 19 / .06); }
.fx-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fx-name { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 13px; font-size: 14px; font-weight: 500; }
.fx-dots { display: flex; gap: 4px; }
.fx-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(14 16 19 / .18); }
.fx-dots i.on { background: #0E1013; }
.fx-prompt { padding: 18px 18px 14px; min-height: 148px; display: flex; flex-direction: column; }
.fx-prompt > p { margin: 0; flex: 1; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.45; }
.fx-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: #0E1013; animation: fx-blink 1s steps(1) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }
.fx-bar { display: flex; justify-content: flex-end; margin-top: 16px; }
.fx-copy { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(14 16 19 / .12); background: rgb(255 255 255 / .7); font: 500 14px/1 var(--font); transition: background .3s; }
.fx-copy.done { background: #0E1013; color: #fff; border-color: transparent; }
.fx-cap { padding: 28px 2px 0; }
.fx-cap h3 { margin: 0 0 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
.fx-cap p { margin: 0; max-width: 34ch; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.4; color: var(--text-2); letter-spacing: -0.01em; }
@media (max-width: 900px) {
  .fx-cards, .fx-rules { grid-template-columns: 1fr; }
  .fx-rules i:not(:first-child) { display: none; }
  .fx-cards > article + article { margin-top: 28px; }
  .fx-panel, .fx-stack { width: min(80%, 380px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-tex img, .fx-caret { animation: none; }
  .fx-cursor, .fx-row, .fx-sheet { transition: none; }
}

/* template symbols on the cards: tiled marks fill the icon, bare symbols sit on a plain tile */
.picon.mark { background: var(--surface); padding: 9px; }
.picon.mark svg { display: block; width: 100%; height: 100%; }
.picon.mark.tiled { padding: 0; overflow: hidden; background: none; box-shadow: none; }

/* works with: one quiet row of tool marks between the hero and the catalogue */
.ww { position: relative; z-index: 3; padding-block: 40px 48px; background: var(--bg); }
.ww-label { margin: 0 0 24px; text-align: center; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ww-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin: 0; padding: 0; list-style: none; }
.ww-row li { display: flex; align-items: center; gap: 10px; color: var(--ink); opacity: .8; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.ww-row svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.ww-dup { display: none; }
@media (max-width: 900px) {
  .ww { padding-block: 28px 36px; overflow: hidden; }
  .ww .wrap { padding-inline: 0; }
  .ww-track { display: flex; width: max-content; animation: ww-drift 32s linear infinite;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
  .ww-row { flex-wrap: nowrap; gap: 36px; padding-right: 36px; }
  .ww-dup { display: flex; }
  .ww-row li { font-size: 17px; gap: 8px; white-space: nowrap; }
  .ww-row svg { width: 19px; height: 19px; }
}
@keyframes ww-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ww-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .ww-row { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
  .ww-dup { display: none; }
}

/* Store pages: page hero, content blocks, tables, FAQ, forms, freebies, licences, support, blog, legal, 404.
   Reads tokens.css; shares buttons, header and footer with base.css and section heads with home.css. */

/* page hero: calm ground, a hairline frame with crosshairs at its corners, the display face large */
.phero { position: relative; isolation: isolate; padding-block: clamp(56px, 7vw, 104px) clamp(56px, 6vw, 88px); overflow: hidden; background: var(--bg); }
.phero::before { content: ""; position: absolute; inset: 24px var(--gutter) 0; z-index: -1; pointer-events: none; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  border-inline: 1px solid var(--line); background: radial-gradient(40% 70% at 88% 0%, rgb(var(--beam) / .1), transparent 70%); }
.phero h1 { max-width: 16ch; margin: 18px 0 0; font-size: var(--t-h1); line-height: .98; letter-spacing: -0.03em; }
.phero-lede { max-width: 54ch; margin: 24px 0 0; font-size: var(--t-lg); line-height: 1.5; color: var(--text-2); }
.phero .btn { margin-top: 32px; }
.phero-tight { padding-bottom: 24px; }
.phero-tight h1 { max-width: none; }
/* card variant: the hero's glass film in a smaller inset card */
.phero-dark { margin: 0 clamp(8px, 1vw, 16px); padding-inline: 0; border-radius: var(--r-lg); background: #E9ECF0 url(../../img/press/hero-still.webp) 70% 60% / cover no-repeat; color: #0E1013; box-shadow: inset 0 0 0 1px rgb(14 16 19 / .06); }
.phero-dark::before { inset: 0; border: 0; max-width: none; background: linear-gradient(90deg, rgb(246 247 249 / .82), rgb(246 247 249 / .2) 70%); }
.phero-dark .eyebrow { color: rgb(14 16 19 / .55); }
.phero-dark .phero-lede { color: rgb(14 16 19 / .66); }
.phero-dark .btn-primary { background: #0E1013; color: #fff; }

/* blocks */
.block { padding-block: clamp(72px, 8vw, 120px); }
.block.soft { background: var(--bg-soft); }
.block-title { margin: 0 0 40px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -0.025em; }
.wrap.narrow { max-width: calc(820px + 2 * var(--gutter)); }

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.block.soft .steps li { box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.steps .n { font: 500 13px/1 var(--mono); color: var(--accent); }
.steps b { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.steps p { margin: 0; color: var(--text-2); font-size: 15.5px; }

/* cards */
.svc-grid, .inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.svc-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-grid li, .inc-grid li { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 22px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.block.soft .svc-grid li { background: var(--surface); }
.svc-grid b, .inc-grid b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.svc-grid p, .inc-grid p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.svc-grid span { margin-top: auto; padding-top: 12px; font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.inc-ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* mini product cards */
.mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mini { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 10px 10px 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease); }
.mini:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); transform: translateY(-2px); }
.mini-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--bg-soft); }
.mini-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mini-meta { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.mini-meta > span:not(.picon) { flex: 1; min-width: 0; }
.mini-meta b { display: block; font-size: 15.5px; font-weight: 600; }
.mini-meta small { display: block; overflow: hidden; color: var(--text-3); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.mini-meta em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.picon.sm, .mini .picon { width: 38px; height: 38px; border-radius: 11px; font-size: 17px; }

/* comparison tables */
.table-wrap { position: relative; overflow-x: auto; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 15px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font: 500 12px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.cmp thead th:last-child { color: var(--ink); }
.cmp tbody th { font-weight: 550; }
.cmp td { color: var(--text-2); }
.cmp .yes, .cmp .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.cmp .yes { background: rgb(var(--beam) / 0.16); color: var(--accent); }
.cmp .no { background: var(--bg-soft); color: var(--text-3); }
.cmp .yes .ico, .cmp .no .ico { width: 15px; height: 15px; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16.5px; font-weight: 550; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 18px; height: 18px; color: var(--text-3); transition: transform .2s; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--text-2); }

/* forms */
.form-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.form-intro h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; }
.form-intro p { margin: 14px 0 0; color: var(--text-2); }
.form-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form { padding: 28px; border-radius: 24px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 550; }
.field label span { color: var(--text-3); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 15.5px/1.4 var(--font); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #C2264B; }
.err { min-height: 20px; margin: 0; font-size: 13px; color: #B3213F; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.form-note { margin: 0; font-size: 13.5px; color: var(--text-3); }
.form-status:empty { display: none; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; }
.form-status[data-kind="ok"] { box-shadow: inset 0 0 0 1px var(--accent); }
.form-status[data-kind="error"] { box-shadow: inset 0 0 0 1px #C2264B; color: #8E1630; }
.form-status:focus { outline: none; }

/* checkout placeholders: visible, plainly labelled */
.ph-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #FFF6DB; box-shadow: inset 0 0 0 1px #F0D98C; color: #5C4A0E; font-size: 13px; line-height: 1.45; }
.ph-note[hidden] { display: none; }
.ph-dialog { max-width: min(480px, calc(100vw - 32px)); padding: 28px; border: 0; border-radius: 22px; box-shadow: var(--shadow-lg); color: var(--ink); }
.ph-dialog::backdrop { background: rgb(7 7 12 / 0.45); }
.ph-dialog h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -0.02em; }
.ph-dialog p { margin: 0 0 12px; color: var(--text-2); }
.ph-dialog .ph-url { overflow-wrap: anywhere; font: 400 12.5px/1.5 var(--mono); color: var(--text-3); }
.ph-dialog .btn { margin-top: 8px; }

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

/* pass band (home, catalogue): a glass panel laid over the film still */
.pass-band { padding-block: 0 clamp(16px, 2vw, 24px); }

/* Full Access as two dark cards (parts.mjs planPair; template pages and pricing.html) */
.plan-pair { padding-block: clamp(72px, 8vw, 120px); }
.pp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pp-head h2 { max-width: 30ch; margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
.pp-more { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; transition: background .2s; }
.pp-more:hover { background: var(--bg-soft); }
.pp-more .ico { width: 15px; height: 15px; }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
.pp-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 2.6vw, 32px); background: var(--dark); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); }
.pp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pp-top h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.pp-top span { font-size: 14.5px; }
.pp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 28px 0 0; font: 600 clamp(40px, 4vw, 52px)/1 var(--display); letter-spacing: -0.04em; }
.pp-price s { color: var(--on-dark-2); text-decoration-thickness: 2px; }
.pp-price > span { color: var(--on-dark-2); font-weight: 400; }
.pp-price small { max-width: 16ch; margin-left: 6px; font: 400 12px/1.35 var(--font); letter-spacing: 0; color: var(--on-dark-2); }
.pp-for { margin: 18px 0 0; font-size: 15.5px; }
.pp-card ul { display: grid; gap: 6px; margin: 24px 0 32px; padding: 0; list-style: none; color: var(--on-dark-2); font-size: 15.5px; }
.pp-card li::before { content: "+"; display: inline-block; width: 22px; color: var(--on-dark-2); }
.pp-card li.off { color: rgb(238 240 244 / 0.34); }
.pp-card li.off::before { content: "–"; }
.pp-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; min-height: 56px; padding: 0 22px; border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 16px; transition: opacity .2s; }
.pp-buy:hover { opacity: .88; }
.pp-buy .ico { width: 17px; height: 17px; }
.pp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 16px 0 0; color: var(--text-3); font-size: 13px; }
.pp-methods { display: flex; flex-wrap: wrap; gap: 4px 14px; }
@media (max-width: 760px) {
  .pp-head { flex-direction: column; align-items: flex-start; }
  .pp-grid { grid-template-columns: minmax(0, 1fr); }
}
.pb { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; overflow: hidden; min-height: 420px; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-lg); background: #E9ECF0 url(../../img/press/hero-still.webp) 40% 70% / cover no-repeat; color: #0E1013; isolation: isolate; box-shadow: inset 0 0 0 1px rgb(14 16 19 / .06); }
.pb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(246 247 249 / .1), rgb(246 247 249 / .55)); }
.pb-copy { max-width: 560px; padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 30px 60px -30px rgb(24 34 60 / .35); }
.pb .eyebrow { color: rgb(14 16 19 / .55); }
.pb h2 { margin: 14px 0 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -0.025em; }
.pb p:not(.eyebrow) { margin: 14px 0 26px; color: rgb(14 16 19 / .66); font-size: 17px; }
.pb .btn-light { background: #0E1013; color: #fff; }
.pb-price { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.pb-price b { font: 600 clamp(80px, 11vw, 168px)/.8 var(--display); letter-spacing: -0.045em; }
.pb-price span { color: rgb(14 16 19 / .62); font-size: 14px; }
.pb-was s { color: #0E1013; }

/* freebies */
.fb-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.fb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.fb { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 22px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.fb-kind { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fb b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.fb p { margin: 0; color: var(--text-2); font-size: 15px; }
.fb-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 550; }
.gate { position: sticky; top: 24px; padding: 28px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.gate h2 { margin: 0; font-size: 24px; letter-spacing: -0.025em; }
.gate > p { margin: 8px 0 20px; color: var(--text-2); font-size: 15px; }
.gate label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 550; }
.gate-row { display: flex; flex-direction: column; gap: 10px; }
.gate-row input { min-height: 50px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 15.5px var(--font); }
.gate-row input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.gate-done:focus { outline: none; }
.gate-msg { margin: 0 0 14px; font-size: 15px; color: var(--text-2); }
.dl-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dl-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 15px; }
.dl-list .pending { font: 500 11.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-align: right; }

/* licences */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 22px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.plan b { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.plan-price { font-size: 44px; line-height: 1; font-weight: 650; letter-spacing: -0.025em; }
.plan-price small { margin-left: 8px; font-size: 14px; font-weight: 450; letter-spacing: 0; color: var(--text-3); }
.plan p { margin: 0; color: var(--text-2); }
.plan-pass { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow); }


/* support */
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.guides a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.guides a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.guides b { font-weight: 600; }
.guides span:not(.picon):not(.sr) { flex: 1; color: var(--text-3); font-size: 14px; }
.guides .ico { color: var(--text-3); }
.orders { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 24px 28px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.orders h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.orders p { margin: 6px 0 0; max-width: 60ch; color: var(--text-2); font-size: 15px; }

/* affiliates */
.rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rates li { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 22px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.rates b { font: 600 72px/1 var(--display); letter-spacing: -0.04em; }
.rates span { font-size: 18px; font-weight: 600; }
.rates small { color: var(--text-3); font-size: 14px; }

/* long-form text */
.prose { font-size: 17px; line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 48px 0 12px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; scroll-margin-top: 24px; }
.prose h3 { margin: 32px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; color: #2E2E3E; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* legal (after lexingtonthemes.com/legal): two-tone title, a sticky table of contents beside the policy */
.legal { padding-block: clamp(48px, 6vw, 88px) 96px; }
.legal-head { padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.legal h1 { max-width: 24ch; margin: 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.legal h1 span { color: var(--text-3); }
.updated { margin: 16px 0 0; font: 500 13px/1 var(--mono); color: var(--text-3); }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(40px, 7vw, 112px); padding-top: clamp(32px, 4vw, 56px); }
.legal-toc { position: sticky; top: 104px; align-self: start; font-size: 14px; }
.legal-toc p { margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.legal-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 1px solid transparent; color: var(--text-2); transition: color .2s, border-color .2s; }
.legal-toc a:hover, .legal-toc a[aria-current="true"] { border-color: var(--ink); color: var(--ink); }
.legal .prose { font-size: 16.5px; }
.legal .prose h2 { margin-top: 44px; font-size: clamp(20px, 1.8vw, 24px); scroll-margin-top: 104px; }
.legal .prose :is(p, ul, ol) { color: var(--text-2); }
.legal .prose .legal-intro { font-size: 18.5px; line-height: 1.6; color: var(--ink); }
.legal-close { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16.5px; }
.legal-close a, .legal .prose a { text-decoration: underline; text-underline-offset: 3px; }
.draft-note { margin: 0 0 32px; padding: 12px 16px; border-radius: 12px; background: #FFF6DB; box-shadow: inset 0 0 0 1px #F0D98C; color: #5C4A0E; font-size: 14.5px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.legal-nav a { padding: 8px 14px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; }
.legal-nav a[aria-current="page"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
@media (max-width: 860px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal-toc { position: static; padding: 18px 20px; border-radius: 16px; background: var(--bg-soft); }
  .legal-toc ol { border: 0; }
  .legal-toc a { padding: 5px 0; border: 0; }
}

/* 404 */
.nf { padding-block: 72px 112px; }
.nf h1 { margin: 16px 0 0; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.025em; }
.nf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.nf-links a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 20px 22px; border-radius: 18px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.nf-links a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.nf-links b { font-size: 17px; font-weight: 600; }
.nf-links span { grid-row: 2; color: var(--text-3); font-size: 14.5px; }
.nf-links .ico { grid-row: 1 / 3; grid-column: 2; align-self: center; }

/* blog */
.blog-list { padding-top: 24px; }
.post-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.post-card.big { padding: 40px; margin-bottom: 20px; background: var(--bg-soft); }
.post-card.big h2 { font-size: clamp(26px, 3vw, 38px); }
.post-card h2, .post-card h3 { margin: 0; font-size: 21px; line-height: 1.22; font-weight: 600; letter-spacing: -0.025em; }
.post-card h2 a:hover, .post-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-card p { margin: 0; color: var(--text-2); }
.post-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-weight: 550; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font: 500 12.5px/1.3 var(--mono); color: var(--text-3); }
.post-meta span:first-child { color: var(--accent); }
.art-head { padding-block: 40px 40px; }
.art-head h1 { margin: 18px 0 0; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.art-head .post-meta { margin-top: 24px; }
.art-grid { display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; gap: 56px; padding-bottom: 88px; }
.toc { position: sticky; top: 24px; align-self: start; font-size: 14px; }
.toc p { margin: 0 0 12px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.toc ol { display: grid; gap: 10px; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-2); list-style: none; }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--ink); }
.post-cta { margin: 32px 0; }
.post-cta .mini { flex-direction: row; align-items: center; padding: 10px; text-decoration: none; }
.post-cta .mini-img { flex: none; width: 200px; }
.post-cta .mini-meta { flex: 1; }
.post-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-thumb-link { display: block; margin: -8px -8px 6px; }
.post-card.big:has(.post-thumb-link) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 40px; align-content: center; }
.post-card.big .post-thumb-link { grid-row: 1 / span 5; align-self: center; margin: 0; }
.post-thumb { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.art-cover { margin: 0 auto 48px; max-width: 1016px; }
.art-cover-img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.post-fig { margin: 32px 0; }
.post-fig img { display: block; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.post-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
/* links in a post's text: the accent colour plus an underline, so they read as links in body copy */
.art-body :is(p, li, td, figcaption) a { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body :is(p, li, td, figcaption) a:hover { text-decoration-thickness: 2px; }
.changelog { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.changelog h2 { margin-top: 0; font-size: 16px; }
.changelog ul { font: 400 13.5px/1.6 var(--mono); color: var(--text-3); }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }

/* catalogue page filter bar (parts.mjs filterBar): one quiet row of pills over the grid; popovers fade in under
   their control; chosen filters sit in a fixed-height row of chips so nothing below ever moves */
.catalogue.inline { padding-top: 24px; background: var(--bg); }
.tf { position: relative; z-index: 5; margin-bottom: 20px; }
.tf-row { position: relative; display: flex; align-items: center; gap: 8px; }
.tf-search { position: relative; flex: 0 1 320px; min-width: 0; }
.tf-search .ico, .tf-find .ico { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.tf-search input, .tf-find input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 400 14.5px var(--font); color: var(--ink); transition: box-shadow .2s; }
.tf-search input::placeholder, .tf-find input::placeholder { color: var(--text-3); }
.tf-search input:hover, .tf-find input:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.tf-search input:focus, .tf-find input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.tf-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: box-shadow .2s, opacity .2s; }
.tf-btn:hover, .tf-pop.open .tf-trig { box-shadow: inset 0 0 0 1px var(--line-2); }
.tf-btn .chev { width: 14px; height: 14px; color: var(--text-3); transition: transform .2s; }
.tf-pop.open .chev { transform: rotate(180deg); }
.tf-n:empty { display: none; }
.tf-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.tf-all, .tf-shead, .tf-sfoot { display: none; }
.tf-sheet { display: contents; }
.tf-groups { display: flex; align-items: center; gap: 8px; }
.tf-legend { padding: 0; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* popovers: anchored under their control by site.js (--x), clamped to the row */
.tf-panel { position: absolute; z-index: 10; top: calc(100% + 8px); left: var(--x, 0); width: max-content; min-width: 240px; max-width: min(880px, 100%); max-height: min(64vh, 560px); overflow: auto; overscroll-behavior: contain; margin: 0; padding: 18px 10px 10px; border: 0; border-radius: 18px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; }
.tf-pop.open .tf-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
.tf-panel .tf-legend { float: left; width: 100%; margin: 0 0 12px; padding-inline: 10px; }
[data-pop="category"] .tf-panel { width: 880px; }
.tf-find { position: relative; clear: both; margin: 0 4px 10px; }
.tf-find input { height: 36px; background: var(--bg); }
.tf-none { margin: 4px 10px 8px; font-size: 14px; color: var(--text-3); }
.tf-list { clear: both; margin: 0; padding: 0; list-style: none; }
.tf-list.cols { columns: 4 180px; column-gap: 4px; }
.tf-list li { break-inside: avoid; }
.tf-list li[hidden] { display: none; }
.tf-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; cursor: pointer; transition: background .2s; }
.tf-opt:hover { background: rgb(var(--beam) / 0.1); }
.tf-opt input { appearance: none; flex: none; display: grid; place-content: center; width: 16px; height: 16px; margin: 0; border-radius: 5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background .2s, box-shadow .2s; }
.tf-opt input::after { content: ""; width: 8px; height: 5px; margin-top: -2px; border: solid var(--on-ink); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); opacity: 0; }
.tf-opt input:checked { background: var(--ink); box-shadow: none; }
.tf-opt input:checked::after { opacity: 1; }
.tf-opt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-l { flex: 1; min-width: 0; }
.tf-c { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.tf-opt.zero { color: var(--text-3); }

/* All / Free / Paid: one segmented pill */
.tf-seg { display: inline-flex; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tf-seg > .tf-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tf-seg label { position: relative; }
.tf-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tf-seg span { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: background .2s, color .2s; }
.tf-seg label:hover span { color: var(--ink); }
.tf-seg input:checked + span { background: var(--ink); color: var(--on-ink); }
.tf-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.tf-count { margin: 0 0 0 auto; min-width: 11ch; text-align: right; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tf-sort { position: relative; display: inline-flex; align-items: center; height: 40px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.tf-sort:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.tf-sort:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tf-sort label { padding-left: 16px; font-size: 14.5px; color: var(--text-3); }
.tf-sort select { appearance: none; height: 100%; padding: 0 36px 0 6px; border: 0; background: none; font: 500 14.5px var(--font); color: var(--ink); cursor: pointer; }
.tf-sort select:focus { outline: none; }
.tf-sort .chev { position: absolute; right: 14px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }

/* chosen filters: always 32px tall, so choosing or clearing never moves the grid; overflow scrolls sideways */
.tf-active { display: flex; align-items: center; gap: 12px; height: 32px; margin-top: 14px; }
.tf-chips { display: flex; gap: 6px; min-width: 0; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; list-style: none; }
.tf-chips::-webkit-scrollbar { display: none; }
.tf-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: box-shadow .2s; }
.tf-chip:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.tf-chip .ico { width: 14px; height: 14px; color: var(--text-3); }
.tf-clear { flex: none; padding: 0; border: 0; background: none; font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); cursor: pointer; transition: color .2s; }
.tf-clear:hover { color: var(--ink); }
.tf-active .tf-clear[hidden] { display: none; }

/* 900px and below: search on top, then Filters, the count and Sort; Filters opens a full-height sheet */
@media (max-width: 900px) {
  .tf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 8px; }
  .tf-search { grid-column: 1 / -1; }
  .tf-search input { height: 44px; }
  .tf-all { display: inline-flex; height: 40px; }
  .tf-all .ico { width: 16px; height: 16px; }
  .tf-sort { grid-row: 2; grid-column: 2; justify-self: start; width: 100%; max-width: 200px; min-width: 0; }
  .tf-sort select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  .tf-count { grid-row: 2; grid-column: 3; min-width: 0; }
  .tf-sheet { position: fixed; z-index: 60; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(100%, 440px); background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); visibility: hidden; transform: translateX(100%); transition: transform .35s var(--slow), visibility 0s .35s; }
  .tf.sheet-open .tf-sheet { visibility: visible; transform: none; transition: transform .35s var(--slow); }
  .tf::before { content: ""; position: fixed; z-index: 59; inset: 0; background: rgb(14 16 19 / .32); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .tf.sheet-open::before { opacity: 1; visibility: visible; transition: opacity .3s; }
  .tf-shead { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--line); }
  .tf-shead h3 { margin: 0; font-size: 20px; }
  .tf-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
  .tf-x:hover { background: rgb(var(--beam) / 0.1); }
  .tf-groups { flex: 1; flex-direction: column; align-items: stretch; gap: 0; overflow: auto; overscroll-behavior: contain; padding: 0 20px; }
  .tf-groups > * { padding-block: 22px; border-bottom: 1px solid var(--line); }
  .tf-groups > :last-child { border-bottom: 0; }
  .tf-trig { display: none; }
  .tf-panel, .tf-pop.open .tf-panel { position: static; width: auto !important; min-width: 0; max-width: none; max-height: none !important; overflow: visible; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; opacity: 1; visibility: inherit; transform: none; transition: none; }
  .tf-panel .tf-legend { padding: 0; margin-bottom: 14px; }
  .tf-find { margin: 0 0 10px; }
  .tf-list.cols { columns: 2 150px; column-gap: 12px; }
  .tf-opt { padding: 0 4px; min-height: 40px; }
  .tf-seg { flex-wrap: wrap; align-self: stretch; background: none; box-shadow: none; padding-inline: 0; }
  .tf-seg > .tf-legend { position: static; width: 100%; height: auto; clip: auto; margin-bottom: 14px; }
  .tf-seg label { flex: 1; }
  .tf-seg span { justify-content: center; width: 100%; height: 40px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0; }
  .tf-seg label:first-of-type span { border-radius: 999px 0 0 999px; }
  .tf-seg label:last-of-type span { border-radius: 0 999px 999px 0; }
  .tf-seg label + label span { margin-left: -1px; }
  .tf-sfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .tf-done { flex: 1; max-width: 240px; }
  html.tf-lock { overflow: hidden; }
  html.tf-lock .catalogue.inline { z-index: 40; }
}
@media (max-width: 420px) {
  .tf-sort label { display: none; }
  .tf-sort select { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-panel, .tf-sheet, .tf::before, .tf-btn .chev { transition: none !important; }
}

@media (max-width: 1080px) {
  .svc-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phero-pass .wrap { grid-template-columns: minmax(0, 1fr); }
  .phero-pass .pass-price { grid-column: 1; grid-row: auto; max-width: 440px; margin-top: 32px; }
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; padding: 18px 20px; border-radius: 16px; background: var(--bg-soft); }
}
@media (max-width: 860px) {
  .svc-grid, .inc-grid, .plans, .rates, .mini-grid, .mini-grid.three, .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid.three { grid-template-columns: minmax(0, 1fr); }
  .post-card.big:has(.post-thumb-link) { display: flex; }
  .form-wrap, .fb-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gate { position: static; }
  .pb { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .pb-price { align-items: flex-start; text-align: left; }
  .orders { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .block { padding-block: 64px; }
  .phero { padding-block: 32px 56px; }
  .phero-dark { margin: 0 8px; }
  .svc-grid, .svc-grid.four, .inc-grid, .plans, .rates, .mini-grid, .mini-grid.three, .guides, .fb-grid, .post-grid, .nf-links { grid-template-columns: minmax(0, 1fr); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 20px; }
  .post-card.big { padding: 28px; }
  .post-cta .mini { flex-direction: column; align-items: stretch; }
  .post-cta .mini-img { width: auto; }
  .pass-price { padding: 22px; }
  .pp-row b { font-size: 52px; }
}

/* HTML sitemap */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 32px; }
.sm-group h2 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.sm-group ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sm-group a { color: var(--text-2); } .sm-group a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Documentation: a three-column reading layout (guides, article, on this page), the article's blocks and the live demos
   inside it (scaled template frames, the brand preview, a package explorer, a terminal that plays, code with copy).
   Reads tokens.css; shares the header, footer, eyebrow, breadcrumbs and FAQ with base.css, home.css and pages.css. */

.dx { --side: 236px; --toc: 196px; --top: 92px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--toc); gap: clamp(32px, 3.4vw, 56px); align-items: start; padding-block: clamp(28px, 3vw, 44px) clamp(72px, 8vw, 120px); }

/* left: every guide, grouped, with a filter */
.dx-side { position: sticky; top: var(--top); max-height: calc(100svh - var(--top) - 16px); overflow: auto; overscroll-behavior: contain; margin-left: -10px; padding: 2px 10px 24px; scrollbar-width: thin; }
.dx-navbtn { display: none; }
.dx-find { position: relative; display: block; margin: 0 0 20px; }
.dx-find .ico { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.dx-find input { width: 100%; height: 40px; padding: 0 44px 0 36px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 14.5px var(--font); }
.dx-find input::placeholder { color: var(--text-3); }
.dx-find input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.dx-find kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 3px 6px; border-radius: 6px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font: 500 11px/1 var(--mono); color: var(--text-3); }
.dx-group + .dx-group { margin-top: 18px; }
.dx-group h2 { margin: 0 0 8px 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dx-group ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.dx-group a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 5px 10px; border-radius: 9px; color: var(--text-2); font-size: 14.5px; line-height: 1.3; transition: background .2s, color .2s; }
.dx-group a:hover { color: var(--ink); background: rgb(var(--beam) / .08); }
.dx-group a[aria-current="page"] { color: var(--ink); font-weight: 550; background: rgb(var(--beam) / .13); }
.dx-group [hidden] { display: none; }
.dx-none { margin: 4px 10px; font-size: 14px; color: var(--text-3); }
.dx-badge { flex: none; padding: 3px 7px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.dx-side-foot { margin: 28px 0 0; padding: 16px 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-3); }
.dx-side-foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* middle: the article */
.dx-art { min-width: 0; max-width: 760px; }
.dx-head .crumbs { margin-bottom: 26px; font-size: 13.5px; }
.dx-head h1 { margin: 14px 0 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.02; letter-spacing: -0.03em; }
.dx-lede { margin: 18px 0 0; max-width: 60ch; font-size: var(--t-lg); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 24px 0 0; padding: 14px 0; border-block: 1px solid var(--line); font: 500 12.5px/1.3 var(--mono); color: var(--text-3); }
.dx-meta a { color: var(--text-2); } .dx-meta a:hover { color: var(--ink); }
.dx-meta .dx-md { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.dx-meta .ico { width: 14px; height: 14px; }

.dx-body { margin-top: 36px; font-size: 16.5px; line-height: 1.72; }
.dx-body > :first-child { margin-top: 0; }
.dx-body h2 { margin: 56px 0 14px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.025em; scroll-margin-top: var(--top); }
.dx-body h3 { margin: 34px 0 8px; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; scroll-margin-top: var(--top); }
.dx-body h2 a.dx-anchor, .dx-body h3 a.dx-anchor { margin-left: 8px; color: var(--text-3); opacity: 0; font-weight: 400; transition: opacity .2s; }
.dx-body h2:hover a.dx-anchor, .dx-body h3:hover a.dx-anchor, .dx-anchor:focus-visible { opacity: 1; }
.dx-body p, .dx-body ul, .dx-body ol { margin: 0 0 18px; color: var(--text-2); }
.dx-body li { margin: 6px 0; padding-left: 4px; }
.dx-body ul, .dx-body ol { padding-left: 22px; }
.dx-body li::marker { color: var(--text-3); }
.dx-body strong { color: var(--ink); font-weight: 600; }
.dx-body a:not(.btn):not(.dx-card):not(.dx-anchor) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.dx-body a:not(.btn):not(.dx-card):not(.dx-anchor):hover { text-decoration-color: var(--ink); }
.dx-body :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); font: 400 .86em/1 var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* numbered steps: a hairline rail with a number on each step */
.dx-steps { counter-reset: st; margin: 24px 0 28px; padding: 0; list-style: none; }
.dx-steps > li { position: relative; counter-increment: st; margin: 0; padding: 0 0 26px 48px; }
.dx-steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--mono); color: var(--ink); }
.dx-steps > li::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 6px; width: 1px; background: var(--line-2); }
.dx-steps > li:last-child { padding-bottom: 4px; } .dx-steps > li:last-child::after { content: none; }
.dx-steps h3 { margin: 2px 0 6px; font-size: 17.5px; }
.dx-steps p { margin: 0 0 12px; }
.dx-steps > li > :last-child { margin-bottom: 0; }

/* callouts */
.dx-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; margin: 24px 0; padding: 16px 18px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.6; }
.dx-note .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.dx-note p { margin: 0; color: var(--text-2); }
.dx-note b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.dx-note.soon { background: #FFF9E8; box-shadow: inset 0 0 0 1px #F0D98C; } .dx-note.soon .ico { color: #8A6A10; }
.dx-note.warn { background: #FFF3F3; box-shadow: inset 0 0 0 1px #F2C4C9; } .dx-note.warn .ico { color: #B3213F; }
:root[data-theme="dark"] .dx-note.soon { background: rgb(240 217 140 / .08); box-shadow: inset 0 0 0 1px rgb(240 217 140 / .28); } :root[data-theme="dark"] .dx-note.soon .ico { color: #F0D98C; }
:root[data-theme="dark"] .dx-note.warn { background: rgb(242 140 150 / .08); box-shadow: inset 0 0 0 1px rgb(242 140 150 / .3); } :root[data-theme="dark"] .dx-note.warn .ico { color: #F2A0AA; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dx-note.soon { background: rgb(240 217 140 / .08); box-shadow: inset 0 0 0 1px rgb(240 217 140 / .28); } :root:not([data-theme="light"]) .dx-note.soon .ico { color: #F0D98C; }
  :root:not([data-theme="light"]) .dx-note.warn { background: rgb(242 140 150 / .08); box-shadow: inset 0 0 0 1px rgb(242 140 150 / .3); } :root:not([data-theme="light"]) .dx-note.warn .ico { color: #F2A0AA; }
}

/* code: a dark panel with its language, a filename and a copy button; tabs when there are several */
.dx-code { margin: 20px 0 24px; border-radius: 14px; background: var(--dark); color: var(--on-dark); overflow: hidden; box-shadow: 0 0 0 1px var(--dark-line); }
.dx-code-head { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--dark-line); font: 400 12.5px/1 var(--mono); color: var(--on-dark-2); }
.dx-code-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-code pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font: 400 13.5px/1.7 var(--mono); tab-size: 2; }
.dx-code pre code { font: inherit; white-space: pre; }
.dx-code.wrap pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.dx-code pre:focus-visible { outline-offset: -3px; }
.dx-code .c { color: rgb(238 240 244 / .45); }
.dx-code .p { color: #9DBBF2; user-select: none; }
.dx-copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .08); color: var(--on-dark); font: 500 12.5px/1 var(--font); cursor: pointer; transition: background .2s; }
.dx-copy:hover { background: rgb(255 255 255 / .16); }
.dx-copy .ico { width: 14px; height: 14px; }
.dx-copy.done { background: rgb(var(--beam) / .3); }
.dx-tabs-list { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--dark-line); overflow-x: auto; scrollbar-width: none; }
.dx-tabs-list button { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 8px 8px 0 0; background: none; color: var(--on-dark-2); font: 500 13px/1 var(--font); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.dx-tabs-list button:hover { color: var(--on-dark); }
.dx-tabs-list button[aria-selected="true"] { color: #fff; box-shadow: inset 0 -2px 0 #9DBBF2; }
.dx-tabs [role="tabpanel"][hidden] { display: none; }

/* figures: a real screenshot in a quiet frame, with a caption */
.dx-fig { margin: 28px 0 30px; }
.dx-fig-frame { overflow: hidden; border-radius: 16px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.dx-fig-frame img { width: 100%; height: auto; }
.dx-fig.pad .dx-fig-frame { padding: clamp(14px, 2.6vw, 28px); background: radial-gradient(80% 90% at 85% 0%, rgb(var(--beam) / .14), transparent 70%), var(--bg-soft); }
.dx-fig.pad .dx-fig-frame img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.dx-fig.phone .dx-fig-frame { display: flex; justify-content: center; }
.dx-fig.phone .dx-fig-frame img { width: min(300px, 70%); }
.dx-fig figcaption { margin: 12px 2px 0; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.dx-fig figcaption b { color: var(--text-2); font-weight: 550; }
.dx-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 30px; }
.dx-figs .dx-fig { margin: 0; }

/* tables */
.dx-table { margin: 22px 0 26px; overflow-x: auto; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dx-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.dx-table th, .dx-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.dx-table thead th { font: 500 11.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--bg-soft); }
.dx-table tbody tr:last-child > * { border-bottom: 0; }
.dx-table tbody th { font-weight: 550; color: var(--ink); }
.dx-body .dx-table code { white-space: nowrap; overflow-wrap: normal; }
.dx-table td { color: var(--text-2); }

/* status pills: ready / soon / in progress */
.dx-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.dx-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dx-st.ready { background: rgb(var(--beam) / .14); color: var(--accent); }
.dx-st.wip { background: #FFF6DB; color: #7A5C08; }
.dx-st.soon { background: var(--bg-soft); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .dx-st.wip { background: rgb(240 217 140 / .12); color: #F0D98C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dx-st.wip { background: rgb(240 217 140 / .12); color: #F0D98C; } }

/* link cards (guide grid, next steps) */
.dx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 28px; padding: 0; list-style: none; }
.dx-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-cards li { margin: 0; padding: 0; }
.dx-card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease); }
.dx-card:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); transform: translateY(-1px); }
.dx-card small { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.dx-card b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.dx-card span { color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.dx-card .ico { width: 16px; height: 16px; margin-left: auto; color: var(--text-3); transition: transform .3s var(--ease); }
.dx-card:hover .ico { transform: translateX(3px); color: var(--ink); }

/* prev / next and the help strip at the foot of every guide */
.dx-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.dx-pn a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s, background .2s; }
.dx-pn a:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.dx-pn small { display: flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dx-pn b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.dx-pn .next { grid-column: 2; text-align: right; align-items: flex-end; }
.dx-pn .ico { width: 14px; height: 14px; }
.dx-pn .prev .ico { transform: rotate(180deg); }
.dx-help { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 20px 22px; border-radius: 16px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.dx-help p { margin: 0; color: var(--text-2); font-size: 15px; }
.dx-help b { display: block; color: var(--ink); font-weight: 600; }

/* right: on this page */
.dx-toc { position: sticky; top: var(--top); max-height: calc(100svh - var(--top) - 16px); overflow: auto; font-size: 13.5px; scrollbar-width: thin; }
.dx-toc > p { margin: 0 0 12px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dx-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-2); }
.dx-toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 1px solid transparent; color: var(--text-3); line-height: 1.4; transition: color .2s, border-color .2s; }
.dx-toc a:hover { color: var(--ink); }
.dx-toc a.on { color: var(--ink); border-left-color: var(--ink); }
.dx-toc .sub a { padding-left: 26px; }
.dx-toc-foot { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.dx-toc-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.dx-toc-foot a:hover { color: var(--ink); }
.dx-toc-foot .ico { width: 14px; height: 14px; }

/* ---------- live demos ---------- */
.dx-demo { margin: 28px 0 32px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.dx-demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.dx-demo-bar .dx-live-dot { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dx-live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2FA36B; box-shadow: 0 0 0 3px rgb(47 163 107 / .18); }
.dx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.dx-demo-bar .dx-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dx-demo-bar .dx-seg::-webkit-scrollbar { display: none; }
.dx-seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 500 13px/1 var(--font); white-space: nowrap; cursor: pointer; }
.dx-seg button:hover { color: var(--ink); }
.dx-seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.dx-seg .ico { width: 15px; height: 15px; }
.dx-open { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.dx-open:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dx-open .ico { width: 16px; height: 16px; }
.dx-stage { position: relative; display: grid; place-items: start center; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(70% 90% at 80% 0%, rgb(var(--beam) / .12), transparent 70%), var(--bg-soft); }
.dx-stage.phone { aspect-ratio: auto; height: clamp(460px, 62vw, 640px); padding-top: 20px; }
.dx-screen { position: absolute; left: 0; top: 0; width: var(--vw, 1280px); height: var(--vh, 800px); transform: scale(var(--k, .5)); transform-origin: 0 0; border: 0; background: #fff; }
.dx-stage.phone .dx-screen { left: 50%; top: 20px; border-radius: 26px; box-shadow: 0 0 0 8px #0E1013, 0 30px 60px -20px rgb(24 34 60 / .5); transform: translateX(-50%) scale(var(--k, .8)); transform-origin: 50% 0; }
.lenis.lenis-smooth .dx-stage iframe { pointer-events: auto; }
.dx-stage-cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--text-3); font-size: 14px; pointer-events: none; transition: opacity .4s; }
.dx-stage.loaded .dx-stage-cover { opacity: 0; }
.dx-demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-3); }
.dx-demo-foot code { font: 400 12.5px/1 var(--mono); color: var(--text-2); }
.dx-fmts { display: flex; flex-wrap: wrap; gap: 6px; }

/* the brand preview: two fields that rewrite the framed demo */
.dx-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: end; padding: 16px; border-bottom: 1px solid var(--line); }
.dx-try label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 550; }
.dx-try input { width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 15px var(--font); }
.dx-try input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.dx-try .btn { height: 42px; }
.dx-try-msg { grid-column: 1 / -1; min-height: 0; margin: 0; font-size: 13px; color: var(--text-3); }
.dx-try-msg:empty { display: none; }

/* package explorer: a file tree and what each file is for */
.dx-tree { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin: 28px 0 32px; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.dx-tree-files { padding: 12px 8px; border-right: 1px solid var(--line); background: var(--bg-soft); font: 400 13.5px/1.4 var(--mono); max-height: 460px; overflow: auto; }
.dx-tree-files > p { margin: 4px 10px 10px; font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.dx-tree ul { margin: 0; padding: 0; list-style: none; }
.dx-tree ul ul { padding-left: 16px; }
.dx-tree button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; }
.dx-tree button:hover { background: rgb(var(--beam) / .1); color: var(--ink); }
.dx-tree button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.dx-tree button svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.dx-tree button.dir svg { color: var(--accent); }
.dx-tree-view { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; }
.dx-tree-view h4 { margin: 0; font: 500 14px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.dx-tree-view p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.dx-tree-view pre { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--dark); color: var(--on-dark); overflow: auto; max-height: 260px; font: 400 12.5px/1.65 var(--mono); white-space: pre; }
.dx-tree-view pre[hidden] { display: none; }

/* a terminal that plays: lines type in, one after another */
.dx-term { margin: 28px 0 32px; border-radius: 16px; background: var(--dark); color: var(--on-dark); overflow: hidden; box-shadow: 0 0 0 1px var(--dark-line), var(--shadow-lg); }
.dx-term-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--dark-line); font: 400 12.5px/1 var(--mono); color: var(--on-dark-2); }
.dx-term-bar i { display: flex; gap: 6px; } .dx-term-bar i::before, .dx-term-bar i::after, .dx-term-bar i span { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .16); }
.dx-term-bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-term-bar button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .08); color: var(--on-dark); font: 500 12.5px/1 var(--font); cursor: pointer; }
.dx-term-bar button:hover { background: rgb(255 255 255 / .16); }
.dx-term-bar button .ico { width: 14px; height: 14px; }
.dx-term ol { min-height: var(--rows, 12em); margin: 0; padding: 16px 18px 20px; list-style: none; font: 400 13.5px/1.75 var(--mono); overflow-x: auto; }
.dx-term li { white-space: pre-wrap; overflow-wrap: anywhere; }
.dx-term li.cmd::before { content: "$ "; color: #9DBBF2; }
.dx-term li.ask::before { content: "> "; color: #9DBBF2; }
.dx-term li.ask { color: #fff; }
.dx-term li.out { color: var(--on-dark-2); }
.dx-term li.ok { color: #8FD6AE; }
.dx-term li.ok::before { content: "✓ "; }
.dx-term li.tool { color: var(--on-dark-2); }
.dx-term li.tool::before { content: "● "; color: #9DBBF2; }
.dx-term.playing li[data-hide] { visibility: hidden; }
.dx-term .caret { display: inline-block; width: .6em; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: #9DBBF2; animation: dx-blink 1s steps(1) infinite; }
@keyframes dx-blink { 50% { opacity: 0; } }

/* format picker: three questions, one recommendation */
.dx-pick { margin: 28px 0 32px; padding: 22px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.dx-pick fieldset { margin: 0 0 16px; padding: 0; border: 0; }
.dx-pick legend { margin-bottom: 10px; font-weight: 600; font-size: 15.5px; }
.dx-pick .dx-seg { flex-wrap: wrap; border-radius: 14px; }
.dx-pick-out { display: grid; gap: 6px; margin-top: 6px; padding: 18px 20px; border-radius: 14px; background: var(--dark); color: var(--on-dark); }
.dx-pick-out small { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--on-dark-2); }
.dx-pick-out b { font: 600 24px/1.1 var(--display); letter-spacing: -0.02em; }
.dx-pick-out p { margin: 0; color: var(--on-dark-2); font-size: 15px; }
.dx-body .dx-pick-out a { color: #fff; text-decoration-color: rgb(255 255 255 / .45); }
.dx-body .dx-pick-out a:hover { text-decoration-color: #fff; }

/* the format matrix: every template and the formats it ships in today */
.dx-matrix table { min-width: 640px; }
.dx-matrix td, .dx-matrix th { padding: 10px 8px; white-space: nowrap; }
.dx-matrix td:first-child, .dx-matrix th:first-child { padding-left: 16px; }
.dx-matrix .dx-st { padding: 3px 7px; font-size: 11px; }
.dx-matrix tbody th a { text-decoration: none !important; }
.dx-matrix tbody th a:hover { text-decoration: underline !important; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .dx { grid-template-columns: var(--side) minmax(0, 1fr); }
  .dx-toc { display: none; }
}
@media (max-width: 900px) {
  .dx { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 12px; }
  .dx-side { position: sticky; top: 72px; z-index: 5; max-height: none; overflow: visible; margin: 0 0 20px; padding: 0; }
  .dx-navbtn { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); color: var(--ink); font: 500 14.5px/1 var(--font); text-align: left; cursor: pointer; }
  .dx-navbtn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-navbtn small { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
  .dx-navbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .dx-navbtn .chev { width: 16px; height: 16px; transition: transform .2s; }
  .js .dx-navlist { display: none; }
  .dx-navlist { margin-top: 8px; padding: 14px 10px; border-radius: 16px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg); }
  .js .dx-side.open .dx-navlist { display: block; position: absolute; left: 0; right: 0; max-height: calc(100svh - 150px); overflow: auto; overscroll-behavior: contain; }
  .dx-body { font-size: 16px; }
}
@media (max-width: 640px) {
  .dx-cards, .dx-cards.three, .dx-figs, .dx-pn { grid-template-columns: minmax(0, 1fr); }
  .dx-pn .next { grid-column: 1; }
  .dx-tree { grid-template-columns: minmax(0, 1fr); }
  .dx-tree-files { max-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dx-try { grid-template-columns: minmax(0, 1fr); }
  .dx-help { flex-direction: column; align-items: flex-start; }
  .dx-meta .dx-md { margin-left: 0; }
  .dx-demo-bar .dx-live-dot { width: 100%; }
  .dx-demo-bar .dx-seg:not(:has([data-device])) { order: 5; width: 100%; }
  .dx-stage.phone { height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .dx-term .caret { animation: none; } }
.dx-body h3.dx-gh { margin: 30px 0 0; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dx-body h3.dx-gh + .dx-cards { margin-top: 12px; }
/* smooth scrolling (smooth.js) already clears the header on anchor jumps; the margin is for native jumps only */
html.lenis .dx-body :is(h2, h3) { scroll-margin-top: 0; }