/* Self-hosted fonts (SIL Open Font License, from Google Fonts): 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) 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) 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) 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) 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) 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) 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) 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) 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: "Instrument Sans", 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; }

/* type: display face for headings, quiet text face for everything else */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
h1 { letter-spacing: -0.045em; }
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.045em; }
.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; 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: 1020px) {
  .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.07em; 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: a centred hero over a wall of real template pages, 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; background: linear-gradient(180deg, rgb(246 247 249 / .55) 0%, rgb(246 247 249 / 0) 34%, rgb(246 247 249 / 0) 58%, rgb(246 247 249 / .5) 100%), radial-gradient(40% 50% at 80% 60%, rgb(var(--beam) / .12), transparent 70%); }
.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: 13ch; font-size: clamp(34px, 3.9vw, 58px); line-height: 1.02; letter-spacing: -0.045em; }
.hc-pf { grid-column: 4; display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.hc-pf li { display: flex; align-items: center; gap: 10px; color: rgb(14 16 19 / .78); }
.hc-pf svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.hc-word { grid-column: 1 / -1; grid-row: 3; align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; margin: 0; pointer-events: none; }
.hc-word b { display: flex; font: 600 clamp(64px, calc(152vw / var(--n, 5)), 540px)/.78 var(--display); letter-spacing: -0.07em; 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; flex: none; margin: 0 .04em .12em 0; font: italic 400 clamp(40px, 6.4vw, 100px)/.9 var(--serif); letter-spacing: -0.02em; color: rgb(14 16 19 / .62); }
.hc-foot { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: subgrid; align-items: end; margin-top: clamp(20px, 2.6vw, 36px); }
.hc-acts { grid-column: 1 / 3; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 10px; }
.hc-mani { flex: 1 0 100%; max-width: 34ch; margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; letter-spacing: -0.015em; color: rgb(14 16 19 / .62); }
.hc-mani b { font-weight: 500; color: #0E1013; }
.hc .btn-primary { background: #0E1013; color: #fff; }
.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 { 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; }
.hc-flag { grid-column: 4; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 10px; border-radius: 20px; background: rgb(255 255 255 / .5); -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 / .75), 0 24px 48px -24px rgb(24 34 60 / .35); }
.hc-flag-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgb(14 16 19 / .08); }
.hc-flag-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--slow); }
.hc-flag-img:hover img { transform: scale(1.06); }
.hc-flag div { min-width: 0; font-size: 15px; line-height: 1.25; }
.hc-flag div > span { display: block; margin-bottom: 3px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(14 16 19 / .55); }
.hc-flag div > a { display: block; font-weight: 600; letter-spacing: -0.01em; }
.hc-flag small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 400; color: rgb(14 16 19 / .6); }
.hc-flag-cta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px; background: #0E1013; color: #fff; font-size: 15px; font-weight: 500; }
.hc-flag-cta::after { content: "→"; transition: transform .4s var(--slow); }
.hc-flag-cta:hover::after { transform: translateX(4px); }

/* 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 { 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 { opacity: 0; transform: translateY(14px); }

@media (max-width: 1020px) {
  .hc { margin-top: -64px; }
  .hc-card { padding-top: calc(var(--gx) + 64px); }
  .hc h1 { grid-column: 1 / 4; }
  .hc-acts { grid-column: 1 / -1; }
  .hc-flag { grid-column: 1 / -1; grid-row: 1; justify-self: end; width: min(360px, 100%); margin-bottom: 18px; }
}
@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 { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; font-size: 13.5px; }
  .hc-pf svg { width: 13px; height: 13px; }
  .hc-word b { font-size: calc(165vw / var(--n, 5)); }
  .hc-word em { font-size: 12vw; }
  .hc-foot { gap: 14px; }
  .hc-acts .btn { flex: 1 1 auto; }
  .hc-flag { width: 100%; margin: 0; grid-template-columns: 64px minmax(0, 1fr); }
  .hc-marks i:nth-child(-n+5), .hc-marks i:nth-child(n+7):nth-child(-n+9) { display: none; }
  .hc-word { flex-direction: column; align-items: stretch; gap: 0; }
  .hc-word em { align-self: flex-end; margin-top: -.1em; }
  .hc-mani { font-size: 15px; }
}
@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 { transition: none !important; }
}

/* wall: full-bleed columns of real pages, wide desktop and narrow phone, drifting at different speeds (site.js) */
.wall { --d: 17vw; --m: 8.5vw; --g: 1.1vw; position: relative; height: clamp(520px, 56vw, 820px); margin-top: clamp(12px, 1.2vw, 18px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.wall-cols { position: absolute; top: 0; left: 50%; display: flex; align-items: flex-start; gap: var(--g); translate: -50% 0; }
.wall-col { flex: none; }
.wall-track { display: flex; flex-direction: column; gap: var(--g); will-change: transform; }
.wall-d { width: var(--d); }
.wall-m { width: var(--m); }
.wt { position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--bg-soft); box-shadow: 0 0 0 1px rgb(12 12 22 / 0.07), 0 18px 40px -22px rgb(20 20 50 / 0.35); transition: box-shadow .3s var(--ease); }
.wt:hover { box-shadow: 0 0 0 1px rgb(12 12 22 / 0.12), 0 26px 50px -22px rgb(20 20 50 / 0.5); }
.wall-m .wt { border-radius: 12px; }
/* a still tile shows the top of a longer capture; on hover site.js scrolls the image through the page */
.wt img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; will-change: transform; }
.wt-v video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); }
.wt-v.playing video { opacity: 1; }
.wt-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgb(255 255 255 / 0.95); box-shadow: 0 6px 16px -6px rgb(10 10 30 / 0.35); font-size: 13px; font-weight: 600; color: var(--ink); opacity: 0; translate: 0 6px; transition: opacity .25s var(--ease), translate .25s var(--ease); }
.wt-tag .ico { width: 14px; height: 14px; }
.wt:hover .wt-tag { opacity: 1; translate: 0 0; }
@media (max-width: 720px) {
  .wall { --d: 44vw; --m: 22vw; --g: 2.5vw; height: 560px; }
  .wt, .wall-m .wt { border-radius: 8px; }
}

