/* ELEVA website — v3 (2026-10-12).
   White reading ground, deep navy fields, one blue accent. The work carries the page:
   full-bleed bands of real concept renders, a CSS iPhone frame, browser frames, and an
   audit demonstration on a navy workbench. Inter (variable, optical sizes) throughout;
   JetBrains Mono only for file names. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/inter-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); }
/* The concepts' own display faces (OFL), used only to name each concept beside its work.
   They load only on pages that set a concept name. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/mostres/restauracio/web/fonts/newsreader-200-800.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/mostres/fisioterapia/web/fonts/albert-sans-300-800.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/mostres/assessoria/web/fonts/spectral-600.woff2") format("woff2"); }

/* Appearance. Light by default, or dark when the visitor picks it (html[data-theme], set
   before the first paint; the system's setting is not followed). Reading surfaces, text, lines, links,
   focus and selection change with it; the work keeps its own colours in both: concept
   grounds, the navy stages, documents, browser windows and phones declare
   `color-scheme: light`, so every token inside them resolves to its light value. */
:root { color-scheme: light; }
/* A colour resolved once, for the page's appearance, and inherited as it is: the navy
   stages and the footer keep their light-scheme colours but still get an edge on the
   dark page. */
@property --edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
:root { --edge: light-dark(transparent, rgba(255, 255, 255, 0.09)); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root {
  --bg: light-dark(#ffffff, #0f1217);
  --surface: light-dark(#ffffff, #171b22);
  --on-ink: light-dark(#ffffff, #0d1016);
  --ink: light-dark(#0a0f1c, #f2f3f5);
  --ink-2: light-dark(#1c2438, #d9dce2);
  --night: #0d1529;
  --night-raised: #1e2a47;
  --night-deep: #080d1a;
  --text: light-dark(#161d2e, #d9dce2);
  --muted: light-dark(#4b5468, #a5abb5);
  --faint: light-dark(#626b81, #8f96a1);
  --white: #ffffff;
  --mist: light-dark(#f3f5f9, #151920);
  --mist-2: light-dark(#e8ecf3, #20252e);
  --line: light-dark(rgba(10, 15, 28, 0.1), rgba(255, 255, 255, 0.1));
  --line-2: light-dark(rgba(10, 15, 28, 0.17), rgba(255, 255, 255, 0.19));
  --blue: light-dark(#2f5bea, #8fa9ff);
  --blue-2: light-dark(#2449c9, #b3c4ff);
  --blue-soft: light-dark(#ebf0fe, #1c233a);
  --select: light-dark(#cddafd, #2c3f86);
  --chip: light-dark(#ffffff, #2a2f39);
  --select-night: #2e4596;
  /* Status colours: light inside the documents (their light scheme), deep tints on the dark page. */
  --ok-tint: light-dark(#e3f2ea, #15291f);
  --ok-ink: light-dark(#17663f, #86d7ab);
  --amber-tint: light-dark(#f6ecd9, #2c2416);
  --amber-ink: light-dark(#7a4f0c, #e8c47f);
  --note-tint: #fff8ec;
  --note-ink: #5b4310;
  --on-night: #eef1f8;
  --on-night-2: #aab4ca;
  --line-night: rgba(238, 241, 248, 0.14);
  --blue-night: #93acff;
  --ok: #1e7f55;
  --warn: #a86a12;
  --stop: #b23a30;
  /* Concept grounds: each concept's own colours, used only around its own work. */
  --rest-bg: #e9e2d5;
  --rest-paper: #f3efe7;
  --rest-ink: #24211d;
  --rest-soft: #5f5850;
  --rest-acc: #5a6136;
  --fisio-bg: #c5ddd1;
  --fisio-paper: #eef4f0;
  --fisio-ink: #12312c;
  --asse-bg: #e2e7e1;
  --asse-paper: #f0f2ef;
  --asse-ink: #123f35;

  /* The Com treballem opening panel and its quieter third phrase. */
  --eleva-panel: light-dark(#edf0f5, #1a1f27);
  --eleva-panel-edge: light-dark(transparent, rgba(255, 255, 255, 0.07));
  --eleva-soft: light-dark(#626b81, #aab4ca);

  /* Selected tabs and expanded toggles: ink on the light page, a raised slate on the dark one. */
  --tab-on-bg: light-dark(#0a0f1c, #2a303a);
  --tab-on-ink: light-dark(#ffffff, #f2f3f5);
  --tab-on-ring: light-dark(transparent, rgba(255, 255, 255, 0.14));

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;

  --sh-1: 0 1px 2px rgba(10, 15, 28, 0.05), 0 6px 16px -8px rgba(10, 15, 28, 0.12);
  --sh-2: 0 2px 4px rgba(10, 15, 28, 0.04), 0 28px 56px -24px rgba(10, 15, 28, 0.3);
  --sh-night: 0 2px 6px rgba(0, 0, 0, 0.22), 0 44px 80px -36px rgba(0, 0, 0, 0.7);
  --sh-phone: 0 2px 4px rgba(10, 15, 28, 0.1), 0 34px 64px -26px rgba(10, 15, 28, 0.45);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: 20px;
  --sec: 88px;
  --header-h: 64px;
  --hero-pad: 28px;
  --mega: clamp(2.6rem, 1.15rem + 5.6vw, 6rem);
}
/* Presentation around the work, switched with the appearance: the browser chrome, the
   frame lines around documents and crops, and the ground behind each concept's work (its
   own colour on the light page; a deep tone of it on the dark one, so the concept's light
   page reads as a framed preview). Plain colours, so they hold inside the work's
   light-scheme containers too. */
:root {
  --chrome: #e6e9ef; --chrome-bar: #f3f5f9; --chrome-ink: #4b5468; --chrome-ink-on: #0a0f1c; --chrome-dot: rgba(10, 15, 28, 0.16); --chrome-pill: #ffffff; --chrome-line: rgba(10, 15, 28, 0.07); --chrome-hover: rgba(255, 255, 255, 0.55); --chrome-btn: rgba(10, 15, 28, 0.06); --chrome-btn-hover: rgba(10, 15, 28, 0.11);
  --seg-on: #ffffff; --seg-shadow: 0 1px 2px rgba(10, 15, 28, 0.1);
  --frame-line: rgba(10, 15, 28, 0.1);
  --doc-tray: transparent; --doc-tray-pad: 0px;
  --glow: radial-gradient(60% 70% at 18% 0%, rgba(68, 98, 196, 0.24), transparent 64%);
  --rest-ground: #e9e2d5; --rest-ground-hero: #ece6da; --rest-ground-paper: #fbf9f5; --rest-ground-ink: #24211d; --rest-ground-soft: #5f5850; --rest-ground-line: rgba(36, 33, 29, 0.16); --rest-ground-on: #f3efe7;
  --fisio-ground: #c5ddd1; --fisio-ground-paper: #eef4f0; --fisio-ground-ink: #12312c; --fisio-ground-soft: #3f5a54; --fisio-ground-hero-soft: #36504a; --fisio-ground-line: rgba(18, 49, 44, 0.18); --fisio-ground-ring: rgba(18, 49, 44, 0.3); --fisio-ground-on: #ffffff;
  --asse-ground: #e2e7e1; --asse-ground-paper: #ffffff; --asse-ground-ink: #123f35; --asse-ground-text: #1c1f1d; --asse-ground-soft: #4a524d; --asse-ground-line: rgba(28, 31, 29, 0.16); --asse-ground-on: #ffffff;
}
:root[data-theme="dark"] {
  --chrome: #1c2028; --chrome-bar: #1c2028; --chrome-ink: #a9afb9; --chrome-ink-on: #f2f3f5; --chrome-dot: rgba(255, 255, 255, 0.2); --chrome-pill: #2a2f38; --chrome-line: rgba(255, 255, 255, 0.06); --chrome-hover: rgba(255, 255, 255, 0.03); --chrome-btn: rgba(255, 255, 255, 0.08); --chrome-btn-hover: rgba(255, 255, 255, 0.14);
  /* The selected tab of the home browser: a raised slate with a blue line along its top (on the
     light page it joins the concept's own paper instead, so these stay unset there). */
  --chrome-tab: #323844; --chrome-tab-ink: #f2f3f5; --chrome-tab-mark: var(--blue);
  --seg-on: rgba(255, 255, 255, 0.14); --seg-shadow: none;
  --frame-line: rgba(255, 255, 255, 0.12);
  --doc-tray: #0d1529; --doc-tray-pad: clamp(14px, 2.2vw, 26px);
  --glow: none;
  --rest-ground: #1e1b17; --rest-ground-hero: #1e1b17; --rest-ground-paper: #1e1b17; --rest-ground-ink: #efe9df; --rest-ground-soft: #b9b0a2; --rest-ground-line: rgba(239, 233, 223, 0.16); --rest-ground-on: #1e1b17;
  --fisio-ground: #0f1c19; --fisio-ground-paper: #0f1c19; --fisio-ground-ink: #e2eee8; --fisio-ground-soft: #a7bfb6; --fisio-ground-hero-soft: #a7bfb6; --fisio-ground-line: rgba(226, 238, 232, 0.16); --fisio-ground-ring: rgba(226, 238, 232, 0.3); --fisio-ground-on: #0f1c19;
  --asse-ground: #141a17; --asse-ground-paper: #141a17; --asse-ground-ink: #e2eae5; --asse-ground-text: #e2eae5; --asse-ground-soft: #a9b5ad; --asse-ground-line: rgba(226, 234, 229, 0.16); --asse-ground-on: #141a17;
}
@media (min-width: 700px) { :root { --gutter: 32px; --sec: 100px; --hero-pad: 44px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; --sec: 120px; --header-h: 68px; --hero-pad: 56px; } }

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 450; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--select); color: var(--ink); }
/* The work keeps its own colours in both appearances. */
.qa-band, .workbench, .night, .site-footer, .intro, .browser, .iphone, .paper, .doc-page, .kit-plate, .care-art, .path-art--pair, .path-art--draft, .path-art--guide, .scroll-frame, .audit-card, .invite, .disc, .spread, .feature-media, .preview-site { color-scheme: light; }
/* The bands around a concept's work (the home stage, the Webs studies, the Mostres panels,
   a concept page's opening and its phones) are ELEVA's presentation: they follow the
   appearance through the --*-ground colours, while the concept's page inside stays light. */
.stage, .cpanel, .phones { box-shadow: inset 0 0 0 1px var(--edge); }
.night ::selection, .site-footer ::selection, .duo-half--ia ::selection, .workbench ::selection { background: var(--select-night); color: #fff; }
.nw { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-size: 0.875em; letter-spacing: 0; }
html { scrollbar-color: light-dark(#c3c9d6, #3b4458) transparent; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 999px; font-weight: 500; text-decoration: none; transition: top 160ms var(--ease-out); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(1280px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: calc(1440px + 2 * var(--gutter)); }
.wrap--narrow { max-width: calc(720px + 2 * var(--gutter)); }
.section { padding-block: var(--sec); }
.section--top0 { padding-top: 0; }
.section--mist { background: var(--mist); }
.night { background: var(--night); color: var(--on-night); }
.night h1, .night h2, .night h3, .night h4 { color: #fff; }

/* Type ------------------------------------------------------------------ */
/* From 32px Inter switches to its display cut (font-optical-sizing), which is already drawn
   tighter. Since 2026-10-15 (v10) the large headings are lighter and more open: statements at
   400 with −0.02em and 1.04–1.06 leading (were 450, −0.032em, 1.01), section headings at 430
   with −0.012em (were 450, −0.018em), and every size a step smaller. Body text, navigation and
   buttons are unchanged. */
.mega { font-size: var(--mega); line-height: 1.05; letter-spacing: -0.02em; font-weight: 400; color: var(--ink); text-wrap: balance; }
.mega .ln { display: block; }
.mega-2 { color: var(--blue); }
.mega--s { font-size: clamp(2.25rem, 1.2rem + 3.3vw, 4rem); }
.page-title { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.875rem); line-height: 1.08; letter-spacing: -0.018em; font-weight: 400; color: var(--ink); text-wrap: balance; max-width: 18em; }
.page-intro .mega--s { max-width: none; }
.display { font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; font-weight: 400; }
.h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.016em; font-weight: 420; }
.h2 { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem); line-height: 1.14; letter-spacing: -0.012em; font-weight: 430; }
.h2--s { font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2rem); line-height: 1.16; }
.h3 { font-size: clamp(1.25rem, 1.14rem + 0.4vw, 1.5rem); line-height: 1.3; letter-spacing: -0.006em; font-weight: 500; }
.h4 { font-size: 1.0625rem; line-height: 1.4; font-weight: 550; letter-spacing: -0.005em; }
.lead { font-size: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem); line-height: 1.52; color: var(--muted); }
.night .lead { color: var(--on-night-2); }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; line-height: 1.55; }
.fine { font-size: 0.8125rem; line-height: 1.5; color: var(--faint); }
.night .fine, .night .muted { color: var(--on-night-2); }
strong, b { font-weight: 600; }
.display em, .h1 em, .h2 em { font-style: normal; color: var(--muted); }
.night .h2 em, .night .h1 em { color: var(--on-night-2); }

/* Buttons and links ------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font-size: 0.96875rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform 220ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-white { background: #fff; color: #0a0f1c; }
.btn-line-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(238, 241, 248, 0.32); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); text-decoration: none; }
.link-arrow span { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.3em; transition: text-decoration-color 160ms ease; }
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform 220ms var(--ease-out); }
.night .link-arrow, .site-footer .link-arrow { color: #fff; }
.night .link-arrow span { text-decoration-color: rgba(238, 241, 248, 0.3); }

.label { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 4px 11px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.label--night { background: rgba(238, 241, 248, 0.08); color: var(--on-night); box-shadow: inset 0 0 0 1px rgba(238, 241, 248, 0.16); }
.label--night::before { background: var(--blue-night); }

/* A quiet line that says what a concept or demonstration is, once, near the work. */
.disclosure { display: flex; gap: 10px; align-items: baseline; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.disclosure::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); transform: translateY(-1px); }
.night .disclosure, .workbench .disclosure { color: var(--on-night-2); }
.night .disclosure::before { background: var(--blue-night); }

@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { background: var(--ink-2); }
  .btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .btn-white:hover { background: var(--mist-2); }
  .btn-line-light:hover { box-shadow: inset 0 0 0 1px #fff; }
  .btn:hover svg { transform: translateX(2px); }
  .link-arrow:hover span { text-decoration-color: currentColor; }
  .link-arrow:hover svg { transform: translateX(3px); }
}

/* Header and navigation -------------------------------------------------- */
/* A 1px hairline under the header from the first paint (v17; it used to appear only on scroll), in
   the shared --line: a light neutral grey on white, a line slightly lighter than the page in dark. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-row { position: relative; display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; padding: 6px 0; border-radius: 6px; }
.brand img, .brand .logo { height: 24px; width: auto; }
.site-header .brand { color: var(--ink); }
.site-footer .brand, .intro-head { color: #fff; }
.nav { display: none; }
/* The call to action sits in a slot as wide as the language's longest label («Parlem del teu
   projecte», «Hablemos de tu proyecto», «Tell us about your project»), right-aligned, so the
   language and appearance controls stay in the same place on every page, «Escriu-nos» on
   Contacte included. A longer label only widens the slot; it is never cut. */
.header-cta-slot { display: none; justify-content: flex-end; flex: none; }
.header-cta-slot:lang(ca) { min-width: 12.5rem; }
.header-cta-slot:lang(es), .header-cta-slot:lang(en) { min-width: 13.5rem; }
.menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 0.9375rem; font-weight: 500; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.menu-icon { position: relative; width: 16px; height: 10px; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 220ms var(--ease-out), top 220ms var(--ease-out); }
.menu-icon::before { top: 0; }
.menu-icon::after { top: 8.4px; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 4.2px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 4.2px; transform: rotate(-45deg); }

/* From 1000px the header is three groups on one centre line: the brand; the navigation, centred in
   the space between the brand and the controls so the gaps on either side are equal (v14; it sat
   next to the brand with up to 290px empty before the controls); and the language, appearance and
   contact controls, 12px apart. */
@media (min-width: 1000px) {
  .nav { display: flex; justify-content: center; flex: 1 1 auto; position: relative; margin-inline: 24px; }
  .header-cta-slot { display: flex; }
  .menu-toggle { display: none; }
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 0.9375rem; font-weight: 450; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.nav-link[aria-current="page"], .nav-link[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; text-decoration-color: var(--blue); }
/* A service: the link and its separate panel toggle share one rounded group. */
.nav-item.has-panel { position: relative; display: flex; align-items: center; border-radius: 999px; transition: background-color 160ms ease; }
.nav-link--service { padding-right: 4px; }
.nav-link { white-space: nowrap; }
/* Between 1000 and 1199px the longer Spanish and English labels share the row with the
   language switch: a little less air between the items, never a broken label. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav { margin-inline: 14px !important; }
  .nav-link { padding: 0 9px; }
  .nav-link--service { padding-right: 2px; }
  .header-tools .lang-switch a { min-width: 30px; padding: 0 6px; }
  .header-tools .theme-switch button { width: 28px; }
  /* Here the call to action would not fit beside the language and appearance controls;
     «Contacte» in the navigation leads to the same place. */
  .header-cta-slot { display: none; }
}
.nav-toggle { display: grid; place-items: center; width: 30px; height: 38px; margin-right: 2px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--faint); cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease, color 160ms ease; }
.nav-toggle svg { width: 12px; height: 12px; transition: transform 220ms var(--ease-out); }
.nav-toggle[aria-expanded="true"] { color: var(--ink); }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-toggle:active { transform: scale(0.94); }
.nav-item.is-open { background: var(--mist); }
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { background: var(--mist); color: var(--ink); }
  .nav-item.has-panel:hover { background: var(--mist); }
  .nav-item.has-panel .nav-link:hover { background: transparent; color: var(--blue-2); }
  .nav-toggle:hover { color: var(--ink); background: var(--mist-2); }
}

.nav-panel { position: absolute; top: calc(100% + 10px); left: 0; width: min(620px, calc(100vw - 2 * var(--gutter) - 180px)); background: var(--surface); border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgba(10, 15, 28, 0.28); padding: 10px; transform-origin: 12% 0; animation: panel-in 200ms var(--ease-out); }
.js .nav-item:not(.is-open) > .nav-panel { display: none; }
html:not(.js) .nav-item > .nav-panel { display: none; }
html:not(.js) .nav-item:hover > .nav-panel, html:not(.js) .nav-item:focus-within > .nav-panel { display: block; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.panel-grid { display: grid; grid-template-columns: 1fr 230px; gap: 6px; }
.panel-links { list-style: none; display: grid; align-content: start; gap: 2px; padding: 4px; }
.panel-links a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-s); text-decoration: none; transition: background-color 140ms ease; }
.panel-links b { font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.panel-links span { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.panel-feature { display: grid; align-content: start; gap: 10px; padding: 8px; border-radius: var(--r-m); text-decoration: none; transition: background-color 140ms ease; }
.panel-feature .feature-media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden; background: var(--mist-2); }
.panel-feature .feature-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.panel-feature .feature-media--rest { background: var(--rest-ground); }
.panel-feature .feature-media--rest img { position: absolute; left: 10%; top: 14%; width: 80%; height: auto; border-radius: 4px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8); }
.panel-feature .feature-media--audit { display: grid; align-content: center; gap: 6px; padding: 14px; background: var(--night); }
.panel-feature .feature-media--audit span { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(238, 241, 248, 0.08); color: var(--on-night); font-size: 0.75rem; font-weight: 500; }
.panel-feature .feature-media--audit span i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-size: 0.6875rem; font-weight: 600; }
.panel-feature .feature-media--audit span:last-child { background: #fff; color: var(--ink); }
.feature-cap { display: grid; gap: 1px; align-content: start; padding: 0 4px 4px; }
.feature-cap b { font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.feature-cap span { font-size: 0.8125rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .panel-links a:hover, .panel-feature:hover { background: var(--mist); }
}

/* Mobile menu */
.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom)); animation: menu-in 220ms var(--ease-out); }
.js .mobile-menu:not(.is-open) { display: none; }
html:not(.js) .mobile-menu { position: static; animation: none; }
@media (min-width: 1000px) { .mobile-menu { display: none !important; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.m-list { list-style: none; }
.m-list > li { border-bottom: 1px solid var(--line); }
.m-link { display: flex; align-items: center; flex: 1; min-height: 60px; padding: 0 2px; color: var(--ink); font-size: 1.375rem; font-weight: 450; letter-spacing: -0.015em; text-decoration: none; touch-action: manipulation; border-radius: var(--r-s); transition: background-color 140ms ease; }
.m-link:active { background: var(--mist); }
.m-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--blue); }
.m-row { display: flex; align-items: center; gap: 8px; }
.m-toggle { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--mist); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: background-color 140ms ease, transform 140ms var(--ease-out); }
.m-toggle svg { width: 18px; height: 18px; transition: transform 220ms var(--ease-out); }
.m-toggle[aria-expanded="true"] { background: var(--tab-on-bg); color: var(--tab-on-ink); box-shadow: inset 0 0 0 1px var(--tab-on-ring); }
.m-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-toggle:active { transform: scale(0.94); }
.m-sub { list-style: none; display: grid; gap: 2px; padding: 0 0 16px; }
.js .m-sub[hidden] { display: none; }
.m-sub a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-s); background: var(--mist); text-decoration: none; transition: background-color 140ms ease; }
.m-sub a:active { background: var(--mist-2); }
.m-sub b { font-size: 1rem; font-weight: 500; color: var(--ink); }
.m-sub span { font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
/* Language: CA · ES · EN, each link to the same page in that language. */
.lang-switch { display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--mist); }
.lang-switch a { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); text-decoration: none; touch-action: manipulation; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.lang-switch a[aria-current="true"] { background: var(--chip); color: var(--ink); box-shadow: 0 1px 2px rgba(10, 15, 28, 0.12), 0 0 0 1px rgba(10, 15, 28, 0.05); }
.lang-switch a:focus-visible { outline-offset: 1px; }
.lang-switch--menu { display: inline-flex; align-self: flex-start; gap: 4px; margin-top: 18px; padding: 4px; }
.lang-switch--menu a { min-width: 64px; height: 44px; font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) { .lang-switch a:not([aria-current="true"]):hover { color: var(--ink); background: light-dark(rgba(255, 255, 255, 0.6), rgba(238, 241, 248, 0.08)); } }
/* Language and appearance sit together, as two compact tracks. */
.header-tools { display: none; align-items: center; gap: 12px; }
@media (min-width: 1000px) {
  .header-row > .header-tools { display: flex; }
  /* The header row's own 12px gap separates the appearance switch from the button, as between the switches. */
  .header-row > .header-tools + .header-cta-slot { margin-left: 0; }
  /* The button fills its slot, so every page shows the same button width (on Contacte the shorter
     «Escriu-nos» is centred in it) and the controls keep one rhythm. */
  .header-cta-slot > .header-cta { flex: 1 1 auto; }
  .header-tools .lang-switch { display: flex; }
}
.theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--mist); }
.theme-switch button { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.theme-switch button svg { width: 16px; height: 16px; }
.theme-switch button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The icons carry no text, so the chosen appearance is filled in ink to read at a glance. It is
   drawn from html[data-theme], which the head script sets before the first paint, so a dark page
   never shows «Clar» chosen while the scripts load (aria-pressed follows when they run). */
:root:not([data-theme="dark"]) .theme-switch [data-theme-choice="light"],
:root[data-theme="dark"] .theme-switch [data-theme-choice="dark"] { background: var(--ink); color: var(--on-ink); }
.theme-switch button:focus-visible { outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  :root:not([data-theme="dark"]) .theme-switch [data-theme-choice="dark"]:hover,
  :root[data-theme="dark"] .theme-switch [data-theme-choice="light"]:hover { color: var(--ink); background: light-dark(rgba(255, 255, 255, 0.6), rgba(238, 241, 248, 0.08)); }
}
/* In the menu: both tracks in one row, each segment a 44px target with its label. */
.m-tools { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.m-tools .lang-switch--menu { margin-top: 0; }
.theme-switch--menu { padding: 4px; }
.theme-switch--menu button { width: auto; height: 44px; padding: 0 12px; gap: 7px; display: inline-flex; font-size: 0.875rem; font-weight: 500; }
.theme-switch--menu button span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.m-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 8px; }
.m-actions .btn { width: 100%; height: 52px; }

/* Entrance (home only, once per tab session) -------------------------------
   A navy curtain carries the phrase and sweeps right, uncovering the same phrase as the
   page's H1 at the same position. The curtain moves right while its contents counter-move,
   so the type stays still and the edge does the work. It runs only when the head script
   adds .intro-on; without JavaScript, with reduced motion or after the first visit, the
   element keeps its `hidden` attribute and the page is simply there. */
.intro { display: none; }
html.intro-on .intro[hidden] { display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden; background: var(--night); color: #fff; animation: intro-sweep 560ms var(--ease-in-out) 880ms both; }
html.intro-on .intro-inner { position: absolute; inset: 0; animation: intro-hold 560ms var(--ease-in-out) 880ms both; }
.intro-head { display: flex; align-items: center; height: var(--header-h); margin-bottom: 1px; }
/* The curtain's lockup is the same inline SVG as the header's, at the same 24px and place (it was
   still sized as an <img>, so the inline SVG filled the whole column during the entrance). */
.intro-head img, .intro-head .logo { height: 24px; width: auto; }
.intro-body { padding-top: var(--hero-pad); }
.intro-phrase { color: #fff; }
.intro-phrase .ln { animation: eleva-rise 520ms var(--ease-out) both; }
.intro-phrase .ln + .ln { animation-delay: 210ms; }
.intro-skip { position: absolute; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(238, 241, 248, 0.1); color: var(--on-night); font-size: 0.9375rem; font-weight: 500; cursor: pointer; touch-action: manipulation; animation: intro-hold 560ms var(--ease-in-out) 880ms both; }
.intro-skip:focus-visible { outline-color: var(--blue-night); }
html.intro-done .intro { display: none !important; }
@keyframes intro-sweep { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes intro-hold { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
html.intro-fast .intro, html.intro-fast .intro-inner, html.intro-fast .intro-skip { animation-duration: 240ms; animation-delay: 0ms; }
@media (hover: hover) and (pointer: fine) { .intro-skip:hover { background: rgba(238, 241, 248, 0.18); } }

/* Home hero ----------------------------------------------------------------
   The statement, then one sentence (who ELEVA helps, the two things it does, why to
   look further) with the two actions right beside it. The stage follows at once. */
.home-hero { padding-top: var(--hero-pad); padding-bottom: clamp(20px, 2.6vw, 36px); }
.hero-mega { max-width: 12.5em; font-size: clamp(2.375rem, 1.25rem + 3.6vw, 4.25rem); }
.hero-row { display: grid; gap: 22px; margin-top: clamp(20px, 2.4vw, 32px); }
.hero-sub { font-size: clamp(1.125rem, 1.05rem + 0.32vw, 1.375rem); line-height: 1.45; color: var(--muted); max-width: 27em; }
.home-hero .hero-sub { max-width: 31em; font-size: clamp(1.125rem, 1.06rem + 0.26vw, 1.3125rem); line-height: 1.5; }
@media (min-width: 900px) {
  .home-hero .hero-row { grid-template-columns: minmax(0, 31em) auto; justify-content: start; align-items: center; column-gap: clamp(32px, 4vw, 56px); }
}
/* On a phone the work is right below the actions, so the second action can go. */
@media (max-width: 479px) { .home-hero .hero-row .btn-line, .page-intro--webs .btn-line { display: none; } }
.hero-sub--wide { max-width: 40em; margin-top: clamp(20px, 2.4vw, 30px); }
.intro-cta { margin-top: 24px; }
.page-intro--audit { padding-bottom: clamp(28px, 3.4vw, 48px); }

/* The stage: three concept websites behind tabs, running in one large browser window.
   On a computer the tabs are the window's own tabs and the page answers a pointer drawn
   inside it; on a phone the same place holds the concept's iPhone, with the tabs as a
   segmented control above it. The ground takes the colours of the concept on show. */
.stage { margin: 0 8px; border-radius: var(--r-l); background: var(--stage-bg, var(--mist)); color: var(--stage-ink, var(--ink)); padding: clamp(18px, 2.4vw, 32px) 0 clamp(22px, 2.6vw, 34px); transition: background-color 600ms ease, color 600ms ease; }
.stage[data-concept="rest"] { --stage-bg: var(--rest-ground); --stage-ink: var(--rest-ground-ink); --tab-bg: #f3efe7; }
.stage[data-concept="fisio"] { --stage-bg: var(--fisio-ground); --stage-ink: var(--fisio-ground-ink); --tab-bg: #f5f8f6; }
.stage[data-concept="asse"] { --stage-bg: var(--asse-ground); --stage-ink: var(--asse-ground-ink); --tab-bg: #f0f2ef; }
.stage-bar { display: flex; justify-content: center; align-items: center; }
.stage-dots { display: none; }
.stage-tabs { display: inline-flex; max-width: 100%; gap: 2px; padding: 2px 4px; border-radius: 999px; background: color-mix(in srgb, var(--stage-ink, var(--ink)) 9%, transparent); overflow-x: auto; scrollbar-width: none; }
.stage-tabs::-webkit-scrollbar { display: none; }
/* Each tab is a 44px target; the shape you see (a 40px pill on phones, a browser tab on
   a computer) is drawn inside it, so the touch area grew without changing the look. */
.stage-tab { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 44px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 500 0.9375rem/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform 140ms var(--ease-out); }
.stage-tab::before { content: ""; position: absolute; inset: 2px 0; z-index: -1; border-radius: 999px; background: transparent; transition: background-color 160ms ease, box-shadow 160ms ease; }
.stage-tab:focus-visible { outline: none; }
.stage-tab:focus-visible::before { outline: 2px solid var(--blue); outline-offset: -2px; }
.stage-tab:not([aria-selected="true"]) { color: color-mix(in srgb, currentColor 78%, transparent); }
.stage-tab[aria-selected="true"]::before { background: var(--seg-on); box-shadow: var(--seg-shadow); }
.stage-tab:active { transform: scale(0.97); }
.stage-progress { position: absolute; left: 15px; right: 15px; bottom: 7px; height: 2px; border-radius: 2px; overflow: hidden; background: transparent; }
.stage-progress i { display: block; height: 100%; background: currentColor; opacity: 0.55; transform: scaleX(0); transform-origin: left center; }
.stage-tab:not([aria-selected="true"]) .stage-progress { visibility: hidden; }
.stage-panels { display: grid; margin-top: 16px; }
.stage-panel { grid-area: 1 / 1; display: grid; gap: 18px; align-content: start; }
.stage-panel[hidden] { display: none; }
.stage-panel.is-entering { z-index: 2; }
.stage-frame { position: relative; }
.stage-browser { display: none; }
.stage-phone { width: min(84vw, 340px); margin-inline: auto; }
.stage-cap { display: grid; gap: 16px; justify-items: center; text-align: center; }
.stage-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 20px; }
.stage-links .link-arrow { color: inherit; }
.stage-links .link-arrow span { text-decoration-color: color-mix(in srgb, currentColor 36%, transparent); }
.stage .btn-stage { background: var(--stage-ink, var(--ink)); color: var(--stage-bg, #fff); }
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 20px; text-align: left; }
.stage .disclosure { color: color-mix(in srgb, var(--stage-ink, var(--ink)) 78%, transparent); }
html:not(.js) .stage-tabs { display: none; }
html:not(.js) .stage-panel { grid-area: auto; }
html:not(.js) .stage-panel + .stage-panel { margin-top: 40px; }
/* Narrow phones: the three tabs fit on one line in every language, down to 320px, at
   13px, each a 44px target. Below 390px the unselected tabs touch (they have no fill, so
   the gap never showed) and the track around the pills stays 3px; below 360px it also
   takes 2px more of the band on each side. */
@media (max-width: 459px) { .stage-tab { padding: 0 10px; font-size: 0.875rem; } .stage-progress { left: 10px; right: 10px; } }
@media (max-width: 389px) { .stage-tabs { gap: 0; padding: 1px 3px; } .stage-tab { padding: 0 7px; font-size: 0.8125rem; } .stage-progress { left: 7px; right: 7px; } }
@media (max-width: 359px) { .stage-tabs { margin-inline: -14px; max-width: calc(100% + 28px); } }
@media (min-width: 900px) {
  .stage-bar { justify-content: flex-start; align-items: flex-end; gap: 16px; height: 50px; padding: 0 10px 0 18px; border-radius: 12px 12px 0 0; background: var(--chrome); }
  .stage-dots { display: flex; gap: 7px; align-self: center; margin-right: 6px; }
  .stage-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--chrome-dot); }
  .stage-tabs { align-self: stretch; align-items: flex-end; padding: 0; gap: 2px; border-radius: 0; background: none; overflow: visible; }
  .stage-tab { height: 44px; padding: 4px 22px 0; border-radius: 10px 10px 0 0; color: var(--chrome-ink); font-size: 0.9375rem; }
  .stage-tab::before { inset: 4px 0 0; border-radius: 10px 10px 0 0; }
  .stage-tab::after { content: ""; position: absolute; top: 4px; left: 12px; right: 12px; height: 2px; border-radius: 0 0 2px 2px; background: transparent; pointer-events: none; }
  .stage-tab:not([aria-selected="true"]) { color: var(--chrome-ink); }
  /* On the light page the selected tab joins the concept's own paper, with an ink label. On the
     dark one it is a raised slate with a light label and a blue line along its top, so the
     window's chrome stays dark and the choice is still unmistakable. */
  .stage-tab[aria-selected="true"] { color: var(--chrome-tab-ink, #0a0f1c); }
  .stage-tab[aria-selected="true"]::before { background: var(--chrome-tab, var(--tab-bg, #fff)); box-shadow: none; }
  .stage-tab[aria-selected="true"]::after { background: var(--chrome-tab-mark, transparent); }
  .stage-tab:active { transform: none; }
  .stage-progress { left: 22px; right: 22px; bottom: 6px; }
  .stage-panels { margin-top: 0; }
  .stage-browser { display: block; overflow: hidden; border-radius: 0 0 12px 12px; background: var(--tab-bg, #fff); box-shadow: 0 30px 60px -28px rgba(10, 15, 28, 0.42); }
  .stage-phone { display: none; }
  .stage-cap { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 24px; margin-top: 6px; text-align: left; }
  .stage-links { justify-content: flex-end; }
  .stage-foot { justify-content: flex-start; }
  .preview-toggle--foot { display: none !important; }
}
@media (max-width: 899px) { .preview-toggle--bar { display: none !important; } }
@media (min-width: 1500px) { .stage { margin: 0 12px; } }
@media (hover: hover) and (pointer: fine) {
  .stage-tab:not([aria-selected="true"]):hover::before { background: color-mix(in srgb, var(--stage-ink, var(--ink)) 7%, transparent); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .stage-tab:not([aria-selected="true"]):hover { color: var(--chrome-ink-on); }
  .stage-tab:not([aria-selected="true"]):hover::before { background: var(--chrome-hover); }
}

/* The steps of a demonstration, under its frame: the one being shown is marked. Without
   JavaScript or with reduced motion they are a plain numbered list. */
.preview-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; counter-reset: demo; }
.preview-steps li { counter-increment: demo; display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; line-height: 1.35; transition: color 300ms ease; }
.preview-steps li::before { content: counter(demo); display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px currentColor; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.preview-steps li.is-current::before { background: var(--stage-ink, var(--ink)); color: var(--stage-bg, #fff); box-shadow: inset 0 0 0 1.25px var(--stage-ink, var(--ink)); }
.preview-steps li.is-done::before { background: color-mix(in srgb, var(--stage-ink, var(--ink)) 14%, transparent); box-shadow: none; }
@media (min-width: 900px) { .preview-steps { justify-content: flex-start; } }

/* Frames ---------------------------------------------------------------- */
.browser { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: var(--sh-2); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--chrome-bar); border-bottom: 1px solid var(--chrome-line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--chrome-dot); flex: none; }
.browser-bar span { margin: 0 auto; padding: 2px 12px; border-radius: 6px; background: var(--chrome-pill); color: var(--chrome-ink); font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.browser > img, .browser > picture img { width: 100%; height: auto; }
.night .browser, .on-dark .browser { box-shadow: var(--sh-night); }
/* A browser frame's page area keeps the proportion of its capture: 1440 × 900 for still
   pages, 1280 × 720 for the demonstrations. */
.browser-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.browser-screen > img { display: block; width: 100%; height: auto; }

/* iPhone-style frame around a real 393 × 798 render (a 393 × 852 screen minus the
   54-point status bar). Proportions follow a 6.1-inch phone: 426 × 885 units with a
   16.5-unit bezel, 55-unit screen corners and a 126 × 37 island. No logo, no brand. */
.iphone { container-type: inline-size; position: relative; width: 100%; }
.iphone-body { position: relative; aspect-ratio: 426 / 885; padding: 3.87cqw; border-radius: 16.9cqw; background: #0d1016; box-shadow: inset 0 0 0 0.35cqw #353b48, inset 0 0 0 0.75cqw #06080c, var(--sh-phone); }
.iphone-body::before, .iphone-body::after { content: ""; position: absolute; width: 0.8cqw; background: #1b1f28; }
.iphone-body::before { left: -0.65cqw; top: 17.7%; height: 28.7%; border-radius: 0.6cqw 0 0 0.6cqw; background: linear-gradient(to bottom, #1b1f28 0 14.3%, transparent 14.3% 33.4%, #1b1f28 33.4% 62%, transparent 62% 71.4%, #1b1f28 71.4% 100%); }
.iphone-body::after { right: -0.65cqw; top: 30.7%; height: 13.6%; border-radius: 0 0.6cqw 0.6cqw 0; }
.iphone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 12.95cqw; background: var(--status, #fff); padding-top: 12.68cqw; }
.iphone-screen img { width: 100%; height: auto; }
.iphone-island { position: absolute; top: 6.45cqw; left: 50%; width: 29.6cqw; height: 8.75cqw; transform: translateX(-50%); border-radius: 999px; background: #000; }
.night .iphone-body, .on-dark .iphone-body, .reel-panel--rest .iphone-body { box-shadow: inset 0 0 0 0.35cqw #3b4252, inset 0 0 0 0.75cqw #06080c, var(--sh-night); }
/* A demonstration's screen: a still image of the concept page, then the live page over
   it once it is ready (scaled to the frame; inert, so it never takes focus or a click). */
.preview-screen { position: relative; overflow: hidden; }
.browser-screen.preview-screen { aspect-ratio: 16 / 9; }
.browser-screen.preview-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.preview-site { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; background: transparent; transition: opacity 280ms ease; }
/* Above the live page: takes every pointer, wheel and touch, so the visitor's page scrolls
   as usual and the preview is never used by mistake. */
.preview-shield { position: absolute; inset: 0; z-index: 2; }
.is-live .preview-site { opacity: 1; }
/* The pointer: an arrow on a computer, a fingertip on a phone; a ring marks each press. */
.preview-pointer { --press: 1; position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; opacity: 0; will-change: transform; }
.preview-pointer svg { position: absolute; left: -1px; top: -1px; width: 21px; height: 27px; max-width: none; overflow: visible; fill: #0a0f1c; stroke: #fff; stroke-width: 1.5px; stroke-linejoin: round; transform: scale(var(--press)); transform-origin: 2px 2px; filter: drop-shadow(0 2px 3px rgba(10, 15, 28, 0.3)); }
.preview-pointer b { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 2px rgba(10, 15, 28, 0.55), 0 4px 12px rgba(10, 15, 28, 0.25); transform: scale(var(--press)); }
.preview-ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; background: rgba(47, 91, 234, 0.4); opacity: 0; }
.preview-pointer--touch .preview-ring { left: -24px; top: -24px; width: 48px; height: 48px; background: rgba(10, 15, 28, 0.22); }
/* Pause and resume: next to its demonstration, its space kept from the first paint so
   showing it never pushes the page. No motion, no control and no space. */
.preview-toggle { display: inline-flex; justify-self: start; align-self: center; width: fit-content; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease, transform 140ms var(--ease-out); }
.preview-toggle[hidden] { display: none; }
.js .preview-toggle[hidden] { display: inline-flex; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .js .preview-toggle[hidden] { display: none; } }
.preview-toggle:active { transform: scale(0.96); }
.preview-toggle i { position: relative; width: 12px; height: 12px; flex: none; }
.preview-toggle i::before, .preview-toggle i::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 3px; border-radius: 1px; background: currentColor; }
.preview-toggle i::before { left: 2px; }
.preview-toggle i::after { right: 2px; }
.preview-toggle[data-state="paused"] i::before, .preview-toggle[data-state="replay"] i::before, .preview-toggle[data-state="play"] i::before { left: 2px; top: 0; bottom: 0; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.preview-toggle[data-state="paused"] i::after, .preview-toggle[data-state="replay"] i::after, .preview-toggle[data-state="play"] i::after { display: none; }
.preview-toggle[data-state="skip"] i::before { inset: 1px; width: auto; border-radius: 2px; }
.preview-toggle[data-state="skip"] i::after { display: none; }
.preview-toggle--bar { height: 34px; padding: 0 14px 0 12px; margin-left: auto; align-self: center; background: var(--chrome-btn); color: var(--chrome-ink-on); font-size: 0.8125rem; }
@media (hover: hover) and (pointer: fine) { .preview-toggle:hover { background: color-mix(in srgb, currentColor 16%, transparent); } .preview-toggle--bar:hover { background: var(--chrome-btn-hover); } }
/* On phones the demonstrations' iPhone gets a slimmer frame and more width, so the page
   inside is larger: a 10-unit bezel instead of 16.5, a smaller island and no side buttons.
   The status strip is set so the 393 × 798 page still fills the screen exactly. */
@media (max-width: 899px) {
  .stage-phone .iphone-body, .study-phone .iphone-body { padding: 2.35cqw; border-radius: 14cqw; box-shadow: inset 0 0 0 0.3cqw #353b48, var(--sh-phone); }
  .stage-phone .iphone-body::before, .stage-phone .iphone-body::after, .study-phone .iphone-body::before, .study-phone .iphone-body::after { display: none; }
  .stage-phone .iphone-screen, .study-phone .iphone-screen { border-radius: 11.7cqw; padding-top: 9.53cqw; }
  .stage-phone .iphone-island, .study-phone .iphone-island { top: 4cqw; width: 23.5cqw; height: 7cqw; }
}
}
@supports not (container-type: inline-size) {
  .iphone-body { padding: 10px; border-radius: 44px; }
  .iphone-screen { border-radius: 34px; padding-top: 32px; }
  .iphone-island { top: 16px; width: 74px; height: 22px; }
}

/* Draft artefact: the result of a prepared task, shown as a legible document. */
.draft { position: relative; border-radius: 14px 14px 0 0; background: #fff; color: var(--text); box-shadow: var(--sh-night); padding: 18px 20px 22px; font-size: 0.9375rem; line-height: 1.55; }
.draft-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; color: var(--faint); }
.draft-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--blue-2); }
.draft-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.draft p + p { margin-top: 8px; }

/* Home: the story --------------------------------------------------------------
   One enquiry and the draft prepared from it, complete from the start, on a navy stage:
   the enquiry, the person who copies it into the AI workspace, the draft, and the person
   who reviews it. The optional walk-through only highlights them in turn; no text is
   hidden or written out. */
.story { padding-top: var(--sec); }
.story-head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 36px); }
.story-title { max-width: 13em; }
.story-head .lead { max-width: 36em; }
.qa-band { border-radius: var(--r-l); background: var(--night); color: var(--on-night); padding: clamp(12px, 2.6vw, 32px); }
.qa { display: grid; gap: 14px; align-items: start; }
.qa-card { display: grid; gap: 10px; align-content: start; min-width: 0; border-radius: 14px; background: #fff; color: var(--text); padding: clamp(16px, 1.6vw, 22px); box-shadow: var(--sh-night); transition: box-shadow 260ms ease, transform 360ms var(--ease-out); }
.qa-k { font-size: 1rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.qa-meta { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
.qa-from { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--asse-bg); color: var(--asse-ink); font-size: 0.8125rem; font-weight: 600; }
.qa-meta b { color: var(--ink); font-weight: 600; }
.qa-text { color: var(--ink); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.6; }
.qa-draft { display: grid; gap: 8px; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.qa-review { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; padding: 11px 14px; border-radius: 10px; background: var(--ok-tint); color: var(--ok-ink); font-size: 0.9375rem; line-height: 1.5; transition: box-shadow 260ms ease; }
.qa-review svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.qa-review b { font-weight: 600; }
.qa-hand { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 4px; color: var(--on-night); font-size: 0.9375rem; line-height: 1.5; }
.qa-hand b { color: #fff; font-weight: 600; }
.qa-arrow { width: 36px; height: 36px; flex: none; padding: 9px; border-radius: 50%; background: rgba(238, 241, 248, 0.1); color: #fff; transform: rotate(90deg); transition: background-color 260ms ease, color 260ms ease, transform 360ms var(--ease-out); }
.qa-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 20px; }
/* The walk-through needs both blocks in view at once, so it is offered only where they sit
   side by side; the stacked composition is complete without it. */
.qa-play { color: #fff; }
.qa-play:focus-visible { outline-color: var(--blue-night); }
@media (max-width: 899px) { .qa-play, .js .qa-play[hidden] { display: none; } }
@media (min-width: 900px) {
  .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; grid-template-areas: "in out" "hand out" "play out"; gap: 18px 28px; }
  .qa-card--in { grid-area: in; }
  .qa-play { grid-area: play; align-self: end; }
  .qa-hand { grid-area: hand; flex-direction: row-reverse; gap: 16px; padding: 0 0 0 4px; }
  .qa-hand span { flex: 1; }
  .qa-card--out { grid-area: out; }
  .qa-arrow { transform: none; }
}
/* The walk-through: the step in focus gets a ring and lifts slightly. */
.qa-band.is-playing .qa-card.is-current { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--blue-night), var(--sh-night); }
.qa-band.is-playing .qa-hand.is-current .qa-arrow { background: var(--blue-night); color: var(--night); transform: rotate(90deg) translateX(3px); }
.qa-band.is-playing .qa-review.is-current { box-shadow: 0 0 0 2px var(--ok); }
@media (min-width: 900px) { .qa-band.is-playing .qa-hand.is-current .qa-arrow { transform: translateX(4px); } }
/* The draft tag, also used on the Com treballem page. */
.ai-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--blue-2); font-size: 0.75rem; font-weight: 600; }
.ai-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* Home: the closing statement ------------------------------------------------------ */
.closing { padding-block: clamp(88px, 11vw, 160px); }
.closing .statement-xl { color: var(--ink); }
.closing .statement-xl span { color: var(--blue); }
.closing .link-arrow { margin-top: clamp(28px, 3vw, 40px); }
.statement-xl { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.875rem); line-height: 1.14; letter-spacing: -0.016em; font-weight: 400; color: #fff; max-width: 17em; text-wrap: balance; }
.statement-xl span { color: var(--blue-night); }

/* Statement + principles --------------------------------------------------- */
.statement { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.22; letter-spacing: -0.012em; font-weight: 400; color: var(--ink); max-width: 24em; }
.statement em { font-style: normal; color: var(--faint); }
.principles { list-style: none; display: grid; gap: 0; margin-top: clamp(40px, 6vw, 80px); }
.principles li { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); }
.principles h3 { font-size: 1.125rem; font-weight: 550; letter-spacing: -0.01em; }
.principles p { color: var(--muted); max-width: 30em; }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Inner page intro ---------------------------------------------------------- */
.page-intro { padding-top: var(--hero-pad); padding-bottom: clamp(40px, 5vw, 72px); }
.page-intro .mega { max-width: 14em; }
.page-intro--center { text-align: center; }
.page-intro--center .mega { margin-inline: auto; max-width: 11.5em; }
.page-intro--center .hero-sub { margin: clamp(20px, 2.4vw, 30px) auto 0; max-width: 40em; }
.page-intro--center .btn-row { justify-content: center; margin-top: 28px; }
/* Webs: the statement on the left, the sentence and the actions beside it, so the first
   concept starts within the first screen. */
.page-intro--webs { padding-top: clamp(24px, 3.2vw, 44px); padding-bottom: clamp(22px, 2.6vw, 34px); }
.page-intro--webs .mega { max-width: 11em; }
.intro-split { display: grid; gap: 16px 56px; }
.intro-side { display: grid; gap: 20px; justify-items: start; }
.intro-side .hero-sub { max-width: 28em; }
@media (min-width: 1000px) { .intro-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
@media (min-width: 1200px) { .intro-split { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); } }
.page-intro .hero-row { margin-top: clamp(22px, 2.6vw, 36px); }

/* Webs: visual studies --------------------------------------------------------
   Each concept in its own colours: a head (name, a line, the links), then the website
   itself in a large browser frame where it moves, as on the home page. On phones the
   concept's phone layout takes the frame's place. */
.study { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 104px); }
.study-head { display: grid; gap: 18px 56px; margin-bottom: clamp(24px, 3vw, 40px); }
.study-name { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); line-height: 0.95; }
.study-kind { margin-top: 10px; font-size: 0.9375rem; font-weight: 500; }
.study-copy { display: grid; gap: 18px; align-content: start; }
.study-copy p.study-text { font-size: 1.0625rem; line-height: 1.6; max-width: 30em; }
.study-links { display: flex; flex-wrap: wrap; gap: 10px; }
.study-stage { position: relative; }
.study-browser { display: none; }
.study-phone { width: min(84vw, 340px); margin-inline: auto; }
.study-foot { display: grid; justify-items: center; gap: 14px 24px; margin-top: 20px; }
.study-foot .study-note { order: 3; text-align: center; }
@media (min-width: 900px) { .study-foot { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; align-items: center; } .study-foot .study-note { grid-column: 1 / -1; text-align: left; } }
.study-note { font-size: 0.875rem; line-height: 1.5; max-width: 34em; }
@media (min-width: 900px) {
  .study-browser { display: block; }
  .study-phone { display: none; }
}
@media (min-width: 1000px) {
  .study-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
}

/* Restaurant: warm stone, a serif name, the photograph-led website at full width. */
.study--rest { background: var(--rest-ground); color: var(--rest-ground-ink); }
.study--rest .study-name { font-family: "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.025em; }
.study--rest .study-kind, .study--rest .study-text, .study--rest .study-note { color: var(--rest-ground-soft); }
/* The first study opens the page: a compact head (the name and the links in one row) over
   the website, and its explanation under the preview. */
.study--rest { padding-top: clamp(24px, 3vw, 40px); }
.study--rest .study-head { gap: 14px 32px; margin-bottom: clamp(16px, 1.8vw, 22px); }
.study--rest .study-name { font-size: clamp(2.25rem, 1.5rem + 1.8vw, 3.25rem); }
.study--rest .study-kind { margin-top: 6px; }
.study-foot .study-text { order: 2; max-width: 44em; font-size: 1rem; line-height: 1.6; text-align: center; }
@media (min-width: 900px) { .study-foot .study-text { grid-column: 1 / -1; text-align: left; } }
/* On phones the study reads down one left edge, like its title and buttons above the phone. */
@media (max-width: 899px) {
  .study-foot { justify-items: start; }
  .study-foot .study-text, .study-foot .study-note { text-align: left; }
  .study-foot .preview-steps { justify-content: flex-start; }
}
@media (min-width: 1000px) { .study--rest .study-head { grid-template-columns: minmax(0, 1fr) auto; } .study--rest .study-copy { justify-items: end; } }
.btn-rest { background: var(--rest-ground-ink); color: var(--rest-ground-on); }

/* Physiotherapy: calm and centred; the phone stands beside the website as evidence that
   the same page works on a small screen. */
.study--fisio { background: var(--fisio-ground-paper); color: var(--fisio-ground-ink); }
.study--fisio .study-head { justify-items: center; text-align: center; grid-template-columns: none; }
.study--fisio .study-copy { justify-items: center; }
.study--fisio .study-name { font-family: "Albert Sans", var(--font); font-weight: 750; letter-spacing: -0.035em; color: var(--fisio-ground-ink); }
.study--fisio .study-text { color: var(--fisio-ground-soft); margin-inline: auto; }
.study--fisio .study-links { justify-content: center; }
@media (min-width: 1000px) {
  .study--fisio .study-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 16vw, 230px); gap: clamp(24px, 3vw, 48px); align-items: end; }
  .study--fisio .study-phone { display: block; width: 100%; }
}
.btn-fisio { background: var(--fisio-ground-ink); color: var(--fisio-ground-on); }
.btn-line-fisio { color: var(--fisio-ground-ink); box-shadow: inset 0 0 0 1px var(--fisio-ground-ring); background: transparent; }

/* Advisory: clarity; hairline notes beside a strict heading, the website below. */
.study--asse { background: var(--asse-ground-paper); color: var(--ink); }
.study--asse .study-name { font-family: "Spectral", Georgia, serif; font-weight: 600; letter-spacing: -0.02em; color: var(--asse-ground-ink); }
.study--asse .study-kind { color: var(--muted); }
.study--asse .study-browser { box-shadow: 0 0 0 1px var(--frame-line), var(--sh-2); }
.asse-notes { display: grid; gap: 0; border-top: 1px solid var(--line); }
.asse-notes > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.asse-notes dt { font-size: 0.875rem; font-weight: 600; color: var(--asse-ground-ink); }
.asse-notes dd { margin: 0; color: var(--muted); }
@media (min-width: 700px) { .asse-notes { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.btn-asse { background: var(--asse-ground-ink); color: var(--asse-ground-on); }

/* Webs: service ------------------------------------------------------------- */
.service-cols { display: grid; gap: 40px; }
@media (min-width: 1000px) { .service-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; } }
.tick-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.tick-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.tick-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--blue); }
.night .tick-list, .night .tick-list li { border-color: var(--line-night); }
.night .tick-list svg { color: var(--blue-night); }

/* Section heads ----------------------------------------------------------- */
.head { display: grid; gap: 18px; align-content: start; margin-bottom: clamp(36px, 5vw, 64px); }
.head .lead { max-width: 36em; }


/* Definition list / editorial lists */
.deflist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.deflist > div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.deflist dt { font-size: 1.1875rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.deflist dd { margin: 0; color: var(--muted); max-width: 36em; }
@media (min-width: 900px) { .deflist > div { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; } }
.two-col { display: grid; gap: 36px; }
@media (min-width: 1000px) { .two-col { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; } .two-col > .head { margin-bottom: 0; align-content: start; } }

/* Process steps */
.steps { list-style: none; display: grid; gap: 0; counter-reset: step; }
.steps li { position: relative; display: grid; gap: 6px; padding: 20px 0 20px 52px; border-top: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 22px; font-size: 0.8125rem; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--blue); }
.steps h3 { font-size: 1.125rem; font-weight: 550; letter-spacing: -0.01em; }
.steps p { color: var(--muted); }
.night .steps li { border-color: var(--line-night); }
.night .steps li::before { color: var(--blue-night); }
.night .steps p { color: var(--on-night-2); }
@media (min-width: 1000px) {
  .steps--row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; }
  .steps--row li { padding: 56px 0 0; border-top: 0; }
  .steps--row li::before { top: 0; }
  .steps--row li::after { content: ""; position: absolute; left: 34px; right: -28px; top: 9px; height: 1px; background: var(--line-2); }
  .steps--row li:last-child::after { right: 0; }
  .night .steps--row li::after { background: var(--line-night); }
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 1.125rem; font-weight: 500; color: var(--ink); letter-spacing: -0.008em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat; color: var(--faint); transition: transform 220ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 22px; color: var(--muted); max-width: 40em; }

/* AI audits: how it works, in three steps you can scan --------------------------- */
.how-section { padding-bottom: clamp(36px, 4.4vw, 56px); }
.how { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.how li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.how-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 0.9375rem; font-weight: 600; }
.how h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.how p { margin-top: 4px; color: var(--muted); max-width: 30em; }
@media (min-width: 900px) {
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 0; }
  .how li { position: relative; grid-template-columns: 1fr; gap: 12px; padding: 0; border-bottom: 0; }
  .how li:not(:last-child)::after { content: ""; position: absolute; left: 48px; right: -20px; top: 18px; height: 1px; background: var(--line-2); }
}

/* AI audits: what goes in and what comes out --------------------------------------
   The opening shows one short example on a navy workbench (the input on the left, the
   result for review on the right) with the complete example in a disclosure. Two more
   office tasks follow behind tabs, built the same way. Without JavaScript the tasks are
   listed in order. */
.oe { display: grid; gap: 12px; margin-top: clamp(20px, 2.2vw, 28px); }
.page-intro--audit .hero-sub--wide { margin-top: clamp(16px, 2vw, 24px); }
.page-intro--audit .intro-cta { margin-top: 20px; }
.oe-bench .oe-note { padding: 2px clamp(2px, 0.8vw, 8px) 0; }
.workbench .io--short { padding-top: clamp(12px, 1.2vw, 16px); padding-bottom: 14px; }
.io--short .paper { font-size: 1rem; }
.io-note { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(238, 241, 248, 0.06); box-shadow: inset 0 0 0 1px var(--line-night); color: var(--on-night); font-size: 0.9375rem; line-height: 1.45; }
.io-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--blue-night); }
.oe-full { display: grid; gap: 4px; padding-bottom: 6px; }
.oe-full .io { padding: 6px 0 18px; }
.oe-note { font-size: 0.875rem; }
/* On a narrow screen the second sentence moves down whole instead of breaking in the middle. */
.oe-note-2 { display: inline-block; }
.oe-bench .oe-note::before { background: var(--blue-night); }
.ex-head { display: grid; gap: 6px; margin-bottom: 14px; }
.ex-head .demo-title { margin-bottom: 0; }
.workbench .io { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 28px) clamp(2px, 0.8vw, 8px) 18px; }
.io-part { display: grid; gap: 12px; align-content: start; min-width: 0; }
.io-k { font-size: 1.0625rem; line-height: 1.3; font-weight: 550; letter-spacing: -0.01em; color: #fff; }
.io-art { display: grid; gap: 14px; align-content: start; min-width: 0; }
.io-arrow { display: grid; place-items: center; justify-self: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(238, 241, 248, 0.1); color: var(--on-night); }
.io-arrow svg { width: 18px; height: 18px; transform: rotate(90deg); }
.io-legend { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--on-night); }
.io-legend::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--amber-tint); flex: none; }
.io .sheet tr.flag td { background: var(--amber-tint); }
.io .sheet tr.flag td.rn { color: var(--amber-ink); font-weight: 600; }
@media (min-width: 1000px) {
  .workbench .io { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: start; gap: 18px; }
  .io-arrow { align-self: start; margin-top: 64px; }
  .io-arrow svg { transform: none; }
  .io--full .io-arrow { margin-top: 30px; }
}
.io-more { border-top: 1px solid var(--line-night); margin: 0 clamp(2px, 0.8vw, 8px); }
.io-more > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 56px; padding: 12px 40px 12px 0; position: relative; list-style: none; cursor: pointer; border-radius: 8px; }
.io-more > summary::-webkit-details-marker { display: none; }
.io-more-t { font-weight: 550; color: #fff; }
.io-more-s { font-size: 0.875rem; color: var(--on-night-2); }
.io-more > summary svg { position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--on-night); transition: transform 220ms var(--ease-out); }
.io-more[open] > summary svg { transform: rotate(180deg); }
.io-more > summary:focus-visible { outline-color: var(--blue-night); }
.io-more-body { display: grid; gap: 18px; padding: 4px 0 20px; }
.io-more-copy { display: grid; gap: 10px; align-content: start; color: var(--on-night-2); }
.io-more-copy b { color: #fff; font-weight: 550; }
.io-more-art { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 1000px) { .io-more-body { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; } }
@media (hover: hover) and (pointer: fine) { .io-more > summary:hover .io-more-t { text-decoration: underline; text-underline-offset: 0.25em; } }
/* The full sample audit, one step away from the example. */
.sample-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 14px; padding: 20px 24px; border-radius: var(--r-l); background: var(--mist); color: var(--text); text-decoration: none; transition: background-color 160ms ease; }
.sample-copy { display: grid; gap: 2px; max-width: 40em; }
.sample-copy b { font-size: 1.125rem; font-weight: 550; letter-spacing: -0.01em; color: var(--ink); }
.sample-copy span { color: var(--muted); }
.sample-go { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 0.96875rem; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; }
.sample-go svg { width: 17px; height: 17px; transition: transform 220ms var(--ease-out); }
@media (max-width: 419px) { .sample-go { height: auto; min-height: 48px; padding: 12px 20px; line-height: 1.25; white-space: normal; } }
/* At the narrowest widths the label keeps to one line: the whole card is the link, so the arrow can go. */
@media (max-width: 359px) { .sample-card { padding: 18px; } .sample-go { padding: 0 16px; font-size: 0.9375rem; } .sample-go svg { display: none; } }
@media (hover: hover) and (pointer: fine) { .sample-card:hover { background: var(--mist-2); } .sample-card:hover .sample-go svg { transform: translateX(3px); } }
.sample-card:active .sample-go { transform: scale(0.97); }
.after-rules { margin-top: 18px; }

/* Audit demonstration (shared pieces) ---------------------------------------------
   The papers, tables and spreadsheets the examples are made of. */
.demo-title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; font-weight: 430; margin-bottom: 16px; }
.demo-note { margin: 4px 0 14px; font-size: 0.875rem; }
.demo-tasks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.demo-task { display: grid; gap: 2px; justify-items: start; align-content: start; padding: 14px 18px; border: 0; border-radius: var(--r-m); background: var(--mist); color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.demo-task b { font-size: 1.0625rem; font-weight: 550; letter-spacing: -0.01em; }
.demo-task span { font-size: 0.875rem; color: var(--muted); }
.demo-task:active { transform: scale(0.985); }
.demo-task[aria-selected="true"] { background: var(--tab-on-bg); color: var(--tab-on-ink); box-shadow: inset 0 0 0 1px var(--tab-on-ring); }
.demo-task[aria-selected="true"] span { color: color-mix(in srgb, var(--tab-on-ink) 72%, transparent); }
@media (max-width: 759px) { .demo-task { padding: 10px 12px; } .demo-task b { font-size: 0.9375rem; line-height: 1.25; } .demo-task span { display: none; } }
@media (min-width: 760px) { .demo-tasks { gap: 8px; margin-bottom: 10px; } }
@media (hover: hover) and (pointer: fine) { .demo-task[aria-selected="false"]:hover { background: var(--mist-2); } }

.workbench { position: relative; border-radius: var(--r-xl); background: var(--night); color: var(--on-night); padding: clamp(14px, 2.4vw, 28px); }
.workbench::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: var(--glow); }
.workbench > * { position: relative; z-index: 1; }
.demo-panel[hidden] { display: none; }
html:not(.js) .demo-panel[hidden] { display: block; }
html:not(.js) .demo-panel + .demo-panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line-night); }
html:not(.js) .demo-tasks { display: none; }
.demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(238, 241, 248, 0.07); list-style: none; }
.demo-step { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--on-night-2); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; touch-action: manipulation; transition: background-color 180ms ease, color 180ms ease; }
.demo-step i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(238, 241, 248, 0.12); color: #fff; font-style: normal; font-size: 0.75rem; font-weight: 600; }
.demo-step[aria-selected="true"] { background: #fff; color: var(--ink); }
.demo-step[aria-selected="true"] i { background: var(--blue); }
@media (max-width: 559px) { .demo-step span { display: none; } .demo-step[aria-selected="true"] span { display: inline; } .demo-steps { grid-template-columns: auto auto auto; justify-content: start; border-radius: var(--r-m); } .demo-step[aria-selected="true"] { padding-right: 16px; } }
@media (hover: hover) and (pointer: fine) { .demo-step[aria-selected="false"]:hover { color: #fff; background: rgba(238, 241, 248, 0.08); } }
html:not(.js) .demo-steps { display: none; }

.demo-stage { display: grid; gap: 24px; padding: clamp(22px, 3.4vw, 40px) clamp(6px, 1.6vw, 18px) clamp(8px, 1.6vw, 16px); animation: stage-in 240ms var(--ease-out); }
.demo-stage[hidden] { display: none; }
html:not(.js) .demo-stage[hidden] { display: grid; }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stage-copy { display: grid; gap: 12px; align-content: start; }
.stage-copy h3 { color: #fff; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; font-weight: 430; }
.stage-copy p { color: var(--on-night-2); }
.stage-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.stage-nav .btn { height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.stage-art { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 1000px) { .demo-stage { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }

/* Artefacts on the workbench */
.paper { border-radius: 14px; background: #fff; color: var(--text); padding: 18px 20px; box-shadow: var(--sh-night); font-size: 0.9375rem; line-height: 1.55; min-width: 0; }
.paper-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; color: var(--faint); }
.paper-top b { color: var(--ink); font-weight: 600; font-size: 0.875rem; }
.paper p + p { margin-top: 8px; }
.ask { justify-self: end; max-width: 30em; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--blue); color: #fff; font-size: 0.9375rem; line-height: 1.45; }
.ask small { display: block; font-size: 0.75rem; font-weight: 500; color: #fff; margin-bottom: 3px; }
.rules-card { border-radius: 14px; padding: 18px 20px; background: var(--night-raised); box-shadow: inset 0 0 0 1px rgba(238, 241, 248, 0.1); }
.rules-card > b { display: block; font-size: 0.875rem; font-weight: 600; color: #fff; margin-bottom: 10px; }
.rules-card ul { list-style: none; display: grid; gap: 9px; font-size: 0.9375rem; line-height: 1.45; color: var(--on-night); }
.rules-card li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.rules-card svg { width: 16px; height: 16px; margin-top: 3px; color: var(--blue-night); }
.fact { border-radius: 14px; padding: 16px 18px; background: #fff; color: var(--text); box-shadow: var(--sh-night); font-size: 0.9375rem; }
.fact small { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ok-ink); margin-bottom: 4px; }
.fact b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.fact .meta { display: block; margin-top: 8px; font-size: 0.8125rem; color: var(--faint); }
.art-row { display: grid; gap: 14px; }
@media (min-width: 700px) { .art-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.note { border-radius: 12px; padding: 12px 14px; background: var(--note-tint); color: var(--note-ink); font-size: 0.875rem; line-height: 1.5; }
.note b { font-weight: 600; }
.checks { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: rgba(238, 241, 248, 0.06); box-shadow: inset 0 0 0 1px var(--line-night); }
.checks > b { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.checks ul { list-style: none; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 0.9375rem; line-height: 1.45; color: var(--on-night); }
.checks svg { width: 16px; height: 16px; margin-top: 3px; color: var(--blue-night); }
.hl { background: var(--amber-tint); border-radius: 3px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Options list (the reconciliation run) */
.opts { display: grid; gap: 0; margin: 0; }
.opts > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.opts > div:first-child { border-top: 0; padding-top: 0; }
.opts dt { color: var(--faint); font-size: 0.8125rem; padding-top: 2px; }
.opts dd { margin: 0; color: var(--ink); }
.opts code { font-family: var(--mono); font-size: 0.8125rem; }

/* Document excerpts (two proposals) */
.excerpt { display: grid; gap: 0; font-size: 0.875rem; line-height: 1.45; }
.excerpt dt { margin-top: 10px; font-size: 0.75rem; font-weight: 600; color: var(--faint); }
.excerpt dt:first-child { margin-top: 0; }
.excerpt dd { margin: 2px 0 0; }
.excerpt .sec { font-weight: 600; color: var(--ink); }

/* Comparison and exceptions tables */
.table-paper { padding: 6px 4px 4px; overflow: hidden; }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.4; }
.cmp caption { text-align: left; padding: 10px 14px 12px; font-size: 0.8125rem; color: var(--faint); }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--line); }
.cmp thead th { font-size: 0.75rem; font-weight: 600; color: var(--faint); border-top: 0; }
.cmp tbody th { font-weight: 600; color: var(--ink); }
.cmp .src { display: block; font-size: 0.75rem; color: var(--faint); margin-top: 2px; }
.cmp .nc { color: var(--amber-ink); font-style: italic; }
.cmp .diff { color: var(--ink); }
.cmp .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: var(--amber-tint); color: var(--amber-ink); }
.cat--b { background: var(--blue-soft); color: var(--blue-2); }
.cat--r { background: #fbe9e7; color: #8f2c23; }
@media (max-width: 699px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 12px 14px; border-top: 1px solid var(--line); }
  .cmp tbody th, .cmp td { border: 0; padding: 2px 0; }
  .cmp tbody th { padding-bottom: 4px; }
  .cmp td[data-k]::before { content: attr(data-k) " · "; font-size: 0.75rem; font-weight: 600; color: var(--faint); }
  .cmp caption { display: block; }
}

/* Mini spreadsheets */
.sheets { display: grid; gap: 14px; }
@media (min-width: 700px) { .sheets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sheet { border-radius: 12px; background: #fff; box-shadow: var(--sh-night); overflow: hidden; color: var(--text); }
.sheet-name { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #eef1ec; border-bottom: 1px solid var(--line); font-size: 0.75rem; color: var(--muted); }
.sheet-name code { font-family: var(--mono); font-size: 0.75rem; color: var(--ink); }
.sheet table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { padding: 4px 10px; border-bottom: 1px solid rgba(10, 15, 28, 0.06); text-align: left; white-space: nowrap; }
.sheet thead th { font-weight: 600; font-size: 0.75rem; color: var(--faint); background: #fafbf9; }
.sheet td:last-child, .sheet th:last-child { text-align: right; }
.sheet .rn { width: 1%; color: var(--faint); font-size: 0.6875rem; text-align: right; padding-right: 6px; background: #fafbf9; }
.sheet tr.flag td { transition: background-color 200ms ease; }
.demo-panel[data-highlight] .sheet tr.flag td { background: var(--amber-tint); }
.demo-panel[data-highlight] .sheet tr.flag td.rn { color: var(--amber-ink); font-weight: 600; }
.sheet .empty { color: var(--stop); font-style: italic; }
.demo-legend { display: none; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--on-night); }
.demo-legend::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--amber-tint); flex: none; }
.demo-panel[data-highlight] .demo-legend { display: flex; }
.sum-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sum { flex: 1 1 120px; display: grid; align-content: start; gap: 0; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: var(--sh-night); min-width: 0; }
@media (min-width: 700px) { .sum { flex: 0 1 auto; min-width: 128px; } }
.sum b { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum span { font-size: 0.8125rem; color: var(--muted); }
.link-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 2px; border: 0; background: none; color: #fff; font-size: 0.9375rem; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(238, 241, 248, 0.35); text-underline-offset: 0.3em; }
.link-btn:hover { text-decoration-color: #fff; }
.demo-after { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 18px; }

/* Audit: what the client receives ------------------------------------------- */
.kit { display: grid; gap: 14px; }
.kit-item { display: grid; gap: 14px; align-content: start; }
.kit-plate { position: relative; min-height: 0; }
.kit-plate--night { overflow: hidden; border-radius: var(--r-xl); padding: clamp(18px, 3vw, 36px); background: var(--night); }
/* A white illustration of the work (the workspace, a guide page) sits straight on the light
   page; on the dark one it gets the same navy tray as the diagnosis, so it reads as a framed
   document rather than a bright slab. */
.kit-plate--doc { border-radius: var(--r-xl); padding: var(--doc-tray-pad); background: var(--doc-tray); }
.kit-item figcaption { display: grid; gap: 2px; padding-inline: 4px; }
.kit-item figcaption b { font-size: 1.125rem; font-weight: 550; color: var(--ink); letter-spacing: -0.01em; }
.kit-item figcaption span { color: var(--muted); font-size: 0.96875rem; }
.kit-item figcaption b { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.kit-item figcaption b i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 0.8125rem; font-weight: 600; }
/* What a person still does with each piece. */
.kit-item figcaption .kit-human { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ok-ink); font-size: 0.9375rem; font-weight: 500; }
.kit-human svg { width: 15px; height: 15px; margin-top: 4px; flex: none; }
@media (min-width: 900px) {
  .kit { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
  .kit-item--a { grid-column: 1 / span 7; }
  .kit-item--b { grid-column: 8 / span 5; margin-top: 64px; }
  .kit-item--c { grid-column: 1 / span 5; }
  .kit-item--d { grid-column: 6 / span 7; margin-top: -40px; }
}
.doc-page { position: relative; border-radius: 12px; background: #fff; color: var(--text); box-shadow: var(--sh-2); padding: 22px 22px 18px; font-size: 0.875rem; line-height: 1.5; }
.kit-plate--night .doc-page, .night .doc-page { box-shadow: var(--sh-night); }
.doc-run { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 0.75rem; color: var(--faint); }
.doc-h { font-size: 1.125rem; font-weight: 550; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; }
.doc-rows { display: grid; gap: 0; }
.doc-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.doc-row b { font-weight: 550; color: var(--ink); display: block; }
.doc-row b + span { display: block; color: var(--muted); font-size: 0.8125rem; }
.doc-row.is-off b { color: var(--faint); }
.doc-row--code { grid-template-columns: 34px 1fr auto; }
.doc-row--code i { font-style: normal; font-family: var(--mono); font-size: 0.6875rem; color: var(--blue); }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.pill--ok { background: var(--ok-tint); color: var(--ok-ink); }
.pill--wait { background: var(--amber-tint); color: var(--amber-ink); }
.pill--blue { background: var(--blue-soft); color: var(--blue-2); }
.ws { display: grid; grid-template-columns: 34% 1fr; min-height: 250px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--sh-night); font-size: 0.8125rem; }
.ws-side { display: grid; align-content: start; gap: 6px; padding: 14px 12px; background: #f4f5f7; border-right: 1px solid var(--line); }
.ws-side span { display: block; padding: 6px 8px; border-radius: 6px; color: var(--muted); }
.ws-side span.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }
.ws-main { display: grid; align-content: start; gap: 10px; padding: 16px; }
.ws-main .lbl { font-size: 0.75rem; color: var(--faint); }
.ws-field { padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); line-height: 1.45; }
.ws-files { display: grid; gap: 6px; }
.ws-files span { display: grid; gap: 1px; padding: 7px 10px; border-radius: 8px; background: var(--mist); }
.ws-files code { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
@media (max-width: 559px) { .ws { grid-template-columns: 1fr; } .ws-side { display: none; } }
.prompt-stack { display: grid; gap: 12px; }
.prompt-card { display: grid; gap: 14px; align-content: space-between; padding: 18px 18px 14px; border-radius: var(--r-m); background: var(--night); color: var(--on-night); box-shadow: var(--sh-1); }
.night .prompt-card { background: var(--night-raised); box-shadow: inset 0 0 0 1px rgba(238, 241, 248, 0.1); }
.prompt-card small { font-size: 0.75rem; font-weight: 500; color: var(--on-night-2); }
.prompt-card p { font-size: 1rem; line-height: 1.45; color: #fff; }
.prompt-card .row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.prompt-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .prompt-grid { grid-template-columns: 1fr 1fr; } }
.copy-status { font-size: 0.8125rem; color: var(--on-night-2); }
.copy-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(238, 241, 248, 0.1); color: #fff; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--ease-out); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn:active { transform: scale(0.96); }
.copy-btn[data-state="done"] { background: var(--blue); }
.copy-btn--light { background: var(--mist); color: var(--ink); }
.copy-btn--light[data-state="done"] { background: var(--blue-soft); color: var(--blue-2); }
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { background: rgba(238, 241, 248, 0.18); } .copy-btn--light:hover { background: var(--mist-2); } }
.guide-page { display: grid; gap: 12px; }
.guide-num { font-size: 0.8125rem; font-weight: 600; color: var(--blue); }
.guide-ok { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); background: var(--ok-tint); color: var(--ok-ink); font-size: 0.9375rem; }
.guide-ok svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ui-dialog { border-radius: 12px; background: #fff; box-shadow: var(--sh-1), 0 0 0 1px var(--line); padding: 16px; font-size: 0.8125rem; }
.ui-dialog .t { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.ui-dialog .t svg { color: var(--faint); }
.ui-dialog .lbl { font-size: 0.75rem; color: var(--faint); margin: 10px 0 4px; }
.ui-field { padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.ui-field.on { box-shadow: inset 0 0 0 2px var(--blue); background: var(--blue-soft); }
.ui-field code { display: block; font-family: var(--mono); font-size: 0.71875rem; color: var(--muted); }
.ui-cap { font-size: 0.8125rem; color: var(--faint); }

/* Data rules */
.rules { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.rule { display: grid; gap: 12px; align-content: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rule h3 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 600; }
.rule h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.rule--min h3::before { background: var(--warn); }
.rule--never h3::before { background: var(--stop); }
.rule ul { list-style: none; display: grid; gap: 8px; color: var(--muted); font-size: 0.9375rem; }
.rule li { padding-left: 16px; position: relative; }
.rule li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1.5px; background: var(--line-2); }
.never { margin-top: 16px; padding: 18px 22px; border-radius: var(--r-l); background: var(--tab-on-bg); color: var(--tab-on-ink); box-shadow: inset 0 0 0 1px var(--tab-on-ring); font-weight: 500; }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); } .rule { padding: 26px 28px 28px 0; border-bottom: 0; } .rule + .rule { padding-left: 28px; border-left: 1px solid var(--line); } }

/* A link that makes its whole card clickable while the link text stays short. */
.stretch { text-decoration: none; color: inherit; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 2px solid var(--blue); outline-offset: -4px; }
.on-dark .stretch:focus-visible::after, .audit-card .stretch:focus-visible::after, .cpanel--rest .stretch:focus-visible::after { outline-color: var(--blue-night); }

/* Mostres: concept panels ---------------------------------------------------- */
.panels3 { display: grid; gap: 8px; list-style: none; }
.cpanel { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 28px; padding: clamp(24px, 3.6vw, 48px) clamp(20px, 3.6vw, 48px) 0; border-radius: var(--r-l); text-decoration: none; }
.cpanel-cap { display: grid; gap: 4px; align-content: start; position: relative; z-index: 2; }
.cpanel-cap h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.875rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 500; color: inherit; }
.cpanel-cap span { font-size: 0.9375rem; opacity: 0.85; }
.cpanel-cap p { margin-top: 8px; max-width: 24em; font-size: 0.96875rem; line-height: 1.5; opacity: 0.92; }
.cpanel-cap .link-arrow { margin-top: 16px; color: inherit; opacity: 1; }
.cpanel-media { position: relative; }
.cpanel-media .browser { display: none; border-radius: 12px 12px 0 0; transition: transform 700ms var(--ease-out); }
.cpanel-media .iphone { width: min(64%, 260px); margin: 0 auto -14%; transition: transform 700ms var(--ease-out); }
.cpanel--rest { background: var(--rest-ground); color: var(--rest-ground-ink); }
.cpanel--rest .cpanel-cap h2 { font-family: "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
.cpanel--fisio { background: var(--fisio-ground); color: var(--fisio-ground-ink); }
.cpanel--fisio .cpanel-cap h2 { font-family: "Albert Sans", var(--font); font-weight: 750; letter-spacing: -0.035em; }
.cpanel--asse { background: var(--asse-ground); color: var(--asse-ground-ink); }
.cpanel--asse .cpanel-cap h2 { font-family: "Spectral", Georgia, serif; font-weight: 600; }
@media (min-width: 900px) {
  .cpanel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
  .cpanel-cap { padding-bottom: 40px; }
  .cpanel-media .browser { display: block; }
  .cpanel-media .iphone { display: none; }
}
@media (hover: hover) and (pointer: fine) { .cpanel:hover .browser { transform: translateY(-8px); } .cpanel:hover .iphone { transform: translateY(-10px); } }
.audit-card { position: relative; isolation: isolate; display: grid; gap: 28px; margin-top: 8px; padding: clamp(24px, 4vw, 56px); border-radius: var(--r-l); background: var(--night); color: var(--on-night); }
.audit-card .lead { margin-top: 14px; max-width: 30em; color: var(--on-night-2); }
.audit-card .link-arrow { margin-top: 22px; color: #fff; }
.audit-card h2 { color: #fff; }
.audit-card .mini-steps { display: grid; gap: 8px; list-style: none; }
.audit-card .mini-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(238, 241, 248, 0.07); font-size: 0.9375rem; }
.audit-card .mini-steps i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-size: 0.75rem; font-weight: 600; flex: none; }
@media (min-width: 1000px) { .audit-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; } }

/* Page heads (inner pages) ---------------------------------------------- */
.page-head { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(36px, 5vw, 64px); }
.page-head-grid { display: grid; gap: 22px; }
.page-head .h1 { max-width: 14em; }
.page-head .lead { max-width: 33em; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-bottom: 22px; font-size: 0.875rem; color: var(--faint); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 1000px) {
  .page-head-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: end; }
}

/* Decisions (design thinking with detail crops) */
.decisions { display: grid; gap: clamp(56px, 8vw, 104px); }
.decision { display: grid; gap: 24px; align-items: center; }
.decision-media { display: grid; place-items: center; border-radius: var(--r-l); overflow: hidden; background: var(--dm-bg, var(--mist)); padding: clamp(14px, 2.4vw, 28px); }
.section--mist .decision-media { --dm-bg: light-dark(#fff, #1d222b); }
.decision-media img { width: auto; max-width: 100%; max-height: min(64vh, 600px); border-radius: 10px; box-shadow: var(--sh-1); }
.decision-copy { display: grid; gap: 12px; max-width: 30em; }
@media (min-width: 900px) {
  .decision { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .decision:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .decision:nth-child(even) .decision-media { order: 2; }
}

/* Concept pages ------------------------------------------------------------- */
.case-hero { position: relative; background: var(--case-bg, var(--mist)); color: var(--case-ink, var(--ink)); padding-top: clamp(32px, 5vw, 64px); }
.case-hero .crumbs, .case-hero .crumbs a { color: var(--case-soft, var(--muted)); }
.case-hero .crumbs li + li::before { color: var(--case-soft, var(--line-2)); opacity: 0.6; }
.case-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: clamp(32px, 3vw, 36px); }
.case-bar .crumbs { margin-bottom: 0; }
.case-top { display: grid; gap: 20px; padding-bottom: clamp(36px, 5vw, 64px); }
.case-title { font-family: var(--case-font, var(--font)); font-size: clamp(2.75rem, 1.6rem + 3.8vw, 5rem); line-height: 0.92; letter-spacing: var(--case-track, -0.03em); font-weight: var(--case-weight, 600); color: var(--case-title, var(--case-ink, var(--ink))); text-transform: var(--case-case, none); }
.case-summary { font-size: clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem); line-height: 1.5; max-width: 32em; color: var(--case-ink, var(--ink)); }
.case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--case-line, var(--line)); margin: 0; }
.case-meta > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--case-line, var(--line)); }
.case-meta dt { font-size: 0.8125rem; color: var(--case-soft, var(--faint)); }
.case-meta dd { margin: 2px 0 0; font-size: 0.96rem; font-weight: 500; }
.case-hero .label { background: var(--surface); box-shadow: none; }
.case-hero--rest { --case-bg: var(--rest-ground-hero); --case-ink: var(--rest-ground-ink); --case-soft: var(--rest-ground-soft); --case-line: var(--rest-ground-line); --case-title: var(--rest-ground-ink); --case-font: 'Newsreader', Georgia, serif; --case-weight: 400; --case-track: -0.025em; --case-case: none; }
.case-hero--fisio { --case-bg: var(--fisio-ground); --case-ink: var(--fisio-ground-ink); --case-soft: var(--fisio-ground-hero-soft); --case-line: var(--fisio-ground-line); --case-font: 'Albert Sans', var(--font); --case-weight: 720; --case-track: -0.045em; }
.case-hero--asse { --case-bg: var(--asse-ground); --case-ink: var(--asse-ground-text); --case-soft: var(--asse-ground-soft); --case-line: var(--asse-ground-line); --case-title: var(--asse-ground-ink); --case-font: 'Spectral', Georgia, serif; --case-weight: 600; --case-track: -0.025em; }
.case-hero .label--night { background: rgba(238, 241, 248, 0.1); color: var(--on-night); box-shadow: inset 0 0 0 1px rgba(238, 241, 248, 0.18); }
.case-shot { position: relative; z-index: 2; margin-bottom: calc(-1 * clamp(80px, 14vw, 240px)); }
.case-after { padding-top: calc(clamp(80px, 14vw, 240px) + var(--sec) * 0.7); }
.pair { position: relative; }
.pair .browser { width: 100%; }
.pair .iphone { position: absolute; right: -2%; bottom: -10%; width: 21%; }
@media (max-width: 699px) { .pair .iphone { width: 32%; right: -1%; bottom: -14%; } }
@media (min-width: 1000px) {
  .case-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: end; }
  .case-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; }
}
.brief { display: grid; gap: 28px; }
.brief-body { display: grid; gap: 18px; max-width: 38em; font-size: 1.125rem; line-height: 1.62; color: var(--text); }
.brief-goals { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.brief-goals li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.brief-goals svg { width: 18px; height: 18px; margin-top: 4px; color: var(--blue); }
@media (min-width: 1000px) { .brief { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }

.identity { display: grid; gap: 16px; }
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.swatch { display: grid; align-content: end; gap: 2px; min-height: 140px; padding: 14px; border-radius: var(--r-m); font-size: 0.8125rem; box-shadow: inset 0 0 0 1px rgba(10, 15, 28, 0.06); }
.swatch b { font-size: 0.9375rem; font-weight: 550; }
.swatch span { font-family: var(--mono); font-size: 0.75rem; }
.type-spec { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-l); background: var(--mist); }
.type-spec .sample { line-height: 1; color: var(--ink); }
.type-spec p { color: var(--muted); font-size: 0.9375rem; }
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); }
@media (min-width: 900px) {
  .identity { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .swatches { grid-column: span 5; }
  .type-spec { grid-column: span 7; }
  .photo-block { grid-column: 1 / -1; }
}

.scroll-frame { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--sh-2); }
.scroll-frame .browser-bar { position: sticky; top: 0; z-index: 2; }
.scroll-view { max-height: min(78vh, 820px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.scroll-view img { width: 100%; height: auto; }
.scroll-hint { margin-top: 12px; font-size: 0.875rem; color: var(--faint); }

.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3vw, 48px); align-items: start; padding: clamp(28px, 5vw, 72px) clamp(16px, 6vw, 96px); border-radius: var(--r-xl); }
.phones--rest { background: var(--rest-ground); }
.phones--fisio { background: var(--fisio-ground); }
.phones--asse { background: var(--asse-ground); }
.phones .iphone:nth-child(2) { margin-top: clamp(24px, 6vw, 72px); }
.phones .iphone:nth-child(3) { margin-top: clamp(12px, 3vw, 36px); }
.phones-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px; font-size: 0.9375rem; color: var(--muted); }
@media (max-width: 599px) {
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px 20px; scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
  .phones .iphone { scroll-snap-align: center; }
  .phones .iphone:nth-child(n) { margin-top: 0; }
}

.case-next { display: grid; gap: 24px; padding: clamp(28px, 5vw, 56px); border-radius: var(--r-xl); }
.case-next-link { display: grid; gap: 8px; text-decoration: none; }
.case-next-link small { font-size: 0.875rem; color: var(--faint); }
.case-next-link b { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 450; letter-spacing: -0.02em; color: var(--ink); display: inline-flex; align-items: center; gap: 12px; }
.case-next-link svg { width: 26px; height: 26px; transition: transform 220ms var(--ease-out); }
.night .case-next-link small { color: var(--on-night-2); }
.night .case-next-link b { color: #fff; }
@media (min-width: 900px) { .case-next { grid-template-columns: 1fr auto; align-items: end; } }
@media (hover: hover) and (pointer: fine) { .case-next-link:hover svg { transform: translateX(5px); } }

/* Audit demonstration page (deep detail). The opening shows three document pages: from 900px
   three equal columns with aligned tops and their natural heights, inside the navy band with room
   below (they no longer overlap the next section, so it needs no compensating space); below
   900px all three stacked in reading order, centred. Their shadow is the small artefact shadow
   for a dark ground, so nothing spills onto the white section after the band. */
.case-shot--docs { margin-bottom: 0; padding-bottom: clamp(40px, 6vw, 88px); }
.spread { display: grid; gap: 16px; max-width: 34rem; margin-inline: auto; }
.spread .doc-page { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 28px -16px rgba(0, 0, 0, 0.45); }
@media (min-width: 900px) { .spread { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } }
/* The audit page's sections are closer together than the site's 88–120px rhythm, so each heading
   stays with its material: 48px on phones, 72px on a large screen. */
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.opp-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.opp-table th, .opp-table td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.opp-table thead th { font-size: 0.8125rem; font-weight: 500; color: var(--faint); padding-top: 0; }
.opp-table tbody th { font-weight: 550; color: var(--ink); width: 36%; }
.opp-table tbody th span { display: block; font-weight: 400; color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.opp-table td:last-child { padding-right: 0; text-align: right; }
.table-scroll { overflow-x: auto; }
@media (max-width: 799px) {
  .opp-table thead { display: none; }
  .opp-table, .opp-table tbody, .opp-table tr, .opp-table th, .opp-table td { display: block; width: auto; }
  .opp-table tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .opp-table th, .opp-table td { border: 0; padding: 2px 0; text-align: left !important; }
  .opp-table tbody th { width: auto; padding-bottom: 6px; }
  .opp-table td[data-k]::before { content: attr(data-k) ": "; color: var(--faint); }
}
.layers { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.layers li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.layers b { font-weight: 550; color: var(--ink); }
.layers span { grid-column: 1 / -1; color: var(--muted); font-size: 0.9375rem; }
.layers code { grid-row: 1; grid-column: 2; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.opp { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.opp li { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.opp i { font-style: normal; font-family: var(--mono); font-size: 0.75rem; color: var(--blue); }
.opp b { font-weight: 550; color: var(--ink); }
.opp span.why { grid-column: 2 / -1; color: var(--muted); font-size: 0.9375rem; }
.guide-steps { list-style: none; display: grid; gap: 12px; counter-reset: g; }
.guide-steps li { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line); counter-increment: g; }
.guide-steps .verb { font-size: 0.8125rem; font-weight: 600; color: var(--blue); }
.guide-steps h3 { font-size: 1.0625rem; font-weight: 550; }
.guide-steps p { color: var(--muted); font-size: 0.9375rem; }
.guide-steps .ok { display: flex; gap: 8px; color: var(--ok-ink); font-size: 0.875rem; }
.guide-steps .ok svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
@media (min-width: 800px) { .guide-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .guide-steps { grid-template-columns: repeat(3, 1fr); } }

/* ELEVA page --------------------------------------------------------------
   An editorial sequence: three verbs as the statement, the two disciplines at a large
   scale (a website and an AI workspace, each on its own ground), the shared path,
   real details from the work, and an invitation on navy. */
/* The opening (v14): one broad panel in the content column, close under the header, holding the
   three verbs and the paragraph. Its height is its content and padding, and the next section follows
   in normal flow (it may start in the first screen). A subtle blue-grey surface on the light page, a
   raised slate with a faint edge on the dark one, the column's 28px corners, no shadow. The text
   rises inside the panel; the panel itself never moves. */
.eleva-hero { --eleva-fs: clamp(3.5rem, 0.8rem + 4.8vw, 5.25rem); --step: 1.4; padding-top: clamp(12px, 2vw, 28px); }
.eleva-panel { border-radius: var(--r-xl); background: var(--eleva-panel); box-shadow: inset 0 0 0 1px var(--eleva-panel-edge); padding: clamp(36px, 5.6vw, 88px) clamp(22px, 5.6vw, 88px) clamp(40px, 6vw, 96px); }
/* Each phrase wraps at its first fitting break (not balanced), so a phrase that needs two lines on
   a phone splits as «Make it / clear.», never «Make / it clear.». The phrases step in by --step em
   (1.4 from 900px, 0.7 on tablets, none on phones) and the paragraph aligns with the third. */
.eleva-title { font-size: var(--eleva-fs); line-height: 1.04; text-wrap: wrap; }
.eleva-title .ln { display: block; }
.eleva-title .ln:nth-child(2) { padding-left: calc(var(--step) * 1em); }
.eleva-title .ln:nth-child(3) { padding-left: calc(2 * var(--step) * 1em); }
/* The third phrase is quieter than the first two but still part of the statement: slate on the light
   panel, a light blue-grey on the dark one (it was the faint grey, which read as disabled there). */
.eleva-title-3 { color: var(--eleva-soft); }
.eleva-sub { margin-top: clamp(22px, 3vw, 36px); margin-left: calc(2 * var(--step) * var(--eleva-fs)); max-width: 32em; }
.eleva-hero + .section { padding-top: clamp(56px, 6vw, 88px); }
/* The last section closes nearer the footer than the site's 120px rhythm. */
.section--close { padding-bottom: clamp(56px, 6vw, 88px); }
@media (max-width: 899px) { .eleva-hero { --step: 0.7; } }
@media (max-width: 699px) { .eleva-hero { --eleva-fs: clamp(2.5rem, 14vw, 3.75rem); --step: 0; } }
/* The page entrance (Home, Webs, Auditories d'IA, Com treballem, Contacte): each part of the
   opening rises into place, opacity and 0.18em upward over 520ms, one part every 210ms, and the
   supporting text after the heading. Only opacity and position move, so the layout is final from
   the first frame; the heading stays whole for screen readers; links and buttons never wait.
   - It starts when the page is first shown, not when its styles are read: the head script adds
     .entrance-go after the first contentful paint, so a heavy page (Webs) or a browser that holds
     the previous page while the next one loads cannot spend the entrance before anyone sees it.
     Until then the parts wait at their first frame (no flash of the text before it rises).
   - If that signal never comes, eleva-shown puts everything in place after 3s anyway, so no
     failure can leave the text invisible.
   - Inline parts (the two halves of the Webs heading) keep the heading's own wrapping in every
     language; they rise with `top`, since an inline box cannot be transformed.
   - On the home page's first visit the curtain is the entrance (its phrase rises the same way, and
     the head script marks the page intro-ran), so the heading beneath does not rise again.
   - Once per page load; none with reduced motion or without JavaScript. */
@keyframes eleva-rise { from { opacity: 0; transform: translateY(var(--rise-y, 0.18em)); } to { opacity: 1; transform: none; } }
@keyframes eleva-rise-inline { from { opacity: 0; top: var(--rise-y, 0.18em); } to { opacity: 1; top: 0; } }
@keyframes eleva-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes eleva-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eleva-shown { to { opacity: 1; transform: none; top: 0; } }
.js .rise { animation: eleva-rise var(--rise-dur, 520ms) var(--rise-ease, var(--ease-out)) var(--rise-delay, 0ms) both paused, eleva-shown 1ms linear 3s forwards; }
.js .rise-inline { position: relative; animation-name: eleva-rise-inline, eleva-shown; }
/* A large panel (the audit example with its button, the contact card) enters as one piece, one step
   after the supporting text: background, borders and contents together, a soft fade with 8px of
   travel (v17; they used to be there before the text). */
.js .rise-panel { animation-name: eleva-panel, eleva-shown; --rise-dur: 620ms; --rise-ease: var(--ease-soft); }
.rise-panel { --rise-delay: 630ms; }
/* A band that only appears (the first concept on Webs), with no movement at all. */
.js .rise-fade { animation-name: eleva-fade, eleva-shown; --rise-dur: 700ms; --rise-ease: var(--ease-soft); }
.js.entrance-go .rise { animation-play-state: running; }
/* Focus never lands on something still invisible: a group that receives focus (the head script marks
   it) is shown at once. */
.js .rise.rise-now { animation: none; }
.rise-2 { --rise-delay: 210ms; }
.rise-3 { --rise-delay: 420ms; }
/* After a three-part heading, the paragraph starts once the third part has finished (420 + 520). */
.rise-4 { --rise-delay: 940ms; }
/* Webs is calmer (v17: the owner saw a «pop-pop»): longer, gentler fades with less travel, a shorter
   stagger, and the first concept fading in after the text; its demonstration waits for the entrance
   to settle (eleva.js). */
.page-intro--webs { --rise-dur: 760ms; --rise-ease: var(--ease-soft); --rise-y: 0.1em; }
.page-intro--webs .rise-2 { --rise-delay: 180ms; }
.page-intro--webs .rise-3 { --rise-delay: 360ms; }
.study.rise-fade { --rise-delay: 480ms; }
html.intro-ran .rise { animation: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { animation: none; } }
.disciplines { display: grid; gap: 8px; margin: 0 8px; }
.disc { display: grid; overflow: hidden; margin: 0; border-radius: var(--r-l); }
.disc--web { background: var(--rest-bg); color: var(--rest-ink); }
.disc--ia { background: var(--night); color: var(--on-night); }
.disc-art { position: relative; padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px) 0; }
.disc-art .browser { border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px rgba(36, 33, 29, 0.08), var(--sh-2); }
.disc--ia .disc-art { display: flex; align-items: flex-end; }
.disc--ia .ws { width: 100%; max-width: 640px; margin-inline: auto; border-radius: 12px 12px 0 0; min-height: 280px; color: var(--text); }
.disc-cap { display: grid; gap: 14px; align-content: center; padding: clamp(24px, 3.4vw, 48px); }
.disc-title { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1.02; letter-spacing: -0.028em; font-weight: 450; }
.disc--ia .disc-title { color: #fff; }
.disc-cap p { max-width: 26em; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.55; }
.disc--web .disc-cap p { color: var(--rest-soft); }
.disc--ia .disc-cap p { color: var(--on-night-2); }
.disc-cap .link-arrow { color: inherit; }
.disc--ia .disc-cap .link-arrow { color: #fff; }
.disc--ia .disc-cap .link-arrow span { text-decoration-color: rgba(255, 255, 255, 0.35); }
.disc-note { margin-top: 10px; }
@media (min-width: 1000px) {
  .disc { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); min-height: 520px; }
  .disc-art { padding: 48px 0 0 48px; display: flex; align-items: flex-end; }
  .disc-art .browser { width: 100%; }
  .disc--ia { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .disc--ia .disc-cap { order: -1; }
  .disc--ia .disc-art { padding: 48px 48px 0 0; justify-content: flex-start; }
  .disc--ia .ws { margin: 0; min-height: 360px; font-size: 0.875rem; }
}
@media (min-width: 1500px) { .disciplines { margin: 0 12px; gap: 12px; } }
@media (hover: hover) and (pointer: fine) {
  .disc-art > * { transition: transform 700ms var(--ease-out); }
  .disc:hover .disc-art > * { transform: translateY(-6px); }
}
.path-promise { margin-top: clamp(28px, 3.4vw, 44px); padding-top: 20px; border-top: 1px solid var(--line); max-width: 52em; color: var(--muted); }

/* Real details from the work: crops of the concepts and an artefact of the demonstration. */
.care { display: grid; gap: 28px 24px; }
.care-item { margin: 0; display: grid; gap: 12px; align-content: start; }
.care-art { overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px var(--frame-line); background: #fff; }
.care-art img { width: 100%; height: auto; }
.care-art--fisio img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 100%; }
@media (max-width: 899px) { .care-art--rest img, .care-art--asse img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 0 0; } }
.care-art--rest { background: #fbf9f5; }
.care-art--fisio { background: var(--fisio-paper); }
.care-art--asse { background: var(--asse-paper); }
.care-art--ia { display: grid; align-content: center; min-height: 100%; padding: clamp(18px, 3vw, 32px); background: var(--night); box-shadow: none; }
.care-item figcaption { font-size: 0.96875rem; line-height: 1.5; color: var(--muted); max-width: 36em; }
.care-item figcaption b { color: var(--ink); font-weight: 600; }
.care-item figcaption span { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--faint); }
@media (min-width: 900px) {
  .care { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .care-item { grid-column: span 5; }
  .care-item--wide { grid-column: span 7; }
  .care-item:nth-child(3) { grid-column: span 5; }
  .care-item:nth-child(4) { grid-column: span 7; }
  .care-item:nth-child(3) .care-art { min-height: 0; }
}

/* The invitation, on navy: one action and the two ways to reach ELEVA. */
.invite { margin: 0 8px; border-radius: var(--r-l); background: var(--night); color: var(--on-night); padding-block: clamp(56px, 7vw, 104px); }
.invite-grid { display: grid; gap: 28px; }
.invite-title { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1.04; letter-spacing: -0.028em; font-weight: 450; color: #fff; }
.invite .lead { margin-top: 14px; color: var(--on-night-2); max-width: 28em; }
.invite-actions { display: grid; gap: 20px; align-content: end; justify-items: start; }
.invite-lines { display: grid; gap: 4px; }
.invite-lines a { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); font-weight: 450; letter-spacing: -0.01em; color: #fff; text-decoration: underline; text-decoration-color: rgba(238, 241, 248, 0.3); text-underline-offset: 0.22em; width: fit-content; }
@media (min-width: 900px) { .invite-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; } }
@media (min-width: 1500px) { .invite { margin: 0 12px; } }
@media (hover: hover) and (pointer: fine) { .invite-lines a:hover { text-decoration-color: currentColor; } }

/* The shared path, told with one example: four moments, each with a real piece of the
   work (the questions, the website form and the workspace instructions, the draft for
   review, the guide). */
.path { list-style: none; display: grid; gap: 0; }
.path > li { position: relative; display: grid; gap: 10px; align-content: start; padding: 0 0 36px 54px; }
.path > li::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 1px; background: var(--line-2); }
.path > li:last-child { padding-bottom: 0; }
.path > li:last-child::before { display: none; }
.path-num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 0.9375rem; font-weight: 600; }
.path h3 { padding-top: 5px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.path > li > p { font-size: 0.96875rem; line-height: 1.5; color: var(--muted); max-width: 30em; }
.path-art { margin-top: 6px; border-radius: var(--r-m); padding: 16px 16px 14px; font-size: 0.84375rem; line-height: 1.5; max-width: 420px; }
.path-art--ask { background: var(--mist); }
.path-art--ask b, .path-note b { display: block; margin-bottom: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--faint); }
.path-art--ask ul { list-style: none; display: grid; gap: 6px; }
.path-art--ask li { position: relative; padding-left: 16px; color: var(--ink); }
.path-art--ask li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; border-radius: 1px; background: var(--blue); }
.path-art--pair { display: grid; gap: 8px; padding: 0; }
.path-art--pair img { width: 100%; border-radius: var(--r-s); box-shadow: 0 0 0 1px var(--frame-line); }
.path-note { padding: 12px 14px 13px; border-radius: var(--r-s); background: var(--night); }
.path-note b { margin-bottom: 4px; color: var(--blue-night); }
.path-note p { color: var(--on-night); }
.path-art--draft, .path-art--guide { background: #fff; box-shadow: 0 0 0 1px var(--frame-line), var(--sh-1); }
.path-art--draft p { color: var(--ink); }
.path-art .ai-tag { margin-bottom: 6px; }
.path-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ok-ink); font-weight: 500; }
.path-check svg { width: 14px; height: 14px; margin-top: 3px; flex: none; }
.path-run { display: block; margin-bottom: 8px; font-size: 0.71875rem; color: var(--faint); }
.path-art--guide b { display: block; margin-bottom: 4px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.path-art--guide p { color: var(--muted); }
.path-art--guide .path-check { color: var(--ok-ink); }
.path-note-line { margin-top: 14px; }
@media (min-width: 1000px) {
  .path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .path > li { grid-template-rows: auto auto 1fr; padding: 58px 0 0; }
  .path > li::before { left: 46px; right: -28px; top: 18px; bottom: auto; width: auto; height: 1px; }
  .path > li:last-child::before { display: none; }
  .path-art { align-self: start; }
}

.next-step { display: grid; gap: 24px; }
.next-step .lead { margin-top: 14px; max-width: 32em; }
@media (min-width: 900px) { .next-step { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; } }
.credits-block { display: grid; gap: 10px; max-width: 760px; padding-top: 28px; border-top: 1px solid var(--line); }
.credits-block .credits { margin-top: 6px; }
.credits-block .fine { max-width: 72ch; }
.credits > div { padding: 12px 0; }
.credits dt { font-size: 0.9375rem; font-weight: 550; }
.credits dd { font-size: 0.875rem; }
.credits a { color: var(--ink); }
.checklist { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.checklist svg { width: 18px; height: 18px; margin-top: 4px; color: var(--blue); }

/* Contact page: one composition. The invitation and what to tell us on the left, the
   two ways to reach ELEVA in one card on the right; calm type, large tap targets. */
.contact-page { padding: var(--hero-pad) 0 clamp(56px, 7vw, 96px); }
.contact-layout { display: grid; gap: 28px; align-items: start; }
.contact-intro .hero-sub { margin-top: 14px; max-width: 30em; }
.contact-tips-title { margin-top: clamp(26px, 3vw, 36px); font-size: 1.0625rem; font-weight: 550; letter-spacing: -0.005em; color: var(--ink); }
.contact-intro .checklist { margin-top: 10px; }
.contact-note { margin-top: 14px; font-size: 0.9375rem; color: var(--muted); max-width: 32em; }
.contact-card { display: grid; border-radius: var(--r-l); background: var(--mist); }
.contact-line { display: grid; gap: 8px; padding: 22px clamp(20px, 2.6vw, 28px); }
.contact-line + .contact-line { border-top: 1px solid var(--line); }
.contact-line .k { font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.contact-line .v { display: inline-flex; align-items: center; width: fit-content; min-height: 44px; font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.22em; overflow-wrap: anywhere; transition: text-decoration-color 160ms ease; }
.contact-line .hint { font-size: 0.9375rem; color: var(--muted); margin-top: -4px; }
.contact-line .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
/* A long label («Escríbenos por WhatsApp», «Message us on WhatsApp») wraps inside its button on the
   narrowest phones instead of pushing the card past the screen. */
.contact-line .actions .btn { max-width: 100%; height: auto; min-height: 48px; padding-block: 12px; white-space: normal; text-align: left; line-height: 1.3; }
.contact-line .copy-btn--light { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.contact-line .status { font-size: 0.875rem; color: var(--muted); }
.contact-line--subjects .quick { margin-top: 2px; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); } }
@media (hover: hover) and (pointer: fine) { .contact-line .v:hover { text-decoration-color: currentColor; } }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick .btn-sm { height: 44px; }

/* Com treballem: five steps for each service, side by side. */
.lanes { display: grid; gap: 14px; }
.lane { display: grid; gap: 16px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-l); background: var(--mist); }
.lane-title { font-size: 1.375rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; }
.lane-steps { list-style: none; display: grid; counter-reset: lane; }
.lane-steps li { counter-increment: lane; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.lane-steps li::before { content: counter(lane); grid-row: span 2; font-size: 0.875rem; font-weight: 600; color: var(--blue-2); padding-top: 1px; }
.lane-steps b { font-weight: 550; color: var(--ink); }
.lane-steps span { color: var(--muted); font-size: 0.96875rem; line-height: 1.5; }
@media (min-width: 900px) { .lanes { grid-template-columns: 1fr 1fr; gap: 16px; } }
.credits-intro { padding-bottom: 20px; }
.credits-page { padding-bottom: clamp(56px, 7vw, 88px); }
.credits-more { margin-top: 18px; }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-night-2); padding: clamp(48px, 5.4vw, 72px) 0 calc(24px + env(safe-area-inset-bottom)); }
.footer-cta { display: grid; gap: 22px; padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line-night); }
.footer-cta .h2 { color: #fff; max-width: 14em; font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.375rem); }
.footer-cta .lead { color: var(--on-night-2); max-width: 26em; margin-top: 16px; }
@media (min-width: 1000px) { .footer-cta { grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: 56px; } }
.cta-lines { display: grid; gap: 2px; }
.cta-lines a { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: 450; letter-spacing: -0.01em; color: #fff; text-decoration: none; width: fit-content; }
.cta-lines a span { text-decoration: underline; text-decoration-color: rgba(238, 241, 248, 0.3); text-underline-offset: 0.2em; transition: text-decoration-color 160ms ease; }
.cta-lines small { display: block; font-size: 0.875rem; color: var(--on-night-2); }
.cta-lines small + a + small { margin-top: 12px; }
@media (hover: hover) and (pointer: fine) { .cta-lines a:hover span { text-decoration-color: #fff; } }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; padding: 36px 0 32px; }
.footer-grid .brand-col { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
.footer-grid .brand-col img { height: 24px; width: auto; }
.footer-grid h2 { font-size: 0.8125rem; font-weight: 500; color: var(--on-night-2); margin-bottom: 12px; }
.footer-grid ul { list-style: none; display: grid; gap: 8px; }
.footer-grid a { color: #fff; text-decoration: none; font-size: 0.9375rem; }
@media (pointer: coarse) {
  .footer-grid ul { gap: 0; }
  .footer-grid a { display: inline-flex; align-items: center; min-height: 44px; }
  .link-arrow { min-height: 44px; }
}
.footer-grid a:hover { text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--line-night); font-size: 0.8125rem; }
.footer-base a { color: #fff; text-underline-offset: 0.2em; }
@media (pointer: coarse) { .footer-base a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } .footer-grid .brand-col { grid-column: auto; } }

/* 404 */
.notfound { min-height: 56vh; display: grid; align-content: center; gap: 20px; }

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.intro-on .intro[hidden] { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn:active, .copy-btn:active, .demo-task:active { transform: none; }
  .cpanel:hover .browser, .cpanel:hover .iphone { transform: none; }
  .cpanel:has(.stretch:active), .preview-toggle:active, .stage-tab:active, .nav-toggle:active, .m-toggle:active { transform: none; }
  .preview-site, .preview-pointer { display: none; }
}

/* On the dark page the navy stages and the footer keep a faint edge (a full-width band only
   along its lower side, so no line runs down the window's edges). */
.site-footer { box-shadow: inset 0 1px 0 var(--edge); }
.qa-band, .workbench, .audit-card, .night { box-shadow: inset 0 0 0 1px var(--edge); }
.case-hero.night { box-shadow: inset 0 -1px 0 var(--edge); }