@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/webfonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/webfonts/geist-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/webfonts/geist-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/webfonts/geist-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/webfonts/geist-mono-symbols.woff2) format("woff2"); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face {
  font-family: "Geist Pixel Line";
  src: url(/webfonts/geist-pixel-line.woff2) format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Layout: a Night hero sized to the first screen: headline across the top, lede, buttons and the industries list down the left, and a live 3D stage filling the rest that builds each sector's part layer by layer; then the problem as three rows that open one at a time beside a drawing for the open row; then Our solution on Paper as four steps that open one at a time beside a drawing for the open step; then What we build beside a stage with its own view for each thing we build (a quote desk before and after it is built, an agent working an email thread, Ciao wired to the tools a business already runs). Single committed look: dark, with one Paper band. */
:root {
  color-scheme: dark;
  --night: #0F0E0D;
  --graphite: #1A1917;
  --line: rgba(243, 238, 230, 0.12);
  --line-2: rgba(243, 238, 230, 0.24);
  --ash: #F3EEE6;
  --steel: #9A968F;
  --paper: #ECE8E1;
  --ink: #141210;
  --ink-2: #5C5852;
  --paper-line: rgba(20, 18, 16, 0.16);
  --torch: #F0642A;
  /* Sector accents: Torch's lightness, matched chroma */
  --s1: #F0642A; --s2: #E36A72; --s3: #B39213; --s4: #5AAC52;
  --s5: #309DEB; --s6: #17ACA5; --s7: #9384EC; --s8: #CF6EB6;
  --f-pixel: "Geist Pixel Line", "Geist Mono", ui-monospace, Menlo, monospace;
  --f-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html.lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .secu-live i { animation: none; } }
body { background: var(--night); color: var(--ash); font-family: var(--f-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--night); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol { margin: 0; }
main section { scroll-margin-top: var(--bar); }
.in { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pixel { font-family: var(--f-pixel); font-weight: 500; letter-spacing: -0.01em; line-height: 1; text-wrap: balance; }
.eyebrow { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--torch); flex: none; }
.wordmark { font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.06em; font-size: 0.9375rem; }
/* The pixel wordmark (2026-10-23): an inline SVG on a 70 x 18 pixel grid, sized by the font size it sits in (18/17 em, so the nav's
   17 px draws it at exactly 1x). Faces take the text colour, the checkered extrusion takes --wm-side. */
.wordmark:not(.wm-text) { display: inline-flex; vertical-align: middle; line-height: 0; --wm-side: var(--torch); }
.wordmark .wm { height: calc(1em * 18 / 17); width: auto; overflow: visible; }
/* The seal logo (2026-10-23 17:14): the seal and the name in Geist, sized by the font size it sits in (the seal is 0.92em). */
.wordmark.lk { display: inline-flex; align-items: center; gap: 0.32em; font-family: var(--f-sans); font-weight: 600; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; vertical-align: middle; }
.wordmark.lk .seal { height: 0.92em; width: auto; flex: none; fill: var(--torch); }
.nav .logo .wordmark.lk, .menu .logo .wordmark.lk, .book-top .wordmark.lk { font-size: 1.375rem; }
.wm-f { fill: currentColor; } .wm-s { fill: var(--wm-side, currentColor); }
.mono { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--torch); outline-offset: 3px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; font: 500 0.9375rem/1 var(--f-sans); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.btn.torch { background: var(--torch); color: var(--night); }
.btn.torch:hover { background: #F57A45; }
.btn.line { background: transparent; border-color: var(--line-2); color: var(--ash); }
.btn.line:hover { border-color: rgba(243, 238, 230, 0.5); }
.btn .ar { font-family: var(--f-mono); }

/* Nav: the wordmark, a booking link and Menu. The bar sits clear at the top of the page and turns solid once it scrolls, hides while
   you scroll down and comes back as soon as you scroll up. Menu opens a full-screen menu (a modal dialog): big links down the left,
   and beside them a preview of what's behind the link under the pointer. Phones get the links, the industries and a booking button. */
:root { --bar: 72px; --nav-ease: cubic-bezier(0.16, 1, 0.3, 1); }
@media (max-width: 760px) { :root { --bar: 60px; } }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; border-bottom: 1px solid transparent; transition: transform 0.45s var(--nav-ease), background-color 0.25s, border-color 0.25s; }
.nav.solid { background: var(--night); border-bottom-color: var(--line); }
html.nav-away .nav { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 1px)); }
.nav > .in, .menu-top > .in { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); height: var(--bar); }
.logo { display: inline-flex; align-items: center; gap: 6px; color: var(--ash); }
/* The Ciao mark (Kerf, heavy line) as on the logo page's lockup on Night: Paper face, Torch extrusion, about 1.3x the size of
   CIAO with a gap of about a third of CIAO's size. Paul (20:26) didn't like the solid Torch mark here. */