/* 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); }
.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.05em; 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 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card[hidden] { display: none; }
.thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--tint, var(--line)); box-shadow: inset 0 0 0 1px rgb(12 12 22 / 0.06); isolation: isolate; }
.thumb img { position: absolute; height: auto; border-radius: 8px; box-shadow: 0 14px 34px -10px rgb(10 10 30 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.08); transition: transform .5s var(--ease); }
/* desktop view bleeds off the right edge; the phone version stands in front of it */
.thumb .desk { top: 11%; right: -16%; width: 76%; z-index: 1; }
.thumb .phone { top: 8%; left: 7%; width: 27%; z-index: 2; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 18px 36px -12px rgb(10 10 30 / 0.5); }
.card:hover .thumb .phone { transform: translateY(-8px); }
.card:hover .thumb .desk { transform: translateX(-6px); }
.thumb-link { position: absolute; inset: 0; z-index: 3; }
.thumb img { pointer-events: none; }
.thumb-actions { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.94); box-shadow: 0 6px 16px -6px rgb(10 10 30 / 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 14px; font-weight: 550; color: #0E1013; cursor: pointer; transition: background .2s, color .2s; }
.pill .ico { width: 16px; height: 16px; }
.pill:hover { background: #0E1013; color: #fff; }
.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.04em; 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.045em; }
.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.05em; }
.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; }
}

/* featured: the flagships, large, right under the wall */
.feat { position: relative; z-index: 3; padding-block: clamp(56px, 6vw, 96px) clamp(72px, 8vw, 120px); background: var(--bg); }
.feat h2 { margin: 0 0 clamp(28px, 3vw, 44px); font-size: var(--t-h2); line-height: 1; letter-spacing: -0.05em; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.feat-card { display: block; padding: 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: box-shadow .5s var(--slow), transform .5s var(--slow); }
.feat-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg); }
.feat-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: var(--bg-soft); box-shadow: 0 0 0 1px var(--line); }
.feat-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--slow); }
.feat-card:hover .feat-img img { transform: scale(1.03); }
.feat-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 18px 10px 8px; }
.feat-meta b { font: 600 clamp(22px, 2vw, 28px)/1 var(--display); letter-spacing: -0.04em; }
.feat-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 15px; }
.feat-meta em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 14.5px; font-weight: 500; }
.feat-meta .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); } .feat-card:hover .feat-meta .ico { transform: translateX(3px); }
@media (max-width: 760px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-meta { grid-template-columns: 1fr auto; } .feat-meta span { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}

/* 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.05em; }
.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.045em; }
.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); }
.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.045em; }
.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.065em; }
.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.045em; }
.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.06em; }
.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 */
.legal { padding-block: 56px 96px; }
.legal h1 { margin: 0; font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -0.04em; }
.updated { margin: 10px 0 24px; font: 500 13px/1 var(--mono); color: var(--text-3); }
.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: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.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; }

