/* Tavor Digital — site styles.
   Black, white and one blue. The page is a single framed column: two rails run down its sides and quiet
   lines divide it into rows and cells, like a blueprint. Type is Geist throughout; headlines are set
   in two tones, white then grey. The colour lives in the pictures: the night render of Mount Tavor and
   the light interface demos. */

/* Fonts, self-hosted: latin subsets only */
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 400 600; font-display: swap; 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"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; 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; }
/* Fallbacks shaped like Geist (Arial and Courier New, resized and re-spaced; measured against the woff2s),
   so text set before the fonts arrive keeps its line breaks when they do: the swap moves nothing */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 103.08%; ascent-override: 97.98%; descent-override: 29.1%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 500 600; size-adjust: 105.53%; ascent-override: 95.7%; descent-override: 28.43%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 99.98%; ascent-override: 101.02%; descent-override: 30%; line-gap-override: 0%; }

:root {
  color-scheme: dark;

  /* Ground, panels and the lines that divide them */
  --ground: #000;
  --ground-2: #0a0a0b;
  --ground-3: #141416;
  --bg: var(--ground);
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.16);

  /* Ink */
  --ink: #f5f5f5;            /* 19:1 on black */
  --ink-2: #a3a3a3;          /* 8.6:1 */
  --ink-3: #8a8a8a;          /* 6.1:1 */
  --soft: rgba(255, 255, 255, 0.05);
  --soft-2: rgba(255, 255, 255, 0.09);
  --edge: rgba(255, 255, 255, 0.1);
  --milk: #f5f5f5;
  --milk-2: #e5e5e5;
  --carbon: #000;
  --carbon-2: #404040;

  /* Blue: the one accent. Green: live and success only. */
  --accent: #2f6bff;
  --accent-2: #2458e0;
  --accent-soft: rgba(47, 107, 255, 0.16);
  --accent-lite: #8fb0ff;
  --green: #34d399;

  /* Fluted glass: the cobalt ground and the lights that move behind the reeds (assets/js/flute.js).
     The tones mark the details and appear only as icon colours. */
  --tone-sky: #9cbcff;
  --tone-lilac: #cbb8ff;
  --tone-aqua: #6fdcf2;
  --tone-peach: #ffb38f;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%236ee7b7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Tints used inside the interface demos, all within blue and green */
  --coral: #4f7cff;   --coral-ink: #2a52c9;   --coral-lite: #86a6ff;
  --pink: #6c93ff;    --pink-ink: #3558bd;    --pink-lite: #a3bcff;
  --amber: #8fb0ff;   --amber-ink: #3a5aa8;   --amber-lite: #b9ccff;
  --sky: #2bb3f0;     --sky-ink: #0b6fa0;     --sky-lite: #7fd0f7;
  --mint: #34d399;    --mint-ink: #0a7a55;    --mint-lite: #6ee7b7;

  /* Type */
  --font-display: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Five heading sizes, and only five: hero (88), section (48), panel (32), card (20), small (16) */
  --t-hero: clamp(2.7rem, 1.2rem + 4.4vw, 5.5rem);
  --t-section: clamp(2rem, 1.3rem + 2vw, 3rem);
  --t-panel: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  --t-card: 1.25rem;
  --t-small: 1rem;
  --h1: var(--t-hero);
  --h2: var(--t-section);
  --h3: var(--t-card);
  --lead: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);

  /* The frame: the column's width, the space outside it and the padding inside it */
  --max: 120rem;   /* the frame fills the screen less the gutter, up to 1920 px */
  --gutter: clamp(0.75rem, 2.4vw, 2.5rem);
  --pad: clamp(1.125rem, 3.2vw, 3rem);
  --frame: min(var(--max), 100% - 2 * var(--gutter));
  --section: clamp(4.5rem, 3rem + 5vw, 8rem);
  --r-sm: 0.25rem;
  --cell-hi: rgba(255, 255, 255, 0.05);   /* the one hover / current fill: nav cells, card cells, the sliding highlight */
  --cell-hi-solid: linear-gradient(var(--cell-hi), var(--cell-hi)) #0b0b0d;   /* the same fill over an opaque panel (the services menu) */
  --r: 0.375rem;
  --r-lg: 0.625rem;
  --r-xl: 0.875rem;
  --shadow-lg: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3), 0 2.5rem 5.625rem -1.875rem rgba(0, 0, 0, 0.9);

  /* The material: a dark surface with a fine film grain and a faint sheen from above */
  --grain: url("../img/grain.webp");
  --material: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 38%), var(--grain) 0 0 / 160px 160px, #0c0c0f;
  --material-hi: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01) 45%), var(--grain) 0 0 / 160px 160px, #18181c;
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--line);

  /* Controls: two heights (44 px, 38 px small) and one grey fill, with its hover */
  --h: 2.75rem;
  --h-sm: 2.375rem;
  --ctl: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), #121215;
  --ctl-hi: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)), #1a1a1e;
  --error: #ff8a8a;

  /* Motion: one duration for every colour and fill change, one easing for movement */
  --dur: 0.25s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--ground); }
body { position: relative; margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 0.125rem solid var(--accent-lite); outline-offset: 0.125rem; }
/* Cells and rows sit edge to edge between lines, so their ring is drawn inside them and never crosses a line;
   it follows the element's own shape and never changes it */
.mega-link:focus-visible, .mega-all:focus-visible, .card:focus-visible, .ov-card:focus-visible,
.work-card:focus-visible, .plan:focus-visible, .faq-list summary:focus-visible { outline-offset: -0.125rem; }
::selection { background: rgba(47, 107, 255, 0.5); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3.75rem; z-index: 200; display: inline-flex; align-items: center; min-height: var(--h); padding: 0 0.95em; border-radius: var(--r); background: var(--milk); color: var(--carbon); font-weight: 500; font-size: 0.9rem; }
.skip:focus { top: 1rem; }

/* ---------- The frame: a column with rails, divided into rows ---------- */
main { position: relative; overflow-x: clip; }
main::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: var(--frame); translate: -50% 0; pointer-events: none;
  border-inline: 1px solid var(--line); }
main > * { position: relative; z-index: 1; }
.wrap { width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }
.wrap-flush { width: var(--frame); margin-inline: auto; padding-inline: 1px; }   /* 1px in, so the rails stay visible beside cells */
.section { padding: var(--section) 0; }
/* A row: a line across the frame at its top */
.row { position: relative; }
.row::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--frame); translate: -50% 0; border-top: 1px solid var(--line); pointer-events: none; }
/* Cells: a grid whose gaps are the lines */
/* lines belong to rows (.row draws the one at its top); cells only draw the lines between themselves */
.cells { display: grid; gap: 1px; background: var(--line); }
.cells > * { background: var(--ground); min-width: 0; }
.cell { padding: clamp(1.375rem, 2.4vw, 2.25rem); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: var(--h1); letter-spacing: -0.05em; line-height: 1; }
h2 { font-size: var(--h2); letter-spacing: -0.045em; }
h3 { font-size: var(--h3); letter-spacing: -0.025em; line-height: 1.2; }
.dim { color: var(--ink-3); }
.lead { font-size: var(--lead); color: var(--ink-2); line-height: 1.6; max-width: 36em; text-wrap: pretty; }
.muted { color: var(--ink-3); }
/* A small label: a blue square and a word */
.kicker { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.85rem; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-2); }
.kicker::before { content: ""; width: 0.4375rem; height: 0.4375rem; background: var(--accent); flex: none; }
.accent { color: var(--accent-lite); }
/* The news chip above a headline */
.news { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--h-sm); padding: 0 0.875rem; border-radius: var(--r); background: var(--ctl); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; color: var(--ink-2); transition: background-color var(--dur); }
.news b { color: var(--ink); font-weight: 500; }
.news .arrow { transition: transform 0.4s var(--ease); }
.news:hover { background: var(--ctl-hi); }
.news:hover .arrow { transform: translateX(0.1875rem); }

/* ---------- Brand ---------- */
.mark { display: block; flex: none; }
.mark .mark-sky { fill: var(--mark-sky, var(--accent)); }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; }
/* The roundel: the white one-colour mark on the page itself, no box behind it */
.logo-tile { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--ink); --mark-sky: currentColor; flex: none; }
.logo-tile .mark { width: 100%; height: 100%; }
.brand-word { font: 500 1.0625rem/1 var(--font-display); letter-spacing: -0.035em; white-space: nowrap; }
.brand-word span { color: var(--ink-3); }

/* ---------- Buttons: solid white, quiet grey, and blue ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: var(--h); padding: 0 1.15em; border-radius: var(--r);
  font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform 0.4s var(--ease), background-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.btn > svg { width: 0.9375rem; height: 0.9375rem; transition: transform 0.4s var(--ease); }
.btn:hover > svg { transform: translate(0.125rem, -0.125rem); }
.btn .arrow { display: inline-block; transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(0.1875rem); }
.btn:active { transform: scale(0.98); transition-duration: 0.1s; }
.btn-primary, .btn-light { background: var(--milk); color: var(--carbon); }
.btn-primary:hover, .btn-light:hover { background: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #3f78ff; }
.btn-secondary { color: var(--ink); background: var(--ctl); box-shadow: inset 0 0 0 1px var(--line); }
.btn-secondary:hover { background: var(--ctl-hi); }
.btn-sm { min-height: var(--h-sm); padding: 0 0.95em; font-size: 0.9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 500; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .arrow { transition: transform 0.4s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(0.1875rem); }

/* ---------- Sliding lens (demo tabs, services index) ---------- */
[data-lens] { position: relative; }
.lens {
  position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: var(--r); pointer-events: none; opacity: 0;
  transform: translate(var(--lx, 0), var(--ly, 0)); width: var(--lw, 0); height: var(--lh, 0);
  background: var(--cell-hi);
  transition: transform 0.5s var(--ease), width 0.5s var(--ease), height 0.3s var(--ease), opacity 0.3s;
}
.lens.is-on { opacity: 1; }
[data-lens] > :not(.lens) { position: relative; z-index: 1; }

/* ---------- Header: after Framer's ---------- */
/* A solid black bar, 64 px tall, with no line under it. The logo and the links sit together on the left, Contact
   and Book a call on the right, all lined up with the page's content. Each link is a soft rounded target whose
   fill fades in on hover; nothing divides them, so the spacing is just the even gap between labels. */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--ground); }
.header-inner { display: flex; align-items: center; height: 4rem; }
.header-inner > .logo { gap: 0.625rem; margin-right: 0.875rem; }
.header-inner .logo-tile { width: 1.625rem; height: 1.625rem; }
.header-inner .brand-word { font-size: 1rem; }
.nav { display: flex; align-items: center; }
.nav > a, .nav-trigger { display: inline-flex; align-items: center; gap: 0.3125rem; height: 2.25rem; padding: 0 0.75rem; margin-inline: 0.125rem; border-radius: var(--r);
  font-size: 0.875rem; letter-spacing: -0.005em; color: color-mix(in srgb, var(--ink) 80%, transparent); white-space: nowrap; transition: color var(--dur), background-color var(--dur); }