.logo-sq { display: none !important; width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 107.99 107.99'%3E%3Cpath fill='%23F0642A' fill-rule='evenodd' d='M77.6 46L77.3 45.9 77 45.8 76.7 45.7 76.3 45.5 76.1 45.3 75.8 45.1 75.6 44.8 75.4 44.5 75.2 44.1 74.7 42.5 74.3 41.3 73.7 40.2 73.2 39.3 72.5 38.2 72.2 37.7 71.6 37 70.8 36.1 70.2 35.5 69.7 35.1 68.8 34.3 67.7 33.6 66.8 33.1 65.7 32.5 64.6 32.1 63.4 31.7 62.1 31.4 60.9 31.1 59.7 31 58.8 31 58.2 31 57.6 31 56.8 31.1 55.5 31.3 54.7 31.5 54.1 31.6 52.9 32 52.3 32.2 51.5 32.5 50.4 33.1 49.4 33.8 48.8 34.1 48.2 34.6 47.2 35.4 46.8 35.8 46.2 36.4 45.4 37.4 44.9 38 44.5 38.5 44.2 39.1 43.7 39.8 43.5 40.4 43.1 41.1 44.1 40.8 45 40.5 46 40.3 46.9 40.2 47.9 40.1 48.9 40 50.1 40 51.1 40 52.1 40.1 53 40.3 54 40.5 55.2 40.8 56.1 41.1 57.3 41.5 58.2 41.9 59.1 42.4 59.9 42.8 60.7 43.4 61.5 43.9 62.5 44.7 63.4 45.5 64.1 46.2 64.8 46.9 65.4 47.7 66 48.5 66.7 49.5 67.2 50.4 67.6 51.2 68 52.1 68.4 53 68.7 54 69 55 74.1 55 74.4 54.3 74.7 53.5 75.2 51.9 75.3 51.6 75.5 51.3 75.9 50.9 76.3 50.5 76.9 50.2 77.2 50.1 77.5 50 78 50 97.1 50 100.1 46 78 46ZM9.6 41.7L8.8 43.7 8.2 45.2 7.5 47.2 7 49.3 6.5 51.4 6.2 53 5.9 55.1 5.8 56.8 5.7 58.9 5.7 61.1 5.8 63.2 5.9 64.8 6.2 67 6.6 69.1 7.1 71.2 7.7 73.3 8.4 75.3 9 76.8 9.9 78.8 10.8 80.7 11.9 82.6 13.1 84.4 14 85.8 15.3 87.5 16.3 88.7 17.8 90.3 19.3 91.9 20.9 93.3 22.1 94.3 23.9 95.7 25.6 96.9 27.5 98 29.4 99 31.3 100 32.8 100.7 34.3 101.2 36.3 101.9 38.4 102.5 40.5 103 42.1 103.3 44.2 103.7 46.4 103.9 48.5 104 50.2 104 52.3 103.9 54.5 103.7 56.6 103.4 58.8 103 60.9 102.5 62.4 102.1 64.5 101.4 66.5 100.7 68.5 99.8 70.4 98.8 71.8 98 73.6 96.9 75 96 76.7 94.7 78.4 93.3 80 91.9 81.1 90.7 82.6 89.1 83.8 87.7 82.8 88.3 81.3 89.2 79.8 90 78.2 90.7 76.6 91.4 75 92.1 73.4 92.6 71.7 93.1 70.1 93.6 68.4 94 66.7 94.3 65.5 94.5 63.8 94.7 62.1 94.9 60.3 95 58.6 95 56.9 95 55.2 94.9 53.5 94.7 51.8 94.5 50 94.2 48.4 93.9 46.7 93.5 45 93 43.4 92.5 41.7 91.8 40.6 91.4 39 90.7 37.5 90 36 89.2 34.5 88.3 33 87.4 31.6 86.4 30.2 85.4 28.8 84.3 27.9 83.6 26.7 82.4 25.4 81.2 24.2 80 23.1 78.7 21.9 77.4 20.9 76 20.2 75 19.2 73.6 18.3 72.2 17.5 70.7 16.9 69.6 16.1 68.1 15.2 66 14.4 63.9 13.8 62.2 13.2 60 12.7 57.7 12.2 55.5 12 53.7 11.8 51.5 11.7 49.7 11.6 47.4 11.7 45.7 11.9 43.4 12.1 41.1 12.5 38.9 12.9 37.1 13.5 34.9 12.8 36 11.9 37.4 11.1 38.8 10.6 39.7Z'/%3E%3Cpath fill='%23ECE8E1' fill-rule='evenodd' d='M102.2 42.1L101.9 39.9 101.4 37.8 100.9 35.7 100.2 33.7 99.5 31.7 98.6 29.7 97.7 27.7 96.7 25.8 95.5 24 94.3 22.2 93 20.5 91.6 18.9 90.1 17.3 88.6 15.8 87 14.3 85.3 13 83.5 11.7 81.7 10.5 79.8 9.4 77.9 8.4 76 7.6 74 6.8 71.9 6 69.8 5.5 67.8 5 65.6 4.6 63.5 4.3 61.3 4.1 59.2 4 57 4 54.9 4.2 52.7 4.4 50.6 4.7 48.5 5.2 46.4 5.7 44.3 6.4 42.3 7.1 40.3 8 38.4 8.9 36.5 10 34.6 11.1 32.9 12.3 31.1 13.6 29.5 15 27.9 16.5 26.4 18.1 25 19.7 23.6 21.4 22.4 23.1 21.2 24.9 20.1 26.8 19.1 28.7 18.2 30.7 17.4 32.7 16.7 34.7 16.1 36.8 15.6 38.9 15.2 41 14.9 43.1 14.7 45.3 14.6 47.5 14.7 49.6 14.8 51.8 15 53.9 15.4 56 15.8 58.2 16.4 60.2 17 62.3 17.8 64.3 18.6 66.3 19.6 68.3 20.6 70.2 21.8 72 23 73.8 24.3 75.5 25.7 77.1 27.1 78.7 28.7 80.2 30.3 81.7 32 83 33.7 84.3 35.5 85.5 37.4 86.5 39.3 87.5 41.3 88.4 43.3 89.2 45.3 89.9 47.4 90.5 49.5 91 51.6 91.4 53.8 91.7 55.9 91.9 58.1 92 60.2 92 62.4 91.8 64.5 91.6 66.2 91.3 67.8 91 69.8 90.5 71.4 90.1 73 89.6 75 88.8 76.5 88.2 78.4 87.3 79.8 86.5 81.7 85.5 83.5 84.3 84.8 83.3 86.1 82.3 87.4 81.3 89 79.9 90.1 78.7 91.2 77.5 92.7 75.9 93.7 74.6 94.9 72.9 95.8 71.5 96.9 69.7 97.7 68.3 98.4 66.8 99.1 65.3 99.7 63.8 100.2 62.3 100.9 60.2 101.3 58.7 101.8 56.6 102.1 55 102.3 53 78 53 77.7 54 77.4 55 77 55.9 76.6 56.8 76.2 57.6 75.7 58.5 75.1 59.3 74.5 60.1 73.9 60.9 73.3 61.6 72.6 62.3 71.9 63 71.1 63.6 70.2 64.3 69.3 64.9 68.5 65.4 67.6 65.9 66.7 66.3 65.8 66.7 64.9 67 64 67.3 63 67.5 62 67.7 61.1 67.8 60.1 67.9 59.1 68 58.1 68 56.9 67.9 55.9 67.8 55 67.7 54 67.5 53.1 67.2 51.9 66.8 50.8 66.4 49.6 65.9 48.6 65.3 47.5 64.6 46.5 63.9 45.6 63.1 44.7 62.3 43.8 61.4 43 60.5 42.3 59.5 41.6 58.5 41 57.4 40.5 56.3 40 55.2 39.6 54.3 39.3 53.1 39 51.9 38.8 50.7 38.7 49.7 38.6 48.5 38.6 47.3 38.7 46 38.9 44.8 39.1 43.6 39.4 42.4 39.8 41.3 40.2 40.1 40.8 39 41.4 37.9 42 36.9 42.7 35.9 43.5 34.9 44.3 34 45.4 33 46.3 32.2 47.3 31.5 48.4 30.8 49.4 30.2 50.8 29.6 51.9 29.2 53.1 28.8 54.2 28.5 55.5 28.2 56.7 28.1 57.9 28 59.4 28 60.6 28.1 62 28.3 63.5 28.6 64.4 28.9 65.1 29.1 66.5 29.6 67.4 30 68.1 30.4 69.3 31.1 70.5 31.9 71.7 32.9 72.4 33.5 73 34 73.9 35.1 74.8 36.3 75.7 37.5 76.4 38.8 77 40.1 77.5 41.5 77.8 42.2 78 43 102.3 43ZM81.5 38L81.1 37 80.5 36 80.1 35.1 79.6 34.3 78.9 33.4 78.4 32.6 77.8 31.9 77.1 31.2 76.3 30.3 75.7 29.7 74.9 29.1 74.2 28.5 73.5 27.9 72.5 27.2 71.8 26.7 70.9 26.2 70.1 25.8 69.1 25.3 68.2 24.9 67.3 24.6 66.2 24.2 65.3 23.9 64.4 23.7 63.5 23.5 62.3 23.3 61.4 23.1 60.5 23.1 59.5 23 58.6 23 57.4 23 56.5 23.1 55.3 23.2 54.3 23.4 53.4 23.5 52.5 23.8 51.4 24.1 50.5 24.4 49.6 24.7 48.5 25.1 47.7 25.5 46.8 26 45.8 26.5 45 27 44.2 27.6 43.3 28.3 42.6 28.9 41.8 29.5 41.1 30.1 40.3 31 39.7 31.6 39.1 32.4 38.4 33.3 37.9 34.1 37.3 34.9 36.9 35.7 36.3 36.7 35.9 37.6 35.5 38.5 35.2 39.3 34.8 40.4 34.5 41.3 34.3 42.2 34.1 43.1 33.9 44.3 33.8 45.3 33.7 46.5 33.6 47.7 33.6 48.9 33.7 50.1 33.9 51.3 34 52.5 34.2 53.5 34.5 54.7 34.9 55.8 35.3 57 35.8 58.1 36.2 59 36.8 60.1 37.3 61.1 38 62.1 38.7 63.1 39.5 64.1 40.1 64.8 41 65.7 41.9 66.5 42.8 67.3 43.8 68.1 44.7 68.8 45.8 69.4 46.6 69.9 47.6 70.5 48.8 71 49.9 71.4 51 71.8 52 72.1 53.2 72.4 54.3 72.6 55.3 72.8 56.5 72.9 57.4 73 58.6 73 59.6 73 60.8 72.9 61.7 72.8 62.9 72.6 63.8 72.5 65 72.2 65.9 71.9 67 71.5 67.9 71.2 69 70.7 69.9 70.3 70.9 69.8 71.8 69.3 72.8 68.6 73.5 68.1 74.5 67.3 75.2 66.7 76.1 65.9 76.8 65.2 77.5 64.3 78.2 63.6 78.9 62.7 79.4 61.9 80.1 60.9 80.5 60 81.1 59 81.5 58 96.3 58 96 59.3 95.7 60.2 95.2 61.6 94.8 62.5 94.1 64.2 93.5 65.5 93 66.4 92.6 67.2 91.8 68.5 90.8 70.1 90 71.2 89.4 72 88.2 73.5 86.9 74.9 86.2 75.6 85.2 76.6 84.1 77.5 83.4 78.1 81.9 79.3 81.1 79.9 79.9 80.7 78.3 81.7 76.6 82.6 75.3 83.2 74.4 83.7 72.7 84.4 70.9 85 69 85.6 67.2 86 65.3 86.4 63.4 86.7 61.5 86.9 59.6 87 57.7 87 55.8 86.9 53.9 86.7 52 86.4 50.1 86 48.2 85.6 46.4 85 44.6 84.4 42.8 83.7 41.1 82.8 39.4 81.9 37.8 81 36.2 79.9 34.6 78.7 33.2 77.5 31.7 76.2 30.4 74.9 29.1 73.5 27.9 72 26.8 70.5 25.7 68.9 24.7 67.2 23.8 65.5 23 63.8 22.2 62 21.6 60.2 21.1 58.4 20.6 56.5 20.2 54.7 19.9 52.8 19.7 50.9 19.6 49 19.6 47 19.7 45.1 19.9 43.2 20.2 41.3 20.6 39.5 21.1 37.6 21.6 35.8 22.2 34 23 32.2 23.8 30.5 24.7 28.8 25.7 27.1 26.8 25.5 27.9 24 29.1 22.5 30.4 21.1 31.7 19.8 33.2 18.5 34.6 17.2 36.2 16.1 37.8 15.1 39.4 14.1 41.1 13.2 42.8 12.3 44.1 11.8 45 11.4 46 11.1 47.3 10.7 48.7 10.3 49.6 10.1 51 9.8 52.4 9.5 53.4 9.3 54.8 9.2 55.8 9.1 57.2 9 58.1 9 59.6 9 60.5 9 62 9.1 62.9 9.2 64.4 9.4 65.8 9.7 66.7 9.8 68.1 10.2 69.5 10.5 70.9 11 71.8 11.3 72.7 11.6 74 12.2 74.9 12.5 76.2 13.2 77 13.6 78.3 14.3 79.1 14.8 80.3 15.6 81.9 16.7 83 17.6 84.5 18.8 85.5 19.8 86.5 20.8 87.8 22.2 89.1 23.6 90.2 25.1 91.3 26.7 92.1 27.9 93 29.6 93.9 31.3 94.5 32.6 95.2 34.4 95.8 36.2 96.3 38Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav .logo .wordmark, .menu .logo .wordmark { font-size: 1.0625rem; }
.nav-book { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 0.75rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.nav-book::before { content: ""; width: 8px; height: 8px; background: var(--torch); flex: none; transition: transform 0.4s var(--nav-ease); }
.nav-book:hover::before, .nav-book:focus-visible::before { transform: rotate(45deg); }
.nav-book > span { position: relative; padding-block: 4px; }
.nav-book > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--nav-ease); }
.nav-book:hover > span::after { transform: none; }
.nav-book .short { display: none; }
.nav-menu { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; color: var(--ash); cursor: pointer; font: 400 0.75rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-menu .ln { position: relative; width: 22px; height: 8px; flex: none; }
.nav-menu .ln i { position: absolute; right: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.35s var(--nav-ease), width 0.35s var(--nav-ease); }
.nav-menu .ln i:first-child { top: 0; }
.nav-menu .ln i:last-child { bottom: 0; width: 64%; }
.nav-menu:hover .ln i:last-child, .nav-menu:focus-visible .ln i:last-child { width: 100%; }
.menu .nav-menu .ln i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu .nav-menu .ln i:last-child { width: 100%; transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 520px) { .nav-book .long { display: none; } .nav-book .short { display: inline; } }
/* Sticky things below the bar move up with it when it hides. */
html .jump { transition: transform 0.45s var(--nav-ease); }
html.nav-away .jump { transform: translateY(calc(-1 * var(--nav-h, var(--bar)))); }
.how-pin { transition: transform 0.45s var(--nav-ease); }
html.nav-away .how.pinned .how-pin { transform: translateY(calc(var(--bar) * -0.5)); }

/* The menu */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night); color: var(--ash); overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1); }
.menu[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.menu.on { clip-path: inset(0); transition-duration: 0.7s; }
.menu::backdrop { background: transparent; }
.menu-top { padding-top: env(safe-area-inset-top, 0px); }
.menu-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.menu-body > .in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); align-content: start; padding-block: clamp(8px, 2.6vh, 36px) 32px; }
.menu-big { display: grid; justify-items: start; align-content: start; }
.menu-big a { display: inline-flex; align-items: center; gap: 0.32em; padding-block: clamp(1px, 0.5vh, 6px); white-space: nowrap; font: 500 clamp(2.125rem, min(4.6vw, 7vh), 4.25rem)/1.08 var(--f-pixel); letter-spacing: -0.01em; color: rgba(243, 238, 230, 0.36); opacity: 0; transform: translateY(18px); transition: color 0.2s; }
.menu.on .menu-big a { opacity: 1; transform: none; transition: color 0.2s, opacity 0.5s calc(0.22s + var(--i) * 0.05s), transform 0.9s var(--nav-ease) calc(0.22s + var(--i) * 0.05s); }
.menu-big a.hot, .menu-big a:hover, .menu-big a:focus-visible { color: var(--ash); }
.menu-big a[data-pv]::after { content: "→"; font: 400 0.34em/1 var(--f-mono); color: var(--torch); opacity: 0; transform: translateX(-0.4em); transition: opacity 0.2s, transform 0.35s var(--nav-ease); }
.menu-big a.hot::after { opacity: 1; transform: none; }
.menu-big a:focus-visible { outline-offset: 4px; }
.menu-pv { display: grid; border-left: 1px solid var(--line); padding: clamp(6px, 1vh, 14px) 0 0 clamp(24px, 3vw, 40px); opacity: 0; transition: opacity 0.4s; }
.menu.on .menu-pv { opacity: 1; transition: opacity 0.5s 0.4s; }
.menu-p { grid-area: 1 / 1; display: grid; gap: 16px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s, transform 0.4s var(--nav-ease), visibility 0s 0.2s; }
.menu-p.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s 0.05s, transform 0.5s var(--nav-ease) 0.05s; }
.menu-p > .mono { color: var(--steel); }
.menu-p ol, .menu-p ul { list-style: none; margin: 0; padding: 0; }
.menu-p li a { transition: background-color 0.15s, color 0.15s; }
.mp-inds, .mp-cases { border-top: 1px solid var(--line); }
.mp-inds b, .mp-cases b { font-weight: 500; font-size: 1rem; }
.mp-inds span, .mp-cases span { color: var(--steel); font-size: 0.8125rem; line-height: 1.45; }
.mp-inds a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.mp-inds img { grid-row: span 2; width: 76px; height: 76px; object-fit: contain; transition: transform 0.6s var(--nav-ease); }
.mp-inds b { align-self: end; }
.mp-inds span { align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-inds a:hover img, .mp-inds a:focus-visible img { transform: rotate(-12deg) scale(1.08); }
.mp-cases a { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 2px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mp-cases i { width: 8px; height: 8px; background: var(--c); }
.mp-cases span { grid-column: 2; }
.mp-cases em { grid-row: 1 / span 2; grid-column: 4; font: normal 400 0.875rem/1 var(--f-mono); color: var(--steel); transition: color 0.15s, transform 0.3s var(--nav-ease); }
.mp-cases a:hover em, .mp-cases a:focus-visible em { color: var(--c); transform: translateX(3px); }
/* A matched case shows its customer's logo, as on the case itself. */
.mp-cases .mp-lg { grid-row: 1 / span 2; grid-column: 3; display: block; color: var(--steel); transition: color 0.15s; }
.mp-cases .mp-lg { height: calc(var(--h) * 0.62px); width: calc(var(--h) * var(--a) * 0.62px); background: currentColor; -webkit-mask: var(--lg) center / contain no-repeat; mask: var(--lg) center / contain no-repeat; }
.mp-cases a:hover .mp-lg, .mp-cases a:focus-visible .mp-lg { color: var(--ash); }
.mp-posts b, .mp-jobs b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A post also shows its first line, two lines at most. */
.mp-posts em { grid-row: 1 / span 3; }
.mp-posts a { padding: 14px 0; }
.mp-cases .mp-dk { margin-top: 4px; color: rgba(243, 238, 230, 0.66); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-inds a:hover b, .mp-cases a:hover b { color: var(--ash); }
/* Integrations preview: the nine ERPs as a ruled grid with their logos, a wall of other systems' logos, then the count */
.mp-erp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.mp-erp li { display: grid; gap: 4px; align-content: start; padding: 12px 14px; background: var(--night); }
.mp-erp .mp-mk { margin-bottom: 4px; }
.mp-mk { display: grid; place-items: center; width: 36px; height: 36px; background: var(--ash); }
.mp-mk i { width: 28px; height: 28px; background: var(--ml) 0 0 / auto 28px no-repeat; }
.mp-mk.no { background: var(--graphite); border: 1px solid var(--line); color: var(--ash); font: 400 1rem/1 var(--f-pixel); }
.mp-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.mp-wall li { position: relative; display: grid; place-items: center; height: 50px; background: var(--night); }
@media (max-width: 1180px) { .mp-erp li > span:last-child { display: none; } }  /* narrow, the tiles keep logo and name so the menu still fits */
.mp-erp b { font-weight: 500; font-size: 1rem; }
.mp-erp span { font: 400 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
.mp-also { color: var(--steel); font-size: 0.8125rem; line-height: 1.45; }
.mp-all { justify-self: start; font: 400 0.75rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); padding-block: 6px; }
.mp-all:hover { color: var(--ash); }
.menu-inds, .menu-cta { display: none; }
/* The phone menu's Industries label links to the Industries page; the linked lists on the Industries and Blog pages */
.menu-inds a.mono { justify-self: start; }
.menu-inds a.mono:hover { color: var(--ash); }
.stub-go span { font-family: var(--f-mono); color: var(--steel); transition: color 0.15s; }
.stub-go:hover span, .stub-go:focus-visible span { color: var(--torch); }
.menu-foot { border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); opacity: 0; transition: opacity 0.3s; }
.menu.on .menu-foot { opacity: 1; transition: opacity 0.5s 0.45s; }
.menu-foot > .in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px 24px; align-items: end; padding-block: 18px 20px; }
.menu-o { display: grid; gap: 3px; min-width: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--steel); }
.menu-o b { display: flex; gap: 10px; font: 400 0.6875rem/1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.menu-o time { color: var(--steel); font-variant-numeric: tabular-nums; }
.menu-foot .social a { border: 0; width: 32px; }
@media (hover: none) { .menu-big a { color: var(--ash); } }
@media (max-width: 760px) {
  .menu-body > .in { grid-template-columns: 1fr; padding-block: 8px 28px; }
  .menu-pv { display: none; }
  .menu-big a { font-size: clamp(1.875rem, 8.6vw, 2.75rem); color: var(--ash); padding-block: 5px; white-space: normal; }
  .menu-big a::after { display: none; }
  .menu-inds { display: grid; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
  .menu-inds .mono { color: var(--steel); }
  .menu-inds ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .menu-inds a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.9375rem; line-height: 1.3; color: rgba(243, 238, 230, 0.82); }
  .menu-inds i { width: 8px; height: 8px; background: var(--c); flex: none; }
  .menu-cta { display: flex; justify-content: space-between; margin-top: 24px; }
  .menu-foot > .in { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 14px 16px; }
  .menu-o span, .menu-foot .social { display: none; }
  .menu-o b { display: grid; gap: 2px; font-size: 0.625rem; }
}
@media (max-width: 380px) { .menu-inds ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .nav, .jump, .how-pin { transition: none; }
  .menu, .menu.on { clip-path: none; transition: opacity 0.2s; opacity: 0; }
  .menu.on { opacity: 1; }
  .menu-big a, .menu.on .menu-big a { opacity: 1; transform: none; transition: color 0.2s; }
  .menu-p, .menu-p.on { transform: none; }
}

/* Hero: fills the first screen. Headline across the top; lede, buttons and industries on the left; the 3D stage takes the rest of the height. */
.hero .in { min-height: min(calc(100svh - var(--bar) - 1px), 1000px); padding-block: clamp(24px, 4vh, 52px) clamp(20px, 3vh, 40px); display: grid; grid-template-rows: auto 1fr; gap: clamp(20px, 3.2vh, 44px); }
.hero-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.hero-title { min-width: 0; }
.hero h1 { font-size: clamp(2.5rem, min(6.1vw, 8vh), 4.75rem); width: fit-content; max-width: 100%; }
.hero h1 > span { display: block; text-wrap: balance; }
.hero h1 > .hx { display: grid; }
.hero .figcap[hidden] { display: none; }
.hx > span { grid-area: 1 / 1; text-wrap: balance; visibility: hidden; }
.hx > .on { visibility: visible; }
.hx > span:nth-child(1) .hc { color: #F0642A; }
.hx > span:nth-child(2) .hc { color: #E36A72; }
.hx > span:nth-child(3) .hc { color: #B39213; }
.hx > span:nth-child(4) .hc { color: #5AAC52; }
.hx > span:nth-child(5) .hc { color: #309DEB; }
.hx > span:nth-child(6) .hc { color: #9384EC; }
.hero-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); }
.hero-side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; }
.hero-cta { display: grid; gap: clamp(16px, 2.5vh, 28px); align-content: start; }
.lede { font-size: 1.0625rem; line-height: 1.5; max-width: 46ch; }
.hero .lede { font-size: clamp(1.0625rem, 0.6rem + 0.6vw + 0.5vh, 1.3125rem); line-height: 1.45; max-width: 40ch; text-wrap: balance; }
.nw { white-space: nowrap; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.sectors { display: grid; }
.sectors-h { display: flex; justify-content: space-between; gap: 12px; color: var(--steel); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sx { --c: var(--s1); position: relative; display: grid; grid-template-columns: 26px 10px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: clamp(4px, 0.6vh, 8px) 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--steel); font: 400 0.9375rem/1.35 var(--f-sans); text-align: left; cursor: pointer; transition: color 0.15s; }
.sx .no { font: 400 0.6875rem/1 var(--f-mono); letter-spacing: 0.06em; }
.sx .sq { width: 10px; height: 10px; border: 1px solid var(--c); opacity: 0.75; transition: background-color 0.15s, opacity 0.15s; }
.sx .bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.sx .bar i { display: block; height: 100%; background: var(--c); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.sx:hover, .sx[aria-pressed="true"] { color: var(--ash); }
.sx:hover .sq { opacity: 1; }
.sx[aria-pressed="true"] .sq { opacity: 1; background: var(--c); }

.hero-fig { display: flex; flex-direction: column; min-width: 0; }
.stage { --c: var(--s1); position: relative; flex: 1 1 auto; min-height: 340px; overflow: hidden; touch-action: pan-y; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Until the 3D scene has drawn its first frame, a still of that frame stands in (render-still.js), so the headline never waits
   for WebGL. The still is 2:1 and framed like the camera: full height on stages wider than 1.03:1, else full width. Its sizes
   undersell phones on purpose, so they fetch the 44KB one: it is on screen for a second or two. */
.stage-still { position: absolute; left: 50%; top: 50%; width: 194.03%; height: 100%; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; }
.stage:not(.gl-on) canvas { visibility: hidden; }
.stage.gl-on .stage-still, .stage.no-gl .stage-still { display: none; }
/* A section that is off screen holds its CSS animations (the logo drift, blinking dots, traces) until it comes back. */
.off-screen, .off-screen * { animation-play-state: paused !important; }
.marks i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--line-2); }
.marks i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.marks i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.marks i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.marks i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.stage-top { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; gap: 12px; color: var(--steel); pointer-events: none; }
.stage-top b { color: var(--ash); font-weight: 400; display: inline-flex; align-items: center; gap: 10px; }
.stage-top b::before { content: ""; width: 8px; height: 8px; background: var(--c); }
.stage .note { position: absolute; inset: 0; display: none; place-items: center; color: var(--steel); }
.stage.no-gl .note { display: grid; }
.pause { position: absolute; right: 16px; bottom: 14px; font: 500 0.6875rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); background: var(--night); border: 1px solid var(--line); padding: 8px 11px; cursor: pointer; }
.pause:hover { color: var(--ash); border-color: var(--line-2); }
.figcap { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); color: var(--steel); }
.figcap b { font-weight: 400; color: var(--ash); }
@media (max-width: 560px) {
  .figcap .sep { display: none; }
  .figcap #st-spec { display: block; margin-top: 2px; }
}
@media (max-width: 1099px) { .hero-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Short laptop screens: tighten the hero so the list and the part both stay above the fold. */
@media (min-width: 760px) and (max-height: 800px) {
  .hero .in { padding-top: 3.2vh; gap: 2.6vh; }
  .hero h1 { font-size: clamp(2.5rem, min(6.1vw, 7.6vh), 4.75rem); }
  .hero-cta { gap: 14px; }
  .sx { padding-block: 3px; }
  .sectors-h { padding-bottom: 8px; }
}
/* Phones and portrait screens: one column, headline and buttons first, then the part, then the industries. */
@media (max-width: 759px), (max-width: 1099px) and (max-aspect-ratio: 1/1) {
  .hero .in { min-height: 0; }
  .hero-body { grid-template-columns: 1fr; gap: 28px; }
  .hero-side { display: contents; }
  .hero-fig { order: 1; }
  .sectors { order: 2; }
  .stage { flex: none; aspect-ratio: 4 / 3; min-height: 0; max-height: 54svh; }
}
@media (max-width: 559px) { .stage { aspect-ratio: 1 / 0.8; max-height: 50svh; } .hero .lede { font-size: 1.0625rem; } }
/* Phones: no industry list under the part, so the customer logos come up (the headline already names each industry). */
@media (max-width: 759px) { .sectors { display: none; } }
@media (max-width: 420px) { .hero h1 { font-size: min(2.5rem, 9.8vw); } }
@media (max-width: 380px) { .hero .btn { padding: 12px 15px; font-size: 0.875rem; } }

/* Customers: a quiet strip of greyscale wordmarks right under the hero, drifting left, paused on hover. The hero gives up the strip's
   height so it shows on the first screen. Reduced motion: one still row that wraps. */
:root { --logos: 84px; }
@media (max-width: 760px) { :root { --logos: 112px; } }
@media (min-width: 1100px), (min-width: 760px) and (min-aspect-ratio: 1/1) { .hero .in { min-height: min(calc(100svh - var(--bar) - var(--logos) - 1px), 1000px); } }
.logos { border-top: 1px solid var(--line); }
.logos-in { min-height: var(--logos); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.logos-h { color: var(--steel); white-space: nowrap; }
.logos-win { overflow: hidden; }
.logos-track { display: flex; width: max-content; animation: logos-drift 46s linear infinite; }
.logos-win:hover .logos-track { animation-play-state: paused; }
.logos-row { display: flex; align-items: center; gap: clamp(48px, 5vw, 76px); margin: 0; padding: 0 clamp(48px, 5vw, 76px) 0 0; list-style: none; }
.logos-row svg { display: block; height: calc(var(--h) * 1px); width: calc(var(--h) * var(--a) * 1px); color: var(--steel); transition: color 0.2s; }
.logos-row li:hover svg { color: var(--ash); }
@keyframes logos-drift { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .logos-in { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; padding-block: 18px; }
  .logos-row svg { height: calc(var(--h) * 0.84px); width: calc(var(--h) * var(--a) * 0.84px); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; width: auto; }
  .logos-row { flex-wrap: wrap; row-gap: 20px; padding-block: 18px; }
  .logos-row[aria-hidden] { display: none; }
}

/* The problem: the heading and three rows down the left that open one at a time, like Our solution, beside a stage with the drawing for the open row. */
.gap { border-top: 1px solid var(--line); }
.gap .in { padding-block: clamp(64px, 9vw, 120px); }
.gap-pin { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "head fig" "list fig"; gap: 0 clamp(36px, 5vw, 80px); align-items: stretch; }
.gap-head { grid-area: head; display: grid; gap: 24px; justify-items: start; min-width: 0; padding-bottom: clamp(28px, 4vh, 40px); }
.gap h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.gap h2 > span { display: block; }
.gap-lede { color: rgba(243, 238, 230, 0.86); font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem); max-width: 50ch; text-wrap: pretty; }
sup.fn { font: 500 0.6875rem/0 var(--f-mono); letter-spacing: 0.02em; margin-left: 2px; vertical-align: super; }
sup.fn a { color: var(--torch); text-decoration: none; padding: 2px 1px; }
sup.fn a:hover { color: var(--ash); text-decoration: underline; text-underline-offset: 2px; }
.gap-list { grid-area: list; align-self: start; min-width: 0; }
.gap .steps { border-top-color: var(--line); }
.gap .step { border-bottom-color: var(--line); }
.gap .step-h, .gap .step-h .no, .gap .step-b p { color: var(--steel); }
.gap .step-h:hover, .gap .step.open .step-h { color: var(--ash); }
.gap .step-h .bar i { background: var(--ash); }
.gap .step:not(.open) .step-b > div, .how .step:not(.open) .step-b > div { visibility: hidden; transition: visibility 0s 0.3s; }
.gap-fig { grid-area: fig; display: flex; min-width: 0; }
/* All three problem rows stay open (Paul, 2026-10-23): nothing to click to read them. The timer still moves the highlight
   and the drawing from row to row; the rows that are not highlighted sit a little quieter. */
.gap .step-b { grid-template-rows: 1fr; }
.gap .step:not(.open) .step-b > div { visibility: visible; }
.gap .step-b p { min-height: 0; transition: opacity 0.3s; }
.gap .step:not(.open) .step-b p { opacity: 0.72; }
.gap .step-h .pm { visibility: hidden; }
/* Problem rows compact (Paul, 2026-10-23): tighter rows, and each number with its source on one short line under the paragraph. */
.gap .step-h { padding: 14px 0; }
.gap .step-b p { padding-bottom: 16px; max-width: 60ch; }
.gap .gap-stat { margin-top: 8px; gap: 12px; align-items: baseline; }
.gap .gap-stat b { font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); }
.gap .gap-stat > span { font-size: 0.875rem; line-height: 1.4; }
.gap .gap-stat a { display: inline; margin: 0 0 0 2px; }
/* Problem stats aligned (Paul, 2026-10-23): numbers in one column, so the three sentences start at the same place. */
/* Problem stats aligned, round 2 (Paul, 2026-10-23): column as wide as the widest number, numbers centred on their sentence. */
.gap .gap-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
.gap .gap-stat b { white-space: nowrap; width: 2.55em; line-height: 1; }
.gap .gap-stat a { margin-left: 0; }
@media (max-width: 559px) { .gap .gap-stat { column-gap: 12px; } }
@media (max-width: 559px) { .gap .step-h { padding: 12px 0; } .gap .step-b p { padding-bottom: 12px; } .gap .gap-stat { margin-top: 6px; } }
/* One sourced number per problem row, inside its paragraph: the number in Ash and the pixel face, the line in Steel, the source a small mono link. */
.gap-stat { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.gap-stat b { flex: none; font: 500 clamp(1.625rem, 1.25rem + 1vw, 2.125rem)/1 var(--f-pixel); letter-spacing: -0.01em; color: var(--ash); }
.gap-stat > span { min-width: 0; font-size: 0.9375rem; line-height: 1.45; text-wrap: pretty; }
.gap-stat a { display: table; margin-top: 5px; font: 400 0.6875rem/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--steel); border-bottom: 1px solid var(--line-2); transition: color 0.15s, border-color 0.15s; }
.gap-stat a:hover { color: var(--ash); border-color: var(--ash); }
@media (max-width: 559px) { .gap-stat { gap: 10px; margin-top: 12px; } .gap-stat > span { font-size: 0.875rem; } }
/* Problem rows, calm (Paul, 2026-10-23 16:38, "too busy"): one row open at a time, in step with the drawing. A closed row is
   one line, heading and number; the open row adds its paragraph and the number's source on one quiet line. */
.gap .step-h { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; padding: 20px 0; }
.gap .step-h .pm { display: none; }
.gap .gap-n { font: 500 clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem)/1 var(--f-pixel); letter-spacing: -0.01em; white-space: nowrap; color: var(--steel); transition: color 0.2s; }
.gap .step.open .gap-n, .gap .step-h:hover .gap-n { color: var(--ash); }
.gap .step-b { grid-template-rows: 0fr; }
.gap .step.open .step-b { grid-template-rows: 1fr; }
.gap .step:not(.open) .step-b > div { visibility: hidden; }
.gap .step-b p, .gap .step:not(.open) .step-b p { min-height: var(--bh, 0px); opacity: 1; padding: 0 0 24px 56px; max-width: 58ch; color: rgba(243, 238, 230, 0.78); }
.gap .gap-stat { display: block; margin-top: 12px; }
.gap .gap-stat > span { display: block; font-size: 0.875rem; line-height: 1.45; color: var(--steel); }
.gap .gap-stat b { display: inline; width: auto; font: inherit; font-weight: 500; color: var(--ash); }
.gap .gap-stat a { display: inline; margin: 0 0 0 6px; }
@media (max-width: 559px) { .gap .step-h { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 16px 0; } .gap .step-b p, .gap .step:not(.open) .step-b p { padding: 0 0 18px 42px; } }
.gap-stage { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--graphite); padding: clamp(44px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(24px, 3vw, 40px); }
.gap-stage .how-top { color: var(--steel); }
.gap-stage .how-top b { color: var(--ash); }
.gap-stage .iso { display: none; }
.gap-stage .iso.on { display: block; animation: iso-in 0.4s ease both; }
.next { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding-bottom: 3px; border-bottom: 1px solid var(--line-2); }
.next::before { content: ""; width: 10px; height: 10px; background: var(--torch); }
.next:hover { border-color: var(--ash); }
@media (max-width: 900px) {
  .gap-pin { grid-template-columns: 1fr; grid-template-areas: "head" "fig" "list"; gap: 16px; }
  .gap-head { padding-bottom: 12px; }
  .gap-stage { padding: 40px 8px 10px; }
  .gap-fig { display: block; }
}

/* Our solution: numbered steps that open one at a time, with the drawing for the open step beside them. */
.how { background: var(--paper); color: var(--ink); }
.how .in { padding-block: clamp(64px, 9vw, 120px); display: grid; align-items: start; }
.how-track { position: relative; }
.how-pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head fig" "list fig"; gap: 0 clamp(36px, 5vw, 80px); align-items: stretch; }
.how.pinned .how-pin { position: sticky; }
.how-head { grid-area: head; display: grid; gap: clamp(14px, 2.4vh, 22px); min-width: 0; padding-bottom: clamp(20px, 3.5vh, 32px); }
.how h2 { font-size: clamp(1.75rem, min(3.1vw, 4.9vh), 2.75rem); }
.wwb .sec-head h2 { max-width: none; font-size: clamp(1.75rem, min(3.1vw, 4.9vh), 2.75rem); }
.how-lede { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.how-list { grid-area: list; align-self: start; min-width: 0; }
.steps { list-style: none; padding: 0; border-top: 1px solid var(--paper-line); }
.step { position: relative; border-bottom: 1px solid var(--paper-line); }
.step-h { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; gap: 12px; align-items: baseline; width: 100%; padding: 19px 0; background: none; border: 0; color: var(--ink-2); text-align: left; cursor: pointer; font: 500 1.1875rem/1.3 var(--f-sans); letter-spacing: -0.015em; transition: color 0.15s; }
.step-h:hover, .step.open .step-h { color: var(--ink); }
.step-h .no { font: 400 0.75rem/1 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-2); }
.step.open .step-h .no { color: var(--torch); }
.step-h .pm { position: relative; width: 14px; height: 14px; align-self: center; }
.step-h .pm::before, .step-h .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; }
.step-h .pm::after { transform: rotate(90deg); transition: transform 0.2s; }
.step.open .step-h .pm::after { transform: rotate(0deg); }
.step-h .bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.step:not(.open) .step-h .bar { display: none; }
.step-h .bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.step-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.step.open .step-b { grid-template-rows: 1fr; }
.step-b > div { overflow: hidden; }
.step-b p { min-height: var(--bh, 0px); }
.step-b p { padding: 0 26px 22px 56px; color: var(--ink-2); max-width: 54ch; }
.how .link { margin-top: 28px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; justify-self: start; padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
.how-fig { grid-area: fig; display: flex; min-width: 0; }
.how-stage { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; background: #E2DDD4; padding: clamp(44px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(24px, 3vw, 40px); }
.how-stage .marks i { border-color: rgba(20, 18, 16, 0.35); }
.how-top { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.how-top b { font-weight: 400; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.how-top b::before { content: ""; width: 8px; height: 8px; background: var(--torch); }
.how-stage .iso { display: none; }
.how-stage .iso.on { display: block; animation: iso-in 0.4s ease both; }
@keyframes iso-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 900px) {
  .how-pin { grid-template-columns: 1fr; grid-template-areas: "head" "fig" "list"; gap: 16px; }
  .how-stage { padding: 40px 8px 10px; }
  .how-fig { display: block; }
}
@media (max-width: 559px) { .step-b p { padding: 0 0 14px 44px; font-size: 0.9375rem; line-height: 1.5; } .step-h { font-size: 1.0625rem; padding: 14px 0; grid-template-columns: 32px minmax(0, 1fr) 14px; } }

/* Isometric drawings */
.iso {
  position: relative;
  --iso-line: rgba(243, 238, 230, 0.82); --iso-top: #211F1C; --iso-right: #191715; --iso-left: #121110;
  --iso-grid: rgba(243, 238, 230, 0.06); --iso-quiet: rgba(243, 238, 230, 0.4);
  --iso-text: var(--ash);
}
.iso.paper {
  --iso-line: #1A1714; --iso-top: #FAF8F4; --iso-right: #E6E1D8; --iso-left: #D6D0C5;
  --iso-grid: rgba(20, 18, 16, 0.07); --iso-quiet: rgba(20, 18, 16, 0.45);
  --slab-top: #1B1916; --slab-right: #121110; --slab-left: #0C0B0A; --slab-ink: #ECE8E1;
  --iso-text: var(--ink);
}
.iso svg { display: block; width: 100%; height: auto; overflow: visible; }
.iso polygon, .iso polyline { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.iso polygon { stroke: var(--iso-line); stroke-width: 1.1px; }
.iso polyline { fill: none; stroke: var(--iso-line); stroke-width: 1px; }
.iso .base.ft { fill: var(--iso-top); } .iso .base.fr { fill: var(--iso-right); } .iso .base.fl { fill: var(--iso-left); }
.iso .slab.ft { fill: var(--slab-top); } .iso .slab.fr { fill: var(--slab-right); } .iso .slab.fl { fill: var(--slab-left); }
.iso .slab { stroke: var(--iso-line); }
.iso .sheet.ft { fill: var(--iso-top); fill-opacity: 0.86; } .iso .sheet.fr, .iso .sheet.fl { fill: var(--iso-right); }
.iso polyline.grid { stroke: var(--iso-grid); }
.iso polyline.quiet { stroke: var(--iso-quiet); }
.iso polyline.drop { stroke: var(--iso-quiet); stroke-dasharray: 3 4; }
.iso polyline.wl { stroke: var(--slab-ink); opacity: 0.9; }
.iso polyline.wq { stroke: var(--slab-ink); opacity: 0.35; }
.iso polyline.tl { stroke: var(--torch); stroke-width: 1.6px; }
.iso polyline.trace { stroke: var(--torch); stroke-width: 1.6px; stroke-dasharray: 6 5; }
.iso.live polyline.trace { animation: trace 1.6s linear infinite; }
@keyframes trace { to { stroke-dashoffset: -22; } }
.iso polygon.nd { fill: var(--iso-top); stroke: var(--iso-line); }
.iso polygon.ghost { fill: none; stroke: var(--iso-quiet); stroke-dasharray: 4 3; }
.iso polygon.ndw { fill: var(--slab-top); stroke: var(--slab-ink); }
.iso polygon.ndt { fill: var(--torch); stroke: var(--torch); }
.iso .lead { fill: none; stroke: var(--iso-line); stroke-width: 1px; opacity: 0.5; vector-effect: non-scaling-stroke; }
.iso .dot { fill: var(--iso-line); }
.iso polygon.scr { fill: #0A0908; stroke-opacity: 0.5; }
.iso polygon.led { fill: var(--iso-line); stroke: none; }
.iso polygon.tag { fill: none; stroke-opacity: 0.55; }
.iso polygon.hole { fill: var(--night); stroke-opacity: 0.6; }
.iso polyline.sl { opacity: 0.45; }
.iso .env.ft, .iso .pap.ft { fill: #2E2B27; } .iso .env.fr, .iso .env.fl, .iso .pap.fr, .iso .pap.fl { fill: #24211E; }
.iso.paper .pap.ft, .iso.paper .env.ft { fill: #FFFFFF; } .iso.paper .pap.fr, .iso.paper .pap.fl, .iso.paper .env.fr, .iso.paper .env.fl { fill: #EDE9E2; }
.iso .box.ft { fill: #27241F; } .iso .box.fr { fill: #1E1C19; } .iso .box.fl { fill: #171513; }
.iso polygon.pk { stroke: var(--torch); } .iso .pk.ft { fill: var(--torch); } .iso .pk.fr { fill: #C9521F; } .iso .pk.fl { fill: #A84418; }
.iso polygon.tile { fill: #24211E; stroke: rgba(236, 232, 225, 0.3); }
.iso polygon.tilet { fill: #24211E; stroke: var(--torch); stroke-width: 1.4px; }
.iso polygon.lt { fill: #ECE8E1; stroke: none; }
.iso .lo { opacity: 0.28; }
.iso .hi polygon { stroke: var(--ash); }
.iso-label { transition: opacity 0.2s; }
.iso-label.dim { opacity: 0.3; }
.iso-labels { position: absolute; inset: 0; pointer-events: none; }
.iso-label { position: absolute; transform: translate(0, calc(-100% - 5px)); font-family: var(--f-mono); font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iso-text); white-space: nowrap; }
.iso-label.l { transform: translate(-100%, calc(-100% - 5px)); text-align: right; }
@media (max-width: 560px) { .iso-label { font-size: 0.625rem; } }

/* Footer: link columns, a slim bar, then a CIAO wide as the page and cropped by its bottom edge. The letters rise into place when it scrolls in and lift in a wave under the pointer. */
.foot { border-top: 1px solid var(--line); overflow: hidden; }
.foot .in { padding-block: clamp(44px, 5vw, 64px) 0; }
.foot h2 { margin: 0 0 22px; font: 400 0.75rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
.foot-cols section { min-width: 0; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.foot-cols a { font-size: 1rem; line-height: 1.35; color: rgba(243, 238, 230, 0.8); transition: color 0.15s; }
.foot-cols a:hover { color: var(--torch); }
.foot-loc { margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(32px, 3.6vw, 48px); border-top: 1px solid var(--line); }
.foot-loc-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 32px; }
.foot-loc address { font-style: normal; display: grid; align-content: start; gap: 2px; font-size: 0.9375rem; line-height: 1.5; color: rgba(243, 238, 230, 0.62); }
.foot-loc address b { font-weight: 500; font-size: 1rem; color: var(--ash); margin-bottom: 6px; }
.foot-bar { margin-top: clamp(40px, 4.5vw, 64px); padding-block: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.foot-small { margin: 0; font: 400 0.6875rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.foot-side { display: flex; align-items: center; gap: 14px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.foot-legal a { font: 400 0.6875rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); transition: color 0.15s; }
.foot-legal a:hover { color: var(--ash); }
.foot-side .btn { padding: 10px 16px; font-size: 0.875rem; }
.social { display: flex; gap: 6px; }
.social a { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--steel); border: 1px solid var(--line); transition: color 0.15s, border-color 0.15s; }
.social a:hover { color: var(--ash); border-color: var(--line-2); }
.fwm { --tr: -0.1em; margin: 0; font: 600 min(38vw, 38rem)/1 var(--f-mono); letter-spacing: var(--tr); color: var(--ash); height: 0.66em; overflow: hidden; cursor: default; }
.fwm[data-crop="0"] { height: 0.86em; }
.fwm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fwm-w { display: inline-flex; }
.fwm-c:last-child .fwm-l { margin-right: calc(var(--tr) * -1); }
.fwm-c.i .fwm-l { margin-inline: -0.015em; }  /* mono I sits in a full-width cell: pull its neighbours in */
.fwm-c.l .fwm-l { margin-right: -0.13em; }
/* Pixel letters: 15 px caps drawn at the mono cap height (0.71em), one pixel apart, each with its own extrusion below the baseline */
.fwm.px { letter-spacing: 0; --wm-side: var(--steel); }
.fwm.px .fwm-w { gap: 0.047em; }
.fwm.px .fwm-l svg { display: block; height: 0.852em; width: auto; margin-bottom: -0.142em; overflow: visible; }
.fwm-c { display: inline-block; }
.fwm-r { display: inline-block; transform: translate3d(0, 1em, 0); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 90ms); }
.foot.in-view .fwm-r { transform: none; }
.fwm-l { display: inline-block; transform: translate3d(0, var(--lift, 0px), 0); transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 0.15s; will-change: transform; }
.fwm[data-pointer] .fwm-l { transition: color 0.15s; }
.fwm-l:hover { color: var(--torch); }
@media (prefers-reduced-motion: reduce) { .fwm-r { transform: none; transition: none; } .fwm-l { transition: none; transform: none; } }
@media (max-width: 1023px) { .foot-loc-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .foot-cols, .foot-loc-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .foot-cols, .foot-loc-g { grid-template-columns: 1fr; } }

.call-note { margin: 16px 0 0; font: 400 0.75rem/1.5 var(--f-mono); letter-spacing: 0.01em; color: var(--steel); }
.book .call-note, .hero .call-note { margin: 0; }
@media (min-width: 761px) { .hero .call-note span { display: block; } }
/* Book a discovery call: a side panel over the page with a short form */
.book { position: fixed; inset: 0 0 0 auto; width: min(560px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line-2); background: var(--night); color: var(--ash); }
.book::backdrop { background: rgba(15, 14, 13, 0.72); }
.book[open] { animation: book-in 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.book[open]::backdrop { animation: fade 0.3s; }
.book.out { animation: book-out 0.26s cubic-bezier(0.7, 0, 0.84, 0) forwards; }
.book.out::backdrop { animation: fade-out 0.26s forwards; }
@keyframes book-in { from { transform: translateX(100%); } }
@keyframes book-out { to { transform: translateX(100%); } }
@keyframes fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .book[open], .book[open]::backdrop, .book.out, .book.out::backdrop { animation: none; } }
.book-in { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(20px, 3.4vw, 40px) 40px; }
.book-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 60px; margin-bottom: clamp(24px, 4.5vh, 44px); background: var(--night); border-bottom: 1px solid var(--line); }
.book-x { position: relative; width: 40px; height: 40px; background: none; border: 1px solid var(--line-2); color: var(--ash); cursor: pointer; transition: border-color 0.15s; }
.book-x:hover { border-color: var(--ash); }
.book-x i { position: absolute; left: 11px; right: 11px; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transform: rotate(45deg); }
.book-x i + i { transform: rotate(-45deg); }
.book-form, .book-cal, .book-done { display: grid; gap: 18px; align-content: start; }
.book-form[hidden], .book-cal[hidden], .book-done[hidden], .book .fld[hidden] { display: none; }
.book h2 { font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem); max-width: 13ch; }
.book-lede { font-size: 1.0625rem; line-height: 1.5; color: rgba(243, 238, 230, 0.78); max-width: 44ch; margin-bottom: 8px; }
.book-lede b { font-weight: 500; color: var(--ash); }
.fl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.fld { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fld > span, .fld > legend { padding: 0; margin-bottom: 8px; font: 500 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.fld > span { margin-bottom: 0; }
.fld i { font-style: normal; color: rgba(154, 150, 143, 0.62); margin-left: 6px; }
.fld input, .fld select, .fld textarea { width: 100%; min-width: 0; margin: 0; padding: 12px 14px; background: var(--graphite); color: var(--ash); border: 1px solid var(--line-2); border-radius: 0; font: 400 1rem/1.4 var(--f-sans); transition: border-color 0.15s; }
.fld textarea { min-height: 112px; resize: vertical; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%239A968F' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: rgba(243, 238, 230, 0.42); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--torch); }
.fld [aria-invalid="true"] { border-color: var(--torch); }
.fld ::placeholder { color: rgba(154, 150, 143, 0.75); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: inline-block; padding: 10px 12px; border: 1px solid var(--line-2); font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.02em; color: rgba(243, 238, 230, 0.86); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.opt span:hover { border-color: rgba(243, 238, 230, 0.42); }
.opt input:checked + span { background: var(--ash); border-color: var(--ash); color: var(--night); }
.opt input:focus-visible + span { outline: 2px solid var(--torch); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book-err { color: var(--torch); font-size: 0.9375rem; }
.book-err a { text-decoration: underline; }
.book-go { justify-self: start; margin-top: 4px; }
.book-go:disabled { opacity: 0.6; cursor: progress; }
.book-fine { color: var(--steel); font-size: 0.8125rem; }
.book-cal h2, .book-done h2 { outline: none; }
.book-done .btn { justify-self: start; margin-top: 8px; }
/* The calendar step: Paul's Calendly, inline, with the visitor's name and email filled in. If it can't load (blocked, offline), a button opens it in a new tab. */
.cal { position: relative; display: grid; min-height: 640px; border: 1px solid var(--line-2); background: var(--graphite); }
.cal iframe { display: block; width: 100%; height: 640px; border: 0; }
.cal-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); pointer-events: none; }
.cal.ready .cal-wait { display: none; }
.cal.fail { min-height: 0; place-items: center; gap: 16px; padding: 48px 20px; }
.cal.fail .cal-wait { position: static; }
.cal.fail iframe { display: none; }
.cal-alt a { color: var(--ash); text-decoration: underline; text-underline-offset: 2px; }
.cal.fail ~ .cal-alt { display: none; }
.book-back { justify-self: start; padding: 4px 0; background: none; border: 0; color: var(--steel); font: 500 0.75rem/1.2 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color 0.15s; }
.book-back:hover, .book-back:focus-visible { color: var(--ash); }
@media (max-width: 520px) { .fl2 { grid-template-columns: 1fr; } .book-go { justify-self: stretch; justify-content: center; } }

/* Inner pages: stubs share one layout until each page is written */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stub .in { padding-block: clamp(56px, 9vw, 128px) clamp(40px, 6vw, 80px); display: grid; gap: clamp(18px, 2.4vw, 26px); justify-items: start; }
.stub h1 { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.5rem); max-width: 14ch; }
.stub .lede { font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.3125rem); line-height: 1.5; max-width: 52ch; color: rgba(243, 238, 230, 0.86); }
.stub .btns { margin-top: 6px; }
.stub-note { color: var(--steel); }
.stub-first { display: grid; gap: 6px; font-size: 1rem; color: rgba(243, 238, 230, 0.86); padding-left: 14px; border-left: 2px solid var(--torch); }
.stub-first .mono { color: var(--steel); }
.stub-note a { color: var(--ash); border-bottom: 1px solid var(--line-2); }
.stub-note a:hover { border-color: var(--ash); }
.stub-list .in { padding-bottom: clamp(64px, 8vw, 112px); }
.stub-list ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.stub-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 32px; padding: 22px 0 23px; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
.stub-list li:target { background: var(--graphite); }
.stub-list .no { color: var(--steel); padding-top: 5px; }
.stub-list h2 { font: 500 1.125rem/1.4 var(--f-sans); letter-spacing: -0.01em; }
.stub-list p { color: rgba(243, 238, 230, 0.7); }
@media (max-width: 760px) { .stub-list li { grid-template-columns: 44px minmax(0, 1fr); } .stub-list p { grid-column: 2; } }

/* Bands after Our solution: What we build, Industries, Why Ciao (comparison), For PE (rollout board), the closing call (Torch). One heading block for all of them. */
.sec { border-top: 1px solid var(--line); }
.sec > .in { padding-block: clamp(64px, 9vw, 120px); display: grid; gap: clamp(36px, 4.4vw, 56px); }
.sec-head { display: grid; gap: 18px; justify-items: start; align-content: start; min-width: 0; }
.sec h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 15ch; }
.sec-lede { font-size: 1.125rem; line-height: 1.55; color: rgba(243, 238, 230, 0.78); max-width: 50ch; }
.how + .sec, .how + .sec[hidden] + .sec { border-top: 0; }
.sec[hidden] { display: none; }

/* What we build: the three things we ship down the left, beside a stage that shows each one as its own kind of product (Paul 18:57:
   they should look like different things, with richer samples). AI apps: the client's own quote desk, light, with its menu, quote
   list and a quote built from an email. Agents: a dark run console where an agent works through an order step by step and hands one
   decision to a person. Integrations: Ciao in the middle, wired to the real logos of the tools a business already runs. Each
   view plays a short story in steps every time it opens. Square corners, solid fills, Torch on what needs attention. Phones get
   three tabs under the stage, which can also be swiped. */
.wwb > .in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head fig" "list fig" "ask fig"; align-items: center; column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(28px, 3.4vw, 44px); }
.wwb .sec-head { grid-area: head; align-self: end; }
/* The ask under the list: one line and the booking button, which fills the panel's process box with "Quoting". */
.wwb-ask { grid-area: ask; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.wwb-ask p { color: var(--ash); font-size: 1.0625rem; }
.wwb-fig { grid-area: fig; min-width: 0; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.wwb-list { grid-area: list; align-self: start; list-style: none; margin: 0; padding: 0; display: grid; }
.wwb-i { position: relative; width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 20px 0 22px; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wwb-list li:last-child { border-bottom: 1px solid var(--line); }
.wwb-list li:has(.wwb-more) .wwb-i { padding-bottom: 14px; }
.wwb-more { margin: 0 0 22px 68px; color: rgba(243, 238, 230, 0.6); }
.wwb-i.on + .wwb-more, .wwb-more:hover { color: var(--ash); }
.wwb .wwb-more-m { display: none; }
.wwb-ic { width: 48px; height: 48px; display: grid; place-items: center; background: var(--graphite); border: 1px solid var(--line-2); color: var(--steel); transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.wwb-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.wwb-ic svg.px { width: auto; height: auto; fill: currentColor; stroke: none; }
.wwb-t b { display: block; padding-top: 2px; font: 500 clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem)/1.25 var(--f-sans); letter-spacing: -0.02em; color: rgba(243, 238, 230, 0.5); transition: color 0.25s; }
.wwb-t > span { display: block; margin-top: 6px; max-width: 40ch; color: rgba(243, 238, 230, 0.4); transition: color 0.25s; }
.wwb-i:hover b { color: rgba(243, 238, 230, 0.8); }
.wwb-i.on .wwb-ic { background: var(--ash); border-color: var(--ash); color: var(--night); }
.wwb-i.on b { color: var(--ash); }
.wwb-i.on .wwb-t > span { color: rgba(243, 238, 230, 0.78); }
.wwb-i .bar, .wwb-tabs button i { position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; }
.wwb-i .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--torch); }
.wwb-i:not(.on) .bar i { width: 0; }
.wwb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wwb-tabs, .wwb-say { display: none; }

/* The stage: about 13:9 of the figure's width (taller on phones), never shorter than 480px, so nothing jumps between views. */
.wwb-stage { position: relative; display: grid; height: max(480px, 72cqw); container: wv / inline-size; font-size: 0.8125rem; line-height: 1.4; user-select: none; touch-action: pan-y; }
.wv { grid-area: 1 / 1; position: relative; display: grid; min-width: 0; min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.15s, visibility 0s 0.15s, transform 0s 0.15s; }
.wv.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s 0.1s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.wv.rs, .wv.rs * { transition: none !important; animation: none !important; }
.wv .mono { line-height: 1.3; }
.wv b { font-weight: 500; }
.wv ol, .wv ul { list-style: none; margin: 0; padding: 0; }
.wv i, .wv em { font-style: normal; }
.wv .nw { white-space: nowrap; }
.wv .cd { font-family: var(--f-mono); font-size: 0.6875rem; line-height: 1.35; letter-spacing: 0; }
.wv-av { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; font: 500 0.625rem/1 var(--f-mono); letter-spacing: 0.02em; }
.wv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 13px; font: 500 0.8125rem/1 var(--f-sans); white-space: nowrap; }
.wv-cur { position: absolute; left: 0; top: 0; z-index: 5; width: 14px; height: 20px; fill: var(--ink); stroke: var(--paper); stroke-width: 1.2px; stroke-linejoin: round; opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform 0.75s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.2s; pointer-events: none; }
.wv-cur.go { opacity: 1; }
.wv-cur.rs { transition: none; }

/* AI apps, as before and after (Paul 21:22). Before: the job as it runs today, across an inbox, a price list, a customer sheet, a
   stock report and a chat, none of them connected. Then the app is built: each piece flies into the part of the new quote desk it
   fills, which starts as grey placeholder bars. After: one calm window with room around it, which sends the quote. */
.wv-app { display: block; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 .5h24M.5 0v24' fill='none' stroke='%23F3EEE6' stroke-opacity='.05'/%3E%3C/svg%3E"); color: var(--ink); outline: 1px solid var(--line-2); }
.ap-ba { position: absolute; left: 18px; top: 16px; z-index: 4; display: inline-flex; box-shadow: inset 0 0 0 1px var(--line-2); }
.ap-ba > span { padding: 6px 10px 5px; color: var(--steel); transition: background-color 0.3s, color 0.3s; }
.ap-ba > span:first-child, .wv-app.s5 .ap-ba > span + span { background: var(--ash); color: var(--night); }
.wv-app.s5 .ap-ba > span:first-child { background: none; color: var(--steel); }
.ap-note { position: absolute; right: 18px; top: 22px; z-index: 4; display: inline-grid; color: var(--steel); }
.ap-note > span { grid-area: 1 / 1; justify-self: end; white-space: nowrap; transition: opacity 0.3s; }
.ap-note > span + span, .wv-app.s5 .ap-note > span:first-child { opacity: 0; }
.wv-app.s5 .ap-note > span + span { opacity: 1; }

/* The scattered pieces. Each drops in at a slight angle; the script flies it into the app. */
.ap-c { position: absolute; z-index: 3; display: grid; align-content: start; background: var(--ash); color: var(--ink); font-size: 0.75rem; line-height: 1.4; opacity: 0; transform: translateY(-14px) rotate(var(--r)); transition: opacity 0.35s calc(var(--i) * 140ms), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 140ms); }
.wv-app.s1 .ap-c { opacity: 1; transform: rotate(var(--r)); }
.wv-app.s5 .ap-c { visibility: hidden; opacity: 0; transition: none; }
.ap-mail { --i: 0; --r: -1.5deg; left: 5%; top: 16%; width: 37cqw; }
.ap-sheet { --i: 1; --r: 1.2deg; left: 48.5%; top: 12%; width: 43cqw; }
.ap-cust { --i: 2; --r: -1.8deg; left: 35%; top: 53%; width: 32cqw; }
.ap-pdf { --i: 3; --r: 2deg; left: 70%; top: 50%; width: 25cqw; }
.ap-chat { --i: 4; --r: 2.2deg; left: 5%; top: 59%; width: 27cqw; }
.ap-ch { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; background: var(--paper); border-bottom: 1px solid var(--paper-line); color: var(--ink-2); white-space: nowrap; }
.ap-ch > .mono { font-size: 0.625rem; }
.ap-ch > .mono { overflow: hidden; text-overflow: ellipsis; }
.ap-ch .ap-t { margin-left: auto; }
.ap-ic { display: grid; place-items: center; width: 16px; height: 16px; flex: none; background: var(--ink); color: var(--paper); }
.ap-ic svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.3px; stroke-linejoin: round; }
/* Each piece carries the real logo of the tool it lives in, and sits on the desk with a hard shadow. */
.ap-lg { display: block; width: 15px; height: 15px; flex: none; }
.ap-lg svg { display: block; width: 100%; height: 100%; }
.ap-c { box-shadow: 0 0 0 1px rgba(20, 18, 16, 0.12), 6px 8px 0 rgba(0, 0, 0, 0.36); }
/* The hand work: an unread email, the price cell being copied, the customer looked up, the low stock line marked. */
.ap-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 0.1em; background: var(--torch); }
.ap-grid > .ap-cp { position: relative; overflow: visible; background: rgba(16, 124, 65, 0.1); outline: 1px dashed #107C41; outline-offset: -2px; }
.ap-grid > .ap-sel { background: rgba(16, 124, 65, 0.1); }
.ap-hl { margin: 0 -4px; padding: 1px 4px 3px; background: rgba(240, 100, 42, 0.2); border-bottom-color: transparent; }
.ap-cb { display: grid; gap: 2px; padding: 9px 11px 12px; }
.ap-cb b { font-size: 0.8125rem; }
.ap-sub { color: var(--ink-2); }
.ap-cb p { margin-top: 5px; }
.ap-grid { display: grid; grid-template-columns: 16px minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.7fr); font-size: 0.625rem; }
.ap-grid.c { grid-template-columns: 16px minmax(0, 1.8fr) minmax(0, 0.5fr) minmax(0, 0.8fr); }
.ap-grid > span { overflow: hidden; padding: 4px 6px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); text-overflow: ellipsis; white-space: nowrap; }
.ap-grid > span:nth-child(4n) { border-right: 0; text-align: right; }
.ap-grid > span:nth-child(-n + 4), .ap-grid > span:nth-child(4n + 1) { padding: 3px 0; background: var(--paper); color: var(--ink-2); text-align: center; }
.ap-grid > span:nth-last-child(-n + 4) { border-bottom: 0; }
.ap-pg { display: grid; gap: 6px; padding: 10px 12px 13px; }
.ap-pg > .mono { color: var(--ink-2); font-size: 0.5625rem; }
.ap-ln { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 3px; border-bottom: 1px dotted rgba(20, 18, 16, 0.3); font: 0.6875rem/1.35 var(--f-mono); }
.ap-x { display: block; width: var(--w); height: 5px; background: rgba(20, 18, 16, 0.1); }
.ap-msg { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; padding: 10px 11px 12px; }
.ap-msg .wv-av { background: var(--ink); color: var(--paper); }
.ap-msg b:not(.wv-av) { display: block; }

/* The build bar: what the build is doing, and how far along it is. */
.ap-gen { position: absolute; left: 50%; bottom: 22px; z-index: 5; display: grid; gap: 11px; width: min(420px, calc(100% - 36px)); padding: 12px 14px 0; background: var(--night); color: var(--ash); box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; transform: translate(-50%, 10px); transition: opacity 0.3s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-app.s2 .ap-gen { opacity: 1; transform: translate(-50%, 0); }
.wv-app.s6 .ap-gen { opacity: 0; transform: translate(-50%, 10px); }
.ap-gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-gh > b { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.ap-gh > b i { width: 7px; height: 7px; flex: none; background: var(--torch); animation: blink 1.2s steps(1, end) infinite; }
.wv-app.s5 .ap-gh > b i { background: var(--ash); animation: none; }
.ap-gs { display: inline-grid; min-width: 0; color: var(--steel); }
.ap-gs > span { grid-area: 1 / 1; justify-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity 0.25s; }
.wv-app.s2:not(.s3) .ap-gs > :nth-child(1), .wv-app.s3:not(.s4) .ap-gs > :nth-child(2), .wv-app.s4:not(.s5) .ap-gs > :nth-child(3), .wv-app.s5 .ap-gs > :nth-child(4) { opacity: 1; }
.ap-pr { display: block; height: 2px; margin: 0 -14px; background: var(--line); }
.ap-pr > i { display: block; height: 100%; background: var(--torch); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-app.s2 .ap-pr > i { transform: scaleX(0.3); }
.wv-app.s3 .ap-pr > i { transform: scaleX(0.6); }
.wv-app.s4 .ap-pr > i { transform: scaleX(0.85); }
.wv-app.s5 .ap-pr > i { transform: none; }

/* The app: a request on the left, the quote on the right, with room to breathe. Every value starts as a grey bar and fills in when
   the piece it comes from lands. */
.ap-win { position: absolute; left: 7%; right: 7%; top: 58px; bottom: 30px; z-index: 1; display: grid; grid-template-rows: 42px minmax(0, 1fr); background: var(--paper); box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.36); opacity: 0; transform: scale(0.97); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-app.s3 .ap-win { opacity: 1; transform: none; }
.ap-top { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 12px 0 18px; border-bottom: 1px solid var(--paper-line); }
.ap-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; white-space: nowrap; }
.ap-brand i { width: 8px; height: 8px; background: var(--ink); }
.ap-co { margin-left: auto; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.ap-top .wv-av { background: var(--ink); color: var(--paper); }
.ap-body { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); grid-template-rows: minmax(0, 1fr); min-height: 0; }
.ap-req { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); align-content: start; gap: 10px; overflow: hidden; min-width: 0; padding: 22px 20px; background: var(--ash); border-right: 1px solid var(--paper-line); }
.ap-req > .mono { color: var(--ink-2); }
.ap-req > b { font-size: 0.9375rem; line-height: 1.3; }
.ap-req p { line-height: 1.65; }
.ap-req mark { background: none; color: inherit; transition: box-shadow 0.3s, background-color 0.3s; }
.wv-app.s5 .ap-req mark { background: rgba(20, 18, 16, 0.07); box-shadow: inset 0 -2px 0 var(--ink); }
.ap-ex { color: var(--ink-2); }
/* Where each value came from; each line fills in as its piece lands. */
.ap-src { align-self: end; display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--paper-line); }
.ap-src > .mono { color: var(--ink-2); }
.wv .ap-src ul { display: grid; gap: 7px; }
.ap-src li { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 0.75rem; white-space: nowrap; }
.ap-src .ap-lg { width: 14px; height: 14px; transition: opacity 0.35s; }
.ap-src li:has([data-src]:not(.got)) .ap-lg { opacity: 0.22; }
.ap-q { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; min-width: 0; min-height: 0; padding: 22px 26px 22px 24px; }
.ap-qh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ap-qh > div > * { display: block; }
.ap-qh > div > .mono { color: var(--ink-2); }
.ap-qh b { margin-top: 4px; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }
.ap-terms { margin-top: 4px; color: var(--ink-2); font-size: 0.75rem; }
.ap-chip { display: inline-grid; flex: none; margin-top: 2px; border: 1px solid var(--ink); font-size: 0.625rem; transition: background-color 0.2s, color 0.2s; }
.ap-chip > span { grid-area: 1 / 1; padding: 4px 7px; text-align: center; transition: opacity 0.2s; }
.ap-chip > span + span, .wv-app.s7 .ap-chip > span:first-child { opacity: 0; }
.wv-app.s7 .ap-chip { background: var(--ink); color: var(--paper); }
.wv-app.s7 .ap-chip > span + span { opacity: 1; }
.ap-tbl { display: grid; align-content: start; }
.ap-tr { display: grid; grid-template-columns: minmax(0, 1fr) 40px 104px 64px; column-gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--paper-line); font-variant-numeric: tabular-nums; }
.ap-tr > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tr > :nth-child(n + 2) { text-align: right; }
.ap-th { min-height: 0; padding-bottom: 9px; color: var(--ink-2); }
.ap-tr em { color: var(--torch); }
.ap-ft { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--paper-line); }
.ap-ft .mono { display: block; color: var(--ink-2); }
.ap-ft b { display: inline-block; margin-top: 3px; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.wv-app .wv-btn { background: var(--ink); color: var(--paper); }
.ap-send { display: inline-grid; place-items: center; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.ap-send > span { grid-area: 1 / 1; transition: opacity 0.2s; }
.ap-send > span + span, .wv-app.s7 .ap-send > span:first-child { opacity: 0; }
.wv-app.s7 .ap-send > span + span { opacity: 1; }
.wv-app.s7 .ap-send { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ap-win [data-src] { transition: color 0.35s, background-color 0.35s; }
.ap-win [data-src]:not(.got) { color: transparent; background-color: rgba(20, 18, 16, 0.09); }
@keyframes ap-hit { from { background-color: rgba(240, 100, 42, 0.32); } }
.ap-win .hit { animation: ap-hit 0.9s ease-out; }

/* Agents: one thread, the way an AI assistant shows its work (Paul 22:09). The customer's email is the prompt that starts the agent;
   the agent thinks it through, shows each tool it used and what came back, then answers in the same thread with a draft reply that
   Maria sends. The mark is a pixel spark that twinkles while the agent works. */
.wv-agent { grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 16px 22px 20px; background: var(--paper); color: var(--ink); }
.ag-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; color: var(--ink-2); }
.ag-hd > span:first-child { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ag-hd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3px; stroke-linejoin: round; }
.ag-st, .ag-ws, .ag-rl { display: inline-grid; min-width: 0; }
.ag-st > span, .ag-ws > span, .ag-rl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: opacity 0.25s; }
.ag-st > span { justify-self: end; }
.ag-st i, .ag-ws i { width: 6px; height: 6px; flex: none; background: var(--torch); animation: blink 1.2s steps(1, end) infinite; }
.ag-st > span + span i { background: var(--ink); animation: none; }
.ag-st > span + span, .wv-agent.s9 .ag-st > span:first-child { opacity: 0; }
.wv-agent.s9 .ag-st > span + span { opacity: 1; color: var(--ink); }
.ag-thread { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ag-mail { align-self: flex-start; width: min(100%, 560px); display: grid; gap: 8px; padding: 12px 14px 13px; background: var(--ash); box-shadow: inset 0 0 0 1px var(--paper-line); opacity: 0; transform: translateY(-6px); transition: opacity 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-agent.s1 .ag-mail { opacity: 1; transform: none; }
.ag-mh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ag-mh .wv-av { width: 26px; height: 26px; background: var(--ink); color: var(--paper); }
.ag-mh > span:not(.ag-src) > * { display: block; }
.ag-mh .mono { margin-top: 1px; color: var(--ink-2); }
.ag-src { align-self: start; margin-left: auto; padding: 3px 6px; box-shadow: inset 0 0 0 1px var(--paper-line); }
.ag-mail p, .ag-think, .ag-type { line-height: 1.55; }
.ag-turn { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; min-height: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-agent.s2 .ag-turn { opacity: 1; transform: none; }
.ag-mark { display: grid; place-items: center; width: 26px; height: 26px; background: var(--night); }
.ag-mark svg { width: 11px; height: 11px; fill: var(--torch); shape-rendering: crispEdges; transform: scale(1.64); }
.wv-agent.s2:not(.s7) .ag-tip { animation: blink 0.9s steps(1, end) infinite; }
.ag-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ag-ws { color: var(--ink-2); }
.ag-ws > span + span, .wv-agent.s3 .ag-ws > span:first-child { opacity: 0; }
.wv-agent.s3 .ag-ws > span:nth-child(2) { opacity: 1; }
.wv-agent.s7 .ag-ws > span:nth-child(2) { opacity: 0; }
.wv-agent.s7 .ag-ws > span:nth-child(3) { opacity: 1; }
.ag-body { grid-column: 2; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.ag-trace { display: grid; gap: 9px; padding: 1px 0 1px 14px; border-left: 1px solid var(--paper-line); }
.ag-think { color: var(--ink-2); }
.ag-think.typing::after, .ag-type.typing::after { content: ""; display: inline-block; width: 6px; height: 13px; margin-left: 2px; vertical-align: -2px; background: currentColor; }
.wv .ag-steps { display: grid; gap: 7px; }
.ag-steps li { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: baseline; column-gap: 9px; min-width: 0; opacity: 0; transform: translateY(-3px); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.ag-steps svg { width: 14px; height: 14px; align-self: center; fill: none; stroke: var(--torch); stroke-width: 1.3px; stroke-linejoin: round; stroke-linecap: round; transition: stroke 0.3s; }
.ag-steps b { white-space: nowrap; }
.ag-steps .cd { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.wv-agent.s3 .ag-steps li:nth-child(1), .wv-agent.s4 .ag-steps li:nth-child(2), .wv-agent.s5 .ag-steps li:nth-child(3), .wv-agent.s6 .ag-steps li:nth-child(4) { opacity: 1; transform: none; }
.wv-agent.s4 .ag-steps li:nth-child(1) svg, .wv-agent.s5 .ag-steps li:nth-child(2) svg, .wv-agent.s6 .ag-steps li:nth-child(3) svg, .wv-agent.s7 .ag-steps li:nth-child(4) svg { stroke: var(--ink-2); }
.ag-reply { display: grid; gap: 10px; padding: 12px 14px 13px; background: var(--ash); box-shadow: inset 0 0 0 1px var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-agent.s7 .ag-reply { opacity: 1; transform: none; }
.ag-rh { color: var(--ink-2); }
.ag-rl > span:first-child { color: var(--torch); }
.ag-rl i { width: 6px; height: 6px; background: currentColor; }
.ag-rl > span + span { color: var(--ink); }
.ag-rl > span + span, .wv-agent.s9 .ag-rl > span:first-child { opacity: 0; }
.wv-agent.s9 .ag-rl > span + span { opacity: 1; }
.ag-type { min-height: 3.1em; }
.ag-acts { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-agent.s8 .ag-acts { opacity: 1; transform: none; }
.ag-att { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; color: var(--ink-2); white-space: nowrap; }
.wv-agent .wv-btn { background: var(--ink); color: var(--paper); }
.wv-agent .wv-btn.ln { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transition: opacity 0.2s; }
.ag-send { display: inline-grid; place-items: center; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.ag-send > span { grid-area: 1 / 1; transition: opacity 0.2s; }
.ag-send > span + span, .wv-agent.s9 .ag-send > span:first-child, .wv-agent.s9 .ag-acts .ln { opacity: 0; }
.wv-agent.s9 .ag-send > span + span { opacity: 1; }
.wv-agent.s9 .ag-send { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Integrations (Paul 22:04, 22:51): Ciao in the middle, the tools it connects to around it with their own full-colour logos. What
   Ciao reads comes in from the left, what it writes goes out to the right. Data rides each wire in turn (a Torch square), the card
   it reaches lights up, the wire stays drawn, its port on Ciao's edge lights and Ciao counts it. The wires and ports are placed
   from the cards' measured boxes. */
.wv-int { background: var(--ash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='2' height='2' fill='%23141210' fill-opacity='.16'/%3E%3C/svg%3E"); color: var(--ink); outline: 1px solid rgba(236, 232, 225, 0.12); }
.in-map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(32px, 0.32fr) minmax(0, 0.64fr) minmax(32px, 0.32fr) minmax(0, 1fr); grid-template-rows: auto repeat(4, minmax(0, 1fr)); row-gap: 12px; min-height: 0; padding: 18px 22px 22px 20px; }
.in-col { grid-row: 1; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.5625rem; }
.in-col::after { content: ""; flex: 1; height: 1px; background: var(--paper-line); }
.in-col[data-k="in"] { grid-column: 1; }
.in-col[data-k="out"] { grid-column: 5; }
/* Over the chip: the eight on screen are a sample (Paul, 2026-10-23: "over 1000 integrations"). */
.in-more { grid-area: 1 / 2 / 2 / 5; justify-self: center; align-self: center; display: flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--ink-2); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.in-more b { color: var(--ink); font-weight: 500; }
a.in-more { transition: box-shadow 0.15s; }
a.in-more:hover { box-shadow: inset 0 0 0 1px var(--torch); }
.in-more .ar { color: var(--torch); }
@container wv (max-width: 600px) { .in-more .ar { display: none; } }
.in-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.in-wires path { fill: none; stroke: var(--ink); stroke-width: 1px; }
.in-wires .gd { stroke-dasharray: 2 3; opacity: 0.32; }
.in-wires .lv { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.in-wires .on .lv { stroke-dashoffset: 0; transition: stroke-dashoffset var(--draw, 0ms) linear; }
.in-wires path.ah { fill: var(--ink); stroke: none; opacity: 0.32; transition: opacity 0.2s var(--draw, 0ms); }
.in-wires .on path.ah { opacity: 1; }
.in-n, .in-hub { position: relative; z-index: 1; min-width: 0; min-height: 0; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.15s; }
.in-n.hit, .in-hub.hit { outline-color: var(--torch); }
.in-n { align-self: center; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 11px; row-gap: 3px; align-items: center; padding: 11px 12px 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink), 3px 3px 0 var(--ink); }
.in-n[data-k="ol"] { grid-area: 2 / 1; }
.in-n[data-k="gm"] { grid-area: 3 / 1; }
.in-n[data-k="xl"] { grid-area: 4 / 1; }
.in-n[data-k="gs"] { grid-area: 5 / 1; }
.in-n[data-k="qb"] { grid-area: 2 / 5; }
.in-n[data-k="sap"] { grid-area: 3 / 5; }
.in-n[data-k="sf"] { grid-area: 4 / 5; }
.in-n[data-k="hs"] { grid-area: 5 / 5; }
.in-lg { grid-row: 1 / 3; display: block; width: 30px; height: 24px; }
/* The sync light: an outline until the tool connects, ink once it is, Torch for a moment as a record goes through. */
.in-st { position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; box-shadow: inset 0 0 0 1px var(--ink-2); transition: background-color 0.25s, box-shadow 0.25s; }
.in-n.on .in-st { background: var(--ink); box-shadow: none; }
.in-n.on .in-st.hit { background: var(--torch); transition: none; }
.in-v { grid-area: 2 / 3; justify-self: end; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.in-n.on .in-v { color: var(--ink); }
.in-lg svg { display: block; width: 100%; height: 100%; }
.in-n b { grid-column: 2 / 4; padding-right: 10px; overflow: hidden; font-size: 0.875rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.in-n .cd { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.in-hub { grid-area: 2 / 3 / 6 / 4; align-self: center; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; aspect-ratio: 1; padding: 11px 12px 10px; background: var(--night); color: var(--ash); }
.in-hub .wordmark { align-self: center; font-size: clamp(1.25rem, 4.4cqw, 1.875rem); line-height: 1; padding-left: 0.06em; }
.in-hl, .in-hc { justify-self: stretch; display: flex; align-items: center; gap: 6px; color: var(--steel); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.in-hl i { width: 6px; height: 6px; background: var(--torch); animation: blink 1.4s steps(1, end) infinite; }
.in-hl { justify-content: center; }
.in-hl > span > span + span, .wv-int.s8 .in-hl > span > span:first-child { display: none; }
.wv-int.s8 .in-hl > span > span + span { display: inline; color: var(--ash); }
.wv-int.s8 .in-hl i { animation-duration: 2.4s; }
.in-hc { display: block; text-align: center; }
.in-hc b { color: var(--ash); font-weight: 500; }
/* The chip as a part on the desk: graphite top face with a fine grain, an inset die with a pin-1 mark, a stepped dark side, pins. */
.in-hub { background: #1B1916 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23F3EEE6' fill-opacity='0.09'/%3E%3C/svg%3E"); box-shadow: 1px 1px 0 #0C0B0A, 2px 2px 0 #0C0B0A, 3px 3px 0 #0C0B0A, 4px 4px 0 #0C0B0A, 5px 5px 0 #0C0B0A, 9px 10px 0 rgba(20, 18, 16, 0.22); }
.in-hub > * { position: relative; z-index: 1; }
.in-hub::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(243, 238, 230, 0.16); background: var(--night); box-shadow: inset 0 0 0 3px #1B1916, inset 0 0 0 4px rgba(243, 238, 230, 0.07); pointer-events: none; }
.in-hub::after { content: ""; position: absolute; left: 9px; top: 9px; width: 5px; height: 5px; background: var(--steel); pointer-events: none; }
.in-pins { position: absolute; left: 16%; right: 16%; top: -6px; bottom: -6px; z-index: 0 !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Crect x='3' width='6' height='6' fill='%239A968F'/%3E%3Crect x='3' width='6' height='1' fill='%23F3EEE6'/%3E%3C/svg%3E") repeat-x left top / 12.5% 6px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Crect x='3' width='6' height='6' fill='%239A968F'/%3E%3Crect x='3' y='5' width='6' height='1' fill='%235C5852'/%3E%3C/svg%3E") repeat-x left bottom / 12.5% 6px; pointer-events: none; }
.in-hub .wordmark { text-shadow: 0 1px 0 #000; }
.in-hub .wordmark:not(.wm-text) { width: 64%; justify-content: center; padding-left: 0; }
.in-hub .wordmark .wm { width: 100%; height: auto; }
@container wv (max-width: 480px) { .in-hub .wordmark:not(.wm-text) { width: auto; } .in-hub .wordmark .wm { width: 70px; height: 18px; } }
.in-hub .wordmark.lk { width: auto; padding-left: 0; font-size: clamp(1.125rem, 3.2cqw, 1.375rem); }
@container wv (max-width: 640px) { .in-pins { display: none; } .in-hub::before { inset: 6px; } .in-hub::after { left: 6px; top: 6px; } }
.in-port { position: absolute; left: 0; top: 0; z-index: 2; width: 8px; height: 8px; background: var(--night); box-shadow: inset 0 0 0 1px rgba(236, 232, 225, 0.45); pointer-events: none; transition: background-color 0.2s; }
.in-port.on { background: var(--ash); box-shadow: none; }
.in-port.hit { background: var(--torch); }
.in-pk, .in-fl { position: absolute; left: 0; top: 0; z-index: 2; width: 8px; height: 8px; background: var(--torch); opacity: 0; pointer-events: none; }
.in-fl { width: 6px; height: 6px; }

/* Narrower stages (small laptops, tablets, phones): the app stacks its request above the quote and comes in closer to the edges;
   the agent's thread narrows, then stacks and shows only the step the agent is on; the tools move in closer to Ciao, then sit
   above and below it, logos only, with straight wires. */
@container wv (max-width: 700px) {
  .wv-agent.s7 .ag-think { display: none; }
}
@container wv (max-width: 760px) {
  .ap-body { grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); }
  .ap-req { gap: 8px; padding: 18px 16px; }
  .ap-req p { line-height: 1.55; }
  .wv .ap-src ul { grid-auto-flow: column; justify-content: start; gap: 12px; }
  .ap-src li > span { display: none; }
  .ap-src .ap-lg { width: 16px; height: 16px; }
  .ap-q { gap: 14px; padding: 18px 20px 18px 20px; }
  .ap-tr { grid-template-columns: minmax(0, 1fr) 34px 96px 60px; column-gap: 10px; min-height: 40px; }
}
@container wv (max-width: 640px) {
  .in-map { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 0.56fr) 26px minmax(0, 1fr); padding: 16px; }
  .in-n .cd { font-size: 0.625rem; }
  .in-n { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 9px; padding: 10px 10px 9px; }
  .in-lg { width: 22px; height: 18px; }
}
@container wv (max-width: 600px) {
  .ap-win { left: 5%; right: 5%; top: 52px; bottom: 16px; grid-template-rows: 40px minmax(0, 1fr); }
  .ap-body { grid-template: auto minmax(0, 1fr) / minmax(0, 1fr); }
  .ap-req { gap: 4px; padding: 12px 18px 13px; border-right: 0; border-bottom: 1px solid var(--paper-line); }
  .ap-req > b, .ap-ex, .ap-src { display: none; }
  .ap-req p { line-height: 1.55; }
  .ap-q { gap: 12px; padding: 14px 18px 14px; }
  .ap-qh b { font-size: 1rem; }
  .ap-tr { grid-template-columns: minmax(0, 1fr) 32px 92px 58px; column-gap: 10px; min-height: 35px; }
  .ap-ft { padding-top: 12px; }
  .wv-agent { padding: 14px 18px 18px; }
  .ag-steps li { grid-template-columns: 14px minmax(0, 1fr); row-gap: 1px; }
  .ag-steps .cd { grid-column: 2; }
  .wv-agent.s7 .ag-trace { display: none; }
}
@container wv (max-width: 520px) {
  .ap-ba { left: 14px; top: 14px; }
  .ap-note { display: none; }
  .ap-mail { left: 4%; top: 10%; width: 66cqw; }
  .ap-sheet { left: 28%; top: 35%; width: 68cqw; }
  .ap-sheet .ap-grid > span:nth-last-child(-n + 4) { display: none; }
  .ap-sheet .ap-grid > span:nth-last-child(-n + 8) { border-bottom: 0; }
  .ap-cust, .ap-x, .ap-sub { display: none; }
  .ap-pdf { left: 54%; top: 62%; width: 42cqw; }
  .ap-chat { left: 3%; top: 63%; width: 47cqw; }
  .ap-chat .ap-t { display: none; }
  .ap-gen { bottom: 14px; width: calc(100% - 28px); }
  .ap-gh { justify-content: flex-start; gap: 10px; }
  .ap-gh > b { font-size: 0; gap: 0; }
  .ap-gs > span { justify-self: start; color: var(--ash); }
  .ap-win { left: 12px; right: 12px; top: 52px; bottom: 14px; }
  .ap-top { padding: 0 10px 0 14px; }
  .ap-req { padding: 11px 14px 12px; }
  .ap-q { padding: 12px 14px 14px; }
  .ap-tr { grid-template-columns: minmax(0, 1fr) 28px 84px 52px; column-gap: 8px; min-height: 36px; }
  .wv-agent { gap: 10px; padding: 12px 14px 14px; }
  .ag-thread { gap: 10px; }
  .ag-src, .ag-mail p > b { display: none; }
  .ag-turn { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
  .ag-mark { width: 24px; height: 24px; }
  .ag-body { grid-column: 1 / -1; }
  .wv .ag-steps { grid-template: auto / minmax(0, 1fr); }
  .ag-steps li { grid-area: 1 / 1; }
  .wv-agent.s3 .ag-think { display: none; }
  .wv-agent.s4 .ag-steps li:nth-child(1), .wv-agent.s5 .ag-steps li:nth-child(2), .wv-agent.s6 .ag-steps li:nth-child(3) { opacity: 0; }
  .ag-reply { padding: 11px 13px 12px; }
  .ag-acts .wv-btn { flex: 1; }
  .ag-att { display: none; }
}
@container wv (max-width: 480px) {
  .in-map { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto minmax(40px, 1fr) auto minmax(40px, 1fr) auto; column-gap: 10px; row-gap: 0; padding: 16px 14px; }
  .in-col, .in-st, .in-v, .in-more { display: none; }
  .in-n { grid-template-columns: auto; place-content: center; padding: 18px 0; }
  .in-n[data-k="ol"] { grid-area: 1 / 1; }
  .in-n[data-k="gm"] { grid-area: 1 / 2; }
  .in-n[data-k="xl"] { grid-area: 1 / 3; }
  .in-n[data-k="gs"] { grid-area: 1 / 4; }
  .in-n[data-k="qb"] { grid-area: 5 / 1; }
  .in-n[data-k="sap"] { grid-area: 5 / 2; }
  .in-n[data-k="sf"] { grid-area: 5 / 3; }
  .in-n[data-k="hs"] { grid-area: 5 / 4; }
  .in-n b, .in-n .cd { display: none; }
  .in-lg { width: 40px; height: 30px; margin: 0; }
  .in-hub { grid-area: 3 / 1 / 4 / 5; grid-template: auto / auto auto auto; justify-content: space-between; align-items: center; aspect-ratio: auto; padding: 16px 18px; }
  .in-hub .wordmark { font-size: 1.25rem; }
  .in-hl, .in-hc { justify-self: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wwb-stage *, .wwb-stage *::before, .wwb-stage *::after { transition: none !important; animation: none !important; }
  .wv-cur, .in-pk, .in-fl { display: none; }
}
@media (max-width: 900px) {
  .wwb > .in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "list" "ask"; }
  .wwb .sec-head { align-self: start; }
}
@media (max-width: 760px) {
  .wwb > .in { grid-template-areas: "head" "fig" "ask"; }
  .wwb-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wwb-fig { gap: 0; }
  .wwb-stage { height: clamp(500px, 135cqw, 600px); }
  .wwb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 10px; }
  .wwb-tabs button { position: relative; min-height: 48px; padding: 0 6px; background: var(--graphite); border: 0; color: var(--steel); font: 500 0.9375rem/1.2 var(--f-sans); cursor: pointer; }
  .wwb-tabs button.on { background: var(--ash); color: var(--night); }
  .wwb-tabs button i { top: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--torch); }
  .wwb-tabs button:not(.on) i { width: 0; }
  .wwb-say { display: block; margin-top: 16px; font-size: 0.9375rem; line-height: 1.5; color: rgba(243, 238, 230, 0.78); }
  .wwb .wwb-more-m { display: inline-flex; margin-top: 14px; }
  .wwb .wwb-more-m[hidden] { display: none; }
}

/* Ink lines and light app faces in the problem drawings. */
.iso .app.ft { fill: var(--paper); } .iso .app.fr { fill: #CFC9BF; } .iso .app.fl { fill: #B4AEA3; }
.iso polyline.ik { stroke: var(--ink); opacity: 0.85; }
.iso polyline.ikq { stroke: var(--ink); opacity: 0.22; }

.inds > .in { padding-bottom: clamp(28px, 3.2vw, 44px); }
.inds h2 { max-width: 19ch; }
.deck { --pad: max(16px, env(safe-area-inset-left, 0px), calc((100% - 1320px) / 2 + 16px)); padding-bottom: clamp(64px, 9vw, 120px); }
.deck-track { list-style: none; margin: 0; padding: 22px var(--pad) 34px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(236px, 21vw, 292px); gap: clamp(14px, 1.5vw, 22px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; cursor: grab; }
.deck-track::-webkit-scrollbar { display: none; }
.deck-track.drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.deck-track.auto { scroll-snap-type: none; }
.deck-track.drag .card { pointer-events: none; }
.deck-track li { min-width: 0; scroll-snap-align: start; }
.card { --k: 16px; position: relative; display: block; aspect-ratio: 5 / 7; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); -webkit-user-drag: none; }
.card.tilt { --ty: -6px; transition-duration: 0.15s; }
.card:focus-visible { outline: 2px solid var(--c); outline-offset: 6px; }
.card-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1400px) rotateY(0deg); transition: transform 0.9s cubic-bezier(0.3, 1.35, 0.45, 1); }
.card.sealed .card-in { transform: perspective(1400px) rotateY(180deg); }
.deck-track.init .card-in { transition: none; }
.card-f, .card-b { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); }
.card-f { background: var(--c); }
.card-b { background: var(--torch); transform: rotateY(180deg); }
.card-p { --k: 15px; position: absolute; inset: 2px; display: flex; flex-direction: column; padding: 15px 16px 12px; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='5' y='5' width='1.5' height='1.5' fill='%23F3EEE6' fill-opacity='.14'/%3E%3C/svg%3E"); clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); overflow: hidden; color: var(--ash); }
.card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.card-no { display: grid; gap: 6px; justify-items: start; }
.card-no b { font: 400 clamp(2.4rem, 1.9rem + 1vw, 2.9rem)/0.85 var(--f-pixel); color: var(--c); }
.card-no .mono { font-size: 0.75rem; letter-spacing: 0.14em; }
.card-art { position: relative; flex: 1 1 auto; min-height: 0; margin: -18px -10px 6px; }
.card-art::before, .card-art::after { content: ""; position: absolute; inset: 0; width: auto; margin: auto; aspect-ratio: 1; transform: rotate(45deg); }
.card-art::before { height: 52%; border: 1px solid var(--c); opacity: 0.6; }
.card-art::after { height: 36%; background: var(--c); opacity: 0.16; }
.card-art img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.5)); pointer-events: none; }
.card.tilt .card-art img { transition-duration: 0.15s; }
.card-nm { position: relative; z-index: 1; padding-bottom: 9px; border-bottom: 1px solid var(--line-2); text-align: center; font: 500 clamp(1rem, 0.9rem + 0.25vw, 1.125rem)/1.2 var(--f-sans); letter-spacing: -0.01em; }
.card-st { display: grid; gap: 5px; padding: 9px 0 10px; font-size: 0.8125rem; line-height: 1.25; color: rgba(243, 238, 230, 0.86); }
.card-st span { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 10px; align-items: center; }
.card-st i { width: 6px; height: 6px; background: var(--c); }
.card-ft { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.card-ft span:first-child { overflow: hidden; text-overflow: ellipsis; }
.card-sh { position: absolute; z-index: 2; top: -20%; bottom: -20%; left: var(--sx, -60%); width: 26%; background: rgba(255, 255, 255, 0.07); transform: translateX(-50%) skewX(-18deg); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.card.tilt .card-sh { opacity: 1; }
.card-b .card-p { align-items: center; justify-content: center; gap: 16px; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='2' height='2' fill='%23F0642A' fill-opacity='.35'/%3E%3C/svg%3E"); }
.card-ciao { display: inline-flex; align-items: center; gap: 4px; color: var(--ash); }
.card-ciao .logo-sq { width: 11px; height: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95.03 95.03'%3E%3Cpath fill='%23ECE8E1' fill-rule='evenodd' d='M91.3 42L90.9 39.5 90.5 37.4 90 35.3 89.3 33.2 88.5 31.2 87.7 29.2 86.7 27.2 85.7 25.4 84.6 23.5 83.3 21.7 82 20 80.7 18.4 79.2 16.8 77.6 15.3 76 13.8 74.3 12.5 72.6 11.2 70.8 10.1 68.9 9 67 8 65 7.1 63 6.3 61 5.6 58.9 5 56.8 4.5 54.7 4.1 52.5 3.8 50.4 3.6 48.2 3.5 46.1 3.5 43.9 3.7 41.8 3.9 39.6 4.3 37.5 4.7 35.4 5.3 33.4 5.9 31.4 6.7 29.4 7.5 27.4 8.5 25.5 9.5 23.7 10.6 21.9 11.9 20.2 13.2 18.5 14.6 17 16 15.4 17.6 14 19.2 12.7 20.9 11.4 22.6 10.2 24.4 9.1 26.3 8.2 28.2 7.2 30.2 6.4 32.2 5.7 34.2 5.1 36.3 4.6 38.4 4.2 40.5 4 42.7 3.8 44.8 3.7 47 3.7 49.1 3.9 51.3 4.1 53.4 4.4 55.6 4.9 57.7 5.4 59.8 6.1 61.8 6.8 63.9 7.7 65.8 8.6 67.8 9.7 69.7 10.8 71.5 12 73.3 13.3 75 14.7 76.7 16.2 78.2 17.7 79.8 19.4 81.2 21.1 82.5 22.8 83.8 24.6 85 26.5 86.1 28.4 87.1 30.4 88 32.4 88.8 34.4 89.5 36.5 90.1 38.6 90.6 40.7 91 42.8 91.2 45 91.4 47.1 91.5 49.3 91.5 51.5 91.3 53.6 91.1 55.2 90.9 56.8 90.6 58.9 90.1 60.5 89.6 62 89.1 64 88.4 65.5 87.7 67.5 86.8 68.9 86.1 70.8 85 72.1 84.1 73.5 83.2 74.8 82.2 76.4 80.8 77.6 79.8 78.8 78.6 80.3 77.1 81.3 75.8 82.4 74.6 83.3 73.3 84.3 72 85.4 70.1 86.2 68.7 87.2 66.8 88.1 64.8 88.7 63.4 89.3 61.8 89.8 60.3 90.4 58.2 90.7 56.6 91 55 91.3 53 65.9 53 65.7 53.7 65.3 54.6 65 55.4 64.5 56.3 64.1 57.1 63.6 57.9 63.1 58.6 62.5 59.4 61.9 60.1 61.3 60.8 60.6 61.4 59.9 62 59.2 62.6 58.4 63.2 57.6 63.7 56.9 64.2 56 64.6 55.2 65 54.3 65.3 53.4 65.6 52.5 65.9 51.6 66.1 50.7 66.3 49.8 66.4 48.9 66.5 47.9 66.5 47 66.5 46.1 66.5 45.1 66.3 44.2 66.2 43.3 66 42.4 65.8 41.3 65.4 40.2 65 39.1 64.5 38.1 63.9 37.1 63.3 36.2 62.6 35.3 61.9 34.4 61.1 33.6 60.3 32.9 59.4 32.1 58.5 31.5 57.5 30.9 56.5 30.4 55.4 30 54.4 29.6 53.5 29.3 52.4 29.1 51.5 28.9 50.3 28.8 49.1 28.7 48 28.7 46.8 28.8 45.6 28.9 44.5 29.1 43.4 29.4 42.2 29.8 41.1 30.2 40 30.7 39 31.3 38 31.9 37 32.6 36 33.3 35.1 34.1 34.2 34.9 33.4 36 32.5 36.9 31.9 37.9 31.2 38.9 30.6 40.2 30.1 41.5 29.6 42.6 29.2 43.8 28.9 44.9 28.7 46.1 28.6 47.2 28.5 48.4 28.5 49.5 28.6 50.9 28.8 52.3 29.1 53.6 29.5 55 30 56.2 30.6 57.5 31.2 58.6 32 59.7 32.8 60.8 33.8 61.8 34.8 62.7 35.8 63.5 37 64.2 38.1 64.9 39.4 65.4 40.7 65.9 42Z'/%3E%3C/svg%3E"); }
.card-ciao .wordmark { font-size: 0.6875rem; }
.card-b .logo { flex-direction: column; gap: 14px; color: var(--ash); }
.card-b .logo-sq { width: 50px; height: 50px; }
.card-b .wordmark { font-size: 1.375rem; }
.card-b .mono { color: var(--steel); font-size: 0.6875rem; letter-spacing: 0.12em; }
.card-b .card-bn { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; }
.card-flash { position: absolute; inset: 0; z-index: 3; background: var(--c); clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); opacity: 0; pointer-events: none; }
.card-fx { position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; }
.card-fx i { position: absolute; width: 8px; height: 8px; margin: -4px; background: var(--c); opacity: 0; }
.deck-ctl { display: flex; align-items: center; gap: 10px; padding-inline: var(--pad); }
.deck-k { min-width: 64px; color: var(--steel); }
.deck-k b { font-weight: 500; color: var(--ash); }
.deck-prog { position: relative; flex: 1 1 auto; height: 2px; margin-right: 14px; background: var(--line); }
.deck-prog i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--ash); transition: left 0.15s, width 0.15s; }
.deck-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--line-2); color: var(--ash); font: 500 1rem/1 var(--f-mono); cursor: pointer; transition: border-color 0.15s, background-color 0.15s, opacity 0.15s; }
.deck-b:hover:not(:disabled) { border-color: var(--ash); background: var(--graphite); }
.deck-b:disabled { opacity: 0.35; cursor: default; }
.why h2 { max-width: 21ch; }
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.cmp col.k { width: 17%; }
.cmp col.c { width: 33%; }
.cmp th, .cmp td { padding: 20px 24px 21px; vertical-align: top; border-top: 1px solid var(--line); font-weight: 400; }
.cmp thead th { border-top: 0; padding-top: 0; padding-bottom: 18px; vertical-align: bottom; font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.cmp tbody th { padding-left: 0; padding-top: 23px; font: 400 0.75rem/1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.cmp td { color: rgba(243, 238, 230, 0.56); line-height: 1.45; }
.cmp tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.cmp .c { background: var(--paper); color: var(--ink); border-color: #D2CEC7; }  /* opaque: collapsed borders paint over the Night table, not the cell */
.cmp thead .c { padding-top: 22px; border-top: 3px solid var(--torch); }
.cmp-h { display: grid; gap: 16px; justify-items: start; }
.cmp-i { width: 40px; height: 40px; fill: none; stroke: var(--steel); stroke-width: 1.25px; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; }
.cmp-logo { color: var(--ink); gap: 8px; }
.cmp-logo .logo-sq { width: 31px; height: 31px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 107.99 107.99'%3E%3Cpath fill='%230F0E0D' fill-rule='evenodd' d='M77.6 46L77.3 45.9 77 45.8 76.7 45.7 76.3 45.5 76.1 45.3 75.8 45.1 75.6 44.8 75.4 44.5 75.2 44.1 74.7 42.5 74.3 41.3 73.7 40.2 73.2 39.3 72.5 38.2 72.2 37.7 71.6 37 70.8 36.1 70.2 35.5 69.7 35.1 68.8 34.3 67.7 33.6 66.8 33.1 65.7 32.5 64.6 32.1 63.4 31.7 62.1 31.4 60.9 31.1 59.7 31 58.8 31 58.2 31 57.6 31 56.8 31.1 55.5 31.3 54.7 31.5 54.1 31.6 52.9 32 52.3 32.2 51.5 32.5 50.4 33.1 49.4 33.8 48.8 34.1 48.2 34.6 47.2 35.4 46.8 35.8 46.2 36.4 45.4 37.4 44.9 38 44.5 38.5 44.2 39.1 43.7 39.8 43.5 40.4 43.1 41.1 44.1 40.8 45 40.5 46 40.3 46.9 40.2 47.9 40.1 48.9 40 50.1 40 51.1 40 52.1 40.1 53 40.3 54 40.5 55.2 40.8 56.1 41.1 57.3 41.5 58.2 41.9 59.1 42.4 59.9 42.8 60.7 43.4 61.5 43.9 62.5 44.7 63.4 45.5 64.1 46.2 64.8 46.9 65.4 47.7 66 48.5 66.7 49.5 67.2 50.4 67.6 51.2 68 52.1 68.4 53 68.7 54 69 55 74.1 55 74.4 54.3 74.7 53.5 75.2 51.9 75.3 51.6 75.5 51.3 75.9 50.9 76.3 50.5 76.9 50.2 77.2 50.1 77.5 50 78 50 97.1 50 100.1 46 78 46ZM9.6 41.7L8.8 43.7 8.2 45.2 7.5 47.2 7 49.3 6.5 51.4 6.2 53 5.9 55.1 5.8 56.8 5.7 58.9 5.7 61.1 5.8 63.2 5.9 64.8 6.2 67 6.6 69.1 7.1 71.2 7.7 73.3 8.4 75.3 9 76.8 9.9 78.8 10.8 80.7 11.9 82.6 13.1 84.4 14 85.8 15.3 87.5 16.3 88.7 17.8 90.3 19.3 91.9 20.9 93.3 22.1 94.3 23.9 95.7 25.6 96.9 27.5 98 29.4 99 31.3 100 32.8 100.7 34.3 101.2 36.3 101.9 38.4 102.5 40.5 103 42.1 103.3 44.2 103.7 46.4 103.9 48.5 104 50.2 104 52.3 103.9 54.5 103.7 56.6 103.4 58.8 103 60.9 102.5 62.4 102.1 64.5 101.4 66.5 100.7 68.5 99.8 70.4 98.8 71.8 98 73.6 96.9 75 96 76.7 94.7 78.4 93.3 80 91.9 81.1 90.7 82.6 89.1 83.8 87.7 82.8 88.3 81.3 89.2 79.8 90 78.2 90.7 76.6 91.4 75 92.1 73.4 92.6 71.7 93.1 70.1 93.6 68.4 94 66.7 94.3 65.5 94.5 63.8 94.7 62.1 94.9 60.3 95 58.6 95 56.9 95 55.2 94.9 53.5 94.7 51.8 94.5 50 94.2 48.4 93.9 46.7 93.5 45 93 43.4 92.5 41.7 91.8 40.6 91.4 39 90.7 37.5 90 36 89.2 34.5 88.3 33 87.4 31.6 86.4 30.2 85.4 28.8 84.3 27.9 83.6 26.7 82.4 25.4 81.2 24.2 80 23.1 78.7 21.9 77.4 20.9 76 20.2 75 19.2 73.6 18.3 72.2 17.5 70.7 16.9 69.6 16.1 68.1 15.2 66 14.4 63.9 13.8 62.2 13.2 60 12.7 57.7 12.2 55.5 12 53.7 11.8 51.5 11.7 49.7 11.6 47.4 11.7 45.7 11.9 43.4 12.1 41.1 12.5 38.9 12.9 37.1 13.5 34.9 12.8 36 11.9 37.4 11.1 38.8 10.6 39.7Z'/%3E%3Cpath fill='%23F0642A' fill-rule='evenodd' d='M102.2 42.1L101.9 39.9 101.4 37.8 100.9 35.7 100.2 33.7 99.5 31.7 98.6 29.7 97.7 27.7 96.7 25.8 95.5 24 94.3 22.2 93 20.5 91.6 18.9 90.1 17.3 88.6 15.8 87 14.3 85.3 13 83.5 11.7 81.7 10.5 79.8 9.4 77.9 8.4 76 7.6 74 6.8 71.9 6 69.8 5.5 67.8 5 65.6 4.6 63.5 4.3 61.3 4.1 59.2 4 57 4 54.9 4.2 52.7 4.4 50.6 4.7 48.5 5.2 46.4 5.7 44.3 6.4 42.3 7.1 40.3 8 38.4 8.9 36.5 10 34.6 11.1 32.9 12.3 31.1 13.6 29.5 15 27.9 16.5 26.4 18.1 25 19.7 23.6 21.4 22.4 23.1 21.2 24.9 20.1 26.8 19.1 28.7 18.2 30.7 17.4 32.7 16.7 34.7 16.1 36.8 15.6 38.9 15.2 41 14.9 43.1 14.7 45.3 14.6 47.5 14.7 49.6 14.8 51.8 15 53.9 15.4 56 15.8 58.2 16.4 60.2 17 62.3 17.8 64.3 18.6 66.3 19.6 68.3 20.6 70.2 21.8 72 23 73.8 24.3 75.5 25.7 77.1 27.1 78.7 28.7 80.2 30.3 81.7 32 83 33.7 84.3 35.5 85.5 37.4 86.5 39.3 87.5 41.3 88.4 43.3 89.2 45.3 89.9 47.4 90.5 49.5 91 51.6 91.4 53.8 91.7 55.9 91.9 58.1 92 60.2 92 62.4 91.8 64.5 91.6 66.2 91.3 67.8 91 69.8 90.5 71.4 90.1 73 89.6 75 88.8 76.5 88.2 78.4 87.3 79.8 86.5 81.7 85.5 83.5 84.3 84.8 83.3 86.1 82.3 87.4 81.3 89 79.9 90.1 78.7 91.2 77.5 92.7 75.9 93.7 74.6 94.9 72.9 95.8 71.5 96.9 69.7 97.7 68.3 98.4 66.8 99.1 65.3 99.7 63.8 100.2 62.3 100.9 60.2 101.3 58.7 101.8 56.6 102.1 55 102.3 53 78 53 77.7 54 77.4 55 77 55.9 76.6 56.8 76.2 57.6 75.7 58.5 75.1 59.3 74.5 60.1 73.9 60.9 73.3 61.6 72.6 62.3 71.9 63 71.1 63.6 70.2 64.3 69.3 64.9 68.5 65.4 67.6 65.9 66.7 66.3 65.8 66.7 64.9 67 64 67.3 63 67.5 62 67.7 61.1 67.8 60.1 67.9 59.1 68 58.1 68 56.9 67.9 55.9 67.8 55 67.7 54 67.5 53.1 67.2 51.9 66.8 50.8 66.4 49.6 65.9 48.6 65.3 47.5 64.6 46.5 63.9 45.6 63.1 44.7 62.3 43.8 61.4 43 60.5 42.3 59.5 41.6 58.5 41 57.4 40.5 56.3 40 55.2 39.6 54.3 39.3 53.1 39 51.9 38.8 50.7 38.7 49.7 38.6 48.5 38.6 47.3 38.7 46 38.9 44.8 39.1 43.6 39.4 42.4 39.8 41.3 40.2 40.1 40.8 39 41.4 37.9 42 36.9 42.7 35.9 43.5 34.9 44.3 34 45.4 33 46.3 32.2 47.3 31.5 48.4 30.8 49.4 30.2 50.8 29.6 51.9 29.2 53.1 28.8 54.2 28.5 55.5 28.2 56.7 28.1 57.9 28 59.4 28 60.6 28.1 62 28.3 63.5 28.6 64.4 28.9 65.1 29.1 66.5 29.6 67.4 30 68.1 30.4 69.3 31.1 70.5 31.9 71.7 32.9 72.4 33.5 73 34 73.9 35.1 74.8 36.3 75.7 37.5 76.4 38.8 77 40.1 77.5 41.5 77.8 42.2 78 43 102.3 43ZM81.5 38L81.1 37 80.5 36 80.1 35.1 79.6 34.3 78.9 33.4 78.4 32.6 77.8 31.9 77.1 31.2 76.3 30.3 75.7 29.7 74.9 29.1 74.2 28.5 73.5 27.9 72.5 27.2 71.8 26.7 70.9 26.2 70.1 25.8 69.1 25.3 68.2 24.9 67.3 24.6 66.2 24.2 65.3 23.9 64.4 23.7 63.5 23.5 62.3 23.3 61.4 23.1 60.5 23.1 59.5 23 58.6 23 57.4 23 56.5 23.1 55.3 23.2 54.3 23.4 53.4 23.5 52.5 23.8 51.4 24.1 50.5 24.4 49.6 24.7 48.5 25.1 47.7 25.5 46.8 26 45.8 26.5 45 27 44.2 27.6 43.3 28.3 42.6 28.9 41.8 29.5 41.1 30.1 40.3 31 39.7 31.6 39.1 32.4 38.4 33.3 37.9 34.1 37.3 34.9 36.9 35.7 36.3 36.7 35.9 37.6 35.5 38.5 35.2 39.3 34.8 40.4 34.5 41.3 34.3 42.2 34.1 43.1 33.9 44.3 33.8 45.3 33.7 46.5 33.6 47.7 33.6 48.9 33.7 50.1 33.9 51.3 34 52.5 34.2 53.5 34.5 54.7 34.9 55.8 35.3 57 35.8 58.1 36.2 59 36.8 60.1 37.3 61.1 38 62.1 38.7 63.1 39.5 64.1 40.1 64.8 41 65.7 41.9 66.5 42.8 67.3 43.8 68.1 44.7 68.8 45.8 69.4 46.6 69.9 47.6 70.5 48.8 71 49.9 71.4 51 71.8 52 72.1 53.2 72.4 54.3 72.6 55.3 72.8 56.5 72.9 57.4 73 58.6 73 59.6 73 60.8 72.9 61.7 72.8 62.9 72.6 63.8 72.5 65 72.2 65.9 71.9 67 71.5 67.9 71.2 69 70.7 69.9 70.3 70.9 69.8 71.8 69.3 72.8 68.6 73.5 68.1 74.5 67.3 75.2 66.7 76.1 65.9 76.8 65.2 77.5 64.3 78.2 63.6 78.9 62.7 79.4 61.9 80.1 60.9 80.5 60 81.1 59 81.5 58 96.3 58 96 59.3 95.7 60.2 95.2 61.6 94.8 62.5 94.1 64.2 93.5 65.5 93 66.4 92.6 67.2 91.8 68.5 90.8 70.1 90 71.2 89.4 72 88.2 73.5 86.9 74.9 86.2 75.6 85.2 76.6 84.1 77.5 83.4 78.1 81.9 79.3 81.1 79.9 79.9 80.7 78.3 81.7 76.6 82.6 75.3 83.2 74.4 83.7 72.7 84.4 70.9 85 69 85.6 67.2 86 65.3 86.4 63.4 86.7 61.5 86.9 59.6 87 57.7 87 55.8 86.9 53.9 86.7 52 86.4 50.1 86 48.2 85.6 46.4 85 44.6 84.4 42.8 83.7 41.1 82.8 39.4 81.9 37.8 81 36.2 79.9 34.6 78.7 33.2 77.5 31.7 76.2 30.4 74.9 29.1 73.5 27.9 72 26.8 70.5 25.7 68.9 24.7 67.2 23.8 65.5 23 63.8 22.2 62 21.6 60.2 21.1 58.4 20.6 56.5 20.2 54.7 19.9 52.8 19.7 50.9 19.6 49 19.6 47 19.7 45.1 19.9 43.2 20.2 41.3 20.6 39.5 21.1 37.6 21.6 35.8 22.2 34 23 32.2 23.8 30.5 24.7 28.8 25.7 27.1 26.8 25.5 27.9 24 29.1 22.5 30.4 21.1 31.7 19.8 33.2 18.5 34.6 17.2 36.2 16.1 37.8 15.1 39.4 14.1 41.1 13.2 42.8 12.3 44.1 11.8 45 11.4 46 11.1 47.3 10.7 48.7 10.3 49.6 10.1 51 9.8 52.4 9.5 53.4 9.3 54.8 9.2 55.8 9.1 57.2 9 58.1 9 59.6 9 60.5 9 62 9.1 62.9 9.2 64.4 9.4 65.8 9.7 66.7 9.8 68.1 10.2 69.5 10.5 70.9 11 71.8 11.3 72.7 11.6 74 12.2 74.9 12.5 76.2 13.2 77 13.6 78.3 14.3 79.1 14.8 80.3 15.6 81.9 16.7 83 17.6 84.5 18.8 85.5 19.8 86.5 20.8 87.8 22.2 89.1 23.6 90.2 25.1 91.3 26.7 92.1 27.9 93 29.6 93.9 31.3 94.5 32.6 95.2 34.4 95.8 36.2 96.3 38Z'/%3E%3C/svg%3E"); }
.cmp-logo .wordmark { font-size: 1.5rem; line-height: 1; }
.cmp td { position: relative; padding-left: 50px; transition: color 0.2s, background-color 0.2s; }
.cmp td.c { padding-left: 56px; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.cmp-x { position: absolute; left: 24px; top: 27px; width: 10px; height: 10px; fill: none; stroke: rgba(154, 150, 143, 0.7); stroke-width: 1.5px; }
.cmp-ck { position: absolute; left: 24px; top: 23px; width: 18px; height: 18px; overflow: visible; }
.cmp-ck rect { fill: var(--torch); transform-box: fill-box; transform-origin: center; }
.cmp-ck path { fill: none; stroke: var(--night); stroke-width: 2px; stroke-linecap: square; stroke-dasharray: 14; }
.cmp tbody tr:hover th { color: var(--ash); }
.cmp tbody tr:hover td:not(.c) { color: rgba(243, 238, 230, 0.82); }
.cmp tbody tr:hover td.c { background: var(--ash); }
.cmp tbody tr:last-child .c { border-bottom-color: var(--paper); }
.cmp tfoot td { padding: 0; border: 0; }
.cmp tfoot td.c { padding: 8px 24px 24px; }
.cmp tfoot .btn { width: 100%; justify-content: space-between; }

.pe { background: var(--paper); color: var(--ink); border-top: 0; }
.pe > .in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(40px, 6vw, 96px); }
.pe .sec-lede { color: var(--ink-2); }
.pe .next { border-color: var(--paper-line); }
.pe .next:hover { border-color: var(--ink); }
.pe-vis { min-width: 0; }
.pe-vis .iso { margin-inline: -8px; }
.pe-carry { margin-top: 20px; border-top: 1px solid var(--paper-line); padding-top: 16px; }
.pe-carry > p { margin: 0 0 12px; color: var(--ink-2); }
.pe-carry ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pe-carry li { display: grid; gap: 6px; align-content: start; font-size: 0.9375rem; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.pe-carry li .mono { color: var(--torch); }
@media (max-width: 760px) { .pe-vis .iso { display: none; } .pe-carry { margin-top: 0; } .pe-carry ol { grid-template-columns: 1fr; gap: 10px; } .pe-carry li { grid-template-columns: 2.25em minmax(0, 1fr); gap: 8px; } }

/* Security: SOC 2 Type II (Paul, 2026-10-22), a seal on the right and four plain points under it. */
/* Security (Paul, 2026-10-22 19:00): the header with four compliance badges beside it (cut corners like the industry cards,
   SOC 2 in Torch, each with a pixel emblem drawn like the practice icons), a live line for Vanta's monitoring, then six practices in a ruled grid with pixel icons. */
.secu > .in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(40px, 6vw, 96px); row-gap: clamp(40px, 5vw, 72px); }
.secu .sec-head h2 { max-width: 17ch; }
.secu-side { display: grid; gap: 16px; }
.secu-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.secu-badges li { --k: 14px; --b: var(--line-2); position: relative; isolation: isolate; display: grid; grid-template: "st ic" auto "nm nm" auto / minmax(0, 1fr) auto; align-content: space-between; gap: 20px 12px; min-height: clamp(128px, 11vw, 160px); padding: 16px 18px 18px; background: var(--b); clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); }
.secu-badges li::before { content: ""; position: absolute; inset: 1px; z-index: -1; --k: 13.5px; background: var(--graphite); clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); }
.secu-badges li.t { --b: var(--torch); }
.sb-st { grid-area: st; align-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.sb-st i { width: 7px; height: 7px; background: var(--steel); }
.secu-badges li.t .sb-st { color: var(--ash); }
.secu-badges li.t .sb-st i { background: var(--torch); }
.sb-ic { grid-area: ic; width: 42px; height: 42px; color: var(--ash); }
/* Hover: the frame and the status square turn Torch, and each emblem moves (its moving part in Torch). */
.secu-badges li { transition: background-color 0.25s; }
.secu-badges li .sb-st, .secu-badges li .sb-st i { transition: color 0.25s, background-color 0.25s; }
.secu-badges li:hover { --b: var(--torch); }
.secu-badges li:hover .sb-st { color: var(--ash); }
.secu-badges li:hover .sb-st i { background: var(--torch); }
.sb-ic g { transform-box: view-box; transform-origin: 10.5px 10.5px; }
.e-m1, .e-m3, .e-fill { opacity: 0; }
.e-fill { fill: var(--torch); }
.secu-badges li:hover .e-seal { animation: e-stamp 0.5s steps(1, end); }
.secu-badges li:hover .e-tick { fill: var(--torch); animation: e-draw 0.55s steps(8, end); }
.secu-badges li:hover .e-st { animation: e-run 1.2s steps(1, end) calc(var(--i) * 100ms) infinite; }
.secu-badges li:hover .e-shk { animation: e-open 1.2s steps(1, end); }
.secu-badges li:hover .e-m { fill: var(--torch); animation: e-turn 0.9s steps(1, end) infinite; }
.secu-badges li:hover .e-m2 { animation-delay: -0.6s; }
.secu-badges li:hover .e-m3 { animation-delay: -0.3s; }
.secu-badges li:hover .e-fill { animation: e-beat 1.1s steps(1, end) infinite; }
@keyframes e-stamp { 0% { transform: scale(0.86); } 40% { transform: scale(1.05); } 70% { transform: none; } }
@keyframes e-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes e-run { 0% { fill: var(--torch); } 18% { fill: currentColor; } }
@keyframes e-open { 0% { transform: translateY(-1px); } 55% { transform: none; } }
@keyframes e-turn { 0% { opacity: 1; } 33.3% { opacity: 0; } }
@keyframes e-beat { 0% { opacity: 1; } 12% { opacity: 0; } 24% { opacity: 1; } 60% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .secu-badges li:hover .sb-ic g { animation: none; } }
.secu-badges b { grid-area: nm; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.9rem); font-weight: 400; line-height: 0.95; color: var(--ash); white-space: nowrap; }
.secu-live { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
.secu-live i { width: 8px; height: 8px; background: var(--torch); animation: secu-live 2.4s ease-in-out infinite; }
@keyframes secu-live { 50% { opacity: 0.3; } }
.secu-grid { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.secu-grid li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-content: start; padding: 28px 28px 30px 0; border-bottom: 1px solid var(--line); }
.secu-grid li:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.secu-grid .px-ic { grid-row: span 2; color: var(--ash); margin-top: 1px; }
.secu-grid h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.secu-grid p { grid-column: 2; color: rgba(243, 238, 230, 0.72); font-size: 0.9375rem; line-height: 1.55; max-width: 36ch; }
@media (max-width: 900px) {
  .secu > .in { grid-template-columns: 1fr; }
  .secu-side { max-width: 560px; }
  .secu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secu-grid li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .secu-grid li:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .secu-badges { gap: 10px; }
  .secu-badges li { grid-template: "ic" auto "st" auto "nm" auto / minmax(0, 1fr); row-gap: 14px; min-height: 112px; padding: 14px 14px 16px; }
  .secu-grid { grid-template-columns: 1fr; }
  .secu-grid li, .secu-grid li:nth-child(2n) { padding: 22px 0 24px; border-left: 0; }
  /* Three of the six controls on a phone: encryption, never trained on your data, a person approves. security.html has all six. */
  .secu-grid li:nth-child(3), .secu-grid li:nth-child(4), .secu-grid li:nth-child(6) { display: none; }
}

.cta { position: relative; overflow: hidden; background: var(--night); isolation: isolate; }
.cta > .in { position: relative; z-index: 1; min-height: clamp(560px, 86vh, 820px); align-content: center; justify-items: start; gap: 22px; padding-block: clamp(96px, 12vw, 160px); pointer-events: none; }
.cta > .in > * { pointer-events: auto; }
.cta h2 { font-size: clamp(2.6rem, 1.1rem + 5.4vw, 5.75rem); max-width: 12ch; text-shadow: 0 0 28px var(--night), 0 0 10px var(--night); }
.cta-p { font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); line-height: 1.45; max-width: 36ch; color: var(--ash); text-shadow: 0 0 18px var(--night), 0 0 6px var(--night); }
.cta .btns { margin-top: 10px; }
.cta .btn.line { background: rgba(15, 14, 13, 0.72); }
.cta-scene { position: absolute; inset: 0; z-index: 0; }
.cta-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cta-scene .marks { position: absolute; inset: clamp(14px, 2vw, 28px); pointer-events: none; }
.cta-tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cta-tag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 4px 7px 4px 6px; background: rgba(15, 14, 13, 0.78); border: 1px solid var(--line); font: 500 0.625rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); white-space: nowrap; will-change: transform; }
.cta-tag i { width: 6px; height: 6px; background: var(--torch); }
.cta-tag.hq i { background: var(--ash); }
.cta-hud { position: absolute; left: clamp(28px, 3.4vw, 48px); right: clamp(28px, 3.4vw, 48px); bottom: clamp(24px, 3vw, 40px); display: flex; justify-content: space-between; gap: 16px; color: var(--steel); pointer-events: none; }
.cta-hud b { font-weight: 400; color: var(--ash); }
/* Portrait tablets and narrow windows: the space beside the text is too thin for the map, so it gets a band above it. */

@media (max-width: 1023px) {
  .pe > .in { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cta > .in { align-content: end; }
}
@media (max-width: 760px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp colgroup { display: none; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tr { display: grid; gap: 8px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
  .cmp tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .cmp th, .cmp td, .cmp tbody tr:last-child > * { padding: 0; border: 0; }
  .cmp tbody th { padding: 0; }
  .cmp td.c, .cmp tbody tr:last-child .c { order: 1; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px 13px; font-size: 1rem; }
  .cmp td.c::before { content: "Ciao"; grid-column: 1 / -1; margin-bottom: 6px; font: 500 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #B8441A; }
  .cmp-ck { position: static; margin-top: 2px; }
  .cmp-x { display: none; }
  .cmp td:not(.c) { order: 2; font-size: 0.9375rem; }
  .cmp td:not(.c)::before { content: attr(data-l) ": "; color: var(--steel); }
  .cmp tfoot { display: block; }
  .cmp tfoot tr { display: block; padding: 20px 0 0; border: 0; }
  .cmp tfoot td:not(.c) { display: none; }
  .cmp tfoot td.c { display: block; padding: 0; background: none; }
  .cmp tfoot td.c::before { content: none; }
}
@media (max-width: 560px) {
  .cta-scene { position: relative; inset: auto; height: min(420px, 100vw + 30px); border-bottom: 1px solid var(--line); }
  .cta > .in { min-height: 0; align-content: start; padding-top: 40px; }
  .cta-hud span:last-child { display: none; }
  .deck-track { grid-auto-columns: min(76%, 292px); padding-top: 16px; }
  .pe .iso-label .co { display: none; }
}

/* Load-in. Pixel headings flicker on letter by letter, like an old display warming up, and the rest rises in after them.
   JS splits the letters and adds .go; without JS everything shows after 2.5s, and with reduced motion it shows at once. */
.fl-w { white-space: nowrap; }
@keyframes flick { 0% { opacity: 0; } 40% { opacity: 0.6; } 60% { opacity: 0.3; } 80%, 100% { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes appear { to { visibility: visible; opacity: 1; } }
@keyframes blink { 0%, 50% { opacity: 1; } 25% { opacity: 0.3; } }
@media (prefers-reduced-motion: no-preference) {
  [data-fl]:not(.fl-ready) { visibility: hidden; animation: appear 0s 2.5s forwards; }
  [data-fl]:not(.go) .ch { opacity: 0; }
  [data-fl].go .ch { animation: flick 0.26s steps(1, end) var(--d, 0ms) backwards; }
  :root:not(.go) [data-ld] { opacity: 0; animation: appear 0s 2.5s forwards; }
  :root.go [data-ld] { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms) backwards; }
  :root.go [data-ld="fade"] { animation-name: fade; animation-duration: 1.2s; }
  :root.rv [data-rv]:not(.go) { opacity: 0; }
  [data-rv].go { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms) backwards; }
  [data-rv="fade"].go { animation-name: fade; animation-duration: 1.2s; }
  @keyframes card-pop { 0% { scale: 1; } 18% { scale: 0.95; } 55% { scale: 1.05; } 100% { scale: 1; } }
  @keyframes card-flash { 0%, 30% { opacity: 0; } 45% { opacity: 0.9; } 100% { opacity: 0; } }
  @keyframes card-spark { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(160deg) scale(1); } }
  @keyframes card-sweep { from { left: -40%; opacity: 1; } to { left: 140%; opacity: 1; } }
  .card.pop { animation: card-pop 0.9s cubic-bezier(0.3, 1.2, 0.5, 1); }
  .card.pop .card-flash { animation: card-flash 0.75s ease-out; }
  .card.pop .card-fx i { animation: card-spark 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s; }
  .card.pop .card-sh { animation: card-sweep 0.8s cubic-bezier(0.45, 0, 0.2, 1) 0.45s backwards; }
  .card-fx i:nth-child(1) { --x: -150px; --y: -120px; } .card-fx i:nth-child(2) { --x: 160px; --y: -140px; }
  .card-fx i:nth-child(3) { --x: -170px; --y: 40px; } .card-fx i:nth-child(4) { --x: 175px; --y: 30px; }
  .card-fx i:nth-child(5) { --x: -110px; --y: 190px; } .card-fx i:nth-child(6) { --x: 120px; --y: 200px; }
  .card-fx i:nth-child(7) { --x: -40px; --y: -230px; width: 5px; height: 5px; } .card-fx i:nth-child(8) { --x: 40px; --y: 235px; width: 5px; height: 5px; }
  @keyframes ck-pop { from { transform: scale(0); } }
  @keyframes ck-draw { from { stroke-dashoffset: 14; } }
  .cmp.go .cmp-ck rect { animation: ck-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) calc(650ms + var(--r, 0) * 160ms) backwards; }
  .cmp.go .cmp-ck path { animation: ck-draw 0.4s cubic-bezier(0.65, 0, 0.35, 1) calc(900ms + var(--r, 0) * 160ms) backwards; }
  .eyebrow.go::before { animation: blink 0.4s steps(1, end) var(--d, 0ms) backwards; }
}
/* proof-and-ask patch (2026-10-22): demo link, case study cards, the closing text box, investors, demo pop-up. */
.btn .pl, .tlink .pl { width: 10px; height: 10px; flex: none; }
.tlink { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); font: 500 0.75rem/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); transition: border-color 0.15s, color 0.15s; }
.tlink .pl { color: var(--torch); }
.tlink:hover { border-color: var(--ash); }

.cases > .in { gap: clamp(32px, 4vw, 52px); }
.cases-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; }
.cases-head .eyebrow, .cases-head h2 { grid-column: 1; }
.cases-head h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); max-width: 18ch; }
.cases-head .tlink { grid-column: 2; grid-row: 2; }
.cases-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cases-row li { display: grid; }
.case-c { display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; padding: clamp(22px, 2.4vw, 32px); background: var(--graphite); border: 1px solid var(--line); transition: border-color 0.2s; }
.case-c:hover { border-color: var(--c); }
.case-tag { display: inline-flex; align-items: center; gap: 10px; color: var(--steel); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.case-tag .sq { width: 8px; height: 8px; background: var(--c); }
.case-n { display: grid; gap: 10px; margin-top: 8px; }
.case-n b { font-size: clamp(2.75rem, 1.9rem + 2.6vw, 4.25rem); font-weight: 500; line-height: 1; color: var(--ash); }
.case-n span { color: rgba(243, 238, 230, 0.78); max-width: 26ch; }
.case-d { color: var(--steel); font-size: 0.9375rem; line-height: 1.5; padding-top: 18px; border-top: 1px solid var(--line); }
.case-go { display: inline-flex; gap: 10px; align-items: center; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.case-go .ar { color: var(--c); transition: transform 0.2s; }
.case-c:hover .case-go .ar { transform: translateX(3px); }
/* Case study cards, in line with the industry cards (Paul 22:57): their chamfered frame in the industry colour, one pixel wide;
   their dotted ground; and the industry's part in its diamond, top right. */
.case-c { --k: 14px; position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; background: var(--c); border: 0; clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); }
.case-c::before { content: ""; position: absolute; inset: 1px; z-index: -1; --k: 13.6px; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='5' y='5' width='1.5' height='1.5' fill='%23F3EEE6' fill-opacity='.14'/%3E%3C/svg%3E"); clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k)); }
.case-c > * { grid-column: 1 / -1; }
.case-c > .case-tag { grid-column: 1; grid-row: 1; align-self: start; }
.case-art { grid-column: 2; grid-row: 1; position: relative; width: clamp(84px, 7.5vw, 108px); aspect-ratio: 1; margin: -10px -8px -14px 0; }
.case-c > .case-art { grid-column: 2; }
.case-art::before, .case-art::after { content: ""; position: absolute; inset: 0; margin: auto; height: 56%; aspect-ratio: 1; transform: rotate(45deg); }
.case-art::before { border: 1px solid var(--c); opacity: 0.6; }
.case-art::after { height: 40%; background: var(--c); opacity: 0.16; }
.case-art img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.case-c:hover .case-art img { transform: translateY(-4px); }
.case-n { margin-top: 0; }
.case-d { border-top-color: var(--line-2); }
.cases-row li:focus-within { outline: 2px solid var(--ash); outline-offset: 4px; }
.case-c:focus-visible { outline: none; }
/* The customer's logo, bottom right opposite "Read the case study", where the case has one (site_build.py adds it from the strip). */
.case-c > .case-go, .case-c > .case-lg { grid-row: 4; }
.case-c > .case-lg { grid-column: 2; justify-self: end; align-self: center; display: block; height: calc(var(--h) * 0.62px); width: calc(var(--h) * var(--a) * 0.62px); color: var(--ash); opacity: 0.86; }
@media (max-width: 1000px) { .cases-row { grid-template-columns: minmax(0, 1fr); } .case-c { grid-template-rows: none; } }
@media (max-width: 760px) { .cases-head { grid-template-columns: minmax(0, 1fr); } .cases-head .tlink { grid-column: 1; grid-row: auto; } }

.cta-ask { display: grid; gap: 16px; width: min(640px, 100%); }
.cta-ask textarea { width: 100%; min-height: 116px; margin: 0; padding: 16px 18px; resize: vertical; background: rgba(15, 14, 13, 0.86); color: var(--ash); border: 1px solid var(--line-2); border-radius: 0; font: 400 clamp(1rem, 0.94rem + 0.25vw, 1.125rem)/1.45 var(--f-sans); transition: border-color 0.15s; }
.cta-ask textarea::placeholder { color: rgba(154, 150, 143, 0.8); }
.cta-ask textarea:hover { border-color: rgba(243, 238, 230, 0.42); }
.cta-ask textarea:focus { outline: none; border-color: var(--torch); }
.cta-ask .btns { margin-top: 0; }

.backers { border-top: 1px solid var(--line); }
.backers-in { display: grid; grid-template-columns: minmax(160px, 0.3fr) minmax(0, 1fr); align-items: center; gap: 20px clamp(32px, 5vw, 72px); padding-block: clamp(28px, 3.4vw, 44px); }
.backers-t { display: flex; align-items: center; gap: 10px; }
.backers-t::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--torch); }
.backers-h { color: var(--steel); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* An even ledger: four cells with hairlines between them; each logo centred and sized by eye. */
.backers-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.backers-row li + li { border-left: 1px solid var(--line); }
.backers-row a { position: relative; display: grid; place-items: center; height: clamp(84px, 7.6vw, 108px); padding: 0 18px; color: var(--steel); transition: color 0.25s, background-color 0.25s; }
.backers-row a::after { content: ""; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; background: var(--torch); opacity: 0; transform: translate(-3px, 3px); transition: opacity 0.25s, transform 0.25s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 8L8 1M2.5 1H8v5.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 8L8 1M2.5 1H8v5.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.backers-row a:hover, .backers-row a:focus-visible { color: var(--ash); background: var(--graphite); }
.backers-row a:hover::after, .backers-row a:focus-visible::after { opacity: 1; transform: none; }
.backers-row svg { display: block; width: auto; max-width: 100%; }
/* Paul 2026-10-23: the logos a little bigger. */
.bk-neb { height: 22px; }
.bk-peb { height: 22px; }
.bk-fwd { height: 23px; }
.bk-unc svg, .bk-unc .bk-l i { height: 13px; }
.bk-unc { display: grid; gap: 3px; justify-items: start; }
.bk-unc svg { height: 11px; }
/* Uncommon's wordmark comes in ten faces; hovering it steps through them (the other nine are masks, so they take the text colour). */
.bk-l { display: grid; justify-items: start; }
.bk-l > * { grid-area: 1 / 1; }
.bk-l i { height: 11px; background: currentColor; -webkit-mask: var(--m) left center / contain no-repeat; mask: var(--m) left center / contain no-repeat; visibility: hidden; }
.bk-l i.on { visibility: visible; }
.bk-unc[data-f]:not([data-f="0"]) .bk-l svg { visibility: hidden; }
@media (max-width: 900px) { .backers-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .backers-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .backers-row li:nth-child(odd) { border-left: 0; } .backers-row li:nth-child(n + 3) { border-top: 1px solid var(--line); } .backers-row a { height: 80px; } .bk-neb, .bk-peb { height: 19px; } .bk-fwd { height: 20px; } .bk-unc svg, .bk-unc .bk-l i { height: 12px; } }

.demo { width: min(1240px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; background: var(--night); color: var(--ash); border: 1px solid var(--line-2); overflow: auto; }
.demo::backdrop { background: rgba(15, 14, 13, 0.84); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); }
.demo-top p { display: inline-flex; align-items: center; gap: 10px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.demo-top .sq { width: 8px; height: 8px; background: var(--torch); }
.demo-fr { aspect-ratio: 16 / 9; width: 100%; height: round(down, calc((min(1240px, 100vw - 32px) - 2px) * 9 / 16), 1px); max-height: calc(100dvh - 170px); background: var(--night); }
.demo-top, .demo-end { position: relative; z-index: 1; }
.demo-fr iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 18px; border-top: 1px solid var(--line); }
.demo-end p { color: rgba(243, 238, 230, 0.78); }
/* One tab per use case under the video. The playing one's line fills as it plays; a "Soon" tab is a video still to come. */
.demo-tabs { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); container-type: inline-size; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab { position: relative; display: grid; gap: 6px; min-width: 0; padding: 14px 16px 15px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--ash); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s; }
.demo-tab:first-child { border-left: 0; }
.demo-tab:not([disabled]):not([aria-selected="true"]):hover { background: rgba(243, 238, 230, 0.05); }
.demo-tab:focus-visible { outline: 2px solid var(--ash); outline-offset: -2px; }
.dt-k { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--steel); }
.dt-k span, .dt-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-k em { margin-left: auto; padding: 0 4px; border: 1px solid var(--line-2); font-style: normal; font-size: 0.5625rem; line-height: 1.5; }
.dt-n { font-size: 0.9375rem; line-height: 1.3; }
.dt-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.dt-bar i { display: block; width: 0; height: 100%; background: var(--torch); transition: width 0.25s linear; }
.demo-tab[aria-selected="true"] .dt-bar { background: rgba(243, 238, 230, 0.14); }
.demo-tab[aria-selected="true"] .dt-k { color: var(--torch); }
.demo-tab[disabled] { cursor: default; color: rgba(243, 238, 230, 0.4); }
.demo-tab[disabled] .dt-k { color: rgba(154, 150, 143, 0.6); }
/* With the tab row the pop-up narrows on short screens instead of letterboxing the video: the video stays 16:9, a whole
   number of pixels tall. */
.demo:has(.demo-tabs) { width: min(1240px, calc(100vw - 32px), calc((100dvh - 240px) * 16 / 9 + 2px)); }
.demo:has(.demo-tabs) .demo-fr { height: round(down, calc((min(1240px, 100vw - 32px, (100dvh - 240px) * 16 / 9 + 2px) - 2px) * 9 / 16), 1px); max-height: calc(100dvh - 240px); }
/* Short laptop screens narrow the pop-up, so a narrow row drops the Soon tag (the dimmed tab still says it) and tightens the
   labels; a 1366x657 window still fits every label whole. Phones scroll the row sideways instead, with the tag. */
@container (max-width: 999px) { .dt-k em { display: none; } .demo-tab { padding: 12px 12px 13px; } .dt-n { font-size: 0.875rem; } }
@container (max-width: 759px) { .demo-tab { padding: 12px 10px 13px; } .dt-k { letter-spacing: 0.05em; } }
@media (max-width: 520px) { .demo-tabs { grid-auto-columns: 176px; } .demo-tab { padding: 12px 12px 13px; } .dt-k { letter-spacing: 0.08em; } .dt-k em { display: inline; } .dt-n { font-size: 0.9375rem; } }
@media (max-width: 520px) { .demo-end .btn { width: 100%; justify-content: center; } }
/* logo-case-links patch (2026-10-22): a customer logo with a case study links to it; hover or focus shows "Case study". */
.logos-row li { position: relative; }
.logo-cs { display: block; position: relative; outline: none; }
.logo-cs svg { transition: color 0.2s, opacity 0.2s; }
.logo-tip { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; white-space: nowrap; background: var(--night); border: 1px solid var(--line-2); color: var(--ash); font-size: 0.6875rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transform: translate(-50%, calc(-50% + 4px)); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.logo-tip .ar { color: var(--torch); }
.logo-cs:hover svg, .logo-cs:focus-visible svg { opacity: 0.14; }
.logo-cs:hover .logo-tip, .logo-cs:focus-visible .logo-tip { opacity: 1; transform: translate(-50%, -50%); }
.logo-cs:focus-visible .logo-tip { border-color: var(--torch); }
@media (prefers-reduced-motion: reduce) { .logo-tip { transition: none; transform: translate(-50%, -50%); } }

/* Links to pages that aren't live yet have no href: no pointer, no hover colour. */
a:not([href]) { cursor: default; }
.foot-cols a:not([href]):hover { color: rgba(243, 238, 230, 0.8); }

/* Industry pages: hero with the part, who it's for, three first jobs, your systems, an example, how we start on Paper, the closing call. */
.ind-hero .in { padding-block: clamp(56px, 9vw, 128px) clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ind-hero-t { display: grid; gap: clamp(18px, 2.4vw, 26px); justify-items: start; min-width: 0; }
.ind-hero h1 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem); max-width: 14ch; }
.ind-hero .lede { font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.3125rem); line-height: 1.5; max-width: 52ch; color: rgba(243, 238, 230, 0.86); }
.ind-hero .btns { margin-top: 6px; }
.ind-fig { justify-self: end; width: 100%; max-width: 520px; min-width: 0; }
.ind-stage { position: relative; aspect-ratio: 1; background: var(--graphite); display: grid; place-items: center; overflow: hidden; }
.ind-stage .marks { position: absolute; inset: 0; pointer-events: none; }
.ind-stage img { width: 78%; height: 78%; object-fit: contain; margin-top: 4%; }
.ind-who { border-top: 1px solid var(--line); }
.ind-who .in { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px 32px; padding-block: clamp(28px, 3.5vw, 44px); }
.ind-lbl { color: var(--steel); padding-top: 6px; }
.ind-who-r { display: grid; gap: 16px; min-width: 0; }
.ind-subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px 0; }
.ind-subs li { padding: 2px 16px; border-left: 1px solid var(--line-2); font-size: 1.0625rem; line-height: 1.4; }
.ind-typical { color: var(--steel); font-size: 0.9375rem; max-width: 70ch; }
.ind-rows { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.ind-rows > li { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 40px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.ind-job { display: grid; gap: 14px; align-content: start; }
.ind-no { display: flex; align-items: center; gap: 12px; }
.ind-no .mono { color: var(--steel); }
.ind-code { font: 400 0.6875rem/1 var(--f-mono); letter-spacing: 0.08em; color: var(--c); border: 1px solid var(--line-2); padding: 4px 7px; }
.ind-job h3 { font: 500 1.25rem/1.3 var(--f-sans); letter-spacing: -0.01em; }
.ind-today, .ind-build { display: grid; gap: 8px; align-content: start; }
.ind-today .mono, .ind-build > .mono { color: var(--steel); }
.ind-today p:not(.mono) { color: rgba(243, 238, 230, 0.78); }
.ind-build p:not(.mono) { color: rgba(243, 238, 230, 0.9); }
.ind-build .ind-people { margin-top: 4px; padding-left: 14px; border-left: 2px solid var(--torch); }
.ind-build .ind-works { margin-top: 4px; color: var(--steel); }
.ind-sys-gs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 32px; }
.ind-sys-g { border-top: 1px solid var(--line); padding-top: 14px; }
.ind-sys-g .mono { color: var(--steel); }
.ind-sys-g ul { list-style: none; margin: 10px 0 0; padding: 0; }
.ind-sys-g li { font-size: 1.0625rem; line-height: 1.35; padding-block: 5px; }
.ind-fine { color: var(--steel); font-size: 0.875rem; }
.ind-sys-r { display: grid; gap: 28px; }
.ind-ex > .in { gap: 20px; justify-items: start; }
.ind-ex .eyebrow { margin-bottom: 8px; }
.ind-card { width: 100%; background: var(--graphite); border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.ind-case { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; transition: border-color 0.15s; }
.ind-case:hover { border-color: var(--line-2); }
.ind-card-t { display: grid; gap: 14px; }
.ind-tag { display: inline-flex; align-items: center; gap: 10px; color: var(--steel); }
.ind-tag .sq { width: 10px; height: 10px; background: var(--c); flex: none; }
.ind-card h3 { font: 500 clamp(1.25rem, 1rem + 0.8vw, 1.75rem)/1.25 var(--f-sans); letter-spacing: -0.015em; max-width: 30ch; text-wrap: balance; }
.ind-card-t p:not(.mono) { color: rgba(243, 238, 230, 0.78); max-width: 60ch; }
.ind-go { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; padding-bottom: 3px; border-bottom: 1px solid var(--line-2); white-space: nowrap; transition: border-color 0.15s; }
.ind-go::before { content: ""; width: 10px; height: 10px; background: var(--torch); }
.ind-go .ar { display: inline-block; transition: transform 0.2s; }
.ind-case:hover .ind-go { border-color: var(--ash); }
.ind-case:hover .ind-go .ar { transform: translateX(3px); }
.ind-first { margin: 18px 0 0; border-top: 1px solid var(--line); }
.ind-first > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ind-first > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ind-first dt { color: var(--steel); padding-top: 4px; }
.ind-first dd { margin: 0; color: rgba(243, 238, 230, 0.86); max-width: 70ch; }
.ind-how { background: var(--paper); color: var(--ink); }
.ind-how .in { padding-block: clamp(64px, 9vw, 120px); display: grid; gap: clamp(36px, 4.4vw, 56px); }
.ind-how .eyebrow { color: var(--ink); }
.ind-how h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 15ch; }
.ind-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--paper-line); }
.ind-steps li { display: grid; gap: 10px; align-content: start; padding: 22px 24px 0; border-left: 1px solid var(--paper-line); }
.ind-steps li:first-child { border-left: 0; padding-left: 0; }
.ind-steps .mono { color: var(--ink-2); }
.ind-steps li:first-child .mono { color: var(--torch); }
.ind-steps h3 { font: 500 1.125rem/1.3 var(--f-sans); letter-spacing: -0.01em; }
.ind-steps p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.ind-how-link { justify-self: start; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid var(--paper-line); transition: border-color 0.15s; }
.ind-how-link:hover { border-color: var(--ink); }
.ind-how + .sec { border-top: 0; }
.ind-cta > .in { padding-block: clamp(80px, 10vw, 140px) 0; gap: 22px; justify-items: start; }
.ind-cta h2 { font-size: clamp(2.6rem, 1.1rem + 5.4vw, 5.75rem); max-width: 17ch; }
.ind-cta-p { font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); line-height: 1.45; max-width: 40ch; color: rgba(243, 238, 230, 0.86); }
.ind-cta .btns { margin-top: 10px; }
.ind-others { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: clamp(48px, 7vw, 96px); padding-block: 22px; border-top: 1px solid var(--line); }
.ind-others .mono { color: var(--steel); }
.ind-others ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ind-others a { display: inline-flex; align-items: baseline; gap: 10px; font-size: 1rem; color: var(--steel); transition: color 0.15s; }
.ind-others a:hover { color: var(--ash); }
.ind-others i { width: 9px; height: 9px; background: var(--c); flex: none; align-self: flex-start; margin-top: 0.42em; }
@media (max-width: 1099px) {
  .ind-rows > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ind-job { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
}
@media (max-width: 899px) {
  .ind-hero .in { grid-template-columns: 1fr; }
  .ind-fig { justify-self: stretch; max-width: none; }
  .ind-stage { aspect-ratio: 1 / 0.8; max-height: 50svh; width: 100%; }
  .ind-who .in { grid-template-columns: 1fr; }
  .ind-lbl { padding-top: 0; }
  .ind-steps { grid-template-columns: 1fr 1fr; }
  .ind-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .ind-steps li:nth-child(n + 3) { margin-top: 28px; }
}
@media (max-width: 759px) {
  .ind-subs { grid-template-columns: 1fr 1fr; }
  .ind-rows > li { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
  .ind-job { grid-template-columns: 1fr; gap: 10px; }
  .ind-sys-gs { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .ind-sys-g { padding-bottom: 20px; }
  .ind-case { grid-template-columns: 1fr; }
  .ind-first > div { grid-template-columns: 1fr; }
  .ind-steps { grid-template-columns: 1fr; border-top: 0; }
  .ind-steps li:nth-child(n) { border-left: 0; padding: 18px 0 20px; margin: 0; border-top: 1px solid var(--paper-line); }
  .ind-steps li:last-child { border-bottom: 1px solid var(--paper-line); }
  .ind-others { display: grid; }
  .ind-others ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
}
@media (max-width: 430px) { .ind .btns { gap: 10px; } .ind .btn { padding: 12px 15px; font-size: 0.875rem; } }

/* Careers: an Ashby-style board (careers.html) and role pages (careers/*.html); the security manifesto and the Security page's link to it */
.jb-hd .in, .mf-hd .in { padding-block: clamp(48px, 7vw, 104px) clamp(32px, 4vw, 56px); display: grid; gap: clamp(16px, 2vw, 22px); justify-items: start; }
.jb-hd h1, .mf-hd h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.75rem); max-width: 16ch; }
.jb-hd .lede, .mf-hd .lede { font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.3125rem); line-height: 1.5; max-width: 54ch; color: rgba(243, 238, 230, 0.86); }
.jb-where { color: var(--steel); }
.jb-board .in { padding-bottom: clamp(64px, 8vw, 112px); }
.jb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 64px; padding-block: 12px; border-top: 1px solid var(--line-2); }
.jb-bar h2 { color: var(--ash); font-weight: 400; }
.jb-bar h2 span { color: var(--steel); }
.jb-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jb-f[hidden] { display: none; }
.jb-f select { appearance: none; -webkit-appearance: none; min-width: 180px; padding: 10px 40px 10px 14px; border: 1px solid var(--line-2); border-radius: 0; color: var(--ash); font: 400 0.9375rem/1.3 var(--f-sans); cursor: pointer; transition: border-color 0.15s;
  background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A968F' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center; }
.jb-f select:hover, .jb-f select:focus-visible { border-color: rgba(243, 238, 230, 0.5); }
.jb-clear { background: none; border: 0; padding: 10px 6px; color: var(--steel); cursor: pointer; }
.jb-clear:hover { color: var(--ash); }
.jb-clear[hidden] { display: none; }
.jb-g { margin-top: clamp(28px, 3.5vw, 44px); }
.jb-g[hidden], .jb-g li[hidden] { display: none; }
.jb-gh { display: flex; gap: 12px; align-items: baseline; color: var(--ash); font-weight: 400; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.jb-gh [data-n] { color: var(--steel); }
.jb-g ul, .jb-rows { list-style: none; margin: 0; padding: 0; }
.jb-g a, .jb-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 6px 32px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--line); }
.jb-g .t, .jb-rows .t { font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.25; letter-spacing: -0.015em; color: rgba(243, 238, 230, 0.9); transition: color 0.15s; }
.jb-g .m, .jb-rows .m { color: var(--steel); font-size: 0.9375rem; white-space: nowrap; }
.jb-g .ar, .jb-rows .ar { justify-self: end; font-family: var(--f-mono); color: var(--steel); transition: color 0.15s, transform 0.25s var(--nav-ease); }
.jb-g a:hover .t, .jb-rows a:hover .t, .jb-g a:focus-visible .t { color: var(--ash); }
.jb-g a:hover .ar, .jb-rows a:hover .ar, .jb-g a:focus-visible .ar { color: var(--torch); transform: translateX(4px); }
.jb-none { padding-block: 28px; color: var(--steel); border-bottom: 1px solid var(--line); }
.jb-none[hidden] { display: none; }
.jb-reset { background: none; border: 0; padding: 0; color: var(--ash); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.jb-open { margin-top: clamp(32px, 4vw, 48px); color: var(--steel); }
.jb-open a, .jp-fine a, .jp-done a { color: var(--ash); text-decoration: underline; text-underline-offset: 3px; }

.jp-hd .in { padding-block: clamp(24px, 3.5vw, 44px) clamp(32px, 4vw, 56px); display: grid; gap: 16px; justify-items: start; }
.jp-back { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--steel); margin-bottom: clamp(8px, 2.5vw, 32px); }
.jp-back:hover { color: var(--ash); }
.jp-hd h1 { font-weight: 500; font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance; }
.jp-meta { color: var(--steel); }
.jp-body { border-top: 1px solid var(--line); }
.jp-body > .in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(32px, 4vw, 56px) clamp(72px, 9vw, 128px); }
.jp-side { position: sticky; top: calc(var(--bar) + 24px); display: grid; gap: 28px; }
.jp-side dl { margin: 0; display: grid; gap: 20px; }
.jp-side dt { color: var(--steel); margin-bottom: 6px; }
.jp-side dd { margin: 0; }
.jp-side .btn { justify-content: space-between; }
.jp-tabs { display: flex; gap: 32px; margin-bottom: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--line); }
.jp-tabs[hidden], .jp-pane[hidden], .jp-done[hidden], .jp-err[hidden] { display: none; }
.jp-tabs button { position: relative; padding: 4px 0 16px; background: none; border: 0; color: var(--steel); font: 500 1rem/1 var(--f-sans); cursor: pointer; transition: color 0.15s; }
.jp-tabs button:hover, .jp-tabs button[aria-selected="true"] { color: var(--ash); }
.jp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--torch); }
.jp-body:not(.tabbed) #application { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.jp-pane { scroll-margin-top: calc(var(--bar) + 24px); }
.jp-prose { max-width: 700px; font-size: 1.0625rem; line-height: 1.7; color: rgba(243, 238, 230, 0.84); }
.jp-prose > * + * { margin-top: 1em; }
.jp-prose h2 { color: var(--ash); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; letter-spacing: -0.02em; margin-top: 2em; }
.jp-prose h2 + * { margin-top: 0.75em; }
.jp-prose p { text-wrap: pretty; }
.jp-prose strong { color: var(--ash); font-weight: 600; }
.jp-prose a:not(.btn) { color: var(--ash); text-decoration: underline; text-underline-offset: 3px; }
.jp-prose ul, .jp-prose ol { list-style: none; margin-bottom: 0; padding: 0; display: grid; gap: 10px; }
.jp-prose ul li { position: relative; padding-left: 22px; }
.jp-prose ul li::before { content: ""; position: absolute; left: 1px; top: 0.66em; width: 6px; height: 6px; background: var(--torch); }
.jp-prose ol { counter-reset: n; }
.jp-prose ol li { counter-increment: n; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; }
.jp-prose ol li::before { content: counter(n, decimal-leading-zero); font: 400 0.6875rem/1 var(--f-mono); letter-spacing: 0.08em; color: var(--steel); }
.jp-prose .jp-go { margin-top: clamp(36px, 4vw, 52px); }
.jp-ah { font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; outline: none; }
.jp-note { max-width: 60ch; margin-top: 12px; color: rgba(243, 238, 230, 0.72); }
.jp-form { display: grid; gap: 20px; max-width: 700px; margin-top: 28px; }
.jp-form textarea { resize: vertical; min-height: 140px; }
.jp-form .btn { justify-self: start; }
.jp-err { color: var(--torch); }
.jp-fine { color: var(--steel); font-size: 0.875rem; }
.jp-done { display: grid; gap: 10px; max-width: 700px; margin-top: 28px; padding: 24px 26px; background: var(--graphite); border-left: 3px solid var(--torch); }
.jp-done h3 { font-weight: 500; font-size: 1.25rem; outline: none; }
.jp-done p { color: rgba(243, 238, 230, 0.78); }
.jp-more { border-top: 1px solid var(--line); }
.jp-more .in { padding-block: clamp(48px, 6vw, 80px) clamp(64px, 8vw, 112px); }
.jp-more-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--steel); }
.jp-more-top h2 { font-weight: 400; }
.jp-more-top a:hover { color: var(--ash); }

.mf-list .in { padding-bottom: clamp(32px, 4vw, 56px); }
.mf-list ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.mf-list li { display: grid; grid-template-columns: 76px minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 64px); align-items: baseline; padding-block: clamp(28px, 3.5vw, 48px); border-bottom: 1px solid var(--line); }
.mf-list .no { color: var(--torch); }
.mf-list li h2 { font: 500 clamp(1.75rem, 1.15rem + 1.9vw, 2.875rem)/1.06 var(--f-pixel); letter-spacing: -0.01em; text-wrap: balance; }
.mf-list li p { max-width: 46ch; font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.6; color: rgba(243, 238, 230, 0.78); text-wrap: pretty; }
.mf-end .in { display: grid; gap: 24px; justify-items: start; padding-block: clamp(40px, 5vw, 72px) clamp(72px, 9vw, 128px); }
.mf-end p { max-width: 34ch; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.35; letter-spacing: -0.015em; text-wrap: balance; }
.mf-link .in { padding-bottom: clamp(64px, 8vw, 112px); }
.stub-list:has(+ .mf-link) .in { padding-bottom: 0; }
.stub-list + .mf-link .in { padding-top: clamp(32px, 4vw, 56px); }
.mf-link a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: clamp(24px, 3vw, 40px); background: var(--graphite); border-left: 3px solid var(--torch); }
.mf-link .mono { color: var(--steel); }
.mf-link b { grid-column: 1; font: 500 clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem)/1.08 var(--f-pixel); text-wrap: balance; }
.mf-link .ar { grid-column: 2; grid-row: 1 / span 2; font-family: var(--f-mono); font-size: 1.25rem; color: var(--torch); transition: transform 0.25s var(--nav-ease); }
.mf-link a:hover .ar, .mf-link a:focus-visible .ar { transform: translateX(6px); }