/* 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.045em; }
.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.04em; 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; }
.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); }

/* inline catalogue filters on the catalogue page */
.catalogue.inline { padding-top: 32px; background: var(--bg); }
.filters-inline { position: static; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.55fr) minmax(0, 1fr) auto; align-items: start; gap: 24px; width: auto; margin: -12px 0 36px; padding: 20px 24px; border-radius: 18px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.filters-inline .fgroup + .fgroup { margin-top: 0; }
.filters-inline .chip { background: var(--surface); }
.filters-inline .chip[aria-pressed="true"] { background: var(--ink); }
.filters-inline .ffoot { flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; padding: 0; border: 0; justify-self: end; }

@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; }
  .filters-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-inline .ffoot { grid-column: 1 / -1; flex-direction: row; justify-self: stretch; justify-content: space-between; }
  .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)); }
  .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; }
  .filters-inline { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .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; }

/* Template detail page: hero, "Try it with your brand", pages included, formats, extras and the sticky buy card. */

/* hero */
.dhero { position: relative; isolation: isolate; padding-block: 28px 56px; overflow: hidden; background: var(--bg); }
.dhero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 70% at 88% 0%, rgb(var(--beam) / .1), transparent 70%); }
.dhero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin-top: 28px; }
.dname { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 17px; font-weight: 600; }
.dname .picon { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.dhero h1 { margin: 20px 0 0; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.04; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.dlede { max-width: 48ch; margin: 18px 0 0; font-size: 18px; color: var(--text-2); }
.dhero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.dhero .actions .btn { height: 48px; padding: 0 20px; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 20px 0; }
.facts li:first-child { padding-left: 0; }
.facts li + li { border-left: 1px solid var(--line); }
.facts b { font-size: 17px; font-weight: 600; }
.facts span { color: var(--text-3); font-size: 13.5px; }
.dhero-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--tint, var(--bg-soft)); box-shadow: inset 0 0 0 1px rgb(12 12 22 / 0.06); }
.dhero-media img { position: absolute; height: auto; box-shadow: 0 24px 50px -18px rgb(10 10 30 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08); }
.dhero-media .desk { top: 9%; right: -12%; width: 84%; border-radius: 10px; }
.dhero-media .phone { bottom: -6%; left: 7%; width: 25%; border: 4px solid var(--ink); border-radius: 22px; }

/* body: content + sticky buy card */
.dbody { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding-block: 24px 96px; }
.dmain { min-width: 0; }
.dside { position: sticky; top: 20px; }
.dsec { padding-top: 56px; }
.dsec h2 { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.dsec > p { max-width: 64ch; margin: 0 0 16px; color: var(--text-2); font-size: 16.5px; }
.hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.hl li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.hl .ico { flex: none; color: var(--accent); }

/* try it with your brand */
.try { position: relative; padding: 28px; border-radius: 26px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 16px; }
.try::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--beam)), transparent); }
.try-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
.try-head .eyebrow .ico { width: 16px; height: 16px; }
.try-head h2 { margin: 12px 0 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; font-weight: 600; letter-spacing: -0.035em; }
.try-head p { max-width: 60ch; margin: 10px 0 0; color: var(--text-2); }
.try-form { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: end; margin-top: 22px; }
.try-form .field { position: relative; gap: 6px; }
.try-form .field.wide { grid-column: auto; }
.try-form input { height: 50px; }
.try-form .btn { height: 50px; }
.try-form .btn .ico { width: 17px; height: 17px; }
.try-form .btn[disabled] { opacity: .65; cursor: progress; }
.try-form .field.bad input { box-shadow: inset 0 0 0 2px #C2264B; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.try-stage { margin-top: 18px; overflow: hidden; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.try-bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
.try-dots { display: flex; gap: 6px; }
.try-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.try-url { flex: 1; min-width: 0; overflow: hidden; font: 500 12px/1 var(--mono); color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-soft); }
.seg button { display: grid; place-items: center; width: 34px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--text-3); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(12 12 22 / 0.12); }
.seg .ico { width: 17px; height: 17px; }
.try-frame { --s: .55; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-soft) top / cover no-repeat; }
.try-frame iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; background: #fff; }
.try-frame[data-view="phone"] { width: min(320px, 100%); aspect-ratio: 390 / 720; margin: 18px auto; border-radius: 26px; box-shadow: 0 0 0 6px var(--ink), 0 24px 50px -20px rgb(10 10 30 / 0.5); }
.try-frame[data-view="phone"] iframe { width: 390px; height: 720px; }
.try-status { min-height: 24px; margin: 14px 0 0; font-size: 15px; color: var(--text-2); }
.try-status[data-kind="busy"]::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; border: 2px solid rgb(var(--beam) / 0.3); border-top-color: var(--accent); border-radius: 50%; vertical-align: -1px; animation: spin .8s linear infinite; }
.try-status[data-kind="error"] { color: #B3213F; }
.try-status[data-kind="ok"] { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.try-result { margin-top: 12px; }
.try-result[hidden] { display: none; }
.try-copy { border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.try-copy summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14.5px; font-weight: 550; cursor: pointer; list-style: none; }
.try-copy summary::-webkit-details-marker { display: none; }
.try-copy summary .chev { width: 16px; height: 16px; transition: transform .2s; }
.try-copy[open] summary .chev { transform: rotate(180deg); }
.try-copy dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 4px 16px 16px; font-size: 14.5px; }
.try-copy dt { font: 500 11.5px/1.7 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.try-copy dd { margin: 0; }
.try-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.try-off .try-unavailable { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.try-off .try-unavailable p { flex: 1 1 320px; margin: 0; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .try-status[data-kind="busy"]::before { animation: none; } }

/* pages included */
.pg-group + .pg-group { margin-top: 28px; }
.pg-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pg-group h3 span { padding: 3px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--text-2); }
.pg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pg-grid a, .pg-grid li > div { display: flex; flex-direction: column; gap: 8px; }
.pg-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--bg-soft); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease); }
.pg-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pg-blank { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, var(--bg-soft), var(--line)); }
.pg-grid a:hover .pg-img { box-shadow: 0 0 0 1px var(--ink), var(--shadow); transform: translateY(-2px); }
.pg-label { font-size: 14px; font-weight: 500; }