.nav > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); background: var(--cell-hi); }
.nav > a[aria-current="page"], .nav-item.is-current .nav-trigger { color: var(--ink); }
.nav-trigger .chev { width: 0.5rem; height: 0.5rem; opacity: 0.8; transition: transform 0.3s var(--ease); }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-item { position: relative; display: flex; }
/* The services menu: a black panel with a hairline ring, hanging from the link; its rows take the same soft fill */
.mega {
  position: absolute; top: 100%; left: 0; width: min(54rem, 100vw - 17rem); z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr 16rem; grid-template-rows: repeat(3, 1fr) auto; gap: 0; padding: 0.625rem;
  border-radius: var(--r-lg); background: var(--ground); box-shadow: 0 0 0 1px var(--line), 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(-0.25rem);
  transition: opacity 0.2s, transform 0.3s var(--ease), visibility 0s 0.3s;
}
.nav-item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.3s var(--ease); }
.mega-link { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; gap: 0.125rem 0.875rem; padding: 0.875rem; border-radius: var(--r); transition: background-color var(--dur); }
.mega-link:hover { background: var(--cell-hi); }
.mega-link .swatch { grid-row: span 2; align-self: center; }
.mega-link:hover .swatch, .drawer-group a:hover .swatch { color: var(--accent-lite); background: rgba(47, 107, 255, 0.14); }
.mega-link strong { align-self: end; font: 500 var(--t-small)/1.2 var(--font-display); letter-spacing: -0.02em; }
.mega-link span:last-child { align-self: start; font-size: 0.86rem; color: var(--ink-3); line-height: 1.35; }
.mega-all { grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.125rem; background: #0b0b0d; font-size: 0.9rem; color: var(--ink-2); transition: color var(--dur), background-color var(--dur); }
.mega-all:hover { color: var(--ink); background: var(--cell-hi-solid); }
.mega-all .arrow { transition: transform 0.4s var(--ease); }
.mega-all:hover .arrow { transform: translateX(0.1875rem); }
.mega-promo { position: relative; grid-row: 1 / 5; grid-column: 3; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; overflow: hidden; isolation: isolate;
  background: #0b0b0d; }
.mega-promo::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: 120%; aspect-ratio: 1; translate: -50% 0; background: url("../img/lens-front.webp") center / cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); opacity: 0.75; }
.mega-promo .btn { margin-top: auto; }
.mega-promo p { color: var(--ink-2); font-size: 0.9rem; }
.mega-promo strong { display: block; font: 500 var(--t-card)/1.2 var(--font-display); letter-spacing: -0.025em; color: #fff; margin-bottom: 0.375rem; }
.header-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.header-link { font-size: 0.875rem; letter-spacing: -0.005em; color: color-mix(in srgb, var(--ink) 60%, transparent); transition: color var(--dur); }
.header-link:hover, .header-link[aria-current="page"] { color: var(--ink); }
.header-cta { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.75rem; border-radius: var(--r); background: var(--milk); color: var(--carbon);
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; transition: background-color var(--dur); }
.header-cta:hover { background: var(--milk-2); }
/* Menu: two lines that cross into an X for Close, in the same place */
.burger, .drawer-close { position: relative; display: none; width: 2.75rem; height: 2.75rem; margin-right: -0.75rem; border-radius: var(--r); }
.burger::before, .burger::after, .drawer-close::before, .drawer-close::after { content: ""; position: absolute; left: 0.75rem; width: 1.25rem; height: 2px; border-radius: 1px; background: var(--ink); }
.burger::before { top: calc(50% - 6px); } .burger::after { top: calc(50% + 4px); }
.drawer-close { display: block; }
.drawer-close::before, .drawer-close::after { top: calc(50% - 1px); }
.drawer-close::before { rotate: 45deg; } .drawer-close::after { rotate: -45deg; }
.burger span { display: none; }

/* Swatches: small tiles with a glyph, used for services */
.swatch { width: 2.25rem; height: 2.25rem; border-radius: var(--r); display: grid; place-items: center; background: var(--ground-3); box-shadow: inset 0 0 0 1px var(--line); color: rgba(255, 255, 255, 0.72); transition: color var(--dur), background-color var(--dur); }
.swatch svg { width: 1.125rem; height: 1.125rem; }
[data-c="coral"] { --c: var(--coral); --c-ink: var(--coral-ink); --c-lite: var(--coral-lite); }
[data-c="mint"] { --c: var(--mint); --c-ink: var(--mint-ink); --c-lite: var(--mint-lite); }
[data-c="amber"] { --c: var(--amber); --c-ink: var(--amber-ink); --c-lite: var(--amber-lite); }
[data-c="sky"] { --c: var(--sky); --c-ink: var(--sky-ink); --c-lite: var(--sky-lite); }
[data-c="pink"] { --c: var(--pink); --c-ink: var(--pink-ink); --c-lite: var(--pink-lite); }
[data-c="violet"] { --c: var(--accent); --c-ink: var(--accent); --c-lite: var(--accent-lite); }
[data-c] { --c-soft: color-mix(in srgb, var(--c) 18%, transparent); }

/* Mobile drawer: a dark sheet under a copy of the header bar. Opening it swaps Menu for Close in the same place;
   the links rise in one after another; the two actions sit at the foot, clear of the home indicator. */
.drawer {
  position: fixed; inset: 0; z-index: 150; padding: 0 0 calc(1.25rem + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; background: #000;
  clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path 0.6s var(--ease), opacity 0.2s;
}
.drawer[hidden] { display: none; }
.drawer.is-open { clip-path: inset(0); opacity: 1; }
.drawer-top { flex: none; }
.drawer-nav, .drawer-foot { width: var(--frame); margin-inline: auto; padding-inline: 1.125rem; }
.drawer-nav { flex: 1; display: grid; align-content: start; gap: 2rem; padding-block: 2rem; }
.drawer-group { display: grid; }
.drawer-group p { font-size: 0.85rem; font-weight: 500; color: var(--ink-3); margin-bottom: 0.5rem; }
.drawer-group a { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font: 500 var(--t-panel)/1.1 var(--font-display); letter-spacing: -0.035em; }
.drawer-group a:active { color: var(--ink-2); }
.drawer-group .swatch { width: 1.875rem; height: 1.875rem; }
.drawer-group .swatch svg { width: 0.9375rem; height: 0.9375rem; }
.drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.drawer-foot .btn { width: 100%; justify-content: center; }
.drawer.is-open .drawer-group > *, .drawer.is-open .drawer-foot { animation: drawer-rise 0.6s var(--ease) both; }
.drawer.is-open .drawer-group > :nth-child(2) { animation-delay: 40ms; } .drawer.is-open .drawer-group > :nth-child(3) { animation-delay: 80ms; }
.drawer.is-open .drawer-group > :nth-child(4) { animation-delay: 120ms; } .drawer.is-open .drawer-group > :nth-child(5) { animation-delay: 160ms; }
.drawer.is-open .drawer-group + .drawer-group > * { animation-delay: calc(140ms + var(--n, 0) * 40ms); }
.drawer.is-open .drawer-foot { animation-delay: 260ms; }
@keyframes drawer-rise { from { opacity: 0; transform: translateY(0.75rem); } }

/* ---------- Home hero: the headline on the left, Mount Tavor at night on the right ---------- */
.hero-x { position: relative; min-height: min(92svh, 55rem); margin-top: -4rem; display: grid; align-items: center; overflow: hidden; }
/* The picture stays inside the frame: clipped at the rails, and faded to black just before them so the
   rail lines never cross it */
.hero-x { clip-path: inset(0 calc((100% - var(--frame)) / 2)); }
.hero-x::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: calc((100% - var(--frame)) / 2); width: clamp(3rem, 8vw, 9rem); pointer-events: none;
  background: linear-gradient(to left, var(--ground) 8%, transparent); }
/* a faint square grid, fading out towards the copy */
.hero-art { position: absolute; z-index: 0; top: 50%; right: calc((100% - var(--frame)) / 2 - 12%); width: min(70vw, 120rem); aspect-ratio: 1376 / 768; translate: 0 -42%;
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 50%, #000 60%, transparent 100%); }
.hero-img, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; }
.hero-canvas { opacity: 0; transition: opacity 0.6s var(--ease); touch-action: pan-y; }
.hero-x.is-ready .hero-canvas { opacity: 1; }
/* the lens mark rises from behind the summit, where the moon would be */
.hero-x-copy { position: relative; z-index: 2; padding-top: 7.5rem; padding-bottom: 4.5rem; display: grid; gap: 1.6rem; justify-items: start; }
.hero-x h1 { max-width: 10.5em; }
.hero-x .lead { max-width: 30em; }
.hero-x .actions { margin-top: 0.4rem; }

/* ---------- Page heroes ---------- */
.hero { position: relative; padding: clamp(6rem, 4rem + 6vw, 9.5rem) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.hero .kicker { margin-bottom: 1.4rem; }
.hero-page h1 { max-width: 13em; }
.hero-page .lead { margin-top: 1.6rem; }
.hero-page .actions { margin-top: 2rem; }

/* ---------- Section heads ---------- */
.head { display: grid; gap: 1.2rem; max-width: 48rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.head-split { max-width: none; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 1.5rem 4rem; }
.head-split > .reveal:last-child:has(.btn) { justify-self: end; }
.head-stack { display: grid; gap: 1.2rem; justify-items: start; }

/* A heading at the top of a row of cells */
.section-head-row { display: grid; gap: 1rem; justify-items: start; padding-block: var(--section) clamp(2rem, 3.2vw, 3rem); }
.section-head-row.is-split { grid-template-columns: 1fr auto; align-items: end; }
.h-sm { font-size: var(--t-section); max-width: 18em; }

/* ---------- A split row: a narrow column of copy beside a wide panel, a line between them ---------- */
.split { display: grid; grid-template-columns: minmax(18.75rem, 1fr) 2.6fr; }
.split > * { background: var(--ground); }
.split-copy { display: grid; gap: 1.2rem; align-content: start; padding: clamp(1.75rem, 3vw, 3rem) var(--pad); }
.split-copy .lead { font-size: 1rem; }
.split-copy h2 { font-size: var(--t-panel); letter-spacing: -0.04em; }
.split-panel { padding: clamp(1.125rem, 2.4vw, 2.25rem); }

/* ---------- Services in a tabbed panel ---------- */
.svc-tabs { display: grid; gap: 0.875rem; }
.tablist { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.5625rem; min-height: var(--h-sm); padding: 0 0.875rem; border-radius: var(--r); background: var(--ground-3); color: var(--ink-3); font-size: 0.9rem; font-weight: 500; transition: color var(--dur), background-color var(--dur); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); background: #232326; }
.tab .swatch { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; box-shadow: none; background: none; color: inherit; }
.tab[aria-selected="true"] .swatch { color: var(--accent-lite); }
.tab .swatch svg { width: 0.9375rem; height: 0.9375rem; }
.tab .prog { position: absolute; left: 0; bottom: 0; height: 0.125rem; width: 0; background: var(--accent); }
.tab[aria-selected="true"] .prog { animation: prog var(--auto, 7s) linear forwards; }
.is-paused .tab .prog { animation-play-state: paused; }
.svc-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 1px; border-radius: var(--r-xl); overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px var(--line); animation: panel-in 450ms var(--ease); }
.svc-view[hidden] { display: none; }
.svc-view > * { background: var(--ground-2); }
.svc-text { display: grid; gap: 1rem; align-content: start; padding: clamp(1.25rem, 2.4vw, 2rem); }
.svc-text h3 { font-size: var(--t-panel); letter-spacing: -0.035em; }
.svc-text > p { color: var(--ink-2); }
.svc-text .link-arrow { justify-self: start; margin-top: 0.4rem; }
.svc-demo { position: relative; display: grid; align-content: center; padding: clamp(1.125rem, 2.6vw, 2.5rem); overflow: hidden; isolation: isolate;
  background: var(--ground-2); }
/* the service animations (assets/js/svc-anim.js) fill their side of the panel edge to edge, in colour */
.svc-demo:has(.anim-stage) { padding: 0; }
.anim-stage { position: relative; height: 100%; min-height: clamp(20rem, 30vw, 27rem); }
.anim-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* ---------- What we do: the stepped demos (assets/js/svc-demos.js) ----------
   Real interface, played as a run of decisions. The script choreographs every moving piece on one seekable
   loop (Web Animations): each piece has its own entrance, path and settle, pieces in a group follow each
   other a few frames apart, and a tool on screen (a selection, a grid, a crop, an eyedropper) makes each
   decision. The CSS below is the finished layout: what the script measures, and what shows without it or
   with reduced motion. Everything is placed in percentages and sized in container units, so it scales. */
.demo-stage { position: relative; height: 100%; min-height: clamp(20rem, 30vw, 27rem); overflow: hidden; container-type: size; }
.demo-stage * { box-sizing: border-box; }
.svc-demo:has(.demo-stage) { padding: 0; }
/* the steps: a pill slides from one to the next; a tick grows in front of each one done */
.demo-steps { position: absolute; left: 7%; right: 7%; bottom: 4.5%; display: flex; gap: 1.2cqw; }
.demo-steps > span { position: relative; flex: 1; padding: 1.1cqw 0; border-radius: 99px; text-align: center; white-space: nowrap;
  font: 500 max(0.72rem, 1.7cqw)/1 var(--font); color: #fff; background: rgba(255, 255, 255, 0.24); }
.demo-steps > span b { position: relative; z-index: 2; font-weight: inherit; }
.demo-steps .ck { display: inline-block; max-width: 1.2em; overflow: hidden; vertical-align: bottom; text-decoration: none; }
.demo-pill { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: calc((100% - 3 * 1.2cqw) / 4); border-radius: 99px; background: #fff; opacity: 0; }

/* Websites: art direction on the Tavor Digital homepage (the silk hero, assets/img/hero-silk.webp) */
.artd { background: #2f6bff; }
.artd-win { position: absolute; left: 7%; right: 7%; top: 7%; bottom: 17%; overflow: hidden; border-radius: 1.6cqw; background: #000;
  box-shadow: 0 0 0 0.15cqw rgba(255, 255, 255, 0.08), 0 1.6cqw 4.5cqw rgba(0, 0, 40, 0.45); }
.artd-bar { position: relative; height: 7.5%; display: flex; align-items: center; gap: 0.8cqw; padding: 0 2cqw; background: #141416; }
.artd-bar .dots { display: flex; gap: 0.7cqw; }
.artd-bar .dots i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #2c2c30; }
.artd-url { position: absolute; left: 50%; transform: translateX(-50%); font: 400 1.5cqw/1 var(--mono); color: #8a8a8a; }
.artd-page { position: absolute; inset: 7.5% 0 0 0; color: #f5f5f5; }
.artd-page > * { position: absolute; margin: 0; }
.artd-nav { left: 4%; right: 4%; top: 5%; display: flex; align-items: center; gap: 2.4cqw; font-size: 1.5cqw; color: #8a8a8a; }
.artd-nav b { display: flex; align-items: center; gap: 0.7cqw; margin-right: auto; font-size: 1.9cqw; font-weight: 500; letter-spacing: -0.035em; color: #f5f5f5; }
.artd-nav b span { font-weight: 400; color: #8a8a8a; white-space: pre; }
.artd-nav .mark { width: 2.6cqw; height: 2.6cqw; }
/* the headline: one block per line, so each line can travel on its own */
.artd-h { left: 4%; top: 15%; font: 500 5.4cqw/1.02 var(--font); letter-spacing: -0.045em; }
.artd-h .ln { display: flex; justify-content: center; width: max-content; white-space: nowrap; transform-origin: 50% 0; }
.artd-h em { position: relative; font-style: normal; }
.artd-h .wipe { position: absolute; left: 0; top: 0; color: #2f6bff; }
/* the words travel over the picture; the tools sit over everything */
.artd-h, .artd-sub, .artd-btn { z-index: 1; }
.artd-sel { z-index: 2; }
.artd-drop { z-index: 3; }
.artd-sub { left: 4%; top: 44%; width: max-content; font-size: 1.8cqw; color: #a3a3a3; }
.artd-btn { left: 4%; top: 53%; overflow: hidden; padding: 1.1cqw 2.2cqw; border-radius: 99px; white-space: nowrap; font-size: 1.6cqw; font-weight: 500;
  background: #f5f5f5; }
.artd-btn b { position: relative; font-weight: inherit; color: #fff; }
.artd-btn i { position: absolute; left: 0; top: 50%; width: 260%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: #2f6bff; }
.artd-img { left: 56%; top: 13%; width: 40%; height: 70%; overflow: hidden; border-radius: 1.2cqw; background: #000; }
.artd-img img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 23.33%; scale: 1.4286; }
.artd-crop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0.35cqw solid #fff; box-shadow: 0 0 0 100cqw rgba(0, 0, 0, 0.55); opacity: 0; }
.artd-crop b { position: absolute; width: 2.4cqw; height: 2.4cqw; border: 0 solid #fff; }
.artd-crop b:nth-child(1) { left: -0.9cqw; top: -0.9cqw; border-width: 0.8cqw 0 0 0.8cqw; }
.artd-crop b:nth-child(2) { right: -0.9cqw; top: -0.9cqw; border-width: 0.8cqw 0.8cqw 0 0; }
.artd-crop b:nth-child(3) { left: -0.9cqw; bottom: -0.9cqw; border-width: 0 0 0.8cqw 0.8cqw; }
.artd-crop b:nth-child(4) { right: -0.9cqw; bottom: -0.9cqw; border-width: 0 0.8cqw 0.8cqw 0; }
/* the three services, a tile each */
.artd-row { left: 4%; top: 73%; display: flex; gap: 1.2cqw; }
.artd-row i { display: grid; place-items: center; width: 8.6cqw; aspect-ratio: 1; border-radius: 0.7cqw; background: #141416; box-shadow: inset 0 0 0 0.12cqw rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 245, 0.7); }
.artd-row svg { width: 42%; height: auto; }
/* the tools: a layout grid, a selection with its label, an eyedropper with the colour it took */
.artd-grid { left: 4%; right: 4%; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2%; }
.artd-grid i { background: rgba(47, 107, 255, 0.14); transform-origin: 50% 0; scale: 1 0; }
.artd-sel { left: 0; top: 0; width: 0; height: 0; border: 0.3cqw solid #2f6bff; opacity: 0; }
.artd-sel > i { position: absolute; width: 1.4cqw; height: 1.4cqw; border: 0.3cqw solid #2f6bff; background: #fff; }
.artd-sel > i:nth-child(1) { left: -0.85cqw; top: -0.85cqw; } .artd-sel > i:nth-child(2) { right: -0.85cqw; top: -0.85cqw; }
.artd-sel > i:nth-child(3) { left: -0.85cqw; bottom: -0.85cqw; } .artd-sel > i:nth-child(4) { right: -0.85cqw; bottom: -0.85cqw; }
.artd-sel em { position: absolute; left: -0.3cqw; bottom: calc(100% + 1cqw); display: grid; justify-items: start; font: 600 1.4cqw/1 var(--font); font-style: normal; color: #fff; }
.artd-sel em span { grid-area: 1 / 1; padding: 0.6cqw 0.9cqw; border-radius: 0.5cqw; background: #2f6bff; white-space: nowrap; opacity: 0; }
.artd-drop { left: 112%; top: 70%; width: 5.4cqw; height: 5.4cqw; transform-origin: 0 0; }
.artd-drop svg { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; fill: #fff; stroke: #141416; stroke-width: 1.2; filter: drop-shadow(0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.45)); }
.artd-drop i { position: absolute; left: -1.4cqw; top: -1.4cqw; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; border: 0.5cqw solid #2f6bff; opacity: 0; }
.artd-drop b { position: absolute; left: 2.2cqw; top: 1.2cqw; display: flex; align-items: center; gap: 0.6cqw; padding: 0.6cqw 1cqw 0.6cqw 0.6cqw; border-radius: 99px;
  background: #fff; box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.35); font: 600 1.3cqw/1 var(--mono); color: #000; white-space: nowrap; transform-origin: 0 0; scale: 0; }
.artd-drop b::before { content: ""; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #2f6bff; }

/* Branding: the Tavor Digital identity, built from its own pictures (the silk ridge and the mark in metal) */
.idnt { background: #f5f5f5; color: #000; }
.idnt-board { position: absolute; inset: 0; }
.idnt-board > * { position: absolute; }
.idnt .demo-steps > span { color: #000; background: rgba(0, 0, 0, 0.12); }
.idnt .demo-pill { background: #000; }
.idnt-tile { border-radius: 1.4cqw; background: #fff; box-shadow: 0 0.4cqw 1.6cqw rgba(0, 0, 0, 0.07); }
.idnt-logo-tile { left: 5%; top: 6%; width: 43%; height: 36%; }
.idnt-palette { left: 5%; top: 45%; width: 43%; height: 12%; }
/* the lockup is set at 9cqw and scaled into its tile, so it can start big and alone in the middle */
/* it is centred in a slot over the logo tile by layout, not by a translate of -50%: Safari can keep a percentage
   translate worked out while the name is still empty (it types in), which left the name across the pictures */
.idnt-slot { left: 5%; top: 6%; width: 43%; height: 36%; display: grid; place-items: center; }
.idnt-lockup { display: flex; align-items: center; gap: 0.3em; scale: 0.622; font-size: 9cqw; white-space: nowrap; }
/* the mark, in one colour on whatever it sits on: black on the board, white on the card and the sticker */
.idnt-mono { display: grid; place-items: center; flex: none; width: 1.3em; height: 1.3em; overflow: hidden; color: #000; }
.idnt-mono b, .idnt-mono .mark { display: block; width: 100%; height: 100%; }
.idnt-word { position: relative; font: 500 1em/1 var(--font); letter-spacing: -0.035em; color: #000; }
.idnt-word i { display: inline-block; font-style: normal; }
.idnt-word u { position: absolute; left: 100%; top: 0.02em; width: 0.06em; height: 0.92em; margin-left: 0.06em; background: #2f6bff; opacity: 0; }
.idnt-photo { top: 6%; width: 21%; height: 36%; overflow: hidden; border-radius: 1.4cqw; background: #000; }
.idnt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.idnt-silk { left: 51%; }
.idnt-lens { left: 74%; }
.idnt-ring { left: 0; top: 0; width: 4.6cqw; height: 4.6cqw; translate: -50% -50%; border-radius: 50%; border: 0.55cqw solid #fff; box-shadow: 0 0.3cqw 1cqw rgba(0, 0, 0, 0.3); opacity: 0; }
.idnt-sw { left: calc(11% + var(--i) * 10.3%); top: 51%; width: 6.2cqw; height: 6.2cqw; translate: -50% -50%; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 0.2cqw rgba(0, 0, 0, 0.1); }
/* the white swatch on the white tile: a hairline ring, as a palette in a style guide shows white */
.idnt-sw.is-light { box-shadow: inset 0 0 0 0.3cqw #bdbdbd, 0 0.3cqw 0.9cqw rgba(0, 0, 0, 0.14); }
.idnt-type { left: 5%; top: 60%; width: 43%; height: 24%; display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw; }
.idnt-type > b { overflow: hidden; font: 500 9.5cqw/1.1 var(--font); letter-spacing: -0.05em; }
.idnt-type > b span { display: block; }
.idnt-type .idnt-mask { font-size: 1.6cqw; line-height: 1.35; color: #8a8a8a; }
/* text that rises into place: each line in its own mask */
.idnt-mask { display: grid; }
.idnt-mask > span { overflow: hidden; }
.idnt-mask > span > span { display: block; }
.idnt-card { left: 51%; top: 47%; width: 27%; height: 21%; display: flex; align-items: center; gap: 1.4cqw; padding: 0 2.2cqw; border-radius: 1cqw; background: #000; color: #f5f5f5;
  font-size: 2.4cqw; box-shadow: 0 0.8cqw 1.8cqw rgba(0, 0, 0, 0.18); rotate: -5deg; }
.idnt-card .idnt-mono { color: #fff; }
.idnt-card b { font-size: 1.6cqw; font-weight: 500; letter-spacing: -0.02em; }
.idnt-card small { font-size: 1.1cqw; color: #8a8a8a; }
/* a sticker in the brand blue */
.idnt-box { left: 71%; top: 52%; width: 24%; height: 32%; display: grid; place-content: center; justify-items: center; gap: 1.2cqw; border-radius: 1.2cqw; background: #2f6bff; color: #fff;
  font-size: 3.6cqw; box-shadow: 0 0.8cqw 1.8cqw rgba(0, 0, 0, 0.18); rotate: 4deg; }
.idnt-box .idnt-mono { width: 1.6em; height: 1.6em; color: #fff; --mark-sky: currentColor; }   /* one colour: never the two-tone mark on blue */
.idnt-box small { font-size: 1.3cqw; font-weight: 500; letter-spacing: -0.02em; }

@keyframes panel-in { from { opacity: 0; transform: translateY(0.375rem); } }
@keyframes prog { to { width: 100%; } }

/* ---------- The stage: a dark panel with a faint grid that holds a demo ---------- */
.stage { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); padding: clamp(1rem, 3vw, 3rem);
  background: var(--ground-2); box-shadow: 0 0 0 1px var(--line); }


/* ---------- Interface demos: one dark UI theme ----------
   Every demo (the studio app, the cards, the integrations hub) shares these surfaces: a near-black window,
   raised greys, fine lines, one blue for selection and icons, green only for "live" and success.
   Shapes: 0.625rem windows and cards, 0.375rem for anything inside them. */
.app, .card-ui, .hub {
  --ui: #0c0d10; --ui-2: #15161b; --ui-3: #1e2027; --ui-line: rgba(255, 255, 255, 0.075);
  --ui-text: #ececf0; --ui-dim: #92939c; --ui-blue: rgba(47, 107, 255, 0.16); --ui-blue-ink: #aec4ff;
  --ui-green: rgba(52, 211, 153, 0.13); --ui-green-ink: #6ee7b7;
}
.card-ui { color-scheme: dark; --ink: var(--ui-text); --ink-2: #b6b7bf; --ink-3: var(--ui-dim); --soft: var(--ui-2); --soft-2: var(--ui-3); --edge: var(--ui-line); color: var(--ui-text); }

/* The studio app window */
.app { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ui); color: var(--ui-text); font-size: 0.8125rem; line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--ui-line), var(--shadow-lg); }
.app-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: 3.125rem; padding: 0 0.75rem; background: var(--ui-2); box-shadow: 0 1px 0 var(--ui-line); }
.app-project { display: flex; align-items: center; gap: 0.5625rem; color: var(--ui-text); font-weight: 500; }
.app-project .mark { width: 1.125rem; height: 1.125rem; color: var(--ui-text); }
.app-project span { color: var(--ui-dim); font-weight: 400; }
.app-modes { display: flex; gap: 0.125rem; padding: 0.1875rem; border-radius: var(--r); background: var(--ui); box-shadow: inset 0 0 0 1px var(--ui-line); }
.app-mode { position: relative; overflow: hidden; height: 1.875rem; padding: 0 0.875rem; border-radius: 0.25rem; color: var(--ui-dim); font-weight: 500; font-size: 0.8125rem; transition: color 0.35s, background-color 0.35s; }
.app-mode:hover { color: var(--ui-text); }
.app-mode[aria-selected="true"] { color: #fff; background: var(--ui-3); }
.app-mode .prog { position: absolute; left: 0.875rem; right: 0.875rem; bottom: 0.1875rem; height: 1.5px; width: 0; border-radius: 0.125rem; background: var(--accent-lite); }
.app-mode[aria-selected="true"] .prog { animation: prog-inset var(--auto, 6s) linear forwards; }
.is-paused .app-mode .prog { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
@keyframes prog-inset { to { width: calc(100% - 1.75rem); } }
.app-right { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.app-btn { height: 1.875rem; padding: 0 0.75rem; border-radius: var(--r); background: var(--ui-3); color: var(--ui-text); font-weight: 500; font-size: 0.7812rem; display: inline-flex; align-items: center; }
.app-btn.is-accent { background: var(--milk); color: var(--carbon); }
.app-body { height: clamp(26.25rem, 40vw, 35rem); }
.app-view { display: grid; grid-template-columns: 13.125rem 1fr 15.625rem; height: 100%; animation: panel-in 450ms var(--ease); }
.app-view[hidden] { display: none; }
.pane { background: var(--ui); padding: 0.75rem; overflow: hidden; }
.pane-left { box-shadow: 1px 0 0 var(--ui-line); }
.pane-right { box-shadow: -1px 0 0 var(--ui-line); }
.pane-title { font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.02em; text-transform: lowercase; color: var(--ui-dim); margin: 0.25rem 0.25rem 0.625rem; }
.tree li, .plist li { display: flex; align-items: center; gap: 0.5rem; height: 1.75rem; padding: 0 0.5rem; border-radius: var(--r); color: #c6c7cf; white-space: nowrap; }
.tree li i { width: 0.625rem; height: 0.625rem; border-radius: 0.125rem; background: var(--ui-3); flex: none; }
.tree li[data-depth="1"] { padding-left: 1.375rem; }
.tree li[data-depth="2"] { padding-left: 2.25rem; }
.tree li.is-selected, .plist li.is-selected { background: var(--ui-blue); color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.22); }
.tree li.is-selected i { background: var(--accent); }
.canvas { position: relative; background: #08090b; padding: 1.125rem; overflow: hidden; display: grid; place-items: center; }
.canvas::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem, linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem; }
.canvas > * { position: relative; }
.props { display: grid; gap: 0.875rem; }
.prop-group { display: grid; gap: 0.5rem; }
.prop-row { display: grid; grid-template-columns: 4.375rem 1fr; align-items: center; gap: 0.5rem; color: var(--ui-dim); }
.field { display: flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.5rem; border-radius: var(--r); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); color: var(--ui-text); }
.field .chip { width: 0.875rem; height: 0.875rem; border-radius: 0.1875rem; }
.prop-link { display: grid; gap: 0.25rem; padding: 0.625rem; border-radius: var(--r); background: var(--ui-blue); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.2); color: var(--ui-blue-ink); }
.prop-link b { color: #fff; font-weight: 500; }

/* The client's site on the canvas keeps the client's own colours: it is their brand, not ours */
.mini-site { width: 100%; max-width: 35rem; aspect-ratio: 4 / 3.1; border-radius: var(--r-lg); overflow: hidden; background: #f4eee6; color: #2b2520; display: grid; grid-template-rows: 2.75rem 1fr auto; box-shadow: 0 1.5rem 3.125rem -1.25rem rgba(0, 0, 0, 0.9); font-size: 0.6875rem; }
.ms-nav { display: flex; align-items: center; gap: 0.875rem; padding: 0 1rem; }
.ms-logo { font-family: Georgia, serif; font-style: italic; font-size: 0.9375rem; margin-right: auto; }
.ms-nav span:not(.ms-logo) { color: #7a6e64; }
.ms-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.875rem; padding: 0.5rem 1rem 0.875rem; align-items: center; }
.ms-kicker { font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: #2f7d4f; }
.ms-title { font-family: Georgia, serif; font-size: clamp(1.125rem, 2vw, 1.625rem); line-height: 1.05; margin: 0.375rem 0 1.875rem; }
.ms-cta { position: relative; display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.75rem; border-radius: 62.4375rem; background: #ff5a3c; color: #fff; font-weight: 600; }
.ms-cta.is-selected { outline: 1.5px solid var(--accent); outline-offset: 0.25rem; }
.ms-cta.is-selected::before { content: "Button · Primary"; position: absolute; left: -0.3125rem; top: -1.5rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: var(--accent); color: #fff; font-size: 0.625rem; font-weight: 600; white-space: nowrap; }
.ms-cta.is-selected::after { content: ""; position: absolute; right: -0.5rem; bottom: -0.5rem; width: 0.4375rem; height: 0.4375rem; background: #fff; border: 1.5px solid var(--accent); border-radius: 0.125rem; }
.ms-art { aspect-ratio: 1; border-radius: var(--r); background: url("../img/demo/bouquet.svg") 50% 40% / cover, #ffe3d3; }
.ms-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0 1rem 1rem; }
.ms-products span { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: var(--r); background: #fff; }
.ms-products i { width: 1.625rem; height: 1.625rem; border-radius: 0.25rem; background: url("../img/demo/daisies.svg") 50% 45% / cover, #d9f0e1; }
.ms-products span:nth-child(2) i { background: url("../img/demo/bouquet.svg") 50% 40% / cover, #ffe3d3; }
.ms-products span:nth-child(3) i { background: url("../img/demo/tulips.svg") 50% 35% / cover, #fff1c9; }

/* The card window that holds most demos */
.card-ui { position: relative; border-radius: var(--r-lg); overflow: hidden; font-size: 0.875rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 30%), var(--ui);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--ui-line), 0 1.875rem 4.375rem -1.875rem rgba(0, 0, 0, 0.9); }
.card-ui-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6875rem 0.875rem; background: var(--ui-2); box-shadow: 0 1px 0 var(--ui-line); font-weight: 500; font-size: 0.8125rem; }
.card-ui-bar > span:not(.pill) { color: var(--ui-dim); font-weight: 400; }
.card-ui .swatch { width: 1.875rem; height: 1.875rem; border-radius: var(--r); background: var(--ui-blue); box-shadow: none; color: var(--ui-blue-ink); }
.card-ui .swatch svg { width: 0.9375rem; height: 0.9375rem; }
.card-ui .muted { color: var(--ui-dim); }

/* Badges: small rounded rectangles; neutral, blue, or green for live */
.pill { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 0.25rem; font-size: 0.7188rem; font-weight: 500; white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); color: var(--ui-dim, var(--ink-3)); }
.pill::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.pill[data-c] { background: var(--ui-blue, rgba(47, 107, 255, 0.16)); color: var(--ui-blue-ink, #aec4ff); }
.pill[data-c="mint"] { background: var(--ui-green, rgba(52, 211, 153, 0.13)); color: var(--ui-green-ink, #6ee7b7); }

/* Flow graph */
.flow { display: grid; gap: 0; justify-items: center; width: min(100%, 22.5rem); }
.card-ui .flow { width: 100%; max-width: none; padding: 1.125rem; }
.node { position: relative; width: 100%; display: grid; grid-template-columns: 1.875rem 1fr auto; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--r-lg); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.node b { display: block; color: var(--ui-text); font-weight: 500; }
.node small { color: var(--ui-dim); font-size: 0.7188rem; }
.node .ok { color: var(--ui-green-ink); font-size: 0.6875rem; font-weight: 500; }
.node.is-run { box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.7); }
.wire { position: relative; width: 0.125rem; height: 1.25rem; background: var(--ui-3); overflow: hidden; }
.wire::after { content: ""; position: absolute; left: 0; top: -0.625rem; width: 0.125rem; height: 0.625rem; background: var(--accent-lite); animation: pulse-down 1.6s linear infinite; }
@keyframes pulse-down { to { top: 100%; } }
.log { display: grid; gap: 0.5rem; font-size: 0.75rem; }
.log li { display: grid; gap: 0.125rem; padding: 0.5rem 0.625rem; border-radius: var(--r); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); color: #c6c7cf; }
.log li b { color: #fff; font-weight: 500; }
.log time { font-family: var(--mono); font-size: 0.6562rem; color: var(--ui-dim); }
.log li.is-new { animation: log-in 400ms var(--ease); }
@keyframes log-in { from { opacity: 0; transform: translateY(0.25rem); } }

/* Integration tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; width: 100%; max-width: 32.5rem; }
.tile-app { display: grid; gap: 0.5rem; padding: 0.75rem; border-radius: var(--r-lg); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.tile-app .top { display: flex; align-items: center; gap: 0.5rem; }
.tile-app .logo-chip { width: 1.625rem; height: 1.625rem; border-radius: var(--r); display: grid; place-items: center; font-weight: 600; font-size: 0.75rem; color: var(--ui-blue-ink); background: var(--ui-blue); }
.tile-app b { color: var(--ui-text); font-weight: 500; }
.tile-app small { color: var(--ui-green-ink); font-size: 0.6875rem; }
.tile-app small.is-idle { color: var(--ui-dim); }

/* CMS editor demo */
.cms { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 20rem; }
.cms-list { padding: 0.625rem; background: rgba(255, 255, 255, 0.012); box-shadow: 1px 0 0 var(--ui-line); display: grid; align-content: start; gap: 0.125rem; }
.cms-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5625rem 0.625rem; border-radius: var(--r); font-weight: 500; font-size: 0.8438rem; }
.cms-list li.is-on { background: var(--ui-3); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.22); }
.cms-edit { padding: 1rem; display: grid; gap: 0.75rem; align-content: start; }
.cms-field { display: grid; gap: 0.375rem; }
.cms-field label { font-family: var(--mono); font-size: 0.6875rem; text-transform: lowercase; color: var(--ui-dim); }
.cms-input { min-height: 2.375rem; padding: 0.5625rem 0.6875rem; border-radius: var(--r); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); color: var(--ui-text); font-size: 0.8438rem; }
.cms-input.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 0.125rem; vertical-align: -0.125rem; background: var(--accent-lite); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cms-img { height: 5.25rem; border-radius: var(--r); background: radial-gradient(70% 90% at 30% 20%, #cfd6cf, transparent 70%), linear-gradient(150deg, #9aa79f, #5f6e66); }
.cms-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; }
.cms-foot .btn { min-height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }

.typing { display: inline-flex; gap: 0.25rem; }
.typing i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--ui-dim); animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-0.1875rem); } }

/* Hub demo */
.hub { position: relative; aspect-ratio: 1.25; }
.hub-node { z-index: 1; }
.hub svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub svg.wires path { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; }
.hub svg.wires path.live { stroke: var(--accent-lite); stroke-dasharray: 5 9; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.hub-node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.8125rem 0.4375rem 0.4375rem; border-radius: var(--r-lg); background: var(--ui-2); color: var(--ui-text);
  box-shadow: inset 0 0 0 1px var(--ui-line), 0 0.625rem 1.625rem rgba(0, 0, 0, 0.55); font-weight: 500; font-size: 0.8438rem; white-space: nowrap; }
.hub-node .logo-chip { width: 1.625rem; height: 1.625rem; border-radius: var(--r); display: grid; place-items: center; background: var(--ui-blue); color: var(--ui-blue-ink); font-weight: 600; font-size: 0.75rem; }
.hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 10%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%), var(--ui-2);
  box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.25), 0 1.25rem 3.125rem rgba(0, 0, 0, 0.6); }
.hub-core .mark { width: 2.5rem; height: 2.5rem; color: var(--ui-text); }

/* Report demo */
.report { padding: 1rem; display: grid; gap: 0.75rem; }
.report-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.kpi { padding: 0.75rem; border-radius: var(--r); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.kpi small { font-family: var(--mono); color: var(--ui-dim); font-size: 0.6875rem; text-transform: lowercase; }
.kpi b { display: block; font: 500 1.4rem/1.2 var(--font-display); letter-spacing: -0.03em; }
.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 8.125rem; padding: 0.75rem; border-radius: var(--r); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.bars i { flex: 1; border-radius: 0.1875rem 0.1875rem 0.125rem 0.125rem; background: var(--accent); transform-origin: bottom; }
.bars i:nth-child(odd) { background: rgba(143, 176, 255, 0.35); }
.report-note { font-size: 0.7812rem; color: var(--ui-dim); }

/* ---------- The five service demos, built to read like real products ---------- */
/* Window chrome: three quiet dots, a title or address, and a status */
.card-ui-bar { gap: 0.75rem; }
.card-ui-bar .dots { display: inline-flex; gap: 0.375rem; flex: none; }
.card-ui-bar .dots i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #2c2d33; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.card-ui-bar .title, .card-ui-bar .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.card-ui-bar .title em, .card-ui-bar .url em { font-style: normal; font-weight: 400; color: var(--ui-dim); }
.card-ui-bar .url { justify-self: center; text-align: center; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: var(--ui-text); }
.card-ui-bar .url::before { content: ""; display: inline-block; width: 0.5rem; height: 0.625rem; margin-right: 0.45rem; vertical-align: -0.05rem; border-radius: 2px 2px 1px 1px; box-shadow: inset 0 0 0 1.5px var(--ui-dim); }

/* Websites: a CMS admin */
.cmsx { container-type: inline-size; }
@container (max-width: 30rem) { .cmsx-list li small, .cmsx-list .pill { display: none; } .cmsx-list li { grid-template-columns: 1.75rem minmax(0, 1fr); } }
.cmsx-body { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); min-height: 21rem; }
.cmsx-list { padding: 0.75rem; box-shadow: 1px 0 0 var(--ui-line); background: rgba(255, 255, 255, 0.012); }
.cmsx-head { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.25rem 0.375rem 0.6rem; }
.cmsx-head b { font-weight: 600; font-size: 0.9rem; }
.cmsx-head span { font-size: 0.75rem; color: var(--ui-dim); }
.cmsx-search { display: flex; align-items: center; gap: 0.45rem; height: 2rem; padding: 0 0.6rem; margin-bottom: 0.5rem; border-radius: var(--r); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); font-size: 0.78rem; color: var(--ui-dim); }
.cmsx-search svg { width: 0.85rem; height: 0.85rem; }
.cmsx-list ul { display: grid; gap: 2px; }
.cmsx-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: var(--r); }
.cmsx-list li.is-on { background: var(--ui-3); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.22); }
.cmsx-list li b, .cmsx-list li small, .cmsx-media small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmsx-list li > span:nth-child(2) { min-width: 0; }
.cmsx-list li b { display: block; font-weight: 500; font-size: 0.82rem; }
.cmsx-list li small { display: block; font-size: 0.72rem; color: var(--ui-dim); }
.th { display: block; width: 2rem; height: 2rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* posy's flowers, the sample client across the demos (flat illustrations in assets/img/demo/).
   Each sits on its own background colour while it loads. */
.th-1 { background: url("../img/demo/daisies.svg") 50% 45% / cover, #d9f0e1; }
.th-2 { background: url("../img/demo/bouquet.svg") 50% 40% / cover, #ffe3d3; }
.th-3 { background: url("../img/demo/tulips.svg") 50% 35% / cover, #fff1c9; }
.th-4 { background: url("../img/demo/peonies.svg") 50% 50% / cover, #fde2ee; }
.cmsx-edit { display: grid; gap: 0.7rem; align-content: start; padding: 0.875rem 1rem; }
.cmsx-crumb { font-size: 0.75rem; color: var(--ui-dim); }
.cmsx-crumb b { color: var(--ui-text); font-weight: 500; }
.cmsx-crumb span { margin: 0 0.2rem; opacity: 0.6; }
.cmsx-media { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.5rem; border-radius: var(--r); background: var(--ui-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.cmsx-media .th { width: 3.25rem; height: 3.25rem; }
.cmsx-media > div { min-width: 0; }
.cmsx-media b { display: block; font-weight: 500; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmsx-media small { font-size: 0.7rem; color: var(--ui-dim); }
.cmsx-chip { font-size: 0.72rem; padding: 0.25rem 0.5rem; border-radius: 4px; background: var(--ui-3); color: var(--ui-text); }
.cmsx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cmsx .cms-input { min-height: 2.15rem; padding: 0.45rem 0.65rem; font-size: 0.8rem; }
.cmsx .cms-field { gap: 0.3rem; }
.cmsx .cms-field label { font-size: 0.68rem; }
.cmsx-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.2rem; }
.cmsx-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--ui-dim); }
.cmsx-toggle i { position: relative; width: 1.75rem; height: 1rem; border-radius: 1rem; background: var(--accent); }
.cmsx-toggle i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #fff; }
.cmsx-foot .btn { min-height: 2rem; padding: 0 0.85rem; font-size: 0.8rem; transition: transform 0.2s, background-color 0.3s, color 0.3s; }
.cmsx-foot .btn.is-pressed { transform: scale(0.94); }
.cmsx-foot .btn.is-done { background: var(--ui-green); color: var(--ui-green-ink); }

/* Brand: a moodboard open in Figma. Figma's own chrome (#2c2c2c bars, #1e1e1e canvas, #0d99ff selection);
   the frames on the board are sized in cqi so the whole board scales with the window. */
.figx-wrap { margin: 0; container-type: inline-size; }
.figx { --fg-bar: #2c2c2c; --fg-line: #444; --fg-sel: #0d99ff; background: #1e1e1e; font-family: "Inter", var(--font); }
.figx-bar { display: flex; align-items: center; gap: 0.6rem; height: 2.4rem; padding: 0 0.6rem; background: var(--fg-bar); box-shadow: 0 1px 0 #383838; font-size: 0.72rem; color: #fff; }
.figx-logo { width: 0.62rem; height: 0.95rem; flex: none; margin: 0 0.3rem 0 0.2rem; }
.figx-tools { display: flex; gap: 0.1rem; }
.figx-tools i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 5px; color: #e6e6e6; }
.figx-tools i.is-on { background: var(--fg-sel); color: #fff; }
.figx-tools svg { width: 0.85rem; height: 0.85rem; }
.figx-file { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.figx-file em { font-style: normal; font-weight: 400; color: #b3b3b3; }
.figx-file svg { display: inline-block; width: 0.5rem; height: 0.3rem; margin-left: 0.2rem; vertical-align: 0.1rem; color: #b3b3b3; }
.figx-people { display: flex; }
.figx-people i { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-left: -0.3rem; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 2px var(--fg-bar); font: 600 0.6rem/1 var(--font); font-style: normal; }
.figx-share { padding: 0.32rem 0.7rem; border-radius: 5px; background: var(--fg-sel); font-weight: 500; }
.figx-zoom { color: #b3b3b3; }
.figx-body { display: grid; grid-template-columns: 9rem 1fr; }
.figx-layers { display: grid; align-content: start; gap: 0.1rem; padding: 0.6rem 0.45rem; background: var(--fg-bar); box-shadow: 1px 0 0 #383838; font-size: 0.68rem; color: #e6e6e6; }
.figx-layers p { margin: 0 0.35rem 0.4rem; font-weight: 600; font-size: 0.68rem; }
.figx-layers span { display: flex; gap: 0.4rem; align-items: center; padding: 0.28rem 0.35rem; border-radius: 4px; white-space: nowrap; overflow: hidden; }
.figx-layers span.sub { padding-left: 1.15rem; color: #b3b3b3; }
.figx-layers span.is-sel { background: rgba(13, 153, 255, 0.28); }
.figx-layers b { font-weight: 400; color: #8c8c8c; }
.figx-canvas { position: relative; display: grid; justify-items: center; padding: 2.4rem 1.6rem 2rem; overflow: hidden; }
.figx-label { display: block; width: min(100%, 22rem); margin-bottom: 0.3rem; font-size: 0.62rem; color: var(--fg-sel); }
.figx-frame { position: relative; width: min(100%, 22rem); aspect-ratio: 1; background: #000; outline: 1px solid var(--fg-sel); }
.figx-art { position: absolute; inset: 0; overflow: hidden; }
.figx-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figx-handles i { position: absolute; z-index: 2; width: 0.42rem; height: 0.42rem; background: #fff; box-shadow: 0 0 0 1px var(--fg-sel); }
.figx-handles i:nth-child(1) { left: -0.21rem; top: -0.21rem; } .figx-handles i:nth-child(2) { right: -0.21rem; top: -0.21rem; }
.figx-handles i:nth-child(3) { left: -0.21rem; bottom: -0.21rem; } .figx-handles i:nth-child(4) { right: -0.21rem; bottom: -0.21rem; }
.figx-size { position: absolute; left: 50%; top: calc(100% + 0.45rem); translate: -50% 0; padding: 0.12rem 0.35rem; border-radius: 3px; background: var(--fg-sel); font-size: 0.6rem; color: #fff; white-space: nowrap; }
.figx-cursor { position: absolute; z-index: 3; left: 58%; top: 46%; display: flex; align-items: flex-start; animation: fig-cursor 9s var(--ease) infinite; }
.figx-cursor svg { width: 0.85rem; height: 1.1rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.figx-cursor b { margin: 0.85rem 0 0 -0.1rem; padding: 0.12rem 0.4rem; border-radius: 0 4px 4px 4px; background: #9747FF; font: 500 0.6rem/1.2 var(--font); color: #fff; }
@keyframes fig-cursor { 0%, 100% { translate: 0 0; } 30% { translate: 4rem -2.5rem; } 55% { translate: 6.5rem 1.5rem; } 80% { translate: -1.5rem 2rem; } }

/* the credit */
.figx-credit { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 0.85rem; font-size: 0.8125rem; color: var(--ink-3); }
.figx-credit svg { width: 0.5rem; height: 0.75rem; }
.paper-demo .figx-credit { display: none; }
@container (max-width: 44rem) { .figx-body { grid-template-columns: 1fr; } .figx-layers, .figx-tools i:nth-child(n+4), .figx-zoom { display: none; } .figx-canvas { padding: 2rem 1.25rem 2.2rem; } }
@container (max-width: 26rem) { .figx-tools, .figx-people { display: none; } .figx-file { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .figx-cursor { animation: none; } }

/* Assistant: a Messages conversation on a plain card */
.msgx { --ios-blue: #0a84ff; --ios-grey: #26272b; --chat-bg: var(--ui); display: flex; flex-direction: column; width: min(100%, 30rem); margin-inline: auto; background: var(--chat-bg); color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em; }
.msgx-head { position: relative; display: grid; justify-items: center; padding: 0.85rem 1rem 0.65rem; background: var(--ui-2); box-shadow: 0 1px 0 var(--ui-line); }
.msgx-video { position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; width: 1.45rem; height: 0.95rem; color: var(--ios-blue); }
.msgx-contact { display: grid; justify-items: center; gap: 0.25rem; }
.msgx-avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(180deg, #a5a5ab, #6d6d73); color: #fff; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; }
.msgx-name { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.72rem; color: #fff; }
.msgx-name svg { width: 0.32rem; height: 0.5rem; color: #8e8e93; }
/* a fixed screen: the thread sits on the input bar, and older messages scroll off the top as new ones arrive */
.chatx-thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.18rem; height: 24rem; overflow: hidden; padding: 0.7rem 1.1rem 0.5rem; }
.chatx-thread > * { flex: none; }
.msgx-meta { align-self: center; margin: 0.15rem 0 0.55rem; text-align: center; font-size: 0.6rem; line-height: 1.3; font-weight: 500; color: #8e8e93; }
.bubble { position: relative; isolation: isolate; max-width: min(76%, 17rem); padding: 0.42rem 0.72rem; border-radius: 1.1rem; font-size: 0.8rem; line-height: 1.32; margin-top: 0.4rem; transition: opacity 0.35s, transform 0.45s var(--spring); }
.bubble.out { align-self: flex-end; background: var(--ios-blue); color: #fff; }
.bubble.in { align-self: flex-start; background: var(--ios-grey); color: #fff; }
.bubble.in + .bubble.in { margin-top: 0.15rem; }
/* the tails: a curl of the bubble's colour, carved out by a curve of the background */
.bubble::before, .bubble::after { content: ""; position: absolute; z-index: -1; bottom: 0; height: 1.1rem; }
.bubble.out::before { right: -0.42rem; width: 1.25rem; background: var(--ios-blue); border-bottom-left-radius: 0.95rem 0.85rem; }
.bubble.out::after { right: -1.6rem; width: 1.6rem; background: var(--chat-bg); border-bottom-left-radius: 0.6rem; }
.bubble.in::before { left: -0.42rem; width: 1.25rem; background: var(--ios-grey); border-bottom-right-radius: 0.95rem 0.85rem; }
.bubble.in::after { left: -1.6rem; width: 1.6rem; background: var(--chat-bg); border-bottom-right-radius: 0.6rem; }
/* only the last bubble in a run keeps its tail */
.bubble.in:has(+ .bubble.in:not(.is-hidden))::before, .bubble.in:has(+ .bubble.in:not(.is-hidden))::after { display: none; }
.bubble.photo { padding: 0; background: none; overflow: visible; }
.bubble.photo::before, .bubble.photo::after { display: none; }
.bouquet-photo { display: block; width: 8.5rem; height: 10rem; border-radius: 1.1rem; background: url("../img/demo/bouquet.svg") 50% 40% / cover, #ffe3d3; }
.chatx-receipt { align-self: flex-end; margin: 0.15rem 0.2rem 0; font-size: 0.6rem; font-weight: 500; color: #8e8e93; }
.typing-bubble { padding: 0.62rem 0.75rem; }
.typing-bubble .typing i { width: 0.42rem; height: 0.42rem; background: #8e8e93; }
.msgx-input { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.85rem; }
.msgx-plus { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--ui-3); color: #a1a1a6; }
.msgx-plus svg { width: 0.75rem; height: 0.75rem; }
.msgx-field { display: flex; align-items: center; justify-content: space-between; height: 1.95rem; padding: 0 0.6rem 0 0.8rem; border-radius: 1rem; box-shadow: inset 0 0 0 1px #3a3a3c; font-size: 0.8rem; color: #6d6d72; }
.msgx-field svg { width: 0.85rem; height: 0.8rem; color: #8e8e93; }
/* hidden steps while the conversation plays */
[data-chat].is-playing [data-step].is-hidden, [data-chat].is-playing .typing-bubble.is-hidden { opacity: 0; transform: translateY(0.4rem) scale(0.96); position: absolute; visibility: hidden; }

/* Automation: one run of the invoice flow */
.runx-meta { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; box-shadow: 0 1px 0 var(--ui-line); font-size: 0.75rem; color: var(--ui-dim); }
.runx-meta b { color: var(--ui-text); font-weight: 500; }
.runx-meta [data-run-state] { color: var(--ui-blue-ink); }
.runx.is-done .runx-meta [data-run-state] { color: var(--ui-green-ink); }
.runx-bar { height: 3px; border-radius: 3px; background: var(--ui-3); overflow: hidden; }
.runx-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: 3px; transition: width 0.6s var(--ease); }
.runx.is-done .runx-bar i { background: var(--green); }
/* each step has even padding, so the highlight while it runs sits evenly around it; the list is inset
   by the rest, which keeps the icons (and the line through them) 1rem from the window edge */
.runx-steps { position: relative; display: grid; gap: 0.25rem; padding: 0.6rem 0.375rem; }
.runx-steps::before { content: ""; position: absolute; left: calc(1rem + 1.05rem); top: 1.75rem; bottom: 1.75rem; width: 1px; background: var(--ui-line); }
.step-x { position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: start; gap: 0.75rem; padding: 0.625rem; border-radius: var(--r); transition: opacity 0.4s, background-color 0.4s, box-shadow 0.4s; }
.step-x .app { position: relative; z-index: 1; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: var(--r); background: #17181d; box-shadow: inset 0 0 0 1px var(--ui-line); color: var(--app); }
.step-x .app svg { width: 1rem; height: 1rem; fill: currentColor; }
.step-x b { display: block; font-weight: 500; font-size: 0.82rem; }
.step-x small { display: block; font-size: 0.72rem; color: var(--ui-dim); }
.step-x .chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.step-x .chips span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; padding: 0.15rem 0.45rem; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: #c6c7cf; }
.step-x .chips svg { width: 0.75rem; height: 0.75rem; }
.step-x .chips .ok { background: var(--ui-green); color: var(--ui-green-ink); }
.step-x .st { display: inline-flex; align-items: center; gap: 0.35rem; padding-top: 0.15rem; font-size: 0.7rem; color: var(--ui-dim); white-space: nowrap; }
.step-x .st i { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--ui-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%236ee7b7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.65rem no-repeat; }
/* states while a run plays: waiting, running, done */
.step-x.is-wait { opacity: 0.38; }
.step-x.is-wait .chips { visibility: hidden; }
/* while a step runs, its results show as shimmering placeholders in the space they will fill */
.step-x.is-run .chips span { color: transparent; background: linear-gradient(90deg, rgba(143, 176, 255, 0.08) 30%, rgba(143, 176, 255, 0.24), rgba(143, 176, 255, 0.08) 70%) 0 0 / 250% 100%; animation: chip-wait 1.3s linear infinite; }
.step-x.is-run .chips svg { visibility: hidden; }
@keyframes chip-wait { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.step-x.is-wait .st em, .step-x.is-run .st em { display: none; }
.step-x.is-wait .st i { background: none; box-shadow: inset 0 0 0 1.5px var(--ui-3); }
.step-x.is-run { background: rgba(47, 107, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.14); }
.step-x.is-run .app { box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.6); }
.step-x.is-run .st i { background: none; border: 1.5px solid var(--ui-3); border-top-color: var(--accent-lite); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.runx-foot { display: flex; justify-content: space-between; padding: 0.6rem 1rem 0.75rem; box-shadow: 0 -1px 0 var(--ui-line); font-size: 0.72rem; color: var(--ui-dim); }

/* Integrations: a live hub with real apps, data moving along the wires, and a feed */
.hubx .hub { aspect-ratio: 5 / 3; margin: 0.75rem 0.75rem 0; }
.hubx .hub svg.wires path { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.hubx .pkt { fill: var(--accent-lite); filter: drop-shadow(0 0 3px rgba(143, 176, 255, 0.9)); }
.hubx .hub-node { padding: 0.3rem 0.65rem 0.3rem 0.3rem; gap: 0.45rem; font-size: 0.78rem; border-radius: var(--r); }
.hubx .hub-node .logo-chip { width: 1.6rem; height: 1.6rem; border-radius: var(--r-sm); background: #17181d; color: var(--app); box-shadow: inset 0 0 0 1px var(--ui-line); }
.hubx .hub-node .logo-chip svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.hubx .hub-core { width: 4.25rem; height: 4.25rem; }
.hubx .hub-core::before { content: ""; position: absolute; inset: -0.6rem; border-radius: 50%; border: 1px solid rgba(143, 176, 255, 0.25); animation: ping 2.8s var(--ease) infinite; }
.hubx .hub-core .mark { width: 1.9rem; height: 1.9rem; }
.hubx-feed { display: grid; gap: 1px; margin: 0.75rem; border-radius: var(--r); overflow: hidden; background: var(--ui-line); box-shadow: inset 0 0 0 1px var(--ui-line); }
.hubx-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; background: var(--ui-2); font-size: 0.75rem; color: var(--ui-dim); }
.hubx-feed li b { color: var(--ui-text); font-weight: 500; margin-right: 0.3rem; }
.hubx-feed i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--app); }
.hubx-feed time { font-family: var(--mono); font-size: 0.66rem; }
.hubx-feed li.is-new { animation: feed-in 0.5s var(--ease); }
@keyframes feed-in { from { opacity: 0; transform: translateY(-0.4rem); } }

/* ---------- Feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.feature + .feature { margin-top: var(--section); }
.feature.is-flipped .feature-copy { order: 2; }
.feature-copy { display: grid; gap: 1.3rem; align-content: center; max-width: 34rem; }
.checks { display: grid; gap: 1rem; margin-top: 0.4rem; }
.checks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; }
.checks li::before { content: ""; width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; border-radius: 0; box-shadow: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%238fb0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.9375rem no-repeat; }
.checks strong { display: block; font-weight: 500; letter-spacing: -0.01em; }
.checks span { color: var(--ink-2); }

/* ---------- Cells with content: features, steps, principles ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.card { display: grid; gap: 0.625rem; align-content: start; padding: clamp(1.375rem, 2.4vw, 2.125rem); transition: background-color var(--dur); }
.card:hover { background: var(--cell-hi); }
.card h3 { font-size: var(--t-card); letter-spacing: -0.02em; }
.card p { color: var(--ink-2); font-size: 0.97rem; }
.card > .swatch { margin-bottom: 0.625rem; }

/* ---------- Progress bars in the demos ---------- */
.step-bar { height: 0.125rem; background: var(--line); overflow: hidden; margin-top: 0.625rem; }
.step-bar i { display: block; height: 100%; background: var(--c-lite, var(--accent)); width: var(--w); }
.card-ui .step-bar { height: 0.25rem; border-radius: 0.25rem; }
.card-ui .step-bar i { border-radius: 0.25rem; background: var(--c, var(--accent)); }

/* ---------- Tools: a small label, then one slow strip of logos on solid black ---------- */
.tools-row { padding-block: clamp(1.25rem, 2vw, 2rem); background: var(--ground); }
.tools-title { margin-bottom: clamp(0.5rem, 1vw, 0.875rem); text-align: center; font-size: 0.85rem; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-3); }
.marquee { display: flex; overflow: hidden; background: var(--ground);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.tool-row { flex: none; display: flex; align-items: center; gap: 0 clamp(2.75rem, 4.4vw, 4.5rem); min-width: 100%; justify-content: space-around; padding: 0 clamp(1.4rem, 2.2vw, 2.25rem); height: clamp(3.5rem, 4.4vw, 4.5rem); animation: marquee 70s linear infinite; }
.tool-row li { display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; font: 500 1.125rem/1 var(--font-display); letter-spacing: -0.025em; color: #9c9ca3; transition: color 0.3s; }
.tool-row li:hover { color: var(--ink); }
.marquee:hover .tool-row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.tool-logo { width: 1.5rem; height: 1.5rem; flex: none; fill: currentColor; }
/* marks that only exist as images (Muse, Instinct) are painted in the same colour through their shape */
.tool-mask { display: block; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* the logos come in different optical weights; even them out */
.tool-row li:has([href="#logo-zapier"]) .tool-logo, .tool-row li:has([href="#logo-xero"]) .tool-logo, .tool-row li:has([href="#logo-notion"]) .tool-logo { transform: scale(0.86); }
.tool-row li:has([href="#logo-n8n"]) .tool-logo { transform: scale(1.3); }
.tool-row li:has([href="#logo-make"]) .tool-logo, .tool-row li:has([href="#logo-googlegemini"]) .tool-logo { transform: scale(1.08); }

/* ---------- The hero's trust line ---------- */
.trust { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 0.6rem; }
.trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-2); }
.trust svg { width: 1rem; height: 1rem; color: var(--accent-lite); }

/* ---------- Quality in the details: the heading above the details ---------- */
.included-head { padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(1.125rem, 2vw, 1.5rem); }


/* ---------- Services page: a sticky index beside the six sections ---------- */
.svc-layout { display: grid; grid-template-columns: 15.625rem 1fr; }
.svc-layout > * { background: var(--ground); }
.subnav { position: relative; }
.subnav-inner { position: sticky; top: 5.25rem; display: grid; gap: 0.125rem; padding: 1.25rem 0.875rem; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: flex; align-items: center; gap: 0.75rem; min-height: var(--h-sm); padding: 0 0.75rem; border-radius: var(--r); font-size: 0.93rem; color: var(--ink-3); transition: color var(--dur); }
.subnav a::before { content: ""; width: 0.375rem; height: 0.375rem; background: var(--line-2); transition: background-color var(--dur); }
.subnav a:hover, .subnav a.is-active { color: var(--ink); }
.subnav a.is-active::before { background: var(--accent); }
.svc-list { display: grid; gap: 1px; background: var(--line); }
.svc { background: var(--ground); padding: clamp(2.25rem, 4.4vw, 4.25rem) var(--pad); }
/* the overview at the top: six cells that jump to each service */
.ov-card { position: relative; display: grid; gap: 0.375rem; align-content: start; padding: clamp(1.375rem, 2.4vw, 2rem) var(--pad); transition: background-color var(--dur); }
.ov-card .swatch { margin-bottom: 0.625rem; }
.ov-title { font-family: var(--font-display); font-size: var(--t-card); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.ov-card p { color: var(--ink-2); font-size: 0.95rem; }
.ov-card .arrow { position: absolute; top: clamp(1.375rem, 2.4vw, 2rem); right: var(--pad); color: var(--ink-3); transition: transform 0.4s var(--ease), color var(--dur); }
.ov-card:hover { background: var(--cell-hi); }
.ov-card:hover .swatch { color: var(--accent-lite); background: rgba(47, 107, 255, 0.14); }
.ov-card:hover .arrow { color: var(--ink); transform: translateY(0.1875rem); }
.svc .feature { grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 3vw, 3.5rem); }
.svc h2 { font-size: var(--t-section); }
.svc-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 0.6rem; background: var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.svc-meta div { padding: 0.875rem 1rem; background: var(--ground-2); }
.svc-meta dt { font-size: 0.82rem; font-weight: 500; color: var(--ink-3); }
.svc-meta dd { font: 500 var(--t-small)/1.3 var(--font-display); letter-spacing: -0.015em; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); }
.plan { display: flex; flex-direction: column; gap: 0.875rem; padding: clamp(1.625rem, 3vw, 2.5rem); }
.plan h3 { font-size: var(--t-panel); letter-spacing: -0.04em; }
.plan-price { font-size: 0.85rem; font-weight: 500; color: var(--ink-3); }
.plan ul { display: grid; gap: 0.625rem; margin: 0.375rem 0 0.875rem; }
.plan li { display: grid; grid-template-columns: 1.125rem 1fr; gap: 0.625rem; color: var(--ink-2); }
.plan li::before { content: ""; width: 0.875rem; height: 0.875rem; margin-top: 0.3125rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%238fb0ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.is-featured p { color: var(--ink-2) !important; }
.plan.is-featured li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%232f6bff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan-tag { align-self: flex-start; font-size: 0.8125rem; font-weight: 500; padding: 0.3125rem 0.625rem; border-radius: var(--r-sm); background: var(--accent); color: #fff; }

/* ---------- FAQ: rows divided by lines ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.375rem 0; font: 500 var(--t-card)/1.3 var(--font-display); letter-spacing: -0.02em; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); background: var(--ground-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%23f5f5f5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.5s var(--spring); }
.faq-list summary:hover::after { background-color: #1a1a1e; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 44em; }

/* ---------- About ---------- */
.story { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem 5rem; align-items: start; }
.story-text { display: grid; gap: 1.2rem; font-size: 1.1rem; color: var(--ink-2); }
.story-text p:first-child { color: var(--ink); font: 500 var(--t-panel)/1.25 var(--font-display); letter-spacing: -0.03em; }
.name-split { display: grid; grid-template-columns: 1fr 1fr; }
.name-card { padding: clamp(1.75rem, 3.4vw, 3rem); display: grid; gap: 0.75rem; align-content: start; }
.name-card h3 { font-size: var(--t-section); letter-spacing: -0.06em; line-height: 1; }
.name-card.is-form .kicker { color: var(--ink-3) !important; }
.name-card p { color: var(--ink-2); max-width: 32em; }
/* the team: a cell per person, a lens avatar until the photos arrive */
.person { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1.25rem; align-items: start; padding: clamp(1.5rem, 2.8vw, 2.5rem) var(--pad); }
.avatar { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; overflow: hidden; background: var(--material); box-shadow: inset 0 0 0 1px var(--line); color: rgba(255, 255, 255, 0.5); --mark-sky: rgba(143, 176, 255, 0.55); }
.avatar .mark { width: 2.125rem; height: 2.125rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: var(--t-card); }
.person-role { font-size: 0.875rem; color: var(--ink-3); margin: 0.25rem 0 0.625rem; }
.person p:last-child { color: var(--ink-2); max-width: 34em; }

/* ---------- Contact: Mount Tavor on the left, the form on the right ----------
   The one page that leaves the frame: two halves edge to edge across the screen, exactly as tall as the
   screen under the header (4rem), so the footer only comes up on scrolling. The photo runs to the
   screen's edges; the form is centred in its half. On a phone the photo becomes a band above the form. */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; align-items: stretch; min-height: calc(100svh - 4rem); }
.contact > * { background: var(--ground); }
.contact-photo { position: relative; margin: 0; overflow: hidden; background: #03081a; }   /* the picture's own night blue, while it loads */
/* set low in its cell: the mountain sits in the lower part with the field under it, and taller cells lose more sky than ground */
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
/* one column, centred both ways in its half; the vertical padding follows the screen's height, so the whole form fits on a laptop */
.contact-main { display: grid; grid-template-columns: minmax(0, 34rem); justify-content: center; align-content: center; gap: clamp(1.5rem, 3.5svh, 2.5rem); padding: clamp(1.25rem, 5svh, 4.5rem) var(--pad); }
.contact-head { display: grid; gap: 1rem; }
.contact-head h1 { font-size: var(--t-section); }
.contact-mail { display: flex; align-items: center; gap: 0.5rem 0.875rem; flex-wrap: wrap; }
.contact-mail .mail { color: var(--accent-lite); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(143, 176, 255, 0.35); transition: text-decoration-color var(--dur); }
.contact-mail .mail:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .contact-photo { height: clamp(12rem, 56vw, 20rem); }
  .contact-main { justify-content: stretch; grid-template-columns: minmax(0, 1fr); }
}

/* the form */
.form { display: grid; gap: clamp(1rem, 2.4svh, 1.25rem); }
.f-field { display: grid; min-width: 0; }
.f-field > :first-child { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.5rem; }
.f-field > :first-child em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4svh, 1.25rem) 0.75rem; }
/* a field with its glyph inside, on the left */
.f-control { position: relative; display: block; }
.f-icon { position: absolute; top: 50%; left: 0.875rem; width: 1rem; height: 1rem; translate: 0 -50%; color: var(--ink-3); pointer-events: none; transition: color var(--dur); }
.f-control:focus-within .f-icon { color: var(--accent-lite); }
.f-icon + .input { padding-left: 2.5rem; }
/* the message counts its characters in its own lower corner */
.f-count { position: absolute; left: 0.875rem; bottom: 0.625rem; font: 400 0.75rem/1 var(--mono); color: var(--ink-3); pointer-events: none; }
.f-count.is-near { color: var(--ink); }

/* fields: dark wells with a visible edge */
.input, .form textarea { width: 100%; min-height: var(--h); padding: 0.6875rem 0.875rem; border: 0; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); font: inherit; font-size: 1rem; line-height: 1.25; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow var(--dur), background-color var(--dur); }
.form textarea { display: block; min-height: clamp(6.5rem, 18svh, 10rem); padding-block: 0.75rem 2rem; resize: vertical; line-height: 1.5; }
.input::placeholder, .form textarea::placeholder { color: #7d7d85; }   /* 4.8:1 */
.input:hover, .form textarea:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26); }
.input:focus, .form textarea:focus { outline: none; background-color: #000; box-shadow: inset 0 0 0 1px var(--accent-lite), 0 0 0 0.1875rem rgba(47, 107, 255, 0.2); }
.input[aria-invalid="true"], .form textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--error), 0 0 0 0.1875rem rgba(255, 138, 138, 0.15); }
.btn-block { width: 100%; margin-top: 0.5rem; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.form-note { font-size: 0.85rem; color: var(--ink-3); text-align: center; }
.form-status { font-size: 0.92rem; color: var(--ink-2); text-align: center; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }
.form-status.is-sent { color: var(--ink); }
/* a live status tag (the 404 page, the launch demo) */
.live { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.875rem; padding: 0 0.625rem; border-radius: var(--r-sm); font-size: 0.82rem; color: var(--ink-2); background: rgba(52, 211, 153, 0.08); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.2); }
.live i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0.1875rem rgba(52, 211, 153, 0.18); }
/* the spam trap: off screen for people, still filled in by bots */
.f-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 404 and its game ---------- */
.nf { padding-top: clamp(2rem, 1rem + 4vw, 5rem); }
.nf-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.nf-copy { display: grid; gap: 1.4rem; justify-items: start; }
.nf-copy h1 { font-size: var(--t-hero); max-width: 9em; }
.nf-hint { font-size: 0.82rem; font-weight: 500; color: var(--ink-3); }
.nf-stage { padding: clamp(0.9rem, 2.4vw, 1.6rem); max-width: 30rem; width: 100%; justify-self: center; }
.game { display: grid; gap: 0.75rem; }
.game-hud { display: flex; align-items: center; gap: 1.2rem; font-family: var(--mono); font-size: 0.8125rem; text-transform: lowercase; color: var(--ink-3); }
.game-hud b { color: var(--ink); font-weight: 500; margin-left: 0.25rem; }
.lives { display: flex; gap: 0.3125rem; margin-left: auto; }
.lives i { width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; background: var(--milk); transition: background-color 0.3s, transform 0.4s var(--spring); }
.lives i.is-lost { background: rgba(236, 234, 228, 0.16); transform: scale(0.7); }
.game-screen { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #0a0b0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1.25rem 3.125rem -1.25rem rgba(0, 0, 0, 0.8); }
.game-screen canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; image-rendering: pixelated; touch-action: none; cursor: crosshair; outline-offset: -0.25rem; }
.game-overlay { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 0.75rem; padding: 1.5rem; text-align: center; background: linear-gradient(rgba(10, 11, 13, 0.25), rgba(10, 11, 13, 0.7)); }
.game-overlay[hidden] { display: none; }
.game-overlay p { color: var(--ink-2); font-size: 0.95rem; }
.game-overlay .game-title { font: 500 var(--t-panel)/1.05 var(--font-display); letter-spacing: -0.04em; color: var(--ink); }

.nf { padding-top: clamp(6rem, 4rem + 5vw, 9rem); }
.lives i { border-radius: 0.125rem; }

/* ---------- Work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-card { display: grid; gap: 1.125rem; align-content: start; min-width: 0; padding: clamp(1.125rem, 2vw, 1.75rem); transition: background-color var(--dur); }
.work-card:hover { background: var(--cell-hi); }
.work-media { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4 / 3; background: var(--ground-2); box-shadow: 0 0 0 1px var(--line); }
.work-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.92); transition: transform 0.9s var(--ease), filter 0.6s; }
.work-media.is-demo { background: var(--ground-2); }
.work-media .paper-demo { position: absolute; left: 50%; top: 50%; width: 25rem; transform: translate(-50%, -50%) scale(var(--s, 0.6)); transform-origin: 50% 50%; transition: transform 0.9s var(--ease); }
.work-card:hover .work-media img { transform: scale(1.04); filter: none; }
.work-card:hover .work-media .paper-demo { transform: translate(-50%, -52%) scale(var(--s, 0.6)); }
.work-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.work-meta h3 { font-size: var(--t-card); }
.work-meta p { font-size: 0.88rem; color: var(--ink-3); margin-top: 0.25rem; }
.work-go { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: var(--r); background: var(--ground-3); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); flex: none; transition: background-color var(--dur), color var(--dur); }
.work-go svg { width: 1rem; height: 1rem; }
.work-card:hover .work-go { background: var(--milk); color: var(--carbon); }

/* ---------- The blueprint layer (assets/js/pattern.js): the brand-blue plus grid behind a [data-pattern] section ----------
   The grid runs the full width of the screen, margins included, with its columns keyed to the frame's edges. Where
   it runs, the frame's side hairlines stop: the section's own ground covers main's, and the call to action and the
   footer after it drop theirs, so nothing cuts across the pluses. */
[data-pattern] { position: relative; isolation: isolate; background: var(--ground); }
.pattern-cv { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.pattern-probe { position: absolute; top: 0; left: 50%; width: var(--frame); height: 0; translate: -50% 0; visibility: hidden; pointer-events: none; }
.cta[data-pattern]::after, .cta[data-pattern] + .site-footer::after { display: none; }
/* faded in at the top of the first grid section and out at the foot of the last one */
/* the home FAQ: the grid reaches 180px up into the section above, fading in from nothing, and that section sits
   over it (z-index), so the pluses show only in its empty foot, never over its cards. The hairline between the two
   goes, and the frame's side hairlines fade out as they come down to it (main's --rails-end, set by pattern.js). */
main > section[data-pattern] { z-index: 0; }
/* drawn in full even off screen: lazy rendering (content-visibility) would clip the grid's reach above the section */
main > section[data-pattern]:not(:first-child) { content-visibility: visible; }
[data-pattern="faq"]::before { display: none; }
[data-pattern="faq"] .pattern-cv { top: -180px; height: calc(100% + 180px); -webkit-mask-image: linear-gradient(transparent, #000 300px); mask-image: linear-gradient(transparent, #000 300px); }
main:has(> section[data-pattern])::before { -webkit-mask-image: linear-gradient(#000 calc(var(--rails-end, 100%) - 260px), transparent var(--rails-end, 100%)); mask-image: linear-gradient(#000 calc(var(--rails-end, 100%) - 260px), transparent var(--rails-end, 100%)); }
[data-pattern="cta"] .pattern-cv { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 70%, transparent); }
/* straight after a section with the grid (the home FAQ), the two are one field: no hairline, no fade at the join */
main:has(> section[data-pattern]:last-of-type) + .cta::before { display: none; }
main:has(> section[data-pattern]:last-of-type) + [data-pattern="cta"] .pattern-cv { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* ---------- The closing call to action, over the hero's blue silk (the warm cta-dawn.webp broke the black-and-blue palette; kept in assets/img) ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; min-height: clamp(28.75rem, 48vw, 40rem); padding: clamp(3.5rem, 7vw, 6.875rem) var(--pad); text-align: center; }
.cta::after, .site-footer::after { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: var(--frame); translate: -50% 0; border-inline: 1px solid var(--line); pointer-events: none; }
.cta { align-items: start; min-height: clamp(35rem, 56vw, 47.5rem); }
.cta-art { position: absolute; z-index: -1; left: 50%; bottom: -30%; width: max(62.5rem, 86%); aspect-ratio: 1376 / 768; translate: -50% 0; background: url("../img/hero-silk.webp") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 50%, transparent 100%); }
/* with JavaScript, the picture waits until the section is near (assets/js/site.js) */
.js .cta-art:not(.is-near) { background-image: none; }
.cta-copy { display: grid; gap: 1.4rem; justify-items: center; max-width: 64rem; }
.cta h2 { font-size: var(--t-hero); max-width: 14em; letter-spacing: -0.05em; }
.cta p { font-size: var(--lead); color: var(--ink-2); max-width: 32em; }
.cta .actions { justify-content: center; margin-top: 0.3rem; }

/* ---------- Footer: columns in cells, then the name set large ---------- */
.site-footer { position: relative; isolation: isolate; }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-top > * { padding: clamp(1.5rem, 2.6vw, 2.5rem) var(--pad); }
.footer-brand { display: grid; gap: 1.2rem; align-content: start; }
.footer-brand p { color: var(--ink-2); font-size: 0.95rem; max-width: 22rem; }
.footer-col h2 { font: 500 0.85rem/1.2 var(--font); color: var(--ink-3); margin-bottom: 1rem; letter-spacing: 0; }
.footer-col a { display: block; padding: 0.25rem 0; color: var(--ink-2); transition: color var(--dur); }
.footer-col a:hover { color: var(--ink); }
.footer-word { overflow: hidden; padding: clamp(0.625rem, 2vw, 1.5rem) var(--pad) 0; }
.footer-word svg { width: 100%; height: auto; color: #18181b; }
.footer-word .mark-sky { fill: currentColor; }
.footer-base { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.125rem var(--pad) 1.375rem; font-size: 0.85rem; color: var(--ink-3); }
.to-top { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--h-sm); padding: 0 0.95em; border-radius: var(--r); color: var(--ink-2); background: var(--ground-3); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; font-weight: 500; transition: color var(--dur), background-color var(--dur); }
.to-top:hover { color: var(--ink); }

.footer-legal { display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-3); transition: color var(--dur); }
.footer-legal a:hover { color: var(--ink); }
.form-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(255, 255, 255, 0.3); }
.form-note a:hover { color: var(--ink); }

/* ---------- Legal pages: privacy, terms, accessibility (the resources guide shares the layout) ---------- */
.legal { display: grid; grid-template-columns: 14rem minmax(0, 46rem); gap: clamp(2rem, 6vw, 7rem); padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section); }
.legal-toc { position: sticky; top: 6.5rem; align-self: start; display: grid; gap: 0.15rem; font-size: 0.875rem; }
.legal-toc p { margin-bottom: 0.6rem; font-weight: 500; color: var(--ink); }
.legal-toc a { padding: 0.3rem 0; color: var(--ink-3); transition: color var(--dur); }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--ink); }
.legal-also { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-3); }
.legal-also a { display: inline; }
.legal-body { color: var(--ink-2); line-height: 1.7; }
.legal-body > :first-child { margin-top: 0; }
.legal-body h2 { margin: 3rem 0 0.85rem; font-size: var(--t-card); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); scroll-margin-top: 6.5rem; }
.legal-body h3 { margin: 1.5rem 0 0.4rem; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.legal-body p + p { margin-top: 0.85rem; }
.legal-body ul { display: grid; gap: 0.55rem; margin: 0.85rem 0; padding-left: 1.15rem; list-style: disc; }
.legal-body li::marker { color: var(--accent-lite); }
.legal-body strong { font-weight: 500; color: var(--ink); }
.legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(255, 255, 255, 0.3); transition: text-decoration-color 0.3s; }
.legal-body a:hover { text-decoration-color: var(--ink); }
.legal-summary { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--r-lg); background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--line); }
.legal-summary-title { font-weight: 500; color: var(--ink); }
.legal-summary ul { margin-bottom: 0; }
.legal-table { margin: 1rem 0; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.legal-table > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.25rem; padding: 0.85rem 1.1rem; }
.legal-table > div + div { border-top: 1px solid var(--line); }
.legal-table .is-head { background: var(--ground-2); font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.legal-table span:first-child { color: var(--ink); }
/* ---------- Resources: the tool guide, laid out like the legal pages ---------- */
.legal-toc a span { margin-left: 0.25rem; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); opacity: 0.7; }
.legal-toc a[hidden] { display: none; }
.guide-bar { display: none; }
.js .guide-bar { display: grid; gap: 0.6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.guide-count { font-size: 0.85rem; color: var(--ink-3); }
.guide-empty { color: var(--ink-2); }
.guide-empty a, .guide-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(255, 255, 255, 0.3); }
/* Below the first screen, each section is laid out and painted only as it nears the screen: the first
   layout of a long page drops to about a quarter of the work, which is most of what a phone waits on.
   Checked against full-page screenshots at phone and desktop widths: nothing is clipped. */
main > section:not(:first-child), main > nav { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* The guide holds most of the page's elements, so a section is laid out and painted only as it nears the
   screen; until then it stands in at a rough height, and at its real one once it has been seen */
.guide-group { scroll-margin-top: 6.5rem; content-visibility: auto; contain-intrinsic-size: auto 3000px; }
.guide-group[hidden] { display: none; }
.guide-group + .guide-group { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.guide-group > h2 { margin-bottom: 1rem; font-size: var(--t-panel); }
.guide-group > h2 + p { color: var(--ink-2); line-height: 1.7; max-width: 42em; text-wrap: pretty; }
.guide-pick { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--r-lg); background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.guide-pick b, .tool-fit b { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent-lite); }
.guide-pick b { display: block; margin-bottom: 0.15rem; }
.tool-list { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.tool { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.4rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.tool[hidden] { display: none; }
.tool h3 { grid-row: span 2; display: grid; gap: 0.4rem; align-content: start; justify-items: start; font-size: var(--t-small); letter-spacing: -0.01em; line-height: 1.4; }
.tool p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.tool .tool-fit { color: var(--ink-3); font-size: 0.9rem; }
.tool-fit { display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; align-items: baseline; }
.tool-tag { padding: 0.15rem 0.45rem; border-radius: var(--r-sm); background: var(--accent-soft); font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0; color: var(--accent-lite); }
.guide-note { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-3); }
.tool { scroll-margin-top: 6.5rem; transition: background-color 0.6s var(--ease); }
.tool.is-flash { background: var(--accent-soft); }
.tool-tag.is-new { background: #2a62f0; color: #fff; }   /* a shade under the accent: white on the accent itself is 4.49:1 */

/* The hero's index: every tool's name, A to Z, run together like the index at the back of a book. The
   search box under the intro lights the names that match and fades the rest; until a visitor uses it, it
   runs a few searches of its own (site.js). The copy and the index sit side by side, both from the top. */
.hero-index .wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
.ti-bar { position: relative; max-width: 26rem; margin-top: 2rem; }
.ti-bar .input { padding-left: 2.5rem; }
.ti-icon { position: absolute; top: 50%; left: 0.875rem; width: 1rem; height: 1rem; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
/* the readout heads the index: what it holds, then what a search found or what the pointer is on */
.ti-status { min-height: 2.9em; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.45; color: var(--ink-3); }
.ti-status b { font-weight: 500; color: var(--ink); }
/* 11 px, set like a book's index, so all of it stands beside the intro on a laptop screen; the wide gap
   between names is what tells "Google Ads" from "Google" and "Ads" */
.ti-list { padding-top: 0.25rem; font-size: 0.6875rem; line-height: 1.65; color: var(--ink-3); }
.ti-name, .ti-letter { display: inline-block; margin-inline-end: 0.85em; transition: color var(--dur), opacity var(--dur); }
.ti-name { white-space: nowrap; }
.ti-name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(255, 255, 255, 0.35); }
.ti-letter { margin-inline-start: 0.6em; font-family: var(--mono); font-size: 0.625rem; color: var(--accent-lite); }
.ti-letter:first-child { margin-inline-start: 0; }
.tool-index.is-query .ti-name { color: rgba(255, 255, 255, 0.16); }
.tool-index.is-query .ti-name.is-match, .tool-index.is-query .ti-name:hover { color: var(--ink); }
.tool-index.is-query .ti-letter { opacity: 0.35; }
/* the names set in, in reading order, about a second for the lot: one mask wiping down the index, where
   animating each of the hundreds of names on its own cost the page seconds of style work on a phone */
.js .ti-list { -webkit-mask: linear-gradient(#000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; mask: linear-gradient(#000 40%, transparent 60%) 0 0 / 100% 250% no-repeat;
  animation: ti-in 1s var(--ease) 0.3s backwards; }
@keyframes ti-in { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
.guide-num { margin-bottom: 0.5rem; font-family: var(--mono); font-size: 0.75rem; color: var(--accent-lite); }
/* Stacked, the index would run several screens long, so it shows its first lines and fades out; while a
   search is on, only the matches stay, so they gather at the top where they can be seen */
@media (max-width: 1100px) {
  .hero-index .wrap { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ti-bar { max-width: none; }
  .tool-index { height: 20rem; overflow: hidden; mask-image: linear-gradient(#000 65%, transparent); }   /* a set height, so the page below holds still while the searches change it */
  .tool-index.is-query:not(.is-demo) .ti-name:not(.is-match), .tool-index.is-query:not(.is-demo) .ti-letter { display: none; }
  .ti-list { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ti-list { animation: none; }
}

@media (max-width: 640px) {
  .tool { grid-template-columns: 1fr; }
  .tool h3 { grid-row: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
}

@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  /* the contents list becomes a row of section links that stays under the header while the page is read */
  .legal-toc { position: sticky; top: 4rem; z-index: 40; display: flex; align-items: center; gap: 0.375rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--pad)); padding: 0.5rem var(--pad); background: rgba(0, 0, 0, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
  .legal-toc::-webkit-scrollbar { display: none; }
  .legal-toc p, .legal-toc .legal-also { display: none; }   /* the footer already links the other legal pages */
  .legal-toc a { flex: none; display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 0 0.875rem; border-radius: var(--r); background: var(--ctl); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); white-space: nowrap; }
  .legal-toc a.is-active { color: var(--ink); background: var(--ctl-hi); box-shadow: inset 0 0 0 1px var(--line-2); }
  .legal-toc a span { margin-left: 0.375rem; }
  /* headings land below the header and the row */
  .legal-body h2, .guide-group, .tool { scroll-margin-top: 8.5rem; }
  .legal-table > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .legal-table .is-head { display: none; }
}

/* ---------- Blog: a light page, like paper, above the dark footer ----------
   The site's colours are all tokens, so the Blog swaps them for light ones inside its <main class="paper">
   and its header (body.is-paper): the frame, rows, cells, buttons and the legal-page layout all follow.
   The tones mark topics. Behind it all, a slow wash of the tones over a faint blueprint grid. */
.paper, .is-paper .site-header {
  color-scheme: light;
  --ground: #f5f7fa;
  --ground-2: #fbfcfd;
  --ground-3: #e9edf3;
  --line: rgba(5, 7, 11, 0.1);
  --line-2: rgba(5, 7, 11, 0.18);
  --ink: #05070b;            /* the brand ink: 19:1 on the paper */
  --ink-2: #464a52;          /* 8.5:1 */
  --ink-3: #686c75;          /* 5.1:1 */
  --soft: rgba(5, 7, 11, 0.04);
  --soft-2: rgba(5, 7, 11, 0.07);
  --edge: rgba(5, 7, 11, 0.1);
  --milk: #05070b;
  --milk-2: #1d2027;
  --carbon: #fff;
  --accent-lite: #2458e0;    /* on paper the lighter blue is too faint; markers and focus use the deeper one */
  --accent-soft: rgba(47, 107, 255, 0.12);
  --cell-hi: rgba(5, 7, 11, 0.035);
  --ctl: linear-gradient(180deg, #fff, #f3f5f8);
  --ctl-hi: #fff;
  --card: #ffffff;
  --card-shadow: 0 0 0 1px rgba(5, 7, 11, 0.07), 0 1px 2px rgba(5, 7, 11, 0.04), 0 12px 32px -12px rgba(5, 7, 11, 0.12);
  --card-shadow-hi: 0 0 0 1px rgba(5, 7, 11, 0.09), 0 2px 4px rgba(5, 7, 11, 0.05), 0 28px 56px -20px rgba(5, 7, 11, 0.24);
  color: var(--ink);
}
.paper ::selection { background: rgba(47, 107, 255, 0.22); color: var(--ink); }
.paper .btn-primary:hover, .is-paper .site-header .btn-primary:hover { background: #1d2027; }

/* The page: paper, with the wash at the top. The footer keeps the site's black. */
:root:has(body.is-paper) { background: #f5f7fa; }
body.is-paper { isolation: isolate; background: #f5f7fa; }
body.is-paper::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: min(78rem, 140vh); pointer-events: none;
  background:
    radial-gradient(38% 46% at 12% 8%, rgba(203, 184, 255, 0.5), transparent 70%),
    radial-gradient(34% 42% at 88% 4%, rgba(156, 188, 255, 0.6), transparent 70%),
    radial-gradient(30% 36% at 62% 38%, rgba(143, 176, 255, 0.3), transparent 70%),
    radial-gradient(24% 28% at 32% 50%, rgba(47, 107, 255, 0.1), transparent 70%);
  background-size: 140% 140%; background-position: 50% 0;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent);
  animation: paper-wash 28s ease-in-out infinite alternate; }
/* the blueprint grid and a fine grain, fading out down the page */
body.is-paper::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: min(60rem, 110vh); pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(5, 7, 11, 0.05) 1px, transparent 1px) 50% 0 / 3.5rem 3.5rem,
    linear-gradient(90deg, rgba(5, 7, 11, 0.05) 1px, transparent 1px) 50% 0 / 3.5rem 3.5rem;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent); mask-image: radial-gradient(70% 60% at 50% 0%, #000 30%, transparent); }
@keyframes paper-wash { from { background-position: 30% 0; } to { background-position: 70% 20%; } }
.is-paper .cta, .is-paper .site-footer { background: var(--ground); }

/* The header on paper: the same bar, frosted over the wash instead of solid black, with a hairline under it */
.is-paper .site-header { background: rgba(245, 247, 250, 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line); }
.is-paper .header-inner > .logo .mark-sky { fill: var(--accent); }
.is-paper .logo-tile { --mark-sky: var(--accent); }
/* the services menu on paper: a white panel, the promo stays dark around its lens */
.is-paper .mega { background: #ffffff; box-shadow: 0 0 0 1px rgba(5, 7, 11, 0.08), 0 1.875rem 5rem -1rem rgba(5, 7, 11, 0.3); }
.is-paper .mega-link:hover, .is-paper .mega-all:hover { background: #f5f7fa; }
.is-paper .mega .swatch { background: #eef1f6; color: var(--ink-2); }
.is-paper .mega-promo { --ink-2: #a3a3a3; --milk: #f5f5f5; --carbon: #000; }
.is-paper .mega-promo .btn-primary:hover { background: #fff; }
.paper .kicker::before { border-radius: 50%; }

/* Topic tones: pale tints of the site's four tones and its blue, always with black ink */
.paper [data-tone="sky"]   { --tone: color-mix(in srgb, var(--tone-sky) 40%, #fff); }
.paper [data-tone="lilac"] { --tone: color-mix(in srgb, var(--tone-lilac) 40%, #fff); }
.paper [data-tone="aqua"]  { --tone: color-mix(in srgb, var(--tone-aqua) 32%, #fff); }
.paper [data-tone="peach"] { --tone: color-mix(in srgb, var(--tone-peach) 34%, #fff); }
.paper [data-tone="blue"]  { --tone: color-mix(in srgb, var(--accent) 18%, #fff); }

.j-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.j-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.625rem; padding: 0 0.625rem; border-radius: 99px;
  background: var(--tone, var(--soft-2)); color: var(--ink); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.j-chip.is-type { background: var(--ink); color: var(--carbon); }
.j-chip.is-type::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--accent); }
.j-chip.is-draft { background: var(--accent-soft); color: var(--accent-2); }
.j-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The Blog page */
.blog-hero { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.blog-hero h1 { max-width: 11em; }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
/* the window: fluted glass with the light moving behind it, the mark and the count on top */
.paper [data-flute="paper"] { --fl-bg: #eef2f8; --fl-1: #9cbcff; --fl-3: #cbb8ff; color: var(--ink); }
.j-window { display: grid; grid-template-rows: 1fr auto; min-height: clamp(19rem, 28vw, 27rem); padding: clamp(1.25rem, 2.2vw, 1.75rem); border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(5, 7, 11, 0.06), 0 2px 4px rgba(5, 7, 11, 0.04), 0 36px 70px -34px rgba(36, 88, 224, 0.45); }
.j-window-mark { justify-self: end; width: 2.75rem; height: 2.75rem; color: var(--ink); --mark-sky: var(--accent); }
.j-window-count { display: flex; align-items: end; gap: 0.875rem; }
.j-window-count b { font-size: clamp(4rem, 3rem + 4vw, 7rem); font-weight: 500; letter-spacing: -0.06em; line-height: 0.8; font-variant-numeric: tabular-nums; }
.j-window-count span { padding-bottom: 0.2rem; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
.j-filter { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 2rem; padding: 0.3125rem; border-radius: 99px; background: var(--ground-3); }
.j-filter button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--h-sm); padding: 0 1rem; border-radius: 99px; font-size: 0.9rem; font-weight: 500; color: var(--ink-2);
  transition: background-color var(--dur), color var(--dur), box-shadow var(--dur); }
.j-filter button span { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.j-filter button:hover { color: var(--ink); }
.j-filter button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(5, 7, 11, 0.08), 0 0 0 1px rgba(5, 7, 11, 0.06); }

.j-section { padding-block: clamp(2rem, 4vw, 3.5rem) var(--section); }
.j-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.j-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.78); box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.j-card:hover { transform: translateY(-0.25rem); box-shadow: var(--card-shadow-hi); }
.j-card[hidden] { display: none; }
.j-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ground-3); }
.j-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.j-card:hover .j-cover img { transform: scale(1.035); }
.j-body { display: grid; gap: 0.75rem; align-content: start; flex: 1; padding: clamp(1.125rem, 1.6vw, 1.5rem); }
.j-body h3 { font-size: var(--t-card); line-height: 1.25; letter-spacing: -0.025em; }
.j-body > p:not([class]) { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; text-wrap: pretty; }
.j-body .j-meta { margin-top: auto; padding-top: 0.5rem; }
/* the newest post leads, wide */
.j-card.is-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.j-card.is-feature .j-cover { aspect-ratio: auto; min-height: clamp(18rem, 32vw, 30rem); }
.j-card.is-feature .j-body { align-content: center; gap: 1rem; padding: clamp(1.5rem, 3.5vw, 3.5rem); }
.j-card.is-feature h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.04em; }
.j-card.is-feature .j-body > p:not([class]) { font-size: var(--lead); }
.j-card.is-feature .j-meta { margin-top: 0.5rem; }
.j-empty { color: var(--ink-3); }

/* A post without a cover: its topic's tone, its number set large */
.j-plate { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: clamp(1rem, 2vw, 1.5rem); overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, var(--tone, var(--ground-3)), transparent 70%), var(--ground-2); color: var(--ink); }
.j-plate::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 75%); mask-image: linear-gradient(200deg, #000, transparent 75%); }
.j-plate span { position: relative; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.j-plate b { position: relative; color: var(--accent); font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4.75rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }

/* A post */
.post-progress { position: fixed; z-index: 101; top: 0; left: 0; right: 0; height: 0.1875rem; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); pointer-events: none; }
.post-hero { padding-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }
.post-hero .j-tags { margin-bottom: 1.6rem; }
.post-back { display: inline-flex; align-items: center; gap: 0.375rem; margin-right: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--ink-2); transition: color var(--dur); }
.post-back:hover { color: var(--ink); }
.post-hero h1 { max-width: 15em; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.5rem); }
.post-hero .lead { margin-top: 1.4rem; max-width: 38em; }
.post-hero .j-meta { margin-top: 1.4rem; }
/* a study's facts: project, year, what we did, the tools */
.j-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2rem, 3vw, 2.75rem); overflow: hidden; border-radius: var(--r-xl); background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.j-facts > div { padding: 1rem 1.25rem; background: var(--card); }
.j-facts dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.j-facts dd { margin-top: 0.35rem; font-size: 0.95rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.post-cover { overflow: hidden; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); border-radius: var(--r-xl); background: var(--ground-3); box-shadow: var(--card-shadow); }
.post-cover img { width: 100%; max-height: 44rem; object-fit: cover; }
.post-cover figcaption { padding: 0.85rem 1.25rem; font-size: 0.85rem; color: var(--ink-3); background: var(--card); }
/* The post's body: a grid. The contents list sits on the left; text runs in the reading column; media can
   stay in the column, run wide to the frame's right edge, or take the full frame (see blog.py, Blocks). */
.post-flow { display: grid; align-items: start; padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section);
  grid-template-columns: [full-start toc-start] 13rem [toc-end] minmax(2rem, 6rem) [text-start] minmax(0, 44rem) [text-end] minmax(0, 1fr) [full-end]; }
.post-flow > * { grid-column: text-start / text-end; min-width: 0; }
.post-flow > .legal-toc { grid-column: toc-start / toc-end; position: sticky; top: 6.5rem; }
.post-flow > .is-wide, .post-flow > .b-split { grid-column: text-start / full-end; }
.post-flow > .is-full { position: relative; z-index: 1; grid-column: full-start / full-end; background: var(--ground); box-shadow: 0 0 0 0.75rem var(--ground); }   /* the contents list slides behind it */
.post-flow > * + * { margin-top: clamp(2rem, 3.5vw, 3rem); }
.post-flow > .legal-toc + * { margin-top: 0; }
.post-flow > .b-text + .b-text { margin-top: 1.15rem; }
.post-body { font-size: 1.0625rem; line-height: 1.75; }
.b-text > * + *, .b-split-text > * + *, .b-callout > * + * { margin-top: 1.15rem; }
.b-text > :first-child, .b-split-text > :first-child { margin-top: 0; }
.post-flow > .legal-toc + .b-text > p:first-child { font-size: var(--lead); color: var(--ink); line-height: 1.65; }
.post-body h2 { margin-top: 3.5rem; font-size: var(--t-panel); letter-spacing: -0.03em; line-height: 1.15; }
.post-body h3 { margin-top: 2.25rem; font-size: var(--t-card); }
.post-body h4, .post-body h5, .post-body h6 { margin-top: 1.5rem; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: 0.75rem; }
.post-body ul, .post-body ol { display: grid; gap: 0.55rem; margin-block: 1.15rem 0; padding-left: 1.25rem; }
.post-body ol { list-style: decimal; }
.post-body ol li::marker { color: var(--accent-lite); font-variant-numeric: tabular-nums; font-weight: 500; }
.post-body li > ul, .post-body li > ol { margin-top: 0.55rem; }
.post-body li > p + p { margin-top: 0.6rem; }
.post-body em { font-style: italic; }
.post-body blockquote { margin: 2.5rem 0; padding: 1.5rem 1.75rem; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--card-shadow);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.post-body blockquote::before { content: "“"; display: block; height: 1.6rem; font-size: 3rem; line-height: 1; color: var(--accent); }
.post-body blockquote > * + * { margin-top: 0.75rem; }
.post-body code { padding: 0.12em 0.4em; border-radius: var(--r-sm); background: var(--soft-2); font-family: var(--mono); font-size: 0.86em; color: var(--ink); }
.post-body pre { overflow-x: auto; padding: 1.1rem 1.25rem; border-radius: var(--r-lg); background: #05070b; font-size: 0.875rem; line-height: 1.6; }
.post-body pre code { padding: 0; background: none; font-size: inherit; color: #f5f5f5; }
.post-body hr { margin-block: 3rem; border: 0; border-top: 1px solid var(--line); }
.post-body figcaption { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-3); }
.b-text figure { margin-block: 2.25rem; }
.b-text img, .b-media img, .b-media video, .b-split-media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--card-shadow); background: var(--ground-3); }
.b-media video { display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* Image beside text */
.b-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.b-split.is-image-right .b-split-media { order: 2; }

/* Gallery */
.b-gallery-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem); }
.b-gallery-grid figure { min-width: 0; }
.b-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--card-shadow); background: var(--ground-3); }
.b-gallery-grid figcaption { margin-top: 0.5rem; font-size: 0.8rem; }

/* Before / after: drag the handle across */
.b-compare-frame { --split: 50%; position: relative; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--card-shadow); background: var(--ground-3); user-select: none; touch-action: pan-y; }
.b-compare-frame img { width: 100%; box-shadow: none; border-radius: 0; }
.b-compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.b-compare-before img { height: 100%; object-fit: cover; }
.b-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 0 1px rgba(5, 7, 11, 0.12); pointer-events: none; }
.b-compare-handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 1rem; box-shadow: 0 2px 10px rgba(5, 7, 11, 0.25); }
.b-compare-label { position: absolute; top: 0.875rem; padding: 0.25rem 0.625rem; border-radius: 99px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.75rem; font-weight: 500; color: var(--ink); pointer-events: none; }
.b-compare-label.is-before { left: 0.875rem; }
.b-compare-label.is-after { right: 0.875rem; }
.b-compare-frame input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.b-compare-frame:has(input:focus-visible) { outline: 0.125rem solid var(--accent-lite); outline-offset: 0.25rem; }

/* Numbers */
.b-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem); }
.b-stats-grid > div { display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--card-shadow); }
.b-stats-grid b { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); text-wrap: balance; font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.b-stats-grid span { font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }

/* Pull quote: large, breaking out of the column */
.b-quote blockquote { margin: 0; padding: 0 0 0 clamp(1rem, 2vw, 1.75rem); border-left: 3px solid var(--accent); border-radius: 0; background: none; box-shadow: none;
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.75rem); line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance; }
.b-quote blockquote::before { content: none; }
.b-quote figcaption { padding-left: clamp(1rem, 2vw, 1.75rem); margin-left: 3px; font-size: 0.9rem; }
.post-flow > .b-quote { margin-block: clamp(2.5rem, 5vw, 4rem); }

/* Colour swatches */
.b-swatches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.b-swatches-grid > div { display: grid; gap: 0.15rem; padding: 0.5rem 0.5rem 0.75rem; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--card-shadow); }
.b-swatches-grid span { aspect-ratio: 4 / 3; margin-bottom: 0.5rem; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(5, 7, 11, 0.08); }
.b-swatches-grid b { padding-inline: 0.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.b-swatches-grid code { justify-self: start; margin-inline: 0.25rem; background: none !important; padding: 0 !important; font-size: 0.75rem !important; color: var(--ink-3) !important; text-transform: uppercase; }

/* Callout */
.b-callout { padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--r-xl); background: color-mix(in srgb, var(--tone-sky) 18%, #fff); box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.14); }
.b-callout-title { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); }
.post-table { overflow-x: auto; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--card-shadow); }
.post-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; }
.post-table th, .post-table td { padding: 0.85rem 1.15rem; text-align: left; vertical-align: top; }
.post-table th { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.post-table tbody td { border-top: 1px solid var(--line); }
.post-table td:first-child { font-weight: 500; color: var(--ink); }
.post-aside .legal-also { margin-top: 0; padding-top: 0; border-top: 0; }
.post-aside p ~ .legal-also { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.post-more { padding-bottom: var(--section); }
.post-more .j-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

@media (max-width: 1080px) {
  .blog-hero-grid { grid-template-columns: 1fr; }
  .j-window { min-height: 13rem; }
  .j-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-card.is-feature { grid-template-columns: 1fr; }
  .j-card.is-feature .j-cover { min-height: 0; aspect-ratio: 16 / 9; }
  .j-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .j-grid { grid-template-columns: 1fr; }
  .j-filter { display: flex; width: 100%; }
  .j-filter button { flex: 1; justify-content: center; padding: 0 0.75rem; }
}
@media (max-width: 1180px) {
  .post-flow { grid-template-columns: [full-start toc-start] 11rem [toc-end] 2.5rem [text-start] minmax(0, 44rem) [text-end] minmax(0, 1fr) [full-end]; }
}
@media (max-width: 860px) {
  .post-aside.is-bare { display: none; }   /* nothing to jump to: the footer links back to the Blog */
  .paper .legal-toc { background: rgba(245, 247, 250, 0.9); }
  /* one column: the contents list becomes the sticky row of links above the post */
  .post-flow { grid-template-columns: [full-start toc-start text-start] minmax(0, 1fr) [toc-end text-end full-end]; padding-top: 0; }
  .post-flow > .legal-toc { grid-row: 1 !important; top: 4rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
  .post-flow > .legal-toc.is-bare + * { margin-top: clamp(2rem, 5vw, 3rem); }
  .b-split { grid-template-columns: 1fr; }
  .b-split.is-image-right .b-split-media { order: 0; }
}
@media (max-width: 640px) {
  .b-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-paper::before { animation: none; }
  .j-card, .j-card:hover, .j-card:hover .j-cover img { transform: none; transition: none; }
  .post-progress { display: none; }
}

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(1rem); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Headings come split into words from the build (site/tools/build.py) and rise word by word: the first
   screen's from the first paint, the rest as they scroll in (motion.js adds .is-in). The first screen's
   other reveals fade up in order from the first paint too; further down, the scroll reveals take over. */
[data-words] .hw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.08em 0.1em; margin: 0 -0.08em -0.1em; }
[data-words] .hw > span { display: inline-block; }
.js [data-words]:not(.is-in) .hw > span { transform: translateY(105%); }
.js [data-words].is-in .hw > span, main > :first-child [data-words] .hw > span { animation: word-rise 1s var(--ease) calc(80ms + min(var(--i), 14) * 45ms) both; }
@keyframes word-rise { from { transform: translateY(105%); } to { transform: none; } }
.js main > :first-child .reveal { animation: first-in 0.8s var(--ease) both; }
.js main > :first-child .reveal:nth-child(2) { animation-delay: 80ms; }
.js main > :first-child .reveal:nth-child(3) { animation-delay: 240ms; }
.js main > :first-child .reveal:nth-child(4) { animation-delay: 320ms; }
.js main > :first-child .reveal:nth-child(n+5) { animation-delay: 400ms; }
@keyframes first-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }


/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .app-view { grid-template-columns: 11.25rem 1fr; }
  .pane-right { display: none; }
  .split { grid-template-columns: 1fr; }
  .split-copy { padding-bottom: 0; }
  .svc .feature { grid-template-columns: 1fr; }
  .svc .feature.is-flipped .feature-copy { order: 0; }
}
@media (max-width: 1080px) {
  .hero-art { width: 84vw; right: -30vw; opacity: 0.85; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .hero-x { min-height: 0; align-items: start; }
  .hero-x-copy { padding-top: 7.25rem; padding-bottom: 0; }
  .hero-art { order: 2; position: relative; top: auto; right: auto; translate: 0 0; width: 130%; margin: -8% -15% -6%; opacity: 1; }
  .hero-x-copy { order: 1; }
  .svc-view { grid-template-columns: 1fr; }
  .svc-layout { grid-template-columns: 1fr; }
  .subnav { position: sticky; top: 4.5rem; z-index: 50; }
  .subnav-inner { position: static; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding: 0.5rem var(--pad); background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: blur(0.875rem); backdrop-filter: blur(0.875rem); border-bottom: 1px solid var(--line); }
  .subnav a { white-space: nowrap; }
  .nf-grid { grid-template-columns: 1fr; }
  .nf-copy { justify-items: start; }
  .head-split > .reveal:last-child:has(.btn) { justify-self: start; }
  .feature, .head-split, .faq, .story, .contact { grid-template-columns: 1fr; }
  .feature.is-flipped .feature-copy { order: 0; }
  .grid-3, .plans, .work-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .header-link { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .app-body { height: 25rem; }
  .app-view { grid-template-columns: 1fr; }
  .pane-left { display: none; }
  .app-bar { grid-template-columns: auto 1fr; }
  .app-right { display: none; }
  .app-modes { justify-self: end; }
  .app-mode { padding: 0 0.625rem; font-size: 0.75rem; }
  .app-project span { display: none; }
  .canvas { padding: 0.75rem; }
  .grid-3, .grid-2, .grid-4, .plans, .row-2, .name-split, .svc-meta, .work-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .cms { grid-template-columns: 1fr; }
  .cms-list { display: none; }
  .report-kpis { grid-template-columns: 1fr 1fr 1fr; }
  .kpi b { font-size: 1.1rem; }
  .hub-node { font-size: 0.75rem; padding: 0.375rem 0.6875rem 0.375rem 0.375rem; }
  .hub-node .logo-chip { width: 1.375rem; height: 1.375rem; font-size: 0.6875rem; }
  .hub-core { width: 4rem; height: 4rem; }
  .hub-core .mark { width: 1.875rem; height: 1.875rem; }
  .brand-word { font-size: 1rem; }
}
/* ---------- Touch: every target at least 44 px (--h) ---------- */
/* Touch screens: hover effects would stick after a tap (iOS keeps :hover until the next tap elsewhere), so the
   moving ones are reset, and the large cards answer a press instead. */
@media (hover: none) {
  .work-card:hover .work-media img, .btn:hover > svg, .btn:hover .arrow, .link-arrow:hover .arrow { transform: none; }
  .work-card:hover .work-media .paper-demo { transform: translate(-50%, -50%) scale(var(--s, 0.6)); }
  .work-card, .ov-card { transition: transform 0.15s var(--ease); }
  .work-card:active, .ov-card:active { transform: scale(0.985); }
}

@media (pointer: coarse) {
  .tab, .header-actions .text-link, .btn-sm, .to-top, .news { min-height: var(--h); }
  .work-go { width: var(--h); height: var(--h); }
  .logo, .subnav a { min-height: var(--h); }
  .link-arrow { min-height: var(--h); }
  .footer-col a { padding: 0.625rem 0; }
  .footer-legal a, .legal-toc a { display: inline-flex; align-items: center; min-height: var(--h); }
  .faq-list summary { min-height: 3.5rem; }
  .app-mode { height: var(--h); }
}

/* ---------- Phones: one swipeable row of tabs, and shorter demos that never get cut off ---------- */
@media (max-width: 640px) {
  .footer-word { padding-top: 1.5rem; }
  .footer-top > :last-child { grid-column: 1 / -1; }   /* "Let's talk" takes the whole row, so no cell is left empty */
  .tablist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * clamp(1.125rem, 2.4vw, 2.25rem)); padding-inline: clamp(1.125rem, 2.4vw, 2.25rem); scroll-padding-inline: 1.125rem; }
  .tablist::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .svc-demo { padding: 1rem; }
  /* the demos fit a phone the same way on every page: on the home page's tabs and the services page's stages */
  :is(.svc-demo, .stage) .runx-steps .chips { display: none; }
  :is(.svc-demo, .stage) .cmsx-body { grid-template-columns: 1fr; }
  :is(.svc-demo, .stage) .cmsx-list { display: none; }
  .hubx .hub-node { font-size: 0.68rem; }
  .hubx .hub-node .logo-chip { width: 1.3rem; height: 1.3rem; }
  :is(.svc-demo, .stage) .roadmap > :nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js [data-words] .hw > span { transform: none !important; }
  .app-mode[aria-selected="true"] .prog { width: calc(100% - 1.75rem); }
  .tab[aria-selected="true"] .prog { width: 100%; }
  .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .tool-row { flex-wrap: wrap; justify-content: center; height: auto; padding: 1.25rem var(--pad); gap: 0.9rem 2rem; min-width: 0; }
  .tool-row[aria-hidden] { display: none; }
}

/* ---------- The material, applied ----------
   The grain is for surfaces large enough to read as a material: the panels that hold the work
   (the services panel, demo stages, the featured plan, the name cards). Controls and
   chrome stay flat, with only a soft sheen from above, so the texture never turns into noise at small
   sizes. The panels that matter most carry a lit edge, a thin blue line that glows like the ridge in
   the lens renders. */
.svc-view > *, .stage, .name-card { background: var(--material); }
.btn-secondary, .tab, .news, .header-actions .text-link, .to-top, .work-go { background: var(--ctl); }
.btn-secondary:hover, .tab:hover, .news:hover, .header-actions .text-link:hover, .to-top:hover { background: var(--ctl-hi); }
.tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(143, 176, 255, 0.16), rgba(143, 176, 255, 0.04)), #15171d; box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.25); }
.tab .swatch { background: none; }

/* the lit edge */
.svc-view, .plan.is-featured, .mega-promo, .lit { position: relative; }
.svc-view::after, .plan.is-featured::after, .mega-promo::after, .lit::after {
  content: ""; position: absolute; z-index: 3; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(143, 176, 255, 0.9) 35%, #fff 50%, rgba(143, 176, 255, 0.9) 65%, transparent);
  box-shadow: 0 0 0.5rem 0 rgba(47, 107, 255, 0.5); }
.stage, .svc-view { box-shadow: 0 0 0 1px var(--line); }

/* The featured plan and the name card were light; they are now the material, lit */
.plan.is-featured { background: var(--material); }
.plan.is-featured li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%238fb0ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan.is-featured .btn-light { background: var(--milk); color: var(--carbon); }


/* Page heroes carry one of the lens renders on the right */
.hero-page:has(.page-art) h1 { max-width: 10.5em; position: relative; z-index: 1; }
.hero-page:has(.page-art) .lead { max-width: 30em; }
/* the coin sits over the right rail: the rail cuts through the coin's right edge (about 6% of its width in),
   so it breaks the line. --cross is how far the image box reaches past the rail; the coin in each render
   stops short of the box edge (18% for the angled render, 12% for the front one). */
.page-art { --coin: min(46vw, 44rem); --cross: 0.24; position: absolute; z-index: -1; top: 50%; right: calc((100% - var(--frame)) / 2 - var(--coin) * var(--cross)); width: var(--coin); aspect-ratio: 1; translate: 0 -46%; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); }
.page-art img { width: 100%; height: 100%; object-fit: cover; }
.page-art:has(img[src*="lens-front"]) { --cross: 0.18; --coin: min(40vw, 36rem); }
@media (max-width: 900px) {
  .page-art { position: relative; top: auto; right: auto; translate: 0 0; width: min(78vw, 26.25rem); margin: -1rem auto -3rem; z-index: 0; }
  .hero:has(.page-art) { display: flex; flex-direction: column-reverse; }
}

/* ---------- Fewer items: three services, four principles, one work card ---------- */
.mega.is-three { width: 22rem; grid-template-columns: 1fr; grid-template-rows: none; }
.trust-line { font-size: 0.9rem; color: var(--ink-2); }
.included-title { font-size: var(--t-card); letter-spacing: -0.02em; }
.work-grid.is-rows { grid-template-columns: 1fr; }
.work-grid.is-rows .work-card { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
.work-grid.is-rows .work-media { aspect-ratio: 960 / 411; }
.work-grid.is-rows .work-card + .work-card { border-top: 1px solid var(--line); }
.work-grid.is-rows .work-meta { align-items: flex-start; }
.work-meta .work-desc { font-size: 0.97rem; color: var(--ink-2); margin-top: 0.5rem; max-width: 28rem; }
.work-meta .link-arrow { margin-top: 1rem; }
.svc-overview.is-jump { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc-overview.is-jump h3 { font-size: var(--t-small); padding-right: 1.5rem; }
.svc-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.svc-sub-item { display: grid; gap: 0.85rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(0rem, 2vw, 2rem) 0 0; }
.svc-sub-item + .svc-sub-item { padding-left: clamp(1.25rem, 2.5vw, 2.5rem); border-left: 1px solid var(--line); }
.svc-sub-item h3 { font-size: var(--t-card); letter-spacing: -0.02em; }
.svc-sub-item > p { color: var(--ink-2); }
.svc-sub-item .actions { margin-top: 0.4rem; }
.svc-meta:has(> div:only-child) { grid-template-columns: 1fr; }
.svc-principles { margin-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.svc-principles li { display: grid; gap: 0.4rem; align-content: start; padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1rem, 2vw, 1.75rem) 0 0; }
.svc-principles li + li { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--line); }
.svc-principles h3 { font-size: var(--t-small); letter-spacing: -0.015em; }
.svc-principles p { font-size: 0.94rem; color: var(--ink-2); }
.faq.is-list-only { grid-template-columns: minmax(0, 52rem); justify-content: center; }
.form-status span { display: block; }
@media (max-width: 1080px) {
  .svc-overview.is-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-overview.is-jump > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .work-grid.is-rows .work-card { grid-template-columns: 1fr; }
  .svc-sub, .svc-principles { grid-template-columns: 1fr; }
  /* stacked, the grid's own 1px gap is the rule between items; a margin here would show the grey behind the cells */
  .svc-sub-item + .svc-sub-item, .svc-principles li + li { padding-left: 0; border-left: 0; }
  .svc-sub-item, .svc-principles li { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
}

/* ---------- Fluted glass panels ----------
   A [data-flute] panel shows a CSS gradient of its colourway until flute.js has drawn the glass into
   its canvas, then fades the canvas in over it. */
[data-flute] { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(55% 65% at 80% 60%, var(--fl-1), transparent 70%), radial-gradient(50% 60% at 4% 0%, var(--fl-3), transparent 70%), var(--fl-bg); }
[data-flute="discovery"] { --fl-bg: #2f6bff; --fl-1: #9cbcff; --fl-3: #0b2c8f; }
[data-flute="design"] { --fl-bg: #3a56ff; --fl-1: #cbb8ff; --fl-3: #161c8c; }
[data-flute="build"] { --fl-bg: #1c5ef2; --fl-1: #6fdcf2; --fl-3: #062a78; }
[data-flute="launch"] { --fl-bg: #2f63ff; --fl-1: #ffb38f; --fl-3: #0b2c8f; }
.flute-cv { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s var(--ease); }
.is-fluted > .flute-cv { opacity: 1; }

/* ---------- How we work: the steps beside the animation ----------
   The list of steps on the left, the live animation on the right (assets/js/how-we-work.js). The step the
   animation is showing opens to its description and result, and its rule fills as it plays. The stage takes
   each step's own ground colour from the animation, so it needs no fill of its own beyond the first frame. */
.hww { display: grid; grid-template-columns: minmax(18rem, 0.82fr) 1.5fr; gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: center; }
.hww-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.hww-item { position: relative; box-shadow: inset 0 1px 0 var(--line); }
.hww-item:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.hww-head { margin: 0; font-size: inherit; }
.hww-step { display: flex; align-items: baseline; gap: 1rem; width: 100%; min-height: var(--h); padding: 1.125rem 0; text-align: left;
  color: var(--ink-3); font-size: var(--t-panel); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; transition: color var(--dur); }
.hww-no { flex: none; width: 1.5rem; font: 400 0.8125rem/1 var(--mono); letter-spacing: 0; transform: translateY(-0.4em); }
.hww-step:hover, .hww-item.is-on .hww-step { color: var(--ink); }
.hww-step:focus-visible { outline-offset: 0.25rem; border-radius: var(--r-sm); }
/* the open step's description slides open under it */
.hww-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.hww-panel > div { overflow: hidden; min-height: 0; padding-left: 2.5rem; visibility: hidden; transition: visibility 0s 0.55s; }
.hww-item.is-on .hww-panel { grid-template-rows: 1fr; }
.hww-item.is-on .hww-panel > div { visibility: visible; transition: none; }
.hww-panel p { max-width: 30rem; margin: 0 0 0.875rem; color: var(--ink-2); font-size: 1.0625rem; }
.hww-panel .hww-get { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; color: var(--ink); font-size: 0.95rem; font-weight: 500; }
.hww-get svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--accent-lite); }
/* the rule above the open step fills as the animation plays it */
.hww-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; pointer-events: none; }
.hww-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.hww-stage { position: relative; overflow: hidden; aspect-ratio: 1240 / 1080; border-radius: var(--r-xl); background: #2f6bff; box-shadow: inset 0 0 0 1px var(--edge); }
.hww-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hww-controls { position: absolute; right: clamp(0.75rem, 1.6vw, 1.25rem); bottom: clamp(0.75rem, 1.6vw, 1.25rem); display: flex; gap: 0.5rem; }
.hww-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: #fff;
  background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background var(--dur); }
.hww-btn:hover { background: rgba(0, 0, 0, 0.62); }
.hww-btn svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hww-btn[aria-pressed="true"] .when-off, .hww-btn[aria-pressed="false"] .when-on { display: none; }
.hww-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html:not(.js) .hww-controls { display: none; }

/* the windows each step produces */
.shot { font-size: 0.8125rem; }
.shot .card-ui-bar { padding-block: 0.75rem; }
.brief { display: grid; padding: 0.25rem 1.25rem; }
.brief > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.875rem 0; box-shadow: inset 0 -1px 0 var(--ui-line); }
.brief dt { color: var(--ui-dim); }
.brief dd { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tag { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.5rem; border-radius: var(--r-sm); background: var(--ui-3); font-size: 0.75rem; }
.tag svg { width: 0.8125rem; height: 0.8125rem; fill: var(--app); }
.shot-design .ds-canvas { position: relative; height: 100%; padding: 2.25rem 1.75rem; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.25px) 0 0 / 1.25rem 1.25rem, #1b1c21; }
.frame { position: relative; display: grid; gap: 1rem; width: min(100%, 34rem); padding: 1rem 1.125rem 1.25rem; background: #f4efe8; color: #2a2420; box-shadow: 0 0 0 1.5px var(--accent); }
.frame::before { content: "Home · 1440"; position: absolute; left: -1.5px; top: -1.375rem; font-size: 0.6875rem; color: var(--accent-lite); }
.fr-nav, .mw-nav { display: flex; align-items: center; gap: 0.375rem; }
.fr-nav b, .mw-nav b { margin-right: auto; font-size: 0.75rem; font-weight: 600; letter-spacing: -0.02em; }
.fr-nav i, .mw-nav i { width: 1.375rem; height: 0.25rem; border-radius: 1px; background: #cbbfb2; }
.fr-hero { display: grid; grid-template-columns: 1fr 9rem; gap: 1rem; align-items: center; }
.fr-h { display: block; font: 500 1.625rem/1.02 var(--font-display); letter-spacing: -0.045em; }
.fr-btn { display: inline-block; margin-top: 0.875rem; padding: 0.4rem 0.75rem; border-radius: 2rem; background: #2a2420; color: #f4efe8; font-size: 0.6875rem; }
.frame .th, .mw-page .th { width: 100%; border-radius: 2px; }
.fr-hero .th { height: 8.5rem; }
.fr-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.fr-row .th { height: 4.5rem; }
.pin { position: absolute; left: max(1.75rem, min(100% - 3.5rem, 34rem) - 18.875rem); top: 11.25rem; display: flex; gap: 0.5rem; align-items: flex-start; width: 13.5rem; padding: 0.625rem 0.75rem;
  border-radius: 0.75rem 0.75rem 0.75rem 0.125rem; background: #fff; color: #1e1e1e; font-size: 0.75rem; line-height: 1.35; box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45); }
.pin b { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #f24e1e; color: #fff; font-size: 0.5625rem; font-weight: 600; }
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: 0.75rem 0.5rem; box-shadow: inset 0 -1px 0 var(--ui-line); font-weight: 400; text-align: center; }
.matrix thead th { color: var(--ui-dim); font-size: 0.71875rem; }
.matrix tbody th { padding-left: 1.25rem; text-align: left; font-weight: 500; white-space: nowrap; }
.matrix td::before, .golive li::before { content: ""; display: inline-block; width: 1.0625rem; height: 1.0625rem; border-radius: 50%; vertical-align: middle; background: var(--ui-green) var(--tick) center / 0.65rem no-repeat; }
.matrix tr:nth-child(2) { --r: 1; } .matrix tr:nth-child(3) { --r: 2; } .matrix tr:nth-child(4) { --r: 3; } .matrix tr:nth-child(5) { --r: 4; }
.matrix td:nth-child(3) { --c: 1; } .matrix td:nth-child(4) { --c: 2; } .matrix td:nth-child(5) { --c: 3; } .matrix td:nth-child(6) { --c: 4; }
.process-slide:not([hidden]) .matrix td::before { animation: tick-in 0.45s var(--ease) both; animation-delay: calc(0.5s + var(--r, 0) * 0.16s + var(--c, 0) * 0.06s); }
.golive { display: grid; padding: 0.25rem 1.25rem; }
.golive li { display: grid; grid-template-columns: 1.0625rem 1fr; column-gap: 0.75rem; padding: 0.75rem 0; box-shadow: inset 0 -1px 0 var(--ui-line); font-weight: 500; }
.golive li::before { grid-row: span 2; margin-top: 0.0625rem; }
.golive small { grid-column: 2; color: var(--ui-dim); font-size: 0.75rem; font-weight: 400; }
.golive li:nth-child(2) { --r: 1; } .golive li:nth-child(3) { --r: 2; } .golive li:nth-child(4) { --r: 3; } .golive li:nth-child(5) { --r: 4; }
.process-slide:not([hidden]) .golive li::before { animation: tick-in 0.45s var(--ease) both; animation-delay: calc(0.5s + var(--r, 0) * 0.18s); }
.golive-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.golive-foot .btn { min-height: 2rem; padding: 0 1rem; font-size: 0.8125rem; }
.live-dot { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ui-dim); }
.live-dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0.25rem rgba(52, 211, 153, 0.18); }
@keyframes tick-in { from { opacity: 0; transform: scale(0.4); } }

/* ---------- Quality in the details: a feature grid ----------
   Mixed widths (wide, narrow / narrow, wide), each card a picture of the quality on the sample client's site
   above its words. The art sits on a dark plate lit from below in the card's tone. */
.details { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; padding-bottom: var(--section); }
.detail { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--material); box-shadow: inset 0 0 0 1px var(--line); }
.detail:nth-child(1), .detail:nth-child(4) { grid-column: span 3; }
.detail:nth-child(2), .detail:nth-child(3) { grid-column: span 2; }
.detail[data-tone="sky"] { --tone: var(--tone-sky); } .detail[data-tone="lilac"] { --tone: var(--tone-lilac); }
.detail[data-tone="aqua"] { --tone: var(--tone-aqua); } .detail[data-tone="peach"] { --tone: var(--tone-peach); }
.detail[data-tone="blue"] { --tone: var(--accent); }
.detail-art { position: relative; height: clamp(14rem, 19vw, 17rem); overflow: hidden; box-shadow: 0 1px 0 var(--line);
  background: radial-gradient(75% 85% at 50% 115%, color-mix(in oklab, var(--tone) 30%, transparent), transparent 70%), linear-gradient(180deg, #0c0c0f, #08080a); }
.detail-copy { display: grid; gap: 0.4rem; padding: clamp(1.25rem, 2vw, 1.625rem) clamp(1.25rem, 2vw, 1.75rem) clamp(1.375rem, 2.2vw, 1.875rem); }
.detail-copy h3 { font-size: var(--t-card); letter-spacing: -0.025em; }
.detail-copy p { color: var(--ink-2); max-width: 34rem; }

/* The cards below show our own site, tavordigital.com, in the interface demo theme: near black, raised greys,
   blue for selection and green only for success */
.detail { --dt-raised: #141416; --dt-line: rgba(255, 255, 255, 0.1); --dt-mute: #8a8a8a; }

/* a clear first impression: the first screen with nothing on top of it. Our pictures take turns, each settling
   in from a little close; one sentence, one way in, and a bar for each */
.fi { background: #000; }
.fi-slides > span { position: absolute; inset: 0; opacity: 0; animation: fi-slide 7.5s linear infinite paused; }
.fi-slides > span:nth-child(2) { animation-delay: 2.5s; }
.fi-slides > span:nth-child(3) { animation-delay: 5s; }
/* each picture stands at the right, full height, and fades into the black on its left */
.fi-pic { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; transform-origin: 70% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
  animation: fi-drift 7.5s linear infinite paused; animation-delay: inherit; }
.detail.is-in .fi-slides > span, .detail.is-in .fi-pic, .detail.is-in .fi-bars i::after { animation-play-state: running; }
@keyframes fi-slide { 0% { opacity: 0; } 6% { opacity: 1; } 33.3% { opacity: 1; } 39% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fi-drift { 0% { scale: 1.08; } 39% { scale: 1; } 100% { scale: 1; } }
.fi::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 55%); }
.fi-brand, .fi-copy, .fi-bars { position: absolute; z-index: 1; color: #f5f5f5; }
.fi-brand { left: clamp(1rem, 2vw, 1.5rem); top: clamp(0.875rem, 1.6vw, 1.25rem); display: flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.035em; }
.fi-brand span { font-weight: 400; color: var(--dt-mute); white-space: pre; }
.fi-brand .mark { width: 1.1rem; height: 1.1rem; }
.fi-bars { left: clamp(1rem, 2vw, 1.5rem); top: clamp(2.6rem, 4vw, 3.1rem); display: flex; gap: 0.3rem; }
.fi-bars i { position: relative; width: 1.5rem; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.3); }
.fi-bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; scale: 0 1; animation: fi-bar 7.5s linear infinite paused; }
.fi-bars i:nth-child(2)::after { animation-delay: 2.5s; }
.fi-bars i:nth-child(3)::after { animation-delay: 5s; }
@keyframes fi-bar { 0% { scale: 0 1; } 33.3% { scale: 1 1; } 33.4%, 100% { scale: 0 1; } }
.fi-copy { z-index: 2; left: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); display: grid; gap: 0.6rem; justify-items: start; }
.fi-copy p { max-width: 10ch; font: 500 clamp(1.375rem, 2.3vw, 2rem)/1.04 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.fi-copy span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 99px; background: #f5f5f5; color: #000; font-size: 0.75rem; font-weight: 500; }
.fi-copy span::after { content: "→"; }

/* a natural next step: booking a discovery call. A cursor (assets/js/details.js) picks Wednesday (its slot lights
   on the calendar and the day rolls into the button), adds the project's details (a note pops onto the calendar),
   and books; the button works, confirms, and the invite line appears under it */
.nx { background: radial-gradient(80% 90% at 25% 0%, rgba(47, 107, 255, 0.12), transparent 70%), #0a0a0b; color: #f5f5f5; }
.nx-stage { position: absolute; left: 5%; top: 0; bottom: 0; width: 44%; display: grid; place-items: center; }
.nx-cal { position: relative; width: 88%; display: grid; gap: 0.55rem; padding: 0.6rem; border-radius: 0.6rem; background: var(--dt-raised);
  box-shadow: inset 0 0 0 1px var(--dt-line), 0 22px 30px -14px rgba(0, 0, 0, 0.8); }
.nx-cal-head { display: flex; align-items: baseline; justify-content: space-between; }
.nx-cal-head b { font-size: 0.6875rem; font-weight: 500; letter-spacing: -0.02em; }
.nx-cal-head small { font-size: 0.5rem; color: var(--dt-mute); }
.nx-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.nx-days span { display: grid; justify-items: center; gap: 0.15rem; padding: 0.4rem 0 0.35rem; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.04); }
.nx-days small { font-size: 0.5rem; color: var(--dt-mute); }
.nx-days b { font-size: 0.875rem; font-weight: 500; letter-spacing: -0.03em; }
.nx-days i { margin-top: 0.2rem; padding: 0.22rem 0.4rem; border-radius: 99px; font: 500 0.5rem/1 var(--mono); font-style: normal; color: var(--dt-mute);
  box-shadow: inset 0 0 0 1px var(--dt-line); transition: background-color 220ms, color 220ms, box-shadow 220ms, scale 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nx[data-size="0"] .nx-days span:nth-child(1) i, .nx[data-size="1"] .nx-days span:nth-child(2) i, .nx[data-size="2"] .nx-days span:nth-child(3) i {
  background: #2f6bff; color: #fff; box-shadow: none; scale: 1.08; }
.nx-tag { position: absolute; right: -8%; bottom: -14%; padding: 0.4rem 0.55rem; border-radius: 0.3rem; background: #f5f5f5; color: #000; white-space: nowrap;
  font: 500 0.5625rem/1 var(--font); letter-spacing: -0.01em; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.6); rotate: -8deg; transform-origin: 20% 50%;
  opacity: 0; scale: 0.4; transition: opacity 160ms, scale 460ms cubic-bezier(0.34, 1.56, 0.64, 1), rotate 460ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nx-tag::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.3rem; border-radius: 1px; background: #2f6bff; }
.nx.has-card .nx-tag { opacity: 1; scale: 1; rotate: 4deg; }
.nx-info { position: absolute; left: 52%; right: 6%; top: 50%; translate: 0 -50%; display: grid; gap: 0.35rem; justify-items: start; }
.nx-kicker { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8fb0ff; }
.nx-title { font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.nx-sub { margin-top: -0.15rem; font-size: 0.625rem; color: var(--dt-mute); }
.nx-label { margin-top: 0.35rem; font-size: 0.5625rem; font-weight: 600; color: var(--dt-mute); }
.nx-sizes { display: flex; gap: 0.25rem; width: 100%; }
.nx-sizes span { flex: 1; padding: 0.35rem 0; border-radius: 99px; text-align: center; white-space: nowrap; font-size: 0.5625rem; font-weight: 500; background: var(--dt-raised); box-shadow: inset 0 0 0 1px var(--dt-line);
  transition: background-color 160ms, color 160ms, box-shadow 160ms, scale 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nx-sizes span.is-on { background: #2f6bff; color: #fff; box-shadow: none; }
.nx-card { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.15rem; font-size: 0.625rem; font-weight: 500; transition: scale 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nx-card i { position: relative; width: 1.5rem; height: 0.875rem; border-radius: 99px; background: #2c2c30; transition: background-color 220ms; }
.nx-card i::after { content: ""; position: absolute; left: 0.125rem; top: 0.125rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: translate 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nx-card.is-on i { background: #2f6bff; }
.nx-card.is-on i::after { translate: 0.625rem 0; }
.nx-cta { position: relative; display: grid; place-items: center; width: 100%; height: 1.85rem; margin-top: 0.35rem; border-radius: 99px; overflow: hidden;
  background: #f5f5f5; color: #000; font-size: 0.6875rem; font-weight: 500; transition: background-color 260ms, scale 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.nx-cta b { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.35rem; font-weight: inherit; transition: opacity 160ms, translate 320ms var(--ease); }
.nx-cta em { display: inline-block; font-style: normal; }
.nx-cta em.is-tick { animation: nx-tick 320ms var(--ease); }
@keyframes nx-tick { from { translate: 0 0.6em; opacity: 0; } }
.nx-cta .nx-cta-a { gap: 0; }
.nx-cta-b, .nx-cta-c { opacity: 0; translate: 0 0.9rem; }
.nx-cta-b i { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.2); border-top-color: #000; animation: nx-spin 0.7s linear infinite; }
.nx-cta-c::before { content: "✓"; }
.nx-cta.is-busy .nx-cta-a, .nx-cta.is-done .nx-cta-a { opacity: 0; translate: 0 -0.9rem; }
.nx-cta.is-busy .nx-cta-b { opacity: 1; translate: 0 0; }
.nx-cta.is-done { background: #34d399; }
.nx-cta.is-done .nx-cta-b { opacity: 0; translate: 0 -0.9rem; }
.nx-cta.is-done .nx-cta-c { opacity: 1; translate: 0 0; }
.nx .is-press { scale: 0.93; transition-duration: 90ms; }
@keyframes nx-spin { to { rotate: 1turn; } }
.nx-status { font-size: 0.5625rem; color: var(--dt-mute); opacity: 0; translate: 0 -0.3rem; transition: opacity 240ms, translate 420ms var(--ease); }
.nx-status::before { content: "✓ "; color: #34d399; font-weight: 700; }
.nx.is-sent .nx-status { opacity: 1; translate: 0 0; }
/* the cursor, and the ring it leaves where it clicks */
.da-cursor { position: absolute; z-index: 2; left: 0; top: 0; width: 1.125rem; height: 1.125rem; fill: #fff; stroke: #0b0b0e; stroke-width: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); transition: translate 620ms cubic-bezier(0.65, 0, 0.25, 1), scale 160ms; }
.da-cursor.is-press { scale: 0.85; }
.da-ripple { position: absolute; z-index: 2; left: 0; top: 0; width: 1.6rem; height: 1.6rem; margin: -0.8rem 0 0 -0.8rem; border-radius: 50%; border: 2px solid #2f6bff; opacity: 0; pointer-events: none; }
.da-ripple.is-on { animation: da-ripple 520ms var(--ease); }
@keyframes da-ripple { from { opacity: 1; scale: 0.3; } to { opacity: 0; scale: 1.6; } }
@media (prefers-reduced-motion: reduce) {
  .fi-slides > span, .fi-pic { animation: none; } .fi-slides > span:first-child { opacity: 1; } .fi-bars i:first-child::after { animation: none; scale: 1 1; }
}

/* thoughtful on mobile: our site on a phone, in front of its desktop version */
.da-desk { position: absolute; left: 40%; right: -8%; top: 2.25rem; bottom: -2rem; font-size: 0.75rem; filter: brightness(0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.da-desk .card-ui-bar { padding: 0.5rem 0.75rem; }
.da-desk .card-ui-bar .dots i { width: 0.5rem; height: 0.5rem; }
/* the phone is an iPhone 16 Pro to scale (71.5 x 149.6 mm; 393 x 852 pt screen): a black titanium frame, a thin
   black border round the screen, the side buttons, the Dynamic Island and the status bar. It stands in the card
   with its foot cut off by the card's edge. */
.da-phone { --frame: #3a3a3e; position: absolute; z-index: 1; left: 14%; top: 1rem; width: 8.75rem; aspect-ratio: 71.5 / 149.6; padding: 0.26rem;
  border-radius: 1.55rem; background: #050506;
  box-shadow: inset 0 0 0 0.11rem var(--frame), inset 0 0 0 calc(0.11rem + 1px) rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2rem 3rem -0.5rem rgba(0, 0, 0, 0.7); }
/* the side buttons: the Action button and the two volume buttons on the left, the side button on the right */
.da-phone::before, .da-phone::after { content: ""; position: absolute; width: 0.14rem; border-radius: 1px; }
.da-phone::before { left: -0.12rem; top: 17%; height: 25%;
  background: linear-gradient(var(--frame) 0 15%, transparent 15% 29%, var(--frame) 29% 61%, transparent 61% 68%, var(--frame) 68% 100%); }
.da-phone::after { right: -0.12rem; top: 28%; height: 13%; background: var(--frame); }
.da-screen { position: relative; height: 100%; display: grid; align-content: start; gap: 0.5rem; padding: 0 0.5rem; overflow: hidden;
  border-radius: 1.29rem; background: #000; color: #f5f5f5; }
.da-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 1.15rem; padding: 0.1rem 0.45rem 0 0.55rem; }
.da-status b { font: 600 0.4rem/1 var(--font); letter-spacing: -0.01em; }
.da-status svg { width: 1.05rem; height: auto; fill: currentColor; }
.da-island { position: absolute; left: 50%; top: 0.24rem; width: 32%; height: 0.62rem; translate: -50% 0; border-radius: 99px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
/* on the desktop behind: the services; on the phone: the home page, its first screen and two services */
.mo-page { height: 100%; padding: 0.7rem 0.8rem; background: #000; color: #f5f5f5; }
.mo-page p { margin-bottom: 0.55rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.025em; }
.mo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.mo-grid span, .mo-row span { padding: 0.3rem; border-radius: 0.4rem; background: var(--dt-raised); box-shadow: inset 0 0 0 1px var(--dt-line); }
.mo-ico { display: grid; place-items: center; aspect-ratio: 1.6; border-radius: 0.25rem; background: radial-gradient(70% 90% at 50% 120%, rgba(47, 107, 255, 0.35), transparent 70%), #0a0a0b;
  color: rgba(245, 245, 245, 0.75); }
.mo-ico svg { width: 30%; height: auto; }
.mo-grid b, .mo-row b { display: block; margin-top: 0.3rem; font-size: 0.5rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-grid small, .mo-row small { display: block; font-size: 0.4375rem; color: var(--dt-mute); }
.da-screen.mo { gap: 0.45rem; padding: 0 0.45rem; }
.mo-nav { display: flex; align-items: center; justify-content: space-between; padding: 0.1rem 0.15rem 0; }
.mo-nav b { display: flex; align-items: center; gap: 0.2rem; font-size: 0.625rem; font-weight: 500; letter-spacing: -0.035em; }
.mo-nav .mark { width: 0.75rem; height: 0.75rem; }
.mo-nav i { width: 0.75rem; height: 0.375rem; border-block: 1.5px solid #f5f5f5; }
.mo-hero { position: relative; height: 6.5rem; overflow: hidden; border-radius: 0.5rem; background: #000; }
.mo-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.mo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent 60%); }
.mo-hero p { position: absolute; z-index: 1; left: 0.45rem; right: 0.45rem; bottom: 0.45rem; color: #fff; font: 500 0.75rem/1.05 var(--font-display); letter-spacing: -0.03em; }
.mo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.mo-row span { padding: 0.25rem; border-radius: 0.35rem; }
.mo-row .mo-ico { aspect-ratio: auto; height: 2.75rem; border-radius: 0.2rem; }

/* solid foundations: four checks that fill and tick */
.da-gauges { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.75rem); }
.da-gauge { display: grid; justify-items: center; gap: 0.625rem; }
.da-gauge svg { width: clamp(3.5rem, 5vw, 4.5rem); height: auto; overflow: visible; }
.da-gauge circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3; }
.da-gauge .on { stroke: var(--tone); stroke-linecap: round; stroke-dasharray: 113.1; transform: rotate(-90deg); transform-origin: center; }
.da-gauge .tick { fill: none; stroke: var(--tone); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; }
.da-gauge small { font-size: 0.75rem; color: var(--ink-2); }
.detail.is-in .da-gauge .on { animation: gauge-fill 1.4s var(--ease) both; animation-delay: calc(0.3s + var(--n) * 0.15s); }
.detail.is-in .da-gauge .tick { animation: gauge-tick 0.5s var(--ease) both; animation-delay: calc(1.1s + var(--n) * 0.15s); }
@keyframes gauge-fill { from { stroke-dashoffset: 113.1; } }
@keyframes gauge-tick { from { stroke-dashoffset: 18; } }
/* Built to load fast: two browser windows race. The slow one crawls (a creeping bar, a spinner, the page arriving
   piece by piece); ours fills its bar and shows the whole page at once. A plain line underneath names the test. The
   default styles are the finished race, so with reduced motion (or before the card is seen) it simply reads as the
   result; on view it replays every 7 s. The slow site is an illustration, not a measured competitor. */
.da-race { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 0.75rem; padding: clamp(1rem, 1.8vw, 1.375rem) clamp(1.125rem, 2.4vw, 2rem); }
.rc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.5rem); align-items: end; }
.rc { display: grid; gap: 0.5rem; margin: 0; min-width: 0; }
.rc-win { position: relative; height: clamp(6.5rem, 9.5vw, 7.75rem); border-radius: 0.5rem; overflow: hidden; background: #0d0e12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.rc-top { display: flex; align-items: center; gap: 0.3rem; height: 1.125rem; padding: 0 0.5rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); }
.rc-top::before { content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.25); box-shadow: 0.4rem 0 rgba(255, 255, 255, 0.25), 0.8rem 0 rgba(255, 255, 255, 0.25); margin-right: 0.85rem; }
.rc-top span { font: 400 0.5rem/1 var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-bar { position: absolute; top: 1.125rem; left: 0; right: 0; height: 2px; transform-origin: left; background: rgba(255, 255, 255, 0.45); }
.rc.is-fast .rc-bar { background: var(--accent); }
/* the page both windows load: a small florist's homepage, nav, hero with its picture, and a row of products */
.rc-page { position: absolute; inset: 1.125rem 0 0; display: grid; grid-template-rows: auto 1fr auto; gap: 0.3rem; padding: 0.375rem 0.5rem 0.45rem; }
.rp-nav { display: flex; align-items: center; gap: 0.4rem; font: 400 0.3125rem/1 var(--font); color: var(--ink-2); }
.rp-nav b { margin-right: auto; font: 600 0.4375rem/1 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.rp-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.4rem; align-items: center; min-height: 0; }
.rp-copy b { display: block; font: 600 0.5625rem/1.02 var(--font-display); letter-spacing: -0.025em; color: #fff; }
.rp-copy span { display: block; margin-top: 0.2rem; font: 400 0.3125rem/1.25 var(--font); color: var(--ink-2); }
.rp-copy em { display: inline-block; margin-top: 0.3rem; padding: 0.14rem 0.35rem; border-radius: 99px; background: var(--accent); font: normal 600 0.3125rem/1 var(--font); color: #fff; }
.rp-pic { align-self: stretch; border-radius: 0.25rem; background: url("../img/demo/bouquet.svg") 50% 40% / cover no-repeat, #ffe9dc; }
.rp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
.rp-row i { height: 1.375rem; border-radius: 0.2rem; background: 50% 40% / cover no-repeat #f6efe4; }
.rp-row [data-f="tulips"] { background-image: url("../img/demo/tulips.svg"); background-color: #fff1c9; }
.rp-row [data-f="peonies"] { background-image: url("../img/demo/peonies.svg"); background-color: #ffe3ea; }
.rp-row [data-f="daisies"] { background-image: url("../img/demo/daisies.svg"); background-color: #eef4e4; }
.rc-spin { position: absolute; left: 50%; top: 58%; width: 0.875rem; height: 0.875rem; margin: -0.4375rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.15); border-top-color: rgba(255, 255, 255, 0.7); opacity: 0; }
.rc figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-2); }
.rc figcaption b { position: relative; font: 500 0.8125rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rc.is-fast figcaption b { color: var(--accent-lite); }
.rc-wait { position: absolute; right: 0; opacity: 0; color: var(--ink-2); font-weight: 400; }
.rc figcaption .rc-wait { font: 400 0.75rem/1 var(--font); color: var(--ink-2); }
.rc-note { margin: 0; text-align: center; font: 400 0.625rem/1.4 var(--mono); color: var(--ink-2); }
.rc-note b { color: var(--ink); font-weight: 500; }

/* the race, 7 s a lap: ours is done by 0.7 s, the slow one by about 4.2 s */
.detail.is-in .rc.is-fast .rc-bar { animation: rc-bar-fast 7s linear infinite; }
.detail.is-in .rc.is-slow .rc-bar { animation: rc-bar-slow 7s linear infinite; }
.detail.is-in .rc.is-fast :is(.rp-nav, .rp-copy, .rp-pic, .rp-row) { animation: rc-show-fast 7s linear infinite; }
/* the slow page arrives in the order a slow site does: the nav, then the words, then the big picture, the products last */
.detail.is-in .rc.is-slow .rp-nav { animation: rc-show-s1 7s linear infinite; }
.detail.is-in .rc.is-slow .rp-copy { animation: rc-show-s2 7s linear infinite; }
.detail.is-in .rc.is-slow .rp-pic { animation: rc-show-s3 7s linear infinite; }
.detail.is-in .rc.is-slow .rp-row { animation: rc-show-s4 7s linear infinite; }
.detail.is-in .rc.is-slow .rc-spin { animation: rc-spin-on 7s linear infinite, rc-turn 0.8s linear infinite; }
.detail.is-in .rc.is-fast .rc-done { animation: rc-done-fast 7s linear infinite; }
.detail.is-in .rc.is-fast .rc-wait { animation: rc-wait-fast 7s linear infinite; }
.detail.is-in .rc.is-slow .rc-done { animation: rc-done-slow 7s linear infinite; }
.detail.is-in .rc.is-slow .rc-wait { animation: rc-wait-slow 7s linear infinite; }
@keyframes rc-bar-fast { 0%, 2% { transform: scaleX(0); } 10% { transform: scaleX(1); opacity: 1; } 13%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes rc-bar-slow { 0%, 2% { transform: scaleX(0); } 22% { transform: scaleX(0.35); } 40% { transform: scaleX(0.6); } 52% { transform: scaleX(0.82); } 60% { transform: scaleX(1); opacity: 1; } 63%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes rc-show-fast { 0%, 8% { opacity: 0; } 10%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-show-s1 { 0%, 14% { opacity: 0; } 17%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-show-s2 { 0%, 28% { opacity: 0; } 31%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-show-s3 { 0%, 43% { opacity: 0; } 47%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-show-s4 { 0%, 57% { opacity: 0; } 60%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rc-spin-on { 0%, 2% { opacity: 0; } 4%, 56% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes rc-turn { to { transform: rotate(360deg); } }
@keyframes rc-done-fast { 0%, 9% { opacity: 0; transform: translateY(0.2rem); } 11%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes rc-wait-fast { 0%, 9% { opacity: 1; } 11%, 100% { opacity: 0; } }
@keyframes rc-done-slow { 0%, 59% { opacity: 0; transform: translateY(0.2rem); } 61%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes rc-wait-slow { 0%, 2% { opacity: 0; } 3%, 59% { opacity: 1; } 61%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .detail.is-in .rc * { animation: none !important; } }

@media (max-width: 1080px) {
  .details { grid-template-columns: 1fr 1fr; }
  .detail:nth-child(n) { grid-column: span 1; }
  .detail:nth-child(1), .detail:nth-child(4) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .details { grid-template-columns: 1fr; }
  .da-gauges { gap: 0.875rem; }
  .da-gauge small { font-size: 0.6875rem; }
  .rc figcaption { font-size: 0.6875rem; }
  .rc-note { font-size: 0.5625rem; }
}

.mw-page { display: grid; gap: 0.625rem; height: 100%; padding: 0.75rem 0.875rem; background: #f4efe8; color: #2a2420; }
.mw-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.mw-row .th { height: 3rem; }
@media (max-width: 900px) {
  /* phones and narrow tablets: the animation on top, the steps under it */
  .hww { grid-template-columns: 1fr; gap: 1.5rem; }
  .hww-stage { order: -1; aspect-ratio: 1 / 1; border-radius: var(--r-lg); }
  .hww-step { padding: 0.875rem 0; }
  .shot-design .pin { display: none; }
}
@media (max-width: 640px) {
  .brief > div { grid-template-columns: 5.5rem 1fr; }
  .matrix th:nth-child(n + 5), .matrix td:nth-child(n + 5) { display: none; }
}

/* Book a call: the Google Calendar booking page, embedded on a light card */
.booking { padding-block: clamp(1.5rem, 4vw, 3rem) var(--section); }
.booking-frame { border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
/* The card is tall enough for everything Google shows, so the frame never scrolls on its own (scrolling="no"):
   the week view is about 650px and the contact form it opens about 870px. On a phone the calendar and the
   times stack and grow about 35px per open time; 1460px holds a day with eight. */
.booking-frame iframe { display: block; width: 100%; height: 880px; overflow: hidden; }
@media (max-width: 640px) { .booking-frame iframe { height: 1460px; } }