@media (max-width: 900px) {
  .jp-body > .in { grid-template-columns: 1fr; }
  .jp-side { position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
  .jp-side dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
}
@media (max-width: 760px) {
  .mf-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .mf-list li p { grid-column: 2; }
}
@media (max-width: 640px) {
  .jb-g a, .jb-rows a { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 16px; padding-block: 18px; }
  .jb-g .m, .jb-rows .m { grid-row: 2; white-space: normal; font-size: 0.875rem; }
  .jb-g .ar, .jb-rows .ar { grid-column: 2; grid-row: 1 / span 2; }
  .jb-f { width: 100%; }
  .jb-f label { flex: 1 1 140px; }
  .jb-f select { width: 100%; min-width: 0; }
  .jp-side { grid-template-columns: 1fr; }
  .jp-side .btn, .jp-form .btn { justify-self: stretch; }
  .jp-tabs { gap: 24px; }
  .mf-link a { grid-template-columns: minmax(0, 1fr) 24px; }
}
/* Privacy policy and terms of use: a dark header, then the text with a contents list beside it */
.lg-hd .in { padding-block: clamp(48px, 7vw, 104px) clamp(32px, 4vw, 56px); display: grid; gap: clamp(16px, 2vw, 22px); justify-items: start; }
.lg-hd h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.75rem); max-width: 16ch; }
.lg-hd .lede { font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.3125rem); line-height: 1.5; max-width: 54ch; color: rgba(243, 238, 230, 0.86); }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.8125rem; color: var(--steel); }
.lg-meta a { color: var(--ash); border-bottom: 1px solid var(--line-2); transition: border-color 0.15s; }
.lg-meta a:hover { border-color: var(--torch); }
.lg-main .in { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 720px); gap: clamp(32px, 6vw, 112px); padding-block: clamp(32px, 4vw, 56px) clamp(72px, 9vw, 128px); border-top: 1px solid var(--line); }
.lg-toc { position: sticky; top: calc(var(--bar) + 24px); align-self: start; max-height: calc(100vh - var(--bar) - 48px); overflow: auto; }
.lg-toc .mono { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; }
.lg-toc ol { list-style: none; padding: 0; counter-reset: lg; display: grid; gap: 2px; }
.lg-toc li { counter-increment: lg; }
.lg-toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 5px 0; font-size: 0.9375rem; line-height: 1.35; color: rgba(243, 238, 230, 0.72); transition: color 0.15s; }
.lg-toc a::before { content: counter(lg, decimal-leading-zero); font: 400 0.75rem/1.8 var(--f-mono); color: var(--steel); }
.lg-toc a:hover, .lg-toc a.on { color: var(--ash); }
.lg-toc a.on::before { color: var(--torch); }
.lg-body { counter-reset: lgs; font-size: 1.0625rem; line-height: 1.7; color: rgba(243, 238, 230, 0.82); }
.lg-body h2 { counter-increment: lgs; display: flex; gap: 14px; align-items: baseline; margin: clamp(40px, 5vw, 64px) 0 16px; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 500; font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ash); scroll-margin-top: calc(var(--bar) + 24px); }
.lg-body h2::before { content: counter(lgs, decimal-leading-zero); font: 400 0.8125rem/1 var(--f-mono); color: var(--torch); }
.lg-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.lg-body p, .lg-body ul, .lg-body ol, .lg-body figure { margin: 0 0 16px; max-width: 68ch; text-wrap: pretty; }
.lg-body ul { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.lg-body ul li { position: relative; padding-left: 22px; }
.lg-body ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; background: var(--torch); }
.lg-body strong { color: var(--ash); font-weight: 500; }
.lg-body a { color: var(--ash); border-bottom: 1px solid var(--line-2); }
.lg-body a:hover { border-color: var(--torch); }
.lg-body .tbl-w { overflow-x: auto; border: 1px solid var(--line); }
.lg-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.lg-body th, .lg-body td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lg-body tbody tr:last-child > * { border-bottom: 0; }
.lg-body thead th { font: 400 0.6875rem/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); background: var(--graphite); }
.lg-body tbody th { font-weight: 500; color: var(--ash); }
.lg .tbc { background: rgba(240, 100, 42, 0.18); color: var(--ash); padding: 0 3px; box-shadow: inset 0 -1px 0 var(--torch); }
@media (max-width: 900px) {
  .lg-main .in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lg-toc { position: static; max-height: none; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .lg-toc ol { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (max-width: 520px) {
  .lg-toc ol { grid-template-columns: minmax(0, 1fr); }
  .lg-body th, .lg-body td { padding: 10px 12px; }
  .lg-body table { min-width: 520px; }
}
/* Press kit: the legal pages' dark header, then numbered sections: in brief, facts, logo, colour, type, founder, contact */
.pk-sec .in { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.pk-sec:last-of-type .in { padding-bottom: clamp(72px, 9vw, 128px); }
.pk-h { display: grid; gap: 10px; align-content: start; }
.pk-h .mono { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--torch); }
.pk-h h2 { font-weight: 500; font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.2; }
.pk-h p { color: var(--steel); font-size: 0.9375rem; line-height: 1.5; max-width: 34ch; }
.pk-b { min-width: 0; display: grid; gap: 20px; align-content: start; }
.pk-copy { display: grid; gap: 8px; }
.pk-copy .mono { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.pk-copy p { font-size: 1.0625rem; line-height: 1.65; color: rgba(243, 238, 230, 0.86); max-width: 68ch; text-wrap: pretty; }
.pk-copy + .pk-copy { padding-top: 20px; border-top: 1px solid var(--line); }
.pk-facts { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); border-top: 1px solid var(--line); }
.pk-facts dt, .pk-facts dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.pk-facts dt { font: 400 0.75rem/1.9 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
.pk-facts dd { color: var(--ash); }
.pk-facts a, .pk-copy a, .pk-who a, .pk-mail a { color: var(--ash); border-bottom: 1px solid var(--line-2); transition: border-color 0.15s; }
.pk-facts a:hover, .pk-copy a:hover, .pk-who a:hover, .pk-mail a:hover { border-color: var(--torch); }
.pk-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pk-logo { margin: 0; display: grid; grid-template-rows: minmax(180px, 1fr) auto; border: 1px solid var(--line); }
.pk-art { display: grid; place-items: center; padding: 36px 24px; }
.pk-art img { image-rendering: pixelated; width: auto; max-width: 100%; }
.pk-art .w { height: 72px; }   /* 4x the 18 px grid */
.pk-art .c { height: 108px; }  /* 6x */
.pk-art .l, .pk-art .s { image-rendering: auto; }
.pk-art .l { height: 60px; }
.pk-art .s { height: 112px; }
.pk-logo figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 0.875rem; }
.pk-dl { display: flex; gap: 14px; font: 400 0.75rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.pk-dl a { color: var(--steel); transition: color 0.15s; }
.pk-dl a:hover { color: var(--torch); }
.pk-rules { display: grid; gap: 8px; padding: 0; list-style: none; color: rgba(243, 238, 230, 0.82); max-width: 68ch; }
.pk-rules li { position: relative; padding-left: 22px; line-height: 1.55; }
.pk-rules li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; background: var(--torch); }
.pk-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk .lede a { border-bottom: 1px solid var(--line-2); transition: border-color 0.15s; }
.pk .lede a:hover { border-color: var(--torch); }
.pk-sw figure { margin: 0; border: 1px solid var(--line); }
.pk-sw i { display: block; height: 96px; }
.pk-sw figcaption { display: grid; gap: 2px; padding: 10px 12px; font-size: 0.875rem; }
.pk-sw figcaption span { font: 400 0.75rem/1.5 var(--f-mono); color: var(--steel); font-variant-numeric: tabular-nums; }
.pk-type { display: grid; gap: 8px; }
.pk-type div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pk-type div:first-child { border-top: 1px solid var(--line); }
.pk-type b { font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; }
.pk-type span { font: 400 0.75rem/1.5 var(--f-mono); color: var(--steel); text-align: right; }
.pk-who { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; }
.pk-who img { width: 100%; height: auto; display: block; filter: grayscale(1); background: var(--graphite); }
.pk-who div { display: grid; gap: 6px; }
.pk-who b { font-weight: 500; font-size: 1.375rem; }
.pk-who .mono { font-size: 0.8125rem; color: var(--steel); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pk-mail { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
@media (max-width: 900px) {
  .pk-sec .in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pk-logos { grid-template-columns: minmax(0, 1fr); }
  .pk-sw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .pk-facts { grid-template-columns: minmax(0, 1fr); }
  .pk-facts dt { padding-bottom: 0; border-bottom: 0; }
  .pk-who { grid-template-columns: minmax(0, 1fr); }
  .pk-type div { grid-template-columns: minmax(0, 1fr); }
  .pk-type span { text-align: left; }
  .pk-art .w { height: 54px; }
  .pk-art .l { height: 44px; }
  .pk-art .s { height: 88px; }
}
/* Integrations: a searchable database of 1,000 integrations */
.ig .lg-hd .in { padding-block: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 36px); gap: clamp(12px, 1.4vw, 16px); }  /* a short header so the list shows in the first screen (Paul, 22:16) */
.ig .lg-hd h1 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem); max-width: 22ch; }
.ig .lg-hd .lede { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); max-width: 72ch; }
.igdb { border-top: 1px solid var(--line); scroll-margin-top: var(--bar); }
.igdb > .in { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding-block: clamp(24px, 3vw, 40px) clamp(72px, 9vw, 128px); }
.igdb-side { min-width: 0; position: sticky; top: calc(var(--bar) + 24px); align-self: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-height: calc(100vh - var(--bar) - 48px); overflow: auto; scrollbar-width: thin; }
.igdb-f { display: grid; gap: 10px; }
.igdb-f[hidden] { display: none; }
.igdb-f label { display: block; min-width: 0; }
.igdb-q { position: relative; }
.igdb-q svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--steel); stroke-width: 1.6; pointer-events: none; }
.igdb-f input, .igdb-f select { width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 0; background: var(--night); color: var(--ash); font: 400 0.9375rem/1.3 var(--f-sans); transition: border-color 0.15s; }
.igdb-f input { padding-left: 38px; }
.igdb-f input::placeholder { color: var(--steel); }
.igdb-f input::-webkit-search-cancel-button { filter: invert(0.7); }
.igdb-f select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A968F' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center; }
.igdb-f input:hover, .igdb-f select:hover, .igdb-f input:focus-visible, .igdb-f select:focus-visible { border-color: rgba(243, 238, 230, 0.5); outline: none; }
.igdb-cats > p { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-bottom: 10px; }
.igdb-cats ol { list-style: none; margin: 0; padding: 0; display: grid; }
.igdb-cats a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 0 6px 14px; border-left: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.3; color: rgba(243, 238, 230, 0.72); transition: color 0.15s, border-color 0.15s; }
.igdb-cats a b { font: 400 0.75rem/1 var(--f-mono); color: var(--steel); }
.igdb-cats a:hover { color: var(--ash); }
.igdb-cats a.on { color: var(--ash); border-left-color: var(--torch); }
.igdb-cats a.on b { color: var(--torch); }
.igdb-cats li[hidden] { display: none; }
.igdb-ask { justify-self: start; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); color: var(--ash); font-size: 0.9375rem; transition: border-color 0.15s; }
.igdb-ask:hover { border-color: var(--torch); }
.igdb-ask .ar { color: var(--torch); }
.igdb-main { min-width: 0; display: grid; gap: clamp(36px, 4vw, 56px); align-content: start; min-height: calc(100vh - var(--bar) - 48px); }  /* a short result keeps the page its height (Paul, 20:11) */
.igdb-count { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-bottom: calc(-1 * clamp(16px, 2vw, 28px)); }
.igdb-count b { font-weight: 400; color: var(--ash); }
.igdb-g { scroll-margin-top: calc(var(--bar) + 24px); }
.igdb-g[hidden] { display: none; }
.igdb-g h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; }
.igdb-g h2 b { font: 400 0.75rem/1 var(--f-mono); color: var(--steel); }
.igdb-g ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.igdb-g li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 64px; padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.igdb-g li[hidden] { display: none; }
.igdb-g .mk { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--graphite); color: var(--ash); font: 400 1rem/1 var(--f-pixel); }
.igdb-g .mk.lg { border-color: transparent; background: var(--ash); }
.igdb-g .mk.lg i { width: 30px; height: 30px; background: 0 0 / 480px auto no-repeat; }
.igdb-g li > span:last-child { font-size: 0.9375rem; line-height: 1.3; color: rgba(243, 238, 230, 0.9); overflow-wrap: anywhere; }
.igdb-none { display: grid; gap: 14px; justify-items: start; padding: 28px 0; border-top: 1px solid var(--line); }
.igdb-none[hidden] { display: none; }
.igdb-none p { font-size: 1.0625rem; color: rgba(243, 238, 230, 0.86); }
.igdb-none button { padding: 0; border: 0; background: none; color: var(--steel); font: inherit; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the case studies' closing call (their styles live on the case pages only) */
.ig .cs-cta { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--line); }
.ig .cs-cta .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.ig .cs-cta h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); max-width: 14ch; }
.ig .cs-cta p { color: var(--steel); margin-top: 16px; font-size: 1.0625rem; }
@media (max-width: 860px) {
  .igdb > .in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .igdb-side { position: static; max-height: none; overflow: visible; }
  .igdb-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .igdb-cats ol { display: flex; gap: 6px; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .igdb-cats ol::-webkit-scrollbar { display: none; }
  .igdb-cats li { flex: none; }
  .igdb-cats a { display: flex; gap: 8px; white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line); }
  .igdb-cats a.on { border-color: var(--torch); }
  .igdb-count { margin-bottom: -12px; }
}
@media (max-width: 640px) { .ig .cs-cta .in { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 560px) {
  .igdb-f { grid-template-columns: minmax(0, 1fr); }
  .igdb-g ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .igdb-g li { grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; min-height: 0; padding: 14px 12px; }
  .igdb-g li > span:last-child { font-size: 0.875rem; }
}
.igdb-g .mk.lg i.s0 { background-image: url(img/ig-logos-0.webp); }
.igdb-g .mk.lg i.s1 { background-image: url(img/ig-logos-1.webp); }
.igdb-g .mk.lg i.s2 { background-image: url(img/ig-logos-2.webp); }
.igdb-g.lz .mk.lg i { background-image: none; }
/* Blog: the listing page (blog.html), newest post first; each whole row opens its post */
.bl-hd .in { padding-block: clamp(48px, 7vw, 104px) clamp(32px, 4vw, 56px); display: grid; gap: clamp(16px, 2vw, 22px); justify-items: start; }
.bl-hd h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.75rem); max-width: 16ch; }
.bl-hd .lede { font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.3125rem); line-height: 1.5; max-width: 54ch; color: rgba(243, 238, 230, 0.86); }
.bl-list .in { padding-bottom: clamp(64px, 8vw, 112px); }
.bl-bar { display: flex; align-items: center; gap: 0.5em; min-height: 64px; margin: 0; padding-block: 12px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); color: var(--ash); font-weight: 400; }
.bl-bar span { color: var(--steel); }
.bl-posts { list-style: none; margin: 0; padding: 0; }
.bl-posts li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) 28px; gap: 10px clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(28px, 3.2vw, 44px); border-bottom: 1px solid var(--line); }
.bl-m { grid-row: 1 / span 3; display: grid; gap: 8px; align-content: start; margin: 0; padding-top: 0.5em; color: var(--steel); }
.bl-m .tag { display: inline-flex; align-items: center; gap: 10px; color: var(--c, var(--ash)); }
.bl-m .tag::before { content: ""; width: 8px; height: 8px; background: var(--c, var(--torch)); flex: none; }
.eyebrow.tag { color: var(--c); }
.eyebrow.tag::before { background: var(--c); }
.bl-posts h3 { grid-column: 2; margin: 0; font-weight: 500; font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.375rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.bl-posts h3 a { color: rgba(243, 238, 230, 0.92); transition: color 0.15s; }
.bl-posts h3 a::after { content: ""; position: absolute; inset: 0; }
.bl-d { grid-column: 2; margin: 0; max-width: 62ch; color: rgba(243, 238, 230, 0.72); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.55; }
.bl-by { grid-column: 2; margin: 6px 0 0; color: var(--steel); font-size: 0.875rem; }
.bl-posts .ar { grid-column: 3; grid-row: 1; justify-self: end; padding-top: 0.4em; font-family: var(--f-mono); color: var(--steel); transition: color 0.15s, transform 0.25s var(--nav-ease); }
.bl-posts li:hover h3 a, .bl-posts h3 a:focus-visible { color: var(--ash); }
.bl-posts li:hover .ar, .bl-posts li:has(a:focus-visible) .ar { color: var(--torch); transform: translateX(4px); }
@media (max-width: 760px) {
  .bl-posts li { grid-template-columns: minmax(0, 1fr) 20px; gap: 12px 16px; }
  .bl-m { grid-row: auto; grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px 0; padding-top: 0; }
  .bl-m span + span::before { content: "·"; margin-inline: 8px; }
  .bl-posts h3, .bl-d, .bl-by { grid-column: 1 / -1; }
  .bl-posts .ar { grid-column: 2; grid-row: 1; padding-top: 0; }
}
/* Accept and pay: one proposal, then the signature box */
.ac-hd .in { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 3.5vw, 48px); display: grid; gap: clamp(14px, 1.8vw, 20px); justify-items: start; }
.ac-hd h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem); max-width: 18ch; }
.ac-hd .lede { font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.25rem); line-height: 1.5; max-width: 56ch; color: rgba(243, 238, 230, 0.86); }
.ac-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 0.8125rem; color: var(--steel); }
.ac-main .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: clamp(28px, 4vw, 56px) clamp(72px, 9vw, 128px); border-top: 1px solid var(--line); }
.ac-doc { font-size: 1.0625rem; line-height: 1.65; color: rgba(243, 238, 230, 0.84); max-width: 68ch; }
.ac-doc h2 { margin: clamp(32px, 4vw, 48px) 0 12px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.ac-doc h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.ac-doc p, .ac-doc ul, .ac-doc ol { margin: 0 0 14px; }
.ac-doc ul, .ac-doc ol { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.ac-doc ul li { position: relative; padding-left: 22px; }
.ac-doc ul li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; background: var(--torch); }
.ac-doc ol { counter-reset: ac; }
.ac-doc ol li { counter-increment: ac; display: grid; grid-template-columns: 30px minmax(0, 1fr); }
.ac-doc ol li::before { content: counter(ac, decimal-leading-zero); font: 400 0.8125rem/1.95 var(--f-mono); color: var(--torch); }
.ac-doc a { color: var(--ash); border-bottom: 1px solid var(--line-2); }
.ac-doc a:hover { border-color: var(--torch); }
.ac-doc strong { color: var(--ash); font-weight: 500; }
.ac-price { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 1rem; }
.ac-price th, .ac-price td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ac-price th { font: 500 0.75rem/1.2 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
.ac-price td.n { font-family: var(--f-mono); color: var(--ash); white-space: nowrap; }
.ac-sign { position: sticky; top: calc(var(--bar) + 24px); border: 1px solid var(--line-2); background: #161513; padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 14px; }
.ac-sign h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.ac-sign .sum { display: grid; gap: 6px; font-size: 0.9375rem; color: rgba(243, 238, 230, 0.8); }
.ac-sign .sum b { font-family: var(--f-mono); font-weight: 500; color: var(--ash); }
.ac-sign label { display: grid; gap: 6px; font-size: 0.8125rem; color: var(--steel); }
.ac-sign input[type=text], .ac-sign input[type=email] { font: 400 1rem/1.3 var(--f-sans); color: var(--ash); background: var(--night); border: 1px solid var(--line-2); padding: 11px 12px; width: 100%; }
.ac-sign input:focus-visible { outline: 2px solid var(--torch); outline-offset: 1px; }
.ac-sign .sig { font-family: var(--f-mono); }
.ac-sign .agree { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: rgba(243, 238, 230, 0.82); font-size: 0.875rem; line-height: 1.5; }
.ac-sign .agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--torch); }
.ac-sign .agree a { color: var(--ash); border-bottom: 1px solid var(--line-2); }
.ac-sign .btn { justify-content: center; width: 100%; }
.ac-sign .btn[disabled] { opacity: 0.55; cursor: progress; }
.ac-sign .fine { font-size: 0.75rem; line-height: 1.5; color: var(--steel); }
.ac-sign .err { color: #FF9C7A; font-size: 0.875rem; }
.ac-note { border: 1px solid var(--line-2); padding: 20px; display: grid; gap: 10px; }
.ac-note h2 { font-size: 1.25rem; font-weight: 500; }
.ac-note p { color: rgba(243, 238, 230, 0.82); }
.ac-preview { font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night); background: var(--torch); padding: 6px 8px; }
@media (max-width: 900px) { .ac-main .in { grid-template-columns: minmax(0, 1fr); } .ac-sign { position: static; } }