/* formats + extras */
.xlist { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.xlist li { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.xlist b { font-weight: 600; }
.xlist span { color: var(--text-2); font-size: 15px; }
.xlist em { padding: 5px 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 11.5px/1 var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.xlist li.on em { background: var(--ink); box-shadow: none; color: var(--on-ink); }

/* buy card */
.buy { padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.buy-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.buy-price b { font-size: 44px; line-height: 1; font-family: var(--display); font-weight: 600; letter-spacing: -0.05em; }
.buy-price span { color: var(--text-3); font-size: 14px; }
.buy-btn { width: 100%; margin-top: 18px; }
.buy-team { display: block; margin-top: 12px; text-align: center; color: var(--text-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.buy-pass { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--dark); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.buy-pass::before { content: none; }
.buy-pass span { grid-column: 1; color: var(--on-dark-2); font-size: 13px; }
.buy-pass b { grid-column: 1; font-size: 16px; }
.buy-pass .ico { grid-column: 2; grid-row: 1 / 3; }
.buy-incl { display: grid; gap: 8px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14.5px; }
.buy-incl li { display: flex; align-items: center; gap: 10px; }
.buy-incl .ico { flex: none; width: 17px; height: 17px; color: var(--accent); }
.buy-custom { display: block; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--bg-soft); font-size: 14px; }
.buy-custom b { display: block; font-weight: 600; }
.buy-custom span { color: var(--text-2); }
.buy-custom:hover { box-shadow: inset 0 0 0 1px var(--line-2); }

/* related */
.related { padding-block: 72px 96px; background: var(--bg-soft); }
.related h2 { margin: 0 0 28px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.03em; }

@media (max-width: 1180px) {
  .dbody { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .dhero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dbody { grid-template-columns: minmax(0, 1fr); }
  .dside { position: static; order: -1; }
  .dmain { display: contents; }
  .dbody > .dmain > .try { order: -2; }
  .try-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .try-form .field.wide { grid-column: auto; }
  .try-form .btn { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .try { padding: 20px; margin-inline: calc(var(--gutter) * -0.5); }
  .try::before { left: 20px; right: 20px; }
  .try-form { grid-template-columns: minmax(0, 1fr); }
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl { grid-template-columns: minmax(0, 1fr); }
  .xlist li { grid-template-columns: minmax(0, 1fr) auto; }
  .xlist span { grid-column: 1 / -1; grid-row: 2; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li, .facts li + li { flex-direction: row; align-items: baseline; gap: 8px; padding: 10px 0 0; border-left: 0; }
  .dhero-media .desk { width: 90%; right: -18%; }
}

.pal{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:.875rem;color:var(--muted,#666)}
.pal i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.fmts { margin: 20px 0 0; }
.fmts h3 { margin: 0 0 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.fmt-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fmt-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.fmt-list b { font-size: 14.5px; font-weight: 600; }
.fmt-list em { font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.fmt-list li.on em { color: var(--accent); }
.fmt-list li.off b { opacity: .6; }
.fmt-note { margin: 10px 0 0; color: var(--text-3); font-size: 12.5px; }
.fmt-demos { display: grid; gap: 4px; margin: 10px 0 0; font-size: 13.5px; }
.fmt-demos a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fmt-demos a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }